cloudmr-ux 4.8.8 → 4.9.0

package/dist/CmrComponents/niivue-viewer/CloudMrNiivueViewer.js

@@ -118,67 +118,69 @@ window.nv = nv;
 // It is exported so that it can be used in other projects easily
 export default function CloudMrNiivueViewer(props) {
     var _this = this;
+    var _a, _b;
     var endpoints = getEndpoints(); // CloudMR core endpoints (mode1/mode2 helper)
     var selectedVolume = props.selectedVolume;
     var setSelectedVolume = props.setSelectedVolume;
     var setWarning = props.setWarning, setWarningOpen = props.setWarningOpen;
     // const nv = props.nv;
-    var _a = React.useState(false), openSettings = _a[0], setOpenSettings = _a[1];
-    var _b = React.useState(false), openLayers = _b[0], setOpenLayers = _b[1];
-    var _c = React.useState(nv.opts.crosshairColor), crosshairColor = _c[0], setCrosshairColor = _c[1];
-    var _d = React.useState(nv.opts.selectionBoxColor), selectionBoxColor = _d[0], setSelectionBoxColor = _d[1];
-    var _e = React.useState(nv.opts.backColor), backColor = _e[0], setBackColor = _e[1];
-    var _f = React.useState(nv.opts.clipPlaneColor), clipPlaneColor = _f[0], setClipPlaneColor = _f[1];
-    var _g = React.useState(nv.volumes), layers = _g[0], setLayers = _g[1];
-    var _h = React.useState(false), cornerText = _h[0], setCornerText = _h[1];
-    var _j = React.useState(true), radiological = _j[0], setRadiological = _j[1];
-    var _k = React.useState(false), crosshair3D = _k[0], setCrosshair3D = _k[1];
-    var _l = React.useState(nv.opts.textHeight), textSize = _l[0], setTextSize = _l[1];
-    var _m = React.useState(nv.opts.isColorbar), colorBar = _m[0], setColorBar = _m[1];
-    var _o = React.useState(nv.opts.isSliceMM), worldSpace = _o[0], setWorldSpace = _o[1];
-    var _p = React.useState(nv.currentClipPlaneIndex > 0 ? true : false), clipPlane = _p[0], setClipPlane = _p[1];
+    var _c = React.useState(false), openSettings = _c[0], setOpenSettings = _c[1];
+    var _d = React.useState(false), openLayers = _d[0], setOpenLayers = _d[1];
+    var _e = React.useState(nv.opts.crosshairColor), crosshairColor = _e[0], setCrosshairColor = _e[1];
+    var _f = React.useState(nv.opts.selectionBoxColor), selectionBoxColor = _f[0], setSelectionBoxColor = _f[1];
+    var _g = React.useState(nv.opts.backColor), backColor = _g[0], setBackColor = _g[1];
+    var _h = React.useState(nv.opts.clipPlaneColor), clipPlaneColor = _h[0], setClipPlaneColor = _h[1];
+    var _j = React.useState(nv.volumes), layers = _j[0], setLayers = _j[1];
+    var _k = React.useState(false), cornerText = _k[0], setCornerText = _k[1];
+    var _l = React.useState(true), radiological = _l[0], setRadiological = _l[1];
+    var _m = React.useState(false), crosshair3D = _m[0], setCrosshair3D = _m[1];
+    var _o = React.useState(nv.opts.textHeight), textSize = _o[0], setTextSize = _o[1];
+    var _p = React.useState(nv.opts.isColorbar), colorBar = _p[0], setColorBar = _p[1];
+    var _q = React.useState(nv.opts.isSliceMM), worldSpace = _q[0], setWorldSpace = _q[1];
+    var _r = React.useState(nv.currentClipPlaneIndex > 0 ? true : false), clipPlane = _r[0], setClipPlane = _r[1];
     // TODO: add crosshair size state and setter
-    var _q = React.useState(1.0), opacity = _q[0], setopacity = _q[1];
-    var _r = React.useState(nv.opts.drawingEnabled), drawingEnabled = _r[0], setDrawingEnabled = _r[1];
-    var _s = React.useState(nv.opts.penValue), drawPen = _s[0], setDrawPen = _s[1];
-    var _t = React.useState(0.8), drawOpacity = _t[0], setDrawOpacity = _t[1];
-    var _u = React.useState(nv.opts.crosshairColor[3]), crosshairOpacity = _u[0], setCrosshairOpacity = _u[1];
-    var _v = React.useState(nv.opts.clipPlaneColor[3]), clipPlaneOpacity = _v[0], setClipPlaneOpacity = _v[1];
-    var _w = React.useState(true), locationTableVisible = _w[0], setLocationTableVisible = _w[1];
-    var _x = React.useState([]), locationData = _x[0], setLocationData = _x[1];
-    var _y = React.useState(2), decimalPrecision = _y[0], setDecimalPrecision = _y[1];
-    var _z = React.useState(nv.opts.isOrientCube), orientCube = _z[0], setOrientCube = _z[1];
-    var _0 = React.useState(nv.opts.isRuler), ruler = _0[0], setRuler = _0[1];
-    var _1 = React.useState(nv.opts.multiplanarPadPixels), multiplanarPadPixels = _1[0], setMultiplanarPadPixels = _1[1];
-    var _2 = React.useState(nv.opts.maxDrawUndoBitmaps), maxDrawUndoBitmaps = _2[0], setMaxDrawUndoBitmaps = _2[1];
-    var _3 = React.useState(nv.opts.sagittalNoseLeft), sagittalNoseLeft = _3[0], setSagittalNoseLeft = _3[1];
-    var _4 = React.useState(nv.opts.rulerWidth), rulerWidth = _4[0], setRulerWidth = _4[1];
-    var _5 = React.useState(nv.opts.longTouchTimeout), longTouchTimeout = _5[0], setLongTouchTimeout = _5[1];
-    var _6 = React.useState(nv.opts.doubleTouchTimeout), doubleTouchTimeout = _6[0], setDoubleTouchTimeout = _6[1];
-    var _7 = React.useState(nv.opts.isDragShowsMeasurementTool), dragToMeasure = _7[0], setDragToMeasure = _7[1];
-    var _8 = React.useState(nv.opts.rulerColor), rulerColor = _8[0], setRulerColor = _8[1];
-    var _9 = React.useState(nv.opts.rulerColor[3]), rulerOpacity = _9[0], setRulerOpacity = _9[1];
-    var _10 = React.useState(false), highDPI = _10[0], setHighDPI = _10[1];
-    var _11 = React.useState([]), rois = _11[0], setROIs = _11[1];
+    var _s = React.useState(1.0), opacity = _s[0], setopacity = _s[1];
+    var _t = React.useState(nv.opts.drawingEnabled), drawingEnabled = _t[0], setDrawingEnabled = _t[1];
+    var _u = React.useState(nv.opts.penValue), drawPen = _u[0], setDrawPen = _u[1];
+    var _v = React.useState(0.8), drawOpacity = _v[0], setDrawOpacity = _v[1];
+    var _w = React.useState(nv.opts.crosshairColor[3]), crosshairOpacity = _w[0], setCrosshairOpacity = _w[1];
+    var _x = React.useState(nv.opts.clipPlaneColor[3]), clipPlaneOpacity = _x[0], setClipPlaneOpacity = _x[1];
+    var _y = React.useState(true), locationTableVisible = _y[0], setLocationTableVisible = _y[1];
+    var _z = React.useState([]), locationData = _z[0], setLocationData = _z[1];
+    var _0 = React.useState(2), decimalPrecision = _0[0], setDecimalPrecision = _0[1];
+    var _1 = React.useState(nv.opts.isOrientCube), orientCube = _1[0], setOrientCube = _1[1];
+    var _2 = React.useState(nv.opts.isRuler), ruler = _2[0], setRuler = _2[1];
+    var _3 = React.useState(nv.opts.multiplanarPadPixels), multiplanarPadPixels = _3[0], setMultiplanarPadPixels = _3[1];
+    var _4 = React.useState(nv.opts.maxDrawUndoBitmaps), maxDrawUndoBitmaps = _4[0], setMaxDrawUndoBitmaps = _4[1];
+    var _5 = React.useState(nv.opts.sagittalNoseLeft), sagittalNoseLeft = _5[0], setSagittalNoseLeft = _5[1];
+    var _6 = React.useState(nv.opts.rulerWidth), rulerWidth = _6[0], setRulerWidth = _6[1];
+    var _7 = React.useState(nv.opts.longTouchTimeout), longTouchTimeout = _7[0], setLongTouchTimeout = _7[1];
+    var _8 = React.useState(nv.opts.doubleTouchTimeout), doubleTouchTimeout = _8[0], setDoubleTouchTimeout = _8[1];
+    var _9 = React.useState(nv.opts.isDragShowsMeasurementTool), dragToMeasure = _9[0], setDragToMeasure = _9[1];
+    var _10 = React.useState(nv.opts.rulerColor), rulerColor = _10[0], setRulerColor = _10[1];
+    var _11 = React.useState(nv.opts.rulerColor[3]), rulerOpacity = _11[0], setRulerOpacity = _11[1];
+    var _12 = React.useState(false), highDPI = _12[0], setHighDPI = _12[1];
+    var _13 = React.useState([]), rois = _13[0], setROIs = _13[1];
     // Persists zoom, gamma and opacity across volume/channel switches so they are not reset
     var savedViewStateRef = React.useRef(null);
-    var _12 = React.useState(false), showCrosshair = _12[0], setShowCrosshair = _12[1];
-    var _13 = useState('absolute'), complexMode = _13[0], setComplexMode = _13[1];
-    var _14 = useState(['absolute']), complexOptions = _14[0], setComplexOptions = _14[1];
-    var _15 = useState(true), roiVisible = _15[0], setROIVisible = _15[1];
-    var _16 = useState(0.8), drawingOpacity = _16[0], setDrawingOpacity = _16[1];
-    var _17 = useState(0), min = _17[0], setMin = _17[1];
-    var _18 = useState(1), max = _18[0], setMax = _18[1];
-    var _19 = useState(false), textsVisible = _19[0], setTextsVisible = _19[1];
-    var _20 = useState({ a: 1, b: 0 }), transformFactors = _20[0], setTransformFactors = _20[1];
-    var _21 = useState(false), saving = _21[0], setSaving = _21[1];
-    var _22 = useState(null), drawShapeTool = _22[0], setDrawShapeTool = _22[1];
-    var _23 = useState(null), shapeDraft = _23[0], setShapeDraft = _23[1];
-    var _24 = useState("freehand"), penDrawMode = _24[0], setPenDrawMode = _24[1];
-    var _25 = useState(0), polylineVertexCount = _25[0], setPolylineVertexCount = _25[1];
-    var _26 = useState(null), penDraft = _26[0], setPenDraft = _26[1];
-    var _27 = useState(1), brushSize = _27[0], setBrushSize = _27[1];
-    var _28 = useState(1), eraserSize = _28[0], setEraserSize = _28[1];
+    var loadingVolumeIndexRef = React.useRef(props.selectedVolume);
+    var _14 = React.useState(false), showCrosshair = _14[0], setShowCrosshair = _14[1];
+    var _15 = useState('absolute'), complexMode = _15[0], setComplexMode = _15[1];
+    var _16 = useState(['absolute']), complexOptions = _16[0], setComplexOptions = _16[1];
+    var _17 = useState(true), roiVisible = _17[0], setROIVisible = _17[1];
+    var _18 = useState(0.8), drawingOpacity = _18[0], setDrawingOpacity = _18[1];
+    var _19 = useState(0), min = _19[0], setMin = _19[1];
+    var _20 = useState(1), max = _20[0], setMax = _20[1];
+    var _21 = useState(false), textsVisible = _21[0], setTextsVisible = _21[1];
+    var _22 = useState({ a: 1, b: 0 }), transformFactors = _22[0], setTransformFactors = _22[1];
+    var _23 = useState(false), saving = _23[0], setSaving = _23[1];
+    var _24 = useState(null), drawShapeTool = _24[0], setDrawShapeTool = _24[1];
+    var _25 = useState(null), shapeDraft = _25[0], setShapeDraft = _25[1];
+    var _26 = useState("freehand"), penDrawMode = _26[0], setPenDrawMode = _26[1];
+    var _27 = useState(0), polylineVertexCount = _27[0], setPolylineVertexCount = _27[1];
+    var _28 = useState(null), penDraft = _28[0], setPenDraft = _28[1];
+    var _29 = useState(1), brushSize = _29[0], setBrushSize = _29[1];
+    var _30 = useState(1), eraserSize = _30[0], setEraserSize = _30[1];
     var brushSizeRef = React.useRef(1);
     var eraserSizeRef = React.useRef(1);
     var shapeDraftRef = React.useRef(null);
@@ -193,8 +195,8 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.penBounds = 0;
         nv.opts.penSize = 1;
     }, []);
-    var _29 = React.useState(1.0), gamma = _29[0], setGamma = _29[1];
-    var _30 = React.useState(0), gammaKey = _30[0], setGammaKey = _30[1];
+    var _31 = React.useState(1.0), gamma = _31[0], setGamma = _31[1];
+    var _32 = React.useState(0), gammaKey = _32[0], setGammaKey = _32[1];
     // Niivue → React bridge so other places (Toolbar) can force the UI to reset
     nv.onResetGamma = function () {
         setGamma(1.0);
@@ -217,6 +219,9 @@ export default function CloudMrNiivueViewer(props) {
             setTimeout(function (args) { return nv.resizeListener(); }, 700);
         }
     }, []);
+    React.useEffect(function () {
+        loadingVolumeIndexRef.current = props.selectedVolume;
+    }, [props.selectedVolume]);
     React.useEffect(function () {
         var _a;
         var nii = (_a = props.niis) === null || _a === void 0 ? void 0 : _a[props.selectedVolume];
@@ -239,18 +244,18 @@ export default function CloudMrNiivueViewer(props) {
     //   setLayers([...nv.volumes])
     // }, [])
     // values dualslider
-    var _31 = useState(0), rangeKey = _31[0], setRangeKey = _31[1];
+    var _33 = useState(0), rangeKey = _33[0], setRangeKey = _33[1];
     nv.onResetContrast = function () {
         setRangeKey(rangeKey + 1);
     };
-    var _32 = useState([0, 0, 0]), boundMins = _32[0], setBoundMins = _32[1];
-    var _33 = useState([1, 1, 1]), boundMaxs = _33[0], setBoundMaxs = _33[1];
-    var _34 = useState([0.5, 0.5, 0.5]), mms = _34[0], setMMs = _34[1];
+    var _34 = useState([0, 0, 0]), boundMins = _34[0], setBoundMins = _34[1];
+    var _35 = useState([1, 1, 1]), boundMaxs = _35[0], setBoundMaxs = _35[1];
+    var _36 = useState([0.5, 0.5, 0.5]), mms = _36[0], setMMs = _36[1];
     nv.onImageLoaded = function () {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         var oldCrosshairPos = __spreadArray([], nv.scene.crosshairPos, true);
         if (nv.volumes.length > 1) {
-            var nii = (_a = props.niis) === null || _a === void 0 ? void 0 : _a[props.selectedVolume];
+            var nii = (_b = (_a = props.niis) === null || _a === void 0 ? void 0 : _a[loadingVolumeIndexRef.current]) !== null && _b !== void 0 ? _b : (_c = props.niis) === null || _c === void 0 ? void 0 : _c[props.selectedVolume];
             if (nii === null || nii === void 0 ? void 0 : nii.link) {
                 nv.loadVolumes([niiToVolume(nii)]);
                 setWarning("Error loading results, please check internet connectivity");
@@ -298,17 +303,16 @@ export default function CloudMrNiivueViewer(props) {
         }
         else {
             nv.setGamma(1.0);
-            (_b = nv.onResetGamma) === null || _b === void 0 ? void 0 : _b.call(nv);
+            (_d = nv.onResetGamma) === null || _d === void 0 ? void 0 : _d.call(nv);
             nv.resetScene();
         }
         setLayers(__spreadArray([], nv.volumes, true));
         setBoundMins(nv.frac2mm([0, 0, 0]));
         setBoundMaxs(nv.frac2mm([1, 1, 1]));
         // setMMs(nv.frac2mm([0.5, 0.5, 0.5])); // Commented to prevent recentering on volume load; we now re-apply saved crosshair if available
-        if (verifyComplex(nv.volumes[0])) //Check if there are complex components
-            nvSetDisplayedVoxels('absolute');
-        else
-            nvSetDisplayedVoxels('absolute');
+        var currentNii = (_f = (_e = props.niis) === null || _e === void 0 ? void 0 : _e[loadingVolumeIndexRef.current]) !== null && _f !== void 0 ? _f : (_g = props.niis) === null || _g === void 0 ? void 0 : _g[props.selectedVolume];
+        verifyComplex(nv.volumes[0], currentNii);
+        nvSetDisplayedVoxels('absolute');
         // let volume = nv.volumes[0];
         nvSetDragMode(dragMode); // keep engine behavior in sync with dropdown
         // Re-apply world/voxel mode and last crosshair after resets
@@ -357,9 +361,18 @@ export default function CloudMrNiivueViewer(props) {
             return numbers;
         }
     }
-    function verifyComplex(volume) {
+    function verifyComplex(volume, nii) {
+        var _a, _b;
         volume.real = volume.img;
         setComplexMode('absolute');
+        if (isAbsoluteOnlyVolume(nii)) {
+            volume.absolute = new volume.img.constructor(volume.img.length);
+            for (var i = 0; i < volume.img.length; i++) {
+                var realPart = volume.real[i];
+                var imaginaryPart = (_b = (_a = volume.imaginary) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0;
+                volume.absolute[i] = Math.sqrt(realPart * realPart + imaginaryPart * imaginaryPart);
+            }
+        }
         // Ensure volume.imaginary is defined and has the same length as volume.img
         if (!volume.imaginary || volume.imaginary.length !== volume.img.length) {
             setComplexOptions(['absolute', 'real']);
@@ -397,6 +410,10 @@ export default function CloudMrNiivueViewer(props) {
         return !allZero;
     }
     function nvSetDisplayedVoxels(voxelType) {
+        var _a, _b, _c;
+        var nii = (_b = (_a = props.niis) === null || _a === void 0 ? void 0 : _a[loadingVolumeIndexRef.current]) !== null && _b !== void 0 ? _b : (_c = props.niis) === null || _c === void 0 ? void 0 : _c[selectedVolume];
+        if (isAbsoluteOnlyVolume(nii) && voxelType !== 'absolute')
+            return;
         setComplexMode(voxelType);
         var volume = nv.volumes[0];
         switch (voxelType) {
@@ -533,7 +550,7 @@ export default function CloudMrNiivueViewer(props) {
             setTextsVisible(true);
         }
     }
-    var _35 = useState("pan"), dragMode = _35[0], setDragMode = _35[1];
+    var _37 = useState("pan"), dragMode = _37[0], setDragMode = _37[1];
     function nvSetDragMode(dragMode) {
         switch (dragMode) {
             case "none":
@@ -847,7 +864,7 @@ export default function CloudMrNiivueViewer(props) {
         nv.opts.crosshairWidth = w;
         nv.drawScene();
     }
-    var _36 = useState({}), labelMapping = _36[0], setLabelMapping = _36[1];
+    var _38 = useState({}), labelMapping = _38[0], setLabelMapping = _38[1];
     function resampleImage(mapping) {
         if (mapping === void 0) { mapping = labelMapping; }
         var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
@@ -1370,8 +1387,12 @@ export default function CloudMrNiivueViewer(props) {
         setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
         nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
     }
-    var _37 = React.useState('axial'), sliceType = _37[0], setSliceType = _37[1];
+    var _39 = React.useState('axial'), sliceType = _39[0], setSliceType = _39[1];
+    var axialOnlyView = isAxialOnlyVolume((_a = props.niis) === null || _a === void 0 ? void 0 : _a[selectedVolume]);
+    var absoluteOnlyView = isAbsoluteOnlyVolume((_b = props.niis) === null || _b === void 0 ? void 0 : _b[selectedVolume]);
     function nvUpdateSliceType(newSliceType) {
+        if (axialOnlyView && newSliceType !== 'axial')
+            return;
         setSliceType(newSliceType);
         if (newSliceType === 'axial') {
             nv.setSliceType(nv.sliceTypeAxial);
@@ -1408,7 +1429,13 @@ export default function CloudMrNiivueViewer(props) {
         setLayers(__spreadArray([], nv.volumes, true));
     }
     function stylingProxy(nii) {
-        if (nii.dim === 2) {
+        var _a;
+        if (isAbsoluteOnlyVolume(nii)) {
+            if (complexMode !== 'absolute' && ((_a = nv.volumes[0]) === null || _a === void 0 ? void 0 : _a.absolute)) {
+                nvSetDisplayedVoxels('absolute');
+            }
+        }
+        if (isAxialOnlyVolume(nii)) {
             nvUpdateSliceType('axial');
             setShowCrosshair(false);
             setTextsVisible(false);
@@ -1432,11 +1459,12 @@ export default function CloudMrNiivueViewer(props) {
         var _this = this;
         return __generator(this, function (_a) {
             openVolume = function () { return __awaiter(_this, void 0, void 0, function () {
-                var vol, e_1;
+                var vol, nextNii, e_1;
                 var _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
+                            loadingVolumeIndexRef.current = volumeIndex;
                             nv.closeDrawing();
                             setDrawingChanged(false);
                             if (drawingEnabled)
@@ -1460,9 +1488,8 @@ export default function CloudMrNiivueViewer(props) {
                             nvSetDragMode(dragMode); // re-apply user's drag mode after Niivue resets
                             // Re-apply world/voxel mode and last crosshair after loading a new volume
                             nv.setSliceMM(worldSpace);
-                            //applySavedCrosshairIfAny();
-                            // ensure engine mode matches the remembered selection
-                            nvUpdateSliceType(sliceType);
+                            nextNii = props.niis[volumeIndex];
+                            nvUpdateSliceType(isAxialOnlyVolume(nextNii) ? 'axial' : sliceType);
                             nv.opts.crosshairWidth = showCrosshair ? 1 : 0;
                             return [3 /*break*/, 4];
                         case 3:
@@ -1510,14 +1537,14 @@ export default function CloudMrNiivueViewer(props) {
             return [2 /*return*/];
         });
     }); };
-    var _38 = useState(''), selectedROI = _38[0], setSelectedDrawingLayer = _38[1];
-    var _39 = useState(false), saveDialogOpen = _39[0], setSaveDialogOpen = _39[1];
-    var _40 = useState(function () {
-    }), saveConfirmCallback = _40[0], setSaveConfirmCallback = _40[1];
-    var _41 = useState(false), confirmationOpen = _41[0], setConfirmationOpen = _41[1];
-    var _42 = useState(function () { }), warningConfirmationCallback = _42[0], setWarningConfirmationCallback = _42[1];
-    var _43 = useState(function () { }), warningCancelCallback = _43[0], setWarningCancelCallback = _43[1];
-    var _44 = useState(false), drawingChanged = _44[0], setDrawingChanged = _44[1];
+    var _40 = useState(''), selectedROI = _40[0], setSelectedDrawingLayer = _40[1];
+    var _41 = useState(false), saveDialogOpen = _41[0], setSaveDialogOpen = _41[1];
+    var _42 = useState(function () {
+    }), saveConfirmCallback = _42[0], setSaveConfirmCallback = _42[1];
+    var _43 = useState(false), confirmationOpen = _43[0], setConfirmationOpen = _43[1];
+    var _44 = useState(function () { }), warningConfirmationCallback = _44[0], setWarningConfirmationCallback = _44[1];
+    var _45 = useState(function () { }), warningCancelCallback = _45[0], setWarningCancelCallback = _45[1];
+    var _46 = useState(false), drawingChanged = _46[0], setDrawingChanged = _46[1];
     // When new drawing strokes are made on top of a saved ROI, reset the dropdown
     // so it shows the "ROI Layer" placeholder instead of the stale saved name.
     React.useEffect(function () {
@@ -1887,7 +1914,7 @@ export default function CloudMrNiivueViewer(props) {
                 width: '100%',
                 alignItems: 'center',
                 justifyContent: 'center'
-            } }, { children: [_jsxs(SettingsPanel, __assign({ open: openSettings, width: 300, toggleMenu: toggleSettings }, { children: [_jsx(ColorPicker, { colorRGB01: backColor, onSetColor: nvUpdateBackColor, title: 'Background color' }), _jsx(ColorPicker, { colorRGB01: clipPlaneColor, onSetColor: nvUpdateClipPlaneColor, title: 'Clip plane color' }), _jsx(NumberPicker, { value: clipPlaneOpacity, onChange: nvUpdateClipPlaneOpacity, title: 'Clip plane opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: crosshairColor, onSetColor: nvUpdateCrosshairColor, title: 'Crosshair color' }), _jsx(NumberPicker, { value: crosshairOpacity, onChange: nvUpdateCrosshairOpacity, title: 'Crosshair opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: selectionBoxColor, onSetColor: nvUpdateSelectionBoxColor, title: 'Selection box color' }), _jsx(NumberPicker, { value: nv.opts.crosshairWidth, onChange: nvUpdateCrosshairSize, title: 'Crosshair size', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: textSize, onChange: nvUpdateTextSize, title: 'Text size', min: 0, max: 0.2, step: 0.01 }), _jsx(ColorPicker, { colorRGB01: rulerColor, onSetColor: nvUpdateRulerColor, title: 'Ruler color' }), _jsx(NumberPicker, { value: rulerWidth, onChange: nvUpdateRulerWidth, title: 'Ruler thickness', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: rulerOpacity, onChange: nvUpdateRulerOpacity, title: 'Ruler opacity', min: 0, max: 1, step: 0.1 }), _jsx(NumberPicker, { value: opacity, onChange: nvUpdateOpacity, title: 'Opacity', min: 0, max: 1, step: 0.01 }), _jsx(NumberPicker, { value: drawOpacity, onChange: nvUpdateDrawOpacity, title: 'Draw Opacity', min: 0, max: 1, step: 0.01 }), _jsx("label", __assign({ htmlFor: "drawPen" }, { children: "Draw color:" })), _jsxs("select", __assign({ name: "drawPen", id: "drawPen", onChange: nvUpdateDrawPen, value: drawPen }, { children: [_jsx("option", __assign({ value: "0" }, { children: "Erase" })), _jsx("option", __assign({ value: "1" }, { children: "Red" })), _jsx("option", __assign({ value: "2" }, { children: "Green" })), _jsx("option", __assign({ value: "3" }, { children: "Blue" })), _jsx("option", __assign({ value: "8" }, { children: "Filled Erase" })), _jsx("option", __assign({ value: "9" }, { children: "Filled Red" })), _jsx("option", __assign({ value: "10" }, { children: "Filled Green" })), _jsx("option", __assign({ value: "11" }, { children: "Filled Blue" })), _jsx("option", __assign({ value: "12" }, { children: "Erase Selected Cluster" }))] })), _jsx(Button, __assign({ title: 'Save image', onClick: nvSaveImage }, { children: "Save image" })), _jsx(NVSwitch, { checked: locationTableVisible, title: 'Location table', onChange: toggleLocationTable }), _jsx(NVSwitch, { checked: drawingEnabled, title: 'Enable drawing', onChange: nvUpdateDrawingEnabled }), _jsx(NVSwitch, { checked: orientCube, title: 'Orientation cube', onChange: nvUpdateOrientCube }), _jsx(NVSwitch, { checked: ruler, title: 'Ruler', onChange: nvUpdateRuler }), _jsx(NVSwitch, { checked: clipPlane, title: 'Clip plane', onChange: nvUpdateClipPlane }), _jsx(NVSwitch, { checked: cornerText, title: 'Corner text', onChange: nvUpdateCornerText }), _jsx(NVSwitch, { checked: radiological, title: 'radiological', onChange: nvUpdateRadiological }), _jsx(NVSwitch, { checked: crosshair3D, title: '3D crosshair', onChange: nvUpdateCrosshair3D }), _jsx(NVSwitch, { checked: colorBar, title: 'Show color bar', onChange: nvUpdateColorBar }), _jsx(NVSwitch, { checked: worldSpace, title: 'World space', onChange: nvUpdateWorldSpace }), _jsx(NVSwitch, { checked: sagittalNoseLeft, title: 'Nose left', onChange: nvUpdateSagittalNoseLeft }), _jsx(NVSwitch, { checked: dragToMeasure, title: 'Drag to measure', onChange: nvUpdateDragToMeasure }), _jsx(NVSwitch, { checked: highDPI, title: 'High DPI', onChange: nvUpdateHighDPI }), _jsx(NumberPicker, { value: decimalPrecision, onChange: updateDecimalPrecision, title: 'Decimal precision', min: 0, max: 8, step: 1 }), _jsx(NumberPicker, { value: multiplanarPadPixels, onChange: nvUpdateMultiplanarPadPixels, title: 'Multiplanar padding', min: 0, max: 20, step: 2 }), _jsx(NumberPicker, { value: maxDrawUndoBitmaps, onChange: nvUpdateMaxDrawUndoBitmaps, title: 'Max Draw Undos', min: 8, max: 28, step: 1 }), _jsx(NumberPicker, { value: longTouchTimeout, onChange: nvUpdateLongTouchTimeout, title: 'Long touch timeout msec', min: 1000, max: 5000, step: 100 }), _jsx(NumberPicker, { value: doubleTouchTimeout, onChange: nvUpdateDoubleTouchTimeout, title: 'Double touch timeout msec', min: 500, max: 999, step: 25 })] })), _jsx(LayersPanel, __assign({ open: openLayers, width: 320, onToggleMenu: toggleLayers, onAddLayer: addLayer }, { children: layerList })), _jsx(Toolbar, { nv: nv, nvUpdateSliceType: nvUpdateSliceType, sliceType: sliceType, toggleSettings: toggleSettings, toggleLayers: toggleLayers, volumes: props.niis.map(niiToVolume), selectedVolume: selectedVolume, setSelectedVolume: selectVolume, showColorBar: colorBar, toggleColorBar: nvUpdateColorBar, rois: props.rois, selectedROI: selectedROI, refreshROI: refreshROI, setSelectedROI: selectDrawingLayer, toggleShowCrosshair: nvUpdateCrosshair, showCrosshair: showCrosshair, dragMode: dragMode, setDragMode: nvSetDragMode, toggleRadiological: nvUpdateRadiological, radiological: radiological, saveROI: saveDrawingLayer, complexMode: complexMode, setComplexMode: nvSetDisplayedVoxels, complexOptions: complexOptions, labelsVisible: textsVisible, toggleLabelsVisible: nvToggleLabelVisible, saving: saving, setSaving: setSaving, drawingChanged: drawingChanged, resampleImage: resampleImage, accessToken: props.accessToken, pipelineId: props.pipelineID, roiDeleteUrl: props.roiDeleteUrl, refreshPipelineRois: props.refreshPipelineRois }), _jsx(CmrConfirmation, { name: 'New Changes Made', message: "Consider saving your drawing before switching.", open: confirmationOpen, setOpen: setConfirmationOpen, cancellable: true, confirmCallback: warningConfirmationCallback, cancelCallback: warningCancelCallback, cancelText: "Don't save" }), _jsx(CmrEditConfirmation, { name: 'Save drawings', message: 'Please enter the name of the saved drawing', open: saveDialogOpen, setOpen: setSaveDialogOpen, confirmCallback: saveConfirmCallback, cancellable: true, cancelCallback: function () {
+            } }, { children: [_jsxs(SettingsPanel, __assign({ open: openSettings, width: 300, toggleMenu: toggleSettings }, { children: [_jsx(ColorPicker, { colorRGB01: backColor, onSetColor: nvUpdateBackColor, title: 'Background color' }), _jsx(ColorPicker, { colorRGB01: clipPlaneColor, onSetColor: nvUpdateClipPlaneColor, title: 'Clip plane color' }), _jsx(NumberPicker, { value: clipPlaneOpacity, onChange: nvUpdateClipPlaneOpacity, title: 'Clip plane opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: crosshairColor, onSetColor: nvUpdateCrosshairColor, title: 'Crosshair color' }), _jsx(NumberPicker, { value: crosshairOpacity, onChange: nvUpdateCrosshairOpacity, title: 'Crosshair opacity', min: 0, max: 1, step: 0.1 }), _jsx(ColorPicker, { colorRGB01: selectionBoxColor, onSetColor: nvUpdateSelectionBoxColor, title: 'Selection box color' }), _jsx(NumberPicker, { value: nv.opts.crosshairWidth, onChange: nvUpdateCrosshairSize, title: 'Crosshair size', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: textSize, onChange: nvUpdateTextSize, title: 'Text size', min: 0, max: 0.2, step: 0.01 }), _jsx(ColorPicker, { colorRGB01: rulerColor, onSetColor: nvUpdateRulerColor, title: 'Ruler color' }), _jsx(NumberPicker, { value: rulerWidth, onChange: nvUpdateRulerWidth, title: 'Ruler thickness', min: 0, max: 10, step: 1 }), _jsx(NumberPicker, { value: rulerOpacity, onChange: nvUpdateRulerOpacity, title: 'Ruler opacity', min: 0, max: 1, step: 0.1 }), _jsx(NumberPicker, { value: opacity, onChange: nvUpdateOpacity, title: 'Opacity', min: 0, max: 1, step: 0.01 }), _jsx(NumberPicker, { value: drawOpacity, onChange: nvUpdateDrawOpacity, title: 'Draw Opacity', min: 0, max: 1, step: 0.01 }), _jsx("label", __assign({ htmlFor: "drawPen" }, { children: "Draw color:" })), _jsxs("select", __assign({ name: "drawPen", id: "drawPen", onChange: nvUpdateDrawPen, value: drawPen }, { children: [_jsx("option", __assign({ value: "0" }, { children: "Erase" })), _jsx("option", __assign({ value: "1" }, { children: "Red" })), _jsx("option", __assign({ value: "2" }, { children: "Green" })), _jsx("option", __assign({ value: "3" }, { children: "Blue" })), _jsx("option", __assign({ value: "8" }, { children: "Filled Erase" })), _jsx("option", __assign({ value: "9" }, { children: "Filled Red" })), _jsx("option", __assign({ value: "10" }, { children: "Filled Green" })), _jsx("option", __assign({ value: "11" }, { children: "Filled Blue" })), _jsx("option", __assign({ value: "12" }, { children: "Erase Selected Cluster" }))] })), _jsx(Button, __assign({ title: 'Save image', onClick: nvSaveImage }, { children: "Save image" })), _jsx(NVSwitch, { checked: locationTableVisible, title: 'Location table', onChange: toggleLocationTable }), _jsx(NVSwitch, { checked: drawingEnabled, title: 'Enable drawing', onChange: nvUpdateDrawingEnabled }), _jsx(NVSwitch, { checked: orientCube, title: 'Orientation cube', onChange: nvUpdateOrientCube }), _jsx(NVSwitch, { checked: ruler, title: 'Ruler', onChange: nvUpdateRuler }), _jsx(NVSwitch, { checked: clipPlane, title: 'Clip plane', onChange: nvUpdateClipPlane }), _jsx(NVSwitch, { checked: cornerText, title: 'Corner text', onChange: nvUpdateCornerText }), _jsx(NVSwitch, { checked: radiological, title: 'radiological', onChange: nvUpdateRadiological }), _jsx(NVSwitch, { checked: crosshair3D, title: '3D crosshair', onChange: nvUpdateCrosshair3D }), _jsx(NVSwitch, { checked: colorBar, title: 'Show color bar', onChange: nvUpdateColorBar }), _jsx(NVSwitch, { checked: worldSpace, title: 'World space', onChange: nvUpdateWorldSpace }), _jsx(NVSwitch, { checked: sagittalNoseLeft, title: 'Nose left', onChange: nvUpdateSagittalNoseLeft }), _jsx(NVSwitch, { checked: dragToMeasure, title: 'Drag to measure', onChange: nvUpdateDragToMeasure }), _jsx(NVSwitch, { checked: highDPI, title: 'High DPI', onChange: nvUpdateHighDPI }), _jsx(NumberPicker, { value: decimalPrecision, onChange: updateDecimalPrecision, title: 'Decimal precision', min: 0, max: 8, step: 1 }), _jsx(NumberPicker, { value: multiplanarPadPixels, onChange: nvUpdateMultiplanarPadPixels, title: 'Multiplanar padding', min: 0, max: 20, step: 2 }), _jsx(NumberPicker, { value: maxDrawUndoBitmaps, onChange: nvUpdateMaxDrawUndoBitmaps, title: 'Max Draw Undos', min: 8, max: 28, step: 1 }), _jsx(NumberPicker, { value: longTouchTimeout, onChange: nvUpdateLongTouchTimeout, title: 'Long touch timeout msec', min: 1000, max: 5000, step: 100 }), _jsx(NumberPicker, { value: doubleTouchTimeout, onChange: nvUpdateDoubleTouchTimeout, title: 'Double touch timeout msec', min: 500, max: 999, step: 25 })] })), _jsx(LayersPanel, __assign({ open: openLayers, width: 320, onToggleMenu: toggleLayers, onAddLayer: addLayer }, { children: layerList })), _jsx(Toolbar, { nv: nv, nvUpdateSliceType: nvUpdateSliceType, sliceType: sliceType, axialOnlyView: axialOnlyView, absoluteOnlyView: absoluteOnlyView, toggleSettings: toggleSettings, toggleLayers: toggleLayers, volumes: props.niis.map(niiToVolume), selectedVolume: selectedVolume, setSelectedVolume: selectVolume, showColorBar: colorBar, toggleColorBar: nvUpdateColorBar, rois: props.rois, selectedROI: selectedROI, refreshROI: refreshROI, setSelectedROI: selectDrawingLayer, toggleShowCrosshair: nvUpdateCrosshair, showCrosshair: showCrosshair, dragMode: dragMode, setDragMode: nvSetDragMode, toggleRadiological: nvUpdateRadiological, radiological: radiological, saveROI: saveDrawingLayer, complexMode: complexMode, setComplexMode: nvSetDisplayedVoxels, complexOptions: complexOptions, labelsVisible: textsVisible, toggleLabelsVisible: nvToggleLabelVisible, saving: saving, setSaving: setSaving, drawingChanged: drawingChanged, resampleImage: resampleImage, accessToken: props.accessToken, pipelineId: props.pipelineID, roiDeleteUrl: props.roiDeleteUrl, refreshPipelineRois: props.refreshPipelineRois }), _jsx(CmrConfirmation, { name: 'New Changes Made', message: "Consider saving your drawing before switching.", open: confirmationOpen, setOpen: setConfirmationOpen, cancellable: true, confirmCallback: warningConfirmationCallback, cancelCallback: warningCancelCallback, cancelText: "Don't save" }), _jsx(CmrEditConfirmation, { name: 'Save drawings', message: 'Please enter the name of the saved drawing', open: saveDialogOpen, setOpen: setSaveDialogOpen, confirmCallback: saveConfirmCallback, cancellable: true, cancelCallback: function () {
                     }, 
                     // suffix={'.zip'}
                     defaultText: (props.rois[selectedROI] !== undefined ?
@@ -1906,3 +1933,34 @@ function niiToVolume(nii) {
         alias: nii.name
     };
 }
+/** 2D matrix results (noise covariance, noise coefficients, etc.) only support axial view. */
+function isAxialOnlyVolume(nii) {
+    if (!nii)
+        return false;
+    if (nii.dim === 2)
+        return true;
+    var label = "".concat(nii.name || "", " ").concat(nii.type || "").toLowerCase();
+    return (label.includes("noise covariance") ||
+        label.includes("noise coefficients") ||
+        label.includes("noise coefficient"));
+}
+/** SNR, g-factor maps, inverse g-factor, and noise coefficients are magnitude-only. */
+function isAbsoluteOnlyVolume(nii) {
+    if (!nii)
+        return false;
+    var label = "".concat(nii.name || "", " ").concat(nii.type || "", " ").concat(nii.filename || "").toLowerCase();
+    if (label.includes("noise coefficient"))
+        return true;
+    if (label.includes("inverse g factor") ||
+        label.includes("inverse g-factor") ||
+        label.includes("inverse gfactor") ||
+        label.includes("inverse g"))
+        return true;
+    if (label.includes("g factor") ||
+        label.includes("g-factor") ||
+        /\bgfactor\b/.test(label))
+        return true;
+    if (label.includes("snr"))
+        return true;
+    return false;
+}

package/dist/CmrComponents/niivue-viewer/Toolbar.d.ts

@@ -4,6 +4,10 @@ interface ToolbarProps {
     nv: any;
     nvUpdateSliceType: any;
     sliceType: string;
+    /** When true, only axial orientation is valid (e.g. noise covariance / coefficients). */
+    axialOnlyView?: boolean;
+    /** When true, only absolute display mode is valid (e.g. SNR, g-factor maps). */
+    absoluteOnlyView?: boolean;
     toggleLayers: React.MouseEventHandler<HTMLButtonElement> | undefined;
     toggleSettings: React.MouseEventHandler<HTMLButtonElement> | undefined;
     volumes: {

package/dist/CmrComponents/niivue-viewer/Toolbar.js

@@ -46,8 +46,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
-import { Box, Button, CircularProgress, Stack, Switch, Tooltip, Typography } from "@mui/material";
+import React, { Fragment, useState } from 'react';
+import { Box, Button, CircularProgress, Stack, Switch, TextField, Tooltip, Typography } from "@mui/material";
 import { IconButton, FormControl, Select, MenuItem, InputLabel } from "@mui/material";
 import SettingsIcon from '@mui/icons-material/Settings';
 import HomeIcon from '@mui/icons-material/Home';
@@ -66,8 +66,9 @@ export default function Toolbar(props) {
     var viewerTheme = useNiivueViewerTheme();
     function handleSliceTypeChange(e) {
         var newSliceType = e.target.value;
-        var nvUpdateSliceType = props.nvUpdateSliceType;
-        nvUpdateSliceType(newSliceType);
+        if (props.axialOnlyView && newSliceType !== "axial")
+            return;
+        props.nvUpdateSliceType(newSliceType);
     }
     // let dragModes = ["Pan","Measurement","Contrast",'None'];
     var dragModes = [
@@ -76,9 +77,66 @@ export default function Toolbar(props) {
         { value: "contrast", label: "Slice and Contrast" },
         { value: "none", label: "Slice and None" }
     ];
-    var _a = useState(false), roiDeleteOpen = _a[0], setRoiDeleteOpen = _a[1];
-    var _b = useState(undefined), roiDeleteMsg = _b[0], setRoiDeleteMsg = _b[1];
-    var _c = useState(function () { return function () { }; }), roiDeleteConfirm = _c[0], setRoiDeleteConfirm = _c[1];
+    var displayModes = ["absolute", "real", "imaginary", "phase"];
+    var _a = useState(''), zoomText = _a[0], setZoomText = _a[1];
+    var zoomEditingRef = React.useRef(false);
+    /** Compute the base pixels-per-mm at zoom=1.0, reading live canvas + volume state. */
+    var getBasePxPerMm = function () {
+        var _a;
+        var nv = props.nv;
+        var canvas = (_a = nv === null || nv === void 0 ? void 0 : nv.gl) === null || _a === void 0 ? void 0 : _a.canvas;
+        var back = nv === null || nv === void 0 ? void 0 : nv.back;
+        if (!canvas || !(back === null || back === void 0 ? void 0 : back.dims) || !(back === null || back === void 0 ? void 0 : back.pixDims))
+            return null;
+        var imgWmm = back.dims[1] * Math.abs(back.pixDims[1]);
+        var imgHmm = back.dims[2] * Math.abs(back.pixDims[2]);
+        if (imgWmm <= 0 || imgHmm <= 0)
+            return null;
+        var w = canvas.clientWidth || canvas.width;
+        var h = canvas.clientHeight || canvas.height;
+        return Math.min(w / imgWmm, h / imgHmm);
+    };
+    /** Returns the display value (number only, no unit suffix). */
+    var formatPxPerMm = function () {
+        var _a, _b, _c;
+        var zoom = (_c = (_b = (_a = props.nv) === null || _a === void 0 ? void 0 : _a.scene) === null || _b === void 0 ? void 0 : _b.pan2Dxyzmm) === null || _c === void 0 ? void 0 : _c[3];
+        if (zoom == null)
+            return '';
+        var base = getBasePxPerMm();
+        if (base != null && base > 0)
+            return (base * zoom).toFixed(2);
+        return (zoom * 100).toFixed(0);
+    };
+    React.useEffect(function () {
+        var rafId;
+        var sync = function () {
+            if (!zoomEditingRef.current)
+                setZoomText(formatPxPerMm());
+            rafId = requestAnimationFrame(sync);
+        };
+        rafId = requestAnimationFrame(sync);
+        return function () { return cancelAnimationFrame(rafId); };
+    }, [props.nv]);
+    var applyZoom = function (text) {
+        var num = parseFloat(text.trim());
+        if (isNaN(num) || num <= 0)
+            return;
+        var base = getBasePxPerMm();
+        var targetZoom = (base != null && base > 0) ? num / base : num / 100;
+        var scene = props.nv.scene;
+        var current = scene.pan2Dxyzmm[3];
+        var next = Math.max(0.01, targetZoom);
+        var delta = current - next;
+        scene.pan2Dxyzmm[3] = next;
+        var mm = props.nv.frac2mm(scene.crosshairPos);
+        scene.pan2Dxyzmm[0] += delta * mm[0];
+        scene.pan2Dxyzmm[1] += delta * mm[1];
+        scene.pan2Dxyzmm[2] += delta * mm[2];
+        props.nv.drawScene();
+    };
+    var _b = useState(false), roiDeleteOpen = _b[0], setRoiDeleteOpen = _b[1];
+    var _c = useState(undefined), roiDeleteMsg = _c[0], setRoiDeleteMsg = _c[1];
+    var _d = useState(function () { return function () { }; }), roiDeleteConfirm = _d[0], setRoiDeleteConfirm = _d[1];
     // const deleteROI= createAsyncThunk('DeleteROI', async (arg: { accessToken: string, jobId: string }) => {
     //     // const data = { jobId: arg.jobId }; // No need to stringify, axios will handle it
     //     const config = {
@@ -111,7 +169,7 @@ export default function Toolbar(props) {
                                     }) }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
                                 m: 2,
                                 minWidth: 120
-                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Orientation" })), _jsxs(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.sliceType, label: "Orientation", onChange: handleSliceTypeChange }, { children: [_jsx(MenuItem, __assign({ value: 'axial' }, { children: "Axial" })), _jsx(MenuItem, __assign({ value: 'coronal' }, { children: "Coronal" })), _jsx(MenuItem, __assign({ value: 'sagittal' }, { children: "Sagittal" })), _jsx(MenuItem, __assign({ value: 'multi' }, { children: "Multi" })), _jsx(MenuItem, __assign({ value: '3d' }, { children: "3D" }))] }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Orientation" })), _jsxs(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.sliceType, label: "Orientation", onChange: handleSliceTypeChange }, { children: [_jsx(MenuItem, __assign({ value: 'axial' }, { children: "Axial" })), _jsx(MenuItem, __assign({ value: 'coronal', disabled: props.axialOnlyView }, { children: "Coronal" })), _jsx(MenuItem, __assign({ value: 'sagittal', disabled: props.axialOnlyView }, { children: "Sagittal" })), _jsx(MenuItem, __assign({ value: 'multi', disabled: props.axialOnlyView }, { children: "Multi" })), _jsx(MenuItem, __assign({ value: '3d', disabled: props.axialOnlyView }, { children: "3D" }))] }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
                                 m: 2,
                                 minWidth: 180
                             } }, { children: [_jsx(InputLabel, __assign({ id: "drag-mode-label" }, { children: "Scroll and Right Click Drag" })), _jsx(Select, __assign({ labelId: "drag-mode-label", id: "drag-mode", value: props.dragMode, label: "Scroll and Right Click Drag", onChange: function (e) {
@@ -120,8 +178,17 @@ export default function Toolbar(props) {
                                     } }, { children: dragModes.map(function (mode, index) { return (_jsx(MenuItem, __assign({ value: mode.value }, { children: mode.label }), index)); }) }))] })), _jsxs(FormControl, __assign({ size: 'small', sx: {
                                 m: 2,
                                 minWidth: 120
-                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Display Mode" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.complexMode, label: "Display Mode", onChange: function (e) { return props.setComplexMode(e.target.value); } }, { children: props.complexOptions.map(function (value) {
-                                        return _jsx(MenuItem, __assign({ value: value }, { children: value.charAt(0).toUpperCase() + value.slice(1) }));
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Display Mode" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.complexMode, label: "Display Mode", onChange: function (e) {
+                                        var next = e.target.value;
+                                        if (props.absoluteOnlyView && next !== "absolute")
+                                            return;
+                                        if (!props.complexOptions.includes(next))
+                                            return;
+                                        props.setComplexMode(next);
+                                    } }, { children: displayModes.map(function (value) {
+                                        var unavailable = !props.complexOptions.includes(value);
+                                        var absoluteOnlyLocked = props.absoluteOnlyView && value !== "absolute";
+                                        return (_jsx(MenuItem, __assign({ value: value, disabled: unavailable || absoluteOnlyLocked }, { children: value.charAt(0).toUpperCase() + value.slice(1) }), value));
                                     }) }))] })), _jsxs(FormControl, __assign({ size: "small", sx: { m: 2, minWidth: 160 } }, { children: [_jsx(InputLabel, __assign({ id: "roi-layer-label" }, { children: "ROI Layer" })), _jsx(Select, __assign({ labelId: "roi-layer-label", id: "roi-layer", value: props.selectedROI, label: "Opened ROIs", 
                                     // Only text in the closed preview (no icon)
                                     renderValue: function (selected) {
@@ -259,7 +326,28 @@ export default function Toolbar(props) {
                                             border: '1px solid',
                                             borderColor: 'divider',
                                             borderRadius: 1
-                                        } }, { children: _jsx(ZoomOutIcon, {}) })) })), _jsx(Tooltip, __assign({ title: 'Zoom In', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                        } }, { children: _jsx(ZoomOutIcon, {}) })) })), _jsx(TextField, { label: "px/mm", size: "small", value: zoomText, onChange: function (e) { return setZoomText(e.target.value); }, onFocus: function (e) {
+                                        zoomEditingRef.current = true;
+                                        requestAnimationFrame(function () { return e.target.select(); });
+                                    }, onBlur: function () {
+                                        zoomEditingRef.current = false;
+                                        applyZoom(zoomText);
+                                    }, onKeyDown: function (e) {
+                                        if (e.key === 'Enter') {
+                                            e.target.blur();
+                                        }
+                                        else if (e.key === 'Escape') {
+                                            zoomEditingRef.current = false;
+                                            setZoomText(formatPxPerMm());
+                                            e.target.blur();
+                                        }
+                                    }, sx: {
+                                        width: 100,
+                                        '& .MuiInputBase-input': {
+                                            textAlign: 'center',
+                                            fontSize: '0.8rem'
+                                        }
+                                    } }), _jsx(Tooltip, __assign({ title: 'Zoom In', placement: 'right' }, { children: _jsx(IconButton, __assign({ onClick: function () {
                                             var scene = props.nv.scene;
                                             var current = scene.pan2Dxyzmm[3];
                                             var next = current + 0.1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.8.8",
+  "version": "4.9.0",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",