cloudmr-ux 4.3.4 → 4.3.6

package/dist/CmrComponents/niivue-roi-table/NiivueRoiTable.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+/** Default merged ROI label in Niivue patcher `groupLabelsInto` / `groupLabelsFromSelection`. */
+export declare const DEFAULT_ROI_GROUP_TARGET_LABEL = 7;
+export interface NiivueRoiTableProps {
+    pipelineID: string;
+    rois: any[];
+    resampleImage: () => void;
+    zipAndSendROI: (url: string, filename: string, blob: Blob) => Promise<void>;
+    unpackROI: (url: string) => Promise<void>;
+    setLabelAlias: (label: number | string, alias: string) => void;
+    nv: any;
+    style?: CSSProperties;
+    /**
+     * Called after a successful ROI upload handshake, multipart upload, and `unpackROI`.
+     * Use this to refresh server-side ROI metadata (e.g. `dispatch(getPipelineROI(...))`).
+     */
+    onAfterRoiUpload?: () => void | Promise<void>;
+    /** Niivue label index ROIs merge into when grouping. Default: {@link DEFAULT_ROI_GROUP_TARGET_LABEL}. */
+    groupTargetLabel?: number;
+}
+/**
+ * Data grid + toolbar for Niivue ROI labels: edit aliases, visibility, group / ungroup,
+ * download subset, delete, and upload replacement mask. No Redux — pass callbacks and `nv`.
+ */
+export declare function NiivueRoiTable(props: NiivueRoiTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/CmrComponents/niivue-roi-table/NiivueRoiTable.js

@@ -0,0 +1,253 @@
+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 { useState } from "react";
+import { Tooltip, IconButton, Snackbar, Alert, } from "@mui/material";
+import Box from "@mui/material/Box";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import GetAppIcon from "@mui/icons-material/GetApp";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Icon as WpIcon, group as wpGroup, ungroup as wpUngroup } from "@wordpress/icons";
+import CmrTable from "../../CmrTable/CmrTable";
+import CMRUpload from "../upload/Upload";
+import { getEndpoints } from "../../core/config/AppConfig";
+import { AuthenticatedHttpClient } from "../../core/common/utilities/AuthenticatedRequests";
+/** Default merged ROI label in Niivue patcher `groupLabelsInto` / `groupLabelsFromSelection`. */
+export var DEFAULT_ROI_GROUP_TARGET_LABEL = 7;
+var ROI_TOOLBAR_ICON_SIZE_PX = 24;
+var ROI_TOOLBAR_ICON_BUTTON_SX = {
+    color: "action.active",
+    "&.Mui-disabled": {
+        color: function (theme) { return theme.palette.action.disabled; }
+    }
+};
+var ROI_TOOLBAR_MUI_ICON_SX = {
+    fontSize: ROI_TOOLBAR_ICON_SIZE_PX,
+    color: "inherit"
+};
+/**
+ * Data grid + toolbar for Niivue ROI labels: edit aliases, visibility, group / ungroup,
+ * download subset, delete, and upload replacement mask. No Redux — pass callbacks and `nv`.
+ */
+export function NiivueRoiTable(props) {
+    var _this = this;
+    var _a = props.groupTargetLabel, groupTargetLabel = _a === void 0 ? DEFAULT_ROI_GROUP_TARGET_LABEL : _a, onAfterRoiUpload = props.onAfterRoiUpload;
+    var _b = useState(1), uploadKey = _b[0], setUploadKey = _b[1];
+    var endpoints = getEndpoints();
+    var _c = useState([]), selectedData = _c[0], setSelectedData = _c[1];
+    var roiColumns = [
+        {
+            headerName: "ROI Label",
+            field: "alias",
+            flex: 1,
+            editable: true,
+            valueSetter: function (params) {
+                if (params.value !== params.row.alias) {
+                    props.setLabelAlias(params.row.label, params.value);
+                }
+                return params.row;
+            }
+        },
+        {
+            headerName: "Color",
+            field: "color",
+            flex: 0.5,
+            sortable: false,
+            renderCell: function (params) { return (_jsx(Box, __assign({ sx: { width: "100%", display: "flex", justifyContent: "center" } }, { children: _jsx("div", { style: {
+                        width: "14pt",
+                        height: "14pt",
+                        borderRadius: "3pt",
+                        background: "".concat(params.row.color)
+                    } }) }))); }
+        },
+        {
+            headerName: "Mean",
+            field: "mu",
+            flex: 1,
+            renderCell: function (params) { return (_jsx("div", { children: "".concat(params.row.mu.toFixed(3)) })); }
+        },
+        {
+            headerName: "SD",
+            field: "std",
+            flex: 1,
+            renderCell: function (params) { return (_jsx("div", { children: "".concat(params.row.std.toFixed(3)) })); }
+        },
+        {
+            headerName: "Visibility",
+            field: "visibility",
+            flex: 1,
+            sortable: false,
+            renderCell: function (params) { return (_jsx(Box, __assign({ sx: { width: "100%", display: "flex", justifyContent: "center" } }, { children: _jsx(IconButton, __assign({ onClick: function (event) {
+                        props.nv.setLabelVisibility(Number(params.row.label), !props.nv.getLabelVisibility(Number(params.row.label)));
+                        props.resampleImage();
+                        props.nv.drawScene();
+                        event.stopPropagation();
+                    } }, { children: params.row.visibility ? (_jsx(VisibilityIcon, { sx: { color: "#aaa" } })) : (_jsx(VisibilityOffIcon, { sx: { color: "#aaa" } })) })) }))); }
+        },
+        {
+            headerName: "Voxel Count",
+            field: "count",
+            flex: 1.5
+        },
+    ];
+    var _d = useState(false), warningVisible = _d[0], setWarningVisible = _d[1];
+    var _e = useState(""), warningMessage = _e[0], setWarningMessage = _e[1];
+    var warnEmptySelection = function (message) {
+        setWarningMessage(message);
+        setWarningVisible(true);
+    };
+    var selectedNums = selectedData.map(function (v) { return Number(v); });
+    var uniqueSelected = new Set(selectedNums);
+    var canGroupSelection = selectedNums.length >= 2 && uniqueSelected.size >= 2;
+    var groupButtonDisabled = selectedData.length > 0 && !canGroupSelection;
+    var groupTooltip = selectedData.length === 0
+        ? "Group selected ROIs"
+        : uniqueSelected.size < 2 || selectedNums.length < 2
+            ? "Select at least two different ROIs to group"
+            : "Group selected ROIs";
+    return (_jsxs(Box, __assign({ style: props.style }, { children: [_jsx(CmrTable, { hideFooter: true, getRowId: function (row) { return row.label; }, style: { height: "70%" }, dataSource: props.rois, columns: roiColumns, columnHeaderHeight: 40, rowSelectionModel: selectedData, onRowSelectionModelChange: function (rowSelectionModel) {
+                    setSelectedData(rowSelectionModel);
+                } }), _jsxs(Box, __assign({ sx: {
+                    display: "flex",
+                    justifyContent: "flex-start",
+                    alignItems: "center",
+                    flexWrap: "wrap",
+                    gap: 2,
+                    mt: 0,
+                    px: 2,
+                    py: 1,
+                    backgroundColor: "#f8f9fa",
+                    border: "1px solid rgba(0, 0, 0, 0.12)",
+                    borderTop: "none",
+                    borderRadius: "0 0 4px 4px"
+                } }, { children: [_jsx(Tooltip, __assign({ title: groupTooltip }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ disabled: groupButtonDisabled, sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
+                                    if (selectedData.length === 0) {
+                                        warnEmptySelection("Please select an ROI to group");
+                                        return;
+                                    }
+                                    if (!canGroupSelection) {
+                                        warnEmptySelection("Please select at least two different ROIs to group");
+                                        return;
+                                    }
+                                    if (typeof props.nv.groupLabelsFromSelection === "function") {
+                                        props.nv.groupLabelsFromSelection(selectedNums, groupTargetLabel);
+                                    }
+                                    else {
+                                        props.nv.groupLabelsInto(selectedNums, groupTargetLabel);
+                                    }
+                                    props.nv.drawScene();
+                                    props.resampleImage();
+                                } }, { children: _jsx(WpIcon, { icon: wpGroup, size: 24, fill: "currentColor" }) })) }) })), _jsx(Tooltip, __assign({ title: "Ungroup ROIs" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
+                                if (selectedData.length === 0) {
+                                    warnEmptySelection("Please select an ROI to ungroup");
+                                    return;
+                                }
+                                props.nv.ungroup();
+                                props.nv.drawScene();
+                                props.resampleImage();
+                            } }, { children: _jsx(WpIcon, { icon: wpUngroup, size: ROI_TOOLBAR_ICON_SIZE_PX, fill: "currentColor" }) })) })), _jsx(Tooltip, __assign({ title: "Download" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                var fileName, selectedLabels, _i, selectedData_1, label;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            fileName = "label";
+                                            selectedLabels = [];
+                                            for (_i = 0, selectedData_1 = selectedData; _i < selectedData_1.length; _i++) {
+                                                label = selectedData_1[_i];
+                                                fileName += label;
+                                                selectedLabels.push(Number(label));
+                                            }
+                                            fileName += ".nii";
+                                            if (selectedLabels.length === 0) {
+                                                warnEmptySelection("Please select an ROI to download");
+                                                return [2 /*return*/];
+                                            }
+                                            return [4 /*yield*/, props.nv.saveImageByLabels(fileName, selectedLabels)];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); } }, { children: _jsx(GetAppIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(Tooltip, __assign({ title: "Delete" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
+                                if (selectedData.length === 0) {
+                                    warnEmptySelection("Please select an ROI to delete");
+                                    return;
+                                }
+                                props.nv.deleteDrawingByLabel(selectedData.map(function (value) { return Number(value); }));
+                                props.resampleImage();
+                                props.nv.drawScene();
+                            } }, { children: _jsx(DeleteIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(CMRUpload, { changeNameAfterUpload: false, color: "primary", onUploaded: function () { }, uploadHandler: function (file, _fileAlias, _fileDatabase) { return __awaiter(_this, void 0, void 0, function () {
+                            var filename, response;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        filename = file.name;
+                                        return [4 /*yield*/, AuthenticatedHttpClient.post(endpoints.ROI_UPLOAD, {
+                                                filename: filename,
+                                                pipeline_id: props.pipelineID,
+                                                type: "image",
+                                                contentType: "application/octet-stream"
+                                            })];
+                                    case 1:
+                                        response = _a.sent();
+                                        return [4 /*yield*/, props.zipAndSendROI(response.data.upload_url, filename, file)];
+                                    case 2:
+                                        _a.sent();
+                                        return [4 /*yield*/, props.unpackROI(response.data.access_url)];
+                                    case 3:
+                                        _a.sent();
+                                        return [4 /*yield*/, (onAfterRoiUpload === null || onAfterRoiUpload === void 0 ? void 0 : onAfterRoiUpload())];
+                                    case 4:
+                                        _a.sent();
+                                        setUploadKey(function (k) { return k + 1; });
+                                        return [2 /*return*/, 200];
+                                }
+                            });
+                        }); }, maxCount: 1 }, uploadKey)] })), _jsx(Snackbar, __assign({ open: warningVisible, autoHideDuration: 3000, onClose: function () { return setWarningVisible(false); }, anchorOrigin: { vertical: "top", horizontal: "center" } }, { children: _jsx(Alert, __assign({ severity: "warning", sx: { width: "100%" }, onClose: function () { return setWarningVisible(false); } }, { children: warningMessage })) }))] })));
+}

package/dist/core/app/results/Rois.d.ts

@@ -1,11 +1,8 @@
-import { CSSProperties } from "react";
-export declare const ROITable: (props: {
-    pipelineID: string;
-    rois: any[];
-    resampleImage: () => void;
-    zipAndSendROI: (url: string, filename: string, blob: Blob) => Promise<void>;
-    unpackROI: (url: string) => Promise<void>;
-    setLabelAlias: (label: number | string, alias: string) => void;
-    style?: CSSProperties | undefined;
-    nv: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import type { NiivueRoiTableProps } from "../../../CmrComponents/niivue-roi-table/NiivueRoiTable";
+export type { NiivueRoiTableProps };
+type ReduxRoiTableProps = Omit<NiivueRoiTableProps, "onAfterRoiUpload">;
+/**
+ * ROI table wired to the core Redux store: refreshes pipeline ROI metadata after upload.
+ * Prefer {@link NiivueRoiTable} from `cloudmr-ux` when building screens without this store.
+ */
+export declare function ROITable(props: ReduxRoiTableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,298 +9,21 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { CmrTable, CMRUpload, CmrConfirmation } from "../../../index";
-import { useState } from "react";
-import { Tooltip, IconButton, } from "@mui/material";
-import { getEndpoints } from "../../config/AppConfig";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NiivueRoiTable } from "../../../CmrComponents/niivue-roi-table/NiivueRoiTable";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
-import Box from "@mui/material/Box";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import GetAppIcon from "@mui/icons-material/GetApp";
-import DeleteIcon from "@mui/icons-material/Delete";
-import { Icon as WpIcon, group as wpGroup, ungroup as wpUngroup } from "@wordpress/icons";
 import { getPipelineROI } from "../../features/rois/resultActionCreation";
-import { AuthenticatedHttpClient } from "../../common/utilities/AuthenticatedRequests";
-/** Default merged ROI label in NiivuePatcher `groupLabelsInto` — keep in sync with patcher */
-var GROUP_TARGET_LABEL = 7;
-/** Toolbar action icons: `action.active` → rgba(0, 0, 0, 0.54) in default MUI light theme */
-var ROI_TOOLBAR_ICON_SIZE_PX = 24;
-var ROI_TOOLBAR_ICON_BUTTON_SX = {
-    color: "action.active",
-    "&.Mui-disabled": {
-        color: function (theme) { return theme.palette.action.disabled; }
-    }
-};
-var ROI_TOOLBAR_MUI_ICON_SX = {
-    fontSize: ROI_TOOLBAR_ICON_SIZE_PX,
-    color: "inherit"
-};
-export var ROITable = function (props) {
-    // const rois:ROI[] = useAppSelector(state=>{
-    //     return (state.roi.rois[props.pipelineID]==undefined)?[]:state.roi.rois[props.pipelineID];
-    // })
-    // console.log(rois);
-    var endpoints = getEndpoints();
-    var _a = useState(1), uploadKey = _a[0], setUploadKey = _a[1];
-    var pipeline = useAppSelector(function (state) { var _a; return (_a = state.result.activeJob) === null || _a === void 0 ? void 0 : _a.pipeline_id; });
-    var _b = useState([]), selectedData = _b[0], setSelectedData = _b[1];
+/**
+ * ROI table wired to the core Redux store: refreshes pipeline ROI metadata after upload.
+ * Prefer {@link NiivueRoiTable} from `cloudmr-ux` when building screens without this store.
+ */
+export function ROITable(props) {
+    var pipeline = useAppSelector(function (s) { var _a; return (_a = s.result.activeJob) === null || _a === void 0 ? void 0 : _a.pipeline_id; });
     var dispatch = useAppDispatch();
-    var roiColumns = [
-        {
-            headerName: "ROI Label",
-            field: "alias",
-            flex: 1,
-            editable: true,
-            valueSetter: function (params) {
-                var value = params.value;
-                // console.log(params);
-                var newAlias = params.value; // Value entered by the user
-                // console.log(newAlias);
-                if (newAlias != params.row.alias) {
-                    props.setLabelAlias(params.row.label, newAlias);
-                }
-                return params.row;
-            }
-        },
-        {
-            headerName: "Color",
-            field: "color",
-            flex: 0.5,
-            sortable: false,
-            // renderHeader: (params: any) => {
-            //     return (
-            //         <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            //             {params.colDef.headerName}
-            //         </Box>
-            //     );
-            // },
-            renderCell: function (params) {
-                return (_jsx(Box, __assign({ sx: {
-                        width: "100%",
-                        display: "flex",
-                        justifyContent: "center"
-                    } }, { children: _jsx("div", { style: {
-                            width: "14pt",
-                            height: "14pt",
-                            borderRadius: "3pt",
-                            background: "".concat(params.row.color)
-                        } }) })));
+    return (_jsx(NiivueRoiTable, __assign({}, props, { onAfterRoiUpload: function () {
+            var p = pipeline !== null && pipeline !== void 0 ? pipeline : props.pipelineID;
+            if (p) {
+                void dispatch(getPipelineROI({ pipeline: p }));
             }
-        },
-        {
-            headerName: "Mean",
-            field: "mu",
-            flex: 1,
-            renderCell: function (params) {
-                return _jsx("div", { children: "".concat(params.row.mu.toFixed(3)) });
-            }
-        },
-        {
-            headerName: "SD",
-            field: "std",
-            flex: 1,
-            renderCell: function (params) {
-                return _jsx("div", { children: "".concat(params.row.std.toFixed(3)) });
-            }
-        },
-        {
-            headerName: "Visibility",
-            field: "visibility",
-            flex: 1,
-            sortable: false,
-            // renderHeader: (params: any) => {
-            //     return (
-            //         <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            //             {params.colDef.headerName}
-            //         </Box>
-            //     );
-            // },
-            renderCell: function (params) {
-                return (_jsx(Box, __assign({ sx: {
-                        width: "100%",
-                        display: "flex",
-                        justifyContent: "center"
-                    } }, { children: _jsx(IconButton, __assign({ onClick: function (event) {
-                            props.nv.setLabelVisibility(Number(params.row.label), !props.nv.getLabelVisibility(Number(params.row.label)));
-                            props.resampleImage();
-                            props.nv.drawScene();
-                            event.stopPropagation();
-                        } }, { children: params.row.visibility ? (_jsx(VisibilityIcon, { sx: { color: "#aaa" } })) : (_jsx(VisibilityOffIcon, { sx: { color: "#aaa" } })) })) })));
-            }
-        },
-        {
-            headerName: "Voxel Count",
-            field: "count",
-            flex: 1.5
-        },
-    ];
-    var _c = useState(false), warningVisible = _c[0], setWarningVisible = _c[1];
-    var _d = useState(""), warningMessage = _d[0], setWarningMessage = _d[1];
-    var warnEmptySelection = function (message) {
-        setWarningMessage(message);
-        setWarningVisible(true);
-    };
-    var selectedNums = selectedData.map(function (v) { return Number(v); });
-    var uniqueSelected = new Set(selectedNums);
-    var canGroupSelection = selectedNums.length >= 2 && uniqueSelected.size >= 2;
-    var groupButtonDisabled = selectedData.length > 0 && !canGroupSelection;
-    var groupTooltip = selectedData.length === 0
-        ? "Group selected ROIs"
-        : uniqueSelected.size < 2 || selectedNums.length < 2
-            ? "Select at least two different ROIs to group"
-            : "Group selected ROIs";
-    return (_jsxs(Box, __assign({ style: props.style }, { children: [_jsx(CmrTable
-            // sx={{
-            //     borderBottomLeftRadius: 0,
-            //     borderBottomRightRadius: 0,
-            //     marginBottom: 0,
-            //     paddingBottom: 0,
-            // }}
-            , { 
-                // sx={{
-                //     borderBottomLeftRadius: 0,
-                //     borderBottomRightRadius: 0,
-                //     marginBottom: 0,
-                //     paddingBottom: 0,
-                // }}
-                hideFooter: true, getRowId: function (row) { return row.label; }, style: { height: "70%" }, dataSource: props.rois, columns: roiColumns, columnHeaderHeight: 40, rowSelectionModel: selectedData, onRowSelectionModelChange: function (rowSelectionModel) {
-                    setSelectedData(rowSelectionModel);
-                } }), _jsxs(Box, __assign({ sx: {
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    alignItems: "center",
-                    flexWrap: "wrap",
-                    gap: 2,
-                    mt: 0,
-                    px: 2,
-                    py: 1,
-                    backgroundColor: "#f8f9fa",
-                    border: "1px solid rgba(0, 0, 0, 0.12)",
-                    borderTop: "none",
-                    borderRadius: "0 0 4px 4px"
-                } }, { children: [_jsx(Tooltip, __assign({ title: groupTooltip }, { children: _jsx("span", { children: _jsx(IconButton, __assign({ disabled: groupButtonDisabled, sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
-                                    if (selectedData.length === 0) {
-                                        warnEmptySelection("Please select an ROI to group");
-                                        return;
-                                    }
-                                    if (!canGroupSelection) {
-                                        warnEmptySelection("Please select at least two different ROIs to group");
-                                        return;
-                                    }
-                                    if (typeof props.nv.groupLabelsFromSelection === "function") {
-                                        props.nv.groupLabelsFromSelection(selectedNums, GROUP_TARGET_LABEL);
-                                    }
-                                    else {
-                                        props.nv.groupLabelsInto(selectedNums, GROUP_TARGET_LABEL);
-                                    }
-                                    props.nv.drawScene();
-                                    props.resampleImage();
-                                } }, { children: _jsx(WpIcon, { icon: wpGroup, size: ROI_TOOLBAR_ICON_SIZE_PX, fill: "currentColor" }) })) }) })), _jsx(Tooltip, __assign({ title: "Ungroup" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
-                                props.nv.ungroup();
-                                props.nv.drawScene();
-                                props.resampleImage();
-                            } }, { children: _jsx(WpIcon, { icon: wpUngroup, size: 16, fill: "currentColor" }) })) })), _jsx(Tooltip, __assign({ title: "Download" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                                var fileName, selectedLabels, _i, selectedData_1, label;
-                                return __generator(this, function (_a) {
-                                    switch (_a.label) {
-                                        case 0:
-                                            fileName = "label";
-                                            selectedLabels = [];
-                                            for (_i = 0, selectedData_1 = selectedData; _i < selectedData_1.length; _i++) {
-                                                label = selectedData_1[_i];
-                                                fileName += label;
-                                                selectedLabels.push(Number(label));
-                                            }
-                                            fileName += ".nii";
-                                            if (selectedLabels.length == 0) {
-                                                warnEmptySelection("No ROI selected for download");
-                                                return [2 /*return*/];
-                                            }
-                                            return [4 /*yield*/, props.nv.saveImageByLabels(fileName, selectedLabels)];
-                                        case 1:
-                                            _a.sent();
-                                            return [2 /*return*/];
-                                    }
-                                });
-                            }); } }, { children: _jsx(GetAppIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(Tooltip, __assign({ title: "Delete" }, { children: _jsx(IconButton, __assign({ sx: ROI_TOOLBAR_ICON_BUTTON_SX, onClick: function () {
-                                props.nv.deleteDrawingByLabel(selectedData.map(function (value) { return Number(value); }));
-                                props.resampleImage();
-                                props.nv.drawScene();
-                            } }, { children: _jsx(DeleteIcon, { sx: ROI_TOOLBAR_MUI_ICON_SX }) })) })), _jsx(CMRUpload, { changeNameAfterUpload: false, color: "primary", onUploaded: function (res, file) { }, uploadHandler: function (file) { return __awaiter(void 0, void 0, void 0, function () {
-                            var filename, response;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        console.log(props);
-                                        filename = file.name;
-                                        filename.split(".").pop();
-                                        return [4 /*yield*/, AuthenticatedHttpClient.post(endpoints.ROI_UPLOAD, {
-                                                filename: filename,
-                                                pipeline_id: props.pipelineID,
-                                                type: "image",
-                                                contentType: "application/octet-stream"
-                                            })];
-                                    case 1:
-                                        response = _a.sent();
-                                        console.log(response);
-                                        return [4 /*yield*/, props
-                                                .zipAndSendROI(response.data.upload_url, filename, file)
-                                                .then(function () { return __awaiter(void 0, void 0, void 0, function () {
-                                                return __generator(this, function (_a) {
-                                                    switch (_a.label) {
-                                                        case 0: return [4 /*yield*/, props.unpackROI(response.data.access_url)];
-                                                        case 1:
-                                                            _a.sent();
-                                                            // @ts-ignore
-                                                            dispatch(getPipelineROI({ pipeline: pipeline }));
-                                                            return [2 /*return*/];
-                                                    }
-                                                });
-                                            }); })];
-                                    case 2:
-                                        _a.sent();
-                                        return [2 /*return*/, 200];
-                                }
-                            });
-                        }); }, 
-                        // createPayload={createPayload}
-                        maxCount: 1 }, uploadKey)] })), _jsx(CmrConfirmation, { name: "Warning", message: warningMessage, color: "error", width: 400, open: warningVisible, setOpen: function (open) { return setWarningVisible(open); }, confirmText: "OK" })] })));
-};
+        } })));
+}

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export { resampleNiivueRoiHistogram, getDefaultRoiHistogramLayout, } from "./Cmr
 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";
+export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
+export type { NiivueRoiTableProps } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
 import type { FC } from "react";
 import type { CmrTableProps } from "./CmrTable/CmrTable";
 export declare const CmrTable: FC<CmrTableProps>;

package/dist/index.js

@@ -28,6 +28,7 @@ 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";
+export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
 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.4",
+  "version": "4.3.6",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",