feat: Enable cross fitlers in WorldMap and Graph charts (apache#22886)

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -46,6 +46,9 @@ const propTypes = {
   showBubbles: PropTypes.bool,
   linearColorScheme: PropTypes.string,
   color: PropTypes.string,
+  setDataMask: PropTypes.func,
+  onContextMenu: PropTypes.func,
+  emitCrossFilters: PropTypes.bool,
 };
 
 const formatter = getNumberFormatter();
@@ -66,7 +69,10 @@ function WorldMap(element, props) {
     sliceId,
     theme,
     onContextMenu,
+    setDataMask,
     inContextMenu,
+    filterState,
+    emitCrossFilters,
   } = props;
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);
@@ -108,11 +114,47 @@ function WorldMap(element, props) {
     mapData[d.country] = d;
   });
 
+  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;
+    }
+
+    setDataMask({
+      extraFormData: {
+        filters: val
+          ? [
+              {
+                col: entity,
+                op: 'IN',
+                val: [val],
+              },
+            ]
+          : [],
+      },
+      filterState: {
+        value: val ?? null,
+        selectedValues: val ? [key] : [],
+      },
+    });
+  };
+
   const handleContextMenu = source => {
     const pointerEvent = d3.event;
     pointerEvent.preventDefault();
     const key = source.id || source.country;
-    const val = countryFieldtype === 'name' ? mapData[key]?.name : key;
+    const val =
+      countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
     if (val) {
       const filters = [
         {
@@ -178,7 +220,8 @@ function WorldMap(element, props) {
     done: datamap => {
       datamap.svg
         .selectAll('.datamaps-subunit')
-        .on('contextmenu', handleContextMenu);
+        .on('contextmenu', handleContextMenu)
+        .on('click', handleClick);
     },
   });
 
@@ -190,7 +233,26 @@ function WorldMap(element, props) {
       .selectAll('circle.datamaps-bubble')
       .style('fill', color)
       .style('stroke', color)
-      .on('contextmenu', handleContextMenu);
+      .on('contextmenu', handleContextMenu)
+      .on('click', handleClick);
+  }
+
+  if (filterState.selectedValues?.length > 0) {
+    d3.selectAll('path.datamaps-subunit')
+      .filter(
+        countryFeature =>
+          !filterState.selectedValues.includes(countryFeature.id),
+      )
+      .style('fill-opacity', theme.opacity.mediumLight);
+
+    // hack to ensure that the clicked country's color is preserved
+    // sometimes the fill color would get default grey value after applying cross filter
+    filterState.selectedValues.forEach(value => {
+      d3.select(`path.datamaps-subunit.${value}`).style(
+        'fill',
+        mapData[value]?.fillColor,
+      );
+    });
   }
 }
 

superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js

@@ -45,7 +45,7 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   useLegacyApi: true,
-  behaviors: [Behavior.DRILL_TO_DETAIL],
+  behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
 });
 
 export default class WorldMapChartPlugin extends ChartPlugin {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js

@@ -19,9 +19,17 @@
 import { rgb } from 'd3-color';
 
 export default function transformProps(chartProps) {
-  const { width, height, formData, queriesData, hooks, inContextMenu } =
-    chartProps;
-  const { onContextMenu } = hooks;
+  const {
+    width,
+    height,
+    formData,
+    queriesData,
+    hooks,
+    inContextMenu,
+    filterState,
+    emitCrossFilters,
+  } = chartProps;
+  const { onContextMenu, setDataMask } = hooks;
   const {
     countryFieldtype,
     entity,
@@ -49,6 +57,9 @@ export default function transformProps(chartProps) {
     colorScheme,
     sliceId,
     onContextMenu,
+    setDataMask,
     inContextMenu,
+    filterState,
+    emitCrossFilters,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx

@@ -16,64 +16,147 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
+import React, { useMemo } from 'react';
 import { EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { GraphChartTransformedProps } from './types';
 
+type DataRow = {
+  source?: string;
+  target?: string;
+  id?: string;
+  col: string;
+  name: string;
+};
+type Data = DataRow[];
 type Event = {
   name: string;
   event: { stop: () => void; event: PointerEvent };
-  data: { source: string; target: string };
+  data: DataRow;
+  dataType: 'node' | 'edge';
 };
 
-export default function EchartsGraph({
-  height,
-  width,
-  echartOptions,
-  formData,
-  onContextMenu,
-  refs,
-}: GraphChartTransformedProps) {
-  const eventHandlers: EventHandlers = {
-    contextmenu: (e: Event) => {
-      if (onContextMenu) {
-        e.event.stop();
-        const pointerEvent = e.event.event;
-        const data = (echartOptions as any).series[0].data as {
-          id: string;
-          name: string;
-        }[];
-        const sourceValue = data.find(item => item.id === e.data.source)?.name;
-        const targetValue = data.find(item => item.id === e.data.target)?.name;
-        if (sourceValue && targetValue) {
-          const filters: BinaryQueryObjectFilterClause[] = [
-            {
-              col: formData.source,
-              op: '==',
-              val: sourceValue,
-              formattedVal: sourceValue,
-            },
-            {
-              col: formData.target,
-              op: '==',
-              val: targetValue,
-              formattedVal: targetValue,
-            },
-          ];
-          onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
-        }
-      }
-    },
-  };
-  return (
-    <Echart
-      refs={refs}
-      height={height}
-      width={width}
-      echartOptions={echartOptions}
-      eventHandlers={eventHandlers}
-    />
-  );
-}
+const EchartsGraph = React.memo(
+  ({
+    height,
+    width,
+    echartOptions,
+    formData,
+    onContextMenu,
+    setDataMask,
+    filterState,
+    refs,
+    emitCrossFilters,
+  }: GraphChartTransformedProps) => {
+    const eventHandlers: EventHandlers = useMemo(
+      () => ({
+        click: (e: Event) => {
+          if (!emitCrossFilters || !setDataMask) {
+            return;
+          }
+          e.event.stop();
+          const data = (echartOptions as any).series[0].data as Data;
+          const node = data.find(item => item.id === e.data.id);
+          const val = filterState?.value === node?.name ? null : node?.name;
+          if (node?.col) {
+            setDataMask({
+              extraFormData: {
+                filters: val
+                  ? [
+                      {
+                        col: node.col,
+                        op: '==',
+                        val,
+                      },
+                    ]
+                  : [],
+              },
+              filterState: {
+                value: val,
+                selectedValues: [val],
+              },
+            });
+          }
+        },
+        contextmenu: (e: Event) => {
+          const handleNodeClick = (data: Data) => {
+            const node = data.find(item => item.id === e.data.id);
+            if (node?.name) {
+              return [
+                {
+                  col: node.col,
+                  op: '==' as const,
+                  val: node.name,
+                  formattedVal: node.name,
+                },
+              ];
+            }
+            return undefined;
+          };
+          const handleEdgeClick = (data: Data) => {
+            const sourceValue = data.find(
+              item => item.id === e.data.source,
+            )?.name;
+            const targetValue = data.find(
+              item => item.id === e.data.target,
+            )?.name;
+            if (sourceValue && targetValue) {
+              return [
+                {
+                  col: formData.source,
+                  op: '==' as const,
+                  val: sourceValue,
+                  formattedVal: sourceValue,
+                },
+                {
+                  col: formData.target,
+                  op: '==' as const,
+                  val: targetValue,
+                  formattedVal: targetValue,
+                },
+              ];
+            }
+            return undefined;
+          };
+          if (onContextMenu) {
+            e.event.stop();
+            const pointerEvent = e.event.event;
+            const data = (echartOptions as any).series[0].data as Data;
+            const filters =
+              e.dataType === 'node'
+                ? handleNodeClick(data)
+                : handleEdgeClick(data);
+
+            if (filters) {
+              onContextMenu(
+                pointerEvent.clientX,
+                pointerEvent.clientY,
+                filters,
+              );
+            }
+          }
+        },
+      }),
+      [
+        echartOptions,
+        emitCrossFilters,
+        filterState?.value,
+        formData.source,
+        formData.target,
+        onContextMenu,
+        setDataMask,
+      ],
+    );
+    return (
+      <Echart
+        refs={refs}
+        height={height}
+        width={width}
+        echartOptions={echartOptions}
+        eventHandlers={eventHandlers}
+      />
+    );
+  },
+);
+
+export default EchartsGraph;

superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
@@ -48,7 +48,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
           t('Transformable'),
         ],
         thumbnail,
-        behaviors: [Behavior.DRILL_TO_DETAIL],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
       }),
       transformProps,
     });