chore: persist column sort criteria

Signed-off-by: Scott Dover <[email protected]>

Author: Scott Dover

client/src/panels/DataViewer.ts

@@ -2,14 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Uri, l10n, window } from "vscode";
 
-import { SortModelItem } from "ag-grid-community";
+import type { ColumnState, SortModelItem } from "ag-grid-community";
 
 import PaginatedResultSet from "../components/LibraryNavigator/PaginatedResultSet";
 import { TableData } from "../components/LibraryNavigator/types";
 import { Column } from "../connection/rest/api/compute";
 import { WebView } from "./WebviewManager";
 
+export type ViewProperties = { columnState?: ColumnState[] };
+
 class DataViewer extends WebView {
+  protected viewProperties: ViewProperties = {};
   public constructor(
     extensionUri: Uri,
     uid: string,
@@ -57,6 +60,7 @@ class DataViewer extends WebView {
         end?: number;
         sortModel?: SortModelItem[];
         columnName?: string;
+        viewProperties?: Partial<ViewProperties>;
       };
     },
   ): Promise<void> {
@@ -81,14 +85,25 @@ class DataViewer extends WebView {
         this.panel.webview.postMessage({
           key: event.key,
           command: "response:loadColumns",
-          data: await this.fetchColumns(),
+          data: {
+            columns: await this.fetchColumns(),
+            viewProperties: this.viewProperties,
+          },
         });
         break;
       case "request:loadColumnProperties":
         if (event.data.columnName) {
           this.loadColumnProperties(event.data.columnName);
         }
         break;
+      case "request:storeViewProperties":
+        if (event.data.viewProperties) {
+          this.viewProperties = {
+            ...this.viewProperties,
+            ...event.data.viewProperties,
+          };
+        }
+        break;
       default:
         break;
     }

client/src/webview/ColumnMenu.tsx

@@ -4,6 +4,7 @@ import { AgColumn, ColumnState, GridApi } from "ag-grid-community";
 
 import GridMenu from "./GridMenu";
 import localize from "./localize";
+import { storeViewProperties } from "./useDataViewer";
 
 export interface ColumnMenuProps {
   column: AgColumn;
@@ -21,6 +22,7 @@ export interface ColumnMenuProps {
 const applyColumnState = (api: GridApi, state: ColumnState[]) => {
   api.applyColumnState({ state, defaultState: { sort: null } });
   api.ensureIndexVisible(0);
+  storeViewProperties({ columnState: state });
 };
 
 export const getColumnMenu = (

client/src/webview/useDataViewer.ts

@@ -17,6 +17,7 @@ import { v4 } from "uuid";
 
 import { TableData } from "../components/LibraryNavigator/types";
 import { Column } from "../connection/rest/api/compute";
+import type { ViewProperties } from "../panels/DataViewer";
 import ColumnHeader from "./ColumnHeader";
 import { ColumnMenuProps, getColumnMenu } from "./ColumnMenu";
 
@@ -77,7 +78,10 @@ const queryTableData = (
 let fetchColumnsTimeoutId: ReturnType<typeof setTimeout> | null = null;
 const clearFetchColumnsTimeout = () =>
   fetchColumnsTimeoutId && clearTimeout(fetchColumnsTimeoutId);
-const fetchColumns = (): Promise<Column[]> => {
+const fetchColumns = (): Promise<{
+  columns: Column[];
+  viewProperties?: ViewProperties;
+}> => {
   const requestKey = v4();
   vscode.postMessage({ command: "request:loadColumns", key: requestKey });
 
@@ -104,10 +108,15 @@ const fetchColumns = (): Promise<Column[]> => {
   });
 };
 
+export const storeViewProperties = (viewProperties: ViewProperties) =>
+  vscode.postMessage({
+    command: "request:storeViewProperties",
+    data: { viewProperties },
+  });
+
 const useDataViewer = (theme: string) => {
   const [columns, setColumns] = useState<ColDef[]>([]);
   const [columnMenu, setColumnMenu] = useState<ColumnMenuProps | undefined>();
-
   const columnMenuRef = useRef<ColumnMenuProps | undefined>(columnMenu);
   useEffect(() => {
     columnMenuRef.current = columnMenu;
@@ -180,7 +189,11 @@ const useDataViewer = (theme: string) => {
       return;
     }
 
-    fetchColumns().then((columnsData) => {
+    fetchColumns().then(({ columns: columnsData, viewProperties }) => {
+      const getColumnState = (name: string) =>
+        viewProperties.columnState
+          ? viewProperties.columnState.find(({ colId }) => colId === name)
+          : {};
       const columns: ColDef[] = columnsData.map((column) => ({
         field: column.name,
         headerComponent: ColumnHeader,
@@ -190,6 +203,7 @@ const useDataViewer = (theme: string) => {
           displayMenuForColumn,
           theme,
         },
+        ...getColumnState(column.name),
         suppressHeaderKeyboardEvent: (
           params: SuppressHeaderKeyboardEventParams,
         ) => {
@@ -245,7 +259,12 @@ const useDataViewer = (theme: string) => {
 
   const dismissMenu = () => setColumnMenu(undefined);
 
-  return { columns, onGridReady, columnMenu, dismissMenu };
+  return {
+    columns,
+    onGridReady,
+    columnMenu,
+    dismissMenu,
+  };
 };
 
 export default useDataViewer;