cloudmr-ux 4.3.2 → 4.3.4

package/dist/CmrComponents/draw-toolkit/DrawPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DrawPlatteProps {
+    expandDrawOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const DrawPlatte: React.FC<DrawPlatteProps>;
+export default DrawPlatte;

package/dist/CmrComponents/draw-toolkit/DrawPlatte.js

@@ -0,0 +1,62 @@
+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 { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+var DrawPlatte = function (_a) {
+    var expandDrawOptions = _a.expandDrawOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var filledOptions = [
+        _jsx(FiberManualRecordIcon, { sx: { color: "red" } }, "f0"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "green" } }, "f1"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "blue" } }, "f2"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "yellow" } }, "f3"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "cyan" } }, "f4"),
+        _jsx(FiberManualRecordIcon, { sx: { color: "#e81ce8" } }, "f5"),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandDrawOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandDrawOptions ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333"
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Brush Size: ".concat(brushSize) })), _jsx(Slider, { value: brushSize, sx: {
+                            width: "80%",
+                            color: "#fff",
+                            "& .MuiSlider-track": { backgroundColor: "#fff", border: "none" },
+                            "& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.3)" },
+                            "& .MuiSlider-thumb": {
+                                backgroundColor: "#fff",
+                                border: "2px solid #fff",
+                                "&:hover, &.Mui-focusVisible, &.Mui-active": {
+                                    boxShadow: "0 0 0 8px rgba(255,255,255,0.16)"
+                                }
+                            },
+                            "& .MuiSlider-mark": { backgroundColor: "#fff" },
+                            "& .MuiSlider-markActive": { backgroundColor: "#fff" },
+                            "& .MuiSlider-valueLabel": {
+                                backgroundColor: "#fff",
+                                color: "#000"
+                            }
+                        }, step: 2, min: 1, max: 15, marks: true, onChange: function (_event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack, __assign({ direction: "row" }, { children: filledOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index + 1 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default DrawPlatte;

package/dist/CmrComponents/draw-toolkit/DrawToolkit.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from "react";
+import type { ROI } from "../../core/features/rois/roiTypes";
+export interface DrawToolkitProps {
+    nv: any;
+    volumes: {
+        url: string;
+        name: string;
+    }[];
+    selectedVolume: number;
+    updateDrawPen: (e: any) => void;
+    drawPen: number;
+    setDrawingEnabled: (enabled: boolean) => void;
+    drawingEnabled: boolean;
+    rois: ROI[];
+    selectedROI: number;
+    setSelectedROI: (selected: number) => void;
+    saveROI: () => void;
+    changesMade: boolean;
+    drawUndo: () => void;
+    style: CSSProperties;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+    resampleImage: () => void;
+    roiVisible: boolean;
+    toggleROIVisible: () => void;
+    drawingOpacity: number;
+    setDrawingOpacity: (opacity: number) => void;
+    labelsVisible: boolean;
+    toggleLabelsVisible: () => void;
+    setDrawingChanged: (changed: boolean) => void;
+}
+export declare const DrawToolkit: (props: DrawToolkitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/draw-toolkit/DrawToolkit.js

@@ -0,0 +1,136 @@
+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 { Box, FormControl, IconButton, Slider, Stack, Tooltip, Typography, FormLabel, } from "@mui/material";
+import BrushIcon from "@mui/icons-material/Brush";
+import AutoFixNormalOutlinedIcon from "@mui/icons-material/AutoFixNormalOutlined";
+import ReplyIcon from "@mui/icons-material/Reply";
+import CameraAltIcon from "@mui/icons-material/CameraAlt";
+import React, { useState } from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+import FormatColorFillIcon from "@mui/icons-material/FormatColorFill";
+import DrawPlatte from "./DrawPlatte";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EraserPlatte from "./EraserPlatte";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import OpacityIcon from "@mui/icons-material/Opacity";
+import MaskPlatte from "./MaskPlatte";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+export var DrawToolkit = function (props) {
+    var _a = useState("n"), expandedOption = _a[0], setExpandedOption = _a[1];
+    var _b = React.useState(false), expandOpacityOptions = _b[0], setExpandOpacityOptions = _b[1];
+    var penColor = ["red", "green", "blue", "yellow", "cyan", "#e81ce8"][(props.drawPen & 7) - 1];
+    var filled = props.drawPen > 7;
+    function clickPaintBrush() {
+        if (expandedOption === "d") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("d");
+        }
+        props.setDrawingEnabled(expandedOption !== "d");
+    }
+    function clickEraser() {
+        if (expandedOption === "e") {
+            setExpandedOption("n");
+        }
+        else {
+            props.updateDrawPen({ target: { value: 8 } });
+            setExpandedOption("e");
+        }
+        props.setDrawingEnabled(expandedOption !== "e");
+    }
+    var _c = useState(undefined), maskColor = _c[0], setMaskColor = _c[1];
+    function clickMask() {
+        if (expandedOption === "m") {
+            setExpandedOption("n");
+        }
+        else {
+            setExpandedOption("m");
+        }
+        props.setDrawingEnabled(false);
+    }
+    return (_jsx(ClickAwayListener, __assign({ onClickAway: function () {
+            setExpandedOption("n");
+            setExpandOpacityOptions(false);
+            props.setDrawingEnabled(false);
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                display: "flex",
+                width: "100%",
+                flexDirection: "row",
+                justifyItems: "center",
+                alignItems: "center",
+                borderRadius: "4px",
+                height: "20pt",
+                backgroundColor: "#333"
+            }, style: props.style }, { children: [_jsx(FormControl, { children: _jsx(FormLabel, __assign({ component: "legend", className: "ms-2", style: {
+                            width: "100%",
+                            textAlign: "center",
+                            color: "white",
+                            fontSize: 16,
+                            fontWeight: 400
+                        }, sx: {
+                            marginBottom: 0,
+                            marginLeft: 2,
+                            color: "white",
+                            fontWeight: 500,
+                            fontSize: 14
+                        } }, { children: "ROI Tools:" })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "draw", onClick: clickPaintBrush }, { children: _jsx(BrushIcon, { style: {
+                                        color: expandedOption === "d" && penColor !== undefined
+                                            ? penColor
+                                            : "white"
+                                    } }) })), _jsx(DrawPlatte, { expandDrawOptions: expandedOption === "d", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsxs(Stack, __assign({ direction: "row" }, { children: [_jsx(IconButton, __assign({ "aria-label": "erase", onClick: clickEraser }, { children: filled || !(expandedOption === "e") ? (_jsx(EraserIcon, { style: { color: "#ddd" } })) : (_jsx(AutoFixNormalOutlinedIcon, { style: { color: "white" } })) })), _jsx(EraserPlatte, { expandEraseOptions: expandedOption === "e", updateDrawPen: props.updateDrawPen, setDrawingEnabled: props.setDrawingEnabled, brushSize: props.brushSize, updateBrushSize: props.updateBrushSize })] })) }), _jsx(FormControl, { children: _jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "revert", onClick: function () {
+                                props.drawUndo();
+                            } }, { children: _jsx(ReplyIcon, { style: { color: "white" } }) })) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "capture", onClick: function () {
+                            props.nv.saveScene("".concat(props.volumes[props.selectedVolume].name, "_drawing.png"));
+                        } }, { children: _jsx(CameraAltIcon, { style: { color: "white" } }) })) }), _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "delete", onClick: function () {
+                            props.nv.clearDrawing();
+                            props.resampleImage();
+                            props.setDrawingChanged(false);
+                        } }, { children: _jsx(DeleteIcon, { style: { color: "white" } }) })) }), _jsx(Tooltip, __assign({ title: "Region of interests visibility" }, { children: _jsx(FormControl, { children: _jsx(IconButton, __assign({ "aria-label": "visible", onClick: function () {
+                                props.toggleROIVisible();
+                            } }, { children: props.roiVisible ? (_jsx(VisibilityIcon, { style: { color: "white" } })) : (_jsx(VisibilityOffIcon, { style: { color: "white" } })) })) }) })), _jsxs(FormControl, __assign({ style: { flexDirection: "row", alignItems: "center", color: "white" } }, { children: [_jsx(Tooltip, __assign({ title: "Region of interests opacity" }, { children: _jsx(IconButton, __assign({ "aria-label": "opaque", onClick: function () {
+                                    setExpandOpacityOptions(!expandOpacityOptions);
+                                } }, { children: _jsx(OpacityIcon, { style: { color: "white" } }) })) })), "=", " ".concat(props.drawingOpacity), _jsx(OpacityPlatte, { drawingOpacity: props.drawingOpacity, setDrawingOpacity: props.setDrawingOpacity, expanded: expandOpacityOptions })] })), _jsxs(FormControl, { children: [_jsx(Stack, __assign({ direction: "row" }, { children: _jsx(IconButton, __assign({ "aria-label": "fill", onClick: clickMask }, { children: _jsx(FormatColorFillIcon, { style: {
+                                        color: expandedOption === "m" && maskColor !== undefined
+                                            ? maskColor
+                                            : "white"
+                                    } }) })) })), _jsx(MaskPlatte, { resampleImage: function () {
+                                props.resampleImage();
+                                props.setDrawingChanged(true);
+                            }, expanded: expandedOption === "m", nv: props.nv, setMaskColor: setMaskColor, unfocus: function () {
+                                setExpandedOption("n");
+                            } })] })] })) })));
+};
+function EraserIcon(props) {
+    return (_jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 25 25" }, { children: [_jsx("rect", { x: "6", y: "3", width: "12", height: "22", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "currentColor" }), _jsx("rect", { x: "7", y: "4", width: "10", height: "8", rx: "2", ry: "2", transform: "rotate(230 12 12)", fill: "#FFFFFF" })] })));
+}
+var OpacityPlatte = function (_a) {
+    var drawingOpacity = _a.drawingOpacity, setDrawingOpacity = _a.setDrawingOpacity, expanded = _a.expanded;
+    return (_jsx(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expanded ? "1px" : 0, " solid #bbb"),
+            maxWidth: expanded ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: _jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Opacity: ".concat(drawingOpacity) })), _jsx(Slider, { sx: { width: "80%" }, value: drawingOpacity, step: 0.01, min: 0, max: 1, onChange: function (_event, value) {
+                        setDrawingOpacity(value);
+                    } })] })) })));
+};

package/dist/CmrComponents/draw-toolkit/EraserPlatte.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface EraserPlatteProps {
+    expandEraseOptions: boolean;
+    updateDrawPen: (e: any) => void;
+    setDrawingEnabled: (enabled: boolean) => void;
+    brushSize: number;
+    updateBrushSize: (size: number) => void;
+}
+declare const EraserPlatte: React.FC<EraserPlatteProps>;
+export default EraserPlatte;

package/dist/CmrComponents/draw-toolkit/EraserPlatte.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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, IconButton, Slider, Typography } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import FiberManualRecordOutlinedIcon from "@mui/icons-material/FiberManualRecordOutlined";
+var EraserPlatte = function (_a) {
+    var expandEraseOptions = _a.expandEraseOptions, updateDrawPen = _a.updateDrawPen, setDrawingEnabled = _a.setDrawingEnabled, brushSize = _a.brushSize, updateBrushSize = _a.updateBrushSize;
+    var eraseOptions = [
+        _jsx(FiberManualRecordIcon, { style: { color: "white" } }, "e0"),
+        _jsx(FiberManualRecordOutlinedIcon, { style: { color: "white" } }, "e1"),
+    ];
+    return (_jsxs(Stack, __assign({ style: {
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 10,
+            border: "".concat(expandEraseOptions ? "1px" : 0, " solid #bbb"),
+            maxWidth: expandEraseOptions ? 300 : 0,
+            overflow: "hidden",
+            borderRadius: "16px",
+            borderTopLeftRadius: "6pt",
+            borderTopRightRadius: "6pt",
+            background: "#333",
+            width: 150
+        }, direction: "column" }, { children: [_jsxs(Stack, __assign({ sx: { mb: 1 }, alignItems: "center" }, { children: [_jsx(Typography, __assign({ color: "white", noWrap: true, gutterBottom: true, width: "100%", marginLeft: "10pt", fontSize: "11pt", alignItems: "start" }, { children: "Eraser Size: ".concat(brushSize) })), _jsx(Slider, { sx: { width: "80%" }, value: brushSize, step: 2, min: 1, max: 15, marks: true, onChange: function (_event, value) {
+                            updateBrushSize(value);
+                        } })] })), _jsx(Stack, __assign({ direction: "row", style: { justifyContent: "center" } }, { children: eraseOptions.map(function (value, index) { return (_jsx(IconButton, __assign({ onClick: function () {
+                        updateDrawPen({ target: { value: index === 0 ? 8 : 0 } });
+                        setDrawingEnabled(true);
+                    } }, { children: value }), index)); }) }))] })));
+};
+export default EraserPlatte;

package/dist/CmrComponents/draw-toolkit/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/CmrComponents/draw-toolkit/MaskPlatte.js

@@ -0,0 +1,92 @@
+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 } from "../double-slider/InvertibleDualSlider";
+import { CmrCheckbox } from "../CmrCheckbox/CmrCheckbox";
+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, i) { return (_jsx(FiberManualRecordIcon, { sx: { color: color } }, i)); });
+    if (expanded) {
+        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,
+            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, __assign({ 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, __assign({ 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/CmrComponents/niivue-roi-histogram/NiivueRoiHistogram.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface NiivueRoiHistogramProps {
+    /** DOM id used by `resampleNiivueRoiHistogram` / `document.getElementById`. Default: `histoplot`. */
+    plotElementId?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Mount point for the Plotly ROI histogram. Default id `histoplot` matches MROptimum WebGUI.
+ */
+export declare function NiivueRoiHistogram(props: NiivueRoiHistogramProps): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-roi-histogram/NiivueRoiHistogram.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Mount point for the Plotly ROI histogram. Default id `histoplot` matches MROptimum WebGUI.
+ */
+export function NiivueRoiHistogram(props) {
+    var _a;
+    var id = (_a = props.plotElementId) !== null && _a !== void 0 ? _a : "histoplot";
+    return (_jsx("div", { id: id, className: props.className, style: props.style }));
+}

package/dist/CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram.d.ts

@@ -0,0 +1,29 @@
+import type { Layout } from "plotly.js-dist-min";
+/** Maps Niivue label index (e.g. "1".."7") to a display name in the legend / ROI table. */
+export type RoiLabelMapping = Record<string, string>;
+export interface NiivueRoiHistogramRow {
+    label: string;
+    alias: string;
+    visibility: boolean;
+    color: string;
+    mu: number;
+    std: number;
+    opacity: number;
+    count: number;
+    sample: number[];
+}
+/** Plotly layout matching MROptimum WebGUI ROI histogram defaults. */
+export declare function getDefaultRoiHistogramLayout(): Partial<Layout>;
+/**
+ * Recomputes per-ROI voxel samples from the Niivue instance, updates the Plotly histogram
+ * at `plotRoot`, and returns the row data for tables / export.
+ *
+ * @returns `null` if `plotRoot` is missing (caller should retain prior ROI state), otherwise
+ *          the new ROI rows (empty when drawing was cleared).
+ */
+export declare function resampleNiivueRoiHistogram(options: {
+    nv: any;
+    labelMapping?: RoiLabelMapping;
+    plotRoot: HTMLElement | null | undefined;
+    layout?: Partial<Layout>;
+}): NiivueRoiHistogramRow[] | null;

package/dist/CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram.js

@@ -0,0 +1,134 @@
+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 Plotly from "plotly.js-dist-min";
+import { calculateMean, calculateStandardDeviation } from "./roiHistogramStats";
+var ROI_HISTOGRAM_COLORS = [
+    "#bbb",
+    "#f00",
+    "#0f0",
+    "#00f",
+    "yellow",
+    "cyan",
+    "#e81ce8",
+    "#e8dbc7",
+];
+/** Plotly layout matching MROptimum WebGUI ROI histogram defaults. */
+export function getDefaultRoiHistogramLayout() {
+    return {
+        barmode: "overlay",
+        title: { text: "ROI Histogram" },
+        margin: {
+            l: 50,
+            r: 50,
+            b: 50,
+            t: 60,
+            pad: 4
+        },
+        xaxis: {
+            title: { text: "Voxel value" },
+            showgrid: true
+        },
+        yaxis: {
+            title: { text: "Bin frequency" },
+            showgrid: true
+        }
+    };
+}
+/**
+ * Recomputes per-ROI voxel samples from the Niivue instance, updates the Plotly histogram
+ * at `plotRoot`, and returns the row data for tables / export.
+ *
+ * @returns `null` if `plotRoot` is missing (caller should retain prior ROI state), otherwise
+ *          the new ROI rows (empty when drawing was cleared).
+ */
+export function resampleNiivueRoiHistogram(options) {
+    var _a, _b, _c, _d;
+    var nv = options.nv, _e = options.labelMapping, labelMapping = _e === void 0 ? {} : _e, plotRoot = options.plotRoot, layoutOverrides = options.layout;
+    if (typeof document === "undefined" || !plotRoot) {
+        return null;
+    }
+    var image = (_a = nv.volumes) === null || _a === void 0 ? void 0 : _a[0];
+    var layout = __assign(__assign({}, getDefaultRoiHistogramLayout()), layoutOverrides);
+    if (nv.drawBitmap == null) {
+        Plotly.newPlot(plotRoot, [], layout, { responsive: true });
+        return [];
+    }
+    if (!image) {
+        return null;
+    }
+    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++) {
+        var k = nv.drawBitmap[i];
+        if (samples[k] === undefined) {
+            samples[k] = [];
+        }
+        samples[k].push(image.img[i]);
+    }
+    if (nv.hiddenBitmap !== undefined) {
+        for (var i = 0; i < nv.hiddenBitmap.length; i++) {
+            var k = nv.hiddenBitmap[i];
+            if (samples[k] === undefined) {
+                samples[k] = [];
+            }
+            samples[k].push(image.img[i]);
+        }
+    }
+    var rois = [];
+    for (var sk in samples) {
+        var key = Number(sk);
+        var sample = samples[key];
+        if (sample.length > 0 && key > 0) {
+            rois.push({
+                label: String(key),
+                alias: (_c = (_b = labelMapping[sk]) !== null && _b !== void 0 ? _b : labelMapping[String(key)]) !== null && _c !== void 0 ? _c : String(key),
+                visibility: nv.getLabelVisibility(Number(key)),
+                color: (_d = ROI_HISTOGRAM_COLORS[key]) !== null && _d !== void 0 ? _d : ROI_HISTOGRAM_COLORS[0],
+                mu: calculateMean(sample),
+                std: calculateStandardDeviation(sample),
+                opacity: nv.drawOpacity,
+                count: sample.length,
+                sample: sample
+            });
+        }
+    }
+    var traces = [];
+    for (var _i = 0, rois_1 = rois; _i < rois_1.length; _i++) {
+        var roi = rois_1[_i];
+        traces.push({
+            x: roi.sample,
+            type: "histogram",
+            name: roi.alias,
+            opacity: roi.visibility ? 0.5 : 0.1,
+            marker: {
+                color: roi.color
+            },
+            autobinx: false,
+            xbins: {
+                start: min,
+                end: max,
+                size: (max - min) / 100
+            }
+        });
+    }
+    Plotly.newPlot(plotRoot, traces, layout, { responsive: true });
+    return rois;
+}

package/dist/CmrComponents/niivue-roi-histogram/roiHistogramStats.d.ts

@@ -0,0 +1,2 @@
+export declare function calculateMean(numbers: number[]): number;
+export declare function calculateStandardDeviation(numbers: number[]): number;

package/dist/CmrComponents/niivue-roi-histogram/roiHistogramStats.js

@@ -0,0 +1,13 @@
+export function calculateMean(numbers) {
+    var sum = numbers.reduce(function (acc, val) { return acc + val; }, 0);
+    return sum / numbers.length;
+}
+export function calculateStandardDeviation(numbers) {
+    var mean = calculateMean(numbers);
+    var squareDiffs = numbers.map(function (value) {
+        var diff = value - mean;
+        return diff * diff;
+    });
+    var avgSquareDiff = calculateMean(squareDiffs);
+    return Math.sqrt(avgSquareDiff);
+}

package/dist/CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Layout } from "plotly.js-dist-min";
+import { type NiivueRoiHistogramRow, type RoiLabelMapping } from "./resampleNiivueRoiHistogram";
+export declare function useNiivueRoiHistogram(nv: any, options?: {
+    plotElementId?: string;
+    /** Optional Plotly layout overrides passed through to each resample. */
+    layout?: Partial<Layout>;
+}): {
+    rois: NiivueRoiHistogramRow[];
+    setRois: import("react").Dispatch<import("react").SetStateAction<NiivueRoiHistogramRow[]>>;
+    labelMapping: RoiLabelMapping;
+    setLabelMapping: import("react").Dispatch<import("react").SetStateAction<RoiLabelMapping>>;
+    resample: (mapping?: RoiLabelMapping) => void;
+};

package/dist/CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram.js

@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+import { resampleNiivueRoiHistogram, } from "./resampleNiivueRoiHistogram";
+export function useNiivueRoiHistogram(nv, options) {
+    var _a;
+    var plotElementId = (_a = options === null || options === void 0 ? void 0 : options.plotElementId) !== null && _a !== void 0 ? _a : "histoplot";
+    var layout = options === null || options === void 0 ? void 0 : options.layout;
+    var _b = useState({}), labelMapping = _b[0], setLabelMapping = _b[1];
+    var _c = useState([]), rois = _c[0], setRois = _c[1];
+    var resample = useCallback(function (mapping) {
+        if (mapping === void 0) { mapping = labelMapping; }
+        var el = typeof document !== "undefined"
+            ? document.getElementById(plotElementId)
+            : null;
+        var next = resampleNiivueRoiHistogram({
+            nv: nv,
+            labelMapping: mapping,
+            plotRoot: el,
+            layout: layout
+        });
+        if (next !== null) {
+            setRois(next);
+        }
+    }, [nv, labelMapping, plotElementId, layout]);
+    return {
+        rois: rois,
+        setRois: setRois,
+        labelMapping: labelMapping,
+        setLabelMapping: setLabelMapping,
+        resample: resample
+    };
+}

package/dist/index.d.ts

@@ -25,6 +25,12 @@ export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/Niivu
 export type { NiivueSlicePositionProps } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
 export { NiivueContrastAdjustments } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
 export type { NiivueContrastAdjustmentsProps } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
+export { DrawToolkit } from "./CmrComponents/draw-toolkit/DrawToolkit";
+export type { DrawToolkitProps } from "./CmrComponents/draw-toolkit/DrawToolkit";
+export { resampleNiivueRoiHistogram, getDefaultRoiHistogramLayout, } from "./CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram";
+export type { NiivueRoiHistogramRow, RoiLabelMapping, } from "./CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram";
+export { NiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/NiivueRoiHistogram";
+export { useNiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram";
 import type { FC } from "react";
 import type { CmrTableProps } from "./CmrTable/CmrTable";
 export declare const CmrTable: FC<CmrTableProps>;

package/dist/index.js

@@ -24,6 +24,10 @@ export { Slider } from "./CmrComponents/gui-slider/Slider";
 export { InvertibleDualSlider } from "./CmrComponents/double-slider/InvertibleDualSlider";
 export { NiivueSlicePosition } from "./CmrComponents/niivue-slice-position/NiivueSlicePosition";
 export { NiivueContrastAdjustments } from "./CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments";
+export { DrawToolkit } from "./CmrComponents/draw-toolkit/DrawToolkit";
+export { resampleNiivueRoiHistogram, getDefaultRoiHistogramLayout, } from "./CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram";
+export { NiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/NiivueRoiHistogram";
+export { useNiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram";
 import CmrTableComponent from "./CmrTable/CmrTable";
 export var CmrTable = CmrTableComponent;
 export * from "./core";

package/package.json

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