Circuit Browser Fixes for #VFB-223 and #VFB-224

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

@@ -152,36 +152,69 @@ const VFBStackViewer = (props) => {
   const config = useMemo(() => {
     let result = {
       serverUrl: 'http://www.virtualflybrain.org/fcgi/wlziipsrv.fcgi',
-      templateId: 'NOTSET'
+      templateId: 'NOTSET',
+      templateDomainIds: [],
+      templateDomainNames: [],
+      templateDomainTypeIds: [],
+      subDomains: []
     };
-    
-    data?.forEach( stackViewerData => {
+
+    data?.forEach(stackViewerData => {
       if (stackViewerData?.metadata?.IsTemplate) {
-        let keys = Object.keys(stackViewerData.metadata?.Images);
-        result = stackViewerData.metadata?.Images[keys[0]]?.[0];
-        result.serverUrl = 'http://www.virtualflybrain.org/fcgi/wlziipsrv.fcgi';
-        if ( stackViewerData?.metadata?.Domains ){
-          keys = Object.keys(stackViewerData?.metadata?.Domains);
+        const imageKeys = Object.keys(stackViewerData.metadata?.Images || {});
+        if (!imageKeys.length) {
+          return;
+        }
+
+        const imageMeta =
+          stackViewerData.metadata?.Images[imageKeys[0]]?.[0];
+        if (!imageMeta) {
+          return;
         }
-        let ids = [parseInt(keys[keys?.length - 1]) + 1], labels = [parseInt(keys[keys?.length - 1]) + 1], classID = [parseInt(keys[keys?.length - 1]) + 1]; 
-        keys?.forEach( key => {
-          ids[parseInt(key)] = (stackViewerData?.metadata?.Domains?.[key]?.id);
-          labels[parseInt(key)] = (stackViewerData?.metadata?.Domains?.[key]?.type_label);
-          classID[parseInt(key)] = (stackViewerData?.metadata?.Domains?.[key]?.type_id);
-        })
-        let voxels = [];
-        if (result?.voxel != undefined) {
-          voxelSizeRef.current.x = Number(result.voxel.X || 0.622088);
-          voxelSizeRef.current.y = Number(result.voxel.Y || 0.622088);
-          voxelSizeRef.current.z = Number(result.voxel.Z || 0.622088);
-          voxels = [voxelSizeRef.current.x, voxelSizeRef.current.y, voxelSizeRef.current.z];
+
+        const domains = stackViewerData.metadata?.Domains || {};
+        const domainKeys = Object.keys(domains);
+        const maxIndex = domainKeys.reduce(
+          (acc, k) => Math.max(acc, Number(k) || 0),
+          0
+        );
+
+        const ids = new Array(maxIndex + 1);
+        const labels = new Array(maxIndex + 1);
+        const classIDs = new Array(maxIndex + 1);
+
+        domainKeys.forEach(key => {
+          const idx = Number(key);
+          const d = domains[key];
+          ids[idx] = d?.id;
+          labels[idx] = d?.type_label;
+          classIDs[idx] = d?.type_id;
+        });
+
+        const voxels = [];
+        if (imageMeta?.voxel) {
+          voxelSizeRef.current.x = Number(imageMeta.voxel.X || 0.622088);
+          voxelSizeRef.current.y = Number(imageMeta.voxel.Y || 0.622088);
+          voxelSizeRef.current.z = Number(imageMeta.voxel.Z || 0.622088);
+          voxels.push(
+            voxelSizeRef.current.x,
+            voxelSizeRef.current.y,
+            voxelSizeRef.current.z
+          );
         }
 
-        let subDomains = [voxels, ids, labels, classID]
-        result.subDomains = subDomains;
+        result = {
+          ...imageMeta,
+          serverUrl: 'http://www.virtualflybrain.org/fcgi/wlziipsrv.fcgi',
+          templateId: stackViewerData.metadata?.Id,
+          templateDomainIds: ids,
+          templateDomainNames: labels,
+          templateDomainTypeIds: classIDs,
+          subDomains: [voxels, ids, labels, classIDs]
+        };
       }
     });
-    
+
     return result;
   }, [data]);
 

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

@@ -981,16 +981,14 @@ const rgbToHex = (color) => {
     createImages: async function () {
       if (this.state.stack.length > 0) {
         var i, x, y, w, h, d, offX, offY, t, image, Xpos, Ypos, XboundMax, YboundMax, XboundMin, YboundMin;
-        /*
-         * move through tiles
-         * console.log('Creating slice view...');
-         */
+
         this.state.visibleTiles = [];
-        w = Math.ceil(((this.state.imageX / 10.0) * this.state.scl) / this.state.tileX);
-        h = Math.ceil(((this.state.imageY / 10.0) * this.state.scl) / this.state.tileY);
-        // console.log('Tile grid is ' + w.toString() + ' wide by ' + h.toString() + ' high');
+
+        w = Math.ceil(this.state.imageX / this.state.tileX);
+        h = Math.ceil(this.state.imageY / this.state.tileY);
         this.state.numTiles = w * h;
-
+        // console.log('Tile grid is ' + w.toString() + ' wide by ' + h.toString() + ' high');
+
         for (t = 0; t < w * h; t++) {
           x = 0;
           y = 0;
@@ -1683,12 +1681,23 @@ const StackViewerComponent = () => createClass({
       }
 
       // detect available wheel event
-      support = "onwheel" in document.createElement("div") ? "wheel" // Modern browsers support "wheel"
-        : document.onmousewheel !== undefined ? "mousewheel" // Webkit and IE support at least "mousewheel"
-          : "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
-      this?.addWheelListener(document.getElementById(this.props.data.id + 'displayArea'), (e) => {
+      support = "onwheel" in document.createElement("div")
+      ? "wheel"                            // Modern browsers
+      : document.onmousewheel !== undefined
+        ? "mousewheel"                     // Webkit / IE
+        : "DOMMouseScroll";                // Older Firefox
+
+      const displayElem =
+      document.getElementById((this.props.data && this.props.data.id) + 'displayArea') ||
+      document.getElementById('slice-viewer');
+
+      if (displayElem) {
+      this.addWheelListener(displayElem, (e) => {
         this.onWheelEvent(e);
       });
+      } else {
+      console.warn('StackViewer: wheel listener target not found for slice viewer');
+      }
 
       if (this.props.data && this.props.data != null && this.props.data.instances && this.props.data.instances != null) {
         this.setState(this.handleInstances(this.props.data.instances));
@@ -1732,24 +1741,30 @@ const StackViewerComponent = () => createClass({
           newState.voxelY = Number(this.props.config.subDomains[0][1] || 0.622088);
           newState.voxelZ = Number(this.props.config.subDomains[0][2] || 0.622088);
         }
-        if (this.props.config && this.props.config != null) {
-          if (this.props.config.subDomains && this.props.config.subDomains != null && this.props.config.subDomains.length) {
-            if (this.props.config.subDomains.length > 0 && this.props.config.subDomains[0] && this.props.config.subDomains[0].length && this.props.config.subDomains[0].length > 2) {
-              newState.voxelX = Number(this.props.config.subDomains[0][0] || 0.622088);
-              newState.voxelY = Number(this.props.config.subDomains[0][1] || 0.622088);
-              newState.voxelZ = Number(this.props.config.subDomains[0][2] || 0.622088);
-            }
-            if (this.props.config.subDomains.length > 3 && this.props.config.subDomains[1] != null) {
-              newState.tempName = this.props.config.subDomains[2];
-              newState.tempId = this.props.config.subDomains[1];
-              newState.tempType = this.props.config.subDomains[3];
-              // FIXME : Add extra subdomain to match previous configuration
-              // if (this.props.config.subDomains[4] && this.props.config.subDomains[4].length && this.props.config.subDomains[4].length > 0) {
-              //   newState.fxp = JSON.parse(this.props.config.subDomains[4][0]);
-              // }
-            }
+        if (this.props.config) {
+          const {
+            subDomains = [],
+            templateDomainIds,
+            templateDomainNames,
+            templateDomainTypeIds
+          } = this.props.config;
+
+          if (subDomains.length > 0 && subDomains[0] && subDomains[0].length > 2) {
+            newState.voxelX = Number(subDomains[0][0] || 0.622088);
+            newState.voxelY = Number(subDomains[0][1] || 0.622088);
+            newState.voxelZ = Number(subDomains[0][2] || 0.622088);
           }
-        }
+
+          const templateIds = templateDomainIds || subDomains[1];
+          const templateNames = templateDomainNames || subDomains[2];
+          const templateTypes = templateDomainTypeIds || subDomains[3];
+
+          if (templateIds && templateNames && templateTypes) {
+            newState.tempId = templateIds;
+            newState.tempName = templateNames;
+            newState.tempType = templateTypes;
+          }
+        }                
         for (instance in instances) {
           try {
             if ((instances[instance].wrappedObj.id != undefined) && (instances[instance].parent != null) ){
@@ -1792,7 +1807,7 @@ const StackViewerComponent = () => createClass({
 
     componentWillUnmount: function () {
       this._isMounted = false;
-      return true;
+      return true;      
     },
     /**
      * Event handler for clicking zoom in. Increments the zoom level

applications/virtual-fly-brain/frontend/src/reducers/middleware/urlUpdaterMiddleware.js

@@ -49,44 +49,41 @@ const isFirstTimeLoad = (allLoadedInstances, store) => {
   if (currentUrl != appLoadedUrl) {
     localStorage.setItem(APP_LOADED_FLAG_KEY, currentUrl);
     // Load id parameter from URL and dispatch action
-    let idToUpdate = [];
     const idsFromUrl = getUrlParameter("i");
-    // let idToUpdate = [DEFAULT_ID];
-
-    if (idsFromUrl) {
-      idToUpdate = [...new Set(idsFromUrl?.split(','))];
-    }
-
     const idSelected = getUrlParameter("id");
 
+    const queuedInstances = idsFromUrl
+      ? idsFromUrl
+        .split(',')
+        .map(id => id?.trim())
+        .filter(Boolean)
+      : [];
+
+    let loadOrder = [...queuedInstances];
     if (idSelected) {
-      // If an ID is specified in the URL, check if present and if yes move it as last in the list, otherwise add it at the end
-      idToUpdate = idToUpdate.filter(id => id !== idSelected);
-      // If the selected ID is not already in the list, add it
-      if (!idToUpdate.includes(idSelected)) {
-        idToUpdate.push(idSelected);
-      }
-    } else if (idToUpdate.length === 0) {
-      // If no ID is specified in the URL, add the default ID
-      idToUpdate.push(DEFAULT_ID);
+      loadOrder = loadOrder.filter(id => id !== idSelected);
+      loadOrder.unshift(idSelected);
     }
 
-    // Filter out instances that are already loaded to get the actual count we need to load
-    const instancesToLoad = idToUpdate.filter(id => !allLoadedInstances?.find(i => i.metadata?.Id === id));
-
     // If we have instances to load, set up bulk loading
+    if (loadOrder.length === 0) {
+      loadOrder.push(DEFAULT_ID);
+    }
+
+    const uniqueLoadOrder = [...new Set(loadOrder)];
+    const instancesToLoad = uniqueLoadOrder.filter(id => !allLoadedInstances?.find(i => i.metadata?.Id === id));
+
     if (instancesToLoad.length > 0) {
       store.dispatch(setBulkLoadingCount(instancesToLoad.length));
     }
 
-    idToUpdate?.forEach( id => {
-      // if it's the last ID in the list, we need to focus it
-      if (id === idToUpdate[idToUpdate.length - 1]) {
-        getInstance(allLoadedInstances, id, true);
-      }
-      else {
-        getInstance(allLoadedInstances, id, false);
-      }
+    const focusTarget = queuedInstances.length > 0
+    ? queuedInstances[queuedInstances.length - 1]
+    : (idSelected || uniqueLoadOrder[uniqueLoadOrder.length - 1]);
+
+    uniqueLoadOrder.forEach(id => {
+      const shouldFocus = id === focusTarget;
+      getInstance(allLoadedInstances, id, shouldFocus);
     });
   }
 };