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