feat: Draft Drilldown POC

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

@@ -18,7 +18,7 @@
  * under the License.
  */
 import React, { ReactNode, ReactText, ReactElement } from 'react';
-import { QueryFormData, DatasourceType, Metric, JsonValue, Column } from '@superset-ui/core';
+import {QueryFormData, DatasourceType, Metric, JsonValue, Column, JsonObject} from '@superset-ui/core';
 import sharedControls from './shared-controls';
 import sharedControlComponents from './shared-controls/components';
 
@@ -62,6 +62,7 @@ export interface ControlPanelState {
   form_data: QueryFormData;
   datasource: DatasourceMeta | null;
   controls: ControlStateMapping;
+  dataMask: JsonObject;
 }
 
 /**

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

@@ -1,5 +1,4 @@
-import { ExtraFormData } from '../../query';
-import { JsonObject } from '../..';
+import { ExtraFormData, OwnState } from '../../query';
 
 export type HandlerFunction = (...args: unknown[]) => void;
 
@@ -21,7 +20,7 @@ export type FilterState = { value?: any; [key: string]: any };
 export type DataMask = {
   extraFormData?: ExtraFormData;
   filterState?: FilterState;
-  ownState?: JsonObject;
+  ownState?: OwnState;
 };
 
 export type SetDataMaskHook = {

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

@@ -0,0 +1,92 @@
+/**
+ * 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 _hierarchy = ensureIsArray(hierarchy)
+    return {
+      hierarchy: _hierarchy,
+      currentIdx: _hierarchy.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;
+  }
+}

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

@@ -26,6 +26,7 @@ export { default as convertFilter } from './convertFilter';
 export { default as extractTimegrain } from './extractTimegrain';
 export { default as getMetricLabel } from './getMetricLabel';
 export { default as DatasourceKey } from './DatasourceKey';
+export { default as DrillDown } from './DrillDown';
 
 export * from './types/AnnotationLayer';
 export * from './types/QueryFormData';

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

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

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

@@ -36,6 +36,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',
   VERSIONED_EXPORT = 'VERSIONED_EXPORT',
   GLOBAL_ASYNC_QUERIES = 'GLOBAL_ASYNC_QUERIES',

plugins/plugin-chart-echarts/src/Pie/EchartsPie.tsx

@@ -20,6 +20,7 @@ import React, { useCallback } from 'react';
 import { PieChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { EventHandlers } from '../types';
+import { DataMask, DrillDown } from "@superset-ui/core";
 
 export default function EchartsPie({
   height,
@@ -30,39 +31,62 @@ export default function EchartsPie({
   groupby,
   selectedValues,
   formData,
-}: PieChartTransformedProps) {
+  ownState,
+}:
+
+PieChartTransformedProps) {
   const handleChange = useCallback(
     (values: string[]) => {
-      if (!formData.emitFilter) {
+      if (!formData.emitFilter && !formData.drillDown) {
         return;
       }
 
       const groupbyValues = values.map(value => labelMap[value]);
 
-      setDataMask({
-        extraFormData: {
-          filters:
-            values.length === 0
-              ? []
-              : groupby.map((col, idx) => {
-                  const val = groupbyValues.map(v => v[idx]);
-                  if (val === null || val === undefined)
+      let dataMask: DataMask = {};
+      if (formData.emitFilter) {
+        dataMask = {
+          extraFormData: {
+            filters:
+              values.length === 0
+                ? []
+                : groupby.map((col, idx) => {
+                    const val = groupbyValues.map(v => v[idx]);
+                    if (val === null || val === undefined)
+                      return {
+                        col,
+                        op: 'IS NULL',
+                      };
                     return {
                       col,
-                      op: 'IS NULL',
+                      op: 'IN',
+                      val: val as (string | number | boolean)[],
                     };
-                  return {
-                    col,
-                    op: 'IN',
-                    val: val as (string | number | boolean)[],
-                  };
-                }),
-        },
-        filterState: {
-          value: groupbyValues.length ? groupbyValues : null,
-          selectedValues: values.length ? values : null,
-        },
-      });
+                  }),
+          },
+          filterState: {
+            value: groupbyValues.length ? groupbyValues : null,
+            selectedValues: values.length ? values : null,
+          },
+        }
+      }
+
+      if (formData.drillDown) {
+        const drilldown = DrillDown.drillDown(ownState?.drilldown, values[0])
+        dataMask = {
+          extraFormData: {
+            filters: drilldown.filters,
+          },
+          filterState: {
+            value: groupbyValues.length && drilldown.filters.length > 0 ? groupbyValues : null,
+          },
+          ownState: {
+            drilldown: drilldown,
+          }
+        }
+      }
+
+      setDataMask(dataMask);
     },
     [groupby, labelMap, setDataMask, selectedValues],
   );

plugins/plugin-chart-echarts/src/Pie/buildQuery.ts

@@ -16,14 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+import { buildQueryContext, QueryFormData, DrillDown } from '@superset-ui/core';
 
-export default function buildQuery(formData: QueryFormData) {
-  const { metric, sort_by_metric } = formData;
+export default function buildQuery(formData: QueryFormData, { ownState }) {
+  const { metric, sort_by_metric, drillDown, groupby } = formData;
   return buildQueryContext(formData, baseQueryObject => [
     {
       ...baseQueryObject,
       ...(sort_by_metric && { orderby: [[metric, false]] }),
+      ...(drillDown && {
+        groupby: [DrillDown.getColumn(ownState.drilldown, groupby)],
+        filters: [...baseQueryObject.filters || [], ...DrillDown.getFilters(ownState.drilldown, groupby)],
+      }),
     },
   ]);
 }

plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx

@@ -39,6 +39,7 @@ const {
   numberFormat,
   showLabels,
   emitFilter,
+  drillDown,
 } = DEFAULT_FORM_DATA;
 
 const config: ControlPanelConfig = {
@@ -49,6 +50,19 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['groupby'],
+        isFeatureEnabled(FeatureFlag.DASHBOARD_DRILL_DOWN) ? [{
+          name: 'drillDown',
+          config: {
+            type: 'DrillDownControl',
+            label: t('Enable drill down'),
+            default: drillDown,
+            description: t('Columns as hierarchy.'),
+            mapStateToProps: ({ form_data}) => ({
+              chartId: form_data?.slice_id || 0,
+              columns: form_data.groupby,
+            }),
+          }
+        }] : [],
         ['metric'],
         ['adhoc_filters'],
         ['row_limit'],

plugins/plugin-chart-echarts/src/Pie/transformProps.ts

@@ -24,6 +24,7 @@ import {
   getTimeFormatter,
   NumberFormats,
   NumberFormatter,
+  DrillDown,
 } from '@superset-ui/core';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { EChartsOption, PieSeriesOption } from 'echarts';
@@ -77,14 +78,14 @@ export function formatPieLabel({
 }
 
 export default function transformProps(chartProps: EchartsPieChartProps): PieChartTransformedProps {
-  const { formData, height, hooks, filterState, queriesData, width } = chartProps;
+  const { formData, height, hooks, filterState, queriesData, width, ownState } = chartProps;
   const { data = [] } = queriesData[0];
   const coltypeMapping = getColtypesMapping(queriesData[0]);
 
   const {
     colorScheme,
     donut,
-    groupby,
+    groupby: hierarchyOrColumns,
     innerRadius,
     labelsOutside,
     labelLine,
@@ -100,9 +101,11 @@ export default function transformProps(chartProps: EchartsPieChartProps): PieCha
     showLegend,
     showLabelsThreshold,
     emitFilter,
+    drillDown,
   }: EchartsPieFormData = { ...DEFAULT_LEGEND_FORM_DATA, ...DEFAULT_PIE_FORM_DATA, ...formData };
   const metricLabel = getMetricLabel(metric);
   const minShowLabelAngle = (showLabelsThreshold || 0) * 3.6;
+  const groupby = drillDown && ownState?.drilldown ? [DrillDown.getColumn(ownState.drilldown)] : hierarchyOrColumns;
 
   const keys = data.map(datum =>
     extractGroupbyLabel({
@@ -231,6 +234,7 @@ export default function transformProps(chartProps: EchartsPieChartProps): PieCha
     echartOptions,
     setDataMask,
     emitFilter,
+    ownState,
     labelMap,
     groupby,
     selectedValues,

plugins/plugin-chart-echarts/src/Pie/types.ts

@@ -21,6 +21,7 @@ import {
   ChartDataResponseResult,
   ChartProps,
   DataRecordValue,
+  JsonObject,
   QueryFormData,
   SetDataMaskHook,
 } from '@superset-ui/core';
@@ -49,6 +50,7 @@ export type EchartsPieFormData = QueryFormData &
     dateFormat: string;
     showLabelsThreshold: number;
     emitFilter: boolean;
+    drillDown: boolean;
   };
 
 export enum EchartsPieLabelType {
@@ -82,6 +84,7 @@ export const DEFAULT_FORM_DATA: EchartsPieFormData = {
   showLabelsThreshold: 5,
   emitFilter: false,
   dateFormat: 'smart_date',
+  drillDown: false,
 };
 
 export interface PieChartTransformedProps {
@@ -94,4 +97,5 @@ export interface PieChartTransformedProps {
   labelMap: Record<string, DataRecordValue[]>;
   groupby: string[];
   selectedValues: Record<number, string>;
+  ownState?: JsonObject;
 }