@vitessce/neuroglancer 3.8.1 → 3.8.3

package/dist/{ReactNeuroglancer-DXStdU0p.js → ReactNeuroglancer-CexklRkL.js}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import React__default from "react";
-import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as diffCameraState } from "./index-O9LG3z3b.js";
+import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as diffCameraState } from "./index-CuSU8uy8.js";
 var es6_object_assign = {};
 var _global = { exports: {} };
 var hasRequired_global;

package/dist/{index-O9LG3z3b.js → index-CuSU8uy8.js}

@@ -166,6 +166,9 @@ const FileType$1 = {
   OBS_SEGMENTATIONS_OME_TIFF: "obsSegmentations.ome-tiff",
   // GLB
   OBS_SEGMENTATIONS_GLB: "obsSegmentations.glb",
+  // Neuroglancer
+  // Precomputed (mesh) format
+  OBS_SEGMENTATIONS_NG_PRECOMPUTED: "obsSegmentations.ng-precomputed",
   // New file types to support old file types:
   // - cells.json
   OBS_EMBEDDING_CELLS_JSON: "obsEmbedding.cells.json",
@@ -393,6 +396,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_LABELS_MUDATA_ZARR]: DataType$1.OBS_LABELS,
   [FileType$1.FEATURE_LABELS_MUDATA_ZARR]: DataType$1.FEATURE_LABELS,
   [FileType$1.OBS_SEGMENTATIONS_GLB]: DataType$1.OBS_SEGMENTATIONS,
+  [FileType$1.OBS_SEGMENTATIONS_NG_PRECOMPUTED]: DataType$1.OBS_SEGMENTATIONS,
   [FileType$1.IMAGE_SPATIALDATA_ZARR]: DataType$1.IMAGE,
   [FileType$1.LABELS_SPATIALDATA_ZARR]: DataType$1.OBS_SEGMENTATIONS,
   [FileType$1.SHAPES_SPATIALDATA_ZARR]: DataType$1.OBS_SEGMENTATIONS,
@@ -10436,6 +10440,18 @@ z.object({
   sceneScaleZ: z.number(),
   materialSide: z.enum(["front", "back"])
 }).partial().nullable();
+z.object({
+  // TODO: Should this explicitly specify sharded vs. unsharded?
+  // Or can/should that be inferred from the data?
+  dimensionX: z.number(),
+  dimensionY: z.number(),
+  dimensionZ: z.number(),
+  dimensionUnit: z.enum(["nm", "um", "µm", "mm", "cm", "m"]),
+  // TODO: should the following be passed via coordination types instead?
+  projectionScale: z.number(),
+  position: z.array(z.number()).length(3),
+  projectionOrientation: z.array(z.number()).length(4)
+}).partial().nullable();
 z.object({
   obsIndex: z.string(),
   obsEmbedding: z.array(z.string()).length(2)
@@ -28173,7 +28189,7 @@ function NeuroglancerGlobalStyles(props) {
     }
   ));
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-DXStdU0p.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-CexklRkL.js"));
 function createWorker() {
   return new WorkerFactory();
 }
@@ -28262,6 +28278,118 @@ class NeuroglancerComp extends PureComponent {
     ))));
   }
 }
+const DEFAULT_NG_PROPS = {
+  layout: "3d",
+  position: [0, 0, 0],
+  projectionOrientation: [0, 0, 0, 1],
+  projectionScale: 1024,
+  crossSectionScale: 1
+};
+function toPrecomputedSource(url) {
+  if (!url) {
+    return void 0;
+  }
+  return `precomputed://${url}`;
+}
+const UNIT_TO_NM = {
+  nm: 1,
+  um: 1e3,
+  µm: 1e3,
+  mm: 1e6,
+  cm: 1e7,
+  m: 1e9
+};
+function isInNanometerRange(value, unit, minNm = 1, maxNm = 100) {
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return false;
+  const factor = unit && UNIT_TO_NM[unit];
+  if (!factor) return false;
+  const nm = n * factor;
+  return nm >= minNm && nm <= maxNm;
+}
+function normalizeDimensionsToNanometers(opts) {
+  const { dimensionUnit, dimensionX, dimensionY, dimensionZ } = opts;
+  if (!dimensionUnit || !dimensionX || !dimensionY || !dimensionZ) {
+    console.warn("Missing dimension info");
+  }
+  const xNm = isInNanometerRange(dimensionX, dimensionUnit);
+  const yNm = isInNanometerRange(dimensionY, dimensionUnit);
+  const zNm = isInNanometerRange(dimensionZ, dimensionUnit);
+  if (!xNm || !yNm || !zNm) {
+    console.warn("Dimension was converted to nm units");
+  }
+  return {
+    x: xNm ? [dimensionX, dimensionUnit] : [1, "nm"],
+    y: yNm ? [dimensionY, dimensionUnit] : [1, "nm"],
+    z: zNm ? [dimensionZ, dimensionUnit] : [1, "nm"]
+  };
+}
+function extractDataTypeEntities(loaders, dataset, dataType) {
+  var _a;
+  const datasetEntry = loaders == null ? void 0 : loaders[dataset];
+  const internMap = (_a = datasetEntry == null ? void 0 : datasetEntry.loaders) == null ? void 0 : _a[dataType];
+  if (!internMap || typeof internMap.entries !== "function") return [];
+  return Array.from(internMap.entries()).map(([key, loader]) => {
+    var _a2, _b;
+    const url = (loader == null ? void 0 : loader.url) ?? ((_a2 = loader == null ? void 0 : loader.dataSource) == null ? void 0 : _a2.url) ?? void 0;
+    const fileUid = (key == null ? void 0 : key.fileUid) ?? ((_b = loader == null ? void 0 : loader.coordinationValues) == null ? void 0 : _b.fileUid) ?? void 0;
+    const {
+      position: position2,
+      projectionOrientation,
+      projectionScale,
+      crossSectionScale
+    } = (loader == null ? void 0 : loader.options) ?? {};
+    const isPrecomputed = loader == null ? void 0 : loader.fileType.includes("precomputed");
+    if (!isPrecomputed) {
+      console.warn("Filetype needs to be precomputed");
+    }
+    return {
+      key,
+      type: "segmentation",
+      fileUid,
+      layout: DEFAULT_NG_PROPS.layout,
+      url,
+      source: toPrecomputedSource(url),
+      name: fileUid ?? (key == null ? void 0 : key.name) ?? "segmentation",
+      // For precomputed: nm is the unit used
+      dimensions: normalizeDimensionsToNanometers(loader == null ? void 0 : loader.options),
+      // If not provided, no error, but difficult to see the data
+      position: Array.isArray(position2) && position2.length === 3 ? position2 : DEFAULT_NG_PROPS.position,
+      // If not provided, will have a default orientation
+      projectionOrientation: Array.isArray(projectionOrientation) && projectionOrientation.length === 4 ? projectionOrientation : DEFAULT_NG_PROPS.projectionOrientation,
+      projectionScale: Number.isFinite(projectionScale) ? projectionScale : DEFAULT_NG_PROPS.projectionScale,
+      crossSectionScale: Number.isFinite(crossSectionScale) ? crossSectionScale : DEFAULT_NG_PROPS.crossSectionScale
+    };
+  });
+}
+function useExtractOptionsForNg(loaders, dataset, dataType) {
+  const extractedEntities = useMemo(
+    () => extractDataTypeEntities(loaders, dataset, dataType),
+    [loaders, dataset, dataType]
+  );
+  const layers = useMemo(() => extractedEntities.filter((t) => t.source).map((t) => ({
+    type: t.type,
+    source: t.source,
+    segments: [],
+    name: t.name || "segmentation"
+  })), [extractedEntities]);
+  const viewerState = useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    return {
+      dimensions: (_a = extractedEntities[0]) == null ? void 0 : _a.dimensions,
+      position: (_b = extractedEntities[0]) == null ? void 0 : _b.position,
+      crossSectionScale: (_c = extractedEntities[0]) == null ? void 0 : _c.crossSectionScale,
+      projectionOrientation: (_d = extractedEntities[0]) == null ? void 0 : _d.projectionOrientation,
+      projectionScale: (_e = extractedEntities[0]) == null ? void 0 : _e.projectionScale,
+      layers,
+      layout: extractedEntities[0].layout
+    };
+  });
+  return [viewerState];
+}
+function useNeuroglancerViewerState(loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
+  return useExtractOptionsForNg(loaders, dataset, DataType$1.OBS_SEGMENTATIONS);
+}
 /**
  * @license
  * Copyright 2010-2023 Three.js Authors
@@ -30060,10 +30188,6 @@ const multiplyQuat = (a, b) => {
 const conjQuat = (q) => [-q[0], -q[1], -q[2], q[3]];
 const rad2deg = (r) => r * 180 / Math.PI;
 const deg2rad = (d) => d * Math.PI / 180;
-function isValidState(viewerState) {
-  const { projectionScale, projectionOrientation, position: position2, dimensions } = viewerState || {};
-  return dimensions !== void 0 && typeof projectionScale === "number" && Array.isArray(projectionOrientation) && projectionOrientation.length === 4 && Array.isArray(position2) && position2.length === 3;
-}
 function valueGreaterThanEpsilon(a, b, epsilon) {
   if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
     return a.some((val, i) => Math.abs(val - b[i]) > epsilon);
@@ -30075,7 +30199,6 @@ function valueGreaterThanEpsilon(a, b, epsilon) {
 }
 const nearEq = (a, b, epsilon) => Number.isFinite(a) && Number.isFinite(b) ? Math.abs(a - b) <= epsilon : a === b;
 function diffCameraState(prev2, next2) {
-  if (!isValidState(next2)) return { changed: false, scale: false, pos: false, rot: false };
   const eps = EPSILON_KEYS_MAPPING_NG;
   const scale = valueGreaterThanEpsilon(
     prev2 == null ? void 0 : prev2.projectionScale,
@@ -30137,8 +30260,7 @@ function NeuroglancerSubscriber(props) {
     removeGridComponent,
     theme,
     title = "Neuroglancer",
-    helpText = ViewHelpMapping.NEUROGLANCER,
-    viewerState: initialViewerState
+    helpText = ViewHelpMapping.NEUROGLANCER
   } = props;
   const loaders = useLoaders();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
@@ -30171,8 +30293,6 @@ function NeuroglancerSubscriber(props) {
     setSpatialRotationOrbit: setRotationOrbit,
     setSpatialZoom: setZoom
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.NEUROGLANCER], coordinationScopes);
-  const latestViewerStateRef = useRef(initialViewerState);
-  const initialRotationPushedRef = useRef(false);
   const { classes } = useStyles();
   const [{ obsSets: cellSets }] = useObsSetsData(
     loaders,
@@ -30190,6 +30310,12 @@ function NeuroglancerSubscriber(props) {
     {},
     { obsType, embeddingType: mapping }
   );
+  const [initalViewerState] = useNeuroglancerViewerState(
+    loaders,
+    dataset
+  );
+  const latestViewerStateRef = useRef(initalViewerState);
+  const initialRotationPushedRef = useRef(false);
   const ngRotPushAtRef = useRef(0);
   const lastInteractionSource = useRef(null);
   const applyNgUpdateTimeoutRef = useRef(null);
@@ -30238,7 +30364,7 @@ function NeuroglancerSubscriber(props) {
       if (!Number.isFinite(projectionScale) || projectionScale <= 0) return;
       const zRef = Number.isFinite(spatialZoom) ? spatialZoom : 0;
       initialRenderCalibratorRef.current = makeVitNgZoomCalibrator(projectionScale, zRef);
-      const [px = 0, py = 0, pz = 0] = Array.isArray(position2) ? position2 : [0, 0, 0];
+      const [px = 0, py = 0, pz = 0] = position2;
       const tX = Number.isFinite(spatialTargetX) ? spatialTargetX : 0;
       const tY = Number.isFinite(spatialTargetY) ? spatialTargetY : 0;
       translationOffsetRef.current = [px - tX, py - tY, pz];

package/dist/index.js

@@ -1,4 +1,4 @@
-import { N } from "./index-O9LG3z3b.js";
+import { N } from "./index-CuSU8uy8.js";
 export {
   N as NeuroglancerSubscriber
 };

package/dist-tsc/NeuroglancerSubscriber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAiDA,gEA2dC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAkDA,gEAgeC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -5,6 +5,7 @@ import { TitleInfo, useCoordination, useObsSetsData, useLoaders, useObsEmbedding
 import { ViewHelpMapping, ViewType, COMPONENT_COORDINATION_TYPES, } from '@vitessce/constants-internal';
 import { mergeObsSets, getCellColors, setObsSelection } from '@vitessce/sets-utils';
 import { NeuroglancerComp } from './Neuroglancer.js';
+import { useNeuroglancerViewerState } from './data-hook-ng-utils.js';
 import { useStyles } from './styles.js';
 import { quaternionToEuler, eulerToQuaternion, valueGreaterThanEpsilon, nearEq, makeVitNgZoomCalibrator, conjQuat, multiplyQuat, rad2deg, deg2rad, Q_Y_UP, } from './utils.js';
 const VITESSCE_INTERACTION_DELAY = 50;
@@ -23,7 +24,7 @@ function rgbToHex(rgb) {
         : `#${rgb.map(c => c.toString(16).padStart(2, '0')).join('')}`);
 }
 export function NeuroglancerSubscriber(props) {
-    const { coordinationScopes: coordinationScopesRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Neuroglancer', helpText = ViewHelpMapping.NEUROGLANCER, viewerState: initialViewerState, } = props;
+    const { coordinationScopes: coordinationScopesRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Neuroglancer', helpText = ViewHelpMapping.NEUROGLANCER, } = props;
     const loaders = useLoaders();
     const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
     const [{ dataset, obsType, spatialZoom, spatialTargetX, spatialTargetY, spatialRotationX, spatialRotationY, spatialRotationZ, spatialRotationOrbit, 
@@ -32,12 +33,13 @@ export function NeuroglancerSubscriber(props) {
     // setSpatialRotationY: setRotationY,
     // setSpatialRotationZ: setRotationZ,
     setSpatialRotationOrbit: setRotationOrbit, setSpatialZoom: setZoom, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.NEUROGLANCER], coordinationScopes);
-    const latestViewerStateRef = useRef(initialViewerState);
-    const initialRotationPushedRef = useRef(false);
     // console.log("NG Subs Render orbit", spatialRotationX, spatialRotationY, spatialRotationOrbit);
     const { classes } = useStyles();
     const [{ obsSets: cellSets }] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { cellSetSelection, obsSetColor: cellSetColor }, { obsType });
     const [{ obsIndex }] = useObsEmbeddingData(loaders, dataset, true, {}, {}, { obsType, embeddingType: mapping });
+    const [initalViewerState] = useNeuroglancerViewerState(loaders, dataset, false, undefined, undefined, { obsType: 'cell' });
+    const latestViewerStateRef = useRef(initalViewerState);
+    const initialRotationPushedRef = useRef(false);
     const ngRotPushAtRef = useRef(0);
     const lastInteractionSource = useRef(null);
     const applyNgUpdateTimeoutRef = useRef(null);
@@ -88,7 +90,7 @@ export function NeuroglancerSubscriber(props) {
             // anchor to current Vitessce zoom
             const zRef = Number.isFinite(spatialZoom) ? spatialZoom : 0;
             initialRenderCalibratorRef.current = makeVitNgZoomCalibrator(projectionScale, zRef);
-            const [px = 0, py = 0, pz = 0] = Array.isArray(position) ? position : [0, 0, 0];
+            const [px = 0, py = 0, pz = 0] = position;
             const tX = Number.isFinite(spatialTargetX) ? spatialTargetX : 0;
             const tY = Number.isFinite(spatialTargetY) ? spatialTargetY : 0;
             // TODO: translation off in the first render - turn pz to 0 if z-axis needs to be avoided

package/dist-tsc/data-hook-ng-utils.d.ts

@@ -0,0 +1,40 @@
+export function extractDataTypeEntities(loaders: any, dataset: any, dataType: any): {
+    key: any;
+    type: string;
+    fileUid: any;
+    layout: string;
+    url: any;
+    source: string | undefined;
+    name: any;
+    dimensions: {
+        x: [number, "nm"];
+        y: [number, "nm"];
+        z: [number, "nm"];
+    };
+    position: any[];
+    projectionOrientation: any[];
+    projectionScale: any;
+    crossSectionScale: any;
+}[];
+export function useExtractOptionsForNg(loaders: any, dataset: any, dataType: any): any[];
+/**
+ * Get the parameters for NG's viewerstate.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @returns {array} [viewerstate] where
+ * viewerState is an object. ref=> (https://neuroglancer-docs.web.app/json/api/index.html#json-Layer.name).
+ */
+/**
+ * @returns [viewerState]
+ */
+export function useNeuroglancerViewerState(loaders: any, dataset: any, isRequired: any, coordinationSetters: any, initialCoordinationValues: any, matchOn: any): any[];
+export namespace DEFAULT_NG_PROPS {
+    let layout: string;
+    let position: number[];
+    let projectionOrientation: number[];
+    let projectionScale: number;
+    let crossSectionScale: number;
+}
+//# sourceMappingURL=data-hook-ng-utils.d.ts.map

package/dist-tsc/data-hook-ng-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-hook-ng-utils.d.ts","sourceRoot":"","sources":["../src/data-hook-ng-utils.js"],"names":[],"mappings":"AAgEA;;;;;;;;;WArBmB,CAAC,MAAM,EAAC,IAAI,CAAC;WAAI,CAAC,MAAM,EAAC,IAAI,CAAC;WAAI,CAAC,MAAM,EAAC,IAAI,CAAC;;;;;;IA6DjE;AAED,yFAyBC;AAGD;;;;;;;;GAQG;AACH;;GAEG;AACH,uKAKC"}

package/dist-tsc/data-hook-ng-utils.js

@@ -0,0 +1,130 @@
+import { useMemo } from 'react';
+import { DataType } from '@vitessce/constants-internal';
+export const DEFAULT_NG_PROPS = {
+    layout: '3d',
+    position: [0, 0, 0],
+    projectionOrientation: [0, 0, 0, 1],
+    projectionScale: 1024,
+    crossSectionScale: 1,
+};
+function toPrecomputedSource(url) {
+    if (!url) {
+        return undefined;
+    }
+    return `precomputed://${url}`;
+}
+const UNIT_TO_NM = {
+    nm: 1,
+    um: 1e3,
+    µm: 1e3,
+    mm: 1e6,
+    cm: 1e7,
+    m: 1e9,
+};
+function isInNanometerRange(value, unit, minNm = 1, maxNm = 100) {
+    const n = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(n))
+        return false;
+    const factor = unit && UNIT_TO_NM[unit];
+    if (!factor)
+        return false;
+    const nm = n * factor;
+    return nm >= minNm && nm <= maxNm;
+}
+/**
+   * Normalize dimensionX/Y/Z to nanometers.
+   * @param {object} opts
+   * @returns {{ x:[number,'nm'], y:[number,'nm'], z:[number,'nm'] }}
+   */
+function normalizeDimensionsToNanometers(opts) {
+    const { dimensionUnit, dimensionX, dimensionY, dimensionZ } = opts;
+    if (!dimensionUnit || !dimensionX || !dimensionY || !dimensionZ) {
+        console.warn('Missing dimension info');
+    }
+    const xNm = isInNanometerRange(dimensionX, dimensionUnit);
+    const yNm = isInNanometerRange(dimensionY, dimensionUnit);
+    const zNm = isInNanometerRange(dimensionZ, dimensionUnit);
+    if (!xNm || !yNm || !zNm) {
+        console.warn('Dimension was converted to nm units');
+    }
+    return {
+        x: xNm ? [dimensionX, dimensionUnit] : [1, 'nm'],
+        y: yNm ? [dimensionY, dimensionUnit] : [1, 'nm'],
+        z: zNm ? [dimensionZ, dimensionUnit] : [1, 'nm'],
+    };
+}
+export function extractDataTypeEntities(loaders, dataset, dataType) {
+    const datasetEntry = loaders?.[dataset];
+    const internMap = datasetEntry?.loaders?.[dataType];
+    if (!internMap || typeof internMap.entries !== 'function')
+        return [];
+    return Array.from(internMap.entries()).map(([key, loader]) => {
+        const url = loader?.url ?? loader?.dataSource?.url ?? undefined;
+        const fileUid = key?.fileUid
+            ?? loader?.coordinationValues?.fileUid
+            ?? undefined;
+        const { position, projectionOrientation, projectionScale, crossSectionScale } = loader?.options ?? {};
+        const isPrecomputed = loader?.fileType.includes('precomputed');
+        if (!isPrecomputed) {
+            console.warn('Filetype needs to be precomputed');
+        }
+        return {
+            key,
+            type: 'segmentation',
+            fileUid,
+            layout: DEFAULT_NG_PROPS.layout,
+            url,
+            source: toPrecomputedSource(url),
+            name: fileUid ?? key?.name ?? 'segmentation',
+            // For precomputed: nm is the unit used
+            dimensions: normalizeDimensionsToNanometers(loader?.options),
+            // If not provided, no error, but difficult to see the data
+            position: Array.isArray(position) && position.length === 3
+                ? position : DEFAULT_NG_PROPS.position,
+            // If not provided, will have a default orientation
+            projectionOrientation: Array.isArray(projectionOrientation)
+                && projectionOrientation.length === 4
+                ? projectionOrientation : DEFAULT_NG_PROPS.projectionOrientation,
+            projectionScale: Number.isFinite(projectionScale)
+                ? projectionScale : DEFAULT_NG_PROPS.projectionScale,
+            crossSectionScale: Number.isFinite(crossSectionScale)
+                ? crossSectionScale : DEFAULT_NG_PROPS.crossSectionScale,
+        };
+    });
+}
+export function useExtractOptionsForNg(loaders, dataset, dataType) {
+    const extractedEntities = useMemo(() => extractDataTypeEntities(loaders, dataset, dataType), [loaders, dataset, dataType]);
+    const layers = useMemo(() => extractedEntities
+        .filter(t => t.source)
+        .map(t => ({
+        type: t.type,
+        source: t.source,
+        segments: [],
+        name: t.name || 'segmentation',
+    })), [extractedEntities]);
+    const viewerState = useMemo(() => ({
+        dimensions: extractedEntities[0]?.dimensions,
+        position: extractedEntities[0]?.position,
+        crossSectionScale: extractedEntities[0]?.crossSectionScale,
+        projectionOrientation: extractedEntities[0]?.projectionOrientation,
+        projectionScale: extractedEntities[0]?.projectionScale,
+        layers,
+        layout: extractedEntities[0].layout,
+    }));
+    return [viewerState];
+}
+/**
+ * Get the parameters for NG's viewerstate.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @returns {array} [viewerstate] where
+ * viewerState is an object. ref=> (https://neuroglancer-docs.web.app/json/api/index.html#json-Layer.name).
+ */
+/**
+ * @returns [viewerState]
+ */
+export function useNeuroglancerViewerState(loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
+    return useExtractOptionsForNg(loaders, dataset, DataType.OBS_SEGMENTATIONS, matchOn);
+}

package/dist-tsc/data-hook-ng-utils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data-hook-ng-utils.test.d.ts.map

package/dist-tsc/data-hook-ng-utils.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-hook-ng-utils.test.d.ts","sourceRoot":"","sources":["../src/data-hook-ng-utils.test.js"],"names":[],"mappings":""}

package/dist-tsc/data-hook-ng-utils.test.js

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { extractDataTypeEntities, DEFAULT_NG_PROPS, } from './data-hook-ng-utils.js';
+describe('extractDataTypeEntities (minimal tests)', () => {
+    it('returns empty array when internMap is missing or invalid', () => {
+        expect(extractDataTypeEntities({}, 'A', 'obsSegmentations')).toEqual([]);
+        expect(extractDataTypeEntities({ A: { loaders: {} } }, 'A', 'obsSegmentations')).toEqual([]);
+        expect(extractDataTypeEntities({ A: { loaders: { obsSegmentations: {} } } }, 'A', 'obsSegmentations')).toEqual([]);
+    });
+    it('builds an entity for a precomputed loader and applies sane defaults', () => {
+        const key = { fileUid: 'melanoma-meshes' };
+        const loader = {
+            fileType: 'obsSegmentations.ng-precomputed',
+            url: 'https://www.example.com/example/example_meshes',
+            options: { projectionScale: 2048 },
+        };
+        const internMap = new Map([[key, loader]]);
+        const loaders = { A: { loaders: { obsSegmentations: internMap } } };
+        const out = extractDataTypeEntities(loaders, 'A', 'obsSegmentations');
+        expect(out).toHaveLength(1);
+        const e = out[0];
+        expect(e.key).toBe(key);
+        expect(e.type).toBe('segmentation');
+        expect(e.fileUid).toBe('melanoma-meshes');
+        expect(e.layout).toBe(DEFAULT_NG_PROPS.layout);
+        // URL + source prefixing
+        expect(e.url).toBe(loader.url);
+        expect(e.source).toBe('precomputed://https://www.example.com/example/example_meshes');
+        expect(e.dimensions).toEqual({ x: [1, 'nm'], y: [1, 'nm'], z: [1, 'nm'] });
+        // camera defaults + single override
+        expect(e.position).toEqual(DEFAULT_NG_PROPS.position);
+        expect(e.projectionOrientation).toEqual(DEFAULT_NG_PROPS.projectionOrientation);
+        expect(e.projectionScale).toBe(2048);
+        expect(e.crossSectionScale).toBe(DEFAULT_NG_PROPS.crossSectionScale);
+    });
+});

package/dist-tsc/utils.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Is this a valid viewerState object?
+ * @param {object} viewerState
+ * @returns {boolean}
+ */
 /**
  * Returns true if the difference is greater than the epsilon for that key.
  * @param {array | number} a Previous viewerState key, i.e., position.

package/dist-tsc/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AA8DA;;;;;GAKG;AAEH,2CALW,KAAK,GAAG,MAAM,KACd,KAAK,GAAG,MAAM,qCAYxB;AAMD;;;;;GAKG;AAEH,gDALW,MAAM,aACN,MAAM,WAYhB;AAID;;;;;EAgBC;AAID,6EAUC;AAID,8EAIC;AAID;;;;EAWC;;;;;;AA3ID,mCAAoC;AAEpC,8BAAmC;AAG5B,uDASN;AAEM,wCAAmD;AAGnD,mDAA4F;AAG5F,wCAAsC;AACtC,wCAAsC;AAwCtC,8DAEN"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AA6CA;;;;GAIG;AAcH;;;;;GAKG;AAEH,2CALW,KAAK,GAAG,MAAM,KACd,KAAK,GAAG,MAAM,qCAYxB;AAMD;;;;;GAKG;AAEH,gDALW,MAAM,aACN,MAAM,WAYhB;AAID;;;;;EAgBC;AAID,6EAUC;AAID,8EAIC;AAID;;;;EAWC;;;;;;AA5ID,mCAAoC;AAEpC,8BAAmC;AAG5B,uDASN;AAEM,wCAAmD;AAGnD,mDAA4F;AAG5F,wCAAsC;AACtC,wCAAsC;AAyCtC,8DAEN"}

package/dist-tsc/utils.js

@@ -33,15 +33,18 @@ export const deg2rad = d => d * Math.PI / 180;
  * @param {object} viewerState
  * @returns {boolean}
  */
-function isValidState(viewerState) {
-    const { projectionScale, projectionOrientation, position, dimensions } = viewerState || {};
-    return (dimensions !== undefined
-        && typeof projectionScale === 'number'
-        && Array.isArray(projectionOrientation)
-        && projectionOrientation.length === 4
-        && Array.isArray(position)
-        && position.length === 3);
-}
+// function isValidState(viewerState) {
+//   const { projectionScale, projectionOrientation, position, dimensions } = viewerState || {};
+//   console.log ("valid", projectionScale, projectionOrientation, position, dimensions)
+//   return (
+//     dimensions !== undefined
+//       && typeof projectionScale === 'number'
+//       && Array.isArray(projectionOrientation)
+//       && projectionOrientation.length === 4
+//       && Array.isArray(position)
+//       && position.length === 3
+//   );
+// }
 /**
  * Returns true if the difference is greater than the epsilon for that key.
  * @param {array | number} a Previous viewerState key, i.e., position.
@@ -65,16 +68,14 @@ export const nearEq = (a, b, epsilon) => (Number.isFinite(a) && Number.isFinite(
  * @returns {Boolean} True if any key has changed
  */
 export function didCameraStateChange(prevState, nextState) {
-    if (!isValidState(nextState))
-        return false;
+    // if (!isValidState(nextState)) return false;
     return Object.entries(EPSILON_KEYS_MAPPING_NG)
         .some(([key, eps]) => valueGreaterThanEpsilon(prevState?.[key], nextState?.[key], eps));
 }
 // To see if any and which cameraState has changed
 // adjust for coupled zoom+position changes
 export function diffCameraState(prev, next) {
-    if (!isValidState(next))
-        return { changed: false, scale: false, pos: false, rot: false };
+    // if (!isValidState(next)) return { changed: false, scale: false, pos: false, rot: false };
     const eps = EPSILON_KEYS_MAPPING_NG;
     const scale = valueGreaterThanEpsilon(prev?.projectionScale, next?.projectionScale, eps.projectionScale);
     const posHard = valueGreaterThanEpsilon(prev?.position, next?.position, eps.position);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,13 +20,13 @@
     "lodash-es": "^4.17.21",
     "three": "^0.154.0",
     "react": "18.3.1",
-    "@vitessce/neuroglancer-workers": "3.8.1",
-    "@vitessce/styles": "3.8.1",
-    "@vitessce/constants-internal": "3.8.1",
-    "@vitessce/vit-s": "3.8.1",
-    "@vitessce/sets-utils": "3.8.1",
-    "@vitessce/tooltip": "3.8.1",
-    "@vitessce/utils": "3.8.1"
+    "@vitessce/neuroglancer-workers": "3.8.3",
+    "@vitessce/styles": "3.8.3",
+    "@vitessce/constants-internal": "3.8.3",
+    "@vitessce/vit-s": "3.8.3",
+    "@vitessce/sets-utils": "3.8.3",
+    "@vitessce/utils": "3.8.3",
+    "@vitessce/tooltip": "3.8.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/NeuroglancerSubscriber.js

@@ -15,6 +15,7 @@ import {
 } from '@vitessce/constants-internal';
 import { mergeObsSets, getCellColors, setObsSelection } from '@vitessce/sets-utils';
 import { NeuroglancerComp } from './Neuroglancer.js';
+import { useNeuroglancerViewerState } from './data-hook-ng-utils.js';
 import { useStyles } from './styles.js';
 import {
   quaternionToEuler,
@@ -56,7 +57,6 @@ export function NeuroglancerSubscriber(props) {
     theme,
     title = 'Neuroglancer',
     helpText = ViewHelpMapping.NEUROGLANCER,
-    viewerState: initialViewerState,
   } = props;
 
   const loaders = useLoaders();
@@ -93,9 +93,6 @@ export function NeuroglancerSubscriber(props) {
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.NEUROGLANCER], coordinationScopes);
 
 
-  const latestViewerStateRef = useRef(initialViewerState);
-  const initialRotationPushedRef = useRef(false);
-
   // console.log("NG Subs Render orbit", spatialRotationX, spatialRotationY, spatialRotationOrbit);
 
   const { classes } = useStyles();
@@ -112,6 +109,15 @@ export function NeuroglancerSubscriber(props) {
     { obsType, embeddingType: mapping },
   );
 
+  const [initalViewerState] = useNeuroglancerViewerState(
+    loaders, dataset, false,
+    undefined, undefined,
+    { obsType: 'cell' },
+  );
+
+  const latestViewerStateRef = useRef(initalViewerState);
+  const initialRotationPushedRef = useRef(false);
+
   const ngRotPushAtRef = useRef(0);
   const lastInteractionSource = useRef(null);
   const applyNgUpdateTimeoutRef = useRef(null);
@@ -170,7 +176,7 @@ export function NeuroglancerSubscriber(props) {
       const zRef = Number.isFinite(spatialZoom) ? spatialZoom : 0;
       initialRenderCalibratorRef.current = makeVitNgZoomCalibrator(projectionScale, zRef);
 
-      const [px = 0, py = 0, pz = 0] = Array.isArray(position) ? position : [0, 0, 0];
+      const [px = 0, py = 0, pz = 0] = position;
       const tX = Number.isFinite(spatialTargetX) ? spatialTargetX : 0;
       const tY = Number.isFinite(spatialTargetY) ? spatialTargetY : 0;
       // TODO: translation off in the first render - turn pz to 0 if z-axis needs to be avoided

package/src/data-hook-ng-utils.js

@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+import { DataType } from '@vitessce/constants-internal';
+
+
+export const DEFAULT_NG_PROPS = {
+  layout: '3d',
+  position: [0, 0, 0],
+  projectionOrientation: [0, 0, 0, 1],
+  projectionScale: 1024,
+  crossSectionScale: 1,
+};
+
+function toPrecomputedSource(url) {
+  if (!url) {
+    return undefined;
+  }
+  return `precomputed://${url}`;
+}
+
+const UNIT_TO_NM = {
+  nm: 1,
+  um: 1e3,
+  µm: 1e3,
+  mm: 1e6,
+  cm: 1e7,
+  m: 1e9,
+};
+
+
+function isInNanometerRange(value, unit, minNm = 1, maxNm = 100) {
+  const n = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(n)) return false;
+
+  const factor = unit && UNIT_TO_NM[unit];
+  if (!factor) return false;
+
+  const nm = n * factor;
+  return nm >= minNm && nm <= maxNm;
+}
+
+/**
+   * Normalize dimensionX/Y/Z to nanometers.
+   * @param {object} opts
+   * @returns {{ x:[number,'nm'], y:[number,'nm'], z:[number,'nm'] }}
+   */
+function normalizeDimensionsToNanometers(opts) {
+  const { dimensionUnit, dimensionX, dimensionY, dimensionZ } = opts;
+
+  if (!dimensionUnit || !dimensionX || !dimensionY || !dimensionZ) {
+    console.warn('Missing dimension info');
+  }
+  const xNm = isInNanometerRange(dimensionX, dimensionUnit);
+  const yNm = isInNanometerRange(dimensionY, dimensionUnit);
+  const zNm = isInNanometerRange(dimensionZ, dimensionUnit);
+  if (!xNm || !yNm || !zNm) {
+    console.warn('Dimension was converted to nm units');
+  }
+  return {
+    x: xNm ? [dimensionX, dimensionUnit] : [1, 'nm'],
+    y: yNm ? [dimensionY, dimensionUnit] : [1, 'nm'],
+    z: zNm ? [dimensionZ, dimensionUnit] : [1, 'nm'],
+  };
+}
+
+export function extractDataTypeEntities(loaders, dataset, dataType) {
+  const datasetEntry = loaders?.[dataset];
+  const internMap = datasetEntry?.loaders?.[dataType];
+  if (!internMap || typeof internMap.entries !== 'function') return [];
+
+  return Array.from(internMap.entries()).map(([key, loader]) => {
+    const url = loader?.url ?? loader?.dataSource?.url ?? undefined;
+    const fileUid = key?.fileUid
+        ?? loader?.coordinationValues?.fileUid
+        ?? undefined;
+
+    const { position, projectionOrientation,
+      projectionScale, crossSectionScale } = loader?.options ?? {};
+    const isPrecomputed = loader?.fileType.includes('precomputed');
+    if (!isPrecomputed) {
+      console.warn('Filetype needs to be precomputed');
+    }
+    return {
+      key,
+      type: 'segmentation',
+      fileUid,
+      layout: DEFAULT_NG_PROPS.layout,
+      url,
+      source: toPrecomputedSource(url),
+      name: fileUid ?? key?.name ?? 'segmentation',
+      // For precomputed: nm is the unit used
+      dimensions: normalizeDimensionsToNanometers(loader?.options),
+      // If not provided, no error, but difficult to see the data
+      position: Array.isArray(position) && position.length === 3
+        ? position : DEFAULT_NG_PROPS.position,
+      // If not provided, will have a default orientation
+      projectionOrientation: Array.isArray(projectionOrientation)
+          && projectionOrientation.length === 4
+        ? projectionOrientation : DEFAULT_NG_PROPS.projectionOrientation,
+      projectionScale: Number.isFinite(projectionScale)
+        ? projectionScale : DEFAULT_NG_PROPS.projectionScale,
+      crossSectionScale: Number.isFinite(crossSectionScale)
+        ? crossSectionScale : DEFAULT_NG_PROPS.crossSectionScale,
+    };
+  });
+}
+
+export function useExtractOptionsForNg(loaders, dataset, dataType) {
+  const extractedEntities = useMemo(
+    () => extractDataTypeEntities(loaders, dataset, dataType),
+    [loaders, dataset, dataType],
+  );
+  const layers = useMemo(() => extractedEntities
+    .filter(t => t.source)
+    .map(t => ({
+      type: t.type,
+      source: t.source,
+      segments: [],
+      name: t.name || 'segmentation',
+    })), [extractedEntities]);
+
+  const viewerState = useMemo(() => ({
+    dimensions: extractedEntities[0]?.dimensions,
+    position: extractedEntities[0]?.position,
+    crossSectionScale: extractedEntities[0]?.crossSectionScale,
+    projectionOrientation: extractedEntities[0]?.projectionOrientation,
+    projectionScale: extractedEntities[0]?.projectionScale,
+    layers,
+    layout: extractedEntities[0].layout,
+  }));
+
+  return [viewerState];
+}
+
+
+/**
+ * Get the parameters for NG's viewerstate.
+ * @param {object} loaders The object mapping
+ * datasets and data types to loader instances.
+ * @param {string} dataset The key for a dataset,
+ * used to identify which loader to use.
+ * @returns {array} [viewerstate] where
+ * viewerState is an object. ref=> (https://neuroglancer-docs.web.app/json/api/index.html#json-Layer.name).
+ */
+/**
+ * @returns [viewerState]
+ */
+export function useNeuroglancerViewerState(
+  loaders, dataset, isRequired,
+  coordinationSetters, initialCoordinationValues, matchOn,
+) {
+  return useExtractOptionsForNg(loaders, dataset, DataType.OBS_SEGMENTATIONS, matchOn);
+}

package/src/data-hook-ng-utils.test.js

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+
+import {
+  extractDataTypeEntities,
+  DEFAULT_NG_PROPS,
+} from './data-hook-ng-utils.js';
+
+describe('extractDataTypeEntities (minimal tests)', () => {
+  it('returns empty array when internMap is missing or invalid', () => {
+    expect(extractDataTypeEntities({}, 'A', 'obsSegmentations')).toEqual([]);
+
+    expect(
+      extractDataTypeEntities({ A: { loaders: {} } }, 'A', 'obsSegmentations'),
+    ).toEqual([]);
+
+    expect(
+      extractDataTypeEntities({ A: { loaders: { obsSegmentations: {} } } }, 'A', 'obsSegmentations'),
+    ).toEqual([]);
+  });
+
+  it('builds an entity for a precomputed loader and applies sane defaults', () => {
+    const key = { fileUid: 'melanoma-meshes' };
+    const loader = {
+      fileType: 'obsSegmentations.ng-precomputed',
+      url: 'https://www.example.com/example/example_meshes',
+      options: { projectionScale: 2048 },
+    };
+    const internMap = new Map([[key, loader]]);
+    const loaders = { A: { loaders: { obsSegmentations: internMap } } };
+
+    const out = extractDataTypeEntities(loaders, 'A', 'obsSegmentations');
+    expect(out).toHaveLength(1);
+
+    const e = out[0];
+    expect(e.key).toBe(key);
+    expect(e.type).toBe('segmentation');
+    expect(e.fileUid).toBe('melanoma-meshes');
+    expect(e.layout).toBe(DEFAULT_NG_PROPS.layout);
+
+    // URL + source prefixing
+    expect(e.url).toBe(loader.url);
+    expect(e.source).toBe('precomputed://https://www.example.com/example/example_meshes');
+
+    expect(e.dimensions).toEqual({ x: [1, 'nm'], y: [1, 'nm'], z: [1, 'nm'] });
+
+    // camera defaults + single override
+    expect(e.position).toEqual(DEFAULT_NG_PROPS.position);
+    expect(e.projectionOrientation).toEqual(DEFAULT_NG_PROPS.projectionOrientation);
+    expect(e.projectionScale).toBe(2048);
+    expect(e.crossSectionScale).toBe(DEFAULT_NG_PROPS.crossSectionScale);
+  });
+});

package/src/utils.js

@@ -48,17 +48,18 @@ export const deg2rad = d => d * Math.PI / 180;
  * @param {object} viewerState
  * @returns {boolean}
  */
-function isValidState(viewerState) {
-  const { projectionScale, projectionOrientation, position, dimensions } = viewerState || {};
-  return (
-    dimensions !== undefined
-      && typeof projectionScale === 'number'
-      && Array.isArray(projectionOrientation)
-      && projectionOrientation.length === 4
-      && Array.isArray(position)
-      && position.length === 3
-  );
-}
+// function isValidState(viewerState) {
+//   const { projectionScale, projectionOrientation, position, dimensions } = viewerState || {};
+//   console.log ("valid", projectionScale, projectionOrientation, position, dimensions)
+//   return (
+//     dimensions !== undefined
+//       && typeof projectionScale === 'number'
+//       && Array.isArray(projectionOrientation)
+//       && projectionOrientation.length === 4
+//       && Array.isArray(position)
+//       && position.length === 3
+//   );
+// }
 
 /**
  * Returns true if the difference is greater than the epsilon for that key.
@@ -89,7 +90,7 @@ export const nearEq = (a, b, epsilon) => (
  */
 
 export function didCameraStateChange(prevState, nextState) {
-  if (!isValidState(nextState)) return false;
+  // if (!isValidState(nextState)) return false;
   return Object.entries(EPSILON_KEYS_MAPPING_NG)
     .some(([key, eps]) => valueGreaterThanEpsilon(
       prevState?.[key],
@@ -101,7 +102,7 @@ export function didCameraStateChange(prevState, nextState) {
 // To see if any and which cameraState has changed
 // adjust for coupled zoom+position changes
 export function diffCameraState(prev, next) {
-  if (!isValidState(next)) return { changed: false, scale: false, pos: false, rot: false };
+  // if (!isValidState(next)) return { changed: false, scale: false, pos: false, rot: false };
 
   const eps = EPSILON_KEYS_MAPPING_NG;
   const scale = valueGreaterThanEpsilon(prev?.projectionScale,