cloudmr-ux 4.2.9 → 4.3.0

package/README.md

@@ -19,6 +19,5 @@ npx parcel public/index.html
 that's it!
 
 ## License
-MIT © 
-[erosmontin](https://github.com/erosmontin)
+The code is released under the MIT License
 

package/dist/CmrComponents/niivue-slice-position/NiivueSlicePosition.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+/**
+ * Everything the component needs to drive the three slice sliders.
+ *
+ * The parent should get `mins`, `maxs`, and `mms` from Niivue's
+ * `onLocationChange` callback so the sliders stay in sync with scroll/click.
+ *
+ * The `nv` instance is typed `any` so `cloudmr-ux` doesn't need to take a
+ * hard dependency on `@niivue/niivue` — any version of the Niivue object works
+ * as long as it exposes `scene.crosshairPos`, `mm2frac`, `frac2mm`,
+ * `volumes[0].getImageMetadata()`, and `drawScene()`.
+ */
+export interface NiivueSlicePositionProps {
+    /** The Niivue instance. */
+    nv: any;
+    /**
+     * World-space bounding-box minimums [xMin, yMin, zMin] in mm.
+     * Comes from Niivue's `onLocationChange` data.
+     */
+    mins: number[];
+    /**
+     * World-space bounding-box maximums [xMax, yMax, zMax] in mm.
+     * Comes from Niivue's `onLocationChange` data.
+     */
+    maxs: number[];
+    /**
+     * Current crosshair position [x, y, z] in mm.
+     * Comes from Niivue's `onLocationChange` data.
+     */
+    mms: number[];
+    /**
+     * CSS accent color for all three range inputs.
+     * @default "#580f8b"
+     */
+    accentColor?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * **NiivueSlicePosition**
+ *
+ * A reusable "Slice Position" control panel that drives a Niivue viewer.
+ * Renders three labeled sliders — X, Y, and Z — each paired with an editable
+ * number field. All sliders snap to exact voxel centres so they stay in sync
+ * with Niivue's own scroll behaviour.
+ *
+ * ### Wiring it up
+ *
+ * ```tsx
+ * // In the parent that owns the Niivue instance:
+ * const [mms, setMms] = useState([0, 0, 0]);
+ * const [mins, setMins] = useState([0, 0, 0]);
+ * const [maxs, setMaxs] = useState([1, 1, 1]);
+ *
+ * // Give these to Niivue so it calls back on every crosshair move:
+ * nv.opts.onLocationChange = (data) => {
+ *   setMms([data.mm[0], data.mm[1], data.mm[2]]);
+ *   setMins([data.vox[0]?.min ?? 0, data.vox[1]?.min ?? 0, data.vox[2]?.min ?? 0]);
+ *   setMaxs([data.vox[0]?.max ?? 1, data.vox[1]?.max ?? 1, data.vox[2]?.max ?? 1]);
+ * };
+ *
+ * // Then render:
+ * <NiivueSlicePosition nv={nv} mins={mins} maxs={maxs} mms={mms} />
+ * ```
+ */
+export declare function NiivueSlicePosition({ nv, mins, maxs, mms, accentColor, style, className, }: NiivueSlicePositionProps): import("react/jsx-runtime").JSX.Element;
+export default NiivueSlicePosition;

package/dist/CmrComponents/niivue-slice-position/NiivueSlicePosition.js

@@ -0,0 +1,254 @@
+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 CmrLabel from "../label/Label";
+// ─── Helpers (pure, no React) ─────────────────────────────────────────────────
+var safeSpan = function (min, max) { return Math.max(1e-9, max - min); };
+var clamp = function (v, lo, hi) { return Math.max(lo, Math.min(hi, v)); };
+var round3 = function (v) { return Math.round(v * 1000) / 1000; };
+// ─── Component ────────────────────────────────────────────────────────────────
+/**
+ * **NiivueSlicePosition**
+ *
+ * A reusable "Slice Position" control panel that drives a Niivue viewer.
+ * Renders three labeled sliders — X, Y, and Z — each paired with an editable
+ * number field. All sliders snap to exact voxel centres so they stay in sync
+ * with Niivue's own scroll behaviour.
+ *
+ * ### Wiring it up
+ *
+ * ```tsx
+ * // In the parent that owns the Niivue instance:
+ * const [mms, setMms] = useState([0, 0, 0]);
+ * const [mins, setMins] = useState([0, 0, 0]);
+ * const [maxs, setMaxs] = useState([1, 1, 1]);
+ *
+ * // Give these to Niivue so it calls back on every crosshair move:
+ * nv.opts.onLocationChange = (data) => {
+ *   setMms([data.mm[0], data.mm[1], data.mm[2]]);
+ *   setMins([data.vox[0]?.min ?? 0, data.vox[1]?.min ?? 0, data.vox[2]?.min ?? 0]);
+ *   setMaxs([data.vox[0]?.max ?? 1, data.vox[1]?.max ?? 1, data.vox[2]?.max ?? 1]);
+ * };
+ *
+ * // Then render:
+ * <NiivueSlicePosition nv={nv} mins={mins} maxs={maxs} mms={mms} />
+ * ```
+ */
+export function NiivueSlicePosition(_a) {
+    var _b, _c, _d, _e, _f;
+    var nv = _a.nv, mins = _a.mins, maxs = _a.maxs, mms = _a.mms, _g = _a.accentColor, accentColor = _g === void 0 ? "#580f8b" : _g, style = _a.style, className = _a.className;
+    // ── Derive voxel grid from the loaded volume ─────────────────────────────
+    var vol = (_b = nv === null || nv === void 0 ? void 0 : nv.volumes) === null || _b === void 0 ? void 0 : _b[0];
+    var meta = (_c = vol === null || vol === void 0 ? void 0 : vol.getImageMetadata) === null || _c === void 0 ? void 0 : _c.call(vol);
+    var nx = Math.max(1, (_d = meta === null || meta === void 0 ? void 0 : meta.nx) !== null && _d !== void 0 ? _d : 1);
+    var ny = Math.max(1, (_e = meta === null || meta === void 0 ? void 0 : meta.ny) !== null && _e !== void 0 ? _e : 1);
+    var nz = Math.max(1, (_f = meta === null || meta === void 0 ? void 0 : meta.nz) !== null && _f !== void 0 ? _f : 1);
+    // ── Slider bounds for X and Y ────────────────────────────────────────────
+    var spanX = safeSpan(mins[0], maxs[0]);
+    var spanY = safeSpan(mins[1], maxs[1]);
+    var stepX = nx > 1 ? spanX / nx : spanX * 0.01;
+    var stepY = ny > 1 ? spanY / ny : spanY * 0.01;
+    var sliderMinX = nx > 1 ? mins[0] + 0.5 * stepX : mins[0];
+    var sliderMaxX = nx > 1 ? maxs[0] - 0.5 * stepX : maxs[0];
+    var sliderMinY = ny > 1 ? mins[1] + 0.5 * stepY : mins[1];
+    var sliderMaxY = ny > 1 ? maxs[1] - 0.5 * stepY : maxs[1];
+    // ── Slider bounds for Z (uses actual Niivue slice centres) ───────────────
+    var zAtStart;
+    var zAtEnd;
+    if (nz <= 1) {
+        zAtStart = mins[2];
+        zAtEnd = maxs[2];
+    }
+    else {
+        try {
+            var cx = nv.scene.crosshairPos[0];
+            var cy = nv.scene.crosshairPos[1];
+            zAtStart = nv.frac2mm([cx, cy, 0.5 / nz])[2];
+            zAtEnd = nv.frac2mm([cx, cy, (nz - 0.5) / nz])[2];
+        }
+        catch (_h) {
+            var s = safeSpan(mins[2], maxs[2]) / nz;
+            zAtStart = mins[2] + 0.5 * s;
+            zAtEnd = maxs[2] - 0.5 * s;
+        }
+    }
+    var sliderMinZ = Math.min(zAtStart, zAtEnd);
+    var sliderMaxZ = Math.max(zAtStart, zAtEnd);
+    var stepZ = nz > 1
+        ? Math.abs(zAtEnd - zAtStart) / (nz - 1)
+        : Math.max(1e-9, Math.abs(sliderMaxZ - sliderMinZ) * 0.01);
+    // ── Fractional helpers ───────────────────────────────────────────────────
+    var ratioAxis = function (val, axis) {
+        return (val - mins[axis]) / safeSpan(mins[axis], maxs[axis]);
+    };
+    var mmToFrac = function (x, y, z) {
+        try {
+            return nv.mm2frac([x, y, z]);
+        }
+        catch (_a) {
+            return [ratioAxis(x, 0), ratioAxis(y, 1), ratioAxis(z, 2)];
+        }
+    };
+    /** Snap a mm value to the nearest voxel centre on the given axis. */
+    var snapToVoxel = function (mm, axis) {
+        var n = axis === 0 ? nx : axis === 1 ? ny : nz;
+        var mm3 = [mmsRef.current[0], mmsRef.current[1], mmsRef.current[2]];
+        mm3[axis] = mm;
+        var frac;
+        try {
+            frac = nv.mm2frac(mm3);
+        }
+        catch (_a) {
+            frac = [
+                ratioAxis(mmsRef.current[0], 0),
+                ratioAxis(mmsRef.current[1], 1),
+                ratioAxis(mmsRef.current[2], 2),
+            ];
+            frac[axis] = ratioAxis(mm, axis);
+        }
+        var idx = Math.round(frac[axis] * n - 0.5);
+        var fracSnapped = n > 1 ? (clamp(idx, 0, n - 1) + 0.5) / n : 0.5;
+        frac[axis] = fracSnapped;
+        try {
+            return nv.frac2mm(frac)[axis];
+        }
+        catch (_b) {
+            return mins[axis] + fracSnapped * safeSpan(mins[axis], maxs[axis]);
+        }
+    };
+    // ── Local slider state (mirrors mms; synced by useEffect) ────────────────
+    var _j = React.useState(round3(mms[0])), xVal = _j[0], setXVal = _j[1];
+    var _k = React.useState(round3(mms[1])), yVal = _k[0], setYVal = _k[1];
+    var _l = React.useState(round3(mms[2])), zVal = _l[0], setZVal = _l[1];
+    // Keep a ref so snapToVoxel can read the *latest* values without stale closure
+    var mmsRef = React.useRef([xVal, yVal, zVal]);
+    React.useEffect(function () {
+        mmsRef.current = [xVal, yVal, zVal];
+    }, [xVal, yVal, zVal]);
+    // Sync from Niivue (e.g. mouse scroll, click)
+    React.useEffect(function () {
+        var fmt = function (v) { return (Number.isFinite(v) ? round3(v) : 0); };
+        setXVal(fmt(mms[0]));
+        setYVal(fmt(mms[1]));
+        setZVal(fmt(mms[2]));
+    }, [mms]);
+    // ── Apply handlers ────────────────────────────────────────────────────────
+    var applyX = function (val) {
+        var v = clamp(snapToVoxel(val, 0), sliderMinX, sliderMaxX);
+        setXVal(v);
+        nv.scene.crosshairPos = mmToFrac(v, mmsRef.current[1], mmsRef.current[2]);
+        nv.drawScene();
+    };
+    var applyY = function (val) {
+        var v = clamp(snapToVoxel(val, 1), sliderMinY, sliderMaxY);
+        setYVal(v);
+        nv.scene.crosshairPos = mmToFrac(mmsRef.current[0], v, mmsRef.current[2]);
+        nv.drawScene();
+    };
+    var applyZBySliceIndex = function (kRaw) {
+        if (nz <= 1) {
+            var cx_1 = nv.scene.crosshairPos[0];
+            var cy_1 = nv.scene.crosshairPos[1];
+            nv.scene.crosshairPos = [cx_1, cy_1, 0.5];
+            nv.drawScene();
+            try {
+                setZVal(round3(nv.frac2mm([cx_1, cy_1, 0.5])[2]));
+            }
+            catch ( /* ignore */_a) { /* ignore */ }
+            return;
+        }
+        var k = clamp(Math.round(kRaw), 0, nz - 1);
+        var cx = nv.scene.crosshairPos[0];
+        var cy = nv.scene.crosshairPos[1];
+        var fz = (k + 0.5) / nz;
+        nv.scene.crosshairPos = [cx, cy, fz];
+        nv.drawScene();
+        try {
+            setZVal(round3(nv.frac2mm([cx, cy, fz])[2]));
+        }
+        catch (_b) {
+            var spanLen = zAtEnd - zAtStart;
+            setZVal(round3(zAtStart + (k * spanLen) / Math.max(1, nz - 1)));
+        }
+    };
+    var applyZ = function (val) {
+        if (!Number.isFinite(val))
+            return;
+        if (nz <= 1) {
+            var v = clamp(snapToVoxel(val, 2), sliderMinZ, sliderMaxZ);
+            setZVal(round3(v));
+            nv.scene.crosshairPos = mmToFrac(mmsRef.current[0], mmsRef.current[1], v);
+            nv.drawScene();
+            return;
+        }
+        var fracZ;
+        try {
+            fracZ = nv.mm2frac([mmsRef.current[0], mmsRef.current[1], val])[2];
+        }
+        catch (_a) {
+            fracZ = ratioAxis(val, 2);
+        }
+        applyZBySliceIndex(Math.round(fracZ * nz - 0.5));
+    };
+    // Current Z as a discrete slice index (for the integer-step Z range input)
+    var zSliceIndex = 0;
+    if (nz > 1) {
+        var fracZ = void 0;
+        try {
+            fracZ = nv.mm2frac([xVal, yVal, zVal])[2];
+        }
+        catch (_m) {
+            fracZ = ratioAxis(zVal, 2);
+        }
+        zSliceIndex = clamp(Math.round(fracZ * nz - 0.5), 0, nz - 1);
+    }
+    // ── Shared styles ─────────────────────────────────────────────────────────
+    var inputStyle = {
+        width: 100,
+        padding: "4px 6px",
+        borderRadius: 6,
+        border: "1px solid #ccc",
+        fontSize: "0.9rem"
+    };
+    var rowStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        marginBottom: 6
+    };
+    var sliderStyle = {
+        width: "100%",
+        accentColor: accentColor
+    };
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (_jsxs("div", __assign({ style: __assign({ display: "flex", flexDirection: "column" }, style), className: className }, { children: [_jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "X:" }), _jsx("input", { type: "number", value: xVal.toFixed(3), min: sliderMinX, max: sliderMaxX, step: stepX, style: inputStyle, onChange: function (e) {
+                                    var next = Number(e.target.value);
+                                    if (Number.isFinite(next))
+                                        applyX(next);
+                                }, onBlur: function (e) {
+                                    applyX(clamp(Number(e.target.value), sliderMinX, sliderMaxX));
+                                } })] })), _jsx("input", { id: "xSlice", type: "range", min: sliderMinX, max: sliderMaxX, step: stepX, value: clamp(xVal, sliderMinX, sliderMaxX), style: sliderStyle, onChange: function (e) { return applyX(Number(e.target.value)); } })] })), _jsxs("div", __assign({ style: { marginBottom: 20 } }, { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Y:" }), _jsx("input", { type: "number", value: yVal.toFixed(3), min: sliderMinY, max: sliderMaxY, step: stepY, style: inputStyle, onChange: function (e) {
+                                    var next = Number(e.target.value);
+                                    if (Number.isFinite(next))
+                                        applyY(next);
+                                }, onBlur: function (e) {
+                                    applyY(clamp(Number(e.target.value), sliderMinY, sliderMaxY));
+                                } })] })), _jsx("input", { id: "ySlice", type: "range", min: sliderMinY, max: sliderMaxY, step: stepY, value: clamp(yVal, sliderMinY, sliderMaxY), style: sliderStyle, onChange: function (e) { return applyY(Number(e.target.value)); } })] })), _jsxs("div", { children: [_jsxs("div", __assign({ style: rowStyle }, { children: [_jsx(CmrLabel, { children: "Z:" }), _jsx("input", { type: "number", value: zVal.toFixed(3), min: sliderMinZ, max: sliderMaxZ, step: stepZ, style: inputStyle, onChange: function (e) {
+                                    var next = Number(e.target.value);
+                                    if (Number.isFinite(next))
+                                        applyZ(next);
+                                }, onBlur: function (e) {
+                                    applyZ(clamp(Number(e.target.value), sliderMinZ, sliderMaxZ));
+                                } })] })), _jsx("input", { id: "zSlice", type: "range", min: 0, max: Math.max(0, nz - 1), step: 1, value: zSliceIndex, style: sliderStyle, onChange: function (e) { return applyZBySliceIndex(Number(e.target.value)); } })] })] })));
+}
+export default NiivueSlicePosition;

package/dist/core/app/results/Rois.js

@@ -48,16 +48,31 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CmrTable, CMRUpload, CmrConfirmation } from "../../../index";
 import { useState } from "react";
-import { Tooltip, IconButton } from "@mui/material";
+import { Tooltip, IconButton, } from "@mui/material";
 import { getEndpoints } from "../../config/AppConfig";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import Box from "@mui/material/Box";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faObjectGroup, faObjectUngroup, faDownload, faTrash, } from "@fortawesome/free-solid-svg-icons";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Icon as WpIcon, group as wpGroup, ungroup as wpUngroup } from "@wordpress/icons";
 import { getPipelineROI } from "../../features/rois/resultActionCreation";
 import { AuthenticatedHttpClient } from "../../common/utilities/AuthenticatedRequests";
+/** Default merged ROI label in NiivuePatcher `groupLabelsInto` — keep in sync with patcher */
+var GROUP_TARGET_LABEL = 7;
+/** Toolbar action icons: `action.active` → rgba(0, 0, 0, 0.54) in default MUI light theme */
+var ROI_TOOLBAR_ICON_SIZE_PX = 24;
+var ROI_TOOLBAR_ICON_BUTTON_SX = {
+    color: "action.active",
+    "&.Mui-disabled": {
+        color: function (theme) { return theme.palette.action.disabled; }
+    }
+};
+var ROI_TOOLBAR_MUI_ICON_SX = {
+    fontSize: ROI_TOOLBAR_ICON_SIZE_PX,
+    color: "inherit"
+};
 export var ROITable = function (props) {
     // const rois:ROI[] = useAppSelector(state=>{
     //     return (state.roi.rois[props.pipelineID]==undefined)?[]:state.roi.rois[props.pipelineID];
@@ -163,6 +178,15 @@ export var ROITable = function (props) {
         setWarningMessage(message);
         setWarningVisible(true);
     };
+    var selectedNums = selectedData.map(function (v) { return Number(v); });
+    var uniqueSelected = new Set(selectedNums);
+    var canGroupSelection = selectedNums.length >= 2 && uniqueSelected.size >= 2;
+    var groupButtonDisabled = selectedData.length > 0 && !canGroupSelection;
+    var groupTooltip = selectedData.length === 0
+        ? "Group selected ROIs"
+        : uniqueSelected.size < 2 || selectedNums.length < 2
+            ? "Select at least two different ROIs to group"
+            : "Group selected ROIs";
     return (_jsxs(Box, __assign({ style: props.style }, { children: [_jsx(CmrTable
             // sx={{
             //     borderBottomLeftRadius: 0,
@@ -192,15 +216,28 @@ export var ROITable = function (props) {
                     border: "1px solid rgba(0, 0, 0, 0.12)",
                     borderTop: "none",
                     borderRadius: "0 0 4px 4px"
-                } }, { children: [_jsx(Tooltip, __assign({ title: "Group" }, { children: _jsx(IconButton, __assign({ onClick: function () {
-                                props.nv.groupLabelsInto(selectedData.map(function (value) { return Number(value); }));
-                                props.nv.drawScene();
-                                props.resampleImage();
-                            } }, { children: _jsx(FontAwesomeIcon, { icon: faObjectGroup, style: { fontSize: "16px" } }) })) })), _jsx(Tooltip, __assign({ title: "Ungroup" }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                } }, { children: [_jsx(Tooltip, __assign({ title: groupTooltip }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ disabled: groupButtonDisabled, sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
+                                    if (selectedData.length === 0) {
+                                        warnEmptySelection("Please select an ROI to group");
+                                        return;
+                                    }
+                                    if (!canGroupSelection) {
+                                        warnEmptySelection("Please select at least two different ROIs to group");
+                                        return;
+                                    }
+                                    if (typeof props.nv.groupLabelsFromSelection === "function") {
+                                        props.nv.groupLabelsFromSelection(selectedNums, GROUP_TARGET_LABEL);
+                                    }
+                                    else {
+                                        props.nv.groupLabelsInto(selectedNums, GROUP_TARGET_LABEL);
+                                    }
+                                    props.nv.drawScene();
+                                    props.resampleImage();
+                                } }, { children: _jsx(WpIcon, { icon: wpGroup, size: ROI_TOOLBAR_ICON_SIZE_PX, fill: "currentColor" }) })) }) })), _jsx(Tooltip, __assign({ title: "Ungroup" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
                                 props.nv.ungroup();
                                 props.nv.drawScene();
                                 props.resampleImage();
-                            } }, { children: _jsx(FontAwesomeIcon, { icon: faObjectUngroup, style: { fontSize: "16px" } }) })) })), _jsx(Tooltip, __assign({ title: "Download" }, { children: _jsx(IconButton, __assign({ onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                            } }, { children: _jsx(WpIcon, { icon: wpUngroup, size: 16, fill: "currentColor" }) })) })), _jsx(Tooltip, __assign({ title: "Download" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
                                 var fileName, selectedLabels, _i, selectedData_1, label;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
@@ -223,11 +260,11 @@ export var ROITable = function (props) {
                                             return [2 /*return*/];
                                     }
                                 });
-                            }); } }, { children: _jsx(FontAwesomeIcon, { icon: faDownload, style: { fontSize: "16px" } }) })) })), _jsx(Tooltip, __assign({ title: "Delete" }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                            }); } }, { children: _jsx(GetAppIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(Tooltip, __assign({ title: "Delete" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
                                 props.nv.deleteDrawingByLabel(selectedData.map(function (value) { return Number(value); }));
                                 props.resampleImage();
                                 props.nv.drawScene();
-                            } }, { children: _jsx(FontAwesomeIcon, { icon: faTrash, style: { fontSize: "16px" } }) })) })), _jsx(CMRUpload, { changeNameAfterUpload: false, color: "primary", onUploaded: function (res, file) { }, uploadHandler: function (file) { return __awaiter(void 0, void 0, void 0, function () {
+                            } }, { children: _jsx(DeleteIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(CMRUpload, { changeNameAfterUpload: false, color: "primary", onUploaded: function (res, file) { }, uploadHandler: function (file) { return __awaiter(void 0, void 0, void 0, function () {
                             var filename, response;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {

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

@@ -1051,56 +1051,92 @@ export default function NiiVueport(props) {
             });
         });
     };
-    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*/];
-            }
+    /** mergeIntoExisting: true for ROI file upload; false when opening a saved ROI from the list */
+    var unzipAndRenderDrawingLayer = function (accessURL, mergeIntoExisting) {
+        if (mergeIntoExisting === void 0) { mergeIntoExisting = false; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var response, blob, zip, fileInfo, content, info, niiFilePath, importedLabels, niiDrawing, base64, mergeResult, merged, _i, _a, _b, oldL, newId, oldN, newN, alias;
+            var _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0: return [4 /*yield*/, fetch(accessURL)];
+                    case 1:
+                        response = _e.sent();
+                        // Check if the request was successful
+                        if (!response.ok) {
+                            props.warn("Failed to load the requested ROI Layer");
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, response.blob()];
+                    case 2:
+                        blob = _e.sent();
+                        zip = new JSZip();
+                        return [4 /*yield*/, zip.loadAsync(blob)];
+                    case 3:
+                        _e.sent();
+                        fileInfo = zip.file("info.json");
+                        if (!fileInfo) return [3 /*break*/, 12];
+                        return [4 /*yield*/, fileInfo.async("string")];
+                    case 4:
+                        content = _e.sent();
+                        info = JSON.parse(content);
+                        niiFilePath = info.data[0].filename;
+                        importedLabels = info.data[0].labelMapping || {};
+                        niiDrawing = zip.file(niiFilePath);
+                        if (!niiDrawing) return [3 /*break*/, 10];
+                        return [4 /*yield*/, niiDrawing.async("base64")];
+                    case 5:
+                        base64 = _e.sent();
+                        console.log(niiFilePath);
+                        if (!(mergeIntoExisting &&
+                            typeof nv.mergeDrawingFromBase64 === "function")) return [3 /*break*/, 7];
+                        return [4 /*yield*/, nv.mergeDrawingFromBase64(niiFilePath, base64)];
+                    case 6:
+                        mergeResult = _e.sent();
+                        if (!mergeResult || !mergeResult.ok) {
+                            props.warn("Failed to merge ROI upload (invalid file or size mismatch).");
+                            return [2 /*return*/, null];
+                        }
+                        if (mergeResult.importLabelRemap === null) {
+                            setLabelMapping(importedLabels);
+                            resampleImage(importedLabels);
+                        }
+                        else {
+                            merged = __assign({}, labelMapping);
+                            for (_i = 0, _a = Object.entries(mergeResult.importLabelRemap); _i < _a.length; _i++) {
+                                _b = _a[_i], oldL = _b[0], newId = _b[1];
+                                oldN = Number(oldL);
+                                newN = Number(newId);
+                                alias = oldN === newN
+                                    ? ((_d = (_c = importedLabels[oldL]) !== null && _c !== void 0 ? _c : importedLabels[String(oldL)]) !== null && _d !== void 0 ? _d : String(newId))
+                                    : String(newId);
+                                merged[String(newId)] = alias;
+                            }
+                            setLabelMapping(merged);
+                            resampleImage(merged);
+                        }
+                        return [3 /*break*/, 9];
+                    case 7: return [4 /*yield*/, nv.loadDrawingFromBase64(niiFilePath, base64)];
+                    case 8:
+                        _e.sent();
+                        setLabelMapping(importedLabels);
+                        resampleImage(importedLabels);
+                        _e.label = 9;
+                    case 9: return [3 /*break*/, 11];
+                    case 10:
+                        console.log("".concat(niiFilePath, " not found in the ZIP file."));
+                        props.warn("".concat(niiFilePath, " not found in the ZIP file."));
+                        return [2 /*return*/, null];
+                    case 11: return [3 /*break*/, 13];
+                    case 12:
+                        console.log("info.json not found in the ZIP file.");
+                        props.warn("info.json not found in the ZIP file.");
+                        return [2 /*return*/, null];
+                    case 13: 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
@@ -1124,7 +1160,7 @@ export default function NiiVueport(props) {
     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 0: return [4 /*yield*/, unzipAndRenderDrawingLayer(accessURL, true)];
                 case 1:
                     _a.sent();
                     setDrawingChanged(false);

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

@@ -1391,9 +1391,13 @@ Niivue.prototype.groupLabelsInto = function (
   sourceLabels = [0],
   targetLabel = 7,
 ) {
+  const overlayIndex = new Set(bitmapOverlay.map((t) => t[0]));
   for (let i = 0; i < this.drawBitmap.length; i++) {
     if (sourceLabels.indexOf(this.drawBitmap[i]) >= 0) {
-      bitmapOverlay.push([i, this.drawBitmap[i]]);
+      if (!overlayIndex.has(i)) {
+        bitmapOverlay.push([i, this.drawBitmap[i]]);
+        overlayIndex.add(i);
+      }
       this.drawBitmap[i] = targetLabel;
     }
   }
@@ -1408,6 +1412,62 @@ Niivue.prototype.ungroup = function () {
   this.refreshDrawing(false);
 };
 
+/**
+ * Smart group from ROI table selection.
+ * - Extend: selection includes merged label(s) >= targetLabel → mask those voxels, ungroup once,
+ *   merge into max(merged ids in selection) (add to group 7 or 8, etc.).
+ * - New merge (primitives only): if no merged id >= targetLabel in the volume yet, merge into targetLabel (7);
+ *   else merge into maxMergedInVolume + 1 (second disjoint group → 8).
+ */
+Niivue.prototype.groupLabelsFromSelection = function (
+  sourceLabels = [],
+  targetLabel = 7,
+) {
+  if (!this.drawBitmap || !sourceLabels || sourceLabels.length < 2) {
+    return;
+  }
+  const labelSet = new Set(sourceLabels);
+  if (labelSet.size < 2) {
+    return;
+  }
+  const MERGE_THRESHOLD = targetLabel;
+  const mergedInSelection = sourceLabels.filter((l) => l >= MERGE_THRESHOLD);
+  if (mergedInSelection.length > 0) {
+    const mergeTarget = Math.max(...mergedInSelection);
+    const n = this.drawBitmap.length;
+    const mask = new Uint8Array(n);
+    for (let i = 0; i < n; i++) {
+      if (labelSet.has(this.drawBitmap[i])) {
+        mask[i] = 1;
+      }
+    }
+    this.ungroup();
+    const mergeSet = new Set();
+    for (let i = 0; i < n; i++) {
+      if (mask[i] && this.drawBitmap[i] !== 0) {
+        mergeSet.add(this.drawBitmap[i]);
+      }
+    }
+    const toMerge = Array.from(mergeSet).sort((a, b) => a - b);
+    if (toMerge.length === 0) {
+      this.refreshDrawing(false);
+      return;
+    }
+    this.groupLabelsInto(toMerge, mergeTarget);
+    return;
+  }
+  let sceneMaxMerged = 0;
+  for (let j = 0; j < this.drawBitmap.length; j++) {
+    const v = this.drawBitmap[j];
+    if (v >= MERGE_THRESHOLD) {
+      sceneMaxMerged = Math.max(sceneMaxMerged, v);
+    }
+  }
+  const newTarget =
+    sceneMaxMerged >= MERGE_THRESHOLD ? sceneMaxMerged + 1 : MERGE_THRESHOLD;
+  this.groupLabelsInto(sourceLabels, newTarget);
+};
+
 Niivue.prototype.resetScene = function () {
   this.scene.pan2Dxyzmm = [0, 0, 0, 1];
   this.drawScene();
@@ -1499,6 +1559,193 @@ Niivue.prototype.loadDrawingFromBase64 = async function (fnm, base64) {
   return base64 !== undefined;
 };
 
+/**
+ * Merge an uploaded/loaded drawing into the current drawBitmap instead of replacing it.
+ * Non-zero import voxels overwrite the current bitmap (same as drawing a new ROI on top).
+ * Import label IDs are reused when not already on the canvas; otherwise remapped to a free ID.
+ */
+Niivue.prototype.mergeDrawingFromBase64 = async function (fnm, base64) {
+  const result = { ok: false, importLabelRemap: null };
+  if (!base64) {
+    return result;
+  }
+  try {
+    if (!this.back) {
+      throw new Error("back undefined");
+    }
+    const drawingBitmap = NVImage.loadFromBase64({ name: fnm, base64 });
+    if (!drawingBitmap || !drawingBitmap.hdr || !drawingBitmap.hdr.dims) {
+      return result;
+    }
+    const dims = drawingBitmap.hdr.dims;
+    if (
+      dims[1] !== this.back.hdr.dims[1] ||
+      dims[2] !== this.back.hdr.dims[2] ||
+      dims[3] !== this.back.hdr.dims[3]
+    ) {
+      console.warn(
+        "mergeDrawingFromBase64: drawing dimensions do not match background",
+      );
+      return result;
+    }
+    const vx = dims[1] * dims[2] * dims[3];
+    const perm = drawingBitmap.permRAS;
+    const layout = [0, 0, 0];
+    for (let i = 0; i < 3; i++) {
+      for (let j = 0; j < 3; j++) {
+        if (Math.abs(perm[i]) - 1 !== j) {
+          continue;
+        }
+        layout[j] = i * Math.sign(perm[i]);
+      }
+    }
+    let stride = 1;
+    const instride = [1, 1, 1];
+    const inflip = [false, false, false];
+    for (let i = 0; i < layout.length; i++) {
+      for (let j = 0; j < layout.length; j++) {
+        const a = Math.abs(layout[j]);
+        if (a !== i) {
+          continue;
+        }
+        instride[j] = stride;
+        if (layout[j] < 0 || Object.is(layout[j], -0)) {
+          inflip[j] = true;
+        }
+        stride *= dims[j + 1];
+      }
+    }
+    const nvRange = (start, end, step) => {
+      const o = [];
+      if (step > 0) {
+        for (let i = start; i <= end; i += step) {
+          o.push(i);
+        }
+      } else {
+        for (let i = start; i >= end; i += step) {
+          o.push(i);
+        }
+      }
+      return o;
+    };
+    let xlut = nvRange(0, dims[1] - 1, 1);
+    if (inflip[0]) {
+      xlut = nvRange(dims[1] - 1, 0, -1);
+    }
+    for (let i = 0; i < dims[1]; i++) {
+      xlut[i] *= instride[0];
+    }
+    let ylut = nvRange(0, dims[2] - 1, 1);
+    if (inflip[1]) {
+      ylut = nvRange(dims[2] - 1, 0, -1);
+    }
+    for (let i = 0; i < dims[2]; i++) {
+      ylut[i] *= instride[1];
+    }
+    let zlut = nvRange(0, dims[3] - 1, 1);
+    if (inflip[2]) {
+      zlut = nvRange(dims[3] - 1, 0, -1);
+    }
+    for (let i = 0; i < dims[3]; i++) {
+      zlut[i] *= instride[2];
+    }
+
+    const inVs = drawingBitmap.img;
+    const importFlat = new Uint8Array(vx);
+    let ji = 0;
+    for (let z = 0; z < dims[3]; z++) {
+      for (let y = 0; y < dims[2]; y++) {
+        for (let x = 0; x < dims[1]; x++) {
+          importFlat[xlut[x] + ylut[y] + zlut[z]] = inVs[ji];
+          ji++;
+        }
+      }
+    }
+
+    const hasExistingDrawing =
+      this.drawBitmap &&
+      this.drawBitmap.length === vx &&
+      this.drawBitmap.some((v) => v !== 0);
+
+    if (this.drawBitmap && this.drawBitmap.length !== vx) {
+      console.warn(
+        "mergeDrawingFromBase64: drawBitmap size mismatch; replacing drawing",
+      );
+      this.loadDrawing(drawingBitmap);
+      result.ok = true;
+      result.importLabelRemap = null;
+      return result;
+    }
+
+    if (!hasExistingDrawing) {
+      this.loadDrawing(drawingBitmap);
+      result.ok = true;
+      result.importLabelRemap = null;
+      return result;
+    }
+
+    const usedOnCanvas = new Set();
+    for (let i = 0; i < this.drawBitmap.length; i++) {
+      const v = this.drawBitmap[i];
+      if (v !== 0) {
+        usedOnCanvas.add(v);
+      }
+    }
+
+    const seen = new Set();
+    for (let i = 0; i < importFlat.length; i++) {
+      const v = importFlat[i];
+      if (v !== 0) {
+        seen.add(v);
+      }
+    }
+    const sorted = Array.from(seen).sort((a, b) => a - b);
+    const importLabelRemap = {};
+    let nextSynthetic = 0;
+    for (const v of usedOnCanvas) {
+      if (v > nextSynthetic) {
+        nextSynthetic = v;
+      }
+    }
+    nextSynthetic += 1;
+
+    for (let s = 0; s < sorted.length; s++) {
+      const oldL = sorted[s];
+      if (!usedOnCanvas.has(oldL)) {
+        importLabelRemap[oldL] = oldL;
+        usedOnCanvas.add(oldL);
+      } else {
+        while (usedOnCanvas.has(nextSynthetic)) {
+          nextSynthetic++;
+        }
+        importLabelRemap[oldL] = nextSynthetic;
+        usedOnCanvas.add(nextSynthetic);
+        nextSynthetic++;
+      }
+    }
+
+    for (let i = 0; i < vx; i++) {
+      const v = importFlat[i];
+      if (v === 0) {
+        continue;
+      }
+      // Upload wins overlaps (matches pen drawing on top of another ROI)
+      this.drawBitmap[i] = importLabelRemap[v];
+    }
+
+    this.drawAddUndoBitmap();
+    this.refreshDrawing(false);
+    this.drawScene();
+    result.ok = true;
+    result.importLabelRemap = importLabelRemap;
+    return result;
+  } catch (err) {
+    console.error(err);
+    console.error("mergeDrawingFromBase64() failed to load " + fnm);
+    return result;
+  }
+};
+
 // not included in public docs
 // show text labels for L/R, A/P, I/S dimensions
 Niivue.prototype.drawSliceOrientationText = function (

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

@@ -18,6 +18,7 @@ import { DrawToolkit } from "./DrawToolKit";
 // import GUI from "lil-gui";
 import "./Toolbar.scss";
 import TKDualRange from "../../../../../CmrComponents/tk-dualrange/TKDualRange";
+import { CmrLabel } from "../../../../../index";
 function toRatio(val, min, max) {
     return (val - min) / (max - min);
 }
@@ -173,7 +174,7 @@ export function NiivuePanel(props) {
                                                     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) {
+                                                } }, { children: [_jsx(CmrLabel, __assign({ style: { fontSize: "0.9rem" } }, { 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;
@@ -227,7 +228,7 @@ export function NiivuePanel(props) {
                                                     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) {
+                                                } }, { children: [_jsx(CmrLabel, __assign({ style: { fontSize: "0.9rem" } }, { 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;

package/dist/index.d.ts

@@ -21,6 +21,8 @@ export { DualSlider } from "./CmrComponents/double-slider/DualSlider";
 export { Slider } from "./CmrComponents/gui-slider/Slider";
 export { InvertibleDualSlider } from "./CmrComponents/double-slider/InvertibleDualSlider";
 export type { LambdaFile } from "./CmrComponents/upload/Upload";
+export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
+export type { NiivueSlicePositionProps } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
 import type { FC } from "react";
 import type { CmrTableProps } from "./CmrTable/CmrTable";
 export declare const CmrTable: FC<CmrTableProps>;

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as CmrTooltip } from "./CmrComponents/tooltip/Tooltip";
 export { DualSlider } from "./CmrComponents/double-slider/DualSlider";
 export { Slider } from "./CmrComponents/gui-slider/Slider";
 export { InvertibleDualSlider } from "./CmrComponents/double-slider/InvertibleDualSlider";
+export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
 import CmrTableComponent from "./CmrTable/CmrTable";
 export var CmrTable = CmrTableComponent;
 export * from "./core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "4.2.9",
+  "version": "4.3.0",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",
@@ -297,6 +297,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@wordpress/icons": "^11.8.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.2",
     "@mui/x-data-grid": "^6.10.1",