CELE-126 Fix change of dataset not refreshing the EM viewer

MetaCell · Jan 6, 2025 · 8001f8e · 8001f8e
1 parent a1570aa
commit 8001f8e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 71 deletions.
diff --git a/applications/visualizer/frontend/src/components/viewers/EM/EMStackTilesViewer.tsx b/applications/visualizer/frontend/src/components/viewers/EM/EMStackTilesViewer.tsx
@@ -13,16 +13,16 @@ import VectorLayer from "ol/layer/Vector";
 import { Projection } from "ol/proj";
 import { XYZ } from "ol/source";
 import VectorSource from "ol/source/Vector";
+import type Style from "ol/style/Style";
 import { TileGrid } from "ol/tilegrid";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useGlobalContext } from "../../../contexts/GlobalContext.tsx";
-import { ViewerType, getEMDataURL, getSegmentationURL, getSynapsesSegmentationURL } from "../../../models/models.ts";
+import { ViewerType, getEMDataURL, getEMResolution, getSegmentationURL, getSynapsesSegmentationURL } from "../../../models/models.ts";
 import type { Workspace } from "../../../models/workspace.ts";
 import type { Dataset } from "../../../rest/index.ts";
 import SceneControls from "./SceneControls.tsx";
-import { activeNeuronStyle, cellFeatureName, selectedNeuronStyle, selectedSynapseStyle, activeSynapseStyle } from "./neuronsMapFeature.ts";
+import { activeNeuronStyle, activeSynapseStyle, cellFeatureName, selectedNeuronStyle, selectedSynapseStyle } from "./neuronsMapFeature.ts";
 import { SlidingLayer } from "./slidingLayer.ts";
-import Style from "ol/style/Style";
 
 const newEMLayer = (dataset: Dataset, slice: number, tilegrid: TileGrid, projection: Projection): TileLayer<XYZ> => {
   return new TileLayer({
@@ -204,9 +204,6 @@ const EMStackViewer = () => {
     return <NoEMData />;
   }
 
-  const hasNeuronSegmentations = !!firstActiveDataset.emData.segmentationSize;
-  const hasSynapseSegmentations = !!firstActiveDataset.emData.synapsesSegmentationUrl;
-
   const [minSlice, maxSlice] = firstActiveDataset.emData.sliceRange;
   const startSlice = Math.floor((maxSlice + minSlice) / 2);
   const [segSlice, segSetSlice] = useState<number>(startSlice);
@@ -223,16 +220,7 @@ const EMStackViewer = () => {
   const [showNeurons, setShowNeurons] = useState<boolean>(true);
   const [showSynapses, setShowSynapses] = useState<boolean>(true);
 
-  // EM tiles reverse the maximum and minimum zooms
-  // lower numbers are more zoomed in (0 is max zoom possible)
-  // In OpenLayers, 0 is the minimum zoom and higher number are
-  // more zoomed in.
-  const startZoom = firstActiveDataset.emData.maxZoom;
-
-  const extent = useMemo(
-    () => [0, 0, ...(firstActiveDataset.emData.segmentationSize || firstActiveDataset.emData.maxResolution)],
-    [firstActiveDataset.emData.segmentationSize],
-  );
+  const extent = useMemo(() => [0, 0, ...getEMResolution(firstActiveDataset)], [firstActiveDataset]);
 
   const projection = useMemo(() => {
     return new Projection({
@@ -243,22 +231,6 @@ const EMStackViewer = () => {
     });
   }, [extent]);
 
-  const tilegrid = useMemo(() => {
-    return new TileGrid({
-      minZoom: 1, // tiles for zoom 0 not available in the dataset
-      extent: extent,
-      tileSize: firstActiveDataset.emData.tileSize[0],
-      resolutions: [0.5, 1, 2, 4, 8, 16, 32].reverse(),
-    });
-  }, [extent, firstActiveDataset.emData.tileSize]);
-
-  // const debugLayer = new TileLayer({
-  // 	source: new TileDebug({
-  // 		projection: projection,
-  // 		tileGrid: tilegrid,
-  // 	}),
-  // });
-
   const makeFeatureClickHandler = () => (position) =>
     selectAcrossLayers(
       position,
@@ -298,24 +270,26 @@ const EMStackViewer = () => {
     currSynSegLayer.current.getSource().changed();
   }, [currentWorkspace.getSelection(ViewerType.EM), segSlice]);
 
-  useEffect(() => {
-    if (!ringSeg.current) {
-      return;
-    }
-    showNeurons ? ringSeg.current.enable() : ringSeg.current.disable();
-  }, [showNeurons]);
+  useEffect(() => ringSeg.current?.setVisibility(showNeurons), [showNeurons]);
+  useEffect(() => ringSynSeg.current?.setVisibility(showSynapses), [showSynapses]);
 
   useEffect(() => {
-    if (!ringSynSeg.current) {
-      return;
-    }
-    showSynapses ? ringSynSeg.current.enable() : ringSynSeg.current.disable();
-  }, [showSynapses]);
+    const hasNeuronSegmentations = !!firstActiveDataset.emData.segmentationSize;
+    const hasSynapseSegmentations = !!firstActiveDataset.emData.synapsesSegmentationUrl;
 
-  useEffect(() => {
-    if (mapRef.current) {
-      return;
-    }
+    const tilegrid = new TileGrid({
+      minZoom: firstActiveDataset.emData.minZoom, // tiles for zoom 0 not available in the dataset
+      extent: extent,
+      tileSize: firstActiveDataset.emData.tileSize[0],
+      resolutions: [0.5, 1, 2, 4, 8, 16, 32].reverse(),
+    });
+
+    // const debugLayer = new TileLayer({
+    // 	source: new TileDebug({
+    // 		projection: projection,
+    // 		tileGrid: tilegrid,
+    // 	}),
+    // });
 
     const map = new OLMap({
       target: "emviewer",
@@ -354,7 +328,6 @@ const EMStackViewer = () => {
 
       map.on("click", (e) => onFeatureClickRef.current(e.coordinate));
     }
-
     if (hasSynapseSegmentations) {
       ringSynSeg.current = new SlidingLayer({
         map: map,
@@ -406,13 +379,14 @@ const EMStackViewer = () => {
     });
 
     // set map zoom to the minimum zoom possible
-    // const minZoomAvailable = tilegrid.getMinZoom();
-    map.getView().setZoom(startZoom);
+    const minZoomAvailable = tilegrid.getMinZoom();
+    // const startZoom = firstActiveDataset.emData.minZoom;
+    map.getView().setZoom(minZoomAvailable);
 
     mapRef.current = map;
 
     return () => map.setTarget(null);
-  }, []);
+  }, [firstActiveDataset, extent, projection, startSlice, maxSlice, minSlice]);
 
   const onControlZoomIn = () => {
     if (!mapRef.current) return;

diff --git a/applications/visualizer/frontend/src/components/viewers/EM/slidingLayer.ts b/applications/visualizer/frontend/src/components/viewers/EM/slidingLayer.ts
@@ -1,7 +1,7 @@
-import { Map } from "ol";
-import Layer from "ol/layer/Layer";
+import type { Map } from "ol";
+import type Layer from "ol/layer/Layer";
 import { SlidingRing } from "../../../helpers/slidingRing";
-import { type SlidingRingOptions } from "../../../helpers/slidingRing";
+import type { SlidingRingOptions } from "../../../helpers/slidingRing";
 
 interface SlidingLayerOptions<T extends Layer> extends Pick<SlidingRingOptions<T>, "cacheSize" | "startAt" | "extent"> {
   map: Map;
@@ -11,8 +11,8 @@ interface SlidingLayerOptions<T extends Layer> extends Pick<SlidingRingOptions<T
 
 export class SlidingLayer<T extends Layer> {
   private swindow: SlidingRing<T>;
-  private opaque: boolean = true; // loaded but is transparent
-  private visible: boolean = true; // not loaded and can not be seen
+  private opaque = true; // loaded but is transparent
+  private visible = true; // not loaded and can not be seen
 
   constructor(options: SlidingLayerOptions<T>) {
     const { map, newLayer, onSlide, ...ringOpts } = options;
@@ -27,7 +27,7 @@ export class SlidingLayer<T extends Layer> {
         return layer;
       },
       onSelected: (slice, layer) => {
-        onSlide && onSlide(slice, layer);
+        onSlide?.(slice, layer);
         layer.setOpacity(Number(this.opaque));
       },
       onUnselected: (_, layer) => {
@@ -52,27 +52,23 @@ export class SlidingLayer<T extends Layer> {
   }
 
   disable() {
-    if (!this.visible) {
-      return;
-    }
-
-    this.swindow.ring.forEach(({ o }) => {
-      o.setVisible(false);
-    });
-
-    this.visible = false;
+    this.setVisibility(false);
   }
 
   enable() {
-    if (this.visible) {
+    this.setVisibility(true);
+  }
+
+  setVisibility(isVisible: boolean) {
+    if (this.visible === isVisible) {
       return;
     }
 
-    this.swindow.ring.forEach(({ o }) => {
-      o.setVisible(true);
-    });
+    for (const { o } of this.swindow.ring) {
+      o.setVisible(isVisible);
+    }
 
-    this.visible = true;
+    this.visible = isVisible;
   }
 
   next() {

diff --git a/applications/visualizer/frontend/src/models/models.ts b/applications/visualizer/frontend/src/models/models.ts
@@ -93,6 +93,10 @@ export function getSynapsesSegmentationURL(dataset: Dataset, sliceIndex: number)
   return buildUrlFromFormat(dataset.emData.synapsesSegmentationUrl, sliceIndex?.toString());
 }
 
+export function getEMResolution(dataset: Dataset) {
+  return dataset.emData?.segmentationSize || dataset.emData?.maxResolution;
+}
+
 export enum Alignment {
   Left = "left",
   Right = "right",