From 84c0db72a3fc5eff6038f96e6d178fb963616bfe Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Tue, 28 Apr 2026 11:41:06 -0700
Subject: [PATCH 1/5] #VFB-242 - Create navigation bottoms constants, and
 update reference and checks to use these constants too. Fixes bug introduced
 by shifting navigation buttons once.

---
 .../frontend/src/components/Layout.jsx        | 31 ++++++++++---------
 .../vfbtoolbarMenuConfiguration.jsx           |  9 +++---
 .../frontend/src/shared/bottomNav/index.jsx   |  9 +++---
 .../frontend/src/shared/header/index.jsx      |  9 +++---
 .../src/shared/subHeader/SearchBuilder.jsx    |  3 +-
 .../frontend/src/shared/subHeader/index.jsx   |  5 +--
 .../frontend/src/utils/constants.js           |  8 +++++
 7 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/components/Layout.jsx b/applications/virtual-fly-brain/frontend/src/components/Layout.jsx
index 5785d70d..bbce5db1 100644
--- a/applications/virtual-fly-brain/frontend/src/components/Layout.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/Layout.jsx
@@ -18,6 +18,7 @@ import { removeAllInstances } from './../reducers/actions/instances';
 import { Box, Button,Modal, useMediaQuery, useTheme, Typography, CircularProgress, Link } from "@mui/material";
 import { activateCircuits, activateImages } from "../reducers/actions/layout";
 import { widgetsIDs } from "./layout/widgets";
+import { bottomNavClearAll, bottomNavDownload, bottomNavLayers, bottomNavQuery, bottomNavSearch, bottomNavSnapshot, bottomNavUpload } from "../utils/constants";
 
 const {
   secondaryBg,
@@ -80,14 +81,14 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
   const queryComponentOpened = useSelector( state => state.globalInfo?.queryComponentOpened );
 
   useEffect( () => {
-    if ( queryComponentOpened && bottomNav !== 2 ){
-      setBottomNav(2)
+    if ( queryComponentOpened && bottomNav !== bottomNavQuery ){
+      setBottomNav(bottomNavQuery)
     }
   }, [bottomNav, queryComponentOpened, setBottomNav]);
 
   // Handle Clear All functionality
   useEffect(() => {
-    if (bottomNav === 4) {
+    if (bottomNav === bottomNavClearAll) {
       if (allLoadedInstances?.length > 1) {
         removeAllInstances();
       }
@@ -97,7 +98,7 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
   }, [bottomNav, allLoadedInstances?.length, setBottomNav]);
 
   useEffect( () => {
-    if ( bottomNav === 3 ){
+    if ( bottomNav === bottomNavLayers ){
       const layoutManager = getLayoutManagerInstance();
       if (!layoutManager.model.getNodeById("listViewerWidget").isVisible()) {
         const newWidget = { ...widgets[widgetsIDs.listViewerWidgetID] }
@@ -252,22 +253,22 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
         {desktopScreen ? (
           <>
             {tabContent}
-            {bottomNav === 0 && < VFBSnapshot open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 1 && < VFBUploader open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 2 && <VFBDownloadContents open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 3 && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={0}/>}
-            {bottomNav === 6 && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={1}/>}
+            {bottomNav === bottomNavSnapshot && < VFBSnapshot open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavUpload && < VFBUploader open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavDownload && <VFBDownloadContents open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavQuery && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={0}/>}
+            {bottomNav === bottomNavSearch && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={1}/>}
           </>
         ) : (
           <>
             {
-              bottomNav != 3 && tabContent
+              bottomNav != bottomNavQuery && tabContent
             }
-            {bottomNav === 0 && <VFBSnapshot open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 1 && <VFBUploader open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 2 && <VFBDownloadContents open={true} setBottomNav={setBottomNav} />}
-            {bottomNav === 3 && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={0}/>}
-            {bottomNav === 6 && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={1}/>}
+            {bottomNav === bottomNavSnapshot && <VFBSnapshot open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavUpload && <VFBUploader open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavDownload && <VFBDownloadContents open={true} setBottomNav={setBottomNav} />}
+            {bottomNav === bottomNavQuery && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={0}/>}
+            {bottomNav === bottomNavSearch && <QueryBuilder setBottomNav={setBottomNav} fullWidth={sidebarOpen} tabSelected={1}/>}
           </>
         )}
       </Box>
diff --git a/applications/virtual-fly-brain/frontend/src/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.jsx b/applications/virtual-fly-brain/frontend/src/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.jsx
index df02622b..fcca0bf8 100644
--- a/applications/virtual-fly-brain/frontend/src/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import vars from "../../../theme/variables";
 import { widgets } from "../../layout/widgets";
+import { bottomNavDownload, bottomNavQuery, bottomNavSearch, bottomNavUpload } from '../../../utils/constants';
 const { primaryFont, whiteColor, tabActiveColor, primaryBg } = vars;
 
 const ACTIONS = {
@@ -199,7 +200,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-search",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [5]
+            parameters: [bottomNavSearch]
           }
         },
         {
@@ -207,7 +208,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-clipboard-question",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [2]
+            parameters: [bottomNavQuery]
           }
         },
         {
@@ -279,7 +280,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-download",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [1]
+            parameters: [bottomNavDownload]
           }
         },
         {
@@ -287,7 +288,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-upload",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [0]
+            parameters: [bottomNavUpload]
           }
         },
         {
diff --git a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
index 1af07e26..f6f97aa0 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
@@ -3,6 +3,7 @@ import { Box, Button } from "@mui/material";
 import React from "react";
 import { ClearAll, Download, Query, Upload, Layers } from "../../icons";
 import vars from "../../theme/variables";
+import { bottomNavClearAll, bottomNavDownload, bottomNavQuery, bottomNavSnapshot } from "../../utils/constants";
 
 const {
   whiteColor,
@@ -12,22 +13,22 @@ const {
 
 const navArr = [
   {
-    id: 0,
+    id: bottomNavSnapshot,
     icon: Upload,
     name: 'Upload'
   },
   {
-    id: 1,
+    id: bottomNavDownload,
     icon: Download,
     name: 'Download'
   },
   {
-    id: 2,
+    id: bottomNavQuery,
     icon: Query,
     name: 'Query'
   },
   {
-    id: 3,
+    id: bottomNavClearAll,
     icon: ClearAll,
     name: 'Clear all'
   },
diff --git a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
index 3fb8271a..8eb9f1ca 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
@@ -17,6 +17,7 @@ import layout2 from "../../components/layout/layout2";
 import layout3 from "../../components/layout/layout3";
 import { WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
+import { bottomNavQuery } from "../../utils/constants";
 
 const { primaryBg, headerBoxShadow } = vars;
 
@@ -68,7 +69,7 @@ const Header = ({ setBottomNav }) => {
       }
 
       // Open the query component panel
-      setBottomNav(2);
+      setBottomNav(bottomNavQuery);
     }
   }
 
@@ -143,10 +144,10 @@ const Header = ({ setBottomNav }) => {
         if (matchQuery?.queries?.[action?.parameters[1]]) {
           matchQuery.queries[action.parameters[1]].active = true;
           updateQueries(updatedQueries);
-          setBottomNav(2)
+          setBottomNav(bottomNavQuery)
         } else {
           getQueries(action.parameters[0], action.parameters[1])
-          setBottomNav(2)
+          setBottomNav(bottomNavQuery)
         }
         break;
       }
@@ -310,7 +311,7 @@ const Header = ({ setBottomNav }) => {
       <MediaQuery minWidth={1200}>
         {focusedInstance?.metadata?.Id && (focusedInstance?.metadata?.Queries?.length > 0 || queries?.find(q => q.short_form === focusedInstance.metadata.Id)) && (
           <Button
-            onClick={() => setBottomNav((prev) => prev === 2 ? null : 2)}
+            onClick={() => setBottomNav((prev) => prev === bottomNavQuery ? null : bottomNavQuery)}
             variant="outlined"
           >
             <QueryStats size={16} />
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
index 476e83cc..e680ac51 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
@@ -20,6 +20,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { getQueries, deleteQuery, updateQueries } from '../../reducers/actions/queries';
 import { getUpdatedTags } from '../../utils/utils';
 import { debounce } from '@mui/material';
+import { bottomNavQuery } from '../../utils/constants';
 
 const QUERIES = "Queries";
 const SEARCH_DEBOUNCE = 500;
@@ -165,7 +166,7 @@ export default function SearchBuilder(props) {
 
   const checkResults = () => {
     // getQueriesStarted();
-    props.setBottomNav(2)
+    props.setBottomNav(bottomNavQuery)
     setIsOpen(false)
     props.setFocused(false);
     let updatedQueries = [];
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
index 6780c02a..beb147ec 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
@@ -22,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux";
 import SearchBuilder from "./SearchBuilder";
 import { FilterMenu } from "./FilterMenu";
 import { resetLoadingState } from "../../reducers/actions/instances";
+import { bottomNavClearAll } from "../../utils/constants";
 
 const navArr = [
   {
@@ -270,8 +271,8 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
               onClick={(event) => {
                 event.stopPropagation();
                 // Clear All button (index 4) should not toggle
-                if (index === 4) {
-                  setBottomNav(4);
+                if (index === bottomNavClearAll) {
+                  setBottomNav(bottomNavClearAll);
                 } else {
                   setBottomNav(bottomNav === index ? undefined : index);
                 }
diff --git a/applications/virtual-fly-brain/frontend/src/utils/constants.js b/applications/virtual-fly-brain/frontend/src/utils/constants.js
index ff4aad02..292054ed 100644
--- a/applications/virtual-fly-brain/frontend/src/utils/constants.js
+++ b/applications/virtual-fly-brain/frontend/src/utils/constants.js
@@ -92,3 +92,11 @@ export const RGBAToHexA = (color) => {
 export const BOTTOM = "bottom";
 export const LEFT = "left";
 export const RIGHT = "right";
+
+export const bottomNavSnapshot = 0;
+export const bottomNavUpload = 1;
+export const bottomNavDownload = 2;
+export const bottomNavQuery = 3;
+export const bottomNavLayers = 4;
+export const bottomNavClearAll = 5;
+export const bottomNavSearch = 6;

From 3fd0838cea1bc70fe66555ca1b59f407b417a1e8 Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Tue, 28 Apr 2026 20:13:30 -0700
Subject: [PATCH 2/5] #VFB-242 - Fix bug with loading queries from toolbar

---
 .../src/components/queryBuilder/Query.jsx     | 56 ++++++++++++++-----
 .../frontend/src/shared/header/index.jsx      |  6 +-
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx b/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
index 46959eb8..fe1f7d23 100644
--- a/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
@@ -26,15 +26,15 @@ const getQueries = (newQueries, searchTerm) => {
   if (!newQueries || newQueries.length === 0) return [];
   
   let updatedQueries = [];
-  const term = searchTerm ? searchTerm.toLowerCase() : undefined;
+  const term = searchTerm ? searchTerm.toLowerCase() : "";
   
   newQueries.forEach((query) => {
     if (query.queries) {
       Object.keys(query.queries).forEach((key) => {
         if (query.queries[key]?.active) {
-          let rows = query.queries[key]?.rows || [];
+          let rows = query.queries[key]?.rows || query.queries[key]?.preview_results?.rows || [];
           
-          if (term) {
+          if (term != undefined) {
             rows = rows.filter(row => {
               // Cache the string conversion for performance
               const values = Object.values(row);
@@ -95,20 +95,41 @@ const Query = forwardRef(({ fullWidth, queries, searchTerm }, ref) => {
   const [sortDirection, setSortDirection] = useState(1); // 1 for ascending, -1 for descending
   
   // Memoize filtered searches
-  const filteredSearches = useMemo(() => getQueries(queries, searchTerm), [queries, searchTerm]);
+  const filteredSearches = useMemo(() => {
+    return getQueries(queries, searchTerm);
+  }, [queries, searchTerm]);
+
+  const getRows = (item) => {
+    if (item?.rows?.length > 0) {
+      return item.rows;
+    }
+  
+    if (item?.preview_results?.rows?.length > 0) {
+      return item.preview_results.rows;
+    }
+  
+    return null;
+  };
   
   // Memoize the final filtered results based on both search term and active chip tags
   const finalFilteredResults = useMemo(() => {
     if (!filteredSearches || filteredSearches.length === 0) return [];
     
-    const activeChipLabels = chipTags.filter(f => f.active).map(tag => tag.label);
+    const rows = filteredSearches.flatMap(item => {
+      const nestedRows = getRows(item);
+      return nestedRows || [item];
+    });
     
-    // Filter by active chip tags
+    const activeChipLabels = chipTags
+      .filter(f => f.active)
+      .map(tag => tag.label);
+
     let filtered;
+
     if (activeChipLabels.length === 0) {
-      filtered = filteredSearches;
+      filtered = rows;
     } else {
-      filtered = filteredSearches.filter(row => {
+      filtered = rows.filter(row => {
         const tags = getTags(row.tags);
         return activeChipLabels.some(label => tags.includes(label));
       });
@@ -146,13 +167,22 @@ const Query = forwardRef(({ fullWidth, queries, searchTerm }, ref) => {
     if (!queries || queries.length === 0) return [];
     
     const tagMap = new Map();
+  
     queries.forEach(query => {
       if (query.queries) {
         Object.keys(query.queries).forEach(q => {
-          if (query.queries[q]?.active) {
-            query.queries[q]?.rows?.forEach(row => {
+          const currentQuery = query.queries[q];
+  
+          if (currentQuery?.active) {
+            const rows =
+              currentQuery?.rows?.length > 0
+                ? currentQuery.rows
+                : currentQuery?.preview_results?.rows || [];
+  
+            rows.forEach(row => {
               if (row.tags) {
                 const rowTags = getTags(row.tags);
+  
                 rowTags.forEach(rowTag => {
                   if (!tagMap.has(rowTag)) {
                     tagMap.set(rowTag, { label: rowTag, active: true });
@@ -249,8 +279,8 @@ const Query = forwardRef(({ fullWidth, queries, searchTerm }, ref) => {
         return acc;
       }, {})
     }));
-    updateQueries(clearQueries);
-  }, [queries]);
+    dispatch(updateQueries(clearQueries));
+  }, [queries, dispatch]);
 
   const clearAllTags = useCallback(() => {
     setChipTags(prevTags => prevTags.map(tag => ({ ...tag, active: true })));
@@ -343,7 +373,7 @@ const Query = forwardRef(({ fullWidth, queries, searchTerm }, ref) => {
                 onClick={() => null}
                 disabled={!tag.active}
                 onDelete={() => handleChipDelete(tag.label)}
-                key={tag}
+                key={tag?.label}
                 deleteIcon={
                   <Cross
                     size={12}
diff --git a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
index 8eb9f1ca..574fa341 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
@@ -141,12 +141,12 @@ const Header = ({ setBottomNav }) => {
             Object.keys(query.queries)?.forEach(q => query.queries[q].active = false);
           }
         });
-        if (matchQuery?.queries?.[action?.parameters[1]]) {
-          matchQuery.queries[action.parameters[1]].active = true;
+        if (matchQuery?.short_form == action?.parameters[0]) {
+          Object.keys(matchQuery.queries)?.forEach(q => matchQuery.queries[q].active = true);
           updateQueries(updatedQueries);
           setBottomNav(bottomNavQuery)
         } else {
-          getQueries(action.parameters[0], action.parameters[1])
+          getQueries(action.parameters[0])
           setBottomNav(bottomNavQuery)
         }
         break;

From ee2f13e21190c962ec1d11d1a22f26e869bbecd8 Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Wed, 29 Apr 2026 08:56:13 -0700
Subject: [PATCH 3/5] #VFB-242 - feat: enhance query selection handling in
 QueriesSelectionDropdown component

---
 .../QueriesSelectionDropdown.jsx              | 24 ++++++++++++++-----
 .../src/shared/subHeader/SearchBuilder.jsx    |  4 ++--
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
index 3499c485..9cf24843 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
@@ -21,17 +21,26 @@ export const QueriesSelectionDropdown = ({option, selectedOption, goBackToInitia
     setPopoverAnchorEl(null);
   }
 
-  const handleSelect = (option, query) => {
+  const handleSelect = (option, query, selection) => {
     let count = 0;
     if ( !selectedOption[query.short_form]) {
         count = option.count;
     }
 
     let updatedQueries = [...queries];
-    let matchQuery = updatedQueries?.find( q => q.short_form === query.short_form );
-    if (  matchQuery.queries?.[option.query] ){
-      matchQuery.active = true
-      matchQuery.queries[option.query].active = true;
+    let matchQuery = updatedQueries?.find(q => q.short_form === query.short_form);
+
+    if (matchQuery?.queries) {
+      matchQuery.active = true;
+
+      // Loop through matchQuery.queries keys
+      Object.keys(matchQuery.queries).forEach(key => {
+        if (matchQuery.queries[key]?.label === selection) {
+          matchQuery.queries[key].active = true;
+        } else if (matchQuery.queries[key]?.active) {
+          matchQuery.queries[key].active = false;
+        }
+      });
     }
     updateQueries(updatedQueries);
     Object.keys(selectedOption)?.forEach( o => {
@@ -162,7 +171,10 @@ export const QueriesSelectionDropdown = ({option, selectedOption, goBackToInitia
                     </ListItem>
                   }
                   { Object.keys(option.queries)?.length && Object.keys(option.queries)?.map((query, index) => (<ListItem key={query.short_form+index}>
-                    <ListItemButton onClick={() => handleSelect(option.queries[query], option)}>
+                    <ListItemButton onClick={(event) => {
+                      const selectedName = event.target.innerText;
+                      handleSelect(option.queries[query], option, selectedName);
+                    }}>
                       <ListItemText primary={option.queries[query].label} />
                     </ListItemButton>
                   </ListItem>) )}
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
index e680ac51..a9882066 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
@@ -175,9 +175,9 @@ export default function SearchBuilder(props) {
       let match = value?.find( v => v.short_form === q.short_form );
       if ( match !== undefined ) {
         Object.keys(q.queries)?.forEach( key => {
-          q.queries[key].active = true;
+          //q.queries[key].active = true;
           if ( q.queries[key].rows === undefined ) {
-            getQueries(q.short_form, key)
+            // getQueries(q.short_form, key)
           }
         })
       } else {

From b2bba74defab172dc314c5a62cf821dac5a69fb9 Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Wed, 29 Apr 2026 10:28:33 -0700
Subject: [PATCH 4/5] #VFB-242 - feat: streamline query updates and improve
 bottom navigation handling

---
 .../frontend/src/components/queryBuilder/Query.jsx       | 4 ++--
 .../frontend/src/shared/bottomNav/index.jsx              | 2 +-
 .../frontend/src/shared/header/index.jsx                 | 2 +-
 .../QueriesSelection/QueriesSelectionDropdown.jsx        | 5 ++---
 .../frontend/src/shared/subHeader/SearchBuilder.jsx      | 9 +--------
 .../frontend/src/shared/subHeader/index.jsx              | 4 ++--
 6 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx b/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
index fe1f7d23..3ac4c6c9 100644
--- a/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/queryBuilder/Query.jsx
@@ -279,8 +279,8 @@ const Query = forwardRef(({ fullWidth, queries, searchTerm }, ref) => {
         return acc;
       }, {})
     }));
-    dispatch(updateQueries(clearQueries));
-  }, [queries, dispatch]);
+    updateQueries(clearQueries);
+  }, [queries]);
 
   const clearAllTags = useCallback(() => {
     setChipTags(prevTags => prevTags.map(tag => ({ ...tag, active: true })));
diff --git a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
index f6f97aa0..11cca64d 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
@@ -84,7 +84,7 @@ const BottomNav = ({ setBottomNav, bottomNav }) => {
             flexDirection: 'column',
           }}
 
-          onClick={() => setBottomNav(index)}
+          onClick={() => setBottomNav(item?.id)}
           key={item.id}
         >
           <item.icon color={item?.id === bottomNav ? tabActiveColor : 'white'} />
diff --git a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
index 574fa341..62b33ae9 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/header/index.jsx
@@ -146,7 +146,7 @@ const Header = ({ setBottomNav }) => {
           updateQueries(updatedQueries);
           setBottomNav(bottomNavQuery)
         } else {
-          getQueries(action.parameters[0])
+          getQueries(action.parameters[0], action.parameters[1])
           setBottomNav(bottomNavQuery)
         }
         break;
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
index 9cf24843..e76357a9 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/QueriesSelection/QueriesSelectionDropdown.jsx
@@ -171,9 +171,8 @@ export const QueriesSelectionDropdown = ({option, selectedOption, goBackToInitia
                     </ListItem>
                   }
                   { Object.keys(option.queries)?.length && Object.keys(option.queries)?.map((query, index) => (<ListItem key={query.short_form+index}>
-                    <ListItemButton onClick={(event) => {
-                      const selectedName = event.target.innerText;
-                      handleSelect(option.queries[query], option, selectedName);
+                    <ListItemButton onClick={() => {
+                      handleSelect(option.queries[query], option, option.queries[query].label);
                     }}>
                       <ListItemText primary={option.queries[query].label} />
                     </ListItemButton>
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
index a9882066..2e666918 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/SearchBuilder.jsx
@@ -173,14 +173,7 @@ export default function SearchBuilder(props) {
     queries.length > 0 ? updatedQueries = [...queries] : []
     updatedQueries.forEach( q => {
       let match = value?.find( v => v.short_form === q.short_form );
-      if ( match !== undefined ) {
-        Object.keys(q.queries)?.forEach( key => {
-          //q.queries[key].active = true;
-          if ( q.queries[key].rows === undefined ) {
-            // getQueries(q.short_form, key)
-          }
-        })
-      } else {
+      if ( match === undefined ) {
         Object.keys(q.queries)?.forEach( key => {
           q.queries[key].active = false
         })
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
index beb147ec..573dce2c 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
@@ -271,10 +271,10 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
               onClick={(event) => {
                 event.stopPropagation();
                 // Clear All button (index 4) should not toggle
-                if (index === bottomNavClearAll) {
+                if (item.id === bottomNavClearAll) {
                   setBottomNav(bottomNavClearAll);
                 } else {
-                  setBottomNav(bottomNav === index ? undefined : index);
+                  setBottomNav(bottomNav === item?.id ? undefined : item?.id);
                 }
               }}
               sx={{

From 689183bbf9bb6e270043cdf8f3afc2252bc07dfd Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Wed, 29 Apr 2026 10:30:49 -0700
Subject: [PATCH 5/5] #VFB-242 - Lint fix , remove unusued var

---
 .../virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx   | 2 +-
 .../virtual-fly-brain/frontend/src/shared/subHeader/index.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
index 11cca64d..e3478d85 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/bottomNav/index.jsx
@@ -73,7 +73,7 @@ const BottomNav = ({ setBottomNav, bottomNav }) => {
       flexWrap='wrap'
       sx={classes.root}
     >
-      {navArr.map((item, index) => (
+      {navArr.map((item) => (
         <Button
           sx={{
             height: '100%',
diff --git a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
index 573dce2c..faf85fe4 100644
--- a/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
+++ b/applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx
@@ -265,7 +265,7 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
 
       <MediaQuery minWidth={1200}>
         <Box display="flex" flexWrap="wrap" sx={classes.nav}>
-          {navArr.map((item, index) => (
+          {navArr.map((item) => (
             <Button
               aria-label={item.name}
               onClick={(event) => {