@vitessce/neuroglancer 3.6.18 → 3.7.1

package/dist-tsc/NeuroglancerSubscriber.js

@@ -1,80 +1,70 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable no-unused-vars */
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef, useEffect, useState } from 'react';
 import { TitleInfo, useCoordination, useObsSetsData, useLoaders, useObsEmbeddingData, useCoordinationScopes, } from '@vitessce/vit-s';
 import { ViewHelpMapping, ViewType, COMPONENT_COORDINATION_TYPES, } from '@vitessce/constants-internal';
 import { mergeObsSets, getCellColors, setObsSelection } from '@vitessce/sets-utils';
-import { Neuroglancer } from './Neuroglancer.js';
+import { NeuroglancerComp } from './Neuroglancer.js';
 import { useStyles } from './styles.js';
-const NEUROGLANCER_ZOOM_BASIS = 16;
-function mapVitessceToNeuroglancer(zoom) {
-    return NEUROGLANCER_ZOOM_BASIS * (2 ** -zoom);
-}
-function mapNeuroglancerToVitessce(projectionScale) {
-    return -Math.log2(projectionScale / NEUROGLANCER_ZOOM_BASIS);
-}
-function quaternionToEuler([x, y, z, w]) {
-    // X-axis rotation (Roll)
-    const thetaX = Math.atan2(2 * (w * x + y * z), 1 - 2 * (x * x + y * y));
-    // Y-axis rotation (Pitch)
-    const sinp = 2 * (w * y - z * x);
-    const thetaY = Math.abs(sinp) >= 1 ? Math.sign(sinp) * (Math.PI / 2) : Math.asin(sinp);
-    // Convert to degrees as Vitessce expects degrees?
-    return [thetaX * (180 / Math.PI), thetaY * (180 / Math.PI)];
-}
-function eulerToQuaternion(thetaX, thetaY) {
-    // Convert Euler angles (X, Y rotations) to quaternion
-    const halfThetaX = thetaX / 2;
-    const halfThetaY = thetaY / 2;
-    const sinX = Math.sin(halfThetaX);
-    const cosX = Math.cos(halfThetaX);
-    const sinY = Math.sin(halfThetaY);
-    const cosY = Math.cos(halfThetaY);
-    return [
-        sinX * cosY,
-        cosX * sinY,
-        sinX * sinY,
-        cosX * cosY,
-    ];
-}
-function normalizeQuaternion(q) {
-    const length = Math.sqrt((q[0] ** 2) + (q[1] ** 2) + (q[2] ** 2) + (q[3] ** 2));
-    return q.map(value => value / length);
+import { quaternionToEuler, eulerToQuaternion, valueGreaterThanEpsilon, nearEq, makeVitNgZoomCalibrator, conjQuat, multiplyQuat, rad2deg, deg2rad, Q_Y_UP, } from './utils.js';
+const VITESSCE_INTERACTION_DELAY = 50;
+const INIT_VIT_ZOOM = -3.6;
+const ZOOM_EPS = 1e-2;
+const ROTATION_EPS = 1e-3;
+const TARGET_EPS = 0.5;
+const NG_ROT_COOLDOWN_MS = 120;
+const LAST_INTERACTION_SOURCE = {
+    vitessce: 'vitessce',
+    neuroglancer: 'neuroglancer',
+};
+function rgbToHex(rgb) {
+    return (typeof rgb === 'string'
+        ? 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 loaders = useLoaders();
     const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
-    const [{ dataset, obsType, spatialZoom, spatialTargetX, spatialTargetY, spatialRotationX, spatialRotationY, 
-    // spatialRotationZ,
-    // spatialRotationOrbit,
-    // spatialOrbitAxis,
-    embeddingType: mapping, obsSetSelection: cellSetSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialRotationX: setRotationX, setSpatialRotationY: setRotationY, 
+    const [{ dataset, obsType, spatialZoom, spatialTargetX, spatialTargetY, spatialRotationX, spatialRotationY, spatialRotationZ, spatialRotationOrbit, 
+    // spatialOrbitAxis, // always along Y-axis - not used in conversion
+    embeddingType: mapping, obsSetColor: cellSetColor, obsSetSelection: cellSetSelection, additionalObsSets: additionalCellSets, }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialRotationX: setRotationX, 
+    // setSpatialRotationY: setRotationY,
     // setSpatialRotationZ: setRotationZ,
-    // setSpatialRotationOrbit: setRotationOrbit,
-    setSpatialZoom: setZoom, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.NEUROGLANCER], coordinationScopes);
+    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 handleStateUpdate = useCallback((newState) => {
-        const { projectionScale, projectionOrientation, position } = newState;
-        setZoom(mapNeuroglancerToVitessce(projectionScale));
-        const vitessceEularMapping = quaternionToEuler(projectionOrientation);
-        // TODO: support z rotation on SpatialView?
-        setRotationX(vitessceEularMapping[0]);
-        setRotationY(vitessceEularMapping[1]);
-        // Note: To pan in Neuroglancer, use shift+leftKey+drag
-        setTargetX(position[0]);
-        setTargetY(position[1]);
-    }, [setZoom, setTargetX, setTargetY, setRotationX, setRotationY]);
-    const onSegmentClick = useCallback((value) => {
-        if (value) {
-            const selectedCellIds = [String(value)];
-            setObsSelection(selectedCellIds, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding, 'Selection ', `: based on selected segments ${value}`);
-        }
-    }, [additionalCellSets, cellSetColor, setAdditionalCellSets,
-        setCellColorEncoding, setCellSetColor, setCellSetSelection,
-    ]);
+    const ngRotPushAtRef = useRef(0);
+    const lastInteractionSource = useRef(null);
+    const applyNgUpdateTimeoutRef = useRef(null);
+    const lastNgPushOrientationRef = useRef(null);
+    const initialRenderCalibratorRef = useRef(null);
+    const translationOffsetRef = useRef([0, 0, 0]);
+    const zoomRafRef = useRef(null);
+    const lastNgQuatRef = useRef([0, 0, 0, 1]);
+    const lastNgScaleRef = useRef(null);
+    const lastVitessceRotationRef = useRef({
+        x: spatialRotationX,
+        y: spatialRotationY,
+        z: spatialRotationZ,
+        orbit: spatialRotationOrbit,
+    });
+    // Track the last coord values we saw, and only mark "vitessce"
+    // when *those* actually change. This prevents cell set renders
+    // from spoofing the source.
+    const prevCoordsRef = useRef({
+        zoom: spatialZoom,
+        rx: spatialRotationX,
+        ry: spatialRotationY,
+        rz: spatialRotationZ,
+        orbit: spatialRotationOrbit,
+        tx: spatialTargetX,
+        ty: spatialTargetY,
+    });
     const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
     const cellColors = useMemo(() => getCellColors({
         cellSets: mergedCellSets,
@@ -84,42 +74,288 @@ export function NeuroglancerSubscriber(props) {
         theme,
     }), [mergedCellSets, theme,
         cellSetColor, cellSetSelection, obsIndex]);
-    const rgbToHex = useCallback(rgb => (typeof rgb === 'string' ? rgb
-        : `#${rgb.map(c => c.toString(16).padStart(2, '0')).join('')}`), []);
+    /*
+     * handleStateUpdate - Interactions from NG to Vitessce are pushed here
+     */
+    const handleStateUpdate = useCallback((newState) => {
+        lastInteractionSource.current = LAST_INTERACTION_SOURCE.neuroglancer;
+        const { projectionScale, projectionOrientation, position } = newState;
+        // Set the views on first mount
+        if (!initialRenderCalibratorRef.current) {
+            // wait for a real scale
+            if (!Number.isFinite(projectionScale) || projectionScale <= 0)
+                return;
+            // 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 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
+            translationOffsetRef.current = [px - tX, py - tY, pz];
+            // console.log(" translationOffsetRef.current",  translationOffsetRef.current)
+            const syncedZoom = initialRenderCalibratorRef.current.vitToNgZoom(INIT_VIT_ZOOM);
+            latestViewerStateRef.current = {
+                ...latestViewerStateRef.current,
+                projectionScale: syncedZoom,
+            };
+            if (!Number.isFinite(spatialZoom) || Math.abs(spatialZoom - INIT_VIT_ZOOM) > ZOOM_EPS) {
+                setZoom(INIT_VIT_ZOOM);
+            }
+            return;
+        }
+        // ZOOM (NG → Vitessce) — do this only after calibrator exists
+        if (Number.isFinite(projectionScale) && projectionScale > 0) {
+            const vitZoomFromNg = initialRenderCalibratorRef.current.ngToVitZoom(projectionScale);
+            const scaleChanged = lastNgScaleRef.current == null
+                || (Math.abs(projectionScale - lastNgScaleRef.current)
+                    > 1e-6 * Math.max(1, projectionScale));
+            if (scaleChanged && Number.isFinite(vitZoomFromNg)
+                && Math.abs(vitZoomFromNg - (spatialZoom ?? 0)) > ZOOM_EPS) {
+                if (zoomRafRef.current)
+                    cancelAnimationFrame(zoomRafRef.current);
+                zoomRafRef.current = requestAnimationFrame(() => {
+                    setZoom(vitZoomFromNg);
+                    zoomRafRef.current = null;
+                });
+            }
+            // remember last NG scale
+            lastNgScaleRef.current = projectionScale;
+        }
+        // TRANSLATION
+        if (Array.isArray(position) && position.length >= 2) {
+            const [px, py] = position;
+            const [ox, oy] = translationOffsetRef.current;
+            const tx = px - ox; // map NG → Vitessce
+            const ty = py - oy;
+            if (Number.isFinite(tx) && Math.abs(tx - (spatialTargetX ?? tx)) > TARGET_EPS)
+                setTargetX(tx);
+            if (Number.isFinite(ty) && Math.abs(ty - (spatialTargetY ?? ty)) > TARGET_EPS)
+                setTargetY(ty);
+        }
+        // ROTATION — only when NG quat actually changes
+        const quatChanged = valueGreaterThanEpsilon(projectionOrientation, lastNgQuatRef.current, ROTATION_EPS);
+        if (quatChanged) {
+            if (applyNgUpdateTimeoutRef.current)
+                clearTimeout(applyNgUpdateTimeoutRef.current);
+            lastNgPushOrientationRef.current = projectionOrientation;
+            applyNgUpdateTimeoutRef.current = setTimeout(() => {
+                // Remove the Y-up correction before converting to Euler for Vitessce
+                const qVit = multiplyQuat(conjQuat(Q_Y_UP), projectionOrientation);
+                const [pitchRad, yawRad] = quaternionToEuler(qVit); // radians
+                const currPitchRad = deg2rad(spatialRotationX ?? 0);
+                const currYawRad = deg2rad(spatialRotationOrbit ?? 0);
+                if (Math.abs(pitchRad - currPitchRad) > ROTATION_EPS
+                    || Math.abs(yawRad - currYawRad) > ROTATION_EPS) {
+                    const pitchDeg = rad2deg(pitchRad);
+                    const yawDeg = rad2deg(yawRad);
+                    // Mark Vitessce as the source for the next derived pass
+                    lastInteractionSource.current = LAST_INTERACTION_SOURCE.vitessce;
+                    setRotationX(pitchDeg);
+                    setRotationOrbit(yawDeg);
+                    ngRotPushAtRef.current = performance.now();
+                    // // Test to verify rotation from NG to Vitessce and back to NG
+                    // requestAnimationFrame(() => {
+                    //   requestAnimationFrame(() => {
+                    //     // Recreate the Vitessce quaternion from the angles we *just set*
+                    //     const qVitJustSet = eulerToQuaternion(deg2rad(pitchDeg), deg2rad(yawDeg), 0);
+                    //     // Convert to NG frame (apply Y-up)
+                    //     const qNgExpected = multiplyQuat(Q_Y_UP, qVitJustSet);
+                    //     // What NG is currently holding (latest from ref, fallback to local)
+                    //     const qNgCurrent  = latestViewerStateRef.current?.projectionOrientation
+                    //  || projectionOrientation;
+                    //     const dot = quatdotAbs(qNgExpected, qNgCurrent);
+                    //     console.log('[POST-APPLY] |dot| =', dot.toFixed(6));
+                    //   });
+                    // });
+                }
+            }, VITESSCE_INTERACTION_DELAY);
+            lastNgQuatRef.current = projectionOrientation;
+        }
+        latestViewerStateRef.current = {
+            ...latestViewerStateRef.current,
+            projectionOrientation,
+            projectionScale,
+            position,
+        };
+    }, []);
+    const onSegmentClick = useCallback((value) => {
+        if (value) {
+            const id = String(value);
+            const selectedCellIds = [id];
+            const alreadySelectedId = cellSetSelection?.flat()?.some(sel => sel.includes(id));
+            // Don't create new selection from same ids
+            if (alreadySelectedId) {
+                return;
+            }
+            setObsSelection(selectedCellIds, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding, 'Selection ', `: based on selected segments ${value}`);
+        }
+    }, [additionalCellSets, cellSetColor, setAdditionalCellSets,
+        setCellColorEncoding, setCellSetColor, setCellSetSelection,
+    ]);
+    const batchedUpdateTimeoutRef = useRef(null);
+    const [batchedCellColors, setBatchedCellColors] = useState(cellColors);
+    useEffect(() => {
+        if (batchedUpdateTimeoutRef.current) {
+            clearTimeout(batchedUpdateTimeoutRef.current);
+        }
+        batchedUpdateTimeoutRef.current = setTimeout(() => {
+            setBatchedCellColors(cellColors);
+        }, 100);
+        // TODO: look into deferredValue from React
+        // startTransition(() => {
+        //   setBatchedCellColors(cellColors);
+        // });
+    }, [cellColors]);
+    // TODO use a ref if slow - see prev commits
     const cellColorMapping = useMemo(() => {
-        const colorCellMapping = {};
-        cellColors.forEach((color, cell) => {
-            colorCellMapping[cell] = rgbToHex(color);
+        const colorMapping = {};
+        batchedCellColors.forEach((color, cell) => {
+            colorMapping[cell] = rgbToHex(color);
         });
-        return colorCellMapping;
-    }, [cellColors, rgbToHex]);
-    const derivedViewerState = useMemo(() => ({
-        ...initialViewerState,
-        layers: initialViewerState.layers.map((layer, index) => (index === 0
-            ? {
-                ...layer,
-                segments: Object.keys(cellColorMapping).map(String),
-                segmentColors: cellColorMapping,
+        return colorMapping;
+    }, [batchedCellColors]);
+    const derivedViewerState = useMemo(() => {
+        const { current } = latestViewerStateRef;
+        const nextSegments = Object.keys(cellColorMapping);
+        const prevLayer = current?.layers?.[0] || {};
+        const prevSegments = prevLayer.segments || [];
+        const { projectionScale, projectionOrientation, position } = current;
+        // Did Vitessce coords change vs the *previous* render?
+        const rotChangedNow = !nearEq(spatialRotationX, prevCoordsRef.current.rx, ROTATION_EPS)
+            || !nearEq(spatialRotationY, prevCoordsRef.current.ry, ROTATION_EPS)
+            || !nearEq(spatialRotationZ, prevCoordsRef.current.rz, ROTATION_EPS)
+            || !nearEq(spatialRotationOrbit, prevCoordsRef.current.orbit, ROTATION_EPS);
+        const zoomChangedNow = !nearEq(spatialZoom, prevCoordsRef.current.zoom, ROTATION_EPS);
+        const transChangedNow = !nearEq(spatialTargetX, prevCoordsRef.current.tx, ROTATION_EPS)
+            || !nearEq(spatialTargetY, prevCoordsRef.current.ty, ROTATION_EPS);
+        let nextProjectionScale = projectionScale;
+        let nextPosition = position;
+        // ** --- Zoom handling --- ** //
+        if (typeof spatialZoom === 'number'
+            && initialRenderCalibratorRef.current
+            && lastInteractionSource.current !== LAST_INTERACTION_SOURCE.neuroglancer
+            && zoomChangedNow) {
+            const s = initialRenderCalibratorRef.current.vitToNgZoom(spatialZoom);
+            if (Number.isFinite(s) && s > 0) {
+                nextProjectionScale = s;
             }
-            : layer)),
-    }), [cellColorMapping, initialViewerState]);
-    const derivedViewerState2 = useMemo(() => {
-        if (typeof spatialZoom === 'number' && typeof spatialTargetX === 'number') {
-            const projectionScale = mapVitessceToNeuroglancer(spatialZoom);
-            const position = [spatialTargetX, spatialTargetY, derivedViewerState.position[2]];
-            const projectionOrientation = normalizeQuaternion(eulerToQuaternion(spatialRotationX, spatialRotationY));
-            return {
-                ...derivedViewerState,
-                projectionScale,
-                position,
-                projectionOrientation,
-            };
         }
-        return derivedViewerState;
-    }, [derivedViewerState, spatialZoom, spatialTargetX,
-        spatialTargetY, spatialRotationX, spatialRotationY]);
+        // ** --- Translation handling --- ** //
+        const [ox, oy, oz] = translationOffsetRef.current;
+        const [px = 0, py = 0, pz = (current.position?.[2] ?? oz)] = current.position || [];
+        const hasVitessceSpatialTarget = Number.isFinite(spatialTargetX)
+            && Number.isFinite(spatialTargetY);
+        if (hasVitessceSpatialTarget
+            && lastInteractionSource.current !== LAST_INTERACTION_SOURCE.neuroglancer
+            && transChangedNow) {
+            const nx = spatialTargetX + ox; // Vitessce → NG
+            const ny = spatialTargetY + oy;
+            if (Math.abs(nx - px) > TARGET_EPS || Math.abs(ny - py) > TARGET_EPS) {
+                nextPosition = [nx, ny, pz];
+            }
+        }
+        // ** --- Orientation/Rotation handling --- ** //
+        const vitessceRotationRaw = eulerToQuaternion(deg2rad(spatialRotationX ?? 0), deg2rad(spatialRotationOrbit ?? 0), deg2rad(spatialRotationZ ?? 0));
+        // Apply Y-up to have both views with same axis-direction (xy)
+        const vitessceRotation = multiplyQuat(Q_Y_UP, vitessceRotationRaw);
+        // // Round-trip check: NG -> Vit (remove Y-UP)
+        // const qVitBack = multiplyQuat(conjQuat(Q_Y_UP), vitessceRotation);
+        // const dotVitLoop = quatdotAbs(qVitBack, vitessceRotationRaw);
+        // // Expect ~1 (± sign OK)
+        // const fmt = (v) => Array.isArray(v) ? v.map(n => Number(n).toFixed(6)) : v;
+        // console.log('[CHK Vit→NG→Vit] |dot| =', dotVitLoop.toFixed(6),
+        //             ' qVitRaw=', fmt(vitessceRotationRaw),
+        //             ' qVitBack=', fmt(qVitBack));
+        // // Cross-view check: does the NG orientation we're about to send match our Vit -> NG?
+        // const dotVsNg = quatdotAbs(vitessceRotation, projectionOrientation);
+        // console.log('[CHK Vit→NG vs current NG] |dot| =', dotVsNg.toFixed(6));
+        // If NG quat != Vitessce quat on first render, push Vitessce once.
+        const shouldForceInitialVitPush = !initialRotationPushedRef.current
+            && valueGreaterThanEpsilon(vitessceRotation, projectionOrientation, ROTATION_EPS);
+        // Use explicit source if set; otherwise infer Vitessce when coords changed.
+        const ngFresh = (performance.now() - (ngRotPushAtRef.current || 0)) < NG_ROT_COOLDOWN_MS;
+        const changedNowOrIInitialVitPush = rotChangedNow
+            || zoomChangedNow || transChangedNow || shouldForceInitialVitPush;
+        const src = ngFresh ? LAST_INTERACTION_SOURCE.neuroglancer
+            : (lastInteractionSource.current
+                ?? (changedNowOrIInitialVitPush ? LAST_INTERACTION_SOURCE.vitessce : null));
+        let nextOrientation = projectionOrientation; // start from NG's current quat
+        // console.log('[ORIENT]',
+        //   'srcResolved=', src,
+        //   'lastSource=', lastInteractionSource.current,
+        //   'dotLoop=', dotVitLoop.toFixed(6),
+        //   'dotCross=', dotVsNg.toFixed(6)
+        // );
+        // console.log('[ORIENT Q]',
+        //   'qVitRaw=', fmt(vitessceRotationRaw), // Vit frame (pre Y-up)
+        //   'qVitToNg=', fmt(vitessceRotation), // NG frame (post Y-up)
+        //   'qNgCurr=', fmt(projectionOrientation),
+        // );
+        if (src === LAST_INTERACTION_SOURCE.vitessce) {
+            // Only push if Vitessce rotation actually changed since last time.
+            const rotDiffers = valueGreaterThanEpsilon(vitessceRotation, projectionOrientation, ROTATION_EPS);
+            if (rotDiffers) {
+                nextOrientation = vitessceRotation;
+                lastVitessceRotationRef.current = {
+                    x: spatialRotationX,
+                    y: spatialRotationY,
+                    z: spatialRotationZ,
+                    orbit: spatialRotationOrbit,
+                };
+                initialRotationPushedRef.current = true;
+                // Re-anchor NG -> Vitessce translation once we commit the initial orientation,
+                // the center shows a right translated image
+                const [cx = 0, cy = 0, cz = (nextPosition?.[2] ?? current.position?.[2] ?? 0),] = nextPosition
+                    || current.position || [];
+                const tX = Number.isFinite(spatialTargetX) ? spatialTargetX : 0;
+                const tY = Number.isFinite(spatialTargetY) ? spatialTargetY : 0;
+                translationOffsetRef.current = [cx - tX, cy - tY, cz];
+            }
+            // else {
+            //   // No real Vitessce rotation change → do not overwrite NG's quat.
+            //   console.log('Vitessce → NG: no rotation change, keep NG quat');
+            // }
+            if (lastInteractionSource.current === LAST_INTERACTION_SOURCE.vitessce) {
+                lastInteractionSource.current = null;
+            }
+        }
+        else if (src === LAST_INTERACTION_SOURCE.neuroglancer) {
+            nextOrientation = lastNgPushOrientationRef.current ?? projectionOrientation;
+            lastInteractionSource.current = null;
+        }
+        const newLayer0 = {
+            ...prevLayer,
+            segments: nextSegments,
+            segmentColors: cellColorMapping,
+        };
+        const updated = {
+            ...current,
+            projectionScale: nextProjectionScale,
+            projectionOrientation: nextOrientation,
+            position: nextPosition,
+            layers: prevSegments.length === 0 ? [newLayer0, ...(current?.layers?.slice(1)
+                    || [])] : current?.layers,
+        };
+        latestViewerStateRef.current = updated;
+        prevCoordsRef.current = {
+            zoom: spatialZoom,
+            rx: spatialRotationX,
+            ry: spatialRotationY,
+            rz: spatialRotationZ,
+            orbit: spatialRotationOrbit,
+            tx: spatialTargetX,
+            ty: spatialTargetY,
+        };
+        return updated;
+    }, [cellColorMapping, spatialZoom, spatialRotationX, spatialRotationY,
+        spatialRotationZ, spatialTargetX, spatialTargetY]);
     const onSegmentHighlight = useCallback((obsId) => {
         setCellHighlight(String(obsId));
     }, [obsIndex, setCellHighlight]);
-    return (_jsx(TitleInfo, { title: title, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: true, withPadding: false, children: _jsx(Neuroglancer, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState2, setViewerState: handleStateUpdate }) }));
+    // TODO: if all cells are deselected, a black view is shown, rather we want to show empty NG view?
+    // if (!cellColorMapping || Object.keys(cellColorMapping).length === 0) {
+    //   return;
+    // }
+    return (_jsx(TitleInfo, { title: title, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: true, withPadding: false, children: _jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMapping, setViewerState: handleStateUpdate }) }));
 }

package/dist-tsc/ReactNeuroglancer.d.ts

@@ -1,3 +1,148 @@
-export default ReactNeuroglancerWrapper;
-declare const ReactNeuroglancerWrapper: any;
+/**
+ * @typedef {Object} NgProps
+ * @property {number} perspectiveZoom
+ * @property {Object} viewerState
+ * @property {string} brainMapsClientId
+ * @property {string} key
+ * @property {Object<string, string>} cellColorMapping
+ *
+ * @property {Array} eventBindingsToUpdate
+ * An array of event bindings to change in Neuroglancer.  The array format is as follows:
+ * [[old-event1, new-event1], [old-event2], old-event3]
+ * Here, `old-event1`'s will be unbound and its action will be re-bound to `new-event1`.
+ * The bindings for `old-event2` and `old-event3` will be removed.
+ * Neuroglancer has its own syntax for event descriptors, and here are some examples:
+ * 'keya', 'shift+keyb' 'control+keyc', 'digit4', 'space', 'arrowleft', 'comma', 'period',
+ * 'minus', 'equal', 'bracketleft'.
+ *
+ * @property {(segment:any|null, layer:any) => void} onSelectedChanged
+ * A function of the form `(segment, layer) => {}`, called each time there is a change to
+ * the segment the user has 'selected' (i.e., hovered over) in Neuroglancer.
+ * The `segment` argument will be a Neuroglancer `Uint64` with the ID of the now-selected
+ * segment, or `null` if no segment is now selected.
+ * The `layer` argument will be a Neuroglaner `ManagedUserLayer`, whose `layer` property
+ * will be a Neuroglancer `SegmentationUserLayer`.
+ *
+ * @property {(segments:any, layer:any) => void} onVisibleChanged
+ * A function of the form `(segments, layer) => {}`, called each time there is a change to
+ * the segments the user has designated as 'visible' (i.e., double-clicked on) in Neuroglancer.
+ * The `segments` argument will be a Neuroglancer `Uint64Set` whose elements are `Uint64`
+ * instances for the IDs of the now-visible segments.
+ * The `layer` argument will be a Neuroglaner `ManagedUserLayer`, whose `layer` property
+ * will be a Neuroglancer `SegmentationUserLayer`.
+ *
+ * @property {() => void} onSelectionDetailsStateChanged
+ * A function of the form `() => {}` to respond to selection changes in the viewer.
+ * @property {() => void} onViewerStateChanged
+ *
+ * @property {Array<Object>} callbacks
+ * // ngServer: string,
+ */
+export function parseUrlHash(url: any): any;
+export function getNeuroglancerViewerState(key: any): any;
+export function getNeuroglancerColor(idStr: any, key: any): any;
+export function closeSelectionTab(key: any): void;
+export function getLayerManager(key: any): any;
+export function getManagedLayer(key: any, name: any): any;
+export function getAnnotationLayer(key: any, name: any): any;
+export function getAnnotationSource(key: any, name: any): any;
+export function addLayerSignalRemover(key: any, name: any, remover: any): void;
+export function unsubscribeLayersChangedSignals(layerManager: any, signalKey: any): void;
+export function configureLayersChangedSignals(key: any, layerConfig: any): any;
+export function configureAnnotationLayer(layer: any, props: any, recordRemover: any): void;
+export function configureAnnotationLayerChanged(layer: any, props: any, recordRemover: any): void;
+export function getAnnotationSelectionHost(key: any): "viewer" | "layer" | null;
+export function getSelectedAnnotationId(key: any, layerName: any): any;
+/** @extends {React.Component<NgProps>} */
+export default class Neuroglancer {
+    static defaultProps: {
+        perspectiveZoom: number;
+        eventBindingsToUpdate: null;
+        brainMapsClientId: string;
+        viewerState: null;
+        onSelectedChanged: null;
+        onVisibleChanged: null;
+        onSelectionDetailsStateChanged: null;
+        onViewerStateChanged: null;
+        key: null;
+        callbacks: never[];
+        ngServer: string;
+    };
+    constructor(props: any);
+    ngContainer: any;
+    viewer: any;
+    muteViewerChanged: boolean;
+    prevVisibleIds: Set<any>;
+    prevColorMap: any;
+    disposers: any[];
+    prevColorOverrides: Set<any>;
+    overrideColorsById: any;
+    allKnownIds: Set<any>;
+    minimalPoseSnapshot: () => {
+        position: any[];
+        projectionScale: any;
+        projectionOrientation: any[];
+    };
+    scheduleEmit: () => () => void;
+    withoutEmitting: (fn: any) => void;
+    didLayersChange: (prevVS: any, nextVS: any) => boolean;
+    applyColorsAndVisibility: (cellColorMapping: any) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    componentWillUnmount(): void;
+    setCallbacks(callbacks: any): void;
+    updateEventBindings: (eventBindingsToUpdate: any) => void;
+    selectionDetailsStateChanged: () => void;
+    layersChanged: () => void;
+    handlerRemovers: any[] | undefined;
+    selectedChanged: (layer: any) => void;
+    visibleChanged: (layer: any) => void;
+    render(): JSX.Element;
+}
+export type NgProps = {
+    perspectiveZoom: number;
+    viewerState: Object;
+    brainMapsClientId: string;
+    key: string;
+    cellColorMapping: {
+        [x: string]: string;
+    };
+    /**
+     * An array of event bindings to change in Neuroglancer.  The array format is as follows:
+     * [[old-event1, new-event1], [old-event2], old-event3]
+     * Here, `old-event1`'s will be unbound and its action will be re-bound to `new-event1`.
+     * The bindings for `old-event2` and `old-event3` will be removed.
+     * Neuroglancer has its own syntax for event descriptors, and here are some examples:
+     * 'keya', 'shift+keyb' 'control+keyc', 'digit4', 'space', 'arrowleft', 'comma', 'period',
+     * 'minus', 'equal', 'bracketleft'.
+     */
+    eventBindingsToUpdate: any[];
+    /**
+     * A function of the form `(segment, layer) => {}`, called each time there is a change to
+     * the segment the user has 'selected' (i.e., hovered over) in Neuroglancer.
+     * The `segment` argument will be a Neuroglancer `Uint64` with the ID of the now-selected
+     * segment, or `null` if no segment is now selected.
+     * The `layer` argument will be a Neuroglaner `ManagedUserLayer`, whose `layer` property
+     * will be a Neuroglancer `SegmentationUserLayer`.
+     */
+    onSelectedChanged: (segment: any | null, layer: any) => void;
+    /**
+     * A function of the form `(segments, layer) => {}`, called each time there is a change to
+     * the segments the user has designated as 'visible' (i.e., double-clicked on) in Neuroglancer.
+     * The `segments` argument will be a Neuroglancer `Uint64Set` whose elements are `Uint64`
+     * instances for the IDs of the now-visible segments.
+     * The `layer` argument will be a Neuroglaner `ManagedUserLayer`, whose `layer` property
+     * will be a Neuroglancer `SegmentationUserLayer`.
+     */
+    onVisibleChanged: (segments: any, layer: any) => void;
+    /**
+     * A function of the form `() => {}` to respond to selection changes in the viewer.
+     */
+    onSelectionDetailsStateChanged: () => void;
+    onViewerStateChanged: () => void;
+    /**
+     * // ngServer: string,
+     */
+    callbacks: Array<Object>;
+};
 //# sourceMappingURL=ReactNeuroglancer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactNeuroglancer.d.ts","sourceRoot":"","sources":["../src/ReactNeuroglancer.js"],"names":[],"mappings":";AAKA,4CAEG"}
+{"version":3,"file":"ReactNeuroglancer.d.ts","sourceRoot":"","sources":["../src/ReactNeuroglancer.js"],"names":[],"mappings":"AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,4CAsBC;AAED,0DAGC;AAED,gEA2BC;AAED,kDAKC;AAED,+CAMC;AAED,0DAMC;AAED,6DAMC;AAED,8DAWC;AAED,+EAYC;AAED,yFAcC;AAED,+EA6BC;AAmFD,2FAwBC;AAED,kGAeC;AAED,gFAUC;AAED,uEA0BC;AAED,0CAA0C;AAC1C;IACE;;;;;;;;;;;;MAYE;IAEF,wBAYC;IAVC,iBAAoC;IACpC,YAAkB;IAElB,2BAA8B;IAC9B,yBAA+B;IAC/B,kBAAwB;IACxB,iBAAmB;IACnB,6BAAmC;IACnC,wBAA6C;IAC7C,sBAA4B;IAG9B;;;;MASE;IAGF,+BAWE;IAGF,mCAKE;IAGF,uDASE;IAGF,0DAgCE;IAEF,0BA+GC;IAED,yDAgIC;IAED,6BAUC;IAcD,mCAQC;IAED,0DAyCE;IAEF,yCAOE;IAEF,0BAsCE;IA5BI,mCAAyB;IA+B/B,sCAWE;IAEF,qCAUE;IAEF,sBAOC;CACF;;qBAh3Ba,MAAM;iBACN,MAAM;uBACN,MAAM;SACN,MAAM;sBACN;YAAO,MAAM,GAAE,MAAM;KAAC;;;;;;;;;;;;;;;;;;;uBAWtB,CAAC,OAAO,EAAC,GAAG,GAAC,IAAI,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;;;;;;sBAQrC,CAAC,QAAQ,EAAC,GAAG,EAAE,KAAK,EAAC,GAAG,KAAK,IAAI;;;;oCAQjC,MAAM,IAAI;0BAEV,MAAM,IAAI;;;;eAEV,KAAK,CAAC,MAAM,CAAC"}