query params are applied when provided

Author: Dylan Huang

vite-app/src/GlobalState.tsx

@@ -11,7 +11,10 @@ import type {
 import flattenJson from "./util/flatten-json";
 import type { FlatJson } from "./util/flatten-json";
 import { createFilterFunction } from "./util/filter-utils";
-import { QueryParamsWatcher } from "./util/query-params";
+import {
+  QueryParamsWatcher,
+  queryParamsToPartialConfig,
+} from "./util/query-params";
 
 // Default pivot configuration
 const DEFAULT_PIVOT_CONFIG: PivotConfig = {
@@ -75,6 +78,9 @@ export class GlobalState {
     this.appliedFilterConfig = this.filterConfig.slice();
     makeAutoObservable(this);
     this.queryParamsWatcher = new QueryParamsWatcher(this);
+
+    // Apply query params from URL if they exist
+    this.applyQueryParamsFromUrl();
   }
 
   // Computed getters for individual configs
@@ -243,6 +249,49 @@ export class GlobalState {
     this.isConnected = connected;
   }
 
+  // Apply query params to global configuration
+  applyQueryParams(queryParams: Record<string, string>) {
+    debugger;
+    const partialConfig = queryParamsToPartialConfig(queryParams);
+
+    // Apply each section of the partial config
+    if (partialConfig.pivotConfig) {
+      this.updatePivotConfig(partialConfig.pivotConfig);
+    }
+
+    if (partialConfig.filterConfig) {
+      this.updateFilterConfig(partialConfig.filterConfig);
+    }
+
+    if (partialConfig.paginationConfig) {
+      this.updatePaginationConfig(partialConfig.paginationConfig);
+    }
+
+    if (partialConfig.sortConfig) {
+      this.updateSortConfig(partialConfig.sortConfig);
+    }
+  }
+
+  // Extract query params from URL and apply them to global configuration
+  private applyQueryParamsFromUrl() {
+    if (typeof window === "undefined") {
+      return; // Skip on server-side rendering
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryParams: Record<string, string> = {};
+
+    // Convert URLSearchParams to Record<string, string>
+    for (const [key, value] of urlParams.entries()) {
+      queryParams[key] = value;
+    }
+
+    // Only apply if there are query params
+    if (Object.keys(queryParams).length > 0) {
+      this.applyQueryParams(queryParams);
+    }
+  }
+
   upsertRows(dataset: EvaluationRow[]) {
     runInAction(() => {
       this.isLoading = true;

vite-app/src/util/query-params.ts

@@ -161,6 +161,57 @@ function calculateDifferentValues(
   return differences;
 }
 
+/**
+ * Converts serialized query params back into a partial GlobalConfig
+ * This is the inverse operation of nonDefaultValues()
+ *
+ * @param queryParams - Record where keys are JSON paths and values are JSON-serialized values
+ * @returns Partial<GlobalConfig> that can be applied to update GlobalConfig
+ */
+export function queryParamsToPartialConfig(
+  queryParams: Record<string, string>
+): Partial<GlobalConfig> {
+  const result: any = {};
+
+  for (const [path, serializedValue] of Object.entries(queryParams)) {
+    try {
+      const value = JSON.parse(serializedValue);
+      setNestedValue(result, path, value);
+    } catch (error) {
+      console.warn(
+        `Failed to parse query param value for path "${path}":`,
+        error
+      );
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Helper function to set a nested value in an object using dot notation path
+ * @param obj - The object to modify
+ * @param path - Dot notation path (e.g., "pivotConfig.selectedRowFields")
+ * @param value - The value to set
+ */
+function setNestedValue(obj: any, path: string, value: any): void {
+  const keys = path.split(".");
+  let current = obj;
+
+  // Navigate to the parent of the target key
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!(key in current)) {
+      current[key] = {};
+    }
+    current = current[key];
+  }
+
+  // Set the final value
+  const finalKey = keys[keys.length - 1];
+  current[finalKey] = value;
+}
+
 /**
  * Custom hook that integrates QueryParamsWatcher with React Router's useSearchParams
  * This hook should be used in components that need to sync global state with URL query params