[FEATURE] Add interactive legend into charts #199 (#226) (#241)

* [FEATURE] Add interactive legend into charts #199

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Fix cypress test

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>
(cherry picked from commit be6ac4a)

Co-authored-by: Jovan Cvetkovic <[email protected]>

Author: opensearch-trigger-bot[bot]

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.');
+      });
   });
 });

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(
           },
         },
       },
-    },
+    }),
   ]);
 }