From 8f61e3c5d9fd0332ed76001c9ac8bd8d569f2d8d Mon Sep 17 00:00:00 2001 From: Yongjie Zhao Date: Wed, 12 Oct 2022 08:38:30 +0800 Subject: [PATCH] refactor: preparation for time section migration (#21766) --- .../superset-ui-chart-controls/src/index.ts | 2 +- .../src/sections/echartsTimeSeriesQuery.tsx | 15 +-- .../src/sections/sections.tsx | 8 +- .../src/shared-controls/dndControls.tsx | 5 +- .../src/shared-controls/index.tsx | 11 +- .../src/shared-controls/mixins.tsx | 5 +- .../test/fixtures.ts | 10 +- .../test/utils/getTemporalColumns.test.ts | 2 +- .../superset-ui-core/src/query/constants.ts | 18 +-- .../superset-ui-core/src/query/getXAxis.ts | 6 + .../superset-ui-core/src/query/index.ts | 2 +- .../src/query/types/Column.ts | 6 + .../BigNumberWithTrendline/controlPanel.tsx | 15 +-- .../src/MixedTimeseries/controlPanel.tsx | 9 +- .../src/MixedTimeseries/index.ts | 9 +- .../src/Timeseries/Area/index.ts | 7 +- .../src/Timeseries/Regular/Bar/index.ts | 7 +- .../src/Timeseries/Regular/Line/index.ts | 7 +- .../src/Timeseries/Regular/Scatter/index.ts | 7 +- .../Timeseries/Regular/SmoothLine/index.ts | 7 +- .../src/Timeseries/Step/index.ts | 7 +- .../src/Timeseries/index.ts | 9 +- .../src/plugin/buildQuery.ts | 7 +- .../src/plugin/controlPanel.tsx | 9 +- .../plugin-chart-table/src/buildQuery.ts | 5 +- .../plugin-chart-table/src/controlPanel.tsx | 7 +- .../components/FiltersBadge/selectors.ts | 3 +- .../FilterBar/FilterBar.test.tsx | 2 +- .../DateFilterControl/DateFilterLabel.tsx | 103 ++++++------------ .../components/AdvancedFrame.tsx | 24 ++-- .../controls/DateFilterControl/index.ts | 5 + .../controls/DateFilterControl/types.ts | 11 ++ .../DateFilterControl/utils/constants.ts | 6 + .../utils/dateFilterUtils.ts | 56 +++++++++- .../DndAdhocFilterOption.tsx | 69 ++++++++++++ .../DndFilterSelect.tsx | 44 +++----- .../index.tsx | 76 ++++++------- .../AdhocFilterOption.test.tsx | 20 ++-- .../FilterControl/AdhocFilterOption/index.jsx | 86 --------------- .../FilterControl/AdhocFilterOption/index.tsx | 77 +++++++++++++ superset-frontend/src/explore/constants.ts | 4 - .../getFormDataWithDashboardContext.ts | 2 +- .../components/Time/TimeFilterPlugin.tsx | 3 +- 43 files changed, 416 insertions(+), 377 deletions(-) create mode 100644 superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndAdhocFilterOption.tsx delete mode 100644 superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx create mode 100644 superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.tsx diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts index 6d22c2a7c..6aac9b500 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts @@ -37,4 +37,4 @@ export { legacySortBy } from './shared-controls/legacySortBy'; export * from './shared-controls/emitFilterControl'; export * from './shared-controls/components'; export * from './types'; -export { xAxisMixin, temporalColumnMixin } from './shared-controls/mixins'; +export * from './shared-controls/mixins'; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx index 6fe14d345..ac947abed 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/echartsTimeSeriesQuery.tsx @@ -16,12 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { - ContributionType, - FeatureFlag, - isFeatureEnabled, - t, -} from '@superset-ui/core'; +import { ContributionType, hasGenericChartAxes, t } from '@superset-ui/core'; import { ControlPanelSectionConfig } from '../types'; import { emitFilterControl } from '../shared-controls/emitFilterControl'; @@ -29,12 +24,8 @@ export const echartsTimeSeriesQuery: ControlPanelSectionConfig = { label: t('Query'), expanded: true, controlSetRows: [ - [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null], - [ - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? 'time_grain_sqla' - : null, - ], + [hasGenericChartAxes ? 'x_axis' : null], + [hasGenericChartAxes ? 'time_grain_sqla' : null], ['metrics'], ['groupby'], [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/sections.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/sections.tsx index 4f4efdb82..6214e2ba9 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/sections.tsx +++ b/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 { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core'; +import { hasGenericChartAxes, t } from '@superset-ui/core'; import { ControlPanelSectionConfig } from '../types'; // A few standard controls sections that are used internally. @@ -42,11 +42,7 @@ export const genericTime: ControlPanelSectionConfig = { ...baseTimeSection, controlSetRows: [ ['granularity_sqla'], - [ - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? null - : 'time_grain_sqla', - ], + [hasGenericChartAxes ? null : 'time_grain_sqla'], ['time_range'], ], }; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx index 7748777df..cf1cee2c1 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx @@ -30,6 +30,7 @@ import { SharedControlConfig, Dataset, Metric, + isDataset, } from '../types'; import { DATASET_TIME_COLUMN_OPTION, TIME_FILTER_LABELS } from '../constants'; import { @@ -138,8 +139,8 @@ export const dndAdhocFilterControl: SharedControlConfig< default: [], description: '', mapStateToProps: ({ datasource, form_data }) => ({ - columns: datasource?.columns[0]?.hasOwnProperty('filterable') - ? (datasource as Dataset)?.columns.filter(c => c.filterable) + columns: isDataset(datasource) + ? datasource.columns.filter(c => c.filterable) : datasource?.columns || [], savedMetrics: defineSavedMetrics(datasource), // current active adhoc metrics diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx index 89f6edba1..de94c4e16 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx @@ -35,11 +35,9 @@ */ import { isEmpty } from 'lodash'; import { - FeatureFlag, t, getCategoricalSchemeRegistry, getSequentialSchemeRegistry, - isFeatureEnabled, SequentialScheme, legacyValidateInteger, ComparisionType, @@ -47,6 +45,8 @@ import { isPhysicalColumn, ensureIsArray, isDefined, + hasGenericChartAxes, + NO_TIME_RANGE, } from '@superset-ui/core'; import { @@ -205,7 +205,7 @@ const time_grain_sqla: SharedControlConfig<'SelectControl'> = { choices: (datasource as Dataset)?.time_grain_sqla || [], }), visibility: ({ controls }) => { - if (!isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)) { + if (!hasGenericChartAxes) { return true; } @@ -227,7 +227,7 @@ const time_range: SharedControlConfig<'DateFilterControl'> = { type: 'DateFilterControl', freeForm: true, label: TIME_FILTER_LABELS.time_range, - default: t('No filter'), // this value is translated, but the backend wouldn't understand a translated value? + default: NO_TIME_RANGE, // this value is an empty filter constant so shouldn't translate it. description: t( 'The time range for the visualization. All relative times, e.g. "Last month", ' + '"Last 7 days", "now", etc. are evaluated on the server using the server\'s ' + @@ -236,9 +236,6 @@ const time_range: SharedControlConfig<'DateFilterControl'> = { "using the engine's local timezone. Note one can explicitly set the timezone " + 'per the ISO 8601 format if specifying either the start and/or end time.', ), - mapStateToProps: ({ datasource }) => ({ - datasource, - }), }; const row_limit: SharedControlConfig<'SelectControl'> = { diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/mixins.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/mixins.tsx index 2939bb2b4..c268104d3 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/mixins.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/mixins.tsx @@ -17,8 +17,7 @@ * under the License. */ import { - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, QueryFormData, t, validateNonEmpty, @@ -41,7 +40,7 @@ export const xAxisMixin = { validators: [validateNonEmpty], initialValue: (control: ControlState, state: ControlPanelState | null) => { if ( - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && + hasGenericChartAxes && state?.form_data?.granularity_sqla && !state.form_data?.x_axis && !control?.value diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/fixtures.ts b/superset-frontend/packages/superset-ui-chart-controls/test/fixtures.ts index d694bde88..92ce4af40 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/fixtures.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/fixtures.ts @@ -23,7 +23,7 @@ export const TestDataset: Dataset = { column_format: {}, columns: [ { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'num', @@ -41,7 +41,7 @@ export const TestDataset: Dataset = { warning_markdown: null, }, { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'gender', @@ -59,7 +59,7 @@ export const TestDataset: Dataset = { warning_markdown: null, }, { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'state', @@ -77,7 +77,7 @@ export const TestDataset: Dataset = { warning_markdown: null, }, { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'ds', @@ -95,7 +95,7 @@ export const TestDataset: Dataset = { warning_markdown: null, }, { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'name', diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts index 79dee957d..8b94752c8 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts @@ -24,7 +24,7 @@ test('get temporal columns from a Dataset', () => { expect(getTemporalColumns(TestDataset)).toEqual({ temporalColumns: [ { - advanced_data_type: null, + advanced_data_type: undefined, certification_details: null, certified_by: null, column_name: 'ds', diff --git a/superset-frontend/packages/superset-ui-core/src/query/constants.ts b/superset-frontend/packages/superset-ui-core/src/query/constants.ts index 9b9398b31..812ad0990 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/constants.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/constants.ts @@ -1,11 +1,3 @@ -import { - ExtraFormDataAppend, - ExtraFormDataOverrideExtras, - ExtraFormDataOverrideRegular, - ExtraFormDataOverride, - QueryObject, -} from './types'; - /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -24,7 +16,17 @@ import { * specific language governing permissions and limitations * under the License. */ +import { + ExtraFormDataAppend, + ExtraFormDataOverrideExtras, + ExtraFormDataOverrideRegular, + ExtraFormDataOverride, + QueryObject, +} from './types'; + export const DTTM_ALIAS = '__timestamp'; +export const DEFAULT_TIME_RANGE = 'No filter'; // TODO: make this configurable per Superset installation +export const NO_TIME_RANGE = 'No filter'; export const EXTRA_FORM_DATA_OVERRIDE_EXTRA_KEYS: (keyof ExtraFormDataOverrideExtras)[] = ['relative_start', 'relative_end', 'time_grain_sqla']; diff --git a/superset-frontend/packages/superset-ui-core/src/query/getXAxis.ts b/superset-frontend/packages/superset-ui-core/src/query/getXAxis.ts index 2413ef516..8510f7d69 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/getXAxis.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/getXAxis.ts @@ -18,6 +18,8 @@ */ import { DTTM_ALIAS, + FeatureFlag, + isFeatureEnabled, getColumnLabel, isQueryFormColumn, QueryFormData, @@ -26,6 +28,10 @@ import { export const isXAxisSet = (formData: QueryFormData) => isQueryFormColumn(formData.x_axis); +export const hasGenericChartAxes = isFeatureEnabled( + FeatureFlag.GENERIC_CHART_AXES, +); + export const getXAxis = (formData: QueryFormData): string | undefined => { // The formData should be "raw form_data" -- the snake_case version of formData rather than camelCase. if (!(formData.granularity_sqla || formData.x_axis)) { diff --git a/superset-frontend/packages/superset-ui-core/src/query/index.ts b/superset-frontend/packages/superset-ui-core/src/query/index.ts index c3d9bc1bd..21c775ad6 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/index.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/index.ts @@ -29,7 +29,7 @@ export { default as getMetricLabel } from './getMetricLabel'; export { default as DatasourceKey } from './DatasourceKey'; export { default as normalizeOrderBy } from './normalizeOrderBy'; export { normalizeTimeColumn } from './normalizeTimeColumn'; -export { getXAxis, isXAxisSet } from './getXAxis'; +export { getXAxis, isXAxisSet, hasGenericChartAxes } from './getXAxis'; export * from './types/AnnotationLayer'; export * from './types/QueryFormData'; diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts index 693bf5e54..15a5f29de 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/types/Column.ts @@ -52,6 +52,12 @@ export interface Column { expression?: string | null; database_expression?: string | null; python_date_format?: string | null; + + // used for advanced_data_type + optionName?: string; + filterBy?: string; + value?: string; + advanced_data_type?: string; } export function isPhysicalColumn(column?: any): column is PhysicalColumn { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx index 7c46ca6a5..71414105a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx @@ -16,12 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { - FeatureFlag, - isFeatureEnabled, - smartDateFormatter, - t, -} from '@superset-ui/core'; +import { hasGenericChartAxes, smartDateFormatter, t } from '@superset-ui/core'; import { ControlPanelConfig, D3_FORMAT_DOCS, @@ -41,12 +36,8 @@ const config: ControlPanelConfig = { label: t('Query'), expanded: true, controlSetRows: [ - [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null], - [ - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? 'time_grain_sqla' - : null, - ], + [hasGenericChartAxes ? 'x_axis' : null], + [hasGenericChartAxes ? 'time_grain_sqla' : null], ['metric'], ['adhoc_filters'], ], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index 00f2d9ed8..619290a69 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -17,12 +17,7 @@ * under the License. */ import React from 'react'; -import { - ensureIsArray, - FeatureFlag, - isFeatureEnabled, - t, -} from '@superset-ui/core'; +import { ensureIsArray, hasGenericChartAxes, t } from '@superset-ui/core'; import { cloneDeep } from 'lodash'; import { ControlPanelConfig, @@ -292,7 +287,7 @@ function createAdvancedAnalyticsSection( const config: ControlPanelConfig = { controlPanelSections: [ sections.genericTime, - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + hasGenericChartAxes ? { label: t('Shared query fields'), expanded: true, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts index 221e45bfd..2f6a9fc57 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import buildQuery from './buildQuery'; @@ -57,7 +56,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Visualize two different series using the same x-axis. Note that both series can be visualized with a different chart type (e.g. 1 using bars and 1 using a line).', ) @@ -70,9 +69,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? t('Mixed Chart') - : t('Mixed Time-Series'), + name: hasGenericChartAxes ? t('Mixed Chart') : t('Mixed Time-Series'), thumbnail, tags: [ t('Advanced-Analytics'), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts index ee7c89993..8b1407b12 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts @@ -22,8 +22,7 @@ import { ChartPlugin, AnnotationType, Behavior, - isFeatureEnabled, - FeatureFlag, + hasGenericChartAxes, } from '@superset-ui/core'; import buildQuery from '../buildQuery'; import controlPanel from './controlPanel'; @@ -54,7 +53,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Area charts are similar to line charts in that they represent variables with the same scale, but area charts stack the metrics on top of each other.', ) @@ -68,7 +67,7 @@ export default class EchartsAreaChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Area Chart v2') : t('Time-series Area Chart'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts index 2c74e6ac6..cc63d99de 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import { @@ -60,7 +59,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t('Bar Charts are used to show metrics as a series of bars.') : t( 'Time-series Bar Charts are used to show the changes in a metric over time as a series of bars.', @@ -76,7 +75,7 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Bar Chart v2') : t('Time-series Bar Chart v2'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts index 957d46054..e00f2328f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import { @@ -59,7 +58,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Line chart is used to visualize measurements taken over a given category. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.', ) @@ -73,7 +72,7 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Line Chart v2') : t('Time-series Line Chart'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts index fc544bdf7..758b75d0e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import { @@ -58,7 +57,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Scatter Plot has the horizontal axis in linear units, and the points are connected in order. It shows a statistical relationship between two variables.', ) @@ -72,7 +71,7 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Scatter Plot') : t('Time-series Scatter Plot'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts index c1b8ca47b..53c7cdeea 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import { @@ -58,7 +57,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Smooth-line is a variation of the line chart. Without angles and hard edges, Smooth-line sometimes looks smarter and more professional.', ) @@ -72,7 +71,7 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Smooth Line') : t('Time-series Smooth Line'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts index 4889233ae..c565a74d9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import { @@ -49,7 +48,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Stepped-line graph (also called step chart) is a variation of line chart but with the line forming a series of steps between data points. A step chart can be useful when you want to show the changes that occur at irregular intervals.', ) @@ -63,7 +62,7 @@ export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + name: hasGenericChartAxes ? t('Stepped Line') : t('Time-series Stepped Line'), tags: [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts index cbdd5cb41..e0532e848 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts @@ -21,8 +21,7 @@ import { Behavior, ChartMetadata, ChartPlugin, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, t, } from '@superset-ui/core'; import buildQuery from './buildQuery'; @@ -48,7 +47,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin< behaviors: [Behavior.INTERACTIVE_CHART], category: t('Evolution'), credits: ['https://echarts.apache.org'], - description: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + description: hasGenericChartAxes ? t( 'Swiss army knife for visualizing data. Choose between step, line, scatter, and bar charts. This viz type has many customization options as well.', ) @@ -62,9 +61,7 @@ export default class EchartsTimeseriesChartPlugin extends ChartPlugin< AnnotationType.Interval, AnnotationType.Timeseries, ], - name: isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? t('Generic Chart') - : t('Time-series Chart'), + name: hasGenericChartAxes ? t('Generic Chart') : t('Time-series Chart'), tags: [ t('Advanced-Analytics'), t('Aesthetic'), diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/buildQuery.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/buildQuery.ts index 8068ace2f..b4bff7b45 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/buildQuery.ts +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/buildQuery.ts @@ -22,8 +22,7 @@ import { AdhocColumn, buildQueryContext, ensureIsArray, - FeatureFlag, - isFeatureEnabled, + hasGenericChartAxes, isPhysicalColumn, QueryFormColumn, QueryFormOrderBy, @@ -42,7 +41,7 @@ export default function buildQuery(formData: PivotTableQueryFormData) { if ( isPhysicalColumn(col) && formData.time_grain_sqla && - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && + hasGenericChartAxes && formData?.datetime_columns_lookup?.[col] ) { return { @@ -66,7 +65,7 @@ export default function buildQuery(formData: PivotTableQueryFormData) { } return [ { - ...(isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + ...(hasGenericChartAxes ? omit(baseQueryObject, ['extras.time_grain_sqla']) : baseQueryObject), orderby: orderBy, diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx index fe69188b2..7287d2b9b 100644 --- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx @@ -19,9 +19,8 @@ import React from 'react'; import { ensureIsArray, - FeatureFlag, + hasGenericChartAxes, isAdhocColumn, - isFeatureEnabled, isPhysicalColumn, QueryFormMetric, smartDateFormatter, @@ -68,7 +67,7 @@ const config: ControlPanelConfig = { }, ], [ - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) + hasGenericChartAxes ? { name: 'time_grain_sqla', config: { @@ -98,9 +97,7 @@ const config: ControlPanelConfig = { }, } : null, - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) - ? 'datetime_columns_lookup' - : null, + hasGenericChartAxes ? 'datetime_columns_lookup' : null, ], [ { diff --git a/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts b/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts index cf074310d..6e12123dc 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts +++ b/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts @@ -20,9 +20,8 @@ import { AdhocColumn, buildQueryContext, ensureIsArray, - FeatureFlag, getMetricLabel, - isFeatureEnabled, + hasGenericChartAxes, isPhysicalColumn, QueryMode, QueryObject, @@ -104,7 +103,7 @@ const buildQuery: BuildQuery = ( if ( isPhysicalColumn(col) && formData.time_grain_sqla && - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && + hasGenericChartAxes && formData?.datetime_columns_lookup?.[col] ) { return { diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx index e26481964..f2d3740a7 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx @@ -23,6 +23,7 @@ import { ensureIsArray, FeatureFlag, GenericDataType, + hasGenericChartAxes, isAdhocColumn, isFeatureEnabled, isPhysicalColumn, @@ -189,7 +190,7 @@ const config: ControlPanelConfig = { }, ], [ - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode + hasGenericChartAxes && isAggMode ? { name: 'time_grain_sqla', config: { @@ -217,9 +218,7 @@ const config: ControlPanelConfig = { }, } : null, - isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) && isAggMode - ? 'datetime_columns_lookup' - : null, + hasGenericChartAxes && isAggMode ? 'datetime_columns_lookup' : null, ], [ { diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts index 855ca303d..c0916b996 100644 --- a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts +++ b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts @@ -25,8 +25,9 @@ import { FilterState, isFeatureEnabled, NativeFilterType, + NO_TIME_RANGE, } from '@superset-ui/core'; -import { NO_TIME_RANGE, TIME_FILTER_MAP } from 'src/explore/constants'; +import { TIME_FILTER_MAP } from 'src/explore/constants'; import { getChartIdsInFilterBoxScope } from 'src/dashboard/util/activeDashboardFilters'; import { ChartConfiguration } from 'src/dashboard/reducers/types'; import { Layout } from 'src/dashboard/types'; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx index de7d6af99..d14a94f8d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx @@ -26,7 +26,7 @@ import { testWithId } from 'src/utils/testUtils'; import { FeatureFlag } from 'src/featureFlags'; import { Preset } from '@superset-ui/core'; import { TimeFilterPlugin, SelectFilterPlugin } from 'src/filters/components'; -import { DATE_FILTER_CONTROL_TEST_ID } from 'src/explore/components/controls/DateFilterControl/DateFilterLabel'; +import { DATE_FILTER_CONTROL_TEST_ID } from 'src/explore/components/controls/DateFilterControl'; import fetchMock from 'fetch-mock'; import { waitFor } from '@testing-library/react'; import FilterBar, { FILTER_BAR_TEST_ID } from '.'; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index d8580fcbe..b4cd377ca 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@ -17,17 +17,14 @@ * under the License. */ import React, { useState, useEffect, useMemo } from 'react'; -import rison from 'rison'; -import { css, SupersetClient, styled, t, useTheme } from '@superset-ui/core'; import { - buildTimeRangeString, - formatTimeRange, - COMMON_RANGE_VALUES_SET, - CALENDAR_RANGE_VALUES_SET, - FRAME_OPTIONS, - customTimeRangeDecode, -} from 'src/explore/components/controls/DateFilterControl/utils'; -import { getClientErrorObject } from 'src/utils/getClientErrorObject'; + css, + styled, + t, + useTheme, + DEFAULT_TIME_RANGE, + NO_TIME_RANGE, +} from '@superset-ui/core'; import Button from 'src/components/Button'; import ControlHeader from 'src/explore/components/ControlHeader'; import Label, { Type } from 'src/components/Label'; @@ -35,14 +32,18 @@ import { Divider } from 'src/components'; import Icons from 'src/components/Icons'; import Select from 'src/components/Select/Select'; import { Tooltip } from 'src/components/Tooltip'; -import { DEFAULT_TIME_RANGE } from 'src/explore/constants'; import { useDebouncedEffect } from 'src/explore/exploreUtils'; import { SLOW_DEBOUNCE } from 'src/constants'; -import { testWithId } from 'src/utils/testUtils'; import { noOp } from 'src/utils/common'; -import { FrameType } from './types'; import ControlPopover from '../ControlPopover/ControlPopover'; +import { DateFilterControlProps, FrameType } from './types'; +import { + fetchTimeRange, + FRAME_OPTIONS, + getDateFilterControlTestId, + guessFrame, +} from './utils'; import { CommonFrame, CalendarFrame, @@ -50,42 +51,6 @@ import { AdvancedFrame, } from './components'; -const guessFrame = (timeRange: string): FrameType => { - if (COMMON_RANGE_VALUES_SET.has(timeRange)) { - return 'Common'; - } - if (CALENDAR_RANGE_VALUES_SET.has(timeRange)) { - return 'Calendar'; - } - if (timeRange === 'No filter') { - return 'No filter'; - } - if (customTimeRangeDecode(timeRange).matchedFlag) { - return 'Custom'; - } - return 'Advanced'; -}; - -const fetchTimeRange = async (timeRange: string) => { - const query = rison.encode_uri(timeRange); - const endpoint = `/api/v1/time_range/?q=${query}`; - try { - const response = await SupersetClient.get({ endpoint }); - const timeRangeString = buildTimeRangeString( - response?.json?.result?.since || '', - response?.json?.result?.until || '', - ); - return { - value: formatTimeRange(timeRangeString), - }; - } catch (response) { - const clientError = await getClientErrorObject(response); - return { - error: clientError.message || clientError.error, - }; - } -}; - const StyledPopover = styled(ControlPopover)``; const StyledRangeType = styled(Select)` width: 272px; @@ -161,20 +126,6 @@ const IconWrapper = styled.span` } `; -interface DateFilterControlProps { - name: string; - onChange: (timeRange: string) => void; - value?: string; - type?: Type; - onOpenPopover?: () => void; - onClosePopover?: () => void; -} - -export const DATE_FILTER_CONTROL_TEST_ID = 'date-filter-control'; -export const getDateFilterControlTestId = testWithId( - DATE_FILTER_CONTROL_TEST_ID, -); - export default function DateFilterLabel(props: DateFilterControlProps) { const { value = DEFAULT_TIME_RANGE, @@ -195,6 +146,12 @@ export default function DateFilterLabel(props: DateFilterControlProps) { const [tooltipTitle, setTooltipTitle] = useState(value); useEffect(() => { + if (value === NO_TIME_RANGE) { + setActualTimeRange(NO_TIME_RANGE); + setTooltipTitle(NO_TIME_RANGE); + setValidTimeRange(true); + return; + } fetchTimeRange(value).then(({ value: actualRange, error }) => { if (error) { setEvalResponse(error || ''); @@ -235,6 +192,12 @@ export default function DateFilterLabel(props: DateFilterControlProps) { useDebouncedEffect( () => { + if (timeRangeValue === NO_TIME_RANGE) { + setEvalResponse(NO_TIME_RANGE); + setLastFetchedTimeRange(NO_TIME_RANGE); + setValidTimeRange(true); + return; + } if (lastFetchedTimeRange !== timeRangeValue) { fetchTimeRange(timeRangeValue).then(({ value: actualRange, error }) => { if (error) { @@ -279,11 +242,11 @@ export default function DateFilterLabel(props: DateFilterControlProps) { } }; - function onChangeFrame(value: string) { - if (value === 'No filter') { - setTimeRangeValue('No filter'); + function onChangeFrame(value: FrameType) { + if (value === NO_TIME_RANGE) { + setTimeRangeValue(NO_TIME_RANGE); } - setFrame(value as FrameType); + setFrame(value); } const theme = useTheme(); @@ -354,10 +317,6 @@ export default function DateFilterLabel(props: DateFilterControlProps) { ); - const overlayStyle = { - width: '600px', - }; - return ( <> @@ -369,7 +328,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) { defaultVisible={show} visible={show} onVisibleChange={togglePopover} - overlayStyle={overlayStyle} + overlayStyle={{ width: '600px' }} >