apache · michael-s-molina · Jun 7, 2022
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts b/superset-frontend/packages/superset-ui-core/src/chart/models/ChartProps.ts
@@ -52,6 +52,8 @@ type Hooks = {
   onAddFilter?: (newFilters: DataRecordFilters, merge?: boolean) => void;
   /** handle errors */
   onError?: HandlerFunction;
+  /** handle right click */
+  onContextMenu?: HandlerFunction;
   /** use the vis as control to update state */
   setControlValue?: HandlerFunction;
   /** handle external filters */

diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/Calendar.js
@@ -43,6 +43,7 @@ const propTypes = {
   // eslint-disable-next-line react/sort-prop-types
   cellSize: PropTypes.number,
   linearColorScheme: PropTypes.string,
+  onContextMenu: PropTypes.func,
   showLegend: PropTypes.bool,
   showMetricName: PropTypes.bool,
   showValues: PropTypes.bool,
@@ -62,6 +63,7 @@ function Calendar(element, props) {
     cellSize = 10,
     domainGranularity,
     linearColorScheme,
+    onContextMenu,
     showLegend,
     showMetricName,
     showValues,
@@ -129,6 +131,7 @@ function Calendar(element, props) {
       valueFormatter,
       timeFormatter,
       subDomainTextFormat,
+      onContextMenu,
     });
   });
 }

diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/transformProps.js
@@ -21,7 +21,13 @@ import { getNumberFormatter } from '@superset-ui/core';
 import { getFormattedUTCTime } from './utils';
 
 export default function transformProps(chartProps) {
-  const { height, formData, queriesData, datasource } = chartProps;
+  const {
+    height,
+    formData,
+    queriesData,
+    datasource,
+    hooks: { onContextMenu },
+  } = chartProps;
   const {
     cellPadding,
     cellRadius,
@@ -49,6 +55,7 @@ export default function transformProps(chartProps) {
     cellSize,
     domainGranularity,
     linearColorScheme,
+    onContextMenu,
     showLegend,
     showMetricName,
     showValues,

diff --git a/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-calendar/src/vendor/cal-heatmap.js
@@ -279,6 +279,9 @@ var CalHeatMap = function () {
     // Callback when clicking on a time block
     onClick: null,
 
+    // Callback when right-clicking on a time block
+    onContextMenu: null,
+
     // Callback after painting the empty calendar
     // Can be used to trigger an API call, once the calendar is ready to be filled
     afterLoad: null,
@@ -1046,6 +1049,12 @@ var CalHeatMap = function () {
           return self.onClick(new Date(d.t), d.v);
         }
       })
+      .on('contextmenu', d => {
+        if (options.onContextMenu !== null) {
+          d3.event.preventDefault();
+          options.onContextMenu(d, d3.event.clientX, d3.event.clientY);
+        }
+      })
       .call(function (selection) {
         if (options.cellRadius > 0) {
           selection

diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js b/superset-frontend/plugins/legacy-plugin-chart-chord/src/Chord.js
@@ -36,7 +36,15 @@ const propTypes = {
 };
 
 function Chord(element, props) {
-  const { data, width, height, numberFormat, colorScheme, sliceId } = props;
+  const {
+    data,
+    width,
+    height,
+    numberFormat,
+    colorScheme,
+    sliceId,
+    onContextMenu,
+  } = props;
 
   element.innerHTML = '';
 
@@ -121,6 +129,12 @@ function Chord(element, props) {
     .on('mouseover', d => {
       chord.classed('fade', p => p !== d);
     })
+    .on('contextmenu', d => {
+      if (onContextMenu !== null) {
+        d3.event.preventDefault();
+        onContextMenu(d, d3.event.clientX, d3.event.clientY);
+      }
+    })
     .style('fill', d => colorFn(nodes[d.source.index], sliceId))
     .attr('d', path);
 

diff --git a/superset-frontend/plugins/legacy-plugin-chart-chord/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-chord/src/transformProps.js
@@ -17,7 +17,13 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const {
+    width,
+    height,
+    formData,
+    queriesData,
+    hooks: { onContextMenu },
+  } = chartProps;
   const { yAxisFormat, colorScheme, sliceId } = formData;
 
   return {
@@ -27,5 +33,6 @@ export default function transformProps(chartProps) {
     numberFormat: yAxisFormat,
     width,
     sliceId,
+    onContextMenu,
   };
 }
@@ -54,6 +54,7 @@ function CountryMap(element, props) {
     numberFormat,
     colorScheme,
     sliceId,
+    onContextMenu,
   } = props;
 
   const container = element;
@@ -225,7 +226,13 @@ function CountryMap(element, props) {
       .style('fill', colorFn)
       .on('mouseenter', mouseenter)
       .on('mouseout', mouseout)
-      .on('click', clicked);
+      .on('click', clicked)
+      .on('contextmenu', d => {
+        if (onContextMenu !== null) {
+          d3.event.preventDefault();
+          onContextMenu(d, d3.event.clientX, d3.event.clientY);
+        }
+      });
   }
 
   const map = maps[country];

@@ -17,7 +17,13 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const {
+    width,
+    height,
+    formData,
+    queriesData,
+    hooks: { onContextMenu },
+  } = chartProps;
   const {
     linearColorScheme,
     numberFormat,
@@ -35,5 +41,6 @@ export default function transformProps(chartProps) {
     numberFormat,
     colorScheme,
     sliceId,
+    onContextMenu,
   };
 }
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/DeckGLContainer.jsx
@@ -111,7 +111,10 @@ export class DeckGLContainer extends React.Component {
 
     return (
       <>
-        <div style={{ position: 'relative', width, height: adjustedHeight }}>
+        <div
+          style={{ position: 'relative', width, height: adjustedHeight }}
+          onContextMenu={evt => evt.preventDefault()}
+        >
           <DeckGL
             initWebGLParameters
             controller

diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/common.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/common.jsx
@@ -55,7 +55,7 @@ export function commonLayerProps(
   }
 
   return {
-    onClick,
+    onClick: e => console.log(e),
     onHover,
     pickable: Boolean(onHover),
   };

diff --git a/...rset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/...rset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
@@ -34,6 +34,7 @@ export default function EchartsMixedTimeseries({
   selectedValues,
   formData,
   seriesBreakdown,
+  onContextMenu,
 }: EchartsMixedTimeseriesChartTransformedProps) {
   const isFirstQuery = useCallback(
     (seriesIndex: number) => seriesIndex < seriesBreakdown,
@@ -105,6 +106,13 @@ export default function EchartsMixedTimeseries({
     mouseover: params => {
       currentSeries.name = params.seriesName;
     },
+    contextmenu: eventParams => {
+      if (onContextMenu) {
+        eventParams.event.stop();
+        const pointerEvent = eventParams.event.event;
+        onContextMenu(eventParams, pointerEvent.screenX, pointerEvent.screenY);
+      }
+    },
   };
 
   return (

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -310,7 +310,7 @@ export default function transformProps(
     };
   }, {}) as Record<string, DataRecordValue[]>;
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, onContextMenu } = hooks;
   const alignTicks = yAxisIndex !== yAxisIndexB;
 
   const echartOptions: EChartsCoreOption = {
@@ -450,5 +450,6 @@ export default function transformProps(
     groupbyB,
     seriesBreakdown: rawSeriesA.length,
     selectedValues: filterState.selectedValues || [],
+    onContextMenu,
   };
 }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
@@ -26,6 +26,7 @@ import {
   ChartProps,
   ChartDataResponseResult,
   QueryFormColumn,
+  HandlerFunction,
 } from '@superset-ui/core';
 import {
   DEFAULT_LEGEND_FORM_DATA,
@@ -151,4 +152,5 @@ export type EchartsMixedTimeseriesChartTransformedProps = {
   labelMapB: Record<string, DataRecordValue[]>;
   selectedValues: Record<number, string>;
   seriesBreakdown: number;
+  onContextMenu?: HandlerFunction;
 };
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/EchartsPie.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/EchartsPie.tsx
@@ -30,6 +30,7 @@ export default function EchartsPie({
   groupby,
   selectedValues,
   formData,
+  onContextMenu,
 }: PieChartTransformedProps) {
   const handleChange = useCallback(
     (values: string[]) => {
@@ -77,6 +78,13 @@ export default function EchartsPie({
         handleChange([name]);
       }
     },
+    contextmenu: eventParams => {
+      if (onContextMenu) {
+        eventParams.event.stop();
+        const pointerEvent = eventParams.event.event;
+        onContextMenu(eventParams, pointerEvent.screenX, pointerEvent.screenY);
+      }
+    },
   };
 
   return (

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
@@ -194,7 +194,7 @@ export default function transformProps(
     {},
   );
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, onContextMenu } = hooks;
 
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const numberFormatter = getNumberFormatter(numberFormat);
@@ -336,5 +336,6 @@ export default function transformProps(
     labelMap,
     groupby,
     selectedValues,
+    onContextMenu,
   };
 }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/types.ts
@@ -21,6 +21,7 @@ import {
   ChartDataResponseResult,
   ChartProps,
   DataRecordValue,
+  HandlerFunction,
   QueryFormColumn,
   QueryFormData,
   SetDataMaskHook,
@@ -95,4 +96,5 @@ export interface PieChartTransformedProps {
   labelMap: Record<string, DataRecordValue[]>;
   groupby: QueryFormColumn[];
   selectedValues: Record<number, string>;
+  onContextMenu?: HandlerFunction;
 }
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
@@ -142,6 +142,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     metricsLayout,
     metricColorFormatters,
     dateFormatters,
+    onContextMenu,
   } = props;
 
   const theme = useTheme();
@@ -327,10 +328,30 @@ export default function PivotTableChart(props: PivotTableProps) {
     [emitFilter, selectedFilters, handleChange],
   );
 
+  const onContextMenuCallback = useCallback(
+    (
+      e: MouseEvent,
+      value: string,
+      filters: FilterType,
+      pivotData: Record<string, any>,
+      isSubtotal: boolean,
+      isGrandTotal: boolean,
+    ) => {
+      e.preventDefault();
+      onContextMenu(
+        { e, value, filters, pivotData, isSubtotal, isGrandTotal },
+        e.screenX,
+        e.screenY,
+      );
+    },
+    [onContextMenu],
+  );
+
   const tableOptions = useMemo(
     () => ({
       clickRowHeaderCallback: toggleFilter,
       clickColumnHeaderCallback: toggleFilter,
+      onContextMenuCallback,
       colTotals,
       rowTotals,
       highlightHeaderCellsOnHover: emitFilter,
@@ -344,6 +365,7 @@ export default function PivotTableChart(props: PivotTableProps) {
       dateFormatters,
       emitFilter,
       metricColorFormatters,
+      onContextMenuCallback,
       rowTotals,
       selectedFilters,
       toggleFilter,

diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
@@ -77,7 +77,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     queriesData,
     formData,
     rawFormData,
-    hooks: { setDataMask = () => {} },
+    hooks: { setDataMask = () => {}, onContextMenu },
     filterState,
     datasource: { verboseMap = {}, columnFormats = {} },
   } = chartProps;
@@ -164,5 +164,6 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     metricsLayout,
     metricColorFormatters,
     dateFormatters,
+    onContextMenu,
   };
 }