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/Timeseries/EchartsTimeseries.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { QueryObjectFilterClause } from '@superset-ui/core';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
 import GlobalModel from 'echarts/types/src/model/Global';
 import ComponentModel from 'echarts/types/src/model/Component';
@@ -40,6 +41,8 @@ export default function EchartsTimeseries({
   setDataMask,
   setControlValue,
   legendData = [],
+  onContextMenu,
+  xValueFormatter,
 }: TimeseriesChartTransformedProps) {
   const { emitFilter, stack } = formData;
   const echartRef = useRef<EchartsHandler | null>(null);
@@ -173,6 +176,33 @@ export default function EchartsTimeseries({
         handleDoubleClickChange();
       }
     },
+    contextmenu: eventParams => {
+      if (onContextMenu) {
+        eventParams.event.stop();
+        const { data } = eventParams;
+        if (data) {
+          const pointerEvent = eventParams.event.event;
+          const values = eventParams.seriesName.split(',');
+          const filters: QueryObjectFilterClause[] = [];
+          filters.push({
+            col: formData.granularitySqla,
+            grain: formData.timeGrainSqla,
+            op: '==',
+            val: data[0],
+            formattedVal: xValueFormatter(data[0]),
+          });
+          formData.groupby.forEach((dimension, i) =>
+            filters.push({
+              col: dimension,
+              op: '==',
+              val: values[i],
+              formattedVal: values[i],
+            }),
+          );
+          onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+        }
+      }
+    },
   };
 
   const zrEventHandlers: EventHandlers = {

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

@@ -97,6 +97,7 @@ export default function transformProps(
     queriesData,
     datasource,
     theme,
+    inContextMenu,
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const [queryData] = queriesData;
@@ -302,6 +303,7 @@ export default function transformProps(
   const {
     setDataMask = () => {},
     setControlValue = (...args: unknown[]) => {},
+    onContextMenu,
   } = hooks;
 
   const addYAxisLabelOffset = !!yAxisTitle;
@@ -380,6 +382,7 @@ export default function transformProps(
     xAxis,
     yAxis,
     tooltip: {
+      show: !inContextMenu,
       ...defaultTooltip,
       appendToBody: true,
       trigger: richTooltip ? 'axis' : 'item',
@@ -457,5 +460,7 @@ export default function transformProps(
     setControlValue,
     width,
     legendData,
+    onContextMenu,
+    xValueFormatter: tooltipFormatter,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -97,6 +97,7 @@ export function transformSeries(
     sliceId?: number;
     isHorizontal?: boolean;
     lineStyle?: LineStyleOption;
+    queryIndex?: number;
   },
 ): SeriesOption | undefined {
   const { name } = series;
@@ -120,6 +121,7 @@ export function transformSeries(
     seriesKey,
     sliceId,
     isHorizontal = false,
+    queryIndex = 0,
   } = opts;
   const contexts = seriesContexts[name || ''] || [];
   const hasForecast =
@@ -197,6 +199,7 @@ export function transformSeries(
     : { ...opts.lineStyle, opacity };
   return {
     ...series,
+    queryIndex,
     yAxisIndex,
     name: forecastSeries.name,
     itemStyle,

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

@@ -24,6 +24,7 @@ import {
   QueryFormData,
   TimeGranularity,
   ContributionType,
+  TimeFormatter,
 } from '@superset-ui/core';
 import {
   EchartsLegendFormData,
@@ -93,7 +94,9 @@ export interface EchartsTimeseriesChartProps
 }
 
 export type TimeseriesChartTransformedProps =
-  EChartTransformedProps<EchartsTimeseriesFormData>;
+  EChartTransformedProps<EchartsTimeseriesFormData> & {
+    xValueFormatter: TimeFormatter | StringConstructor;
+  };
 
 export enum AxisType {
   category = 'category',