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/NeuroglassViewer.jsx b/applications/virtual-fly-brain/frontend/src/components/NeuroglassViewer.jsx
index b2ce5c05..6283c49b 100644
--- a/applications/virtual-fly-brain/frontend/src/components/NeuroglassViewer.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/NeuroglassViewer.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Box, Typography, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
@@ -8,6 +8,7 @@ const NEUROGLASS_URL = import.meta.env.NEUROGLASS_URL ?? '';
 
 export default function NeuroglassViewer() {
   const [debouncedSrc, setDebouncedSrc] = useState('');
+  const [iframeSrc, setIframeSrc] = useState('');
 
   const allLoadedInstances = useSelector(state => state.instances?.allLoadedInstances);
   const focusedInstance    = useSelector(state => state.instances?.focusedInstance);
@@ -16,16 +17,43 @@ export default function NeuroglassViewer() {
   const theme    = useTheme();
   const isMobile = !useMediaQuery(theme.breakpoints.up('lg'));
 
-  // Rebuilds whenever instances, focused item, layout preference, or viewport size changes.
-  const iframeSrc = useMemo(() => {
-    const layout = resolveNeuroglassLayout(neuroglassView, isMobile);
-    const state  = buildNeuroglassState(
-      allLoadedInstances,
-      focusedInstance?.metadata?.Id,
-      layout,
-    );
-    if (!state || !NEUROGLASS_URL) return '';
-    return `${NEUROGLASS_URL}/embed#!${encodeURIComponent(JSON.stringify(state))}`;
+  useEffect(() => {
+    let cancelled = false;
+    const abortController = new AbortController();
+    async function buildSrc() {
+      const layout = resolveNeuroglassLayout(neuroglassView, isMobile);
+      try{
+        const state = await buildNeuroglassState(
+          allLoadedInstances,
+          focusedInstance?.metadata?.Id,
+          layout,
+          abortController.signal
+        );
+
+        if (cancelled || abortController.signal.aborted) return;
+
+        if (!state || !NEUROGLASS_URL) {
+          setIframeSrc('');
+          return;
+        }
+
+        setIframeSrc(
+          `${NEUROGLASS_URL}/embed#!${encodeURIComponent(JSON.stringify(state))}`
+        );
+      } catch (error) {
+        if (error?.name === 'AbortError' || abortController.signal.aborted) {
+          return;
+        }
+        throw error;
+      }
+    }
+
+    buildSrc();
+
+    return () => {
+      cancelled = true;
+      abortController.abort();
+    };
   }, [allLoadedInstances, focusedInstance?.metadata?.Id, neuroglassView, isMobile]);
 
   useEffect(() => {
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/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/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..574fa341 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);
     }
   }
 
@@ -140,13 +141,13 @@ 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(2)
+          setBottomNav(bottomNavQuery)
         } else {
-          getQueries(action.parameters[0], action.parameters[1])
-          setBottomNav(2)
+          getQueries(action.parameters[0])
+          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/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 476e83cc..a9882066 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 = [];
@@ -174,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 {
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;
diff --git a/applications/virtual-fly-brain/frontend/src/utils/neuroglassStateConfig.js b/applications/virtual-fly-brain/frontend/src/utils/neuroglassStateConfig.js
index b1a670ea..3d87e838 100644
--- a/applications/virtual-fly-brain/frontend/src/utils/neuroglassStateConfig.js
+++ b/applications/virtual-fly-brain/frontend/src/utils/neuroglassStateConfig.js
@@ -1,6 +1,7 @@
 import { KNOWN_NG_VIEWS, NG_DEFAULT_LAYOUT, NG_DEFAULT_MOBILE_LAYOUT } from './constants';
 
 const DEFAULT_CONTRAST_RANGE = [0, 123];
+const neuroglassLayerUrlCache = new Map();
 
 // ─── Coordinate space shared by all VFB instances ────────────────────────────
 const SHARED_VIEWPORT = {
@@ -21,29 +22,117 @@ const SHARED_VIEWPORT = {
   projectionScale: 1024,
 };
 
-function buildNeuroglassLayerUrl(protocol, baseUrl, instanceId) {
-  const path = instanceId;
-  if (protocol === 'neuroglancer-precomputed' || protocol === 'n5') {
-    // GCS / S3 require Neuroglancer's pipe notation
-    return `${baseUrl}/${path}/|${protocol}:`;
-  }
-  // HTTP fileservers use a precomputed:// prefix
-  return `precomputed://${baseUrl}/${path}`;
-}
-
-// Datasource configuration for Datasource
 export const NEUROGLASS_DATASOURCE = {
   protocol: import.meta.env.NEUROGLASS_DATA_PROTOCOL,
   baseUrl: import.meta.env.NEUROGLASS_DATA_BASE_URL,
-  buildUrl(instanceId) {
-    return buildNeuroglassLayerUrl(
+  async buildUrl(instanceId) {
+    if (neuroglassLayerUrlCache.has(instanceId)) {
+      return neuroglassLayerUrlCache.get(instanceId);
+    }
+  
+    let instancePath = instanceId.replace(
+      /^VFB_(\d{4})([a-zA-Z0-9]+)$/i,
+      'VFB/i/$1/$2/'
+    );
+  
+    const layerURLPromise = buildNeuroglassLayerUrl(
       this.protocol,
       this.baseUrl,
-      instanceId,
+      instancePath
     );
-  },
+  
+    neuroglassLayerUrlCache.set(instanceId, layerURLPromise);
+  
+    try {
+      const layerURL = await layerURLPromise;
+      neuroglassLayerUrlCache.set(instanceId, layerURL);
+      return layerURL;
+    } catch (error) {
+      neuroglassLayerUrlCache.delete(instanceId);
+      throw error;
+    }
+  }
 };
 
+function isObjectStoreUrl(baseUrl = '') {
+  return baseUrl.startsWith('gs://') || baseUrl.startsWith('s3://');
+}
+
+function isHttpUrl(baseUrl = '') {
+  return baseUrl.startsWith('http://') || baseUrl.startsWith('https://');
+}
+
+async function buildNeuroglassLayerUrl(protocol, baseUrl, instanceId) {
+  let path = instanceId;
+
+  // Check if the protocol is 'neuroglancer-precomputed'
+  if (protocol === 'neuroglancer-precomputed') {
+    if (isObjectStoreUrl(baseUrl)) {
+      return `${baseUrl}/${path}/|${protocol}:`;
+    }
+
+    if (isHttpUrl(baseUrl)) {
+      const url = `${baseUrl}/${path}`;
+      try {
+        // Fetch the folder contents of the URL
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch URL: ${url}`);
+        }
+
+        // Check if the response is HTML
+        const contentType = response.headers.get('Content-Type');
+        if (contentType && contentType.includes('text/html')) {
+          // Parse the HTML response
+          const html = await response.text();
+          const folderNames = extractFolderNamesFromHtml(html);
+
+          // Find the folder starting with VFB_
+          const vfbFolder = folderNames.find((name) => name.startsWith('VFB_'));
+
+          if (vfbFolder) {
+            // Check if the VFB_ folder contains a 'neuroglancer' folder
+            const vfbFolderUrl = `${url}/${vfbFolder}`;
+            const vfbResponse = await fetch(vfbFolderUrl);
+            if (!vfbResponse.ok) {
+              throw new Error(`Failed to fetch VFB folder: ${vfbFolderUrl}`);
+            }
+
+            const vfbHtml = await vfbResponse.text();
+            const vfbFolderNames = extractFolderNamesFromHtml(vfbHtml);
+            const neuroglancerFolder = vfbFolderNames.find(
+              (name) => name === 'neuroglancer/'
+            );
+
+            if (neuroglancerFolder) {
+              return `${vfbFolderUrl}${neuroglancerFolder}|${protocol}:`;
+            }
+          }
+        } else {
+          throw new Error(`Unexpected Content-Type: ${contentType}`);
+        }
+      } catch (error) {
+        console.error(`[buildNeuroglassLayerUrl] Error: ${error.message}`);
+      }
+    }
+    return `${baseUrl}/${path}/|${protocol}:`;
+  }
+
+  if (protocol === 'gs' || protocol === 'n5') {
+    return `${baseUrl}/${path}/|${protocol}:`;
+  }
+}
+
+function extractFolderNamesFromHtml(html) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const links = doc.querySelectorAll('a'); // Select all <a> tags
+  const folderNames = Array.from(links)
+    .map((link) => link.textContent.trim()) // Extract text content
+    .filter((name) => name && !name.startsWith('..')); // Exclude parent directory links
+  return folderNames;
+}
+
 // Fixed GLSL shader template : Only shaderControls.color and layer.opacity change per instance.
 export const LAYER_SHADER = [
   '#uicontrol invlerp contrast',
@@ -117,10 +206,12 @@ function normalizeContrast(inst) {
 }
 
 // Per-instance layer builder: converts a VFB instance into a Neuroglancer layer config.
-function buildSingleInstanceLayer(inst) {
+async function buildSingleInstanceLayer(inst) {
+  const source = await NEUROGLASS_DATASOURCE.buildUrl(inst.metadata.Id);
+
   const layer = {
     type: 'image',
-    source: NEUROGLASS_DATASOURCE.buildUrl(inst.metadata.Id),
+    source: source,
     tab: 'rendering',
     opacity: alphaToOpacity(inst.color?.a),
     blend: 'additive',
@@ -138,18 +229,21 @@ function buildSingleInstanceLayer(inst) {
 
   return layer;
 }
-// Main state builder: converts loaded VFB instances + UI state into a Neuroglass viewer state object.
-export function buildNeuroglassState(allLoadedInstances, focusedInstanceId, layout) {
+
+export async function buildNeuroglassState(allLoadedInstances, focusedInstanceId, layout) {
   const instances = allLoadedInstances || [];
-  const layers = instances
-    .filter(inst => {
-      if (!inst?.metadata?.Id) {
-        console.warn(`[buildNeuroglassState] Instance missing metadata ID:`, inst);
-        return false;
-      }
-      return true;
-    })
-    .map(inst => buildSingleInstanceLayer(inst));
+
+  const layers = await Promise.all(
+    instances
+      .filter(inst => {
+        if (!inst?.metadata?.Id) {
+          console.warn(`[buildNeuroglassState] Instance missing metadata ID:`, inst);
+          return false;
+        }
+        return true;
+      })
+      .map(inst => buildSingleInstanceLayer(inst))
+  );
 
   if (layers.length === 0) return null;