@vitessce/neuroglancer 4.0.0-test.0 → 4.0.0-test.2

package/dist/{ReactNeuroglancer-Bg6f79hO.js → ReactNeuroglancer-UvsFo0UR.js}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as diffCameraState } from "./index-DZhbMDug.js";
+import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as diffCameraState } from "./index-DslldtW7.js";
 var es6_object_assign = {};
 var _global = { exports: {} };
 var hasRequired_global;
@@ -31538,9 +31538,7 @@ const svg_bin = '<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
 function makeDeleteButton(options = {}) {
   const icon = makeIcon(_Object$assign({ svg: svg_bin }, options));
   const svg = icon.firstElementChild;
-  if (svg) {
-    svg.style.fill = "white";
-  }
+  if (svg) svg.style.fill = "white";
   return icon;
 }
 var es6_string_raw = {};
@@ -47185,6 +47183,18 @@ class DataManagementContext extends RefCounted {
     this.frameNumberCounter = frameNumberCounter;
     const chunk_worker_url = bundleRoot + "chunk_worker.bundle.js";
     this.worker = typeof bundleRoot === "string" ? new Worker(chunk_worker_url) : bundleRoot;
+    if (typeof bundleRoot !== "string") {
+      this.worker.addEventListener("message", (msg) => {
+        if (msg.data?.functionName === "Worker" && msg.data?.path === "async_computation.bundle.js") {
+          msg.stopImmediatePropagation();
+          const AsyncWorker = bundleRoot.AsyncComputationWorker;
+          if (AsyncWorker) {
+            const asyncWorker = new AsyncWorker();
+            asyncWorker.postMessage({ port: msg.data.port }, [msg.data.port]);
+          }
+        }
+      }, true);
+    }
     this.chunkQueueManager = this.registerDisposer(new ChunkQueueManager(new RPC(this.worker), this.gl, this.frameNumberCounter, {
       gpuMemory: new CapacitySpecification({ defaultItemLimit: 1e6, defaultSizeLimit: 1e9 }),
       systemMemory: new CapacitySpecification({ defaultItemLimit: 1e7, defaultSizeLimit: 2e9 }),
@@ -66836,6 +66846,7 @@ class Neuroglancer extends React__default.Component {
     onVisibleChanged: null,
     onSelectionDetailsStateChanged: null,
     onViewerStateChanged: null,
+    onLayerLoadingChange: null,
     key: null,
     callbacks: [],
     ngServer: "https://neuroglancer-demo.appspot.com/"
@@ -66850,7 +66861,7 @@ class Neuroglancer extends React__default.Component {
     this.disposers = [];
     this.prevColorOverrides = /* @__PURE__ */ new Set();
     this.overrideColorsById = /* @__PURE__ */ Object.create(null);
-    this.allKnownIds = /* @__PURE__ */ new Set();
+    this.allKnownIdsByLayer = {};
   }
   minimalPoseSnapshot = () => {
     const v = this.viewer;
@@ -66897,21 +66908,24 @@ class Neuroglancer extends React__default.Component {
     return JSON.stringify(prevLayers) !== JSON.stringify(nextLayers);
   };
   /* To add colors to the segments, turning unselected to grey  */
-  applyColorsAndVisibility = (cellColorMapping) => {
+  applyColorsAndVisibility = (cellColorMappingByLayer) => {
     if (!this.viewer) return;
-    const selected = { ...cellColorMapping || {} };
-    for (const id of Object.keys(selected)) this.allKnownIds.add(id);
-    if (this.allKnownIds.size === 0) {
-      const init = this.props.viewerState?.layers?.[0]?.segmentColors || {};
-      for (const id of Object.keys(init)) this.allKnownIds.add(id);
-    }
-    const fullSegmentColors = {};
-    for (const id of this.allKnownIds) {
-      fullSegmentColors[id] = selected[id] || GREY_HEX;
-    }
     const baseLayers = this.props.viewerState?.layers ?? (this.viewer.state.toJSON().layers || []);
-    const newLayers = baseLayers.map((layer, idx) => {
-      if (idx === 0 || layer?.type === "segmentation") {
+    const newLayers = baseLayers.map((layer) => {
+      const layerScope = Object.keys(cellColorMappingByLayer).find((scope) => layer.name?.includes(scope));
+      const selected = { ...cellColorMappingByLayer[layerScope]?.colors || {} };
+      if (!this.allKnownIdsByLayer) this.allKnownIdsByLayer = {};
+      if (!this.allKnownIdsByLayer[layerScope]) {
+        this.allKnownIdsByLayer[layerScope] = /* @__PURE__ */ new Set();
+      }
+      for (const id of Object.keys(selected)) {
+        this.allKnownIdsByLayer[layerScope].add(id);
+      }
+      const fullSegmentColors = {};
+      for (const id of this.allKnownIdsByLayer[layerScope] || []) {
+        fullSegmentColors[id] = selected[id] || GREY_HEX;
+      }
+      if (layer.type === "segmentation") {
         return { ...layer, segmentColors: fullSegmentColors };
       }
       return layer;
@@ -66960,9 +66974,39 @@ class Neuroglancer extends React__default.Component {
     } else {
       viewerNoKey = this.viewer;
     }
+    const { visibleChunksChanged } = this.viewer.chunkQueueManager;
+    let firstChunkLoaded = false;
+    this.disposers.push(visibleChunksChanged.add(() => {
+      if (!firstChunkLoaded) {
+        for (const layer of this.viewer.layerManager.managedLayers) {
+          if (layer.layer instanceof SegmentationUserLayer) {
+            const hasVisibleChunk = layer.layer.renderLayers?.some((rl) => {
+              const {
+                numVisibleChunksAvailable,
+                numVisibleChunksNeeded
+              } = rl.layerChunkProgressInfo || {};
+              if (!numVisibleChunksNeeded || !numVisibleChunksAvailable) return false;
+              return numVisibleChunksAvailable / numVisibleChunksNeeded > 0.25;
+            });
+            if (hasVisibleChunk) {
+              firstChunkLoaded = true;
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  this.props.onLayerLoadingChange?.(true);
+                });
+              });
+              return;
+            }
+          }
+        }
+      }
+    }));
+    this.disposers.push(() => {
+      firstChunkLoaded = false;
+    });
   }
   componentDidUpdate(prevProps, prevState) {
-    const { viewerState, cellColorMapping } = this.props;
+    const { viewerState, cellColorMapping: cellColorMappingByLayer } = this.props;
     const selectedSegments = {};
     for (const layer of this.viewer.layerManager.managedLayers) {
       if (layer.layer instanceof SegmentationUserLayer) {
@@ -66974,6 +67018,24 @@ class Neuroglancer extends React__default.Component {
       if (layer.layer instanceof SegmentationUserLayer) {
         const { segmentSelectionState } = layer.layer.displayState;
         segmentSelectionState.set(selectedSegments[layer.name]);
+        const layerScope = Object.keys(cellColorMappingByLayer).find(
+          (scope) => layer.name?.includes(scope)
+        );
+        if (layerScope) {
+          const opacity = cellColorMappingByLayer[layerScope]?.opacity ?? 1;
+          layer.layer.displayState.objectAlpha.value = opacity;
+        }
+      }
+      if (layer.layer instanceof AnnotationUserLayer) {
+        const matchingLayer = (viewerState?.layers || []).find(
+          (l) => l.name === layer.name
+        );
+        if (matchingLayer?.shader) {
+          const currentShader = layer.layer.annotationDisplayState.shader.value_;
+          if (currentShader !== matchingLayer.shader) {
+            layer.layer.annotationDisplayState.shader.value = matchingLayer.shader;
+          }
+        }
       }
     }
     if (!viewerState) return;
@@ -66994,22 +67056,22 @@ class Neuroglancer extends React__default.Component {
       this.withoutEmitting(() => {
         const layers = Array.isArray(viewerState.layers) ? viewerState.layers : [];
         this.viewer.state.restoreState({ layers });
-        if (cellColorMapping && Object.keys(cellColorMapping).length) {
-          this.applyColorsAndVisibility(cellColorMapping);
+        if (cellColorMappingByLayer && Object.keys(cellColorMappingByLayer).length) {
+          this.applyColorsAndVisibility(cellColorMappingByLayer);
         }
       });
     }
-    const prevSize = prevProps.cellColorMapping ? Object.keys(prevProps.cellColorMapping).length : 0;
-    const currSize = cellColorMapping ? Object.keys(cellColorMapping).length : 0;
-    const mappingRefChanged = prevProps.cellColorMapping !== cellColorMapping;
+    const prevSize = prevProps.cellColorMapping ? Object.values(prevProps.cellColorMapping).reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
+    const currSize = cellColorMappingByLayer ? Object.values(cellColorMappingByLayer).reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
+    const mappingRefChanged = prevProps.cellColorMapping !== this.props.cellColorMapping;
     if (!this.didLayersChange(prevVS, viewerState) && (mappingRefChanged || prevSize !== currSize)) {
       this.withoutEmitting(() => {
-        this.applyColorsAndVisibility(cellColorMapping);
+        this.applyColorsAndVisibility(cellColorMappingByLayer);
       });
     }
     const stripSegFields = (layers) => (layers || []).map((l) => {
       if (!l) return l;
-      const { segments, segmentColors, ...rest } = l;
+      const { segments, segmentColors, objectAlpha, ...rest } = l;
       return rest;
     });
     const prevLayers = prevProps.viewerState?.layers;