Save ordering of columns with chart (#162)

* Save ordering of columns with chart * Fix broken tests * Remove debug statement
CybercentreCanada · Jul 5, 2022 · b73131e · b73131e
1 parent 7298815
commit b73131e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 2 deletions.
diff --git a/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx b/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx
@@ -71,13 +71,15 @@ export default function CccsGrid({
   rowData,
   formData,
   setDataMask,
+  setControlValue,
   selectedValues,
   tooltipShowDelay,
   rowSelection,
   emitFilter,
   include_search,
   page_length = 0,
   enable_grouping = false,
+  column_state,
   filters: initialFilters = {},
 }: CccsGridTransformedProps) {
   LicenseManager.setLicenseKey(agGridLicenseKey);
@@ -181,7 +183,12 @@ export default function CccsGrid({
   };
 
   const onGridReady = (params: any) => {
-    console.log('onGridReady called');
+    if (column_state) {
+      params.columnApi.applyColumnState({
+        state: column_state,
+        applyOrder: true,
+      });
+    }
   };
 
   const onSelectionChanged = (params: any) => {
@@ -303,6 +310,10 @@ export default function CccsGrid({
     keyRefresh.current += 1;
   }, [enable_grouping]);
 
+  const onColumnMoved = useCallback(e => {
+    setControlValue('column_state', e.columnApi.getColumnState());
+  }, []);
+
   const gridOptions = {
     suppressColumnVirtualisation: true,
     animateRows: true,
@@ -387,6 +398,7 @@ export default function CccsGrid({
           cacheQuickFilter={true}
           quickFilterText={searchValue}
           rowGroupPanelShow={enable_grouping ? 'always' : 'never'}
+          onColumnMoved={onColumnMoved}
         />
       </div>
     </div>

diff --git a/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/controlPanel.tsx b/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/controlPanel.tsx
@@ -431,6 +431,18 @@ const config: ControlPanelConfig = {
               }
             : null,
         ],
+        [
+          {
+            name: 'column_state',
+            config: {
+              type: 'HiddenControl',
+              hidden: true,
+              label: t('Column state'),
+              description: t('State of AG Grid columns'),
+              dontRefreshOnChange: true,
+            },
+          },
+        ],
       ],
     },
     // For CLDN-941: hiding away options that are not hooked up to the ag-grid, moving all to a block that

diff --git a/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/transformProps.ts b/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/plugin/transformProps.ts
@@ -80,11 +80,12 @@ export default function transformProps(chartProps: CccsGridChartProps) {
     query_mode,
     include_search,
     enable_grouping,
+    column_state,
   }: CccsGridQueryFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const data = queriesData[0].data as TimeseriesDataRecord[];
   const agGridLicenseKey = queriesData[0].agGridLicenseKey as String;
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, setControlValue } = hooks;
 
   const columns = datasource?.columns as Column[];
   const metrics = datasource?.metrics as Metric[];
@@ -273,6 +274,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
   return {
     formData,
     setDataMask,
+    setControlValue,
     width,
     height,
     columnDefs,
@@ -285,6 +287,7 @@ export default function transformProps(chartProps: CccsGridChartProps) {
     include_search,
     page_length,
     enable_grouping,
+    column_state,
     agGridLicenseKey,
   };
 }
diff --git a/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/types.ts b/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/types.ts
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ColumnState } from '@ag-grid-enterprise/all-modules';
 import {
   ChartDataResponseResult,
   ChartProps,
+  HandlerFunction,
   QueryFormData,
   SetDataMaskHook,
   supersetTheme,
@@ -33,6 +35,7 @@ export type CccsGridQueryFormData = QueryFormData & {
   include_search: boolean;
   page_length: number;
   enable_grouping: boolean;
+  column_state: ColumnState[];
 };
 
 export interface CccsGridStylesProps {
@@ -62,6 +65,7 @@ export class CccsGridChartProps extends ChartProps {
 export interface CccsGridTransformedProps extends CccsGridStylesProps {
   formData: CccsGridQueryFormData;
   setDataMask: SetDataMaskHook;
+  setControlValue: HandlerFunction;
   selectedValues: Record<number, string>;
   emitFilter: boolean;
   data: TimeseriesDataRecord[];
@@ -76,6 +80,7 @@ export interface CccsGridTransformedProps extends CccsGridStylesProps {
   include_search: boolean;
   page_length: number;
   enable_grouping: boolean;
+  column_state: ColumnState[];
   // add typing here for the props you pass in from transformProps.ts!
   agGridLicenseKey: string;
 }

diff --git a/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/test/plugin/buildQuery.test.ts b/superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/test/plugin/buildQuery.test.ts
@@ -11,6 +11,7 @@ describe('CccsGrid buildQuery', () => {
     page_length: 0,
     enable_grouping: false,
     viz_type: 'my_chart',
+    column_state: [],
   };
 
   it('should build groupby with series in form data', () => {

diff --git a/...t-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/test/plugin/transformProps.test.ts b/...t-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/test/plugin/transformProps.test.ts
@@ -16,6 +16,7 @@ describe('CccsGrid tranformProps', () => {
     page_length: 0,
     enable_grouping: false,
     viz_type: 'my_chart',
+    column_state: [],
   };
   const chartProps = new CccsGridChartProps({
     formData,