feat(dashboard): menu improvements, fallback support for Drill to Detail (#21351)

2026-04-18 07:35:09 +00:00 · 2022-10-19 15:34:46 -06:00
parent 54f6fd6a82
commit 76e57ec651
56 changed files with 969 additions and 310 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -46,6 +46,7 @@ const metadata = new ChartMetadata({
    t('Description'),
  ],
  thumbnail,
+  behaviors: [Behavior.DRILL_TO_DETAIL],
 });

 export default class BigNumberTotalChartPlugin extends ChartPlugin<
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -26,7 +26,7 @@ import {
  computeMaxFontSize,
  BRAND_COLOR,
  styled,
-  QueryObjectFilterClause,
+  BinaryQueryObjectFilterClause,
 } from '@superset-ui/core';
 import { EChartsCoreOption } from 'echarts';
 import Echart from '../components/Echart';
@@ -65,9 +65,9 @@ type BigNumberVisProps = {
  mainColor: string;
  echartOptions: EChartsCoreOption;
  onContextMenu?: (
-    filters: QueryObjectFilterClause[],
    clientX: number,
    clientY: number,
+    filters?: BinaryQueryObjectFilterClause[],
  ) => void;
  xValueFormatter?: TimeFormatter;
  formData?: BigNumberWithTrendlineFormData;
@@ -171,11 +171,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
    const onContextMenu = (e: MouseEvent<HTMLDivElement>) => {
      if (this.props.onContextMenu) {
        e.preventDefault();
-        this.props.onContextMenu(
-          [],
-          e.nativeEvent.clientX,
-          e.nativeEvent.clientY,
-        );
+        this.props.onContextMenu(e.nativeEvent.clientX, e.nativeEvent.clientY);
      }
    };

@@ -249,7 +245,7 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
          const { data } = eventParams;
          if (data) {
            const pointerEvent = eventParams.event.event;
-            const filters: QueryObjectFilterClause[] = [];
+            const filters: BinaryQueryObjectFilterClause[] = [];
            filters.push({
              col: this.props.formData?.granularitySqla,
              grain: this.props.formData?.timeGrainSqla,
@@ -258,9 +254,9 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps> {
              formattedVal: this.props.xValueFormatter?.(data[0]),
            });
            this.props.onContextMenu(
-              filters,
              pointerEvent.clientX,
              pointerEvent.clientY,
+              filters,
            );
          }
        }
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -45,6 +45,7 @@ const metadata = new ChartMetadata({
    t('Trend'),
  ],
  thumbnail,
+  behaviors: [Behavior.DRILL_TO_DETAIL],
 });

 export default class BigNumberWithTrendlineChartPlugin extends ChartPlugin<
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
@@ -44,7 +44,7 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsBoxPlot'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Distribution'),
        credits: ['https://echarts.apache.org'],
        description: t(
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
@@ -43,7 +43,7 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsFunnel'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('KPI'),
        credits: ['https://echarts.apache.org'],
        description: t(
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
@@ -33,7 +33,7 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsGauge'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('KPI'),
        credits: ['https://echarts.apache.org'],
        description: t(
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx
@@ -17,7 +17,7 @@
 * under the License.
 */
 import React from 'react';
-import { QueryObjectFilterClause } from '@superset-ui/core';
+import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
 import { EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { GraphChartTransformedProps } from './types';
@@ -47,7 +47,7 @@ export default function EchartsGraph({
        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[] = [
+          const filters: BinaryQueryObjectFilterClause[] = [
            {
              col: formData.source,
              op: '==',
@@ -61,7 +61,7 @@ export default function EchartsGraph({
              formattedVal: targetValue,
            },
          ];
-          onContextMenu(filters, pointerEvent.clientX, pointerEvent.clientY);
+          onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
        }
      }
    },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
@@ -46,6 +46,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
          t('Transformable'),
        ],
        thumbnail,
+        behaviors: [Behavior.DRILL_TO_DETAIL],
      }),
      transformProps,
    });
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts
@@ -19,7 +19,7 @@
 import {
  PlainObject,
  QueryFormData,
-  QueryObjectFilterClause,
+  BinaryQueryObjectFilterClause,
 } from '@superset-ui/core';
 import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
 import { SeriesTooltipOption } from 'echarts/types/src/util/types';
@@ -88,8 +88,8 @@ export type tooltipFormatParams = {
 export type GraphChartTransformedProps = EchartsProps & {
  formData: PlainObject;
  onContextMenu?: (
-    filters: QueryObjectFilterClause[],
    clientX: number,
    clientY: number,
+    filters?: BinaryQueryObjectFilterClause[],
  ) => void;
 };
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
@@ -21,7 +21,7 @@ import {
  AxisType,
  DataRecordValue,
  DTTM_ALIAS,
-  QueryObjectFilterClause,
+  BinaryQueryObjectFilterClause,
 } from '@superset-ui/core';
 import { EchartsMixedTimeseriesChartTransformedProps } from './types';
 import Echart from '../components/Echart';
@@ -128,7 +128,7 @@ export default function EchartsMixedTimeseries({
              eventParams.seriesName
            ],
          ];
-          const filters: QueryObjectFilterClause[] = [];
+          const filters: BinaryQueryObjectFilterClause[] = [];
          if (xAxis.type === AxisType.time) {
            filters.push({
              col:
@@ -154,7 +154,7 @@ export default function EchartsMixedTimeseries({
              formattedVal: String(values[i]),
            }),
          );
-          onContextMenu(filters, pointerEvent.clientX, pointerEvent.clientY);
+          onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
        }
      }
    },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
@@ -53,7 +53,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsMixedTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
@@ -47,7 +47,7 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsPie'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Part of a Whole'),
        credits: ['https://echarts.apache.org'],
        description:
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
@@ -44,7 +44,7 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsRadar'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Ranking'),
        credits: ['https://echarts.apache.org'],
        description: t(
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -50,7 +50,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
@@ -19,7 +19,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
  DTTM_ALIAS,
-  QueryObjectFilterClause,
+  BinaryQueryObjectFilterClause,
  AxisType,
 } from '@superset-ui/core';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
@@ -191,7 +191,7 @@ export default function EchartsTimeseries({
            ...(eventParams.name ? [eventParams.name] : []),
            ...labelMap[eventParams.seriesName],
          ];
-          const filters: QueryObjectFilterClause[] = [];
+          const filters: BinaryQueryObjectFilterClause[] = [];
          if (xAxis.type === AxisType.time) {
            filters.push({
              col:
@@ -216,7 +216,7 @@ export default function EchartsTimeseries({
              formattedVal: String(values[i]),
            }),
          );
-          onContextMenu(filters, pointerEvent.clientX, pointerEvent.clientY);
+          onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
        }
      }
    },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -56,7 +56,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -55,7 +55,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -54,7 +54,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -54,7 +54,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
@@ -45,7 +45,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('../EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
@@ -44,7 +44,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsTimeseries'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Evolution'),
        credits: ['https://echarts.apache.org'],
        description: hasGenericChartAxes
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx
@@ -16,7 +16,10 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { DataRecordValue, QueryObjectFilterClause } from '@superset-ui/core';
+import {
+  DataRecordValue,
+  BinaryQueryObjectFilterClause,
+} from '@superset-ui/core';
 import React, { useCallback } from 'react';
 import Echart from '../components/Echart';
 import { NULL_STRING } from '../constants';
@@ -93,7 +96,7 @@ export default function EchartsTreemap({
        const { treePath } = extractTreePathInfo(eventParams.treePathInfo);
        if (treePath.length > 0) {
          const pointerEvent = eventParams.event.event;
-          const filters: QueryObjectFilterClause[] = [];
+          const filters: BinaryQueryObjectFilterClause[] = [];
          treePath.forEach((path, i) =>
            filters.push({
              col: groupby[i],
@@ -102,7 +105,7 @@ export default function EchartsTreemap({
              formattedVal: path,
            }),
          );
-          onContextMenu(filters, pointerEvent.clientX, pointerEvent.clientY);
+          onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
        }
      }
    },
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
@@ -46,7 +46,7 @@ export default class EchartsTreemapChartPlugin extends ChartPlugin<
      controlPanel,
      loadChart: () => import('./EchartsTreemap'),
      metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
        category: t('Part of a Whole'),
        credits: ['https://echarts.apache.org'],
        description: t(
--- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts
@@ -19,7 +19,7 @@
 import {
  HandlerFunction,
  QueryFormColumn,
-  QueryObjectFilterClause,
+  BinaryQueryObjectFilterClause,
  SetDataMaskHook,
 } from '@superset-ui/core';
 import { EChartsCoreOption, ECharts } from 'echarts';
@@ -116,9 +116,9 @@ export interface EChartTransformedProps<F> {
  selectedValues: Record<number, string>;
  legendData?: OptionName[];
  onContextMenu?: (
-    filters: QueryObjectFilterClause[],
    clientX: number,
    clientY: number,
+    filters?: BinaryQueryObjectFilterClause[],
  ) => void;
 }

--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { QueryObjectFilterClause } from '@superset-ui/core';
+import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
 import { EChartTransformedProps, EventHandlers } from '../types';

 export type Event = {
@@ -48,7 +48,7 @@ export const contextMenuEventHandler =
    if (onContextMenu) {
      e.event.stop();
      const pointerEvent = e.event.event;
-      const filters: QueryObjectFilterClause[] = [];
+      const filters: BinaryQueryObjectFilterClause[] = [];
      if (groupby.length > 0) {
        const values = labelMap[e.name];
        groupby.forEach((dimension, i) =>
@@ -60,7 +60,7 @@ export const contextMenuEventHandler =
          }),
        );
      }
-      onContextMenu(filters, pointerEvent.clientX, pointerEvent.clientY);
+      onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
    }
  };