cloudmr-ux 2.0.7 → 3.0.1

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

@@ -0,0 +1,108 @@
+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 };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from "@mui/material";
+import { Box } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { Button } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import GestureIcon from "@mui/icons-material/Gesture";
+import CodeIcon from "@mui/icons-material/Code";
+import LayersIcon from "@mui/icons-material/Layers";
+import AddIcon from "@mui/icons-material/Add";
+export function LayersPanel(props) {
+    function handleAddLayer() {
+        var input = document.createElement("input");
+        input.type = "file";
+        input.onchange = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    if (input.files) {
+                        props.onAddLayer(input.files[0]);
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        input.click();
+    }
+    return (_jsx(Drawer, __assign({ open: props.open, variant: "temporary", anchor: "left", sx: {
+            width: props.width
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                width: props.width,
+                display: "flex",
+                flexDirection: "row",
+                height: "100%"
+            } }, { children: [_jsxs(Box, __assign({ sx: {
+                        width: 48,
+                        display: "flex",
+                        flexDirection: "column",
+                        backgroundColor: "#F8F8F8",
+                        height: "100%",
+                        alignItems: "center"
+                    } }, { children: [_jsx(IconButton, __assign({ style: {
+                                marginTop: "36px"
+                            } }, { children: _jsx(LayersIcon, { color: "primary" }) })), _jsx(IconButton, __assign({ style: {
+                                marginTop: "8px"
+                            } }, { children: _jsx(GestureIcon, {}) })), _jsx(IconButton, __assign({ style: {
+                                marginTop: "8px"
+                            } }, { children: _jsx(CodeIcon, {}) }))] })), _jsxs(Box, __assign({ sx: {
+                        width: props.width,
+                        role: "presentation",
+                        display: "flex",
+                        height: "100%",
+                        flexDirection: "column",
+                        justifyContent: "flex-start",
+                        ml: 1,
+                        mr: 1
+                    } }, { children: [_jsx(Box, __assign({ sx: {
+                                display: "flex"
+                            } }, { children: _jsx(IconButton, __assign({ onClick: props.onToggleMenu, style: { marginLeft: "auto" } }, { children: _jsx(ArrowBackIcon, {}) })) })), _jsx(Box, __assign({ sx: {
+                                display: "flex"
+                            } }, { children: _jsx(Button, __assign({ onClick: handleAddLayer, endIcon: _jsx(AddIcon, {}), size: "small" }, { children: "Add Layer" })) })), props.children] }))] })) })));
+}

package/dist/core/common/components/NiivueTools/components/LocationTable.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export default function LocationTable(props: {
+    isVisible: boolean;
+    decimalPrecision: number;
+    tableData: any[];
+    showDistribution?: boolean;
+    style: React.CSSProperties;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+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);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+export default function LocationTable(props) {
+    var display = "none";
+    if (props.isVisible) {
+        display = "";
+    }
+    else {
+        display = "none";
+    }
+    var data = props.tableData[0];
+    var value = (data === null || data === void 0 ? void 0 : data.power)
+        ? data
+            ? (data.value / data.transformA + data.transformB).toExponential(3)
+            : undefined
+        : data
+            ? data.value.toFixed(props.decimalPrecision)
+            : undefined;
+    return (_jsx(Box, __assign({ sx: {
+            display: display === "none" ? "none" : "flex",
+            height: "100%",
+            width: props.showDistribution ? "70%" : "100%"
+        }, style: props.style }, { children: _jsxs("div", __assign({ className: "row" }, { children: [_jsx("div", __assign({ className: "col-auto" }, { children: props.label && _jsxs(HintText, { children: [props.label, ":"] }) })), _jsx("div", __assign({ className: "col-auto" }, { children: _jsx(HintText, { children: "Value: ".concat(value ? value : undefined) }) })), _jsx("div", __assign({ className: "col-auto" }, { children: _jsx(HintText, { children: data
+                            ? "Coordinates: (".concat(data.mm[0].toFixed(props.decimalPrecision), ", ").concat(data.mm[1].toFixed(props.decimalPrecision), ", ").concat(data.mm[2].toFixed(props.decimalPrecision), ")")
+                            : "Coordinates: undefined" }) })), _jsx("div", __assign({ className: "col-auto" }, { children: _jsx(HintText, { children: data
+                            ? "Voxel location: (".concat(data.vox[0], ",").concat(data.vox[1], ",").concat(data.vox[2], ")")
+                            : "Voxel location: undefined" }) }))] })) })));
+}
+var HintText = function (props) {
+    return (_jsx("span", __assign({ style: { color: "white", fontSize: "inherit" } }, { children: props.children })));
+};

package/dist/core/common/components/NiivueTools/components/MaskPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface MaskPlatteProps {
+    expanded: boolean;
+    nv: any;
+    setMaskColor: (color: string | undefined) => void;
+    resampleImage: () => void;
+    unfocus: () => void;
+}
+declare const MaskPlatte: React.FC<MaskPlatteProps>;
+export default MaskPlatte;

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

@@ -0,0 +1,123 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Stack, IconButton, Typography, Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { InvertibleDualSlider, CmrCheckbox } from "../../../../../index";
+var MaskPlatte = function (_a) {
+    var expanded = _a.expanded, nv = _a.nv, setMaskColor = _a.setMaskColor, resampleImage = _a.resampleImage, unfocus = _a.unfocus;
+    var _b = useState(0), colorIndex = _b[0], storeColorIndex = _b[1];
+    var _c = useState("red"), maskColor = _c[0], storeMaskColor = _c[1];
+    var _d = useState(false), checked = _d[0], setChecked = _d[1];
+    var _e = useState(undefined), original = _e[0], setOriginal = _e[1];
+    var colors = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"];
+    var filledOptions = colors.map(function (color) { return (_jsx(FiberManualRecordIcon, { sx: { color: color } })); });
+    // if (expanded) { // TODO RJW: doing this this causes errors, skip for now
+    //   setMaskColor(maskColor);
+    // } else {
+    //   setMaskColor(undefined);
+    // }
+    var _f = useState(nv.volumes[0] ? nv.volumes[0].vox_min : 0), min = _f[0], setMin = _f[1];
+    var _g = useState(nv.volumes[0] ? nv.volumes[0].vox_max : 1), max = _g[0], setMax = _g[1];
+    var cancelMask = function () {
+        if (original)
+            nv.drawBitmap = new Uint8Array(original);
+        else
+            return;
+        nv.refreshDrawing(true);
+        resampleImage();
+        setOriginal(undefined);
+    };
+    useEffect(function () {
+        if (!expanded) {
+            cancelMask();
+        }
+        else {
+            if (colorIndex != -1)
+                nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+            resampleImage();
+        }
+    }, [expanded]);
+    useEffect(function () {
+        if (colorIndex != -1 && expanded)
+            nv.fillRange(min, max, colorIndex + 1, checked, original, setOriginal);
+    }, [min, max, checked]);
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 450 : 0,
+            // transition: 'all 0.5s',
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        }, direction: "column" }, { children: [_jsx(Stack, __assign({ alignItems: "center" }, { children: _jsx(Typography, __assign({ color: "white", gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Mask range:" })) })), _jsxs(Stack
+            // style={{
+            //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+            //     maxWidth: expandDrawOptions ? 300 : 0,
+            //     transition: 'all 0.5s',
+            //     overflow: 'hidden',
+            //     borderRadius: '16px'
+            // }}
+            , __assign({ 
+                // style={{
+                //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+                //     maxWidth: expandDrawOptions ? 300 : 0,
+                //     transition: 'all 0.5s',
+                //     overflow: 'hidden',
+                //     borderRadius: '16px'
+                // }}
+                direction: "row", flexDirection: "row", justifyContent: "center" }, { children: [filledOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                            storeColorIndex(index);
+                            storeMaskColor(colors[index]);
+                            setMaskColor(colors[index]);
+                            nv.fillRange(min, max, index + 1, checked, original, setOriginal);
+                            resampleImage();
+                        } }, { children: value }), index)); }), _jsx(CmrCheckbox, __assign({ style: { color: "white" }, onChange: function (e) {
+                            e.stopPropagation();
+                            setChecked(e.target.checked);
+                            resampleImage();
+                        } }, { children: "Inverted" }))] })), _jsx(Stack, __assign({ direction: "row", sx: { mb: 1 } }, { children: _jsx(Box, __assign({ width: 400, style: { paddingLeft: "10px", paddingRight: "10px" } }, { children: _jsx(InvertibleDualSlider, { name: "", min: nv.volumes[0] ? nv.volumes[0].vox_min : 0, max: nv.volumes[0] ? nv.volumes[0].vox_max : 1, reverse: checked, setMin: setMin, setMax: setMax, onFinalize: function () {
+                            resampleImage();
+                        } }) })) })), _jsxs(Stack
+            // style={{
+            //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+            //     maxWidth: expandDrawOptions ? 300 : 0,
+            //     transition: 'all 0.5s',
+            //     overflow: 'hidden',
+            //     borderRadius: '16px'
+            // }}
+            , __assign({ 
+                // style={{
+                //     border: `${expandDrawOptions ? '1px' : 0} solid #ccc`,
+                //     maxWidth: expandDrawOptions ? 300 : 0,
+                //     transition: 'all 0.5s',
+                //     overflow: 'hidden',
+                //     borderRadius: '16px'
+                // }}
+                direction: "row", flexDirection: "row", justifyContent: "center" }, { children: [_jsx(IconButton, __assign({ onClick: function () {
+                            setOriginal(undefined);
+                            nv.drawAddUndoBitmapWithHiddenVoxels();
+                            unfocus();
+                        } }, { children: _jsx(CheckIcon, { style: { color: "green" } }) })), _jsx(IconButton, __assign({ onClick: function () {
+                            cancelMask();
+                            unfocus();
+                        } }, { children: _jsx(CloseIcon, { style: { color: "red" } }) }))] }))] })));
+};
+export default MaskPlatte;

package/dist/core/common/components/NiivueTools/components/NiivuePanel.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { DrawToolkitProps } from "./DrawToolKit";
+import "./Toolbar.scss";
+interface NiivuePanelProps {
+    nv: any;
+    pipelineID: string;
+    locationTableVisible: boolean;
+    locationData: any[];
+    decimalPrecision: number;
+    drawToolkitProps: DrawToolkitProps;
+    resampleImage: () => void;
+    layerList: React.ComponentProps<any>[];
+    mins: number[];
+    maxs: number[];
+    mms: number[];
+    rois: {}[];
+    min: number;
+    max: number;
+    setMin: (min: number) => void;
+    setMax: (max: number) => void;
+    zipAndSendROI: (url: string, filename: string, blob: Blob) => Promise<void>;
+    unzipAndRenderROI: (url: string) => Promise<void>;
+    setLabelAlias: (label: string | number, alias: string) => void;
+    transformFactors: {
+        a: number;
+        b: number;
+    };
+    rangeKey: number;
+    gamma: number;
+    gammaKey: number;
+    setGamma: (val: number) => void;
+}
+export declare function NiivuePanel(props: NiivuePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,305 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Card, CardContent } from "@mui/material";
+import LocationTable from "./LocationTable";
+import { ROITable } from "../../../../app/results/Rois";
+import { DrawToolkit } from "./DrawToolKit";
+// import GUI from "lil-gui";
+import "./Toolbar.scss";
+import TKDualRange from "../../../../../CmrComponents/tk-dualrange/TKDualRange";
+function toRatio(val, min, max) {
+    return (val - min) / (max - min);
+}
+export function NiivuePanel(props) {
+    var _a, _b, _c, _d;
+    var sliceControl = React.useRef(null);
+    var canvas = React.useRef(null);
+    var histogram = React.useRef(null);
+    var mins = props.mins, maxs = props.maxs, mms = props.mms;
+    // const {gui} = createGUI(props.nv);
+    var height = window.innerHeight * 0.75;
+    // This hook is for initialization, called only once
+    React.useEffect(function () {
+        props.nv.attachTo("niiCanvas");
+        props.nv.opts.dragMode = props.nv.dragModes.pan;
+    }, [canvas]);
+    // This hook is called when show distribution state changed
+    React.useEffect(function () {
+        props.nv.resizeListener();
+        props.nv.setMultiplanarLayout(2);
+        props.nv.setMultiplanarPadPixels(10);
+        props.resampleImage();
+    }, [window.innerWidth, window.innerHeight]);
+    React.useEffect(function () {
+        setTimeout(function () {
+            props.nv.resizeListener();
+            props.nv.setMultiplanarLayout(2);
+            props.nv.setMultiplanarPadPixels(10);
+            props.resampleImage();
+        }, 300);
+    }, []);
+    React.useEffect(function () {
+        props.resampleImage();
+    }, [histogram]);
+    var _e = React.useState(false), pause = _e[0], pauseUpdate = _e[1];
+    // const [rangeMin, setRangeMin] = useState(undefined);
+    // const [rangeMax, setRangemax] = useState(undefined);
+    //Transform factors are applied when scientific notation for voxel values become necessary
+    var _f = props.transformFactors, a = _f.a, b = _f.b;
+    var safeSpan = function (i) { return Math.max(1e-9, maxs[i] - mins[i]); };
+    var ratio = function (val, i) { return (val - mins[i]) / safeSpan(i); };
+    // --- X Slice ---
+    // helper to clamp and round
+    var clamp = function (v, lo, hi) {
+        return Math.max(lo, Math.min(hi, v));
+    };
+    var round3 = function (v) { return Math.round(v * 1000) / 1000; };
+    // Local state mirrors props.mms[0]
+    var _g = React.useState(round3(mms[0])), xVal = _g[0], setXVal = _g[1];
+    // Keep local state in sync when Niivue (or parent) updates mms[0]
+    React.useEffect(function () {
+        setXVal(round3(mms[0]));
+    }, [mms[0]]);
+    // Shared updater: write to Niivue, then draw
+    var applyX = function (val) {
+        var v = clamp(round3(val), mins[0], maxs[0]);
+        setXVal(v);
+        // Use local yVal/zVal so we don't regress other axes
+        props.nv.scene.crosshairPos = [ratio(v, 0), ratio(yVal, 1), ratio(zVal, 2)];
+        props.nv.drawScene();
+    };
+    // --- Y Slice ---
+    var _h = React.useState(round3(mms[1])), yVal = _h[0], setYVal = _h[1];
+    React.useEffect(function () {
+        setYVal(round3(mms[1]));
+    }, [mms[1]]);
+    var applyY = function (val) {
+        var v = clamp(round3(val), mins[1], maxs[1]);
+        setYVal(v);
+        // Use local xVal/zVal
+        props.nv.scene.crosshairPos = [ratio(xVal, 0), ratio(v, 1), ratio(zVal, 2)];
+        props.nv.drawScene();
+    };
+    // --- Z Slice ---
+    var _j = React.useState(round3(mms[2])), zVal = _j[0], setZVal = _j[1];
+    React.useEffect(function () {
+        setZVal(round3(mms[2]));
+    }, [mms[2]]);
+    var applyZ = function (val) {
+        var v = clamp(round3(val), mins[2], maxs[2]);
+        setZVal(v);
+        // Use local xVal/yVal
+        props.nv.scene.crosshairPos = [ratio(xVal, 0), ratio(yVal, 1), ratio(v, 2)];
+        props.nv.drawScene();
+    };
+    return (_jsxs(Box, __assign({ sx: {
+            width: "100%",
+            display: "flex",
+            flexDirection: {
+                xs: "column",
+                md: "row"
+            },
+            // minHeight: 0,
+            flexWrap: "nowrap"
+        } }, { children: [_jsxs(Box, __assign({ sx: {
+                    width: {
+                        xs: "100%",
+                        md: "63%"
+                    },
+                    display: "flex",
+                    flexDirection: "column",
+                    minHeight: 0,
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                    mb: { xs: 2, md: 0 }
+                } }, { children: [_jsx(LocationTable, { tableData: props.locationData, isVisible: true, decimalPrecision: props.decimalPrecision, style: {
+                            width: "100%",
+                            height: "30pt",
+                            paddingTop: "10px",
+                            color: "white",
+                            background: "black"
+                        } }), _jsx(Box, __assign({ sx: {
+                            position: "relative",
+                            width: "100%",
+                            height: {
+                                xs: 300,
+                                sm: 400,
+                                md: 1035
+                            }
+                        } }, { children: _jsx("canvas", { id: "niiCanvas", ref: canvas, style: {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                height: "100%"
+                            } }) }))] })), _jsxs(Box, __assign({ sx: {
+                    width: {
+                        xs: "100%",
+                        md: "35%"
+                    },
+                    display: "flex",
+                    flexDirection: "column",
+                    ml: {
+                        xs: 0,
+                        md: 1
+                    },
+                    minHeight: 0,
+                    height: "100%"
+                } }, { children: [_jsx(DrawToolkit, __assign({}, props.drawToolkitProps, { style: {
+                            height: "30pt",
+                            marginBottom: "10px"
+                        } })), _jsx(Box, __assign({ id: "controlDock", className: "title", style: { width: "100%" }, ref: sliceControl }, { children: "Slice Position" })), _jsx(Card, __assign({ variant: "outlined", sx: {
+                            mb: 2,
+                            borderTopLeftRadius: 0,
+                            borderTopRightRadius: 0
+                        } }, { children: _jsx(CardContent, { children: _jsxs(Box, __assign({ style: {
+                                    display: "flex",
+                                    flex: 1,
+                                    minWidth: "245px",
+                                    flexDirection: "column"
+                                } }, { children: [_jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: {
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: 10,
+                                                    marginBottom: 6
+                                                } }, { children: [_jsx("label", __assign({ htmlFor: "xSlice" }, { children: "X:" })), _jsx("input", { type: "number", value: xVal, min: mins[0], max: maxs[0], step: 1, onChange: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            if (!Number.isFinite(next))
+                                                                return;
+                                                            applyX(next);
+                                                        }, onBlur: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            applyX(clamp(next, mins[0], maxs[0]));
+                                                        }, style: {
+                                                            width: 80,
+                                                            padding: "4px 6px",
+                                                            borderRadius: 6,
+                                                            border: "1px solid #ccc",
+                                                            fontSize: "0.9rem"
+                                                        } })] })), _jsx("input", { id: "xSlice", type: "range", min: mins[0], max: maxs[0], step: 1, value: xVal, onChange: function (e) {
+                                                    var next = Number(e.target.value);
+                                                    applyX(next);
+                                                }, style: {
+                                                    width: "100%",
+                                                    accentColor: "#580f8b"
+                                                } })] })), _jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: {
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: 10,
+                                                    marginBottom: 6
+                                                } }, { children: [_jsx("label", __assign({ htmlFor: "ySlice" }, { children: "Y:" })), _jsx("input", { type: "number", 
+                                                        // keep the input's value as a number for smooth dragging,
+                                                        // but still *show* 3 decimals by formatting on blur.
+                                                        value: yVal, min: mins[1], max: maxs[1], step: 0.001, onChange: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            if (!Number.isFinite(next))
+                                                                return;
+                                                            applyY(next);
+                                                        }, onBlur: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            // snap the field to 3-decimal formatting on blur
+                                                            applyY(next);
+                                                        }, style: {
+                                                            width: 100,
+                                                            padding: "4px 6px",
+                                                            borderRadius: 6,
+                                                            border: "1px solid #ccc",
+                                                            fontSize: "0.9rem"
+                                                        } })] })), _jsx("input", { id: "ySlice", type: "range", min: mins[1], max: maxs[1], step: 0.001, value: yVal, onChange: function (e) {
+                                                    var next = Number(e.target.value);
+                                                    applyY(next);
+                                                }, style: {
+                                                    width: "100%",
+                                                    accentColor: "#580f8b"
+                                                } })] })), _jsxs("div", { children: [_jsxs("div", __assign({ style: {
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: 10,
+                                                    marginBottom: 6
+                                                } }, { children: [_jsx("label", __assign({ htmlFor: "zSlice" }, { children: "Z:" })), _jsx("input", { type: "number", value: zVal.toFixed(3), min: mins[2], max: maxs[2], step: 0.001, onChange: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            if (!Number.isFinite(next))
+                                                                return;
+                                                            applyZ(next);
+                                                        }, onBlur: function (e) {
+                                                            var next = Number(e.target.value);
+                                                            applyZ(clamp(next, mins[2], maxs[2]));
+                                                        }, style: {
+                                                            width: 100,
+                                                            padding: "4px 6px",
+                                                            borderRadius: 6,
+                                                            border: "1px solid #ccc",
+                                                            fontSize: "0.9rem"
+                                                        } })] })), _jsx("input", { id: "zSlice", type: "range", min: mins[2], max: maxs[2], step: 0.001, value: zVal, onChange: function (e) {
+                                                    var next = Number(e.target.value);
+                                                    applyZ(next);
+                                                }, style: {
+                                                    width: "100%",
+                                                    accentColor: "#580f8b"
+                                                } })] })] })) }) })), _jsx(Box, __assign({ id: "controlDock", className: "title", style: { width: "100%" }, ref: sliceControl }, { children: "Contast Adjustments" })), _jsx(Card, __assign({ variant: "outlined", sx: {
+                            mb: 2,
+                            borderTopLeftRadius: 0,
+                            borderTopRightRadius: 0
+                        } }, { children: _jsx(CardContent, { children: _jsxs(Box, __assign({ style: {
+                                    display: "flex",
+                                    flex: 1,
+                                    minWidth: "245px",
+                                    flexDirection: "column"
+                                } }, { children: [_jsx(TKDualRange, { name: "Values:", 
+                                        /* Domain in REAL space: robust range for the track */
+                                        minDomain: (_b = (_a = props.nv.volumes[0]) === null || _a === void 0 ? void 0 : _a.robust_min) !== null && _b !== void 0 ? _b : 0, maxDomain: (_d = (_c = props.nv.volumes[0]) === null || _c === void 0 ? void 0 : _c.robust_max) !== null && _d !== void 0 ? _d : 1, 
+                                        /* Current window in REAL space: cal_min / cal_max mirrored in React */
+                                        valueLow: props.min, valueHigh: props.max, 
+                                        /* When user drags either thumb or edits the inputs */
+                                        onChangeLow: function (min) {
+                                            var v = props.nv.volumes[0];
+                                            if (!v)
+                                                return;
+                                            v.cal_min = min;
+                                            props.nv.refreshLayers(v, 0, props.nv.volumes.length);
+                                            props.nv.drawScene();
+                                            props.setMin(min);
+                                        }, onChangeHigh: function (max) {
+                                            var v = props.nv.volumes[0];
+                                            if (!v)
+                                                return;
+                                            v.cal_max = max;
+                                            props.nv.refreshLayers(v, 0, props.nv.volumes.length);
+                                            props.nv.drawScene();
+                                            props.setMax(max);
+                                        }, 
+                                        /* Preserve your value masking (scientific notation pair) */
+                                        transform: function (x) { return x / a + b; }, inverse: function (y) { return a * y - a * b; }, 
+                                        /* Optional tuning to feel closer to TestKarts */
+                                        step: 0.001, precision: 3, accentColor: "#580f8b" }), _jsxs("div", __assign({ style: { marginTop: 12 } }, { children: [_jsxs("label", __assign({ htmlFor: "gamma", style: {
+                                                    display: "block",
+                                                    marginBottom: 6
+                                                } }, { children: ["Gamma: ", props.gamma.toFixed(2)] })), _jsx("input", { id: "gamma", type: "range", min: 0.1, max: 3.0, step: 0.05, value: props.gamma, onChange: function (e) {
+                                                    var val = Number(e.target.value);
+                                                    props.setGamma(val); // update in Niivue.jsx
+                                                    props.nv.setGamma(val); // update the Niivue engine
+                                                }, style: {
+                                                    width: "100%",
+                                                    accentColor: "#580f8b"
+                                                } }, props.gammaKey)] })), _jsx(Box, __assign({ style: { height: "100%" } }, { children: props.layerList }))] })) }) })), _jsxs(Box, __assign({ sx: { width: "100%", height: 600 } }, { children: [_jsx(Box, { ref: histogram, id: "histoplot", sx: {
+                                    width: "100%",
+                                    height: 250,
+                                    mb: 2
+                                } }), _jsx(Box, __assign({ sx: { width: "100%", height: 350 } }, { children: _jsx(ROITable, { pipelineID: props.pipelineID, rois: props.rois, style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        display: "flex",
+                                        flexDirection: "column"
+                                    }, nv: props.nv, resampleImage: props.resampleImage, unpackROI: props.unzipAndRenderROI, zipAndSendROI: props.zipAndSendROI, setLabelAlias: props.setLabelAlias }) }))] }))] }))] })));
+}

package/dist/core/common/components/NiivueTools/components/NumberPicker.d.ts

@@ -0,0 +1,8 @@
+export declare function NumberPicker(props: {
+    value: number;
+    step: number;
+    min: number;
+    max: number;
+    title: string;
+    onChange: Function;
+}): import("react/jsx-runtime").JSX.Element;