fix: Disable cross filtering on charts with no dimensions (#30176)

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import transformProps from './transformProps';
 import buildQuery from './buildQuery';
@@ -25,6 +25,7 @@ import example1 from './images/example1.png';
 import example2 from './images/example2.png';
 import { EchartsBubbleChartProps, EchartsBubbleFormData } from './types';
 
+// TODO: Implement cross filtering
 export default class EchartsBubbleChartPlugin extends ChartPlugin<
   EchartsBubbleFormData,
   EchartsBubbleChartProps
@@ -35,7 +36,6 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsBubble'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.InteractiveChart],
         category: t('Correlation'),
         credits: ['https://echarts.apache.org'],
         description: t(

superset-frontend/plugins/plugin-chart-echarts/src/Histogram/index.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -26,6 +26,7 @@ import example1 from './images/example1.png';
 import example2 from './images/example2.png';
 import { HistogramChartProps, HistogramFormData } from './types';
 
+// TODO: Implement cross filtering
 export default class EchartsHistogramChartPlugin extends ChartPlugin<
   HistogramFormData,
   HistogramChartProps
@@ -46,7 +47,6 @@ export default class EchartsHistogramChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./Histogram'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.InteractiveChart],
         credits: ['https://echarts.apache.org'],
         category: t('Distribution'),
         description: t(

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -110,13 +110,25 @@ export default function EchartsMixedTimeseries({
 
   const handleChange = useCallback(
     (seriesName: string, seriesIndex: number) => {
-      if (!emitCrossFilters) {
+      const isFirst = isFirstQuery(seriesIndex);
+      if (
+        !emitCrossFilters ||
+        (isFirst && groupby.length === 0) ||
+        (!isFirst && groupbyB.length === 0)
+      ) {
         return;
       }
 
       setDataMask(getCrossFilterDataMask(seriesName, seriesIndex).dataMask);
     },
-    [emitCrossFilters, setDataMask, getCrossFilterDataMask],
+    [
+      isFirstQuery,
+      emitCrossFilters,
+      groupby.length,
+      groupbyB.length,
+      setDataMask,
+      getCrossFilterDataMask,
+    ],
   );
 
   const eventHandlers: EventHandlers = {
@@ -140,7 +152,7 @@ export default function EchartsMixedTimeseries({
         const isFirst = isFirstQuery(seriesIndex);
         const values = [
           ...(eventParams.name ? [eventParams.name] : []),
-          ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName],
+          ...((isFirst ? labelMap : labelMapB)[eventParams.seriesName] || []),
         ];
         if (data && xAxis.type === AxisType.Time) {
           drillToDetailFilters.push({
@@ -179,9 +191,14 @@ export default function EchartsMixedTimeseries({
               }),
             }),
         );
+        const hasCrossFilter =
+          (isFirst && groupby.length > 0) || (!isFirst && groupbyB.length > 0);
+
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
-          crossFilter: getCrossFilterDataMask(seriesName, seriesIndex),
+          crossFilter: hasCrossFilter
+            ? getCrossFilterDataMask(seriesName, seriesIndex)
+            : undefined,
           drillBy: {
             filters: drillByFilters,
             groupbyFieldName: isFirst ? 'groupby' : 'groupby_b',

superset-frontend/plugins/plugin-chart-echarts/src/Sankey/index.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -26,6 +26,7 @@ import example1 from './images/example1.png';
 import example2 from './images/example2.png';
 import { SankeyChartProps, SankeyFormData } from './types';
 
+// TODO: Implement cross filtering
 export default class EchartsSankeyChartPlugin extends ChartPlugin<
   SankeyFormData,
   SankeyChartProps
@@ -46,7 +47,6 @@ export default class EchartsSankeyChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./Sankey'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.InteractiveChart],
         credits: ['https://echarts.apache.org'],
         category: t('Flow'),
         description: t(

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx

@@ -95,7 +95,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
 
   const handleChange = useCallback(
     (treePathInfo: TreePathInfo[]) => {
-      if (!emitCrossFilters) {
+      if (!emitCrossFilters || !columns?.length) {
         return;
       }
 
@@ -142,7 +142,9 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
         }
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
-          crossFilter: getCrossFilterDataMask(treePathInfo),
+          crossFilter: columns?.length
+            ? getCrossFilterDataMask(treePathInfo)
+            : undefined,
           drillBy: { filters: drillByFilters, groupbyFieldName: 'columns' },
         });
       }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -70,6 +70,8 @@ export default function EchartsTimeseries({
     setExtraControlHeight(updatedHeight);
   }, [formData.showExtraControls]);
 
+  const hasDimensions = ensureIsArray(groupby).length > 0;
+
   const getModelInfo = (target: ViewRootGroup, globalModel: GlobalModel) => {
     let el = target;
     let model: ComponentModel | null = null;
@@ -139,6 +141,9 @@ export default function EchartsTimeseries({
 
   const eventHandlers: EventHandlers = {
     click: props => {
+      if (!hasDimensions) {
+        return;
+      }
       if (clickTimer.current) {
         clearTimeout(clickTimer.current);
       }
@@ -215,8 +220,10 @@ export default function EchartsTimeseries({
 
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
-          crossFilter: getCrossFilterDataMask(seriesName),
           drillBy: { filters: drillByFilters, groupbyFieldName: 'groupby' },
+          crossFilter: hasDimensions
+            ? getCrossFilterDataMask(seriesName)
+            : undefined,
         });
       }
     },

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx

@@ -97,7 +97,7 @@ export default function EchartsTreemap({
 
   const handleChange = useCallback(
     (data, treePathInfo) => {
-      if (!emitCrossFilters) {
+      if (!emitCrossFilters || groupby.length === 0) {
         return;
       }
 
@@ -144,7 +144,10 @@ export default function EchartsTreemap({
           });
           onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
             drillToDetail: drillToDetailFilters,
-            crossFilter: getCrossFilterDataMask(data, treePathInfo),
+            crossFilter:
+              groupby.length > 0
+                ? getCrossFilterDataMask(data, treePathInfo)
+                : undefined,
             drillBy: { filters: drillByFilters, groupbyFieldName: 'groupby' },
           });
         }

superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -27,6 +27,7 @@ import example2 from './images/example2.png';
 import example3 from './images/example3.png';
 import { EchartsWaterfallChartProps, EchartsWaterfallFormData } from './types';
 
+// TODO: Implement cross filtering
 export default class EchartsWaterfallChartPlugin extends ChartPlugin<
   EchartsWaterfallFormData,
   EchartsWaterfallChartProps
@@ -47,7 +48,6 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsWaterfall'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.InteractiveChart],
         credits: ['https://echarts.apache.org'],
         category: t('Evolution'),
         description: t(

superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts

@@ -26,6 +26,7 @@ import {
   getNumberFormatter,
   getTimeFormatter,
 } from '@superset-ui/core';
+import { noop } from 'lodash';
 
 import {
   BaseTransformedProps,
@@ -137,7 +138,8 @@ export const contextMenuEventHandler =
       }
       onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
         drillToDetail: drillFilters,
-        crossFilter: getCrossFilterDataMask(e.name),
+        crossFilter:
+          groupby.length > 0 ? getCrossFilterDataMask(e.name) : undefined,
         drillBy: { filters: drillFilters, groupbyFieldName: 'groupby' },
       });
     }
@@ -157,11 +159,14 @@ export const allEventHandlers = (
     formData,
   } = transformedProps;
   const eventHandlers: EventHandlers = {
-    click: clickEventHandler(
+    click:
-      getCrossFilterDataMask(selectedValues, groupby, labelMap),
+      groupby.length > 0
-      setDataMask,
+        ? clickEventHandler(
-      emitCrossFilters,
+            getCrossFilterDataMask(selectedValues, groupby, labelMap),
-    ),
+            setDataMask,
+            emitCrossFilters,
+          )
+        : noop,
     contextmenu: contextMenuEventHandler(
       groupby,
       onContextMenu,