feat(dashboard): Add cross filter from context menu (#23141)

apache · Feb 23, 2023 · ee1952e · ee1952e
1 parent 95eb8d7
commit ee1952e
Show file tree

Hide file tree

Showing 26 changed files with 891 additions and 748 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ExtraFormData } from '../../query';
+import { BinaryQueryObjectFilterClause, ExtraFormData } from '../../query';
 import { JsonObject } from '../..';
 
 export type HandlerFunction = (...args: unknown[]) => void;
@@ -33,6 +33,14 @@ export enum Behavior {
   DRILL_TO_DETAIL = 'DRILL_TO_DETAIL',
 }
 
+export interface ContextMenuFilters {
+  crossFilter?: {
+    dataMask: DataMask;
+    isCurrentValueSelected?: boolean;
+  };
+  drillToDetail?: BinaryQueryObjectFilterClause[];
+}
+
 export enum AppSection {
   EXPLORE = 'EXPLORE',
   DASHBOARD = 'DASHBOARD',

diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
@@ -24,8 +24,6 @@ import {
   getNumberFormatter,
   getSequentialSchemeRegistry,
   CategoricalColorNamespace,
-  logging,
-  t,
 } from '@superset-ui/core';
 import Datamap from 'datamaps/dist/datamaps.world.min';
 import { ColorBy } from './utils';
@@ -114,39 +112,57 @@ function WorldMap(element, props) {
     mapData[d.country] = d;
   });
 
+  const getCrossFilterDataMask = source => {
+    const selected = Object.values(filterState.selectedValues || {});
+    const key = source.id || source.country;
+    const country =
+      countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
+
+    if (!country) {
+      return undefined;
+    }
+
+    let values;
+    if (selected.includes(key)) {
+      values = [];
+    } else {
+      values = [country];
+    }
+
+    return {
+      dataMask: {
+        extraFormData: {
+          filters: values.length
+            ? [
+                {
+                  col: entity,
+                  op: 'IN',
+                  val: values,
+                },
+              ]
+            : [],
+        },
+        filterState: {
+          value: values.length ? values : null,
+          selectedValues: values.length ? [key] : null,
+        },
+      },
+      isCurrentValueSelected: selected.includes(key),
+    };
+  };
+
   const handleClick = source => {
     if (!emitCrossFilters) {
       return;
     }
     const pointerEvent = d3.event;
     pointerEvent.preventDefault();
-    const key = source.id || source.country;
-    let val =
-      countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
-    if (!val) {
-      return;
-    }
-    if (val === filterState.value) {
-      val = null;
-    }
+    getCrossFilterDataMask(source);
 
-    setDataMask({
-      extraFormData: {
-        filters: val
-          ? [
-              {
-                col: entity,
-                op: 'IN',
-                val: [val],
-              },
-            ]
-          : [],
-      },
-      filterState: {
-        value: val ?? null,
-        selectedValues: val ? [key] : [],
-      },
-    });
+    const dataMask = getCrossFilterDataMask(source)?.dataMask;
+    if (dataMask) {
+      setDataMask(dataMask);
+    }
   };
 
   const handleContextMenu = source => {
@@ -155,24 +171,21 @@ function WorldMap(element, props) {
     const key = source.id || source.country;
     const val =
       countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
+    let drillToDetailFilters;
     if (val) {
-      const filters = [
+      drillToDetailFilters = [
         {
           col: entity,
           op: '==',
           val,
           formattedVal: val,
         },
       ];
-      onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
-    } else {
-      logging.warn(
-        t(
-          `Unable to process right-click on %s. Check you chart configuration.`,
-        ),
-        key,
-      );
     }
+    onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
+      drillToDetail: drillToDetailFilters,
+      crossFilter: getCrossFilterDataMask(source),
+    });
   };
 
   const map = new Datamap({

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -220,8 +220,8 @@ class BigNumberVis extends React.PureComponent<BigNumberVizProps> {
           const { data } = eventParams;
           if (data) {
             const pointerEvent = eventParams.event.event;
-            const filters: BinaryQueryObjectFilterClause[] = [];
-            filters.push({
+            const drillToDetailFilters: BinaryQueryObjectFilterClause[] = [];
+            drillToDetailFilters.push({
               col: this.props.formData?.granularitySqla,
               grain: this.props.formData?.timeGrainSqla,
               op: '==',
@@ -231,7 +231,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVizProps> {
             this.props.onContextMenu(
               pointerEvent.clientX,
               pointerEvent.clientY,
-              filters,
+              { drillToDetail: drillToDetailFilters },
             );
           }
         }

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts
@@ -19,8 +19,8 @@
 
 import { EChartsCoreOption } from 'echarts';
 import {
-  BinaryQueryObjectFilterClause,
   ChartDataResponseResult,
+  ContextMenuFilters,
   DataRecordValue,
   NumberFormatter,
   QueryFormData,
@@ -89,7 +89,7 @@ export type BigNumberVizProps = {
   onContextMenu?: (
     clientX: number,
     clientY: number,
-    filters?: BinaryQueryObjectFilterClause[],
+    filters?: ContextMenuFilters,
   ) => void;
   xValueFormatter?: TimeFormatter;
   formData?: BigNumberWithTrendlineFormData;

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx
@@ -16,60 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 import { BoxPlotChartTransformedProps } from './types';
 
 export default function EchartsBoxPlot(props: BoxPlotChartTransformedProps) {
-  const {
-    height,
-    width,
-    echartOptions,
-    setDataMask,
-    labelMap,
-    groupby,
-    selectedValues,
-    refs,
-    emitCrossFilters,
-  } = props;
-  const handleChange = useCallback(
-    (values: string[]) => {
-      if (!emitCrossFilters) {
-        return;
-      }
+  const { height, width, echartOptions, selectedValues, refs } = props;
 
-      const groupbyValues = values.map(value => labelMap[value]);
-
-      setDataMask({
-        extraFormData: {
-          filters:
-            values.length === 0
-              ? []
-              : groupby.map((col, idx) => {
-                  const val = groupbyValues.map(v => v[idx]);
-                  if (val === null || val === undefined)
-                    return {
-                      col,
-                      op: 'IS NULL',
-                    };
-                  return {
-                    col,
-                    op: 'IN',
-                    val: val as (string | number | boolean)[],
-                  };
-                }),
-        },
-        filterState: {
-          value: groupbyValues.length ? groupbyValues : null,
-          selectedValues: values.length ? values : null,
-        },
-      });
-    },
-    [groupby, labelMap, setDataMask, selectedValues],
-  );
-
-  const eventHandlers = allEventHandlers(props, handleChange);
+  const eventHandlers = allEventHandlers(props);
 
   return (
     <Echart

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx
@@ -16,60 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { FunnelChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsFunnel(props: FunnelChartTransformedProps) {
-  const {
-    height,
-    width,
-    echartOptions,
-    setDataMask,
-    labelMap,
-    groupby,
-    selectedValues,
-    emitCrossFilters,
-    refs,
-  } = props;
-  const handleChange = useCallback(
-    (values: string[]) => {
-      if (!emitCrossFilters) {
-        return;
-      }
+  const { height, width, echartOptions, selectedValues, refs } = props;
 
-      const groupbyValues = values.map(value => labelMap[value]);
-
-      setDataMask({
-        extraFormData: {
-          filters:
-            values.length === 0
-              ? []
-              : groupby.map((col, idx) => {
-                  const val = groupbyValues.map(v => v[idx]);
-                  if (val === null || val === undefined)
-                    return {
-                      col,
-                      op: 'IS NULL',
-                    };
-                  return {
-                    col,
-                    op: 'IN',
-                    val: val as (string | number | boolean)[],
-                  };
-                }),
-        },
-        filterState: {
-          value: groupbyValues.length ? groupbyValues : null,
-          selectedValues: values.length ? values : null,
-        },
-      });
-    },
-    [groupby, labelMap, setDataMask, selectedValues],
-  );
-
-  const eventHandlers = allEventHandlers(props, handleChange);
+  const eventHandlers = allEventHandlers(props);
 
   return (
     <Echart

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx
@@ -16,60 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 import { GaugeChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsGauge(props: GaugeChartTransformedProps) {
-  const {
-    height,
-    width,
-    echartOptions,
-    setDataMask,
-    labelMap,
-    groupby,
-    selectedValues,
-    emitCrossFilters,
-    refs,
-  } = props;
-  const handleChange = useCallback(
-    (values: string[]) => {
-      if (!emitCrossFilters) {
-        return;
-      }
+  const { height, width, echartOptions, selectedValues, refs } = props;
 
-      const groupbyValues = values.map(value => labelMap[value]);
-
-      setDataMask({
-        extraFormData: {
-          filters:
-            values.length === 0
-              ? []
-              : groupby.map((col, idx) => {
-                  const val = groupbyValues.map(v => v[idx]);
-                  if (val === null || val === undefined)
-                    return {
-                      col,
-                      op: 'IS NULL',
-                    };
-                  return {
-                    col,
-                    op: 'IN',
-                    val: val as (string | number | boolean)[],
-                  };
-                }),
-        },
-        filterState: {
-          value: groupbyValues.length ? groupbyValues : null,
-          selectedValues: values.length ? values : null,
-        },
-      });
-    },
-    [groupby, labelMap, setDataMask, selectedValues],
-  );
-
-  const eventHandlers = allEventHandlers(props, handleChange);
+  const eventHandlers = allEventHandlers(props);
 
   return (
     <Echart