cloudmr-ux 4.3.7 → 4.3.8

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

@@ -0,0 +1 @@
+export function ColorPicker(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+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 { Typography } from "@mui/material";
+import { Input } from "@mui/material";
+import { Box } from "@mui/material";
+import React from 'react';
+export function ColorPicker(props) {
+    var _a = React.useState('#ff0000'), hexColor = _a[0], setHexColor = _a[1];
+    React.useEffect(function () {
+        var rgb255 = rgb01Torgb255(props.colorRGB01);
+        var hex = rgb2Hex(rgb255);
+        console.log(props.title);
+        console.log(rgb255);
+        console.log(hex);
+        console.log('end use effect');
+        setHexColor(hex);
+    }, []);
+    function rgb01Torgb255(rgb01) {
+        return [
+            Math.round(rgb01[0] * 255),
+            Math.round(rgb01[1] * 255),
+            Math.round(rgb01[2] * 255),
+        ];
+    }
+    function componentToHex(c) {
+        var hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+    function rgb2Hex(rgb255) {
+        return "#" + componentToHex(rgb255[0]) + componentToHex(rgb255[1]) + componentToHex(rgb255[2]);
+    }
+    function hex2rgb(h) {
+        return [
+            parseInt(h.substring(1, 3), 16),
+            parseInt(h.substring(3, 5), 16),
+            parseInt(h.substring(5), 16)
+        ];
+    }
+    function updateColor(event) {
+        var hex = event.target.value;
+        console.log(hex);
+        setHexColor(hex);
+        var rgb = hex2rgb(hex);
+        var rgb01 = rgb.map(function (val) { return (val / 255); });
+        props.onSetColor(rgb01);
+    }
+    return (_jsxs(Box, __assign({ sx: {
+            display: 'flex'
+        }, m: 1 }, { children: [_jsx(Typography, __assign({ style: {
+                    marginRight: 'auto'
+                } }, { children: props.title })), _jsx(Input, { disableUnderline: false, autoFocus: false, type: 'color', style: {
+                    width: '50px',
+                    height: '20px'
+                }, onInput: updateColor, value: hexColor })] })));
+}

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

@@ -0,0 +1 @@
+export default function Layer(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,122 @@
+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, Divider, MenuItem, Card, CardContent } from "@mui/material";
+import { Typography } from "@mui/material";
+import { CmrLabel } from "cloudmr-ux";
+import { Select } from "@mui/material";
+import { InputLabel } from "@mui/material";
+import { FormControl } from "@mui/material";
+import { Paper } from "@mui/material";
+import { IconButton } from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { NumberPicker } from './NumberPicker';
+import React from 'react';
+import { display } from "@mui/system";
+function makeColorGradients(colorMapValues) {
+    var gradients = '';
+    var c = colorMapValues;
+    var n = c.R.length;
+    gradients += "rgba(".concat(c.R[n - 1], ",").concat(c.G[n - 1], ",").concat(c.B[n - 1], ",").concat(1, ")");
+    gradients += "linear-gradient(90deg,";
+    for (var j = 0; j < n; j++) {
+        gradients += "rgba(".concat(c.R[j], ",").concat(c.G[j], ",").concat(c.B[j], ",").concat(1, ") ").concat((j / (n - 1)) * 100, "%,");
+    }
+    gradients = gradients.slice(0, -1);
+    gradients += ')';
+    return gradients;
+}
+export default function Layer(props) {
+    var _a;
+    var allowedColorMaps = [
+        "bone",
+        "gray",
+        "hot",
+        "hsv",
+        "jet",
+        "plasma",
+        "turbo",
+        "viridis"
+    ];
+    var image = props.image;
+    var nii = props.nii;
+    var _b = React.useState(true), detailsOpen = _b[0], setDetailsOpen = _b[1];
+    var _c = React.useState(image.colormap), color = _c[0], setColor = _c[1];
+    var opacity = (_a = props.opacity) !== null && _a !== void 0 ? _a : 1.0;
+    var ArrowIcon = detailsOpen ? _jsx(KeyboardArrowUpIcon, {}) : _jsx(KeyboardArrowDownIcon, {});
+    // console.log(props.colorMapValues)
+    var allColors = props.nv.colormaps().filter(function (colorName) { return allowedColorMaps.includes(colorName); }).map(function (colorName) {
+        return (_jsx(MenuItem, __assign({ value: colorName }, { children: _jsxs(Box, __assign({ sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    width: '100%'
+                } }, { children: [_jsx(Box, __assign({ sx: {
+                            display: 'flex',
+                            flexDirection: 'row'
+                        } }, { children: colorName })), _jsx(Box, { sx: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            width: '20%',
+                            ml: 'auto'
+                        }, style: {
+                            background: makeColorGradients(props.getColorMapValues(colorName))
+                        } })] })) }), colorName));
+    });
+    function handleDetails() {
+        setDetailsOpen(!detailsOpen);
+    }
+    function handleColorChange(event) {
+        var clr = event.target.value;
+        var id = image.id;
+        console.log(clr);
+        console.log(id);
+        props.onColorMapChange(id, clr);
+        setColor(clr);
+    }
+    function handleDelete() {
+        props.onRemoveLayer(image);
+    }
+    function handleOpacityChanged(a) {
+        image.opacity = a;
+        props.onOpacityChange(a);
+    }
+    return (_jsx(Box, __assign({ sx: {
+            display: 'flex',
+            flexDirection: 'column'
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                display: detailsOpen ? 'flex' : 'none',
+                flexDirection: 'column'
+            } }, { children: [_jsxs(Box, __assign({ sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        height: '100%',
+                        width: '100%',
+                        marginBottom: '10px'
+                    } }, { children: [_jsxs(CmrLabel, __assign({ marginLeft: 2 }, { children: ["Opacity: ", opacity.toFixed(2)] })), _jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: opacity, onChange: function (e) {
+                                var v = Math.max(0, Math.min(1, parseFloat(e.target.value) || 0));
+                                handleOpacityChanged(v); // updates local state, image.opacity, and notifies parent
+                            }, style: {
+                                width: '100%',
+                                alignSelf: 'center',
+                                margin: '8px 0 16px 0',
+                                accentColor: '#580f8b'
+                            } })] })), _jsx(Box, __assign({ sx: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        width: '100%'
+                    } }, { children: _jsxs(FormControl, { children: [_jsx(InputLabel, { children: "Colormap" }), _jsx(Select, __assign({ style: { width: '200px' }, value: color, label: 'Colormap', size: 'small', onChange: handleColorChange }, { children: allColors }))] }) }))] })) })));
+}

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

@@ -0,0 +1 @@
+export function LayersPanel(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,107 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from "@mui/material";
+import { Box } from "@mui/material";
+import { Typography } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { Button } from "@mui/material";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import GestureIcon from "@mui/icons-material/Gesture";
+import CodeIcon from "@mui/icons-material/Code";
+import LayersIcon from "@mui/icons-material/Layers";
+import AddIcon from '@mui/icons-material/Add';
+export function LayersPanel(props) {
+    function handleAddLayer() {
+        var input = document.createElement('input');
+        input.type = 'file';
+        input.onchange = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    props.onAddLayer(input.files[0]);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        input.click();
+    }
+    return (_jsx(Drawer, __assign({ open: props.open, variant: "temporary", anchor: "left", sx: {
+            width: props.width
+        } }, { children: _jsxs(Box, __assign({ sx: {
+                width: props.width,
+                display: 'flex',
+                flexDirection: 'row',
+                height: '100%'
+            } }, { children: [_jsxs(Box, __assign({ sx: {
+                        width: 48,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        backgroundColor: '#F8F8F8',
+                        height: '100%',
+                        alignItems: 'center'
+                    } }, { children: [_jsx(IconButton, __assign({ style: {
+                                marginTop: '36px'
+                            } }, { children: _jsx(LayersIcon, { color: 'primary' }) })), _jsx(IconButton, __assign({ style: {
+                                marginTop: '8px'
+                            } }, { children: _jsx(GestureIcon, {}) })), _jsx(IconButton, __assign({ style: {
+                                marginTop: '8px'
+                            } }, { children: _jsx(CodeIcon, {}) }))] })), _jsxs(Box, __assign({ sx: {
+                        width: props.width,
+                        role: 'presentation',
+                        display: 'flex',
+                        height: '100%',
+                        flexDirection: 'column',
+                        justifyContent: 'flex-start',
+                        ml: 1,
+                        mr: 1
+                    } }, { children: [_jsx(Box, __assign({ sx: {
+                                display: 'flex'
+                            } }, { children: _jsx(IconButton, __assign({ onClick: props.onToggleMenu, style: { marginLeft: 'auto' } }, { children: _jsx(ArrowBackIcon, {}) })) })), _jsx(Box, __assign({ sx: {
+                                display: 'flex'
+                            } }, { children: _jsx(Button, __assign({ onClick: handleAddLayer, endIcon: _jsx(AddIcon, {}), size: 'small' }, { children: "Add Layer" })) })), props.children] }))] })) })));
+}

package/dist/CmrComponents/niivue-viewer/Niivue.css

@@ -0,0 +1,8 @@
+canvas:focus {
+	outline: none;
+}
+
+.js-plotly-plot,
+.plot-container {
+	width:100%;
+}

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

@@ -0,0 +1,2 @@
+export { Niivue };
+import { Niivue } from "@niivue/niivue";