cloudmr-ux 2.0.7 → 3.0.1

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

@@ -0,0 +1,40 @@
+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 } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Input } from "@mui/material";
+import React from "react";
+export function NumberPicker(props) {
+    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    React.useEffect(function () {
+        setValue(props.value);
+    }, []);
+    function handleNumberInput(event) {
+        var v = event.target.value;
+        if (v < props.min) {
+            v = props.min;
+        }
+        if (v > props.max) {
+            v = props.max;
+        }
+        setValue(v);
+        props.onChange(v);
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: "flex"
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                    marginRight: "auto"
+                } }, { children: props.title })), _jsx(Input, { disableUnderline: true, type: "number", style: { width: "50px", height: "20px" }, onInput: handleNumberInput, value: value, inputProps: {
+                    step: props.step
+                } })] })));
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function SettingsPanel(props: {
+    open: boolean;
+    width: number;
+    toggleMenu: React.MouseEventHandler;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+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 { Drawer } from "@mui/material";
+import { Box } from "@mui/material";
+import { IconButton } from "@mui/material";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+export function SettingsPanel(props) {
+    return (_jsx(Drawer, __assign({ open: props.open, variant: "temporary", anchor: "right", sx: {
+            width: props.width
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                width: props.width,
+                role: "presentation",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "flex-start"
+            } }, { children: [_jsx(Box, __assign({ sx: {
+                        display: "flex",
+                        marginBottom: "10px"
+                    } }, { children: _jsx(IconButton, __assign({ onClick: props.toggleMenu, style: { marginRight: "auto" } }, { children: _jsx(ArrowForwardIcon, {}) })) })), props.children] })) })));
+}

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

@@ -0,0 +1,5 @@
+export default function NVSwitch(props: {
+    title: string;
+    checked: boolean;
+    onChange: Function;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+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 } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Switch } from "@mui/material";
+export default function NVSwitch(props) {
+    function handleChange() {
+        props.onChange();
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: "flex",
+            alignItems: "center"
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ onClick: handleChange, style: {
+                    marginRight: "auto"
+                } }, { children: props.title })), _jsx(Switch, { checked: props.checked, onChange: handleChange })] })));
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { ROI } from "../../../../features/rois/roiTypes";
+interface ToolbarProps {
+    nv: any;
+    nvUpdateSliceType: any;
+    sliceType: string;
+    toggleLayers: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    toggleSettings: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    volumes: {
+        url: string;
+        name: string;
+        alias: string;
+    }[];
+    selectedVolume: number;
+    setSelectedVolume: (index: number) => void;
+    showColorBar: boolean;
+    toggleColorBar: () => void;
+    rois: ROI[];
+    selectedROI: number | null;
+    setSelectedROI: (selected: number) => void;
+    refreshROI: () => void;
+    verticalLayout?: boolean;
+    toggleVerticalLayout?: () => void;
+    showCrosshair: boolean;
+    toggleShowCrosshair: () => void;
+    dragMode: string;
+    setDragMode: (dragMode: string) => void;
+    radiological: boolean;
+    toggleRadiological: () => void;
+    saveROI: (callback: () => void, preSaving: () => void) => void;
+    complexMode: string;
+    setComplexMode: (complexMode: string) => void;
+    complexOptions: string[];
+    labelsVisible: boolean;
+    toggleLabelsVisible: () => void;
+    saving: boolean;
+    setSaving: (saving: boolean) => void;
+}
+export default function Toolbar(props: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,184 @@
+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 { Fragment } from "react";
+import { Box, Button, CircularProgress, Stack, Switch, Tooltip, Typography, } from "@mui/material";
+import { IconButton, FormControl, Select, MenuItem, InputLabel, } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
+import { getPipelineROI } from "../../../../features/rois/resultActionCreation";
+import HomeIcon from "@mui/icons-material/Home";
+import CenterFocusStrongIcon from "@mui/icons-material/CenterFocusStrong";
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
+import Brightness6Icon from "@mui/icons-material/Brightness6";
+import AutoGraph from "@mui/icons-material/AutoGraph";
+export default function Toolbar(props) {
+    var _this = this;
+    var saving = props.saving, setSaving = props.setSaving;
+    var dispatch = useAppDispatch();
+    function handleSliceTypeChange(e) {
+        var newSliceType = e.target.value;
+        var nvUpdateSliceType = props.nvUpdateSliceType;
+        nvUpdateSliceType(newSliceType);
+    }
+    // let dragModes = ["Pan", "Measurement", "Contrast", 'None'];
+    var dragModes = [
+        { label: "Pan and Zoom", value: "pan" },
+        { label: "Measurement", value: "measurement" },
+        { label: "Contrast", value: "contrast" },
+        { label: "None", value: "none" },
+    ];
+    var pipeline = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.pipeline_id; });
+    // Display-only mapping. Does NOT mutate data.
+    var VOLUME_LABELS = {
+        // your requested labels
+        materialdensity: "Tissue Density",
+        "material density": "Tissue Density",
+        bloodperfusion: "Blood Perfusion",
+        heatcapacity: "Heat Capacity",
+        thermalconductivity: "Thermal Conductivity",
+        metabolismheat: "Metabolism Heat",
+        sar: "SAR",
+        told: "Initial Temperature",
+        finaltemperature: "Final Temperature",
+        "final temperature": "Final Temperature"
+    };
+    // normalize to be case/spacing/underscore-agnostic
+    var norm = function (s) { return (s !== null && s !== void 0 ? s : "").replace(/[\s_-]/g, "").toLowerCase(); };
+    var getVolumeDisplay = function (v) {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = VOLUME_LABELS[norm(v === null || v === void 0 ? void 0 : v.alias)]) !== null && _a !== void 0 ? _a : VOLUME_LABELS[norm(v === null || v === void 0 ? void 0 : v.name)]) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.alias) !== null && _c !== void 0 ? _c : v === null || v === void 0 ? void 0 : v.name) !== null && _d !== void 0 ? _d : "";
+    };
+    return (_jsx(Box, __assign({ sx: { display: "flex", flexDirection: "column", width: "100%" } }, { children: props.volumes[props.selectedVolume] != undefined && (_jsxs(Fragment, { children: [_jsxs(Box, __assign({ sx: {
+                        display: "flex",
+                        width: "100%",
+                        flexDirection: "row",
+                        justifyItems: "left",
+                        alignItems: "center",
+                        backgroundColor: "white",
+                        flexWrap: "wrap"
+                    } }, { children: [_jsxs(FormControl, __assign({ size: "small", sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Opened Volume" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.selectedVolume, label: "Opened Volume", onChange: function (e) {
+                                        return props.setSelectedVolume(Number(e.target.value));
+                                    }, renderValue: function (i) {
+                                        return getVolumeDisplay(props.volumes[i]);
+                                    } }, { children: props.volumes.map(function (value, index) {
+                                        return (_jsx(MenuItem, __assign({ value: index }, { children: getVolumeDisplay(value) }), index));
+                                    }) }))] })), _jsxs(FormControl, __assign({ size: "small", sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Display Mode" })), _jsxs(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.sliceType, label: "Display Mode", onChange: handleSliceTypeChange }, { children: [_jsx(MenuItem, __assign({ value: "axial" }, { children: "Axial" }), "axial"), _jsx(MenuItem, __assign({ value: "coronal" }, { children: "Coronal" }), "coronal"), _jsx(MenuItem, __assign({ value: "sagittal" }, { children: "Sagittal" }), "sagittal"), _jsx(MenuItem, __assign({ value: "multi" }, { children: "Multi" }), "multi"), _jsx(MenuItem, __assign({ value: "3d" }, { children: "3D" }), "3d")] }))] })), _jsxs(FormControl, __assign({ size: "small", sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "drag-mode-label" }, { children: "Drag Mode" })), _jsx(Select, __assign({ labelId: "drag-mode-label", id: "drag-mode", value: props.dragMode, label: "Drag Mode", onChange: function (e) { return props.setDragMode(e.target.value); } }, { children: dragModes.map(function (m, idx) { return (_jsx(MenuItem, __assign({ value: m.value }, { children: m.label }), idx)); }) }))] })), _jsxs(FormControl, __assign({ size: "small", sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "Complex Mode" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.complexMode, label: "Opened ROIs", onChange: function (e) { return props.setComplexMode(e.target.value); } }, { children: props.complexOptions.map(function (value, idx) {
+                                        return (_jsx(MenuItem, __assign({ value: value }, { children: value.charAt(0).toUpperCase() + value.slice(1) }), idx));
+                                    }) }))] })), _jsxs(FormControl, __assign({ size: "small", sx: {
+                                m: 2,
+                                minWidth: 120
+                            } }, { children: [_jsx(InputLabel, __assign({ id: "slice-type-label" }, { children: "ROI Layer" })), _jsx(Select, __assign({ labelId: "slice-type-label", id: "slice-type", value: props.selectedROI !== null ? props.selectedROI : "", label: "Opened ROIs" }, { children: props.rois.map(function (value, index) {
+                                        return (_jsx(MenuItem, __assign({ value: index, onClick: function () { return props.setSelectedROI(Number(index)); } }, { children: value.filename }), index));
+                                    }) }))] })), _jsx(Button, __assign({ variant: "contained", endIcon: saving && _jsx(CircularProgress, { sx: { color: "white" }, size: 20 }), onClick: function () {
+                                if (saving)
+                                    return;
+                                props.saveROI(function () { return __awaiter(_this, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0:
+                                                if (!pipeline) return [3 /*break*/, 2];
+                                                return [4 /*yield*/, dispatch(getPipelineROI({ pipeline: pipeline }))];
+                                            case 1:
+                                                _a.sent();
+                                                _a.label = 2;
+                                            case 2:
+                                                setSaving(false);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); }, function () {
+                                    setSaving(true);
+                                });
+                            } }, { children: "Save Drawing Layer" })), _jsx(IconButton, __assign({ onClick: props.toggleSettings, style: { marginLeft: "auto" } }, { children: _jsx(SettingsIcon, {}) }))] })), _jsxs(Box, __assign({ sx: {
+                        display: "flex",
+                        width: "100%",
+                        flexDirection: "row",
+                        justifyItems: "left",
+                        alignItems: "center",
+                        backgroundColor: "white",
+                        flexWrap: "wrap"
+                    } }, { children: [_jsxs(Box, __assign({ sx: {
+                                display: "flex",
+                                alignItems: "center"
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: "auto"
+                                    } }, { children: "Neurological" })), _jsx(Switch, { checked: !props.radiological, onChange: props.toggleRadiological })] })), _jsxs(Box, __assign({ sx: {
+                                display: "flex",
+                                alignItems: "center"
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: "auto"
+                                    } }, { children: "Show Crosshair" })), _jsx(Switch, { checked: props.showCrosshair, onChange: props.toggleShowCrosshair })] })), _jsxs(Box, __assign({ sx: {
+                                display: "flex",
+                                alignItems: "center"
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: "auto"
+                                    } }, { children: "Show Color Bar" })), _jsx(Switch, { checked: props.showColorBar, onChange: props.toggleColorBar })] })), _jsxs(Box, __assign({ sx: {
+                                display: "flex",
+                                alignItems: "center"
+                            }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                                        marginRight: "auto"
+                                    } }, { children: "Labels Visible" })), _jsx(Switch, { checked: props.labelsVisible, onChange: props.toggleLabelsVisible })] })), _jsxs(Stack, __assign({ flexDirection: "row", sx: { m: 2 } }, { children: [_jsx(Tooltip, __assign({ title: "Reset Views", placement: "right" }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetScene(); } }, { children: _jsx(HomeIcon, {}) })) })), _jsx(Tooltip, __assign({ title: "Recenter Views", placement: "right" }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.recenter(); } }, { children: _jsx(CenterFocusStrongIcon, {}) })) })), _jsx(Tooltip, __assign({ title: "Reset Zooms", placement: "right" }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetZoom(); } }, { children: _jsx(ZoomInMapIcon, {}) })) })), _jsx(Tooltip, __assign({ title: "Reset Gamma", placement: "right" }, { children: _jsx(IconButton, __assign({ onClick: function () {
+                                            var _a, _b;
+                                            props.nv.setGamma(1.0); // engine reset
+                                            (_b = (_a = props.nv).onResetGamma) === null || _b === void 0 ? void 0 : _b.call(_a); // UI reset: bumps gammaKey + sets gamma=1.0
+                                            // props.nv.resetContrast();
+                                        } }, { children: _jsx(AutoGraph, {}) })) })), _jsx(Tooltip, __assign({ title: "Reset Contrast", placement: "right" }, { children: _jsx(IconButton, __assign({ onClick: function () { return props.nv.resetContrast(); } }, { children: _jsx(Brightness6Icon, {}) })) }))] }))] }))] })) })));
+}

package/dist/core/common/components/NiivueTools/components/Toolbar.scss

@@ -0,0 +1,39 @@
+.lil-gui {
+  --background-color: #ffffff;
+  --text-color: #3d3d3d;
+  --title-background-color: #333;
+  --title-text-color: #fff;
+  --widget-color: #f0f0f0;
+  --hover-color: #f0f0f0;
+  --focus-color: #fafafa;
+  --number-color: #000000;
+  --string-color: #8da300;
+  --width: '100%';
+}
+
+.lil-gui .controller > .name{
+  font-size:12pt;
+}
+.lil-gui .title {
+  font-size:14pt;
+  display: flex;
+  align-items: center;
+  padding-left: 5pt;
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+  font-weight: normal;
+  height: 28pt;
+}
+
+.title {
+  font-size:16px;
+  display: flex;
+  align-items: center;
+  padding-left: 10pt;
+  border-top-right-radius:4px;
+  border-top-left-radius:4px;
+  font-weight: normal;
+  height: 30pt;
+  background: #333;
+  color: #fff;
+}

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

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

package/dist/core/common/components/NiivueTools/components/stats.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/core/common/components/NiivueTools/index.css

@@ -0,0 +1,14 @@
+html {
+    height: 100%;
+}
+
+body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
+#root {
+    height: 100%;
+    display: flex;
+}