@vitessce/neuroglancer 3.6.0 → 3.6.1

package/dist/{index-DVtsoLdc.js → index-CfzR0P6j.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, c as commonjsGlobal, a as getAugmentedNamespace, r as requirePropTypes } from "./index-DmHg0YSX.js";
+import { g as getDefaultExportFromCjs, c as commonjsGlobal, a as getAugmentedNamespace, r as requirePropTypes } from "./index-C1Dm5JHD.js";
 import React__default from "react";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {

package/dist/index.js

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

package/dist-tsc/Neuroglancer.d.ts

@@ -1,2 +1,15 @@
-export function Neuroglancer(props: any): JSX.Element;
+export class Neuroglancer {
+    constructor(props: any);
+    bundleRoot: any;
+    viewerState: any;
+    justReceivedExternalUpdate: boolean;
+    prevElement: any;
+    prevClickHandler: ((event: any) => void) | null;
+    prevMouseStateChanged: any;
+    prevHoverHandler: (() => void) | null;
+    onViewerStateChanged(nextState: any): void;
+    onRef(viewerRef: any): void;
+    UNSAFE_componentWillUpdate(prevProps: any): void;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=Neuroglancer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAiBA,sDA+BC"}
+{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAkEA;IACE,wBAeC;IAZC,gBAAgC;IAEhC,iBAAoC;IACpC,oCAAuC;IAEvC,iBAAuB;IACvB,gDAA4B;IAC5B,2BAAiC;IACjC,sCAA4B;IAkD9B,2CASC;IArDD,4BA0CC;IAaD,iDAQC;IAED,sBAqBC;CACF"}

package/dist-tsc/Neuroglancer.js

@@ -1,28 +1,132 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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, 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.
+import { isEqualWith, pick } from 'lodash-es';
+import { NeuroglancerGlobalStyles } from './styles.js';
 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(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);
         }
-    }, [onViewerStateChanged, viewerState]);
-    return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: handleStateChanged, bundleRoot: bundleRoot }) }) })] }));
+    }
+    render() {
+        const { classes, } = this.props;
+        return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: this.viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, ref: this.onRef }) }) })] }));
+    }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAOA,gEA0BC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAgEA,gEAqKC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -1,9 +1,124 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { TitleInfo, } from '@vitessce/vit-s';
-import { ViewHelpMapping } from '@vitessce/constants-internal';
+/* eslint-disable no-unused-vars */
+import React, { useCallback, useMemo } from 'react';
+import { TitleInfo, useCoordination, useObsSetsData, useLoaders, useObsEmbeddingData, } 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 { 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 { closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Neuroglancer', viewerState: viewerStateInitial = null, helpText = ViewHelpMapping.NEUROGLANCER, } = props;
-    return (_jsx(TitleInfo, { title: title, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: true, children: viewerStateInitial && _jsx(Neuroglancer, { viewerState: viewerStateInitial }) }));
+    const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title = 'Neuroglancer', 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 (_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 }) }));
 }

package/dist-tsc/styles.js

@@ -1112,7 +1112,7 @@ const globalNeuroglancerStyles = {
         overflowY: 'scroll',
         wordWrap: 'break-word',
     },
-    '.neuroglancer-multiline-autocomplete-completion:nth-child(even):not(.neuroglancer-multiline-autocomplete-completion-active)': {
+    '.neuroglancer-multiline-autocomplete-completion:nth-of-type(even):not(.neuroglancer-multiline-autocomplete-completion-active)': {
         backgroundColor: '#2b2b2b',
     },
     '.neuroglancer-multiline-autocomplete-completion:hover': {
@@ -1414,7 +1414,7 @@ const globalNeuroglancerStyles = {
         backgroundClip: 'border-box',
         backgroundColor: '#8080ff80',
     },
-    '.neuroglancer-stack-layout-drop-placeholder:first-child, .neuroglancer-stack-layout-drop-placeholder:last-child': {
+    '.neuroglancer-stack-layout-drop-placeholder:first-of-type, .neuroglancer-stack-layout-drop-placeholder:last-of-type': {
         display: 'none',
     },
     '.neuroglancer-panel': { flex: 1 },
@@ -1560,7 +1560,7 @@ const globalNeuroglancerStyles = {
         alignItems: 'center',
     },
     '.neuroglancer-position-widget input:disabled': { pointerEvents: 'none' },
-    '.neuroglancer-position-widget .neuroglancer-copy-button:first-child': {
+    '.neuroglancer-position-widget .neuroglancer-copy-button:first-of-type': {
         display: 'none',
     },
     '.neuroglancer-position-dimension-coordinate, .neuroglancer-position-dimension-name, .neuroglancer-position-dimension-scale': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,10 +17,14 @@
   ],
   "dependencies": {
     "@janelia-flyem/react-neuroglancer": "^2.5.0",
-    "@vitessce/neuroglancer-workers": "3.6.0",
-    "@vitessce/styles": "3.6.0",
-    "@vitessce/constants-internal": "3.6.0",
-    "@vitessce/vit-s": "3.6.0"
+    "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": "^6.6.3",

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, NeuroglancerGlobalStyles } 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 (
-    <>
-      <NeuroglancerGlobalStyles classes={classes} />
-      <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>
+      </>
+    );
+  }
 }