Feature/vfb 215 Feature/vfb 217 Term info improvements / alerts issue

applications/virtual-fly-brain/Dockerfile

@@ -1,6 +1,6 @@
 ARG CLOUDHARNESS_FLASK
 
-FROM $CLOUDHARNESS_FLASK
+FROM ${CLOUDHARNESS_FLASK}
 
 ARG DOMAIN
 
@@ -12,7 +12,8 @@ ENV BUILDDIR=/app
 RUN apt-get update && apt-get install -y \
     git \
     build-essential \
-    libgl1-mesa-glx \
+    libgl1 \
+    libglx-mesa0 \
     libgl1-mesa-dev \
     xvfb \
     libglu1-mesa \
@@ -27,10 +28,7 @@ RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
     apt-get install -y nodejs && \
     node --version
 
-RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
-    apt-get update && \
-    apt-get install -y yarn && \
+RUN npm install -g yarn && \
     yarn --version
 
 # Set up virtual display for OpenGL

applications/virtual-fly-brain/frontend/src/components/Layout.jsx

@@ -13,7 +13,7 @@ import { setWidgets, updateWidget } from '@metacell/geppetto-meta-client/common/
 import { setTermInfoOpened } from './../reducers/actions/globals'
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
 import { WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
-import { templateLoaded,  removeAllInstances } from './../reducers/actions/instances';
+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";
@@ -33,14 +33,12 @@ const tabsArr = [
 const MainLayout = ({ bottomNav, setBottomNav }) => {
   const theme = useTheme();
   const sidebarOpen = useSelector(state => state.globalInfo.termInfoOpened)
-  const [modalOpen, setModalOpen] = useState(false);
   const desktopScreen = useMediaQuery(theme.breakpoints.up('lg'));
   const defaultActiveTab = desktopScreen ? [0, 1, 2, 3, 4] : [0];
   const [tab, setTab] = useState([]);
   const [LayoutComponent, setLayoutComponent] = useState(undefined);
   const [isLayoutMobile, setIsLayoutMobile] = useState(window.innerWidth < 1200);
   const misalignedTemplate = useSelector(state => state.globalInfo.misalignedTemplate)
-  const alignedTemplates = useSelector( state => state.globalInfo.alignedTemplates)
   const dispatch = useDispatch();
   const store = useStore();
   let _templateRef = window.location.origin + "?id=" + misalignedTemplate;
@@ -68,10 +66,6 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
     setTab(defaultActiveTab)
   }, [desktopScreen])
 
-  useEffect(() => {
-    setModalOpen(!alignedTemplates)
-  }, [alignedTemplates])
-
   useEffect(() => {
     if (LayoutComponent === undefined) {
       const myManager = getLayoutManagerInstance();
@@ -176,15 +170,6 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
     dispatch(setTermInfoOpened(opened))
   }
 
-
-  const handleModalClose = (id, openTemplate) => {
-    if ( openTemplate) {
-      templateLoaded(id, openTemplate);
-      _templateRef = window.location.href.replace(id + ",", "")
-    }
-    setModalOpen(false)
-  }
-
   const tabContent = isLayoutMobile ? (
     <>
       {tab.includes(0) && (
@@ -232,46 +217,6 @@ const MainLayout = ({ bottomNav, setBottomNav }) => {
       </MediaQuery>
 
       <ErrorDialog display={modalError} message={modalErrorMessage}/>
-      <Modal
-        open={modalOpen}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={classes.modalStyle}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            ID not aligned
-          </Typography>
-          <Typography id="modal-modal-description" sx={{ mt: 2, mb: 3 }}>
-            The image you requested is aligned to another template. Click Okay
-            to open in a new tab or Cancel to just view the image metadata.
-          </Typography>
-          <Box sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            position: 'absolute',
-            bottom: 16,
-            left: 16,
-            right: 16
-          }}>
-            <Button
-              variant="outlined"
-              color="secondary"
-              onClick={() => handleModalClose(misalignedTemplate, false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={() => handleModalClose(misalignedTemplate, true)}
-              target="_blank"
-              href={window.location.origin + "/?id=" + misalignedTemplate}
-            >
-              Okay
-            </Button>
-          </Box>
-        </Box>
-      </Modal>
       <Box
         display='flex'
         flexWrap='wrap'

applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx

@@ -53,10 +53,10 @@ import AccordionDetails from "@mui/material/AccordionDetails";
 import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
 import ListAltIcon from "@mui/icons-material/ListAlt";
 import GeneralInformation from "./TermInfo/GeneralInformation";
+import Modal from "../shared/modal/Modal";
 import { getQueries, updateQueries } from "./../reducers/actions/queries";
 import { setQueryComponentOpened } from "./../reducers/actions/globals";
 import {
-  getInstanceByID,
   selectInstance,
   hide3DMesh,
   hide3D,
@@ -100,7 +100,6 @@ const {
 const getRibbonData = (query) => {
   let terms = query?.preview_results?.rows?.map((row) => {
     const regExp = /\(([^)]+)\)/g;
-    const matches = [...row.Neurotransmitter.matchAll(regExp)].flat();
     return {
       id: row.Neurotransmitter,
       name: (
@@ -241,7 +240,7 @@ const TermInfo = ({ open, setOpen }) => {
     Queries: configuration.sectionsExpanded,
     Graphs: configuration.sectionsExpanded,
   });
-  const [sections, setSections] = useState([
+  const [sections,] = useState([
     "General Information",
     "Queries",
     "Graphs",
@@ -257,6 +256,12 @@ const TermInfo = ({ open, setOpen }) => {
 
   const [termInfoData, setTermInfoData] = useState(data);
   const [toggleReadMore, setToggleReadMore] = useState(false);
+  const [confirmationModal, setConfirmationModal] = useState({
+    open: false,
+    id: null,
+    message: ''
+  });
+
   const dispatch = useDispatch();
 
   const popover = React.useRef();
@@ -286,13 +291,31 @@ const TermInfo = ({ open, setOpen }) => {
     setExpanded(newState);
   };
 
-  const deleteId = (id) => {
+  const deleteId = () => {
     hide3DMesh(termInfoData?.metadata?.Id);
     removeInstanceByID(termInfoData?.metadata?.Id);
   };
 
   const addId = (id) => {
-    getInstanceByID(id, false);
+    setConfirmationModal({
+      open: true,
+      id: id,
+      message: `The image you requested is aligned to another template. Click Okay to open in a new tab or Cancel to just view the image metadata.?`
+    });
+  };
+
+  const handleConfirmAdd = () => {
+    if (confirmationModal.id) {
+      window.open(
+        window.location.origin + '/?id=' + confirmationModal.id,
+        '_blank'
+      );
+    }
+    setConfirmationModal({ open: false, id: null, message: '' });
+  };
+
+  const handleCancelAdd = () => {
+    setConfirmationModal({ open: false, id: null, message: '' });
   };
 
   const handleVisibility = () => {
@@ -319,15 +342,15 @@ const TermInfo = ({ open, setOpen }) => {
     }
   };
 
-  const handleFocus = (event) => {
+  const handleFocus = () => {
     zoomToInstance(termInfoData?.metadata?.Id);
   };
 
-  const handleSelection = (event) => {
+  const handleSelection = () => {
     selectInstance(termInfoData?.metadata?.Id);
   };
 
-  const handleSkeleton = (event) => {
+  const handleSkeleton = () => {
     if (
       !allLoadedInstances.find(
         (instance) => instance.metadata?.Id == termInfoData?.metadata?.Id
@@ -339,7 +362,7 @@ const TermInfo = ({ open, setOpen }) => {
     }
   };
 
-  const handleCylinder = (event) => {
+  const handleCylinder = () => {
     if (
       !allLoadedInstances.find(
         (instance) => instance.metadata?.Id == termInfoData?.metadata?.Id
@@ -351,16 +374,19 @@ const TermInfo = ({ open, setOpen }) => {
     }
   };
 
-  const handleTermClick = (term, evt) => {
+  const handleTermClick = (term) => {
     const regExp = /\(([^)]+)\)/g;
     const matches = [...term.id.matchAll(regExp)].flat();
-    getInstanceByID(matches[1], false);
+
+    setConfirmationModal({
+      open: true,
+      id: matches[1],
+      message: `The image you requested is aligned to another template. Click Okay to open in a new tab or Cancel to just view the image metadata.`
+    });
   };
 
   const customColorCalculation = ({
-    numTerms,
     baseRGB,
-    heatLevels,
     itemData,
   }) => {
     let red = baseRGB[0] * itemData.descendant_terms[0];
@@ -484,7 +510,11 @@ const TermInfo = ({ open, setOpen }) => {
       window.open(href, "_blank", "noopener,noreferrer");
     } else {
       const id = href.split(',').pop().trim();
-      getInstanceByID(id, false, true, false);
+      setConfirmationModal({
+        open: true,
+        id: id,
+        message: `The image you requested is aligned to another template. Click Okay to open in a new tab or Cancel to just view the image metadata.`
+      });
     }
   };
 
@@ -782,7 +812,7 @@ const TermInfo = ({ open, setOpen }) => {
                               a: getInstance()?.color.a,
                             }}
                             disableAlpha={false}
-                            onChangeComplete={(color, event) => {
+                            onChangeComplete={(color) => {
                               let rgb;
                               rgb = {
                                 r: color.rgb.r / 255,
@@ -833,7 +863,7 @@ const TermInfo = ({ open, setOpen }) => {
                               : "Show 3D Mesh"
                           }
                         >
-                          <Button onClick={(event) => handleMeshVisibility()}>
+                          <Button onClick={() => handleMeshVisibility()}>
                             {getInstance()?.visibleMesh ? (
                               <ArViewOff />
                             ) : (
@@ -915,13 +945,29 @@ const TermInfo = ({ open, setOpen }) => {
                   <Typography>General Information</Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                  <GeneralInformation data={termInfoData} classes={classes} />
+                  <GeneralInformation data={termInfoData} classes={classes} showMetadataOnly={false} />
                 </AccordionDetails>
               </Accordion>
 
               <Accordion
                 expanded={expanded[sections[1]]}
                 onChange={() => handleSection(sections[1])}
+              >
+                <AccordionSummary
+                  expandIcon={<ChevronDown />}
+                  aria-controls="panel1a-content"
+                  id="panel1a-header"
+                >
+                  <Typography>Metadata</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                  <GeneralInformation data={termInfoData} classes={classes} showMetadataOnly={true} />
+                </AccordionDetails>
+              </Accordion>
+
+              <Accordion
+                expanded={expanded[sections[2]]}
+                onChange={() => handleSection(sections[2])}
               >
                 <AccordionSummary
                   expandIcon={<ChevronDown />}
@@ -1018,7 +1064,7 @@ const TermInfo = ({ open, setOpen }) => {
                                                 (instance) => instance.metadata?.Id === row.id
                                               );
                                               return ( <TableRow key={row.id + '-' + rowIdx}>
-                                                {headers.slice(0, -1).map((h, idx) =>
+                                                {headers.slice(0, -1).map((h) =>
                                                   (
                                                     <TableCell key={h.key}>
                                                       {renderCellContent(h.type, row[h.key])}
@@ -1183,8 +1229,8 @@ const TermInfo = ({ open, setOpen }) => {
               </Accordion>
 
               <Accordion
-                expanded={expanded[sections[2]]}
-                onChange={() => handleSection(sections[2])}
+                expanded={expanded[sections[3]]}
+                onChange={() => handleSection(sections[3])}
               >
                 <AccordionSummary
                   expandIcon={<ChevronDown />}
@@ -1230,6 +1276,21 @@ const TermInfo = ({ open, setOpen }) => {
         )}
       </Box>
 
+      {/* Confirmation Modal for Adding Instance */}
+      <Modal
+        open={confirmationModal.open}
+        handleClose={handleCancelAdd}
+        title="ID not aligned"
+        description={confirmationModal.message}
+      >
+        <Button onClick={handleCancelAdd} variant="outlined">
+          Cancel
+        </Button>
+        <Button onClick={handleConfirmAdd} variant="contained">
+          Okay
+        </Button>
+      </Modal>
+
       <MediaQuery minWidth={1200}>
         <Box
           px={open ? 2 : 0}