From e597adfd135ba7c8b18bc68aae52cd8ed6d41fa3 Mon Sep 17 00:00:00 2001
From: vkuchenik <vkuchenik@contractor.usgs.gov>
Date: Thu, 12 Nov 2026 10:23:44 -0800
Subject: [PATCH] fix: copy fn in zustand was directly altering state (anti
 pattern) and crashing the page

---
 .../pages/data_explorer/MyQueryBuilder.jsx    |   4 +-
 client/src/store/useDataFilterStore.jsx       | 193 +++++++++---------
 2 files changed, 95 insertions(+), 102 deletions(-)

diff --git a/client/src/pages/data_explorer/MyQueryBuilder.jsx b/client/src/pages/data_explorer/MyQueryBuilder.jsx
index db5f89c..c27d03c 100644
--- a/client/src/pages/data_explorer/MyQueryBuilder.jsx
+++ b/client/src/pages/data_explorer/MyQueryBuilder.jsx
@@ -149,7 +149,7 @@ function FilterGroup({ groupID, filters, columns }) {
 
       <Stack spacing="2">
         {filters?.map((filter) => (
-          <FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} setUrl={setUrl} copiedFilter={copiedFilter} />
+          <FilterRow key={filter.id} groupID={groupID} filterID={filter.id} filter={filter} columns={columns} />
         ))}
         <Button onClick={() => addFilter(groupID)} variant="outline" size="sm" color="text" borderColor="widgetBadgeBg" _hover={{ bg: "widgetBadgeBg" }}>
           Add Filter <Plus />
@@ -209,7 +209,7 @@ function FilterRow({ groupID, filterID, filter, columns }) {
       <HoverCard.Root positioning={{ placement: "top" }}>
         <HoverCard.Trigger asChild>
           <Button
-            onClick={() => pasteFilter(groupID)}
+            onClick={() => pasteFilter(groupID, filterID)}
             variant="ghost"
             size="sm"
             color="text"
diff --git a/client/src/store/useDataFilterStore.jsx b/client/src/store/useDataFilterStore.jsx
index 1400aa5..7a18091 100644
--- a/client/src/store/useDataFilterStore.jsx
+++ b/client/src/store/useDataFilterStore.jsx
@@ -17,130 +17,123 @@ const useDataFilterStore = create((set, get) => ({
       filterGroups: state.filterGroups.filter((group) => group.id !== groupID),
   })),
 
-  addFilter: (groupID) => set((state) => {
-    return {
-      filterGroups: state.filterGroups.map(filterGroup => {
-        return filterGroup.id === groupID ?
-          {
-            ...filterGroup,
-            filters: [
-              ...filterGroup.filters,
+  addFilter: (groupID) => set((state) => ({
+    filterGroups: state.filterGroups.map(filterGroup =>
+      filterGroup.id === groupID ?
+        {
+          ...filterGroup,
+          filters: [
+            ...filterGroup.filters,
+            {
+              id: crypto.randomUUID(),
+              col: null,
+              type: null,
+              op: null,
+              value: null
+            }
+          ]
+        }
+      : filterGroup
+    )
+  })),
+
+  updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+        {
+          ...group,
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
               {
-                id: crypto.randomUUID(),
-                col: null,
-                type: null,
-                op: null,
-                value: null
+                ...filter,
+                col: col,
+                type: type,
+                op: op,
+                value: value
               }
-            ]
-          }
-        : filterGroup
-      })
-    }
-  }),
+            : filter
+          )
+        }
+      : group
+    ),
+  })),
 
-  updateFilterColumn: (groupID, filterID, col, type, op, value) => set((state) => {
-    return {
-      filterGroups: state.filterGroups.map((group) => {
-        return groupID === group.id ?
-          {
-            ...group,
-            filters: group.filters.map(filter => {
-              return filterID === filter.id ?
-                {
-                  ...filter,
-                  col: col,
-                  type: type,
-                  op: op,
-                  value: value
-                }
-              : filter
-            })
-          }
+  updateFilterOps: (groupID, filterID, op) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+        {
+          ...group,
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
+              {
+                ...filter,
+                op: op,
+              }
+            : filter
+          )
+        }
         : group
-      }),
-    }
-  }),
+      ),
+  })),
 
-  updateFilterOps: (groupID, filterID, op) => set((state) => {
-    return {
-      filterGroups: state.filterGroups.map((group) => {
-        return groupID === group.id ?
-          {
-            ...group,
-            filters: group.filters.map(filter => {
-              return filterID === filter.id ?
-                {
-                  ...filter,
-                  op: op,
-                }
-              : filter
-            })
-          }
-        : group
-      }),
-    }
-  }),
-
-  updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => {
-    return {
-      filterGroups: state.filterGroups.map((group) => {
-        return groupID === group.id ?
-          {
-            ...group,
-            filters: group.filters.map(filter => {
-              return filterID === filter.id ?
-                {
-                  ...filter,
-                  value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
-                }
-              : filter
-            })
-          }
-        : group
-      }),
-    }
-  }),
+  updateFilterValue: (groupID, filterID, value, dateType = undefined) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
+      {
+        ...group,
+        filters: group.filters.map(filter =>
+          filterID === filter.id ?
+            {
+              ...filter,
+              value: (dateType === "s") ? {...filter.value, start: value} : (dateType === "e") ? {...filter.value, end: value } : value
+            }
+          : filter
+        )
+      }
+      : group
+    ),
+  })),
 
   removeFilter: (groupID, filterID) => set((state) => ({
-    filterGroups: state.filterGroups.map((group) => {
-      return group.id === groupID ?
+    filterGroups: state.filterGroups.map((group) =>
+      group.id === groupID ?
         {
           ...group,
           filters: group.filters.filter((f) => f.id !== filterID)
         }
       : group
-    }),
+    ),
   })),
 
-  copyFilter: (filter) => set((state) => ({
-    copiedFilter: state.copiedFilter = {
+  copyFilter: (filter) => set({
+    copiedFilter: {
       col: filter.col,
       type: filter.type,
       op: filter.op,
       value: filter.value
     }
-  })),
+  }),
 
-  pasteFilter: (groupID) => set((state) => {
-    state.filterGroups.map((group) => {
-      return groupID === group.id ?
+  pasteFilter: (groupID, filterID) => set((state) => ({
+    filterGroups: state.filterGroups.map((group) =>
+      groupID === group.id ?
         {
           ...group,
-          filters: [
-            ...group.filters,
-            {
-              id: crypto.randomUUID(),
-              col: state.copiedFilter.col,
-              type: state.copiedFilter.type,
-              op: state.copiedFilter.op,
-              value: state.copiedFilter.value,
-            }
-          ]
+          filters: group.filters.map(filter =>
+            filterID === filter.id ?
+              {
+                ...filter,
+                col: state.copiedFilter.col,
+                type: state.copiedFilter.type,
+                op: state.copiedFilter.op,
+                value: state.copiedFilter.value
+              }
+            : filter
+          )
         }
       : group
-    })
-  })
+  )})),
+
 
 }));