feat: Adds drill to detail context menu for ECharts visualizations (#20891)

* feat: Adds drill to detail context menu for ECharts visualizations

* Rebases and adds time grain

* Fixes selected gauge values

* Fixes Treemap edge click

* Adds right click to big number trendline

* Address some comments

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

@@ -17,13 +17,61 @@
  * under the License.
  */
 import React from 'react';
-import { EchartsProps } from '../types';
+import { QueryObjectFilterClause } from '@superset-ui/core';
+import { EventHandlers } from '../types';
 import Echart from '../components/Echart';
+import { GraphChartTransformedProps } from './types';
+
+type Event = {
+  name: string;
+  event: { stop: () => void; event: PointerEvent };
+  data: { source: string; target: string };
+};
 
 export default function EchartsGraph({
   height,
   width,
   echartOptions,
-}: EchartsProps) {
-  return <Echart height={height} width={width} echartOptions={echartOptions} />;
+  formData,
+  onContextMenu,
+}: 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: QueryObjectFilterClause[] = [
+            {
+              col: formData.source,
+              op: '==',
+              val: sourceValue,
+              formattedVal: sourceValue,
+            },
+            {
+              col: formData.target,
+              op: '==',
+              val: targetValue,
+              formattedVal: targetValue,
+            },
+          ];
+          onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+        }
+      }
+    },
+  };
+  return (
+    <Echart
+      height={height}
+      width={width}
+      echartOptions={echartOptions}
+      eventHandlers={eventHandlers}
+    />
+  );
 }

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

@@ -31,9 +31,9 @@ import {
   EChartGraphNode,
   DEFAULT_FORM_DATA as DEFAULT_GRAPH_FORM_DATA,
   EdgeSymbol,
+  GraphChartTransformedProps,
 } from './types';
 import { DEFAULT_GRAPH_SERIES_OPTION } from './constants';
-import { EchartsProps } from '../types';
 import { getChartPadding, getLegendProps, sanitizeHtml } from '../utils/series';
 
 type EdgeWithStyles = GraphEdgeItemOption & {
@@ -157,8 +157,11 @@ function getCategoryName(columnName: string, name?: DataRecordValue) {
   return String(name);
 }
 
-export default function transformProps(chartProps: ChartProps): EchartsProps {
-  const { width, height, formData, queriesData } = chartProps;
+export default function transformProps(
+  chartProps: ChartProps,
+): GraphChartTransformedProps {
+  const { width, height, formData, queriesData, hooks, inContextMenu } =
+    chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
 
   const {
@@ -295,6 +298,7 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     animationDuration: DEFAULT_GRAPH_SERIES_OPTION.animationDuration,
     animationEasing: DEFAULT_GRAPH_SERIES_OPTION.animationEasing,
     tooltip: {
+      show: !inContextMenu,
       formatter: (params: any): string =>
         edgeFormatter(
           params.data.source,
@@ -309,9 +313,14 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
     },
     series,
   };
+
+  const { onContextMenu } = hooks;
+
   return {
     width,
     height,
+    formData,
     echartOptions,
+    onContextMenu,
   };
 }

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

@@ -16,10 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { QueryFormData } from '@superset-ui/core';
+import {
+  PlainObject,
+  QueryFormData,
+  QueryObjectFilterClause,
+} from '@superset-ui/core';
 import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
 import { SeriesTooltipOption } from 'echarts/types/src/util/types';
-import { EchartsLegendFormData, LegendOrientation, LegendType } from '../types';
+import {
+  EchartsLegendFormData,
+  EchartsProps,
+  LegendOrientation,
+  LegendType,
+} from '../types';
 import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
 
 export type EdgeSymbol = 'none' | 'circle' | 'arrow';
@@ -75,3 +84,12 @@ export const DEFAULT_FORM_DATA: EchartsGraphFormData = {
 export type tooltipFormatParams = {
   data: { [name: string]: string };
 };
+
+export type GraphChartTransformedProps = EchartsProps & {
+  formData: PlainObject;
+  onContextMenu?: (
+    filters: QueryObjectFilterClause[],
+    offsetX: number,
+    offsetY: number,
+  ) => void;
+};