feat: Implement context menu for drill by

superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts

@@ -31,6 +31,7 @@ export enum Behavior {
    * when dimensions are right-clicked on.
    */
   DRILL_TO_DETAIL = 'DRILL_TO_DETAIL',
+  DRILL_BY = 'DRILL_BY',
 }
 
 export interface ContextMenuFilters {
@@ -39,6 +40,11 @@ export interface ContextMenuFilters {
     isCurrentValueSelected?: boolean;
   };
   drillToDetail?: BinaryQueryObjectFilterClause[];
+  drillBy?: {
+    filters: BinaryQueryObjectFilterClause[];
+    groupbyFieldName: string;
+    adhocFilterFieldName?: string;
+  };
 }
 
 export enum AppSection {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -172,6 +172,7 @@ function WorldMap(element, props) {
     const val =
       countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
     let drillToDetailFilters;
+    let drillByFilters;
     if (val) {
       drillToDetailFilters = [
         {
@@ -181,10 +182,18 @@ function WorldMap(element, props) {
           formattedVal: val,
         },
       ];
+      drillByFilters = [
+        {
+          col: entity,
+          op: '==',
+          val,
+        },
+      ];
     }
     onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
       drillToDetail: drillToDetailFilters,
       crossFilter: getCrossFilterDataMask(source),
+      drillBy: { filters: drillByFilters, groupbyFieldName: 'entity' },
     });
   };
 

superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js

@@ -45,7 +45,11 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   useLegacyApi: true,
-  behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+  behaviors: [
+    Behavior.INTERACTIVE_CHART,
+    Behavior.DRILL_TO_DETAIL,
+    Behavior.DRILL_BY,
+  ],
 });
 
 export default class WorldMapChartPlugin extends ChartPlugin {

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
@@ -44,7 +44,11 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsBoxPlot'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Distribution'),
         credits: ['https://echarts.apache.org'],
         description: t(

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

@@ -44,7 +44,11 @@ export default class EchartsFunnelChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsFunnel'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('KPI'),
         credits: ['https://echarts.apache.org'],
         description: t(

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

@@ -35,7 +35,11 @@ export default class EchartsGaugeChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsGauge'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('KPI'),
         credits: ['https://echarts.apache.org'],
         description: t(

superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx

@@ -137,11 +137,16 @@ export default function EchartsGraph({
         const data = (echartOptions as any).series[0].data as Data;
         const drillToDetailFilters =
           e.dataType === 'node' ? handleNodeClick(data) : handleEdgeClick(data);
+        const node = data.find(item => item.id === e.data.id);
+
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
-          crossFilter: getCrossFilterDataMask(
-            data.find(item => item.id === e.data.id),
-          ),
+          crossFilter: getCrossFilterDataMask(node),
+          drillBy: node && {
+            filters: [{ col: node.col, op: '==', val: node.name }],
+            groupbyFieldName:
+              node.col === formData.source ? 'source' : 'target',
+          },
         });
       }
     },

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

@@ -48,7 +48,11 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
           t('Transformable'),
         ],
         thumbnail,
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
       }),
       transformProps,
     });

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

@@ -131,42 +131,52 @@ export default function EchartsMixedTimeseries({
         const { data, seriesName, seriesIndex } = eventParams;
         const pointerEvent = eventParams.event.event;
         const drillToDetailFilters: BinaryQueryObjectFilterClause[] = [];
-        if (data) {
-          const values = [
-            ...(eventParams.name ? [eventParams.name] : []),
-            ...(isFirstQuery(seriesIndex) ? labelMap : labelMapB)[
-              eventParams.seriesName
-            ],
-          ];
-          if (xAxis.type === AxisType.time) {
-            drillToDetailFilters.push({
-              col:
-                xAxis.label === DTTM_ALIAS
-                  ? formData.granularitySqla
-                  : xAxis.label,
-              grain: formData.timeGrainSqla,
-              op: '==',
-              val: data[0],
-              formattedVal: xValueFormatter(data[0]),
-            });
-          }
-          [
-            ...(xAxis.type === AxisType.category ? [xAxis.label] : []),
-            ...(isFirstQuery(seriesIndex)
-              ? formData.groupby
-              : formData.groupbyB),
-          ].forEach((dimension, i) =>
-            drillToDetailFilters.push({
+        const drillByFilters: BinaryQueryObjectFilterClause[] = [];
+        const isFirst = isFirstQuery(seriesIndex);
+        const values = [
+          ...(eventParams.name ? [eventParams.name] : []),
+          ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName],
+        ];
+        if (data && xAxis.type === AxisType.time) {
+          drillToDetailFilters.push({
+            col:
+              xAxis.label === DTTM_ALIAS
+                ? formData.granularitySqla
+                : xAxis.label,
+            grain: formData.timeGrainSqla,
+            op: '==',
+            val: data[0],
+            formattedVal: xValueFormatter(data[0]),
+          });
+        }
+        [
+          ...(data && xAxis.type === AxisType.category ? [xAxis.label] : []),
+          ...(isFirst ? formData.groupby : formData.groupbyB),
+        ].forEach((dimension, i) =>
+          drillToDetailFilters.push({
+            col: dimension,
+            op: '==',
+            val: values[i],
+            formattedVal: String(values[i]),
+          }),
+        );
+
+        [...(isFirst ? formData.groupby : formData.groupbyB)].forEach(
+          (dimension, i) =>
+            drillByFilters.push({
               col: dimension,
               op: '==',
               val: values[i],
-              formattedVal: String(values[i]),
             }),
-          );
-        }
+        );
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
           crossFilter: getCrossFilterDataMask(seriesName, seriesIndex),
+          drillBy: {
+            filters: drillByFilters,
+            groupbyFieldName: isFirst ? 'groupby' : 'groupby_b',
+            adhocFilterFieldName: isFirst ? 'adhoc_filters' : 'adhoc_filters_b',
+          },
         });
       }
     },

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

@@ -54,7 +54,11 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsMixedTimeseries'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
         description: hasGenericChartAxes

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

@@ -47,7 +47,11 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsPie'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
         description:

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

@@ -46,7 +46,11 @@ export default class EchartsRadarChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsRadar'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Ranking'),
         credits: ['https://echarts.apache.org'],
         description: t(

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

@@ -40,7 +40,6 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
     refs,
     emitCrossFilters,
   } = props;
-
   const { columns } = formData;
 
   const getCrossFilterDataMask = useCallback(
@@ -62,7 +61,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
             filters:
               values.length === 0 || !columns
                 ? []
-                : columns.map((col, idx) => {
+                : columns.slice(0, treePath.length).map((col, idx) => {
                     const val = labels.map(v => v[idx]);
                     if (val === null || val === undefined)
                       return {
@@ -111,6 +110,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
         const treePath = extractTreePathInfo(eventParams.treePathInfo);
         const pointerEvent = eventParams.event.event;
         const drillToDetailFilters: BinaryQueryObjectFilterClause[] = [];
+        const drillByFilters: BinaryQueryObjectFilterClause[] = [];
         if (columns?.length) {
           treePath.forEach((path, i) =>
             drillToDetailFilters.push({
@@ -120,10 +120,16 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
               formattedVal: path,
             }),
           );
+          drillByFilters.push({
+            col: columns[treePath.length - 1],
+            op: '==',
+            val: treePath[treePath.length - 1],
+          });
         }
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
           drillToDetail: drillToDetailFilters,
           crossFilter: getCrossFilterDataMask(treePathInfo),
+          drillBy: { filters: drillByFilters, groupbyFieldName: 'columns' },
         });
       }
     },

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
+import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
 import transformProps from './transformProps';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
@@ -31,7 +31,11 @@ export default class EchartsSunburstChartPlugin extends ChartPlugin {
       controlPanel,
       loadChart: () => import('./EchartsSunburst'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
         description: t(

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

@@ -50,7 +50,11 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('../EchartsTimeseries'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+        behaviors: [
+          Behavior.INTERACTIVE_CHART,
+          Behavior.DRILL_TO_DETAIL,
+          Behavior.DRILL_BY,
+        ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
         description: hasGenericChartAxes