@vitessce/neuroglancer 3.9.6 → 4.0.0-test.0

package/dist/index.js

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

package/dist-tsc/Neuroglancer.d.ts

@@ -3,8 +3,6 @@ export class NeuroglancerComp {
     bundleRoot: any;
     cellColorMapping: any;
     justReceivedExternalUpdate: boolean;
-    prevElement: any;
-    prevClickHandler: ((event: any) => void) | null;
     prevMouseStateChanged: any;
     prevHoverHandler: (() => void) | null;
     onViewerStateChanged(nextState: any): void;
@@ -12,6 +10,6 @@ export class NeuroglancerComp {
     latestOnSegmentClick: any;
     latestOnSelectHoveredCoords: any;
     componentDidUpdate(prevProps: any): void;
-    render(): JSX.Element;
+    render(): any;
 }
 //# 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":"AAUA;IACE,wBAcC;IAZC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,iBAAuB;IACvB,gDAA4B;IAC5B,2BAAiC;IACjC,sCAA4B;IAsD9B,2CAGC;IAjDD,4BA4CC;IAhDC,0BAAgD;IAChD,iCAA8D;IAsDhE,yCAQC;IAED,sBAoBC;CACF"}
+{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAUA;IACE,wBAYC;IAVC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,2BAAiC;IACjC,sCAA4B;IAwC9B,2CAGC;IAnCD,4BA8BC;IAlCC,0BAAgD;IAChD,iCAA8D;IAwChE,yCAKC;IAED,cAoBC;CACF"}

package/dist-tsc/Neuroglancer.js

@@ -13,8 +13,6 @@ export class NeuroglancerComp extends PureComponent {
         this.bundleRoot = createWorker();
         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);
@@ -29,42 +27,25 @@ export class NeuroglancerComp extends PureComponent {
         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) {
-                    // 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);
-                        }
-                    });
-                }
-            };
+            // To disable space interaction causing 4panels layout
+            viewer.inputEventBindings.sliceView.set('at:space', () => { });
+            viewer.inputEventBindings.perspectiveView.set('at:space', () => { });
             this.prevHoverHandler = () => {
                 if (viewer.mouseState.pickedValue !== undefined) {
                     const pickedSegment = viewer.mouseState.pickedValue;
                     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('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;
         }
     }
@@ -73,10 +54,7 @@ export class NeuroglancerComp extends PureComponent {
         setViewerState(nextState);
     }
     componentDidUpdate(prevProps) {
-        const { onSegmentClick, onSelectHoveredCoords } = this.props;
-        if (prevProps.onSegmentClick !== onSegmentClick) {
-            this.latestOnSegmentClick = onSegmentClick;
-        }
+        const { onSelectHoveredCoords } = this.props;
         if (prevProps.onSelectHoveredCoords !== onSelectHoveredCoords) {
             this.latestOnSelectHoveredCoords = onSelectHoveredCoords;
         }

package/dist-tsc/NeuroglancerSubscriber.d.ts

@@ -1,2 +1,2 @@
-export function NeuroglancerSubscriber(props: any): JSX.Element;
+export function NeuroglancerSubscriber(props: any): any;
 //# sourceMappingURL=NeuroglancerSubscriber.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAsEA,gEAusBC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAwEA,wDA0sBC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -17,6 +17,7 @@ const ZOOM_EPS = 1e-2;
 const ROTATION_EPS = 1e-3;
 const TARGET_EPS = 0.5;
 const NG_ROT_COOLDOWN_MS = 120;
+const GUIDE_URL = 'https://vitessce.io/docs/ng-guide/';
 const LAST_INTERACTION_SOURCE = {
     vitessce: 'vitessce',
     neuroglancer: 'neuroglancer',
@@ -324,6 +325,8 @@ export function NeuroglancerSubscriber(props) {
         };
     }, []);
     const onSegmentClick = useCallback((value) => {
+        // Note: this callback is no longer called by the child component.
+        // Reference: https://github.com/vitessce/vitessce/pull/2439
         if (value) {
             const id = String(value);
             const selectedCellIds = [id];
@@ -498,5 +501,5 @@ export function NeuroglancerSubscriber(props) {
     // }
     const hasLayers = derivedViewerState?.layers?.length > 0;
     // console.log(derivedViewerState);
-    return (_jsx(TitleInfo, { title: title, info: subtitle, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: isReady, errors: errors, withPadding: false, children: _jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, ref: containerRef, children: [_jsx("div", { style: { position: 'absolute', top: 0, right: 0, zIndex: 50 }, children: _jsx(MultiLegend, { theme: "dark", maxHeight: ngHeight, segmentationLayerScopes: segmentationLayerScopes, segmentationLayerCoordination: segmentationLayerCoordination, segmentationChannelScopesByLayer: segmentationChannelScopesByLayer, segmentationChannelCoordination: segmentationChannelCoordination }) }), hasLayers ? (_jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMapping, setViewerState: handleStateUpdate })) : null] }) }));
+    return (_jsx(TitleInfo, { title: title, info: subtitle, helpText: helpText, isSpatial: true, theme: theme, closeButtonVisible: closeButtonVisible, downloadButtonVisible: downloadButtonVisible, removeGridComponent: removeGridComponent, isReady: isReady, errors: errors, withPadding: false, guideUrl: GUIDE_URL, children: _jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, ref: containerRef, children: [_jsx("div", { style: { position: 'absolute', top: 0, right: 0, zIndex: 50 }, children: _jsx(MultiLegend, { theme: "dark", maxHeight: ngHeight, segmentationLayerScopes: segmentationLayerScopes, segmentationLayerCoordination: segmentationLayerCoordination, segmentationChannelScopesByLayer: segmentationChannelScopesByLayer, segmentationChannelCoordination: segmentationChannelCoordination }) }), hasLayers ? (_jsx(NeuroglancerComp, { classes: classes, onSegmentClick: onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMapping, setViewerState: handleStateUpdate })) : null] }) }));
 }

package/dist-tsc/ReactNeuroglancer.d.ts

@@ -97,7 +97,7 @@ export default class Neuroglancer {
     handlerRemovers: any[] | undefined;
     selectedChanged: (layer: any) => void;
     visibleChanged: (layer: any) => void;
-    render(): JSX.Element;
+    render(): any;
 }
 export type NgProps = {
     perspectiveZoom: number;

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

@@ -1 +1 @@
-{"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"}
+{"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,cAOC;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.9.6",
+  "version": "4.0.0-test.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -18,24 +18,32 @@
   "dependencies": {
     "@janelia-flyem/neuroglancer": "2.37.5",
     "lodash-es": "^4.17.21",
-    "three": "^0.154.0",
-    "react": "18.3.1",
-    "@vitessce/neuroglancer-workers": "3.9.6",
-    "@vitessce/vit-s": "3.9.6",
-    "@vitessce/styles": "3.9.6",
-    "@vitessce/utils": "3.9.6",
-    "@vitessce/constants-internal": "3.9.6",
-    "@vitessce/sets-utils": "3.9.6",
-    "@vitessce/tooltip": "3.9.6",
-    "@vitessce/legend": "3.9.6"
+    "react": "19.1.0",
+    "@vitessce/styles": "4.0.0-test.0",
+    "@vitessce/vit-s": "4.0.0-test.0",
+    "@vitessce/constants-internal": "4.0.0-test.0",
+    "@vitessce/sets-utils": "4.0.0-test.0",
+    "@vitessce/utils": "4.0.0-test.0",
+    "@vitessce/legend": "4.0.0-test.0",
+    "@vitessce/tooltip": "4.0.0-test.0",
+    "@vitessce/neuroglancer-workers": "4.0.0-test.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "react-dom": "18.3.1",
+    "three": "^0.159.0",
+    "react-dom": "19.1.0",
     "vite": "^7.0.0",
     "vitest": "^3.1.4"
   },
+  "peerDependencies": {
+    "three": ">=0.159.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    }
+  },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.mjs",
     "test": "pnpm exec vitest --run"

package/src/Neuroglancer.js

@@ -14,8 +14,6 @@ export class NeuroglancerComp extends PureComponent {
     this.bundleRoot = createWorker();
     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);
@@ -32,41 +30,27 @@ export class NeuroglancerComp extends PureComponent {
     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) {
-          // 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);
-            }
-          });
-        }
-      };
+
+      // To disable space interaction causing 4panels layout
+      viewer.inputEventBindings.sliceView.set('at:space', () => {});
+      viewer.inputEventBindings.perspectiveView.set('at:space', () => {});
+
       this.prevHoverHandler = () => {
         if (viewer.mouseState.pickedValue !== undefined) {
           const pickedSegment = viewer.mouseState.pickedValue;
           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('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;
     }
   }
@@ -77,10 +61,7 @@ export class NeuroglancerComp extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    const { onSegmentClick, onSelectHoveredCoords } = this.props;
-    if (prevProps.onSegmentClick !== onSegmentClick) {
-      this.latestOnSegmentClick = onSegmentClick;
-    }
+    const { onSelectHoveredCoords } = this.props;
     if (prevProps.onSelectHoveredCoords !== onSelectHoveredCoords) {
       this.latestOnSelectHoveredCoords = onSelectHoveredCoords;
     }

package/src/NeuroglancerSubscriber.js

@@ -57,6 +57,8 @@ const ROTATION_EPS = 1e-3;
 const TARGET_EPS = 0.5;
 const NG_ROT_COOLDOWN_MS = 120;
 
+const GUIDE_URL = 'https://vitessce.io/docs/ng-guide/';
+
 const LAST_INTERACTION_SOURCE = {
   vitessce: 'vitessce',
   neuroglancer: 'neuroglancer',
@@ -512,6 +514,8 @@ export function NeuroglancerSubscriber(props) {
   }, []);
 
   const onSegmentClick = useCallback((value) => {
+    // Note: this callback is no longer called by the child component.
+    // Reference: https://github.com/vitessce/vitessce/pull/2439
     if (value) {
       const id = String(value);
       const selectedCellIds = [id];
@@ -753,6 +757,7 @@ export function NeuroglancerSubscriber(props) {
       isReady={isReady}
       errors={errors}
       withPadding={false}
+      guideUrl={GUIDE_URL}
     >
       <div style={{ position: 'relative', width: '100%', height: '100%' }} ref={containerRef}>
         <div style={{ position: 'absolute', top: 0, right: 0, zIndex: 50 }}>