feat: Implement context menu for drill by (#23454)

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -478,10 +478,27 @@ export default function PivotTableChart(props: PivotTableProps) {
         onContextMenu(e.clientX, e.clientY, {
           drillToDetail: drillToDetailFilters,
           crossFilter: getCrossFilterDataMask(dataPoint),
+          drillBy: dataPoint && {
+            filters: [
+              {
+                col: Object.keys(dataPoint)[0],
+                op: '==',
+                val: Object.values(dataPoint)[0],
+              },
+            ],
+            groupbyFieldName: rowKey ? 'groupbyRows' : 'groupbyColumns',
+          },
         });
       }
     },
-    [cols, dateFormatters, onContextMenu, rows, timeGrainSqla],
+    [
+      cols,
+      dateFormatters,
+      getCrossFilterDataMask,
+      onContextMenu,
+      rows,
+      timeGrainSqla,
+    ],
   );
 
   return (

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts

@@ -17,12 +17,12 @@
  * under the License.
  */
 import {
-  t,
+  Behavior,
   ChartMetadata,
   ChartPlugin,
-  Behavior,
   ChartProps,
   QueryFormData,
+  t,
 } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
@@ -47,7 +47,11 @@ export default class PivotTableChartPlugin extends ChartPlugin<
    */
   constructor() {
     const metadata = new ChartMetadata({
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
+      behaviors: [
+        Behavior.INTERACTIVE_CHART,
+        Behavior.DRILL_TO_DETAIL,
+        Behavior.DRILL_BY,
+      ],
       category: t('Table'),
       description: t(
         'Used to summarize a set of data by grouping together multiple statistics along two axes. Examples: Sales numbers by region and month, tasks by status and assignee, active users by age and location. Not the most visually stunning visualization, but highly informative and versatile.',