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

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

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

@@ -162,8 +162,16 @@ function getCategoryName(columnName: string, name?: DataRecordValue) {
 export default function transformProps(
   chartProps: EchartsGraphChartProps,
 ): GraphChartTransformedProps {
-  const { width, height, formData, queriesData, hooks, inContextMenu } =
-    chartProps;
+  const {
+    width,
+    height,
+    formData,
+    queriesData,
+    hooks,
+    inContextMenu,
+    filterState,
+    emitCrossFilters,
+  } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
 
   const {
@@ -204,12 +212,13 @@ export default function transformProps(
    * Get the node id of an existing node,
    * or create a new node if it doesn't exist.
    */
-  function getOrCreateNode(name: string, category?: string) {
+  function getOrCreateNode(name: string, col: string, category?: string) {
     if (!(name in nodes)) {
       nodes[name] = echartNodes.length;
       echartNodes.push({
         id: String(nodes[name]),
         name,
+        col,
         value: 0,
         category,
         select: DEFAULT_GRAPH_SERIES_OPTION.select,
@@ -244,8 +253,8 @@ export default function transformProps(
     const targetCategoryName = targetCategory
       ? getCategoryName(targetCategory, link[targetCategory])
       : undefined;
-    const sourceNode = getOrCreateNode(sourceName, sourceCategoryName);
-    const targetNode = getOrCreateNode(targetName, targetCategoryName);
+    const sourceNode = getOrCreateNode(sourceName, source, sourceCategoryName);
+    const targetNode = getOrCreateNode(targetName, target, targetCategoryName);
 
     sourceNode.value += value;
     targetNode.value += value;
@@ -321,7 +330,7 @@ export default function transformProps(
     series,
   };
 
-  const { onContextMenu } = hooks;
+  const { onContextMenu, setDataMask } = hooks;
 
   return {
     width,
@@ -329,6 +338,9 @@ export default function transformProps(
     formData,
     echartOptions,
     onContextMenu,
+    setDataMask,
+    filterState,
     refs,
+    emitCrossFilters,
   };
 }

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

@@ -55,6 +55,7 @@ export type EchartsGraphFormData = QueryFormData &
 
 export type EChartGraphNode = Omit<GraphNodeItemOption, 'value'> & {
   value: number;
+  col: string;
   tooltip?: Pick<SeriesTooltipOption, 'formatter'>;
 };