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/Funnel/EchartsFunnel.tsx

@@ -19,18 +19,19 @@
 import React, { useCallback } from 'react';
 import { FunnelChartTransformedProps } from './types';
 import Echart from '../components/Echart';
-import { EventHandlers } from '../types';
+import { allEventHandlers } from '../utils/eventHandlers';
 
-export default function EchartsFunnel({
-  height,
-  width,
-  echartOptions,
-  setDataMask,
-  labelMap,
-  groupby,
-  selectedValues,
-  formData,
-}: FunnelChartTransformedProps) {
+export default function EchartsFunnel(props: FunnelChartTransformedProps) {
+  const {
+    height,
+    width,
+    echartOptions,
+    setDataMask,
+    labelMap,
+    groupby,
+    selectedValues,
+    formData,
+  } = props;
   const handleChange = useCallback(
     (values: string[]) => {
       if (!formData.emitFilter) {
@@ -67,17 +68,7 @@ export default function EchartsFunnel({
     [groupby, labelMap, setDataMask, selectedValues],
   );
 
-  const eventHandlers: EventHandlers = {
-    click: props => {
-      const { name } = props;
-      const values = Object.values(selectedValues);
-      if (values.includes(name)) {
-        handleChange(values.filter(v => v !== name));
-      } else {
-        handleChange([name]);
-      }
-    },
-  };
+  const eventHandlers = allEventHandlers(props, handleChange);
 
   return (
     <Echart

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

@@ -82,8 +82,16 @@ export function formatFunnelLabel({
 export default function transformProps(
   chartProps: EchartsFunnelChartProps,
 ): FunnelChartTransformedProps {
-  const { formData, height, hooks, filterState, queriesData, width, theme } =
-    chartProps;
+  const {
+    formData,
+    height,
+    hooks,
+    filterState,
+    queriesData,
+    width,
+    theme,
+    inContextMenu,
+  } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
 
   const {
@@ -128,7 +136,7 @@ export default function transformProps(
     {},
   );
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, onContextMenu } = hooks;
 
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
@@ -209,6 +217,7 @@ export default function transformProps(
     },
     tooltip: {
       ...defaultTooltip,
+      show: !inContextMenu,
       trigger: 'item',
       formatter: (params: any) =>
         formatFunnelLabel({
@@ -234,5 +243,6 @@ export default function transformProps(
     labelMap,
     groupby,
     selectedValues,
+    onContextMenu,
   };
 }

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

@@ -16,16 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { EChartsCoreOption } from 'echarts';
 import {
   ChartDataResponseResult,
   ChartProps,
-  DataRecordValue,
-  QueryFormColumn,
   QueryFormData,
-  SetDataMaskHook,
 } from '@superset-ui/core';
-import { EchartsLegendFormData, LegendOrientation, LegendType } from '../types';
+import {
+  EchartsLegendFormData,
+  EChartTransformedProps,
+  LegendOrientation,
+  LegendType,
+} from '../types';
 import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
 
 export type EchartsFunnelFormData = QueryFormData &
@@ -74,14 +75,5 @@ export const DEFAULT_FORM_DATA: EchartsFunnelFormData = {
   emitFilter: false,
 };
 
-export interface FunnelChartTransformedProps {
-  formData: EchartsFunnelFormData;
-  height: number;
-  width: number;
-  echartOptions: EChartsCoreOption;
-  emitFilter: boolean;
-  setDataMask: SetDataMaskHook;
-  labelMap: Record<string, DataRecordValue[]>;
-  groupby: QueryFormColumn[];
-  selectedValues: Record<number, string>;
-}
+export type FunnelChartTransformedProps =
+  EChartTransformedProps<EchartsFunnelFormData>;