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/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { useCallback } from 'react';
+import { DataRecordValue, QueryObjectFilterClause } from '@superset-ui/core';
 import { EchartsMixedTimeseriesChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { EventHandlers } from '../types';
@@ -34,6 +35,8 @@ export default function EchartsMixedTimeseries({
   selectedValues,
   formData,
   seriesBreakdown,
+  onContextMenu,
+  xValueFormatter,
 }: EchartsMixedTimeseriesChartTransformedProps) {
   const isFirstQuery = useCallback(
     (seriesIndex: number) => seriesIndex < seriesBreakdown,
@@ -63,7 +66,9 @@ export default function EchartsMixedTimeseries({
               ? []
               : [
                   ...currentGroupBy.map((col, idx) => {
-                    const val = groupbyValues.map(v => v[idx]);
+                    const val: DataRecordValue[] = groupbyValues.map(
+                      v => v[idx],
+                    );
                     if (val === null || val === undefined)
                       return {
                         col,
@@ -105,6 +110,35 @@ export default function EchartsMixedTimeseries({
     mouseover: params => {
       currentSeries.name = params.seriesName;
     },
+    contextmenu: eventParams => {
+      if (onContextMenu) {
+        eventParams.event.stop();
+        const { data, seriesIndex } = eventParams;
+        if (data) {
+          const pointerEvent = eventParams.event.event;
+          const values = eventParams.seriesName.split(',');
+          const { queryIndex } = (echartOptions.series as any)[seriesIndex];
+          const groupby = queryIndex > 0 ? formData.groupbyB : formData.groupby;
+          const filters: QueryObjectFilterClause[] = [];
+          filters.push({
+            col: formData.granularitySqla,
+            grain: formData.timeGrainSqla,
+            op: '==',
+            val: data[0],
+            formattedVal: xValueFormatter(data[0]),
+          });
+          groupby.forEach((dimension, i) =>
+            filters.push({
+              col: dimension,
+              op: '==',
+              val: values[i],
+              formattedVal: values[i],
+            }),
+          );
+          onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+        }
+      }
+    },
   };
 
   return (

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

@@ -84,6 +84,7 @@ export default function transformProps(
     filterState,
     datasource,
     theme,
+    inContextMenu,
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const data1 = (queriesData[0].data || []) as TimeseriesDataRecord[];
@@ -198,6 +199,7 @@ export default function transformProps(
       filterState,
       seriesKey: entry.name,
       sliceId,
+      queryIndex: 0,
     });
     if (transformedSeries) series.push(transformedSeries);
   });
@@ -217,6 +219,7 @@ export default function transformProps(
         ? `${entry.name} (1)`
         : entry.name,
       sliceId,
+      queryIndex: 1,
     });
     if (transformedSeries) series.push(transformedSeries);
   });
@@ -319,7 +322,7 @@ export default function transformProps(
     };
   }, {}) as Record<string, DataRecordValue[]>;
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, onContextMenu } = hooks;
   const alignTicks = yAxisIndex !== yAxisIndexB;
 
   const echartOptions: EChartsCoreOption = {
@@ -373,6 +376,7 @@ export default function transformProps(
     ],
     tooltip: {
       ...defaultTooltip,
+      show: !inContextMenu,
       appendToBody: true,
       trigger: richTooltip ? 'axis' : 'item',
       formatter: (params: any) => {
@@ -459,5 +463,7 @@ export default function transformProps(
     groupbyB,
     seriesBreakdown: rawSeriesA.length,
     selectedValues: filterState.selectedValues || [],
+    onContextMenu,
+    xValueFormatter: tooltipFormatter,
   };
 }

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

@@ -16,23 +16,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EChartsCoreOption } from 'echarts';
 import {
   AnnotationLayer,
   TimeGranularity,
   DataRecordValue,
-  SetDataMaskHook,
   QueryFormData,
   ChartProps,
   ChartDataResponseResult,
   QueryFormColumn,
   ContributionType,
+  TimeFormatter,
 } from '@superset-ui/core';
 import {
   EchartsLegendFormData,
   EchartsTitleFormData,
   StackType,
   EchartsTimeseriesSeriesType,
+  EChartTransformedProps,
 } from '../types';
 import {
   DEFAULT_LEGEND_FORM_DATA,
@@ -138,18 +138,11 @@ export interface EchartsMixedTimeseriesProps extends ChartProps {
   queriesData: ChartDataResponseResult[];
 }
 
-export type EchartsMixedTimeseriesChartTransformedProps = {
-  formData: EchartsMixedTimeseriesFormData;
-  height: number;
-  width: number;
-  echartOptions: EChartsCoreOption;
-  emitFilter: boolean;
-  emitFilterB: boolean;
-  setDataMask: SetDataMaskHook;
-  groupby: QueryFormColumn[];
-  groupbyB: QueryFormColumn[];
-  labelMap: Record<string, DataRecordValue[]>;
-  labelMapB: Record<string, DataRecordValue[]>;
-  selectedValues: Record<number, string>;
-  seriesBreakdown: number;
-};
+export type EchartsMixedTimeseriesChartTransformedProps =
+  EChartTransformedProps<EchartsMixedTimeseriesFormData> & {
+    emitFilterB: boolean;
+    groupbyB: QueryFormColumn[];
+    labelMapB: Record<string, DataRecordValue[]>;
+    seriesBreakdown: number;
+    xValueFormatter: TimeFormatter | StringConstructor;
+  };