From 40a75d6c4b1b7e5d2d2f9f60f0c9da0b516b93e7 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:01:04 -0800
Subject: [PATCH] [FEATURE] Add interactive legend into charts #199 (#226)
 (#241)

* [FEATURE] Add interactive legend into charts #199

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Fix cypress test

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
(cherry picked from commit be6ac4ae78d3d99462c77a3a30799dfe418de765)

Co-authored-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 cypress/integration/4_findings.spec.js | 23 ++++++++++------
 public/pages/Overview/utils/helpers.ts | 38 ++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/cypress/integration/4_findings.spec.js b/cypress/integration/4_findings.spec.js
index eb51842a9..6eedc94f9 100644
--- a/cypress/integration/4_findings.spec.js
+++ b/cypress/integration/4_findings.spec.js
@@ -135,14 +135,21 @@ describe('Findings', () => {
     // Click on detector to be removed
     cy.contains('sample_detector').click({ force: true }, { timeout: 2000 });
 
-    // Click "Actions" button, the click "Delete"
-    cy.get('button').contains('Actions').click({ force: true }, { timeout: 2000 });
-    cy.contains('Delete').click({ force: true });
-
-    // Search for sample_detector, presumably deleted
-    cy.get(`[placeholder="Search threat detectors"]`).type('sample_detector').trigger('search');
+    cy.url().should('include', 'opensearch_security_analytics_dashboards#/detector-details');
 
-    // Confirm sample_detector no longer exists
-    cy.contains('There are no existing detectors.');
+    // Click "Actions" button, the click "Delete"
+    cy.get('button')
+      .contains('Actions')
+      .click({ force: true }, { timeout: 2000 })
+      .then(() => {
+        // Confirm arrival at detectors page
+        cy.contains('Delete').click({ force: true });
+
+        // Search for sample_detector, presumably deleted
+        cy.get(`[placeholder="Search threat detectors"]`).type('sample_detector').trigger('search');
+
+        // Confirm sample_detector no longer exists
+        cy.contains('There are no existing detectors.');
+      });
   });
 });
diff --git a/public/pages/Overview/utils/helpers.ts b/public/pages/Overview/utils/helpers.ts
index 9427ba02a..a58be0047 100644
--- a/public/pages/Overview/utils/helpers.ts
+++ b/public/pages/Overview/utils/helpers.ts
@@ -16,6 +16,32 @@ export type DateOpts = {
   dateFormat: string;
 };
 
+/**
+ * Legend selection config for the chart layer
+ */
+const legendSelectionCfg = {
+  selection: {
+    series: {
+      type: 'multi',
+      encodings: ['color'],
+      on: 'click',
+      bind: 'legend',
+    },
+  },
+  encoding: {
+    opacity: {
+      condition: { selection: 'series', value: 1 },
+      value: 0.2,
+    },
+  },
+};
+
+/**
+ * Adds interactive legends to the chart layer
+ * @param layer
+ */
+const addInteractiveLegends = (layer: any) => _.defaultsDeep(layer, legendSelectionCfg);
+
 function getVisualizationSpec(description: string, data: any, layers: any[]): TopLevelSpec {
   return {
     config: {
@@ -84,10 +110,10 @@ export function getOverviewVisualizationSpec(
     'Plot showing average data with raw values in the background.',
     visualizationData,
     [
-      {
+      addInteractiveLegends({
         mark: 'bar',
         encoding: findingsEncoding,
-      },
+      }),
       {
         mark: {
           type: 'line',
@@ -163,7 +189,7 @@ export function getFindingsVisualizationSpec(
   }
 ) {
   return getVisualizationSpec('Findings data overview', visualizationData, [
-    {
+    addInteractiveLegends({
       mark: 'bar',
       encoding: {
         tooltip: [{ field: 'finding', aggregate: 'sum', type: 'quantitative', title: 'Findings' }],
@@ -192,7 +218,7 @@ export function getFindingsVisualizationSpec(
           },
         },
       },
-    },
+    }),
   ]);
 }
 
@@ -205,7 +231,7 @@ export function getAlertsVisualizationSpec(
   }
 ) {
   return getVisualizationSpec('Alerts data overview', visualizationData, [
-    {
+    addInteractiveLegends({
       mark: 'bar',
       encoding: {
         tooltip: [{ field: 'alert', aggregate: 'sum', title: 'Alerts' }],
@@ -235,7 +261,7 @@ export function getAlertsVisualizationSpec(
           },
         },
       },
-    },
+    }),
   ]);
 }