@vitessce/neuroglancer 3.5.12 → 3.6.1

package/dist/index.js

@@ -1,6 +1,4 @@
-import { N } from "./index-2198a785.js";
-import "react";
-import "@vitessce/vit-s";
+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, globalNeuroglancerCss } 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("style", { children: globalNeuroglancerCss }), _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":"AAQA,gEA0BC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAgEA,gEAqKC"}

package/dist-tsc/NeuroglancerSubscriber.js

@@ -1,8 +1,124 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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.d.ts

@@ -1,3 +1,11 @@
-export const globalNeuroglancerCss: "\n\n.neuroglancer-position-widget, \n.neuroglancer-viewer-top-row,\n.neuroglancer-layer-panel, \n.neuroglancer-side-panel-column,\n.neuroglancer-data-panel-layout-controls button{\n    display: none !important;\n}\n    \n.neuroglancer-segment-list-header-label {\n  display: none !important;\n}\n.overlay {\n  height:100%;\n  width:100%;\n  position:fixed;\n  z-index:99;\n  top:0;\n  left:0;\n  background-color:#000c;\n}\n.overlay-content {\n  position:absolute;\n  top:50%;\n  left:50%;\n  transform:translate(-50%,-50%);\n  background-color:#fff;\n  z-index:100;\n  color:#000;\n  padding:1em;\n}\n.neuroglancer-state-editor {\n  width: 80%\n}\n.close-button {\n  position: absolute;\n  right: 15px\n}\n\n.CodeMirror {\n  font-family: monospace;\n  height: 300px;\n  color: #000;\n  direction: ltr\n}\n\n.CodeMirror-lines {\n  padding: 4px 0\n}\n\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n  padding: 0 4px\n}\n\n.CodeMirror-scrollbar-filler,\n.CodeMirror-gutter-filler {\n  background-color: #fff\n}\n\n.CodeMirror-gutters {\n  border-right: 1px solid #ddd;\n  background-color: #f7f7f7;\n  white-space: nowrap\n}\n\n.CodeMirror-linenumber {\n  padding: 0 3px 0 5px;\n  min-width: 20px;\n  text-align: right;\n  color: #999;\n  white-space: nowrap\n}\n\n.CodeMirror-guttermarker {\n  color: #000\n}\n\n.CodeMirror-guttermarker-subtle {\n  color: #999\n}\n\n.CodeMirror-cursor {\n  border-left: 1px solid black;\n  border-right: none;\n  width: 0\n}\n\n.CodeMirror div.CodeMirror-secondarycursor {\n  border-left: 1px solid silver\n}\n\n.cm-fat-cursor .CodeMirror-cursor {\n  width: auto;\n  border: 0 !important;\n  background: #7e7\n}\n\n.cm-fat-cursor div.CodeMirror-cursors {\n  z-index: 1\n}\n\n.cm-fat-cursor-mark {\n  background-color: #14ff1480;\n  -webkit-animation: blink 1.06s steps(1) infinite;\n  -moz-animation: blink 1.06s steps(1) infinite;\n  animation: blink 1.06s steps(1) infinite\n}\n\n.cm-animate-fat-cursor {\n  width: auto;\n  border: 0;\n  -webkit-animation: blink 1.06s steps(1) infinite;\n  -moz-animation: blink 1.06s steps(1) infinite;\n  animation: blink 1.06s steps(1) infinite;\n  background-color: #7e7\n}\n\n@-moz-keyframes blink {\n  50% {\n    background-color: transparent\n  }\n}\n\n@-webkit-keyframes blink {\n  50% {\n    background-color: transparent\n  }\n}\n\n@keyframes blink {\n  50% {\n    background-color: transparent\n  }\n}\n\n.cm-tab {\n  display: inline-block;\n  text-decoration: inherit\n}\n\n.CodeMirror-rulers {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: -50px;\n  bottom: 0;\n  overflow: hidden\n}\n\n.CodeMirror-ruler {\n  border-left: 1px solid #ccc;\n  top: 0;\n  bottom: 0;\n  position: absolute\n}\n\n.cm-s-default .cm-header {\n  color: #00f\n}\n\n.cm-s-default .cm-quote {\n  color: #090\n}\n\n.cm-negative {\n  color: #d44\n}\n\n.cm-positive {\n  color: #292\n}\n\n.cm-header,\n.cm-strong {\n  font-weight: bold\n}\n\n.cm-em {\n  font-style: italic\n}\n\n.cm-link {\n  text-decoration: underline\n}\n\n.cm-strikethrough {\n  text-decoration: line-through\n}\n\n.cm-s-default .cm-keyword {\n  color: #708\n}\n\n.cm-s-default .cm-atom {\n  color: #219\n}\n\n.cm-s-default .cm-number {\n  color: #164\n}\n\n.cm-s-default .cm-def {\n  color: #00f\n}\n\n.cm-s-default .cm-variable-2 {\n  color: #05a\n}\n\n.cm-s-default .cm-variable-3,\n.cm-s-default .cm-type {\n  color: #085\n}\n\n.cm-s-default .cm-comment {\n  color: #a50\n}\n\n.cm-s-default .cm-string {\n  color: #a11\n}\n\n.cm-s-default .cm-string-2 {\n  color: #f50\n}\n\n.cm-s-default .cm-meta {\n  color: #555\n}\n\n.cm-s-default .cm-qualifier {\n  color: #555\n}\n\n.cm-s-default .cm-builtin {\n  color: #30a\n}\n\n.cm-s-default .cm-bracket {\n  color: #997\n}\n\n.cm-s-default .cm-tag {\n  color: #170\n}\n\n.cm-s-default .cm-attribute {\n  color: #00c\n}\n\n.cm-s-default .cm-hr {\n  color: #999\n}\n\n.cm-s-default .cm-link {\n  color: #00c\n}\n\n.cm-s-default .cm-error {\n  color: red\n}\n\n.cm-invalidchar {\n  color: red\n}\n\n.CodeMirror-composing {\n  border-bottom: 2px solid\n}\n\ndiv.CodeMirror span.CodeMirror-matchingbracket {\n  color: #0b0\n}\n\ndiv.CodeMirror span.CodeMirror-nonmatchingbracket {\n  color: #a22\n}\n\n.CodeMirror-matchingtag {\n  background: rgba(255, 150, 0, .3)\n}\n\n.CodeMirror-activeline-background {\n  background: #e8f2ff\n}\n\n.CodeMirror {\n  position: relative;\n  overflow: hidden;\n  background: white\n}\n\n.CodeMirror-scroll {\n  overflow: scroll !important;\n  margin-bottom: -50px;\n  margin-right: -50px;\n  padding-bottom: 50px;\n  height: 100%;\n  outline: none;\n  position: relative\n}\n\n.CodeMirror-sizer {\n  position: relative;\n  border-right: 50px solid transparent\n}\n\n.CodeMirror-vscrollbar,\n.CodeMirror-hscrollbar,\n.CodeMirror-scrollbar-filler,\n.CodeMirror-gutter-filler {\n  position: absolute;\n  z-index: 6;\n  display: none;\n  outline: none\n}\n\n.CodeMirror-vscrollbar {\n  right: 0;\n  top: 0;\n  overflow-x: hidden;\n  overflow-y: scroll\n}\n\n.CodeMirror-hscrollbar {\n  bottom: 0;\n  left: 0;\n  overflow-y: hidden;\n  overflow-x: scroll\n}\n\n.CodeMirror-scrollbar-filler {\n  right: 0;\n  bottom: 0\n}\n\n.CodeMirror-gutter-filler {\n  left: 0;\n  bottom: 0\n}\n\n.CodeMirror-gutters {\n  position: absolute;\n  left: 0;\n  top: 0;\n  min-height: 100%;\n  z-index: 3\n}\n\n.CodeMirror-gutter {\n  white-space: normal;\n  height: 100%;\n  display: inline-block;\n  vertical-align: top;\n  margin-bottom: -50px\n}\n\n.CodeMirror-gutter-wrapper {\n  position: absolute;\n  z-index: 4;\n  background: none !important;\n  border: none !important\n}\n\n.CodeMirror-gutter-background {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 4\n}\n\n.CodeMirror-gutter-elt {\n  position: absolute;\n  cursor: default;\n  z-index: 4\n}\n\n.CodeMirror-gutter-wrapper ::selection {\n  background-color: transparent\n}\n\n.CodeMirror-gutter-wrapper ::-moz-selection {\n  background-color: transparent\n}\n\n.CodeMirror-lines {\n  cursor: text;\n  min-height: 1px\n}\n\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n  -moz-border-radius: 0;\n  -webkit-border-radius: 0;\n  border-radius: 0;\n  border-width: 0;\n  background: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  margin: 0;\n  white-space: pre;\n  word-wrap: normal;\n  line-height: inherit;\n  color: inherit;\n  z-index: 2;\n  position: relative;\n  overflow: visible;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-variant-ligatures: contextual;\n  font-variant-ligatures: contextual\n}\n\n.CodeMirror-wrap pre.CodeMirror-line,\n.CodeMirror-wrap pre.CodeMirror-line-like {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  word-break: normal\n}\n\n.CodeMirror-linebackground {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 0\n}\n\n.CodeMirror-linewidget {\n  position: relative;\n  z-index: 2;\n  padding: .1px\n}\n\n.CodeMirror-rtl pre {\n  direction: rtl\n}\n\n.CodeMirror-code {\n  outline: none\n}\n\n.CodeMirror-scroll,\n.CodeMirror-sizer,\n.CodeMirror-gutter,\n.CodeMirror-gutters,\n.CodeMirror-linenumber {\n  -moz-box-sizing: content-box;\n  box-sizing: content-box\n}\n\n.CodeMirror-measure {\n  position: absolute;\n  width: 100%;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden\n}\n\n.CodeMirror-cursor {\n  position: absolute;\n  pointer-events: none\n}\n\n.CodeMirror-measure pre {\n  position: static\n}\n\ndiv.CodeMirror-cursors {\n  visibility: hidden;\n  position: relative;\n  z-index: 3\n}\n\ndiv.CodeMirror-dragcursors {\n  visibility: visible\n}\n\n.CodeMirror-focused div.CodeMirror-cursors {\n  visibility: visible\n}\n\n.CodeMirror-selected {\n  background: #d9d9d9\n}\n\n.CodeMirror-focused .CodeMirror-selected {\n  background: #d7d4f0\n}\n\n.CodeMirror-crosshair {\n  cursor: crosshair\n}\n\n.CodeMirror-line::selection,\n.CodeMirror-line>span::selection,\n.CodeMirror-line>span>span::selection {\n  background: #d7d4f0\n}\n\n.CodeMirror-line::-moz-selection,\n.CodeMirror-line>span::-moz-selection,\n.CodeMirror-line>span>span::-moz-selection {\n  background: #d7d4f0\n}\n\n.cm-searching {\n  background-color: #ffa;\n  background-color: #ff06\n}\n\n.cm-force-border {\n  padding-right: .1px\n}\n\n@media print {\n  .CodeMirror div.CodeMirror-cursors {\n    visibility: hidden\n  }\n}\n\n.cm-tab-wrap-hack:after {\n  content: \"\"\n}\n\nspan.CodeMirror-selectedtext {\n  background: none\n}\n\n.CodeMirror-foldmarker {\n  color: #00f;\n  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;\n  font-family: arial;\n  line-height: .3;\n  cursor: pointer\n}\n\n.CodeMirror-foldgutter {\n  width: .7em\n}\n\n.CodeMirror-foldgutter-open,\n.CodeMirror-foldgutter-folded {\n  cursor: pointer\n}\n\n.CodeMirror-foldgutter-open:after {\n  content: \"\\25be\"\n}\n\n.CodeMirror-foldgutter-folded:after {\n  content: \"\\25b8\"\n}\n\n.CodeMirror-lint-markers {\n  width: 16px\n}\n\n.CodeMirror-lint-tooltip {\n  background-color: #ffd;\n  border: 1px solid black;\n  border-radius: 4px;\n  color: #000;\n  font-family: monospace;\n  font-size: 10pt;\n  overflow: hidden;\n  padding: 2px 5px;\n  position: fixed;\n  white-space: pre;\n  white-space: pre-wrap;\n  z-index: 100;\n  max-width: 600px;\n  opacity: 0;\n  transition: opacity .4s;\n  -moz-transition: opacity .4s;\n  -webkit-transition: opacity .4s;\n  -o-transition: opacity .4s;\n  -ms-transition: opacity .4s\n}\n\n.CodeMirror-lint-mark {\n  background-position: left bottom;\n  background-repeat: repeat-x\n}\n\n.CodeMirror-lint-mark-warning {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=)\n}\n\n.CodeMirror-lint-mark-error {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==)\n}\n\n.CodeMirror-lint-marker {\n  background-position: center center;\n  background-repeat: no-repeat;\n  cursor: pointer;\n  display: inline-block;\n  height: 16px;\n  width: 16px;\n  vertical-align: middle;\n  position: relative\n}\n\n.CodeMirror-lint-message {\n  padding-left: 18px;\n  background-position: top left;\n  background-repeat: no-repeat\n}\n\n.CodeMirror-lint-marker-warning,\n.CodeMirror-lint-message-warning {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=)\n}\n\n.CodeMirror-lint-marker-error,\n.CodeMirror-lint-message-error {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=)\n}\n\n.CodeMirror-lint-marker-multiple {\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  width: 100%;\n  height: 100%\n}\n";
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"neuroglancerWrapper">;
+export function NeuroglancerGlobalStyles(props: any): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"neuroglancerWrapper", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAmBA,4jXAqnBE;AAEF,2HA27DI"}
+{"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"}