@vitessce/neuroglancer 3.5.12 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.5.12",
+  "version": "3.6.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,17 +17,22 @@
   ],
   "dependencies": {
     "@janelia-flyem/react-neuroglancer": "^2.5.0",
-    "@material-ui/core": "~4.12.3",
-    "@vitessce/neuroglancer-workers": "3.5.12",
-    "@vitessce/constants-internal": "3.5.12",
-    "@vitessce/vit-s": "3.5.12"
+    "lodash-es": "^4.17.21",
+    "@vitessce/neuroglancer-workers": "3.6.1",
+    "@vitessce/styles": "3.6.1",
+    "@vitessce/constants-internal": "3.6.1",
+    "@vitessce/vit-s": "3.6.1",
+    "@vitessce/sets-utils": "3.6.1",
+    "@vitessce/utils": "3.6.1",
+    "@vitessce/tooltip": "3.6.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "react": "^18.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.32.2"
+    "react-dom": "^18.0.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",

package/src/Neuroglancer.js

@@ -1,49 +1,172 @@
-import React, { useCallback, useMemo, Suspense } from 'react';
+/* eslint-disable react-refresh/only-export-components */
+import React, { PureComponent, Suspense } from 'react';
 import { ChunkWorker } from '@vitessce/neuroglancer-workers';
-import { useStyles, globalNeuroglancerCss } from './styles.js';
+import { isEqualWith, pick } from 'lodash-es';
+import { NeuroglancerGlobalStyles } from './styles.js';
 
-// We lazy load the Neuroglancer component,
-// because the non-dynamic import causes problems for Vitest,
-// as the package appears contain be a mix of CommonJS and ESM syntax.
 const LazyReactNeuroglancer = React.lazy(async () => {
   const ReactNeuroglancer = await import('@janelia-flyem/react-neuroglancer');
   return ReactNeuroglancer;
 });
 
-// Reference: https://github.com/developit/jsdom-worker/issues/14#issuecomment-1268070123
 function createWorker() {
   return new ChunkWorker();
 }
 
-export function Neuroglancer(props) {
-  const {
-    viewerState,
-    onViewerStateChanged,
-  } = props;
-  const classes = useStyles();
-  const bundleRoot = useMemo(() => createWorker(), []);
-
-  const handleStateChanged = useCallback((newState) => {
-    if (JSON.stringify(newState) !== JSON.stringify(viewerState)) {
-      if (onViewerStateChanged) {
-        onViewerStateChanged(newState);
+/**
+ * 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 {
+  constructor(props) {
+    super(props);
+
+    this.bundleRoot = createWorker();
+
+    this.viewerState = props.viewerState;
+    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);
+  }
+
+  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;
+      this.prevClickHandler = (event) => {
+        if (event.button === 0) {
+          setTimeout(() => {
+            const { pickedValue } = viewer.mouseState;
+            if (pickedValue && pickedValue?.low) {
+              onSegmentClick(pickedValue?.low);
+            }
+          }, 100);
+        }
+      };
+      viewer.element.addEventListener('mousedown', this.prevClickHandler);
+
+      this.prevHoverHandler = () => {
+        if (viewer.mouseState.pickedValue !== undefined) {
+          const pickedSegment = viewer.mouseState.pickedValue;
+          onSelectHoveredCoords(pickedSegment?.low);
+        }
+      };
+
+      viewer.mouseState.changed.add(this.prevHoverHandler);
+    } else {
+      // Unmount (viewerRef is null)
+      if (this.prevElement && this.prevClickHandler) {
+        this.prevElement.removeEventListener('mousedown', this.prevClickHandler);
+      }
+      if (this.prevMouseStateChanged && this.prevHoverHandler) {
+        this.prevMouseStateChanged.remove(this.prevHoverHandler);
       }
     }
-  }, [onViewerStateChanged, viewerState]);
+  }
 
-  return (
-    <>
-      <style>{globalNeuroglancerCss}</style>
-      <div className={classes.neuroglancerWrapper}>
-        <Suspense fallback={<div>Loading...</div>}>
-          <LazyReactNeuroglancer
-            brainMapsClientId="NOT_A_VALID_ID"
-            viewerState={viewerState}
-            onViewerStateChanged={handleStateChanged}
-            bundleRoot={bundleRoot}
-          />
-        </Suspense>
-      </div>
-    </>
-  );
+  onViewerStateChanged(nextState) {
+    const { setViewerState } = this.props;
+    const { viewerState: prevState } = this;
+
+    if (!this.justReceivedExternalUpdate && !compareViewerState(prevState, nextState)) {
+      this.viewerState = nextState;
+      this.justReceivedExternalUpdate = false;
+      setViewerState(nextState);
+    }
+  }
+
+  UNSAFE_componentWillUpdate(prevProps) {
+    if (!compareViewerState(this.viewerState, prevProps.viewerState)) {
+      this.viewerState = prevProps.viewerState;
+      this.justReceivedExternalUpdate = true;
+      setTimeout(() => {
+        this.justReceivedExternalUpdate = false;
+      }, 100);
+    }
+  }
+
+  render() {
+    const {
+      classes,
+    } = this.props;
+
+    return (
+      <>
+        <NeuroglancerGlobalStyles classes={classes} />
+        <div className={classes.neuroglancerWrapper}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <LazyReactNeuroglancer
+              brainMapsClientId="NOT_A_VALID_ID"
+              viewerState={this.viewerState}
+              onViewerStateChanged={this.onViewerStateChanged}
+              bundleRoot={this.bundleRoot}
+              ref={this.onRef}
+            />
+          </Suspense>
+        </div>
+      </>
+    );
+  }
 }

package/src/NeuroglancerSubscriber.js

@@ -1,22 +1,211 @@
-
+/* eslint-disable no-unused-vars */
+import React, { useCallback, useMemo } from 'react';
 import {
   TitleInfo,
+  useCoordination,
+  useObsSetsData,
+  useLoaders,
+  useObsEmbeddingData,
 } from '@vitessce/vit-s';
-
-import { ViewHelpMapping } from '@vitessce/constants-internal';
+import {
+  ViewHelpMapping,
+  ViewType,
+  COMPONENT_COORDINATION_TYPES,
+} from '@vitessce/constants-internal';
+import { mergeObsSets, getCellColors, setObsSelection } from '@vitessce/sets-utils';
 import { Neuroglancer } 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);
+}
 
 export function NeuroglancerSubscriber(props) {
   const {
+    coordinationScopes,
     closeButtonVisible,
     downloadButtonVisible,
     removeGridComponent,
     theme,
     title = 'Neuroglancer',
-    viewerState: viewerStateInitial = null,
     helpText = ViewHelpMapping.NEUROGLANCER,
+    viewerState: initialViewerState,
   } = props;
 
+  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,
+    // setSpatialRotationZ: setRotationZ,
+    // setSpatialRotationOrbit: setRotationOrbit,
+
+    setSpatialZoom: setZoom,
+  }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.NEUROGLANCER], coordinationScopes);
+
+  const { classes } = useStyles();
+  const loaders = useLoaders();
+
+  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 mergedCellSets = useMemo(() => mergeObsSets(
+    cellSets, additionalCellSets,
+  ), [cellSets, additionalCellSets]);
+
+  const cellColors = useMemo(() => getCellColors({
+    cellSets: mergedCellSets,
+    cellSetSelection,
+    cellSetColor,
+    obsIndex,
+    theme,
+  }), [mergedCellSets, theme,
+    cellSetColor, cellSetSelection, obsIndex]);
+
+  const rgbToHex = useCallback(rgb => (typeof rgb === 'string' ? rgb
+    : `#${rgb.map(c => c.toString(16).padStart(2, '0')).join('')}`), []);
+
+  const cellColorMapping = useMemo(() => {
+    const colorCellMapping = {};
+    cellColors.forEach((color, cell) => {
+      colorCellMapping[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,
+      }
+      : 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]);
+
+  const onSegmentHighlight = useCallback((obsId) => {
+    setCellHighlight(String(obsId));
+  }, [obsIndex, setCellHighlight]);
+
   return (
     <TitleInfo
       title={title}
@@ -27,9 +216,15 @@ export function NeuroglancerSubscriber(props) {
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}
       isReady
+      withPadding={false}
     >
-      {viewerStateInitial && <Neuroglancer viewerState={viewerStateInitial} />}
+      <Neuroglancer
+        classes={classes}
+        onSegmentClick={onSegmentClick}
+        onSelectHoveredCoords={onSegmentHighlight}
+        viewerState={derivedViewerState2}
+        setViewerState={handleStateUpdate}
+      />
     </TitleInfo>
-
   );
 }