From e1098bb713508388662de07f67f9816868cc515e Mon Sep 17 00:00:00 2001
From: Yongjie Zhao <yongjie.zhao@gmail.com>
Date: Thu, 8 Sep 2022 16:36:44 +0800
Subject: [PATCH] fix: should be able to remove selection in X-AXIS control

---
 .../src/shared-controls/constants.tsx         | 51 +++++++------------
 .../superset-ui-chart-controls/src/types.ts   |  1 +
 .../explore/controlUtils/getControlState.ts   | 15 ++++++
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
index cdd07f15e0930..91427e14612ec 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
@@ -19,48 +19,35 @@
 import {
   FeatureFlag,
   isFeatureEnabled,
+  QueryFormData,
   t,
   validateNonEmpty,
 } from '@superset-ui/core';
 import { ControlPanelState, ControlState } from '../types';
 
-export const xAxisControlConfig = {
-  label: (state: ControlPanelState) => {
-    if (
-      isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) &&
-      state?.form_data?.orientation === 'horizontal'
-    ) {
-      return t('Y-axis');
-    }
+const getAxisLabel = (
+  formData: QueryFormData,
+): Record<'label' | 'description', string> =>
+  formData?.orientation === 'horizontal'
+    ? { label: t('Y-axis'), description: t('Dimension to use on y-axis.') }
+    : { label: t('X-axis'), description: t('Dimension to use on x-axis.') };
 
-    return t('X-axis');
-  },
-  default: (
-    control: ControlState,
-    controlPanel: Partial<ControlPanelState>,
-  ) => {
-    // default to the chosen time column if x-axis is unset and the
-    // GENERIC_CHART_AXES feature flag is enabled
-    const { value } = control;
-    if (value) {
-      return value;
-    }
-    const timeColumn = controlPanel?.form_data?.granularity_sqla;
-    if (isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && timeColumn) {
-      return timeColumn;
-    }
-    return null;
-  },
+export const xAxisControlConfig = {
+  label: (state: ControlPanelState) => getAxisLabel(state?.form_data).label,
   multi: false,
-  description: (state: ControlPanelState) => {
+  description: (state: ControlPanelState) =>
+    getAxisLabel(state?.form_data).description,
+  validators: [validateNonEmpty],
+  initialValue: (control: ControlState, state: ControlPanelState) => {
     if (
       isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) &&
-      state?.form_data?.orientation === 'horizontal'
+      state?.form_data?.granularity_sqla &&
+      !state.form_data?.x_axis &&
+      !control?.value
     ) {
-      return t('Dimension to use on y-axis.');
+      return state.form_data.granularity_sqla;
     }
-
-    return t('Dimension to use on x-axis.');
+    return undefined;
   },
-  validators: [validateNonEmpty],
+  default: undefined,
 };
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
index c2b4366ff5c5a..5dda10f54cc1e 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
@@ -221,6 +221,7 @@ export interface BaseControlConfig<
         chartState?: AnyDict,
       ) => ReactNode);
   default?: V;
+  initialValue?: V;
   renderTrigger?: boolean;
   validators?: ControlValueValidator<T, O, V>[];
   warning?: ReactNode;
diff --git a/superset-frontend/src/explore/controlUtils/getControlState.ts b/superset-frontend/src/explore/controlUtils/getControlState.ts
index 5014cd3c1a40c..f3c5d8b4cf272 100644
--- a/superset-frontend/src/explore/controlUtils/getControlState.ts
+++ b/superset-frontend/src/explore/controlUtils/getControlState.ts
@@ -98,6 +98,21 @@ export function applyMapStateToPropsToControl<T = ControlType>(
     // `mapStateToProps` may also provide a value
     value = value || state.value;
   }
+
+  // InitialValue is used for setting value for the control,
+  // this value is not recalculated. The default value will override it.
+  if (typeof state.initialValue === 'function') {
+    state.initialValue = state.initialValue(state, controlPanelState);
+    // if default is still a function, discard
+    if (typeof state.initialValue === 'function') {
+      delete state.initialValue;
+    }
+  }
+  if (state.initialValue) {
+    value = state.initialValue;
+    delete state.initialValue;
+  }
+
   // If default is a function, evaluate it
   if (typeof state.default === 'function') {
     state.default = state.default(state, controlPanelState);