VFB-240 - Change the datasource for the NG widget to file serve here Index of /data/VFB/i/

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>

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(() => {

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,15 +200,15 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-search",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [5]
+            parameters: [bottomNavSearch]
           }
         },
         {
           label: "Query",
           icon: "fa fa-clipboard-question",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [2]
+            parameters: [bottomNavQuery]
           }
         },
         {
@@ -279,15 +280,15 @@ export const toolbarMenu = (autoSaveLayout) => { return {
           icon: "fa fa-download",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [1]
+            parameters: [bottomNavDownload]
           }
         },
         {
           label: "NBLAST Uploader",
           icon: "fa fa-upload",
           action: {
             handlerAction: ACTIONS.SHOW_COMPONENT,
-            parameters: [0]
+            parameters: [bottomNavUpload]
           }
         },
         {

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 });
@@ -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}

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'
   },
@@ -72,7 +73,7 @@ const BottomNav = ({ setBottomNav, bottomNav }) => {
       flexWrap='wrap'
       sx={classes.root}
     >
-      {navArr.map((item, index) => (
+      {navArr.map((item) => (
         <Button
           sx={{
             height: '100%',
@@ -83,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'} />

applications/virtual-fly-brain/frontend/src/shared/header/index.jsx

@@ -17,6 +17,7 @@
 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 @@
       }
 
       // Open the query component panel
-      setBottomNav(2);
+      setBottomNav(bottomNavQuery);
     }
   }
 
@@ -140,13 +141,13 @@
             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)
+          setBottomNav(bottomNavQuery)
         }
         break;
       }
@@ -208,7 +209,7 @@
   }
 
   useEffect(() => {
     menuConfig = toolbarMenu(autoSaveLayout);
   }, [autoSaveLayout]);
 
   return (
@@ -310,7 +311,7 @@
       <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} />