Update share feature with EM viewer information

applications/visualizer/frontend/src/components/viewers/EM/EMStackTilesViewer.tsx

@@ -205,7 +205,11 @@ const EMStackViewer = () => {
   }
 
   const [minSlice, maxSlice] = firstActiveDataset.emData.sliceRange;
-  const startSlice = Math.floor((maxSlice + minSlice) / 2);
+  // const startSlice = Math.floor((maxSlice + minSlice) / 2);
+  const startSlice = useMemo(() => {
+    return currentWorkspace.emViewerSettings.startSlice;
+  }, [currentWorkspace]);
+
   const [segSlice, segSetSlice] = useState<number>(startSlice);
   const ringSize = 11;
 
@@ -217,8 +221,8 @@ const EMStackViewer = () => {
   const ringSeg = useRef<SlidingLayer<VectorLayer<Feature>>>();
   const ringSynSeg = useRef<SlidingLayer<VectorLayer<Feature>>>();
 
-  const [showNeurons, setShowNeurons] = useState<boolean>(true);
-  const [showSynapses, setShowSynapses] = useState<boolean>(true);
+  const [showNeurons, setShowNeurons] = useState<boolean>(currentWorkspace.emViewerSettings.showNeurons);
+  const [showSynapses, setShowSynapses] = useState<boolean>(currentWorkspace.emViewerSettings.showSynapses);
 
   const extent = useMemo(() => [0, 0, ...getEMResolution(firstActiveDataset)], [firstActiveDataset]);
 
@@ -315,6 +319,9 @@ const EMStackViewer = () => {
       startAt: startSlice,
       extent: [minSlice, maxSlice],
       newLayer: (slice) => newEMLayer(firstActiveDataset, slice, tilegrid, projection),
+      onSlide: (slice) => {
+        currentWorkspace.setEmviewerSlice(slice);
+      },
     });
 
     if (hasNeuronSegmentations) {
@@ -330,6 +337,7 @@ const EMStackViewer = () => {
           segSetSlice(slice);
         },
       });
+      ringSeg.current?.setVisibility(showNeurons);
 
       map.on("click", (e) => onFeatureClickRef.current(e.coordinate));
     }
@@ -345,6 +353,7 @@ const EMStackViewer = () => {
           currSynSegLayer.current = layer;
         },
       });
+      ringSynSeg.current?.setVisibility(showSynapses);
     }
 
     function handleSliceScroll(e: WheelEvent) {
@@ -442,12 +451,18 @@ const EMStackViewer = () => {
           neurons: {
             label: "Neurons",
             checked: showNeurons,
-            onToggle: setShowNeurons,
+            onToggle: (show) => {
+              setShowNeurons(show);
+              currentWorkspace.emViewerShowNeurons(show);
+            },
           },
           synapses: {
             label: "Synapses",
             checked: showSynapses,
-            onToggle: setShowSynapses,
+            onToggle: (show) => {
+              setShowSynapses(show);
+              currentWorkspace.emViewerShowSynapses(show);
+            },
           },
         }}
       />

applications/visualizer/frontend/src/contexts/GlobalContext.tsx

@@ -175,6 +175,8 @@ export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({ ch
         ws.contexts,
         ws.visibilities,
         ws.neuronGroups,
+        ws.emViewerSettings,
+        ws.viewers,
       );
       workspace.viewers = ws.viewers;
 

applications/visualizer/frontend/src/contexts/SerializedContext.tsx

@@ -1,5 +1,5 @@
 import type { NeuronGroup, ViewMode, ViewerType } from "../models";
-import type { ViewerData, ViewerSynchronizationPair } from "../models/models";
+import type { EMViewerSettings, ViewerData, ViewerSynchronizationPair } from "../models/models";
 import type { SynchronizerContext } from "../models/synchronizer";
 
 type SerializedWorkspace = {
@@ -13,6 +13,7 @@ type SerializedWorkspace = {
   contexts: Record<ViewerType, SynchronizerContext>;
   activeSyncs: Record<ViewerSynchronizationPair, boolean>;
   visibilities: Record<string, ViewerData>;
+  emViewerSettings: EMViewerSettings;
 };
 
 export type SerializedGlobalContext = {

applications/visualizer/frontend/src/helpers/slidingRing.ts

@@ -91,7 +91,7 @@ export class SlidingRing<T> {
     if (tailN < min) tailN = min;
     if (headN > max) {
       headN = max;
-      tailN = headN - this.ring.length - 1;
+      tailN = headN - this.ring.length + 1;
     }
 
     // populate the ring

applications/visualizer/frontend/src/models/models.ts

@@ -69,6 +69,12 @@ export interface ViewerData {
   [ViewerType.EM]?: EMViewerData;
 }
 
+export interface EMViewerSettings {
+  showNeurons: boolean;
+  showSynapses: boolean;
+  startSlice: number;
+}
+
 const buildUrlFromFormat = (s: string, param: string) => {
   return s.replace(s.match("{[^}]+}")?.[0], param);
 };

applications/visualizer/frontend/src/models/workspace.ts

@@ -4,7 +4,15 @@ import { createDraft, finishDraft, immerable, isDraft, produce } from "immer";
 import getLayoutManagerAndStore from "../layout-manager/layoutManagerFactory";
 import { type Dataset, type Neuron, NeuronsService } from "../rest";
 import { GlobalError } from "./Error.ts";
-import { type NeuronGroup, type ViewerData, type ViewerSynchronizationPair, ViewerType, Visibility, getDefaultViewerData } from "./models";
+import {
+  type EMViewerSettings,
+  type NeuronGroup,
+  type ViewerData,
+  type ViewerSynchronizationPair,
+  ViewerType,
+  Visibility,
+  getDefaultViewerData,
+} from "./models";
 import { type SynchronizerContext, SynchronizerOrchestrator } from "./synchronizer";
 
 function triggerUpdate<T extends Workspace>(_prototype: any, _key: string, descriptor: PropertyDescriptor) {
@@ -51,6 +59,7 @@ export class Workspace {
   visibilities: Record<string, ViewerData>;
   viewers: Record<ViewerType, boolean>;
   neuronGroups: Record<string, NeuronGroup>;
+  emViewerSettings: EMViewerSettings;
 
   store: ReturnType<typeof configureStore>;
   layoutManager: LayoutManager;
@@ -68,18 +77,33 @@ export class Workspace {
     contexts?: Record<ViewerType, SynchronizerContext>,
     visibilities?: Record<string, ViewerData>,
     neuronGroups?: Record<string, NeuronGroup>,
+    emViewerSettings?: EMViewerSettings,
+    viewers?: Record<ViewerType, boolean>,
   ) {
     this.id = id;
     this.name = name;
     this.activeDatasets = activeDatasets;
     this.availableNeurons = {};
     this.activeNeurons = activeNeurons || new Set();
-    this.viewers = {
+    this.viewers = viewers || {
       [ViewerType.Graph]: true,
       [ViewerType.ThreeD]: false,
       [ViewerType.EM]: false,
     };
     this.neuronGroups = neuronGroups || {};
+    // Set EM viewer settings
+    if (!emViewerSettings) {
+      const firstActiveDataset = Object.values(activeDatasets)?.[0];
+      const [minSlice, maxSlice] = firstActiveDataset.emData.sliceRange;
+      const startSlice = Math.floor((maxSlice + minSlice) / 2);
+      this.emViewerSettings = {
+        showNeurons: true,
+        showSynapses: true,
+        startSlice: startSlice,
+      };
+    } else {
+      this.emViewerSettings = { ...emViewerSettings };
+    }
 
     const { layoutManager, store } = getLayoutManagerAndStore(id);
     this.layoutManager = layoutManager;
@@ -289,4 +313,18 @@ export class Workspace {
 
     this.updateContext(updated);
   }
+
+  // Those methods do not trigger updates as they are only here to store settings for the share function
+  // We don't want to trigger re-renderings of the full app
+  setEmviewerSlice(slice: number) {
+    this.emViewerSettings.startSlice = slice;
+  }
+
+  emViewerShowNeurons(show: boolean) {
+    this.emViewerSettings.showNeurons = show;
+  }
+
+  emViewerShowSynapses(show: boolean) {
+    this.emViewerSettings.showSynapses = show;
+  }
 }