cloudmr-ux 4.3.5 → 4.3.7

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/CmrTable/CmrTable.css

@@ -6,18 +6,42 @@
   margin-bottom: 0;
 } */
 
-.MuiDataGrid-columnHeaders{
-  background: #F3E5F5;
-  color: #333;
+/**
+ * CmrTable root — colors are driven by CSS variables set on `.cmr-table` from props.
+ * Defaults preserve the package purple accent (#580f8b). Host apps can override per instance
+ * via `headerIconColor` / `checkboxCheckedColor` / `checkboxUncheckedColor`, or by setting
+ * variables on a parent: `--cmr-table-header-icon`, etc.
+ */
+.cmr-table {
+  /* Fallbacks = package defaults */
+  --cmr-table-header-bg: #f3e5f5;
+  --cmr-table-header-text: #333;
+  --cmr-table-header-icon: #580f8b;
+  --cmr-table-checkbox-unchecked: rgba(88, 15, 139, 0.54);
+  --cmr-table-checkbox-checked: #580f8b;
+}
+
+.cmr-table .MuiDataGrid-columnHeaders {
+  background: var(--cmr-table-header-bg);
+  color: var(--cmr-table-header-text);
   font-weight: bold;
 }
 
-.MuiDataGrid-columnHeaders .MuiSvgIcon-root {
-  color: #580f8b !important;
+.cmr-table .MuiDataGrid-columnHeaders .MuiSvgIcon-root {
+  color: var(--cmr-table-header-icon) !important;
+}
+
+.cmr-table .MuiCheckbox-root {
+  color: var(--cmr-table-checkbox-unchecked);
+}
+
+.cmr-table .MuiCheckbox-root.Mui-checked,
+.cmr-table .MuiCheckbox-root.MuiCheckbox-indeterminate {
+  color: var(--cmr-table-checkbox-checked) !important;
 }
 
-/* // Religning MUI checkbox in the header */
-.MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
+/* Religning MUI checkbox in the header */
+.cmr-table .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
   padding: 0 !important;
   margin: 0 !important;
   display: flex;

package/dist/CmrTable/CmrTable.d.ts

@@ -2,15 +2,34 @@ import React from 'react';
 import './CmrTable.css';
 import { DataGridProps } from '@mui/x-data-grid';
 import { CSSProperties } from 'react';
+/** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
+export declare const CMR_TABLE_DEFAULT_HEADER_ICON = "#580f8b";
 export interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
     name?: string;
     style?: CSSProperties;
     showCheckbox?: boolean;
+    /** Column header background. @default `#F3E5F5` */
     headerBgColor?: string;
+    /** Column header text color. @default `#333` */
     headerTextColor?: string;
+    /**
+     * Sort icons, menu icons, and header “select all” checkbox accent.
+     * Also the default for {@link checkboxCheckedColor} when that prop is omitted.
+     * @default `#580f8b`
+     */
     headerIconColor?: string;
+    /**
+     * Row / header checkbox color when checked or indeterminate.
+     * @default same as `headerIconColor` (`#580f8b` when defaults apply)
+     */
+    checkboxCheckedColor?: string;
+    /**
+     * Row / header checkbox color when unchecked (non-checked outline state).
+     * @default `rgba(88, 15, 139, 0.54)` (pairs with default purple accent)
+     */
+    checkboxUncheckedColor?: string;
     /**
      * Optional function to customize how rows are filtered/sorted before display.
      * Receives the mapped rows; return a new array in the desired order.

package/dist/CmrTable/CmrTable.js

@@ -32,6 +32,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import './CmrTable.css';
 import { DataGrid } from '@mui/x-data-grid';
+/** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
+export var CMR_TABLE_DEFAULT_HEADER_ICON = '#580f8b';
+var DEFAULT_HEADER_BG = '#F3E5F5';
+var DEFAULT_HEADER_TEXT = '#333';
+/** Unchecked row/header checkbox tint that pairs with {@link CMR_TABLE_DEFAULT_HEADER_ICON}. */
+var DEFAULT_CHECKBOX_UNCHECKED = 'rgba(88, 15, 139, 0.54)';
 /** Extracts a comparable timestamp from a row for sorting. Supports createdAt, created_at, or similar date fields. */
 function getSubmittedTimestamp(row) {
     var _a, _b, _c;
@@ -46,38 +52,45 @@ function defaultSortByRecent(rows) {
     return __spreadArray([], rows, true).sort(function (a, b) { return getSubmittedTimestamp(b) - getSubmittedTimestamp(a); });
 }
 var CmrTable = function (props) {
-    var dataSource = props.dataSource, columns = props.columns, idAlias = props.idAlias, className = props.className, onRowSelectionModelChange = props.onRowSelectionModelChange, style = props.style, _a = props.showCheckbox, showCheckbox = _a === void 0 ? true : _a, _b = props.headerBgColor, headerBgColor = _b === void 0 ? '#F3E5F5' : _b, _c = props.headerTextColor, headerTextColor = _c === void 0 ? '#333' : _c, _d = props.headerIconColor, headerIconColor = _d === void 0 ? '#580f8b' : _d, processRows = props.processRows, rest = __rest(props, ["dataSource", "columns", "idAlias", "className", "onRowSelectionModelChange", "style", "showCheckbox", "headerBgColor", "headerTextColor", "headerIconColor", "processRows"]);
+    var _a;
+    var dataSource = props.dataSource, columns = props.columns, idAlias = props.idAlias, className = props.className, onRowSelectionModelChange = props.onRowSelectionModelChange, style = props.style, _b = props.showCheckbox, showCheckbox = _b === void 0 ? true : _b, _c = props.headerBgColor, headerBgColor = _c === void 0 ? DEFAULT_HEADER_BG : _c, _d = props.headerTextColor, headerTextColor = _d === void 0 ? DEFAULT_HEADER_TEXT : _d, _e = props.headerIconColor, headerIconColor = _e === void 0 ? CMR_TABLE_DEFAULT_HEADER_ICON : _e, checkboxCheckedColor = props.checkboxCheckedColor, checkboxUncheckedColor = props.checkboxUncheckedColor, processRows = props.processRows, userSx = props.sx, rest = __rest(props, ["dataSource", "columns", "idAlias", "className", "onRowSelectionModelChange", "style", "showCheckbox", "headerBgColor", "headerTextColor", "headerIconColor", "checkboxCheckedColor", "checkboxUncheckedColor", "processRows", "sx"]);
+    var resolvedCheckboxChecked = checkboxCheckedColor !== null && checkboxCheckedColor !== void 0 ? checkboxCheckedColor : headerIconColor;
+    var resolvedCheckboxUnchecked = checkboxUncheckedColor !== null && checkboxUncheckedColor !== void 0 ? checkboxUncheckedColor : DEFAULT_CHECKBOX_UNCHECKED;
+    var wrapperStyle = __assign(__assign({ height: '400px', width: '100%' }, (style !== null && style !== void 0 ? style : {})), (_a = {}, _a['--cmr-table-header-bg'] = headerBgColor, _a['--cmr-table-header-text'] = headerTextColor, _a['--cmr-table-header-icon'] = headerIconColor, _a['--cmr-table-checkbox-checked'] = resolvedCheckboxChecked, _a['--cmr-table-checkbox-unchecked'] = resolvedCheckboxUnchecked, _a));
+    var tableClassName = ['cmr-table', className].filter(Boolean).join(' ');
     var mappedRows = dataSource
         ? dataSource.map(function (row) { return (__assign({ id: idAlias ? row[idAlias] : row['id'] }, row)); })
         : [];
     var displayRows = processRows ? processRows(mappedRows) : defaultSortByRecent(mappedRows);
-    return (_jsx("div", __assign({ style: style !== null && style !== void 0 ? style : { height: '400px', width: '100%' }, className: className !== null && className !== void 0 ? className : '' }, { children: _jsx(DataGrid, __assign({ rows: displayRows, columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
+    var baseSx = {
+        '& .MuiDataGrid-columnHeaders': {
+            backgroundColor: headerBgColor,
+            color: headerTextColor
+        },
+        '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
+            color: "".concat(headerIconColor, " !important")
+        },
+        '& .MuiDataGrid-columnHeaderTitle': {
+            fontWeight: 'bold'
+        }
+    };
+    var mergedSx = userSx == null
+        ? baseSx
+        : Array.isArray(userSx)
+            ? __spreadArray([baseSx], userSx, true) : [baseSx, userSx];
+    return (_jsx("div", __assign({ style: wrapperStyle, className: tableClassName }, { children: _jsx(DataGrid, __assign({ rows: displayRows, columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
                 pagination: {
                     paginationModel: { pageSize: 50, page: 0 }
                 }
-            }, sx: {
-                '& .MuiDataGrid-columnHeaders': {
-                    backgroundColor: headerBgColor,
-                    color: headerTextColor
-                },
-                // '& .MuiDataGrid-columnHeaders .MuiSvgIcon-root': {
-                //   color: headerIconColor,
-                // },
-                '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
-                    color: "".concat(headerIconColor, " !important")
-                },
-                '& .MuiDataGrid-columnHeaderTitle': {
-                    fontWeight: 'bold'
-                }
-            }, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
+            }, sx: mergedSx, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
 };
 export default CmrTable;

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/core/features/rois/resultSlice.js

@@ -43,7 +43,7 @@ export var resultSlice = createSlice({
             state.resultLoading = action.meta.jobId;
         }),
         builder.addCase(loadResult.fulfilled, function (state, action) {
-            var _a;
+            var _a, _b, _c, _d, _e;
             // console.log(action.payload);
             state.activeJob = action.payload.job;
             //@ts-ignore
@@ -52,9 +52,9 @@ export var resultSlice = createSlice({
             state.activeJob.setup.task = action.payload.result.headers.options;
             //@ts-ignore
             state.activeJob.logs =
-                action.payload.result.log || action.payload.result.headers.log;
+                (_c = (_a = action.payload.result.log) !== null && _a !== void 0 ? _a : (_b = action.payload.result.headers) === null || _b === void 0 ? void 0 : _b.log) !== null && _c !== void 0 ? _c : (_d = action.payload.result.headers) === null || _d === void 0 ? void 0 : _d.logs;
             //@ts-ignore
-            state.activeJob.slices = (_a = action.payload.result.info) === null || _a === void 0 ? void 0 : _a.slices;
+            state.activeJob.slices = (_e = action.payload.result.info) === null || _e === void 0 ? void 0 : _e.slices;
             //@ts-ignore
             state.niis[state.activeJob.pipeline_id] = action.payload.niis;
             state.selectedVolume = 1;

package/dist/index.d.ts

@@ -31,8 +31,12 @@ 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";
+import { CMR_TABLE_DEFAULT_HEADER_ICON } from "./CmrTable/CmrTable";
 export declare const CmrTable: FC<CmrTableProps>;
 export type { CmrTableProps };
+export { CMR_TABLE_DEFAULT_HEADER_ICON };
 export * from "./core";

package/dist/index.js

@@ -28,6 +28,8 @@ export { DrawToolkit } from "./CmrComponents/draw-toolkit/DrawToolkit";
 export { resampleNiivueRoiHistogram, getDefaultRoiHistogramLayout, } from "./CmrComponents/niivue-roi-histogram/resampleNiivueRoiHistogram";
 export { NiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/NiivueRoiHistogram";
 export { useNiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram";
-import CmrTableComponent from "./CmrTable/CmrTable";
+export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
+import CmrTableComponent, { CMR_TABLE_DEFAULT_HEADER_ICON } from "./CmrTable/CmrTable";
 export var CmrTable = CmrTableComponent;
+export { CMR_TABLE_DEFAULT_HEADER_ICON };
 export * from "./core";

package/package.json

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