@vitessce/neuroglancer 3.6.18 → 3.7.1

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAmkFA,gIAcC;AA7kFD;;cAiBe,CAAC;;;kBAIP,eAAsB;gBACxB,WAAU;eAGf,WAAU;EApBR"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAqkFA,gIAcC;AA/kFD;;cAiBe,CAAC;;;kBAIP,eAAsB;gBAChB,WAAU;eAAsB,WACvC;EAlBJ"}

package/dist-tsc/styles.js

@@ -21,6 +21,7 @@ const globalNeuroglancerCss = `
 .neuroglancer-viewer-top-row,
 .neuroglancer-layer-panel, 
 .neuroglancer-side-panel-column,
+.neuroglancer-display-dimensions-widget,
 .neuroglancer-data-panel-layout-controls button{
     display: none !important;
 }
@@ -1423,7 +1424,8 @@ const globalNeuroglancerStyles = {
         borderColor: '#000',
         borderWidth: '2px',
     },
-    '.neuroglancer-panel:focus-within': { borderColor: '#fff' },
+    // Hides the white border around NG view that shows the view is focused
+    // '.neuroglancer-panel:focus-within': { borderColor: '#fff' },
     '.neuroglancer-layer-group-viewer': { outline: '0px' },
     '.neuroglancer-layer-group-viewer-context-menu': {
         flexDirection: 'column',

package/dist-tsc/utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Returns true if the difference is greater than the epsilon for that key.
+ * @param {array | number} a Previous viewerState key, i.e., position.
+ * @param {array | number } b Next viewerState key, i.e., position.
+ * @returns
+ */
+export function valueGreaterThanEpsilon(a: array | number, b: array | number, epsilon: any): boolean | undefined;
+/**
+ * Returns true if the two states are equal, or false if not.
+ * @param {object} prevState Previous viewer state.
+ * @param {object} nextState Next viewer state.
+ * @returns {Boolean} True if any key has changed
+ */
+export function didCameraStateChange(prevState: object, nextState: object): boolean;
+export function diffCameraState(prev: any, next: any): {
+    changed: boolean | undefined;
+    scale: boolean | undefined;
+    pos: boolean | undefined;
+    rot: boolean | undefined;
+};
+export function quaternionToEuler([x, y, z, w]: [any, any, any, any]): any[];
+export function eulerToQuaternion(pitch: any, yaw: any, roll?: number): any[];
+export function makeVitNgZoomCalibrator(initialNgProjectionScale: any, initialDeckZoom?: number): {
+    base: number;
+    vitToNgZoom(z: any): number;
+    ngToVitZoom(sNg: any): number;
+};
+export namespace EPSILON_KEYS_MAPPING_NG {
+    let projectionScale: number;
+    let projectionOrientation: number;
+    let position: number;
+}
+export const SOFT_POS_FACTOR: 0.15;
+export const Q_Y_UP: number[];
+export function multiplyQuat(a: any, b: any): number[];
+export function conjQuat(q: any): any[];
+export function quatdotAbs(a: any, b: any): number;
+export function rad2deg(r: any): number;
+export function deg2rad(d: any): number;
+export function nearEq(a: any, b: any, epsilon: any): boolean;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/dist-tsc/utils.js

@@ -0,0 +1,117 @@
+import { Quaternion, Euler, } from 'three';
+// For now deckGl uses degrees, but if changes to radian can change here
+// const VIT_UNITS = 'degrees';
+export const EPSILON_KEYS_MAPPING_NG = {
+    projectionScale: 100,
+    projectionOrientation: 2e-2,
+    position: 1,
+};
+// allow smaller pos deltas to pass when zoom changed
+export const SOFT_POS_FACTOR = 0.15;
+// To rotate the y-axis up in NG
+export const Q_Y_UP = [1, 0, 0, 0]; // [x,y,z,w] for 180° about X
+// ---- Y-up correction: 180° around X so X stays right, Y flips up (Z flips sign, which is OK) ----
+export const multiplyQuat = (a, b) => {
+    const [ax, ay, az, aw] = a;
+    const [bx, by, bz, bw] = b;
+    return [
+        aw * bx + ax * bw + ay * bz - az * by,
+        aw * by - ax * bz + ay * bw + az * bx,
+        aw * bz + ax * by - ay * bx + az * bw,
+        aw * bw - ax * bx - ay * by - az * bz,
+    ];
+};
+export const conjQuat = q => ([-q[0], -q[1], -q[2], q[3]]); // inverse for unit quats
+// Helper function to compute the cosine dot product of two quaternion
+export const quatdotAbs = (a, b) => Math.abs(a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3]);
+export const rad2deg = r => r * 180 / Math.PI;
+export const deg2rad = d => d * Math.PI / 180;
+// export const toVitUnits = rad => VIT_UNITS === 'degrees' ? (rad * 180 / Math.PI) : rad;
+// export const fromVitUnits = val => VIT_UNITS === 'degrees' ? (val * Math.PI / 180) : val;
+/**
+ * Is this a valid viewerState object?
+ * @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);
+}
+/**
+ * Returns true if the difference is greater than the epsilon for that key.
+ * @param {array | number} a Previous viewerState key, i.e., position.
+ * @param {array | number } b Next viewerState key, i.e., position.
+ * @returns
+ */
+export 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);
+    }
+    if (typeof a === 'number' && typeof b === 'number') {
+        return Math.abs(a - b) > epsilon;
+    }
+    return undefined;
+}
+export const nearEq = (a, b, epsilon) => (Number.isFinite(a) && Number.isFinite(b) ? Math.abs(a - b) <= epsilon : a === b);
+/**
+ * Returns true if the two states are equal, or false if not.
+ * @param {object} prevState Previous viewer state.
+ * @param {object} nextState Next viewer state.
+ * @returns {Boolean} True if any key has changed
+ */
+export function didCameraStateChange(prevState, nextState) {
+    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 };
+    const eps = EPSILON_KEYS_MAPPING_NG;
+    const scale = valueGreaterThanEpsilon(prev?.projectionScale, next?.projectionScale, eps.projectionScale);
+    const posHard = valueGreaterThanEpsilon(prev?.position, next?.position, eps.position);
+    const rot = valueGreaterThanEpsilon(prev?.projectionOrientation, next?.projectionOrientation, eps.projectionOrientation);
+    // If zoom changed, allow a softer position threshold so zoom+pos travel together.
+    const posSoft = !posHard && scale
+        && valueGreaterThanEpsilon(prev?.position, next?.position, SOFT_POS_FACTOR);
+    const pos = posHard || posSoft;
+    return { changed: scale || pos || rot, scale, pos, rot };
+}
+//  Convert WebGL's Quaternion rotation to DeckGL's Euler
+export function quaternionToEuler([x, y, z, w]) {
+    const quaternion = new Quaternion(x, y, z, w);
+    // deck.gl uses Y (yaw), X (pitch), Z (roll)
+    // TODO confirm the direction - YXZ
+    const euler = new Euler().setFromQuaternion(quaternion, 'YXZ');
+    const pitch = euler.x; // X-axis rotation
+    const yaw = euler.y; // Y-axis rotation
+    // return [pitch * RAD2DEG, yaw * RAD2DEG];
+    return [pitch, yaw];
+}
+//  Convert DeckGL's rotation in Euler to WebGL's Quaternion
+export function eulerToQuaternion(pitch, yaw, roll = 0) {
+    const euler = new Euler(pitch, yaw, roll, 'YXZ'); // rotation order
+    const quaternion = new Quaternion().setFromEuler(euler);
+    return [quaternion.x, quaternion.y, quaternion.z, quaternion.w];
+}
+// Calibrate once from an initial deck zoom and NG projectionScale
+export function makeVitNgZoomCalibrator(initialNgProjectionScale, initialDeckZoom = 0) {
+    const base = (initialNgProjectionScale / (2 ** -initialDeckZoom));
+    return {
+        base,
+        vitToNgZoom(z) {
+            return (base) * (2 ** -z);
+        },
+        ngToVitZoom(sNg) {
+            return Math.log2(base / (sNg));
+        },
+    };
+}

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

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

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

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

package/dist-tsc/utils.test.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { multiplyQuat, conjQuat, eulerToQuaternion, quaternionToEuler, Q_Y_UP, } from './utils.js';
+//  To normalize/map the angels between [-π, π]
+const wrap = a => Math.atan2(Math.sin(a), Math.cos(a));
+const close = (a, b, eps = 1e-6) => Math.abs(wrap(a - b)) < eps;
+describe('Quaternion utilities', () => {
+    it('multiplyQuat identity', () => {
+        const I = [0, 0, 0, 1];
+        const q = eulerToQuaternion(0.2, -0.5, 0.1);
+        expect(multiplyQuat(I, q)).toEqual(expect.arrayContaining(q));
+        expect(multiplyQuat(q, I)).toEqual(expect.arrayContaining(q));
+    });
+    // Tests the expected angle after Q_Y_UP
+    it('Y-up flip maps (x, y, z) -> (x, -y, -z)', () => {
+        const v = [0.3, 0.4, 0.0];
+        const qVit = eulerToQuaternion(...v);
+        const qNg = multiplyQuat(Q_Y_UP, qVit);
+        const [pitch, yaw] = quaternionToEuler(qNg); // radians
+        const ok = (close(pitch, -v[0]) && close(yaw, -v[1]))
+            || (close(pitch, -v[0]) && close(yaw, Math.PI - v[1]));
+        // Euler angles can give both yaw’ ≈ −yaw and yaw’ ≈ π − yaw
+        // Alternative is to compare only Quaternion
+        expect(ok).toBe(true);
+    });
+    //  Tests that applying and reversing Q_Y_UP gives back original orientation
+    it('Q_Y_UP round trip', () => {
+        const qVit = eulerToQuaternion(0.25, -0.7, 0);
+        const qNg = multiplyQuat(Q_Y_UP, qVit);
+        const qBack = multiplyQuat(conjQuat(Q_Y_UP), qNg);
+        // equal up to sign
+        const sameOrNeg = qBack.map((x, i) => Math.abs(x) - Math.abs(qVit[i]));
+        sameOrNeg.forEach(d => expect(Math.abs(d)).toBeLessThan(1e-6));
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.6.18",
+  "version": "3.7.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,27 +16,27 @@
     "dist-tsc"
   ],
   "dependencies": {
-    "@janelia-flyem/react-neuroglancer": "2.5.0",
     "@janelia-flyem/neuroglancer": "2.37.5",
     "lodash-es": "^4.17.21",
-    "@vitessce/neuroglancer-workers": "3.6.18",
-    "@vitessce/styles": "3.6.18",
-    "@vitessce/constants-internal": "3.6.18",
-    "@vitessce/vit-s": "3.6.18",
-    "@vitessce/sets-utils": "3.6.18",
-    "@vitessce/utils": "3.6.18",
-    "@vitessce/tooltip": "3.6.18"
+    "three": "^0.154.0",
+    "react": "^18.0.0",
+    "@vitessce/neuroglancer-workers": "3.7.1",
+    "@vitessce/styles": "3.7.1",
+    "@vitessce/constants-internal": "3.7.1",
+    "@vitessce/vit-s": "3.7.1",
+    "@vitessce/sets-utils": "3.7.1",
+    "@vitessce/utils": "3.7.1",
+    "@vitessce/tooltip": "3.7.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vitest": "^3.1.4"
   },
   "scripts": {
-    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
+    "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.mjs",
     "test": "pnpm exec vitest --run"
   },
   "module": "dist/index.js",

package/src/Neuroglancer.js

@@ -1,7 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 import React, { PureComponent, Suspense } from 'react';
 import { ChunkWorker } from '@vitessce/neuroglancer-workers';
-import { isEqualWith, pick } from 'lodash-es';
 import { NeuroglancerGlobalStyles } from './styles.js';
 
 const LazyReactNeuroglancer = React.lazy(() => import('./ReactNeuroglancer.js'));
@@ -9,145 +8,86 @@ const LazyReactNeuroglancer = React.lazy(() => import('./ReactNeuroglancer.js'))
 function createWorker() {
   return new ChunkWorker();
 }
-
-/**
- * Is this a valid viewerState object?
- * @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
-  );
-}
-
-// TODO: Do we want to use the same epsilon value
-// for every viewstate property being compared?
-const EPSILON = 1e-7;
-const VIEWSTATE_KEYS = ['projectionScale', 'projectionOrientation', 'position'];
-
-// Custom numeric comparison function
-// for isEqualWith, to be able to set a custom epsilon.
-function customizer(a, b) {
-  if (typeof a === 'number' && typeof b === 'number') {
-    // Returns true if the values are equivalent, else false.
-    return Math.abs(a - b) > EPSILON;
-  }
-  // Return undefined to fallback to the default
-  // comparison function.
-  return undefined;
-}
-
-/**
- * Returns true if the two states are equal, or false if not.
- * @param {object} prevState Previous viewer state.
- * @param {object} nextState Next viewer state.
- * @returns
- */
-function compareViewerState(prevState, nextState) {
-  if (isValidState(nextState)) {
-    // Subset the viewerState objects to only the keys
-    // that we want to use for comparison.
-    const prevSubset = pick(prevState, VIEWSTATE_KEYS);
-    const nextSubset = pick(nextState, VIEWSTATE_KEYS);
-    return isEqualWith(prevSubset, nextSubset, customizer);
-  }
-  return true;
-}
-
-export class Neuroglancer extends PureComponent {
+export class NeuroglancerComp extends PureComponent {
   constructor(props) {
     super(props);
-
     this.bundleRoot = createWorker();
-
-    this.viewerState = props.viewerState;
+    this.cellColorMapping = props.cellColorMapping;
     this.justReceivedExternalUpdate = false;
-
     this.prevElement = null;
     this.prevClickHandler = null;
     this.prevMouseStateChanged = null;
     this.prevHoverHandler = null;
-
     this.onViewerStateChanged = this.onViewerStateChanged.bind(this);
     this.onRef = this.onRef.bind(this);
+    // To avoid closure for onSegmentClick(), to update the selection
+    this.latestOnSegmentClick = props.onSegmentClick;
+    this.latestOnSelectHoveredCoords = props.onSelectHoveredCoords;
   }
 
   onRef(viewerRef) {
     // Here, we have access to the viewerRef.viewer object,
     // which we can use to add/remove event handlers.
-    const {
-      onSegmentClick,
-      onSelectHoveredCoords,
-    } = this.props;
 
     if (viewerRef) {
       // Mount
       const { viewer } = viewerRef;
       this.prevElement = viewer.element;
       this.prevMouseStateChanged = viewer.mouseState.changed;
+      viewer.inputEventBindings.sliceView.set('at:dblclick0', () => {});
+      viewer.inputEventBindings.perspectiveView.set('at:dblclick0', () => {});
       this.prevClickHandler = (event) => {
         if (event.button === 0) {
-          setTimeout(() => {
-            const { pickedValue } = viewer.mouseState;
-            if (pickedValue && pickedValue?.low) {
-              onSegmentClick(pickedValue?.low);
+          // Wait for mouseState to update
+          requestAnimationFrame(() => {
+            const { pickedValue, pickedRenderLayer } = viewer.mouseState;
+            // Only trigger selection when a segment is clicked rather than any click on the view
+            if (pickedValue && pickedValue.low !== undefined && pickedRenderLayer) {
+              this.latestOnSegmentClick?.(pickedValue.low);
             }
-          }, 100);
+          });
         }
       };
-      viewer.element.addEventListener('mousedown', this.prevClickHandler);
-
       this.prevHoverHandler = () => {
         if (viewer.mouseState.pickedValue !== undefined) {
           const pickedSegment = viewer.mouseState.pickedValue;
-          onSelectHoveredCoords(pickedSegment?.low);
+          this.latestOnSelectHoveredCoords?.(pickedSegment?.low);
         }
       };
-
+      viewer.element.addEventListener('mouseup', this.prevClickHandler);
       viewer.mouseState.changed.add(this.prevHoverHandler);
     } else {
       // Unmount (viewerRef is null)
       if (this.prevElement && this.prevClickHandler) {
-        this.prevElement.removeEventListener('mousedown', this.prevClickHandler);
+        this.prevElement.removeEventListener('mouseup', this.prevClickHandler);
+        this.prevClickHandler = null;
       }
       if (this.prevMouseStateChanged && this.prevHoverHandler) {
         this.prevMouseStateChanged.remove(this.prevHoverHandler);
+        this.prevHoverHandler = null;
       }
+      this.prevElement = null;
+      this.prevMouseStateChanged = null;
     }
   }
 
   onViewerStateChanged(nextState) {
     const { setViewerState } = this.props;
-    const { viewerState: prevState } = this;
-
-    if (!this.justReceivedExternalUpdate && !compareViewerState(prevState, nextState)) {
-      this.viewerState = nextState;
-      this.justReceivedExternalUpdate = false;
-      setViewerState(nextState);
-    }
+    setViewerState(nextState);
   }
 
-  UNSAFE_componentWillUpdate(prevProps) {
-    if (!compareViewerState(this.viewerState, prevProps.viewerState)) {
-      this.viewerState = prevProps.viewerState;
-      this.justReceivedExternalUpdate = true;
-      setTimeout(() => {
-        this.justReceivedExternalUpdate = false;
-      }, 100);
+  componentDidUpdate(prevProps) {
+    const { onSegmentClick, onSelectHoveredCoords } = this.props;
+    if (prevProps.onSegmentClick !== onSegmentClick) {
+      this.latestOnSegmentClick = onSegmentClick;
+    }
+    if (prevProps.onSelectHoveredCoords !== onSelectHoveredCoords) {
+      this.latestOnSelectHoveredCoords = onSelectHoveredCoords;
     }
   }
 
   render() {
-    const {
-      classes,
-    } = this.props;
+    const { classes, viewerState, cellColorMapping } = this.props;
 
     return (
       <>
@@ -156,9 +96,10 @@ export class Neuroglancer extends PureComponent {
           <Suspense fallback={<div>Loading...</div>}>
             <LazyReactNeuroglancer
               brainMapsClientId="NOT_A_VALID_ID"
-              viewerState={this.viewerState}
+              viewerState={viewerState}
               onViewerStateChanged={this.onViewerStateChanged}
               bundleRoot={this.bundleRoot}
+              cellColorMapping={cellColorMapping}
               ref={this.onRef}
             />
           </Suspense>