cloudmr-ux 2.0.7 → 3.0.1

package/dist/core/common/components/NiivueTools/Niivue.js

@@ -0,0 +1,1270 @@
+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 } from "@niivue/niivue";
+import { SettingsPanel } from "./components/SettingsPanel";
+import { NumberPicker } from "./components/NumberPicker";
+import { ColorPicker } from "./components/ColorPicker";
+import { LayersPanel } from "./components/LayersPanel";
+import { NiivuePanel } from "./components/NiivuePanel";
+import { Niivue } from "./NiivuePatcher";
+import NVSwitch from "./components/Switch";
+import Toolbar from "./components/Toolbar";
+import Layer from "./components/Layer";
+import "./Niivue.css";
+import { CmrEditConfirmation } from "../../../../index";
+import axios from "axios";
+import { getEndpoints } from "../../../config/AppConfig";
+import Confirmation from "../../../../CmrComponents/dialogue/Confirmation";
+import Plotly from "plotly.js-dist-min";
+import { calculateMean, calculateStandardDeviation } from "./components/stats";
+import JSZip from "jszip";
+import { getMax, getMin } from "../../utilities";
+import { getPipelineROI } from "../../../features/rois/resultActionCreation";
+import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import { AuthenticatedHttpClient } from "../../utilities/AuthenticatedRequests";
+export var nv = new Niivue({
+    loadingText: "",
+    isColorbar: true,
+    isRadiologicalConvention: true,
+    fontSizeScaling: 0.04,
+    fontMinPx: 8,
+    colorbarHeight: 0.02,
+    dragMode: "pan",
+    // crosshairColor: [0.098,0.453,0.824]
+    crosshairColor: [1, 1, 0],
+    fontColor: [0.0, 0.94, 0.37, 1],
+    isNearestInterpolation: true,
+    isFilledPen: true,
+    drawPen: 1
+});
+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 NiiVueport(props) {
+    var _this = this;
+    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.drawPen), 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];
+    // Remembers the last crosshair position in millimeter space across volume switches
+    var lastMMRef = React.useRef(null);
+    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 histoRef = React.useRef(null);
+    var _11 = React.useState([]), rois = _11[0], setROIs = _11[1];
+    var _12 = React.useState(true), showCrosshair = _12[0], setShowCrosshair = _12[1];
+    var _13 = useState(1), brushSize = _13[0], setBrushSize = _13[1];
+    var _14 = useState("absolute"), complexMode = _14[0], setComplexMode = _14[1];
+    var _15 = useState(["absolute"]), complexOptions = _15[0], setComplexOptions = _15[1];
+    var _16 = useState(true), roiVisible = _16[0], setROIVisible = _16[1];
+    var _17 = useState(0.8), drawingOpacity = _17[0], setDrawingOpacity = _17[1];
+    var _18 = useState(0), min = _18[0], setMin = _18[1];
+    var _19 = useState(1), max = _19[0], setMax = _19[1];
+    var _20 = useState(false), textsVisible = _20[0], setTextsVisible = _20[1];
+    var _21 = useState({ a: 1, b: 0 }), transformFactors = _21[0], setTransformFactors = _21[1];
+    var _22 = useState(false), saving = _22[0], setSaving = _22[1];
+    // Gamma settings
+    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
+    };
+    React.useEffect(function () {
+        resampleImage();
+        // histogram.current?.addEventListener('resize',()=>props.resampleImage());
+    }, [histoRef]);
+    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);
+        }
+    }, []);
+    // Load initial volume on mount.
+    // Note: nv.loadVolumes() triggers onImageLoaded callback (line 285)
+    // which handles all the setup automatically.
+    React.useEffect(function () {
+        var loadInitialVolume = function () { return __awaiter(_this, void 0, void 0, function () {
+            var e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!props.niis[selectedVolume]) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        // loadVolumes calls onImageLoaded which does all setup
+                        return [4 /*yield*/, nv.loadVolumes([niiToVolume(props.niis[selectedVolume])])];
+                    case 2:
+                        // loadVolumes calls onImageLoaded which does all setup
+                        _a.sent();
+                        // Force a multiplanar view switch to trigger proper rendering, then switch back
+                        // TODO: fix this horrible hack
+                        setTimeout(function () {
+                            nv.setSliceType(nv.sliceTypeMultiplanar);
+                            // Then switch to the desired slice type
+                            setTimeout(function () {
+                                nvUpdateSliceType(sliceType);
+                                if (!lastMMRef.current) {
+                                    try {
+                                        setMMs(nv.frac2mm(nv.scene.crosshairPos));
+                                    }
+                                    catch (_a) { }
+                                }
+                            }, 50);
+                        }, 100);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.error("Error loading initial volume:", e_1);
+                        setWarning("Error loading results, please check internet connectivity");
+                        setWarningOpen(true);
+                        setTimeout(function () {
+                            setWarningOpen(false);
+                            setWarning("");
+                        }, 2500);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadInitialVolume();
+    }, []); // Empty dependency array - only run on mount
+    React.useEffect(function () {
+        // console.log(props.niis[props.selectedVolume]);
+        //Wait for other rendering processes to complete  before applying styles
+        stylingProxy(props.niis[props.selectedVolume]);
+    }, [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;
+        if (nv.volumes.length > 1) {
+            nv.loadVolumes([niiToVolume(props.niis[props.selectedVolume])]);
+            setWarning("Error loading results, please check internet connectivity");
+            setWarningOpen(true);
+            setTimeout(function () {
+                setWarningOpen(false);
+                setWarning("");
+            }, 2500);
+            return;
+        }
+        // console.log(nv.volumes);
+        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 volume = nv.volumes[0];
+        nv.setGamma(1.0);
+        (_a = nv.onResetGamma) === null || _a === void 0 ? void 0 : _a.call(nv);
+        nv.resetScene();
+        nvSetDragMode(dragMode); // keep engine behavior in sync with dropdown
+        // Re-apply world/voxel mode and last crosshair after resets
+        nv.setSliceMM(worldSpace);
+        applySavedCrosshairIfAny();
+        // NEW: keep display mode consistent after resets
+        nvUpdateSliceType(sliceType);
+        if (!lastMMRef.current) {
+            try {
+                setMMs(nv.frac2mm(nv.scene.crosshairPos));
+            }
+            catch (_b) { }
+        }
+        // Force a complete re-render with texture rebinding
+        // This ensures textures are properly bound in the current view mode
+        setTimeout(function () {
+            nv.updateGLVolume();
+            nv.drawScene();
+        }, 100);
+    };
+    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
+            lastMMRef.current = __spreadArray([], data.values[0].mm, true); // keep a fresh copy in the ref too
+            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, 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) {
+        setDrawPen(a.target.value);
+        var penValue = a.target.value;
+        nv.setPenValue(penValue & 7, penValue > 0);
+        if (penValue === 8) {
+            nv.setPenValue(0, true);
+        }
+    }
+    function nvUpdateBrushSize(size) {
+        setBrushSize(size);
+        nv.opts.penBounds = (size - 1) / 2;
+    }
+    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();
+        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();
+    }
+    // Re-apply a saved crosshair position (in mm) after any operation that resets Niivue state.
+    function applySavedCrosshairIfAny() {
+        try {
+            if (!lastMMRef.current)
+                return;
+            // Ensure engine uses the currently selected coordinate system
+            nv.setSliceMM(worldSpace);
+            var frac = nv.mm2frac(lastMMRef.current);
+            if (Array.isArray(frac) && frac.length === 3) {
+                nv.scene.crosshairPos = frac;
+                nv.drawScene();
+                setMMs(nv.frac2mm(frac)); // returns a new array; guarantees a state change
+            }
+        }
+        catch (e) {
+            // Intentionally ignore; if conversion fails we simply skip re-applying.
+        }
+    }
+    var _30 = useState({}), labelMapping = _30[0], setLabelMapping = _30[1];
+    function resampleImage(mapping) {
+        if (mapping === void 0) { mapping = labelMapping; }
+        var image = nv.volumes[0];
+        var rois = [];
+        var layout = {
+            barmode: "overlay",
+            title: { text: "ROI Histogram" },
+            // height: 100,
+            margin: {
+                l: 50,
+                r: 50,
+                b: 50,
+                t: 60,
+                pad: 4
+            },
+            xaxis: {
+                autoscale: true,
+                title: { text: "Voxel value" },
+                showgrid: true
+            },
+            yaxis: {
+                autoscale: true,
+                title: { text: "Bin frequency" },
+                showgrid: true
+            },
+            responsive: true
+        }; // Set the height of the plot here};
+        // Bitmap depicts the drawn content
+        if (nv.drawBitmap === null) {
+            Plotly.newPlot("histoplot", [], layout, { responsive: true });
+            setROIs([]);
+            return;
+        } //If ROI (drawing) is not inside the stack
+        var min = image.robust_min;
+        var max = image.robust_max;
+        var samples = {
+            1: [],
+            2: [],
+            3: [],
+            4: [],
+            5: [],
+            6: [],
+            7: []
+        };
+        for (var i = 0; i < nv.drawBitmap.length; i++) {
+            //val&7-1 converts to r,g,b index through bit operations
+            if (samples[nv.drawBitmap[i]] === undefined) {
+                samples[nv.drawBitmap[i]] = [];
+            }
+            samples[nv.drawBitmap[i]].push(image.img[i]);
+        }
+        if (nv.hiddenBitmap !== undefined) {
+            for (var i = 0; i < nv.hiddenBitmap.length; i++) {
+                //val&7-1 converts to r,g,b index through bit operations
+                if (samples[nv.hiddenBitmap[i]] === undefined) {
+                    samples[nv.hiddenBitmap[i]] = [];
+                }
+                samples[nv.hiddenBitmap[i]].push(image.img[i]);
+            }
+        }
+        var colors = [
+            "#bbb",
+            "#f00",
+            "#0f0",
+            "#00f",
+            "yellow",
+            "cyan",
+            "#e81ce8",
+            "#e8dbc7",
+        ];
+        Object.keys(samples).forEach(function (_key) {
+            var key = Number(_key);
+            var sample = samples[key];
+            if (sample.length > 0 && key > 0) {
+                console.log(key);
+                rois.push({
+                    label: key.toString(),
+                    alias: mapping[key] ? mapping[key] : key.toString(),
+                    visibility: nv.getLabelVisibility(Number(key)),
+                    color: colors[key],
+                    mu: calculateMean(sample),
+                    std: calculateStandardDeviation(sample),
+                    opacity: nv.drawOpacity,
+                    count: sample.length,
+                    sample: sample
+                });
+            }
+        });
+        setROIs(rois);
+        // plot a histogram of numbers
+        var traces = [];
+        for (var _i = 0, rois_1 = rois; _i < rois_1.length; _i++) {
+            var roi = rois_1[_i];
+            // if(roi.visibility){
+            traces.push({
+                x: roi.sample,
+                type: "histogram",
+                name: roi.alias,
+                opacity: roi.visibility ? 0.5 : 0.1,
+                marker: {
+                    color: roi.color
+                },
+                autobinx: false,
+                xbins: {
+                    end: max,
+                    size: (max - min) / 100,
+                    start: min
+                }
+            });
+            // }
+        }
+        Plotly.newPlot("histoplot", traces, layout, { responsive: true });
+    }
+    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) {
+        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(true);
+            setTextsVisible(false);
+            nv.opts.crosshairWidth = 1;
+            nv.hideText = true;
+        }
+    }
+    var dispatch = useAppDispatch();
+    var pipeline = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.pipeline_id; });
+    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 e_2;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            nv.closeDrawing();
+                            setDrawingChanged(false);
+                            if (drawingEnabled)
+                                nvUpdateDrawingEnabled();
+                            if (props.niis[selectedVolume] !== undefined) {
+                                nv.removeVolume(niiToVolume(props.niis[selectedVolume]));
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            // loadVolumes calls onImageLoaded which does all setup
+                            return [4 /*yield*/, nv.loadVolumes([niiToVolume(props.niis[volumeIndex])])];
+                        case 2:
+                            // loadVolumes calls onImageLoaded which does all setup
+                            _a.sent();
+                            // Force a multiplanar view switch to trigger proper rendering, then switch back
+                            // RJW TODO: fix this horrible hack
+                            setTimeout(function () {
+                                nv.setSliceType(nv.sliceTypeMultiplanar);
+                                nv.resizeListener();
+                                nv.drawScene();
+                                // Then switch to the desired slice type
+                                setTimeout(function () {
+                                    nvUpdateSliceType(sliceType);
+                                    nv.resizeListener();
+                                    nv.drawScene();
+                                }, 50);
+                            }, 100);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_2 = _a.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(null);
+                            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 () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!pipeline) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, dispatch(getPipelineROI({ pipeline: pipeline }))];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2:
+                                    setSaving(false);
+                                    openVolume();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); }, function () {
+                        setSaving(true);
+                    });
+                }; });
+                setWarningCancelCallback(function () { return function () {
+                    openVolume();
+                }; });
+                setConfirmationOpen(true);
+            }
+            else
+                openVolume();
+            return [2 /*return*/];
+        });
+    }); };
+    var _32 = useState(null), selectedROI = _32[0], setSelectedDrawingLayer = _32[1];
+    var _33 = useState(false), saveDialogOpen = _33[0], setSaveDialogOpen = _33[1];
+    var _34 = useState(function (text) { }), 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];
+    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*/];
+                }
+            });
+        });
+    };
+    var unzipAndRenderDrawingLayer = function (accessURL) { return __awaiter(_this, void 0, void 0, function () {
+        var response, blob, zip, fileInfo, content, info_1, niiFilePath, niiDrawing, base64;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fetch(accessURL)];
+                case 1:
+                    response = _a.sent();
+                    // Check if the request was successful
+                    if (!response.ok) {
+                        props.warn("Failed to load the requested ROI Layer");
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, response.blob()];
+                case 2:
+                    blob = _a.sent();
+                    zip = new JSZip();
+                    return [4 /*yield*/, zip.loadAsync(blob)];
+                case 3:
+                    _a.sent();
+                    fileInfo = zip.file("info.json");
+                    if (!fileInfo) return [3 /*break*/, 8];
+                    return [4 /*yield*/, fileInfo.async("string")];
+                case 4:
+                    content = _a.sent();
+                    info_1 = JSON.parse(content);
+                    niiFilePath = info_1.data[0].filename;
+                    niiDrawing = zip.file(niiFilePath);
+                    if (!niiDrawing) return [3 /*break*/, 6];
+                    return [4 /*yield*/, niiDrawing.async("base64")];
+                case 5:
+                    base64 = _a.sent();
+                    console.log(niiFilePath);
+                    nv.loadDrawingFromBase64(niiFilePath, base64).then(function () {
+                        setLabelMapping(info_1.data[0].labelMapping);
+                        resampleImage(info_1.data[0].labelMapping);
+                    });
+                    return [3 /*break*/, 7];
+                case 6:
+                    console.log("".concat(niiFilePath, " not found in the ZIP file."));
+                    props.warn("".concat(niiFilePath, " not found in the ZIP file."));
+                    return [2 /*return*/, null];
+                case 7: return [3 /*break*/, 9];
+                case 8:
+                    console.log("info.json not found in the ZIP file.");
+                    props.warn("info.json not found in the ZIP file.");
+                    return [2 /*return*/, null];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    // This is a small fix that prevents the selected roi index from jumping to
+    // the newest saved roi after user has performed a roi reselection during
+    // roi saving
+    var _39 = useState(false), selectedDuringSaving = _39[0], setSelectedDuringSaving = _39[1];
+    var selectDrawingLayer = function (roiIndex) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // console.log(nv.drawBitmap);
+                    console.log(props.rois[roiIndex].link);
+                    return [4 /*yield*/, unzipAndRenderDrawingLayer(props.rois[roiIndex].link)];
+                case 1:
+                    _a.sent();
+                    setSelectedDrawingLayer(roiIndex);
+                    setSelectedDuringSaving(true);
+                    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)];
+                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);
+            if (roiIndex !== null) {
+                load = function (idx) {
+                    console.log(props.rois[idx].link);
+                    console.trace();
+                    nv.loadDrawingFromUrl(props.rois[idx].link).then(function (value) {
+                        resampleImage();
+                    });
+                    setSelectedDrawingLayer(roiIndex);
+                    setDrawingChanged(false);
+                };
+                load(roiIndex);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var saveDrawingLayer = function (afterSaveCallback, preSaveCallback) {
+        if (preSaveCallback === void 0) { preSaveCallback = function () { }; }
+        var endpoints = getEndpoints();
+        setSaveDialogOpen(true);
+        setSaveConfirmCallback(function () { return function (filename) { return __awaiter(_this, void 0, void 0, function () {
+            var config, response, originalCreateObjectURL, successful;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        preSaveCallback();
+                        config = {};
+                        return [4 /*yield*/, AuthenticatedHttpClient.post(endpoints.ROI_UPLOAD, {
+                                filename: "".concat(filename),
+                                pipeline_id: props.pipelineID,
+                                type: "image",
+                                contentType: "application/octet-stream"
+                            }, config)];
+                    case 1:
+                        response = _a.sent();
+                        originalCreateObjectURL = URL.createObjectURL;
+                        // Redefine the method
+                        URL.createObjectURL = function (blob) {
+                            var _this = this;
+                            console.log("saving blob");
+                            console.log(blob);
+                            setSelectedDuringSaving(false);
+                            zipAndSendDrawingLayer(response.data.upload_url, filename, blob).then(function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.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:
+                                            _a.sent();
+                                            _a.label = 2;
+                                        case 2:
+                                            if (!selectedDuringSaving)
+                                                //Only switch to the newest roi when user hasn't performed reselection
+                                                // during the period
+                                                setSelectedDrawingLayer(props.rois.length);
+                                            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 () {
+            //To be moved and organized
+            nv.drawUndo();
+            resampleImage();
+        },
+        brushSize: brushSize,
+        updateBrushSize: nvUpdateBrushSize,
+        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, defaultValue: 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 }), _jsx(Confirmation, { 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: selectedROI
+                    ? props.rois[selectedROI] !== undefined
+                        ? props.rois[selectedROI].filename
+                        : undefined
+                    : undefined }), props.niis[selectedVolume] !== undefined && (_jsx(NiivuePanel, { nv: nv, 
+                // key={`${selectedVolume}`}
+                transformFactors: transformFactors, decimalPrecision: decimalPrecision, locationData: locationData, locationTableVisible: locationTableVisible, pipelineID: props.pipelineID || "", resampleImage: resampleImage, rois: rois, drawToolkitProps: drawToolkitProps, layerList: layerList, mins: boundMins, maxs: boundMaxs, mms: mms, min: min, max: max, setMin: setMin, setMax: setMax, rangeKey: rangeKey, unzipAndRenderROI: unpackROI, zipAndSendROI: zipAndSendDrawingLayer, setLabelAlias: setLabelAlias, gamma: gamma, gammaKey: gammaKey, setGamma: setGamma }))] })));
+}
+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() || nii.filename,
+        //alias is for user selection in toolbar
+        alias: nii.name
+    };
+}