cloudmr-ux 4.3.7 → 4.3.9

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

@@ -0,0 +1,1239 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box, Button } from '@mui/material';
+import { NVImage, DRAG_MODE } from '@niivue/niivue';
+import { NI_PEN_TYPE } from './niivuePenType';
+import { SettingsPanel } from './SettingsPanel';
+import { NumberPicker } from './NumberPicker';
+import { ColorPicker } from './ColorPicker';
+import { LayersPanel } from './LayersPanel';
+import { CloudMrNiivuePanel } from './CloudMrNiivuePanel';
+import { Niivue } from './NiivuePatcher';
+import NVSwitch from './Switch';
+import Toolbar from './Toolbar';
+import Layer from './Layer';
+import './Niivue.css';
+import CmrEditConfirmation from '../dialogue/EditConfirmation';
+import CmrConfirmation from '../dialogue/Confirmation';
+import { resampleNiivueRoiHistogram } from '../niivue-roi-histogram/resampleNiivueRoiHistogram';
+import axios from "axios";
+import JSZip from "jszip";
+import { getMax, getMin } from "../../core/common/utilities";
+import { AuthenticatedHttpClient, getEndpoints } from "../../core";
+/**
+ * @typedef {Object} CloudMrNiivueViewerProps
+ * @property {any[]} niis
+ * @property {number} selectedVolume
+ * @property {(i: number) => void} setSelectedVolume
+ * @property {any[]} rois
+ * @property {string} pipelineID
+ * @property {string} [accessToken]
+ * @property {(msg: string) => void} [setWarning]
+ * @property {(open: boolean) => void} [setWarningOpen]
+ * @property {(fn: () => void) => void} [saveROICallback]
+ * @property {string} roiDeleteUrl — full URL for `ROI_DELETE` (app resolves from env)
+ * @property {() => Promise<void>} refreshPipelineRois — e.g. dispatch getPipelineROI
+ * @property {() => any[]} getPipelineRois — returns current ROI list for pipeline (e.g. from Redux)
+ */
+export var nv = new Niivue({
+    loadingText: '',
+    isColorbar: true,
+    isRadiologicalConvention: true,
+    textHeight: 0.12,
+    colorbarHeight: 0.03,
+    dragMode: DRAG_MODE.pan,
+    crosshairWidth: 0,
+    // crosshairColor: [0.098,0.453,0.824]
+    crosshairColor: [1, 1, 0],
+    fontColor: [0.00, 0.94, 0.37, 1],
+    isNearestInterpolation: true,
+    isFilledPen: true,
+    penValue: 1,
+    penType: NI_PEN_TYPE.PEN
+});
+nv.opts.penBounds = 0;
+window.nv = nv;
+// The NiiVue component wraps all other components in the UI. 
+// It is exported so that it can be used in other projects easily
+export default function CloudMrNiivueViewer(props) {
+    var _this = this;
+    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];
+    // 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];
+    // 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];
+    React.useEffect(function () {
+        nv.opts.penBounds = 0;
+    }, []);
+    var _23 = React.useState(1.0), gamma = _23[0], setGamma = _23[1];
+    var _24 = React.useState(0), gammaKey = _24[0], setGammaKey = _24[1];
+    // Niivue → React bridge so other places (Toolbar) can force the UI to reset
+    nv.onResetGamma = function () {
+        setGamma(1.0);
+        setGammaKey(function (k) { return k + 1; }); // re-mounts the slider to reflect the reset
+    };
+    // Do not call resampleImage() here: NiivuePanel (which mounts `#histoplot`) only renders when
+    // props.niis[selectedVolume] exists — running on mount throws "No DOM element with id 'histoplot'".
+    // NiivuePanel’s own effect calls resampleImage after the histogram node exists.
+    React.useEffect(function () {
+        if (nv.volumes.length !== 0) {
+            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
+            try {
+                // Initialize sliders to the engine’s current crosshair (in mm), not a hard-coded 0.5
+                setMMs(nv.frac2mm(nv.scene.crosshairPos));
+            }
+            catch (_a) { }
+            setTimeout(function (args) { return nv.resizeListener(); }, 700);
+        }
+    }, []);
+    React.useEffect(function () {
+        var _a;
+        var nii = (_a = props.niis) === null || _a === void 0 ? void 0 : _a[props.selectedVolume];
+        if (nii)
+            stylingProxy(nii);
+    }, [props.selectedVolume, props.niis]);
+    // only run this when the component is mounted on the page
+    // or else it will be recursive and continuously add all
+    // initial images supplied to the NiiVue component
+    //
+    // All subsequent imgaes should be added via a
+    // button or drag and drop
+    // React.useEffect(async ()=>{
+    //   // props.volumes.map(async (vol)=>{
+    //   //   let image = await NVImage.loadFromUrl({url:vol.url})
+    //   //   nv.addVolume(image)
+    //   //   setLayers([...nv.volumes])
+    //   // })
+    //   await nv.loadVolumes(props.volumes)
+    //   setLayers([...nv.volumes])
+    // }, [])
+    // values dualslider
+    var _25 = useState(0), rangeKey = _25[0], setRangeKey = _25[1];
+    nv.onResetContrast = function () {
+        setRangeKey(rangeKey + 1);
+    };
+    var _26 = useState([0, 0, 0]), boundMins = _26[0], setBoundMins = _26[1];
+    var _27 = useState([1, 1, 1]), boundMaxs = _27[0], setBoundMaxs = _27[1];
+    var _28 = useState([0.5, 0.5, 0.5]), mms = _28[0], setMMs = _28[1];
+    nv.onImageLoaded = function () {
+        var _a, _b;
+        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];
+            if (nii === null || nii === void 0 ? void 0 : nii.link) {
+                nv.loadVolumes([niiToVolume(nii)]);
+                setWarning("Error loading results, please check internet connectivity");
+                setWarningOpen(true);
+                setTimeout(function () {
+                    setWarningOpen(false);
+                }, 2500);
+                setWarning("");
+                return;
+            }
+            // One logical job file can decode as multiple Niivue volumes (e.g. some 4D / replica layouts) while Redux
+            // still has a single `niis[]` entry (common for Multiple Replica without a separate noise channel). Drop
+            // extras and finish init on the first volume instead of bailing with a bogus network error.
+            try {
+                var extras = nv.volumes.slice(1);
+                for (var _i = 0, extras_1 = extras; _i < extras_1.length; _i++) {
+                    var vol = extras_1[_i];
+                    nv.removeVolume(vol);
+                }
+            }
+            catch (e) {
+                console.warn("Niivue onImageLoaded: could not trim extra volumes", e);
+                return;
+            }
+            if (nv.volumes.length !== 1)
+                return;
+        }
+        // console.log(nv.volumes);
+        // Restore zoom, gamma, opacity and colormap if switching channels/volumes, otherwise reset to defaults.
+        // Do this BEFORE setLayers so that Layer mounts with the correct opacity already on the volume object.
+        var saved = savedViewStateRef.current;
+        if (saved) {
+            nv.scene.pan2Dxyzmm = __spreadArray([], saved.pan2Dxyzmm, true);
+            nv.setGamma(saved.gamma);
+            setGamma(saved.gamma);
+            setGammaKey(function (k) { return k + 1; });
+            var vol = nv.volumes[0];
+            if (vol) {
+                nv.setColorMap(vol.id, saved.colormap);
+                vol.opacity = saved.opacity;
+                nv.updateGLVolume();
+            }
+            setopacity(saved.opacity);
+            savedViewStateRef.current = null;
+        }
+        else {
+            nv.setGamma(1.0);
+            (_b = nv.onResetGamma) === null || _b === void 0 ? void 0 : _b.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');
+        // let volume = nv.volumes[0];
+        nvSetDragMode(dragMode); // keep engine behavior in sync with dropdown
+        // Re-apply world/voxel mode and last crosshair after resets
+        nv.setSliceMM(worldSpace);
+        // applySavedCrosshairIfAny();
+        nv.scene.crosshairPos = __spreadArray([], oldCrosshairPos, true);
+        // keep display mode consistent after resets
+        nvUpdateSliceType(sliceType);
+        nv.opts.crosshairWidth = showCrosshair ? 1 : 0;
+        setMMs(nv.frac2mm(nv.scene.crosshairPos));
+    };
+    function checkRange(numbers) {
+        // console.log(numbers);
+        var range_min = getMin(numbers);
+        var range_max = getMax(numbers);
+        var range = range_max - range_min;
+        if (range == 0) {
+            return numbers;
+        }
+        if (range < 1e-2) {
+            // Find a suitable 'a' that is a whole power of 10
+            // Here, we want 'a' to scale the range to fit within [1, 10)
+            var a_1 = 1;
+            var power = 0;
+            while ((range * a_1) < 1) {
+                a_1 *= 10;
+                power += 1;
+            }
+            // Calculate 'b' such that the minimum transformed value is 1 (x = 1)
+            var b_1 = Math.floor(a_1 * range_min - a_1 * range_min % 10) / a_1;
+            console.log(b_1);
+            // Apply the transformation ax + b
+            var transformed = numbers.map(function (y) { return a_1 * y - a_1 * b_1; });
+            setTransformFactors({ a: a_1, b: b_1 });
+            nv.transformA = a_1;
+            nv.transformB = b_1;
+            nv.power = power;
+            return transformed;
+        }
+        else {
+            // If range is not smaller than 10E-2, return the original array
+            setTransformFactors({ a: 1, b: 0 });
+            nv.transformA = 1;
+            nv.transformB = 0;
+            nv.power = undefined;
+            return numbers;
+        }
+    }
+    function verifyComplex(volume) {
+        volume.real = volume.img;
+        setComplexMode('absolute');
+        // 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']);
+            // Initialize absolute and phase arrays
+            volume.absolute = new volume.img.constructor(volume.img.length);
+            // Calculate absolute and phase values
+            for (var i = 0; i < volume.img.length; i++) {
+                var realPart = volume.real[i];
+                // Calculate the absolute value (magnitude)
+                volume.absolute[i] = Math.sqrt(realPart * realPart);
+            }
+            return false;
+        }
+        var allZero = true;
+        // Test for imaginary nulls
+        for (var i = 0; i < volume.img.length; i++) {
+            if (volume.imaginary[i] !== 0) {
+                allZero = false;
+                break;
+            }
+        }
+        // Initialize absolute and phase arrays
+        volume.absolute = new Float32Array(volume.img.length);
+        volume.phase = new Float32Array(volume.img.length);
+        // Calculate absolute and phase values
+        for (var i = 0; i < volume.img.length; i++) {
+            var realPart = volume.real[i];
+            var imaginaryPart = volume.imaginary[i];
+            // Calculate the absolute value (magnitude)
+            volume.absolute[i] = Math.sqrt(realPart * realPart + imaginaryPart * imaginaryPart);
+            // Calculate the phase (argument)
+            volume.phase[i] = Math.atan2(imaginaryPart, realPart);
+        }
+        setComplexOptions((allZero) ? ['absolute', 'real'] : ['absolute', 'imaginary', 'real', 'phase']);
+        return !allZero;
+    }
+    function nvSetDisplayedVoxels(voxelType) {
+        setComplexMode(voxelType);
+        var volume = nv.volumes[0];
+        switch (voxelType) {
+            case 'phase':
+                volume.img = checkRange(volume.phase);
+                break;
+            case 'absolute':
+                volume.img = checkRange(volume.absolute);
+                break;
+            case 'real':
+                volume.img = checkRange(volume.real);
+                break;
+            case 'imaginary':
+                volume.img = checkRange(volume.imaginary);
+                break;
+        }
+        volume.calMinMax();
+        setMin(volume.cal_min);
+        setMax(volume.cal_max);
+        volume.vox_min = getMin(volume.img);
+        volume.vox_max = getMax(volume.img);
+        nv.setVolume(volume);
+        nv.drawScene();
+        resampleImage();
+    }
+    nv.onLocationChange = function (data) {
+        if (data.values[0]) {
+            setMMs(__spreadArray([], data.values[0].mm, true)); // ensure new array -> React re-renders
+            data.values[0].transformA = nv.transformA;
+            data.values[0].transformB = nv.transformB;
+            data.values[0].power = nv.power;
+        }
+        setLocationData(data.values);
+        // if(drawingEnabled){
+        //     setDrawingChanged(true);
+        //     // resampleImage();
+        // }
+        // console.log(nv.scene.pan2Dxyzmm);
+    };
+    nv.onMouseUp = function (data) {
+        if (drawingEnabled) {
+            setDrawingChanged(true);
+            resampleImage();
+        }
+    };
+    /**
+     * Way to test all value changes
+     */
+    nv.onIntensityChange = function () {
+        var volume = nv.volumes[0];
+        setMin(volume.cal_min);
+        setMax(volume.cal_max);
+    };
+    // nv.createEmptyDrawing();
+    // construct an array of <Layer> components. Each layer is a NVImage or NVMesh
+    var layerList = layers.map(function (layer, index) {
+        return (index === 0) ? ( //Yuelong: we shall expect only one effective layer in this implementation
+        _jsx(Layer, { image: layer, nv: nv, nii: props.niis[props.selectedVolume], onColorMapChange: nvUpdateColorMap, onRemoveLayer: nvRemoveLayer, onOpacityChange: nvUpdateLayerOpacity, opacity: opacity, colorMapValues: nv.colormapFromKey(layer.colormap), getColorMapValues: function (colorMapName) {
+                return nv.colormapFromKey(colorMapName);
+            } }, layer.name)) : undefined;
+    });
+    function addLayer(file) {
+        return __awaiter(this, void 0, void 0, function () {
+            var nvimage;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, NVImage.loadFromFile({
+                            file: file
+                        })];
+                    case 1:
+                        nvimage = _a.sent();
+                        nv.addVolume(nvimage);
+                        setLayers(__spreadArray([], nv.volumes, true));
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function toggleSettings() {
+        setOpenSettings(!openSettings);
+    }
+    function toggleLayers() {
+        setOpenLayers(!openLayers);
+    }
+    function toggleLocationTable() {
+        setLocationTableVisible(!locationTableVisible);
+    }
+    function toggleROIVisible() {
+        if (roiVisible) {
+            setDrawingOpacity(nv.drawOpacity);
+            setROIVisible(false);
+            nv.setDrawOpacity(0);
+            resampleImage();
+        }
+        else {
+            nv.setDrawOpacity(drawingOpacity);
+            setROIVisible(true);
+            resampleImage();
+        }
+    }
+    function nvUpdateDrawingOpacity(opacity) {
+        setDrawingOpacity(opacity);
+        if (roiVisible) {
+            nv.setDrawOpacity(opacity);
+        }
+    }
+    function nvUpdateOpacity(a) {
+        console.log("Opacity = " + a);
+        setopacity(a);
+        var n = nv.volumes.length;
+        for (var i = 0; i < n; i++) {
+            nv.volumes[i].opacity = a;
+        }
+        nv.updateGLVolume();
+    }
+    function nvToggleLabelVisible() {
+        if (textsVisible) {
+            nv.hideText = true;
+            nv.drawScene();
+            setTextsVisible(false);
+        }
+        else {
+            nv.hideText = false;
+            nv.drawScene();
+            setTextsVisible(true);
+        }
+    }
+    var _29 = useState("pan"), dragMode = _29[0], setDragMode = _29[1];
+    function nvSetDragMode(dragMode) {
+        switch (dragMode) {
+            case "none":
+                nv.opts.dragMode = nv.dragModes.none;
+                break;
+            case "contrast":
+                console.log('setting drag mode to contrast');
+                nv.opts.dragMode = nv.dragModes.contrast;
+                break;
+            case "measurement":
+                nv.opts.dragMode = nv.dragModes.measurement;
+                break;
+            case "pan":
+                // nv.opts.dragMode = 3;
+                nv.opts.dragMode = nv.dragModes.pan;
+                break;
+        }
+        // nv.drawScene();
+        setDragMode(dragMode);
+    }
+    function nvSaveImage() {
+        nv.saveImage({
+            filename: 'roi.nii',
+            isSaveDrawing: true
+        });
+    }
+    function nvUpdateDrawingEnabled() {
+        setDrawingEnabled(!drawingEnabled);
+        nv.setDrawingEnabled(!drawingEnabled);
+        nv.drawScene();
+    }
+    function nvSetDrawingEnabled(enabled) {
+        setDrawingEnabled(enabled);
+        nv.setDrawingEnabled(enabled);
+        nv.drawScene();
+    }
+    function nvUpdateDrawPen(a) {
+        var raw = Number(a.target.value);
+        setDrawPen(raw);
+        var penValue = raw;
+        nv.opts.penBounds = 0;
+        nv.setPenValue(penValue & 7, penValue > 0);
+        if (penValue == 8) {
+            nv.setPenValue(0, true);
+        }
+    }
+    function nvUpdateDrawOpacity(a) {
+        setDrawOpacity(a);
+        nv.setDrawOpacity(a);
+    }
+    function nvUpdateCrosshairColor(rgb01, a) {
+        if (a === void 0) { a = 1; }
+        setCrosshairColor(__spreadArray(__spreadArray([], rgb01, true), [a], false));
+        nv.setCrosshairColor(__spreadArray(__spreadArray([], rgb01, true), [a], false));
+    }
+    function nvUpdateOrientCube() {
+        nv.opts.isOrientCube = !orientCube;
+        setOrientCube(!orientCube);
+        nv.drawScene();
+    }
+    function nvUpdateHighDPI() {
+        nv.setHighResolutionCapable(!highDPI);
+        setHighDPI(!highDPI);
+    }
+    function nvUpdateMultiplanarPadPixels(v) {
+        nv.opts.multiplanarPadPixels = v;
+        setMultiplanarPadPixels(v);
+        nv.drawScene();
+    }
+    function nvUpdateRuler() {
+        nv.opts.isRuler = !ruler;
+        setRuler(!ruler);
+        nv.drawScene();
+    }
+    function nvUpdateSagittalNoseLeft() {
+        nv.opts.sagittalNoseLeft = !sagittalNoseLeft;
+        setSagittalNoseLeft(!sagittalNoseLeft);
+        nv.drawScene();
+    }
+    function nvUpdateRulerWidth(v) {
+        nv.opts.rulerWidth = v;
+        setRulerWidth(v);
+        nv.drawScene();
+    }
+    function nvUpdateRulerOpacity(a) {
+        nv.opts.rulerColor = [
+            rulerColor[0],
+            rulerColor[1],
+            rulerColor[2],
+            a
+        ];
+        setRulerOpacity(a);
+        nv.drawScene();
+    }
+    function nvUpdateLongTouchTimeout(v) {
+        nv.opts.longTouchTimeout = v;
+        setLongTouchTimeout(v);
+    }
+    function nvUpdateDoubleTouchTimeout(v) {
+        nv.opts.doubleTouchTimeout = v;
+        setDoubleTouchTimeout(v);
+    }
+    function nvUpdateDragToMeasure() {
+        nv.opts.isDragShowsMeasurementTool = !dragToMeasure;
+        setDragToMeasure(!dragToMeasure);
+    }
+    function nvUpdateMaxDrawUndoBitmaps(v) {
+        nv.opts.maxDrawUndoBitmaps = v;
+        setMaxDrawUndoBitmaps(v);
+    }
+    function nvUpdateBackColor(rgb01, a) {
+        if (a === void 0) { a = 1; }
+        setBackColor(__spreadArray(__spreadArray([], rgb01, true), [a], false));
+        nv.opts.backColor = __spreadArray(__spreadArray([], rgb01, true), [a], false);
+        nv.drawScene();
+    }
+    function nvUpdateRulerColor(rgb01, a) {
+        if (a === void 0) { a = 1; }
+        setRulerColor(__spreadArray(__spreadArray([], rgb01, true), [a], false));
+        nv.opts.rulerColor = __spreadArray(__spreadArray([], rgb01, true), [a], false);
+        if (!ruler) {
+            nv.opts.isRuler = !ruler;
+            setRuler(!ruler);
+        }
+        nv.drawScene();
+    }
+    function nvUpdateClipPlaneColor(rgb01, a) {
+        if (a === void 0) { a = 1; }
+        setClipPlaneColor(__spreadArray(__spreadArray([], rgb01, true), [a], false));
+        nv.opts.clipPlaneColor = __spreadArray(__spreadArray([], rgb01, true), [a], false);
+        setClipPlane(true);
+        nv.setClipPlane([0, 270, 0]); //left
+        nv.updateGLVolume();
+    }
+    function nvUpdateClipPlane() {
+        if (!clipPlane) {
+            setClipPlane(true);
+            nv.setClipPlane([0, 270, 0]); //left
+        }
+        else {
+            setClipPlane(false);
+            nv.setClipPlane([2, 0, 0]); //none
+        }
+    }
+    function nvUpdateColorBar() {
+        setColorBar(!colorBar);
+        nv.opts.isColorbar = !colorBar;
+        nv.drawScene();
+    }
+    function nvUpdateTextSize(v) {
+        setTextSize(v);
+        nv.opts.textHeight = v;
+        nv.drawScene();
+    }
+    function updateDecimalPrecision(v) {
+        setDecimalPrecision(v);
+    }
+    function nvUpdateWorldSpace() {
+        nvUpdateCrosshair3D(!worldSpace);
+        setWorldSpace(!worldSpace);
+        nv.setSliceMM(!worldSpace);
+        // keep sliders synced to the currently displayed crosshair
+        try {
+            setMMs(nv.frac2mm(nv.scene.crosshairPos));
+        }
+        catch (_a) { }
+    }
+    function nvUpdateCornerText() {
+        nv.setCornerOrientationText(!cornerText);
+        setCornerText(!cornerText);
+    }
+    function nvUpdateCrosshair3D() {
+        nv.opts.show3Dcrosshair = !crosshair3D;
+        nv.updateGLVolume();
+        setCrosshair3D(!crosshair3D);
+    }
+    function nvUpdateCrosshair() {
+        nv.opts.crosshairWidth = showCrosshair ? 0 : 1;
+        nv.drawScene();
+        setShowCrosshair(!showCrosshair);
+    }
+    function nvUpdateRadiological() {
+        nv.setRadiologicalConvention(!radiological);
+        setRadiological(!radiological);
+    }
+    function nvUpdateCrosshairOpacity(a) {
+        nv.setCrosshairColor([
+            crosshairColor[0],
+            crosshairColor[1],
+            crosshairColor[2],
+            a
+        ]);
+        setCrosshairOpacity(a);
+    }
+    function nvUpdateClipPlaneOpacity(a) {
+        nv.opts.clipPlaneColor = [
+            clipPlaneColor[0],
+            clipPlaneColor[1],
+            clipPlaneColor[2],
+            a
+        ];
+        setClipPlaneOpacity(a);
+        nv.updateGLVolume();
+    }
+    function nvUpdateCrosshairSize(w) {
+        nv.opts.crosshairWidth = w;
+        nv.drawScene();
+    }
+    var _30 = useState({}), labelMapping = _30[0], setLabelMapping = _30[1];
+    function resampleImage(mapping) {
+        if (mapping === void 0) { mapping = labelMapping; }
+        var el = typeof document !== "undefined" ? document.getElementById("histoplot") : null;
+        var next = resampleNiivueRoiHistogram({
+            nv: nv,
+            labelMapping: mapping,
+            plotRoot: el
+        });
+        if (next !== null) {
+            setROIs(next);
+        }
+    }
+    function nvUpdateSelectionBoxColor(rgb01) {
+        setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
+        nv.setSelectionBoxColor(__spreadArray(__spreadArray([], rgb01, true), [0.5], false));
+    }
+    var _31 = React.useState('axial'), sliceType = _31[0], setSliceType = _31[1];
+    function nvUpdateSliceType(newSliceType) {
+        setSliceType(newSliceType);
+        if (newSliceType === 'axial') {
+            nv.setSliceType(nv.sliceTypeAxial);
+        }
+        else if (newSliceType === 'coronal') {
+            nv.setSliceType(nv.sliceTypeCoronal);
+        }
+        else if (newSliceType === 'sagittal') {
+            nv.setSliceType(nv.sliceTypeSagittal);
+        }
+        else if (newSliceType === 'multi') {
+            nv.setSliceType(nv.sliceTypeMultiplanar);
+        }
+        else if (newSliceType === '3d') {
+            nv.setSliceType(nv.sliceTypeRender);
+        }
+        nvSetDragMode(dragMode); // some Niivue builds reset interaction on slice change
+        // Re-apply world/voxel mode and last crosshair after slice type changes
+        nv.setSliceMM(worldSpace);
+        //applySavedCrosshairIfAny();
+    }
+    function nvUpdateLayerOpacity(a) {
+        setopacity(a);
+        nv.updateGLVolume();
+    }
+    function nvUpdateColorMap(id, clr) {
+        nv.setColorMap(id, clr);
+        var volume = nv.volumes[0];
+        setMin(volume.cal_min);
+        setMax(volume.cal_max);
+    }
+    function nvRemoveLayer(imageToRemove) {
+        nv.removeVolume(imageToRemove);
+        setLayers(__spreadArray([], nv.volumes, true));
+    }
+    function stylingProxy(nii) {
+        if (nii.dim === 2) {
+            nvUpdateSliceType('axial');
+            setShowCrosshair(false);
+            setTextsVisible(false);
+            nv.opts.crosshairWidth = 0;
+            nv.hideText = true;
+            setTimeout(function () {
+                nv.setCenteredZoom(0.7);
+            }, 300);
+        }
+        else {
+            // nvUpdateSliceType('multi');
+            nvUpdateSliceType(sliceType);
+            setShowCrosshair(false);
+            setTextsVisible(false);
+            nv.opts.crosshairWidth = 0;
+            nv.hideText = true;
+        }
+    }
+    var selectVolume = function (volumeIndex) { return __awaiter(_this, void 0, void 0, function () {
+        var openVolume;
+        var _this = this;
+        return __generator(this, function (_a) {
+            openVolume = function () { return __awaiter(_this, void 0, void 0, function () {
+                var vol, e_1;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            nv.closeDrawing();
+                            setDrawingChanged(false);
+                            if (drawingEnabled)
+                                nvUpdateDrawingEnabled();
+                            vol = nv.volumes[0];
+                            savedViewStateRef.current = {
+                                pan2Dxyzmm: __spreadArray([], nv.scene.pan2Dxyzmm, true),
+                                gamma: gamma,
+                                opacity: opacity,
+                                colormap: (_a = vol === null || vol === void 0 ? void 0 : vol.colormap) !== null && _a !== void 0 ? _a : 'gray'
+                            };
+                            if (props.niis[selectedVolume] !== undefined) {
+                                nv.removeVolume(niiToVolume(props.niis[selectedVolume]));
+                            }
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, nv.loadVolumes([niiToVolume(props.niis[volumeIndex])])];
+                        case 2:
+                            _b.sent();
+                            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);
+                            nv.opts.crosshairWidth = showCrosshair ? 1 : 0;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _b.sent();
+                            setWarning("Error loading results, please check internet connectivity");
+                            setWarningOpen(true);
+                            setTimeout(function () {
+                                setWarningOpen(false);
+                                setWarning("");
+                            }, 2500);
+                            return [2 /*return*/];
+                        case 4:
+                            setSelectedVolume(volumeIndex);
+                            setSelectedDrawingLayer('');
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            // In case that changes has been made
+            if (drawingChanged) {
+                setWarningConfirmationCallback(function () { return (function () {
+                    saveDrawingLayer(function () { return __awaiter(_this, void 0, void 0, function () {
+                        var _a;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0: return [4 /*yield*/, ((_a = props.refreshPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props))];
+                                case 1:
+                                    _b.sent();
+                                    setSaving(false);
+                                    openVolume();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); }, function () {
+                        setSaving(true);
+                    });
+                }); });
+                setWarningCancelCallback(function () { return (function () {
+                    openVolume();
+                }); });
+                setConfirmationOpen(true);
+            }
+            else
+                openVolume();
+            return [2 /*return*/];
+        });
+    }); };
+    var _32 = useState(''), selectedROI = _32[0], setSelectedDrawingLayer = _32[1];
+    var _33 = useState(false), saveDialogOpen = _33[0], setSaveDialogOpen = _33[1];
+    var _34 = useState(function () {
+    }), saveConfirmCallback = _34[0], setSaveConfirmCallback = _34[1];
+    var _35 = useState(false), confirmationOpen = _35[0], setConfirmationOpen = _35[1];
+    var _36 = useState(function () { }), warningConfirmationCallback = _36[0], setWarningConfirmationCallback = _36[1];
+    var _37 = useState(function () { }), warningCancelCallback = _37[0], setWarningCancelCallback = _37[1];
+    var _38 = useState(false), drawingChanged = _38[0], setDrawingChanged = _38[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 () {
+        if (drawingChanged && selectedROI !== '') {
+            setSelectedDrawingLayer('');
+        }
+    }, [drawingChanged]);
+    var setLabelAlias = function (label, alias) {
+        labelMapping[label] = alias;
+        setLabelMapping(labelMapping);
+        resampleImage(labelMapping);
+    };
+    var zipAndSendDrawingLayer = function (uploadURL, filename, blob) {
+        return __awaiter(this, void 0, void 0, function () {
+            var zip, descriptor, content, file;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        zip = new JSZip();
+                        descriptor = {
+                            "data": [
+                                {
+                                    "filename": "".concat(filename, ".nii"),
+                                    "id": 1,
+                                    "name": filename,
+                                    "type": 'image',
+                                    // "numpyPixelType": "complex64",
+                                    // "pixelType": "complex"
+                                    "labelMapping": labelMapping
+                                }
+                            ]
+                        };
+                        zip.file("info.json", JSON.stringify(descriptor));
+                        zip.file("".concat(filename, ".nii"), blob, { base64: true });
+                        return [4 /*yield*/, zip.generateAsync({ type: "blob" })];
+                    case 1:
+                        content = _a.sent();
+                        file = new File([content], filename, {
+                            type: content.type,
+                            lastModified: Date.now()
+                        });
+                        // Upload to bucket
+                        return [4 /*yield*/, axios.put(uploadURL, file, {
+                                headers: {
+                                    'Content-Type': "application/octet-stream"
+                                }
+                            })];
+                    case 2:
+                        // Upload to bucket
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /** @param mergeIntoExisting - if true (ROI upload), merge into current drawing; if false (pick saved ROI), replace */
+    var unzipAndRenderDrawingLayer = function (accessURL, mergeIntoExisting) {
+        if (mergeIntoExisting === void 0) { mergeIntoExisting = false; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var response, blob, zip, fileInfo, content, info, niiFilePath, importedLabels, niiDrawing, base64, mergeResult, merged, _i, _a, _b, oldL, newId, oldN, newN, alias;
+            var _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0: return [4 /*yield*/, fetch(accessURL)];
+                    case 1:
+                        response = _e.sent();
+                        // Check if the request was successful
+                        if (!response.ok) {
+                            props.warn('Failed to load the requested ROI Layer (was not properly saved)');
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, response.blob()];
+                    case 2:
+                        blob = _e.sent();
+                        zip = new JSZip();
+                        return [4 /*yield*/, zip.loadAsync(blob)];
+                    case 3:
+                        _e.sent();
+                        fileInfo = zip.file("info.json");
+                        if (!fileInfo) return [3 /*break*/, 12];
+                        return [4 /*yield*/, fileInfo.async("string")];
+                    case 4:
+                        content = _e.sent();
+                        info = JSON.parse(content);
+                        niiFilePath = info.data[0].filename;
+                        importedLabels = info.data[0].labelMapping || {};
+                        niiDrawing = zip.file(niiFilePath);
+                        if (!niiDrawing) return [3 /*break*/, 10];
+                        return [4 /*yield*/, niiDrawing.async("base64")];
+                    case 5:
+                        base64 = _e.sent();
+                        console.log(niiFilePath);
+                        if (!(mergeIntoExisting && typeof nv.mergeDrawingFromBase64 === 'function')) return [3 /*break*/, 7];
+                        return [4 /*yield*/, nv.mergeDrawingFromBase64(niiFilePath, base64)];
+                    case 6:
+                        mergeResult = _e.sent();
+                        if (!mergeResult || !mergeResult.ok) {
+                            props.warn('Failed to merge ROI upload (invalid file or size mismatch with volume).');
+                            return [2 /*return*/, null];
+                        }
+                        if (mergeResult.importLabelRemap === null) {
+                            setLabelMapping(importedLabels);
+                            resampleImage(importedLabels);
+                        }
+                        else {
+                            merged = __assign({}, labelMapping);
+                            for (_i = 0, _a = Object.entries(mergeResult.importLabelRemap); _i < _a.length; _i++) {
+                                _b = _a[_i], oldL = _b[0], newId = _b[1];
+                                oldN = Number(oldL);
+                                newN = Number(newId);
+                                alias = oldN === newN
+                                    ? ((_d = (_c = importedLabels[oldL]) !== null && _c !== void 0 ? _c : importedLabels[String(oldL)]) !== null && _d !== void 0 ? _d : String(newId))
+                                    : String(newId);
+                                merged[String(newId)] = alias;
+                            }
+                            setLabelMapping(merged);
+                            resampleImage(merged);
+                        }
+                        return [3 /*break*/, 9];
+                    case 7: return [4 /*yield*/, nv.loadDrawingFromBase64(niiFilePath, base64)];
+                    case 8:
+                        _e.sent();
+                        setLabelMapping(importedLabels);
+                        resampleImage(importedLabels);
+                        _e.label = 9;
+                    case 9: return [3 /*break*/, 11];
+                    case 10:
+                        console.log("".concat(niiFilePath, " not found in the ZIP file."));
+                        return [2 /*return*/, null];
+                    case 11: return [3 /*break*/, 13];
+                    case 12:
+                        console.log("info.json not found in the ZIP file.");
+                        return [2 /*return*/, null];
+                    case 13: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // Normalize ROI.data.sliceMM into [number, number, number]
+    function getSavedSliceMMFromROI(roi) {
+        var _a;
+        try {
+            var raw = (_a = roi === null || roi === void 0 ? void 0 : roi.data) === null || _a === void 0 ? void 0 : _a.sliceMM;
+            if (!raw)
+                return null;
+            // Case A: already an array
+            if (Array.isArray(raw)) {
+                var arr = raw.slice(0, 3).map(function (v) { return typeof v === 'string' ? parseFloat(v) : v; });
+                return arr.every(Number.isFinite) ? arr : null;
+            }
+            // Case B: object like {0:'125.29', 1:'162.80', 2:'-18.83', 3:1}
+            if (typeof raw === 'object') {
+                var arr = [raw[0], raw[1], raw[2]].map(function (v) { return typeof v === 'string' ? parseFloat(v) : v; });
+                return arr.every(Number.isFinite) ? arr : null;
+            }
+            return null;
+        }
+        catch (_b) {
+            return null;
+        }
+    }
+    var selectDrawingLayer = function (roiIndex) { return __awaiter(_this, void 0, void 0, function () {
+        var sliceMM, frac;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    // console.log(nv.drawBitmap);
+                    console.log(props.rois[roiIndex].link);
+                    return [4 /*yield*/, unzipAndRenderDrawingLayer(props.rois[roiIndex].link)];
+                case 1:
+                    _e.sent();
+                    // If this ROI carries a saved slice position, jump to it
+                    try {
+                        // Log raw & normalized for debugging
+                        console.log('ROI sliceMM (raw):', (_c = (_b = (_a = props.rois) === null || _a === void 0 ? void 0 : _a[roiIndex]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.sliceMM);
+                        sliceMM = getSavedSliceMMFromROI((_d = props.rois) === null || _d === void 0 ? void 0 : _d[roiIndex]);
+                        console.log('ROI sliceMM (normalized):', sliceMM);
+                        if (sliceMM) {
+                            // Ensure engine uses the currently selected coordinate system
+                            nv.setSliceMM(worldSpace);
+                            frac = nv.mm2frac(sliceMM);
+                            console.log(1, frac);
+                            // if (Array.isArray(frac) && frac.length === 3) {
+                            console.log(2, frac);
+                            nv.scene.crosshairPos = frac;
+                            nv.drawScene(); ////;
+                            // use fresh array to guarantee React state update
+                            setMMs(nv.frac2mm(frac));
+                            // }
+                        }
+                    }
+                    catch (e) {
+                        // Intentionally ignore, if conversion fails we simply skip re-applying
+                    }
+                    setSelectedDrawingLayer(roiIndex);
+                    setDrawingChanged(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var unpackROI = function (accessURL) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, unzipAndRenderDrawingLayer(accessURL, true)];
+                case 1:
+                    _a.sent();
+                    setDrawingChanged(false);
+                    setSelectedDrawingLayer(props.rois.length);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var refreshROI = function () { return __awaiter(_this, void 0, void 0, function () {
+        var roiIndex, load;
+        return __generator(this, function (_a) {
+            roiIndex = selectedROI;
+            console.log(nv.drawBitmap);
+            load = function () {
+                console.log(props.rois[roiIndex].link);
+                console.trace();
+                nv.loadDrawingFromUrl(props.rois[roiIndex].link).then(function (value) {
+                    resampleImage();
+                });
+                setSelectedDrawingLayer(roiIndex);
+                setDrawingChanged(false);
+            };
+            load();
+            return [2 /*return*/];
+        });
+    }); };
+    var saveDrawingLayer = function (afterSaveCallback, preSaveCallback) {
+        if (preSaveCallback === void 0) { preSaveCallback = function () { }; }
+        setSaveDialogOpen(true);
+        setSaveConfirmCallback(function () { return (function (filename) { return __awaiter(_this, void 0, void 0, function () {
+            var config, sliceMM, response, originalCreateObjectURL, successful;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        preSaveCallback();
+                        config = {
+                            headers: {
+                                Authorization: "Bearer ".concat(props.accessToken)
+                            }
+                        };
+                        sliceMM = undefined;
+                        try {
+                            // Niivue keeps crosshair in fractional coords; convert to mm
+                            sliceMM = nv.frac2mm(nv.scene.crosshairPos);
+                        }
+                        catch (e) {
+                            // If conversion fails, use the last known mm state if you keep one,
+                            // or omit the field, sliceMM stays undefined in that case.
+                            console.log("Error with saving crosshair");
+                        }
+                        return [4 /*yield*/, AuthenticatedHttpClient.post(endpoints.ROI_UPLOAD, {
+                                "filename": "".concat(filename),
+                                "pipeline_id": props.pipelineID,
+                                "type": "image",
+                                "contentType": "application/octet-stream",
+                                data: sliceMM ? { sliceMM: sliceMM } : {} // persist current slice position (mm) into ROI.data dictionary
+                            }, config)];
+                    case 1:
+                        response = _a.sent();
+                        console.log('Save ROI response:', response.data);
+                        console.log('Sent ROI payload sliceMM:', sliceMM);
+                        originalCreateObjectURL = URL.createObjectURL;
+                        // Redefine the method
+                        URL.createObjectURL = function (blob) {
+                            var _this = this;
+                            console.log('saving blob');
+                            console.log(blob);
+                            zipAndSendDrawingLayer(response.data.upload_url, filename, blob).then(function () { return __awaiter(_this, void 0, void 0, function () {
+                                var freshRois, savedIndex;
+                                var _a, _b;
+                                return __generator(this, function (_c) {
+                                    switch (_c.label) {
+                                        case 0:
+                                            // Update available rois with this callback
+                                            // props.saveROICallback();
+                                            setDrawingChanged(false);
+                                            if (!(afterSaveCallback instanceof Function)) return [3 /*break*/, 2];
+                                            return [4 /*yield*/, afterSaveCallback()];
+                                        case 1:
+                                            _c.sent();
+                                            _c.label = 2;
+                                        case 2:
+                                            freshRois = (_b = (_a = props.getPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : [];
+                                            savedIndex = freshRois.findIndex(function (r) { return r.filename === filename; });
+                                            setSelectedDrawingLayer(savedIndex !== -1 ? savedIndex : freshRois.length - 1);
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                            // Call the original method and return its result
+                            return 'javascript:void(0);';
+                        };
+                        successful = nv.saveImage({
+                            filename: filename,
+                            isSaveDrawing: true
+                        });
+                        // De-patch
+                        URL.createObjectURL = originalCreateObjectURL;
+                        return [2 /*return*/];
+                }
+            });
+        }); }); });
+    };
+    var drawToolkitProps = {
+        nv: nv,
+        volumes: props.niis.map(niiToVolume),
+        selectedVolume: selectedVolume,
+        setSelectedVolume: selectVolume,
+        updateDrawPen: nvUpdateDrawPen,
+        drawPen: drawPen,
+        drawingEnabled: drawingEnabled,
+        setDrawingEnabled: nvSetDrawingEnabled,
+        showColorBar: colorBar,
+        toggleColorBar: nvUpdateColorBar,
+        changesMade: drawingChanged,
+        // toggleSampleDistribution,
+        drawUndo: function () {
+            nv.drawUndo();
+            resampleImage();
+            if (nv.drawBitmap && nv.drawBitmap.every(function (v) { return v === 0; })) {
+                setDrawingChanged(false);
+            }
+        },
+        resampleImage: resampleImage,
+        roiVisible: roiVisible,
+        toggleROIVisible: toggleROIVisible,
+        drawingOpacity: drawingOpacity,
+        setDrawingOpacity: nvUpdateDrawingOpacity,
+        setDrawingChanged: setDrawingChanged
+    };
+    return (_jsxs(Box, __assign({ sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            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 () {
+                }, 
+                // suffix={'.zip'}
+                defaultText: (props.rois[selectedROI] !== undefined ?
+                    props.rois[selectedROI].filename : undefined) }), props.niis[selectedVolume] != undefined && _jsx(CloudMrNiivuePanel, { nv: nv, transformFactors: transformFactors, decimalPrecision: decimalPrecision, locationData: locationData, locationTableVisible: locationTableVisible, pipelineID: props.pipelineID, resampleImage: resampleImage, rois: rois, drawToolkitProps: drawToolkitProps, drawShapeTool: drawShapeTool, setDrawShapeTool: setDrawShapeTool, mins: boundMins, maxs: boundMaxs, mms: mms, min: min, max: max, setMin: setMin, setMax: setMax, unzipAndRenderROI: unpackROI, zipAndSendROI: zipAndSendDrawingLayer, setLabelAlias: setLabelAlias, onAfterRoiUpload: function () {
+                    var _a;
+                    void ((_a = props.refreshPipelineRois) === null || _a === void 0 ? void 0 : _a.call(props));
+                }, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma }, "".concat(selectedVolume))] })));
+}
+function niiToVolume(nii) {
+    return {
+        //URL is for NiiVue blob loading
+        url: nii.link,
+        //name is for NiiVue name replacer (needs proper extension like .nii)
+        name: (nii.filename.split('/').pop()),
+        //alias is for user selection in toolbar
+        alias: nii.name
+    };
+}