feat(ui-core): implement drilldown

.github/workflows/superset-python-misc.yml

@@ -66,14 +66,17 @@ jobs:
         with:
           python-version: ${{ matrix.python-version }}
           cache: 'pip'
-          cache-dependency-path: 'requirements/integration.txt'
+          cache-dependency-path: |
+            requirements/base.txt
+            requirements/integration.txt
       - name: Install dependencies
         uses: ./.github/actions/cached-dependencies
         with:
           run: |
             apt-get-install
             pip-upgrade
             pip install wheel
+            pip install -r requirements/base.txt
             pip install -r requirements/integration.txt
       - name: pre-commit
         run: pre-commit run --all-files

superset-frontend/packages/superset-ui-chart-controls/src/types.ts

@@ -22,6 +22,7 @@ import type {
   AdhocColumn,
   Column,
   DatasourceType,
+  JsonObject,
   JsonValue,
   Metric,
   QueryFormData,
@@ -71,6 +72,7 @@ export interface ControlPanelState {
   form_data: QueryFormData;
   datasource: DatasourceMeta | null;
   controls: ControlStateMapping;
+  dataMask: JsonObject;
 }
 
 /**

superset-frontend/packages/superset-ui-core/src/query/DrillDown.ts

@@ -0,0 +1,85 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { QueryObjectFilterClause, DrillDownType } from './types';
+import { ensureIsArray } from '../utils';
+
+export default class DrillDown {
+  static fromHierarchy(hierarchy: string[]): DrillDownType {
+    const mHierarchy = ensureIsArray(hierarchy);
+    return {
+      hierarchy: mHierarchy,
+      currentIdx: mHierarchy.length > 0 ? 0 : -1,
+      filters: [],
+    };
+  }
+
+  static drillDown(value: DrillDownType, selectValue: string): DrillDownType {
+    const idx = value.currentIdx;
+    const len = value.hierarchy.length;
+
+    if (idx + 1 >= len) {
+      return {
+        hierarchy: value.hierarchy,
+        currentIdx: 0,
+        filters: [],
+      };
+    }
+    return {
+      hierarchy: value.hierarchy,
+      currentIdx: idx + 1,
+      filters: value.filters.concat({
+        col: value.hierarchy[idx],
+        op: 'IN',
+        val: [selectValue],
+      }),
+    };
+  }
+
+  static rollUp(value: DrillDownType): DrillDownType {
+    const idx = value.currentIdx;
+    const len = value.hierarchy.length;
+    return {
+      hierarchy: value.hierarchy,
+      currentIdx: idx - 1 < 0 ? len - 1 : idx - 1,
+      filters: value.filters.slice(0, -1),
+    };
+  }
+
+  static getColumn(
+    value: DrillDownType | undefined | null,
+    hierarchy: string[],
+  ): string {
+    if (value) {
+      return value.hierarchy[value.currentIdx];
+    }
+    const val = DrillDown.fromHierarchy(hierarchy);
+    return val.hierarchy[val.currentIdx];
+  }
+
+  static getFilters(
+    value: DrillDownType | undefined | null,
+    hierarchy: string[],
+  ): QueryObjectFilterClause[] {
+    if (value) {
+      return value.filters;
+    }
+    const val = DrillDown.fromHierarchy(hierarchy);
+    return val.filters;
+  }
+}

superset-frontend/packages/superset-ui-core/src/query/index.ts

@@ -27,6 +27,7 @@ export { default as extractTimegrain } from './extractTimegrain';
 export { default as getColumnLabel } from './getColumnLabel';
 export { default as getMetricLabel } from './getMetricLabel';
 export { default as DatasourceKey } from './DatasourceKey';
+export { default as DrillDown } from './DrillDown';
 export { default as normalizeOrderBy } from './normalizeOrderBy';
 
 export * from './types/AnnotationLayer';

superset-frontend/packages/superset-ui-core/src/query/types/QueryFormData.ts

@@ -141,6 +141,12 @@ export type ExtraFormDataOverride = ExtraFormDataOverrideRegular &
 
 export type ExtraFormData = ExtraFormDataAppend & ExtraFormDataOverride;
 
+export type DrillDownType = {
+  hierarchy: string[];
+  currentIdx: number;
+  filters: QueryObjectFilterClause[];
+};
+
 // Type signature for formData shared by all viz types
 // It will be gradually filled out as we build out the query object
 

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -37,6 +37,7 @@ export enum FeatureFlag {
   ESCAPE_MARKDOWN_HTML = 'ESCAPE_MARKDOWN_HTML',
   DASHBOARD_NATIVE_FILTERS = 'DASHBOARD_NATIVE_FILTERS',
   DASHBOARD_CROSS_FILTERS = 'DASHBOARD_CROSS_FILTERS',
+  DASHBOARD_DRILL_DOWN = 'DASHBOARD_DRILL_DOWN',
   DASHBOARD_NATIVE_FILTERS_SET = 'DASHBOARD_NATIVE_FILTERS_SET',
   DASHBOARD_FILTERS_EXPERIMENTAL = 'DASHBOARD_FILTERS_EXPERIMENTAL',
   ENABLE_FILTER_BOX_MIGRATION = 'ENABLE_FILTER_BOX_MIGRATION',

superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/controlPanel.ts

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ensureIsArray, t, validateNonEmpty } from '@superset-ui/core';
+import {
+  ensureIsArray,
+  t,
+  validateNonEmpty,
+  FeatureFlag,
+  isFeatureEnabled,
+} from '@superset-ui/core';
 import {
   ColumnMeta,
   ControlPanelConfig,
@@ -75,6 +81,23 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        isFeatureEnabled(FeatureFlag.DASHBOARD_DRILL_DOWN)
+          ? [
+              {
+                name: 'drillDown',
+                config: {
+                  type: 'DrillDownControl',
+                  default: false,
+                  label: t('Enable drill down'),
+                  description: t('Columns as hierarchy.'),
+                  mapStateToProps: ({ form_data }) => ({
+                    chartId: form_data?.slice_id || 0,
+                    columns: form_data.groupby,
+                  }),
+                },
+              },
+            ]
+          : [],
       ],
     },
     {

superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js

@@ -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, DrillDown } from '@superset-ui/core';
 import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import example1 from './images/Bar_Chart.jpg';
@@ -57,7 +57,22 @@ export default class DistBarChartPlugin extends ChartPlugin {
     super({
       loadChart: () => import('../ReactNVD3'),
       metadata,
-      transformProps,
+      transformProps: chartProps => {
+        const outProps = chartProps;
+        const { drillDown } = chartProps.formData;
+        if (drillDown) {
+          outProps.ownState = {
+            ...(!chartProps.ownState.drilldown && {
+              drilldown: DrillDown.fromHierarchy(chartProps.formData.groupby),
+            }),
+            ...chartProps.ownState,
+          };
+          outProps.formData.groupby = [
+            DrillDown.getColumn(chartProps.ownState.drilldown, []),
+          ];
+        }
+        return transformProps(outProps);
+      },
       controlPanel,
     });
   }

superset-frontend/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js

@@ -24,6 +24,7 @@ import nv from 'nvd3-fork';
 import PropTypes from 'prop-types';
 import {
   CategoricalColorNamespace,
+  DrillDown,
   evalExpression,
   getNumberFormatter,
   getTimeFormatter,
@@ -270,6 +271,7 @@ function nvd3Vis(element, props) {
     colorScheme,
     comparisonType,
     contribution,
+    drillDown,
     entity,
     isBarStacked,
     isDonut,
@@ -284,10 +286,12 @@ function nvd3Vis(element, props) {
     onBrushEnd = NOOP,
     onError = NOOP,
     orderBars,
+    ownState,
     pieLabelType,
     rangeLabels,
     ranges,
     reduceXTicks = false,
+    setDataMask,
     showBarValue,
     showBrush,
     showControls,
@@ -440,6 +444,26 @@ function nvd3Vis(element, props) {
           width = computeBarChartWidth(data, isBarStacked, maxWidth);
         }
         chart.width(width);
+
+        // dispatch the drilldown event
+        chart.multibar.dispatch.on('elementClick', e => {
+          if (drillDown && ownState?.drilldown) {
+            // need the formdata stuff here
+            const value = e.data.x;
+            const drilldown = DrillDown.drillDown(ownState?.drilldown, value);
+            setDataMask({
+              extraFormData: {
+                filters: drilldown.filters,
+              },
+              filterState: {
+                value: value && drilldown.filters.length > 0 ? [value] : null,
+              },
+              ownState: {
+                drilldown,
+              },
+            });
+          }
+        });
         break;
 
       case 'pie':

superset-frontend/plugins/legacy-preset-chart-nvd3/src/transformProps.js

@@ -45,10 +45,11 @@ export default function transformProps(chartProps) {
     datasource,
     formData,
     hooks,
+    ownState,
     queriesData,
   } = chartProps;
 
-  const { onAddFilter = NOOP, onError = NOOP } = hooks;
+  const { onAddFilter = NOOP, onError = NOOP, setDataMask } = hooks;
 
   const {
     annotationLayers,
@@ -59,6 +60,7 @@ export default function transformProps(chartProps) {
     comparisonType,
     contribution,
     donut,
+    drillDown,
     entity,
     labelsOutside,
     leftMargin,
@@ -148,6 +150,7 @@ export default function transformProps(chartProps) {
     colorScheme,
     comparisonType,
     contribution,
+    drillDown,
     entity,
     isBarStacked: barStacked,
     isDonut: donut,
@@ -166,11 +169,13 @@ export default function transformProps(chartProps) {
         }
       : undefined,
     onError,
+    ownState,
     orderBars,
     pieLabelType,
     rangeLabels,
     ranges,
     reduceXTicks,
+    setDataMask,
     showBarValue,
     showBrush,
     showControls,