feat(standardized form data): keep all columns and metrics (#20377)

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

@@ -364,6 +364,10 @@ export interface ControlPanelConfig {
       standardizedFormData: StandardizedFormDataInterface;
     },
   ) => QueryFormData;
+  updateStandardizedState?: (
+    prevState: StandardizedState,
+    currState: StandardizedState,
+  ) => StandardizedState;
 }
 
 export type ControlOverrides = {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts

@@ -100,4 +100,8 @@ export default {
     ...formData,
     metric: formData.standardizedFormData.standardizedState.metrics[0],
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 } as ControlPanelConfig;

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx

@@ -274,6 +274,10 @@ const config: ControlPanelConfig = {
     ...formData,
     metric: formData.standardizedFormData.standardizedState.metrics[0],
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default config;

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx

@@ -148,6 +148,10 @@ const config: ControlPanelConfig = {
     metric: formData.standardizedFormData.standardizedState.metrics[0],
     groupby: formData.standardizedFormData.standardizedState.columns,
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default config;

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx

@@ -313,6 +313,10 @@ const config: ControlPanelConfig = {
     metric: formData.standardizedFormData.standardizedState.metrics[0],
     groupby: formData.standardizedFormData.standardizedState.columns,
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default config;

superset-frontend/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx

@@ -324,6 +324,10 @@ const controlPanel: ControlPanelConfig = {
     ...formData,
     metric: formData.standardizedFormData.standardizedState.metrics[0],
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default controlPanel;

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

@@ -260,6 +260,10 @@ const config: ControlPanelConfig = {
     row_limit:
       ensureIsInt(formData.row_limit, 100) >= 100 ? 100 : formData.row_limit,
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default config;

superset-frontend/plugins/plugin-chart-echarts/src/Tree/controlPanel.tsx

@@ -289,6 +289,10 @@ const controlPanel: ControlPanelConfig = {
     ...formData,
     metric: formData.standardizedFormData.standardizedState.metrics[0],
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default controlPanel;

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx

@@ -142,6 +142,10 @@ const config: ControlPanelConfig = {
     metric: formData.standardizedFormData.standardizedState.metrics[0],
     groupby: formData.standardizedFormData.standardizedState.columns,
   }),
+  updateStandardizedState: (prevState, currState) => ({
+    ...currState,
+    metrics: [currState.metrics[0], ...prevState.metrics.slice(1)],
+  }),
 };
 
 export default config;

superset-frontend/src/explore/controlUtils/standardizedFormData.test.tsx → superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts

@@ -27,15 +27,46 @@ import {
 } from './standardizedFormData';
 
 describe('should collect control values and create SFD', () => {
-  const sharedControlsFormData = {};
-  Object.entries(sharedControls).forEach(([, names]) => {
-    names.forEach(name => {
-      sharedControlsFormData[name] = name;
-    });
-  });
-  const publicControlsFormData = Object.fromEntries(
-    publicControls.map((name, idx) => [[name], idx]),
-  );
+  const sharedControlsFormData = {
+    // metrics
+    metric: 'm1',
+    metrics: ['m2'],
+    metric_2: 'm3',
+    // columns
+    groupby: ['c1'],
+    columns: ['c2'],
+    groupbyColumns: ['c3'],
+    groupbyRows: ['c4'],
+  };
+  const publicControlsFormData = {
+    // time section
+    granularity_sqla: 'time_column',
+    time_grain_sqla: 'P1D',
+    time_range: '2000 : today',
+    // filters
+    adhoc_filters: [],
+    // subquery limit(series limit)
+    limit: 5,
+    // order by clause
+    timeseries_limit_metric: 'orderby_metric',
+    series_limit_metric: 'orderby_metric',
+    // desc or asc in order by clause
+    order_desc: true,
+    // outer query limit
+    row_limit: 100,
+    // x asxs column
+    x_axis: 'x_axis_column',
+    // advanced analytics - rolling window
+    rolling_type: 'sum',
+    rolling_periods: 1,
+    min_periods: 0,
+    // advanced analytics - time comparison
+    time_compare: '1 year ago',
+    comparison_type: 'values',
+    // advanced analytics - resample
+    resample_rule: '1D',
+    resample_method: 'zerofill',
+  };
   const sourceMockFormData: QueryFormData = {
     ...sharedControlsFormData,
     ...publicControlsFormData,
@@ -89,26 +120,45 @@ describe('should collect control values and create SFD', () => {
     });
   });
 
-  test('collect sharedControls', () => {
-    const sfd = new StandardizedFormData(sourceMockFormData);
+  test('should avoid to overlap', () => {
+    const sharedControlsSet = new Set(Object.keys(sharedControls));
+    const publicControlsSet = new Set(publicControls);
+    expect(
+      [...sharedControlsSet].filter((x: string) => publicControlsSet.has(x)),
+    ).toEqual([]);
+  });
 
-    expect(sfd.dumpSFD().standardizedState.metrics).toEqual(
-      sharedControls.metrics.map(controlName => controlName),
-    );
-    expect(sfd.dumpSFD().standardizedState.columns).toEqual(
-      sharedControls.columns.map(controlName => controlName),
+  test('should collect all sharedControls', () => {
+    expect(Object.entries(sharedControlsFormData).length).toBe(
+      Object.entries(sharedControls).length,
     );
+    const sfd = new StandardizedFormData(sourceMockFormData);
+    expect(sfd.serialize().standardizedState.metrics).toEqual([
+      'm1',
+      'm2',
+      'm3',
+    ]);
+    expect(sfd.serialize().standardizedState.columns).toEqual([
+      'c1',
+      'c2',
+      'c3',
+      'c4',
+    ]);
   });
 
-  test('should transform all publicControls', () => {
+  test('should transform all publicControls and sharedControls', () => {
+    expect(Object.entries(publicControlsFormData).length).toBe(
+      publicControls.length,
+    );
+
     const sfd = new StandardizedFormData(sourceMockFormData);
     const { formData } = sfd.transform('target_viz', sourceMockStore);
-    Object.entries(publicControlsFormData).forEach(([key]) => {
+    Object.entries(publicControlsFormData).forEach(([key, value]) => {
       expect(formData).toHaveProperty(key);
+      expect(value).toEqual(publicControlsFormData[key]);
     });
-    Object.entries(sharedControls).forEach(([key, value]) => {
-      expect(formData[key]).toEqual(value);
-    });
+    expect(formData.columns).toEqual(['c1', 'c2', 'c3', 'c4']);
+    expect(formData.metrics).toEqual(['m1', 'm2', 'm3']);
   });
 
   test('should inherit standardizedFormData and memorizedFormData is LIFO', () => {
@@ -156,6 +206,7 @@ describe('should transform form_data between table and bigNumberTotal', () => {
   const tableVizFormData = {
     datasource: '30__table',
     viz_type: 'table',
+    granularity_sqla: 'ds',
     time_grain_sqla: 'P1D',
     time_range: 'No filter',
     query_mode: 'aggregate',
@@ -171,7 +222,6 @@ describe('should transform form_data between table and bigNumberTotal', () => {
     table_timestamp_format: 'smart_date',
     show_cell_bars: true,
     color_pn: true,
-    applied_time_extras: {},
     url_params: {
       form_data_key:
         'p3No_sqDW7k-kMTzlBPAPd9vwp1IXTf6stbyzjlrPPa0ninvdYUUiMC6F1iKit3Y',
@@ -196,7 +246,9 @@ describe('should transform form_data between table and bigNumberTotal', () => {
           dataset_id: '30',
         },
       },
-      granularity_sqla: {},
+      granularity_sqla: {
+        value: 'ds',
+      },
       time_grain_sqla: {
         value: 'P1D',
       },
@@ -270,6 +322,22 @@ describe('should transform form_data between table and bigNumberTotal', () => {
     );
   });
 
+  test('get and has', () => {
+    // table -> bigNumberTotal
+    const sfd = new StandardizedFormData(tableVizFormData);
+    const { formData: bntFormData } = sfd.transform(
+      'big_number_total',
+      tableVizStore,
+    );
+
+    // bigNumberTotal -> table
+    const sfd2 = new StandardizedFormData(bntFormData);
+    expect(sfd2.has('big_number_total')).toBeTruthy();
+    expect(sfd2.has('table')).toBeTruthy();
+    expect(sfd2.get('big_number_total').viz_type).toBe('big_number_total');
+    expect(sfd2.get('table').viz_type).toBe('table');
+  });
+
   test('transform', () => {
     // table -> bigNumberTotal
     const sfd = new StandardizedFormData(tableVizFormData);
@@ -300,7 +368,7 @@ describe('should transform form_data between table and bigNumberTotal', () => {
     );
     expect(tblFormData.viz_type).toBe('table');
     expect(tblFormData.metrics).toEqual(['sum(sales)']);
-    expect(tblFormData.groupby).toEqual([]);
+    expect(tblFormData.groupby).toEqual(['name']);
     expect(tblFormData.time_range).toBe('2021 : 2022');
   });
 });