feat: apply Time Grain to X-Axis column

UPDATING.md

@@ -27,6 +27,8 @@ assists people when migrating to a new version.
 - [20606](https://github.com/apache/superset/pull/20606): When user clicks on chart title or "Edit chart" button in Dashboard page, Explore opens in the same tab. Clicking while holding cmd/ctrl opens Explore in a new tab. To bring back the old behaviour (always opening Explore in a new tab), flip feature flag `DASHBOARD_EDIT_CHART_IN_NEW_TAB` to `True`.
 - [20799](https://github.com/apache/superset/pull/20799): Presto and Trino engine will now display tracking URL for running queries in SQL Lab. If for some reason you don't want to show the tracking URL (for example, when your data warehouse hasn't enable access for to Presto or Trino UI), update `TRACKING_URL_TRANSFORMER` in `config.py` to return `None`.
 - [21002](https://github.com/apache/superset/pull/21002): Support Python 3.10 and bump pandas 1.4 and pyarrow 6.
+- [21163](https://github.com/apache/superset/pull/21163): When `GENERIC_CHART_AXES` feature flags set to `True`, the Time Grain control will move below the X-Axis control.
+
 
 ### Breaking Changes
 

superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx

@@ -30,6 +30,11 @@ export const echartsTimeSeriesQuery: ControlPanelSectionConfig = {
   expanded: true,
   controlSetRows: [
     [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null],
+    [
+      isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+        ? 'time_grain_sqla'
+        : null,
+    ],
     ['metrics'],
     ['groupby'],
     [

superset-frontend/packages/superset-ui-chart-controls/src/sections/sections.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
 import { ControlPanelSectionConfig } from '../types';
 
 // A few standard controls sections that are used internally.
@@ -38,6 +38,19 @@ export const legacyTimeseriesTime: ControlPanelSectionConfig = {
   ],
 };
 
+export const genericTime: ControlPanelSectionConfig = {
+  ...baseTimeSection,
+  controlSetRows: [
+    ['granularity_sqla'],
+    [
+      isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+        ? null
+        : 'time_grain_sqla',
+    ],
+    ['time_range'],
+  ],
+};
+
 export const legacyRegularTime: ControlPanelSectionConfig = {
   ...baseTimeSection,
   controlSetRows: [['granularity_sqla'], ['time_range']],

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx

@@ -47,6 +47,8 @@ import {
   ComparisionType,
   QueryResponse,
   QueryColumn,
+  isAdhocColumn,
+  isPhysicalColumn,
 } from '@superset-ui/core';
 
 import {
@@ -323,6 +325,21 @@ const time_grain_sqla: SharedControlConfig<'SelectControl'> = {
   mapStateToProps: ({ datasource }) => ({
     choices: (datasource as Dataset)?.time_grain_sqla || null,
   }),
+  visibility: ({ controls }) => {
+    if (!isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)) {
+      return true;
+    }
+
+    const xAxis = controls?.x_axis;
+    const xAxisValue = xAxis?.value;
+    if (xAxisValue === undefined || isAdhocColumn(xAxisValue)) {
+      return true;
+    }
+    if (isPhysicalColumn(xAxisValue)) {
+      return !!xAxis?.options?.[xAxisValue]?.is_dttm;
+    }
+    return false;
+  },
 };
 
 const time_range: SharedControlConfig<'DateFilterControl'> = {

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

@@ -23,6 +23,8 @@ import { QueryFieldAliases, QueryFormData } from './types/QueryFormData';
 import { QueryContext, QueryObject } from './types/Query';
 import { SetDataMaskHook } from '../chart';
 import { JsonObject } from '../connection';
+import { isFeatureEnabled, FeatureFlag } from '../utils';
+import { normalizeTimeColumn } from './normalizeTimeColumn';
 
 const WRAP_IN_ARRAY = (baseQueryObject: QueryObject) => [baseQueryObject];
 
@@ -45,13 +47,16 @@ export default function buildQueryContext(
     typeof options === 'function'
       ? { buildQuery: options, queryFields: {} }
       : options || {};
-  const queries = buildQuery(buildQueryObject(formData, queryFields));
+  let queries = buildQuery(buildQueryObject(formData, queryFields));
   queries.forEach(query => {
     if (Array.isArray(query.post_processing)) {
       // eslint-disable-next-line no-param-reassign
       query.post_processing = query.post_processing.filter(Boolean);
     }
   });
+  if (isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)) {
+    queries = queries.map(query => normalizeTimeColumn(formData, query));
+  }
   return {
     datasource: new DatasourceKey(formData.datasource).toObject(),
     force: formData.force || false,

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

@@ -28,6 +28,7 @@ export { default as getColumnLabel } from './getColumnLabel';
 export { default as getMetricLabel } from './getMetricLabel';
 export { default as DatasourceKey } from './DatasourceKey';
 export { default as normalizeOrderBy } from './normalizeOrderBy';
+export { normalizeTimeColumn } from './normalizeTimeColumn';
 
 export * from './types/AnnotationLayer';
 export * from './types/QueryFormData';

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

@@ -0,0 +1,83 @@
+/**
+ * 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 omit from 'lodash/omit';
+
+import {
+  AdhocColumn,
+  isAdhocColumn,
+  isPhysicalColumn,
+  QueryFormColumn,
+  QueryFormData,
+  QueryObject,
+} from './types';
+import { FeatureFlag, isFeatureEnabled } from '../utils';
+
+export function normalizeTimeColumn(
+  formData: QueryFormData,
+  queryObject: QueryObject,
+): QueryObject {
+  if (!(isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && formData.x_axis)) {
+    return queryObject;
+  }
+
+  const { columns: _columns, extras: _extras } = queryObject;
+  const mutatedColumns: QueryFormColumn[] = [...(_columns || [])];
+  const axisIdx = _columns?.findIndex(
+    col =>
+      (isPhysicalColumn(col) &&
+        isPhysicalColumn(formData.x_axis) &&
+        col === formData.x_axis) ||
+      (isAdhocColumn(col) &&
+        isAdhocColumn(formData.x_axis) &&
+        col.sqlExpression === formData.x_axis.sqlExpression),
+  );
+  if (
+    axisIdx !== undefined &&
+    axisIdx > -1 &&
+    formData.x_axis &&
+    Array.isArray(_columns)
+  ) {
+    if (isAdhocColumn(_columns[axisIdx])) {
+      mutatedColumns[axisIdx] = {
+        timeGrain: _extras?.time_grain_sqla,
+        columnType: 'BASE_AXIS',
+        ...(_columns[axisIdx] as AdhocColumn),
+      };
+    } else {
+      mutatedColumns[axisIdx] = {
+        timeGrain: _extras?.time_grain_sqla,
+        columnType: 'BASE_AXIS',
+        sqlExpression: formData.x_axis,
+        label: formData.x_axis,
+        expressionType: 'SQL',
+      };
+    }
+
+    const newQueryObject = omit(queryObject, [
+      'extras.time_grain_sqla',
+      'is_timeseries',
+    ]);
+    newQueryObject.columns = mutatedColumns;
+
+    return newQueryObject;
+  }
+
+  // fallback, return original queryObject
+  return queryObject;
+}

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

@@ -27,6 +27,8 @@ export interface AdhocColumn {
   optionName?: string;
   sqlExpression: string;
   expressionType: 'SQL';
+  columnType?: 'BASE_AXIS' | 'SERIES';
+  timeGrain?: string;
 }
 
 /**

superset-frontend/packages/superset-ui-core/test/query/buildQueryContext.test.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { buildQueryContext } from '@superset-ui/core';
+import * as queryModule from '../../src/query/normalizeTimeColumn';
 
 describe('buildQueryContext', () => {
   it('should build datasource for table sources and apply defaults', () => {
@@ -122,4 +123,50 @@ describe('buildQueryContext', () => {
       },
     ]);
   });
+  it('should call normalizeTimeColumn if GENERIC_CHART_AXES is enabled', () => {
+    // @ts-ignore
+    const spy = jest.spyOn(window, 'window', 'get').mockImplementation(() => ({
+      featureFlags: {
+        GENERIC_CHART_AXES: true,
+      },
+    }));
+    const spyNormalizeTimeColumn = jest.spyOn(
+      queryModule,
+      'normalizeTimeColumn',
+    );
+
+    buildQueryContext(
+      {
+        datasource: '5__table',
+        viz_type: 'table',
+      },
+      () => [{}],
+    );
+    expect(spyNormalizeTimeColumn).toBeCalled();
+    spy.mockRestore();
+    spyNormalizeTimeColumn.mockRestore();
+  });
+  it("shouldn't call normalizeTimeColumn if GENERIC_CHART_AXES is disabled", () => {
+    // @ts-ignore
+    const spy = jest.spyOn(window, 'window', 'get').mockImplementation(() => ({
+      featureFlags: {
+        GENERIC_CHART_AXES: false,
+      },
+    }));
+    const spyNormalizeTimeColumn = jest.spyOn(
+      queryModule,
+      'normalizeTimeColumn',
+    );
+
+    buildQueryContext(
+      {
+        datasource: '5__table',
+        viz_type: 'table',
+      },
+      () => [{}],
+    );
+    expect(spyNormalizeTimeColumn).not.toBeCalled();
+    spy.mockRestore();
+    spyNormalizeTimeColumn.mockRestore();
+  });
 });