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/Treemap/EchartsTreemap.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { QueryObjectFilterClause } from '@superset-ui/core';
 import React, { useCallback } from 'react';
 import Echart from '../components/Echart';
 import { EventHandlers } from '../types';
@@ -31,6 +32,7 @@ export default function EchartsTreemap({
   groupby,
   selectedValues,
   formData,
+  onContextMenu,
 }: TreemapTransformedProps) {
   const handleChange = useCallback(
     (values: string[]) => {
@@ -71,7 +73,7 @@ export default function EchartsTreemap({
   const eventHandlers: EventHandlers = {
     click: props => {
       const { data, treePathInfo } = props;
-      // do noting when clicking the parent node
+      // do nothing when clicking on the parent node
       if (data?.children) {
         return;
       }
@@ -84,6 +86,25 @@ export default function EchartsTreemap({
         handleChange([name]);
       }
     },
+    contextmenu: eventParams => {
+      if (onContextMenu) {
+        eventParams.event.stop();
+        const { treePath } = extractTreePathInfo(eventParams.treePathInfo);
+        if (treePath.length > 0) {
+          const pointerEvent = eventParams.event.event;
+          const filters: QueryObjectFilterClause[] = [];
+          treePath.forEach((path, i) =>
+            filters.push({
+              col: groupby[i],
+              op: '==',
+              val: path,
+              formattedVal: path,
+            }),
+          );
+          onContextMenu(filters, pointerEvent.offsetX, pointerEvent.offsetY);
+        }
+      }
+    },
   };
 
   return (

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

@@ -109,10 +109,18 @@ export function formatTooltip({
 export default function transformProps(
   chartProps: EchartsTreemapChartProps,
 ): TreemapTransformedProps {
-  const { formData, height, queriesData, width, hooks, filterState, theme } =
-    chartProps;
+  const {
+    formData,
+    height,
+    queriesData,
+    width,
+    hooks,
+    filterState,
+    theme,
+    inContextMenu,
+  } = chartProps;
   const { data = [] } = queriesData[0];
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, onContextMenu } = hooks;
   const coltypeMapping = getColtypesMapping(queriesData[0]);
 
   const {
@@ -303,6 +311,7 @@ export default function transformProps(
   const echartOptions: EChartsCoreOption = {
     tooltip: {
       ...defaultTooltip,
+      show: !inContextMenu,
       trigger: 'item',
       formatter: (params: any) =>
         formatTooltip({
@@ -323,5 +332,6 @@ export default function transformProps(
     labelMap: Object.fromEntries(columnsLabelMap),
     groupby,
     selectedValues: filterState.selectedValues || [],
+    onContextMenu,
   };
 }

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

@@ -19,15 +19,12 @@
 import {
   ChartDataResponseResult,
   ChartProps,
-  DataRecordValue,
   QueryFormColumn,
   QueryFormData,
   QueryFormMetric,
-  SetDataMaskHook,
 } from '@superset-ui/core';
-import { EChartsCoreOption } from 'echarts';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
-import { LabelPositionEnum } from '../types';
+import { EChartTransformedProps, LabelPositionEnum } from '../types';
 
 export type EchartsTreemapFormData = QueryFormData & {
   colorScheme?: string;
@@ -75,14 +72,5 @@ export interface TreemapSeriesCallbackDataParams extends CallbackDataParams {
   treePathInfo?: TreePathInfo[];
 }
 
-export interface TreemapTransformedProps {
-  formData: EchartsTreemapFormData;
-  height: number;
-  width: number;
-  echartOptions: EChartsCoreOption;
-  emitFilter: boolean;
-  setDataMask: SetDataMaskHook;
-  labelMap: Record<string, DataRecordValue[]>;
-  groupby: QueryFormColumn[];
-  selectedValues: Record<number, string>;
-}
+export type TreemapTransformedProps =
+  EChartTransformedProps<EchartsTreemapFormData>;