fix: view variables

Author: adityathebe

src/api/services/views.ts

@@ -64,16 +64,18 @@ export const getAllViews = (
     })
   );
 };
+
+/**
+ * Get the data for a view by its id.
+ */
 export const getViewDataById = async (
   viewId: string,
-  filters?: Record<string, string>,
+  variables?: Record<string, string>,
   headers?: Record<string, string>
 ): Promise<ViewResult> => {
-  const body: { variables?: Record<string, string> } = {};
-
-  if (filters && Object.keys(filters).length > 0) {
-    body.variables = filters;
-  }
+  const body: { variables?: Record<string, string> } = {
+    variables: variables
+  };
 
   const response = await fetch(`/api/view/${viewId}`, {
     method: "POST",

src/pages/audit-report/components/View/GlobalFilters.tsx

@@ -1,18 +1,15 @@
-import { useMemo, useState, useEffect, useCallback } from "react";
-import { useQueryClient } from "@tanstack/react-query";
+import { useMemo, useCallback } from "react";
 import {
-  ReactSelectDropdown,
-  StateOption
-} from "../../../../components/ReactSelectDropdown";
-import { ViewFilter } from "../../types";
+  GroupByOptions,
+  MultiSelectDropdown
+} from "../../../../ui/Dropdowns/MultiSelectDropdown";
+import { ViewVariable } from "../../types";
 import { formatDisplayLabel } from "./panels/utils";
 
 interface GlobalFiltersProps {
-  filters?: ViewFilter[];
-  viewId: string;
-  namespace?: string;
-  name?: string;
-  onFilterStateChange?: (filterState: Record<string, string>) => void;
+  filters?: ViewVariable[];
+  current?: Record<string, string>;
+  onChange?: (filterState: Record<string, string>) => void;
 }
 
 interface GlobalFilterDropdownProps {
@@ -31,92 +28,67 @@ const GlobalFilterDropdown: React.FC<GlobalFilterDropdownProps> = ({
   onChange
 }) => {
   const dropdownOptions = useMemo(() => {
-    return options.map(
+    const mappedOptions = options.map(
       (option) =>
         ({
-          id: option,
           value: option,
-          label: option,
-          description: option
-        }) satisfies StateOption
+          label: option
+        }) satisfies GroupByOptions
     );
+
+    return mappedOptions;
   }, [options]);
 
+  const selectedValue = useMemo(() => {
+    if (!value) {
+      return { value: "all", label: "All" };
+    }
+    return (
+      dropdownOptions.find((option) => option.value === value) || {
+        value: "all",
+        label: "All"
+      }
+    );
+  }, [value, dropdownOptions]);
+
   return (
-    <ReactSelectDropdown
+    <MultiSelectDropdown
       label={label}
-      name={paramsKey}
-      items={dropdownOptions}
-      value={value}
-      onChange={(selectedValue) => {
+      options={dropdownOptions}
+      value={selectedValue}
+      onChange={(selectedOption: unknown) => {
+        const option = selectedOption as GroupByOptions;
         onChange(
           paramsKey,
-          selectedValue && selectedValue !== "all" ? selectedValue : undefined
+          option && option.value !== "all" ? option.value : undefined
         );
       }}
-      placeholder="Select..."
-      dropDownClassNames="w-auto max-w-[400px]"
+      className="w-auto max-w-[400px]"
       isMulti={false}
+      closeMenuOnSelect={true}
+      isClearable={false}
     />
   );
 };
 
 const GlobalFilters: React.FC<GlobalFiltersProps> = ({
   filters,
-  viewId,
-  namespace,
-  name,
-  onFilterStateChange
+  current = {},
+  onChange
 }) => {
-  const queryClient = useQueryClient();
-
-  // Initialize filter state with defaults
-  const [filterState, setFilterState] = useState<Record<string, string>>({});
-  const [hasInitialized, setHasInitialized] = useState(false);
-
-  // Update filter state when filters prop changes (e.g., when view data loads)
-  // But only initialize once, don't reset user selections
-  useEffect(() => {
-    if (filters && filters.length > 0 && !hasInitialized) {
-      const initial: Record<string, string> = {};
-      filters.forEach((filter) => {
-        // Use default value if provided, otherwise use first option
-        const defaultValue =
-          filter.default ||
-          (filter.options.length > 0 ? filter.options[0] : "");
-        if (defaultValue) {
-          initial[filter.key] = defaultValue;
-        }
-      });
-
-      setFilterState(initial);
-      setHasInitialized(true);
-      console.log("Setting initial filter state:", initial);
-      onFilterStateChange?.(initial);
-    }
-  }, [filters, hasInitialized, onFilterStateChange]);
-
   const handleFilterChange = useCallback(
     (key: string, value?: string) => {
-      const newFilterState = { ...filterState };
+      const newFilterState = { ...current };
       if (value) {
         newFilterState[key] = value;
       } else {
         delete newFilterState[key];
       }
 
-      setFilterState(newFilterState);
-      console.log("Filter changed, new state:", newFilterState);
-      onFilterStateChange?.(newFilterState);
-
-      // Invalidate table queries to refresh table data
-      if (namespace && name) {
-        queryClient.invalidateQueries({
-          queryKey: ["view-table", namespace, name]
-        });
-      }
+      console.log("GlobalFilters: Filter changed, new state:", newFilterState);
+      onChange?.(newFilterState);
     },
-    [filterState, namespace, name, queryClient, onFilterStateChange]
+    [current, onChange]
   );
 
   const filterComponents = useMemo(() => {
@@ -128,11 +100,11 @@ const GlobalFilters: React.FC<GlobalFiltersProps> = ({
         label={filter.label || formatDisplayLabel(filter.key)}
         paramsKey={filter.key}
         options={filter.options}
-        value={filterState[filter.key]}
+        value={current[filter.key]}
         onChange={handleFilterChange}
       />
     ));
-  }, [filters, filterState, handleFilterChange]);
+  }, [filters, current, handleFilterChange]);
 
   if (!filters || filters.length === 0) {
     return null;

src/pages/audit-report/components/View/View.tsx

@@ -32,10 +32,9 @@ interface ViewProps {
   columns?: ViewColumnDef[];
   columnOptions?: Record<string, string[]>;
   variables?: ViewVariable[];
-  viewId?: string;
-  onGlobalFilterStateChange?: (filterState: Record<string, string>) => void;
+  onVariableStateChange?: (filterState: Record<string, string>) => void;
   viewResult?: ViewResult;
-  currentGlobalFilters?: Record<string, string>;
+  currentVariables?: Record<string, string>;
 }
 
 const View: React.FC<ViewProps> = ({
@@ -46,10 +45,9 @@ const View: React.FC<ViewProps> = ({
   columnOptions,
   panels,
   variables,
-  viewId,
-  onGlobalFilterStateChange,
+  onVariableStateChange,
   viewResult,
-  currentGlobalFilters
+  currentVariables
 }) => {
   const { pageSize } = useReactTablePaginationState();
   const [searchParams] = useSearchParams();
@@ -134,10 +132,8 @@ const View: React.FC<ViewProps> = ({
 
       <GlobalFilters
         filters={variables}
-        viewId={viewId || ""}
-        namespace={namespace}
-        name={name}
-        onFilterStateChange={onGlobalFilterStateChange}
+        current={currentVariables}
+        onChange={onVariableStateChange}
       />
 
       {variables && variables.length > 0 && (

src/pages/views/components/SingleView.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getViewDataById } from "../../../api/services/views";
+import { ViewVariable } from "../../audit-report/types";
 import View from "../../audit-report/components/View/View";
 import { Head } from "../../../ui/Head";
 import { Icon } from "../../../ui/Icons/Icon";
@@ -14,26 +15,27 @@ interface SingleViewProps {
 
 const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   const [error, setError] = useState<string>();
-  const [currentGlobalFilters, setCurrentGlobalFilters] = useState<
+  const [currentViewVariables, setCurrentViewVariables] = useState<
     Record<string, string>
   >({});
+  const [hasFiltersInitialized, setHasFiltersInitialized] = useState(false);
   const queryClient = useQueryClient();
 
   // Fetch all the view metadata, panel results and the column definitions
   // NOTE: This doesn't fetch the table rows.
-  // Use currentGlobalFilters in the query key so it updates when filters change
   const {
     data: viewResult,
     isLoading,
+    isFetching,
     error: viewDataError
   } = useQuery({
-    queryKey: ["view-result", id, currentGlobalFilters],
+    queryKey: ["view-result", id, currentViewVariables],
     queryFn: () => {
-      console.log("useQuery running with filters:", currentGlobalFilters);
-      return getViewDataById(id, currentGlobalFilters);
+      return getViewDataById(id, currentViewVariables);
     },
     enabled: !!id,
-    staleTime: 5 * 60 * 1000
+    staleTime: 5 * 60 * 1000,
+    placeholderData: (previousData: any) => previousData
   });
 
   useEffect(() => {
@@ -48,7 +50,36 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
     setError(undefined);
   }, [viewDataError]);
 
-  if (isLoading) {
+  // Initialize filters when view data loads, but preserve user selections
+  useEffect(() => {
+    if (viewResult?.variables && viewResult.variables.length > 0) {
+      if (!hasFiltersInitialized) {
+        // First time - initialize with defaults
+        const initial: Record<string, string> = {};
+        viewResult.variables.forEach((filter: ViewVariable) => {
+          const defaultValue =
+            filter.default ||
+            (filter.options.length > 0 ? filter.options[0] : "");
+          if (defaultValue) {
+            initial[filter.key] = defaultValue;
+          }
+        });
+        setCurrentViewVariables(initial);
+        setHasFiltersInitialized(true);
+      }
+    }
+  }, [viewResult?.variables, hasFiltersInitialized]);
+
+  // Handle global filter changes with useCallback to stabilize reference
+  const handleGlobalFilterChange = useCallback(
+    (newFilters: Record<string, string>) => {
+      setCurrentViewVariables(newFilters);
+    },
+    []
+  );
+
+  // Only show full loading screen for initial load, not for filter refetches
+  if (isLoading && !viewResult) {
     return (
       <div className="flex min-h-screen items-center justify-center">
         <div className="text-center">
@@ -60,8 +91,9 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
   }
 
   if (!viewResult) {
-    // FIXME: No view result does not mean the view is not found.
-    // we need to display the error in here.
+    // TODO: Better error handling.
+    // viewResult = undefined does not mean the view is not found.
+    // There could be errors other than 404.
     return (
       <div className="flex min-h-screen items-center justify-center">
         <div className="text-center">
@@ -89,11 +121,11 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
 
   const handleForceRefresh = async () => {
     if (namespace && name) {
-      const freshData = await getViewDataById(id, currentGlobalFilters, {
+      const freshData = await getViewDataById(id, currentViewVariables, {
         "cache-control": "max-age=1"
       });
       queryClient.setQueryData(
-        ["view-result", id, currentGlobalFilters],
+        ["view-result", id, currentViewVariables],
         freshData
       );
       // Invalidate the table query that will be handled by the View component
@@ -119,7 +151,7 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
         }
         onRefresh={handleForceRefresh}
         contentClass="p-0 h-full"
-        loading={isLoading}
+        loading={isFetching}
         extra={
           viewResult?.lastRefreshedAt && (
             <p className="text-sm text-gray-500">
@@ -138,10 +170,9 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
             columnOptions={viewResult?.columnOptions}
             panels={viewResult?.panels}
             variables={viewResult?.variables}
-            viewId={id}
-            onGlobalFilterStateChange={setCurrentGlobalFilters}
+            onVariableStateChange={handleGlobalFilterChange}
             viewResult={viewResult}
-            currentGlobalFilters={currentGlobalFilters}
+            currentVariables={currentViewVariables}
           />
         </div>
       </SearchLayout>