cloudmr-ux 4.3.6 → 4.3.8

package/dist/CmrComponents/niivue-contrast-adjustments/NiivueContrastAdjustments.js

@@ -49,12 +49,12 @@ export function NiivueContrastAdjustments(_a) {
     var _b, _c, _d, _e;
     var nv = _a.nv, min = _a.min, max = _a.max, setMin = _a.setMin, setMax = _a.setMax, transformFactors = _a.transformFactors, gamma = _a.gamma, gammaKey = _a.gammaKey, setGamma = _a.setGamma, _f = _a.layerList, layerList = _f === void 0 ? [] : _f, _g = _a.title, title = _g === void 0 ? "Contrast Adjustments" : _g, _h = _a.accentColor, accentColor = _h === void 0 ? "#580f8b" : _h, style = _a.style, className = _a.className;
     var a = transformFactors.a, b = transformFactors.b;
-    return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _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:", minDomain: (_c = (_b = nv.volumes[0]) === null || _b === void 0 ? void 0 : _b.robust_min) !== null && _c !== void 0 ? _c : 0, maxDomain: (_e = (_d = nv.volumes[0]) === null || _d === void 0 ? void 0 : _d.robust_max) !== null && _e !== void 0 ? _e : 1, valueLow: min, valueHigh: max, onChangeLow: function (newMin) {
+    return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _jsx(Card, __assign({ variant: "outlined", sx: { mb: 2, borderTopLeftRadius: 0, borderTopRightRadius: 0 } }, { children: _jsx(CardContent, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { children: _jsxs(Box, __assign({ style: { display: "flex", flex: 1, minWidth: "245px", flexDirection: "column" } }, { children: [_jsx(TKDualRange, { name: "Values:", minDomain: (_c = (_b = nv.volumes[0]) === null || _b === void 0 ? void 0 : _b.robust_min) !== null && _c !== void 0 ? _c : 0, maxDomain: (_e = (_d = nv.volumes[0]) === null || _d === void 0 ? void 0 : _d.robust_max) !== null && _e !== void 0 ? _e : 1, valueLow: min, valueHigh: max, onChangeLow: function (newMin) {
                                     var v = nv.volumes[0];
                                     if (!v)
                                         return;
                                     v.cal_min = newMin;
-                                    nv.refreshLayers(v, 0, nv.volumes.length);
+                                    nv.refreshLayers(v, 0);
                                     nv.drawScene();
                                     setMin(newMin);
                                 }, onChangeHigh: function (newMax) {
@@ -62,13 +62,13 @@ export function NiivueContrastAdjustments(_a) {
                                     if (!v)
                                         return;
                                     v.cal_max = newMax;
-                                    nv.refreshLayers(v, 0, nv.volumes.length);
+                                    nv.refreshLayers(v, 0);
                                     nv.drawScene();
                                     setMax(newMax);
                                 }, transform: function (x) { return a * x - a * b; }, inverse: function (y) { return y / a + b; }, step: 0.001, precision: 3, accentColor: accentColor }), _jsxs("div", __assign({ style: { marginTop: 20, marginBottom: 15 } }, { children: [_jsxs(CmrLabel, __assign({ style: { display: "block", marginBottom: 6 } }, { children: ["Gamma: ", gamma.toFixed(2)] })), _jsx("input", { id: "gamma", type: "range", min: 0.1, max: 3.0, step: 0.05, value: gamma, onChange: function (e) {
                                             var val = Number(e.target.value);
                                             setGamma(val);
                                             nv.setGamma(val);
-                                        }, style: { width: "100%", accentColor: accentColor } }, gammaKey)] })), layerList.length > 0 && (_jsx(Box, __assign({ style: { height: "100%" } }, { children: layerList })))] })) }) }))] })));
+                                        }, style: { width: "100%", accentColor: accentColor } }, gammaKey)] })), layerList.length > 0 && (_jsx(Box, __assign({ style: { height: "100%" } }, { children: layerList })))] })) })) }))] })));
 }
 export default NiivueContrastAdjustments;

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

@@ -232,7 +232,7 @@ export function NiivueSlicePosition(_a) {
         accentColor: accentColor
     };
     // ── Render ────────────────────────────────────────────────────────────────
-    return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _jsx(Card, __assign({ variant: "outlined", sx: { mb: 2, borderTopLeftRadius: 0, borderTopRightRadius: 0 } }, { children: _jsx(CardContent, { children: _jsxs("div", __assign({ style: { display: "flex", flexDirection: "column" } }, { 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) {
+    return (_jsxs("div", __assign({ style: style, className: className }, { children: [title !== "" && (_jsx("div", __assign({ className: "title", style: { width: "100%" } }, { children: title }))), _jsx(Card, __assign({ variant: "outlined", sx: { mb: 2, borderTopLeftRadius: 0, borderTopRightRadius: 0 } }, { children: _jsx(CardContent, __assign({ sx: { "&:last-child": { paddingBottom: 2 } } }, { children: _jsxs("div", __assign({ style: { display: "flex", flexDirection: "column" } }, { 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);
@@ -250,6 +250,6 @@ export function NiivueSlicePosition(_a) {
                                                         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)); } })] })] })) }) }))] })));
+                                                } })] })), _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/CmrComponents/niivue-viewer/CloudMrNiivuePanel.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import "./Toolbar.scss";
+import type { DrawToolkitProps } from "../draw-toolkit/DrawToolkit";
+/** Props for {@link DrawToolkit} minus brush controls when using {@link MroDrawToolkit}. */
+export type CloudMrDrawToolkitProps = Omit<DrawToolkitProps, "brushSize" | "updateBrushSize">;
+export interface CloudMrNiivuePanelProps {
+    nv: any;
+    pipelineID: string;
+    locationTableVisible: boolean;
+    locationData: any[];
+    decimalPrecision: number;
+    drawToolkitProps: CloudMrDrawToolkitProps;
+    drawShapeTool: "pen" | "rectangle" | "ellipse" | null;
+    setDrawShapeTool: (t: "pen" | "rectangle" | "ellipse" | null) => void;
+    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;
+    onAfterRoiUpload?: () => void | Promise<void>;
+    transformFactors: {
+        a: number;
+        b: number;
+    };
+    rangeKey: number;
+    gamma: number;
+    gammaKey: number;
+    setGamma: (val: number) => void;
+}
+export declare function CloudMrNiivuePanel(props: CloudMrNiivuePanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,197 @@
+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 React from "react";
+import { Box } from "@mui/material";
+import { NI_PEN_TYPE } from "./niivuePenType";
+import LocationTable from "../../core/common/components/NiivueTools/components/LocationTable";
+import "./Toolbar.scss";
+import { NiivueSlicePosition } from "../niivue-slice-position/NiivueSlicePosition";
+import { NiivueContrastAdjustments } from "../niivue-contrast-adjustments/NiivueContrastAdjustments";
+import { NiivueRoiTable } from "../niivue-roi-table/NiivueRoiTable";
+import { MroDrawToolkit } from "./mro-draw-toolkit/MroDrawToolkit";
+export function CloudMrNiivuePanel(props) {
+    var _this = this;
+    var canvas = React.useRef(null);
+    var histogram = React.useRef(null);
+    var mins = props.mins, maxs = props.maxs, mms = props.mms;
+    React.useEffect(function () {
+        var cancelled = false;
+        (function () { return __awaiter(_this, void 0, void 0, function () {
+            var e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, props.nv.attachTo("niiCanvas")];
+                    case 1:
+                        _a.sent();
+                        if (!cancelled) {
+                            props.nv.opts.dragMode = props.nv.dragModes.pan;
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _a.sent();
+                        console.error("Niivue attachTo failed", e_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            cancelled = true;
+        };
+    }, [canvas]);
+    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]);
+    function applyDrawShapeTool(tool) {
+        props.setDrawShapeTool(tool);
+        var nv = props.nv;
+        nv.opts.penType =
+            tool === "rectangle"
+                ? NI_PEN_TYPE.RECTANGLE
+                : tool === "ellipse"
+                    ? NI_PEN_TYPE.ELLIPSE
+                    : NI_PEN_TYPE.PEN;
+        nv.drawScene();
+        if ((tool === "rectangle" || tool === "ellipse") && !props.drawToolkitProps.drawingEnabled) {
+            props.drawToolkitProps.setDrawingEnabled(true);
+        }
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            width: "100%",
+            display: "flex",
+            flexDirection: {
+                xs: "column",
+                md: "row"
+            },
+            flexWrap: "nowrap"
+        } }, { children: [_jsxs(Box, __assign({ sx: {
+                    width: {
+                        xs: "100%",
+                        md: "63%"
+                    },
+                    display: "flex",
+                    flexDirection: "column",
+                    minHeight: 0,
+                    alignItems: "stretch",
+                    justifyContent: "flex-start",
+                    mb: { xs: 2, md: 0 }
+                } }, { children: [_jsx(MroDrawToolkit, __assign({}, props.drawToolkitProps, { drawShapeTool: props.drawShapeTool, onDrawShapeToolChange: applyDrawShapeTool, onExitDrawMode: function () { return props.setDrawShapeTool(null); }, style: {
+                            marginBottom: 0,
+                            width: "100%",
+                            flexShrink: 0
+                        } })), _jsx(LocationTable, { tableData: props.locationData, isVisible: true, decimalPrecision: props.decimalPrecision, style: {
+                            width: "100%",
+                            height: "30pt",
+                            paddingTop: "10px",
+                            color: "white",
+                            background: "black",
+                            flexShrink: 0
+                        } }), _jsx(Box, __assign({ sx: {
+                            position: "relative",
+                            width: "100%",
+                            flexShrink: 0,
+                            minHeight: {
+                                xs: 300,
+                                sm: 400,
+                                md: 1035
+                            },
+                            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%",
+                    overflow: "visible",
+                    position: "relative",
+                    zIndex: 1
+                } }, { children: [_jsx(NiivueSlicePosition, { nv: props.nv, mins: mins, maxs: maxs, mms: mms, style: { minWidth: 245 } }), _jsx(NiivueContrastAdjustments, { nv: props.nv, min: props.min, max: props.max, setMin: props.setMin, setMax: props.setMax, transformFactors: props.transformFactors, gamma: props.gamma, gammaKey: props.gammaKey, setGamma: props.setGamma, layerList: props.layerList, style: { minWidth: 245 } }), _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(NiivueRoiTable, { 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, onAfterRoiUpload: props.onAfterRoiUpload }) }))] }))] }))] })));
+}

package/dist/CmrComponents/niivue-viewer/CloudMrNiivueViewer.d.ts

@@ -0,0 +1,41 @@
+export default function CloudMrNiivueViewer(props: any): import("react/jsx-runtime").JSX.Element;
+/**
+ * @typedef {Object} CloudMrNiivueViewerProps
+ * @property {any[]} niis
+ * @property {number} selectedVolume
+ * @property {(i: number) => void} setSelectedVolume
+ * @property {any[]} rois
+ * @property {string} pipelineID
+ * @property {string} [accessToken]
+ * @property {(msg: string) => void} [setWarning]
+ * @property {(open: boolean) => void} [setWarningOpen]
+ * @property {(fn: () => void) => void} [saveROICallback]
+ * @property {string} roiDeleteUrl — full URL for `ROI_DELETE` (app resolves from env)
+ * @property {() => Promise<void>} refreshPipelineRois — e.g. dispatch getPipelineROI
+ * @property {() => any[]} getPipelineRois — returns current ROI list for pipeline (e.g. from Redux)
+ */
+export const nv: Niivue;
+export type CloudMrNiivueViewerProps = {
+    niis: any[];
+    selectedVolume: number;
+    setSelectedVolume: (i: number) => void;
+    rois: any[];
+    pipelineID: string;
+    accessToken?: string | undefined;
+    setWarning?: ((msg: string) => void) | undefined;
+    setWarningOpen?: ((open: boolean) => void) | undefined;
+    saveROICallback?: ((fn: () => void) => void) | undefined;
+    /**
+     * — full URL for `ROI_DELETE` (app resolves from env)
+     */
+    roiDeleteUrl: string;
+    /**
+     * — e.g. dispatch getPipelineROI
+     */
+    refreshPipelineRois: () => Promise<void>;
+    /**
+     * — returns current ROI list for pipeline (e.g. from Redux)
+     */
+    getPipelineRois: () => any[];
+};
+import { Niivue } from "./NiivuePatcher";