feat: Draft drilldown POC

superset-frontend/src/chart/Chart.jsx

@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Alert from 'src/components/Alert';
-import { styled, logging, t } from '@superset-ui/core';
+import { styled, logging, t, DrillDown } from '@superset-ui/core';
 
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import Button from 'src/components/Button';
@@ -109,6 +109,11 @@ class Chart extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (this.props.formData?.drillDown) {
+      const drilldown = DrillDown.fromHierarchy(this.props.formData.groupby)
+      this.props.actions.updateDataMask(this.props.chartId, {ownState: {drilldown: drilldown}});
+    }
+
     if (this.props.triggerQuery) {
       this.runQuery();
     }

superset-frontend/src/chart/ChartRenderer.jsx

@@ -94,7 +94,6 @@ class ChartRenderer extends React.Component {
       return (
         this.hasQueryResponseChange ||
         nextProps.annotationData !== this.props.annotationData ||
-        nextProps.ownState !== this.props.ownState ||
         nextProps.filterState !== this.props.filterState ||
         nextProps.height !== this.props.height ||
         nextProps.width !== this.props.width ||

superset-frontend/src/explore/actions/exploreActions.ts

@@ -26,6 +26,7 @@ import {
 } from '@superset-ui/core';
 import { Dispatch } from 'redux';
 import { addDangerToast, toastActions } from 'src/messageToasts/actions';
+import { updateDataMask } from 'src/dataMask/actions';
 import { Slice } from 'src/types/Chart';
 
 const FAVESTAR_BASE_URL = '/superset/favstar/slice';
@@ -152,6 +153,7 @@ export const exploreActions = {
   updateChartTitle,
   createNewSlice,
   sliceUpdated,
+  updateDataMask,
 };
 
 export type ExploreActions = typeof exploreActions;

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -590,7 +590,7 @@ function mapStateToProps(state) {
     forcedHeight: explore.forced_height,
     chart,
     timeout: explore.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
-    ownState: dataMask[form_data.slice_id]?.ownState,
+    ownState: dataMask[form_data?.slice_id || 0]?.ownState,
     impressionId,
   };
 }

superset-frontend/src/explore/components/controls/DrillDownControl/DrillDownControl.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 React from 'react';
+import ControlHeader from 'src/explore/components/ControlHeader';
+import { ExploreActions } from 'src/explore/actions/exploreActions';
+import Checkbox from 'src/components/Checkbox';
+import { DrillDown } from "@superset-ui/core";
+
+type drillDownProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  chartId: string;
+  columns: string[];
+  actions: ExploreActions;
+};
+
+const checkboxStyle = { paddingRight: '5px' };
+
+export default function DrillDownControl(props: drillDownProps){
+  const onChange = () => {
+    const chartId = props.chartId.toString();
+    if (!props.value) {
+      const drilldown = DrillDown.fromHierarchy(props.columns)
+      props.actions.updateDataMask(chartId, {ownState: {drilldown: drilldown}});
+    } else {
+      props.actions.updateDataMask(chartId, {ownState: {}});
+    }
+    props.onChange(!props.value);
+  }
+
+  const renderCheckbox = () => {
+    return (
+      <Checkbox
+        onChange={onChange}
+        style={checkboxStyle}
+        checked={props.value}
+      />
+    );
+  }
+
+  if (props.label) {
+    return (
+      <ControlHeader
+        {...props}
+        leftNode={renderCheckbox()}
+        onClick={onChange}
+      />
+    );
+  }
+  return renderCheckbox();
+}

superset-frontend/src/explore/components/controls/DrillDownControl/index.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+export { default } from './DrillDownControl';

superset-frontend/src/explore/components/controls/index.js

@@ -45,6 +45,7 @@ import DndColumnSelectControl, {
   DndFilterSelect,
   DndMetricSelect,
 } from './DndColumnSelectControl';
+import DrillDownControl from './DrillDownControl';
 
 const controlMap = {
   AnnotationLayerControl,
@@ -60,6 +61,7 @@ const controlMap = {
   DndColumnSelect,
   DndFilterSelect,
   DndMetricSelect,
+  DrillDownControl,
   FixedOrMetricControl,
   HiddenControl,
   SelectAsyncControl,

superset/config.py

@@ -358,6 +358,7 @@ def _try_json_readsha(  # pylint: disable=unused-argument
     "ESCAPE_MARKDOWN_HTML": False,
     "DASHBOARD_NATIVE_FILTERS": False,
     "DASHBOARD_CROSS_FILTERS": False,
+    "DASHBOARD_DRILL_DOWN": False,
     "DASHBOARD_NATIVE_FILTERS_SET": False,
     "GLOBAL_ASYNC_QUERIES": False,
     "VERSIONED_EXPORT": False,