cloudmr-ux 4.3.6 → 4.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/CmrTable/CmrTable.css +31 -7
  2. package/dist/CmrTable/CmrTable.d.ts +19 -0
  3. package/dist/CmrTable/CmrTable.js +39 -26
  4. package/dist/core/features/rois/resultSlice.js +3 -3
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +2 -1
  7. package/package.json +1 -1
package/dist/CmrTable/CmrTable.css CHANGED
@@ -6,18 +6,42 @@
6
6
  margin-bottom: 0;
7
7
  } */
8
8
 
9
- .MuiDataGrid-columnHeaders{
10
- background: #F3E5F5;
11
- color: #333;
9
+ /**
10
+ * CmrTable root — colors are driven by CSS variables set on `.cmr-table` from props.
11
+ * Defaults preserve the package purple accent (#580f8b). Host apps can override per instance
12
+ * via `headerIconColor` / `checkboxCheckedColor` / `checkboxUncheckedColor`, or by setting
13
+ * variables on a parent: `--cmr-table-header-icon`, etc.
14
+ */
15
+ .cmr-table {
16
+ /* Fallbacks = package defaults */
17
+ --cmr-table-header-bg: #f3e5f5;
18
+ --cmr-table-header-text: #333;
19
+ --cmr-table-header-icon: #580f8b;
20
+ --cmr-table-checkbox-unchecked: rgba(88, 15, 139, 0.54);
21
+ --cmr-table-checkbox-checked: #580f8b;
22
+ }
23
+
24
+ .cmr-table .MuiDataGrid-columnHeaders {
25
+ background: var(--cmr-table-header-bg);
26
+ color: var(--cmr-table-header-text);
12
27
  font-weight: bold;
13
28
  }
14
29
 
15
- .MuiDataGrid-columnHeaders .MuiSvgIcon-root {
16
- color: #580f8b !important;
30
+ .cmr-table .MuiDataGrid-columnHeaders .MuiSvgIcon-root {
31
+ color: var(--cmr-table-header-icon) !important;
32
+ }
33
+
34
+ .cmr-table .MuiCheckbox-root {
35
+ color: var(--cmr-table-checkbox-unchecked);
36
+ }
37
+
38
+ .cmr-table .MuiCheckbox-root.Mui-checked,
39
+ .cmr-table .MuiCheckbox-root.MuiCheckbox-indeterminate {
40
+ color: var(--cmr-table-checkbox-checked) !important;
17
41
  }
18
42
 
19
- /* // Religning MUI checkbox in the header */
20
- .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
43
+ /* Religning MUI checkbox in the header */
44
+ .cmr-table .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainerContent {
21
45
  padding: 0 !important;
22
46
  margin: 0 !important;
23
47
  display: flex;
package/dist/CmrTable/CmrTable.d.ts CHANGED
@@ -2,15 +2,34 @@ import React from 'react';
2
2
  import './CmrTable.css';
3
3
  import { DataGridProps } from '@mui/x-data-grid';
4
4
  import { CSSProperties } from 'react';
5
+ /** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
6
+ export declare const CMR_TABLE_DEFAULT_HEADER_ICON = "#580f8b";
5
7
  export interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
6
8
  dataSource: any[];
7
9
  idAlias?: string;
8
10
  name?: string;
9
11
  style?: CSSProperties;
10
12
  showCheckbox?: boolean;
13
+ /** Column header background. @default `#F3E5F5` */
11
14
  headerBgColor?: string;
15
+ /** Column header text color. @default `#333` */
12
16
  headerTextColor?: string;
17
+ /**
18
+ * Sort icons, menu icons, and header “select all” checkbox accent.
19
+ * Also the default for {@link checkboxCheckedColor} when that prop is omitted.
20
+ * @default `#580f8b`
21
+ */
13
22
  headerIconColor?: string;
23
+ /**
24
+ * Row / header checkbox color when checked or indeterminate.
25
+ * @default same as `headerIconColor` (`#580f8b` when defaults apply)
26
+ */
27
+ checkboxCheckedColor?: string;
28
+ /**
29
+ * Row / header checkbox color when unchecked (non-checked outline state).
30
+ * @default `rgba(88, 15, 139, 0.54)` (pairs with default purple accent)
31
+ */
32
+ checkboxUncheckedColor?: string;
14
33
  /**
15
34
  * Optional function to customize how rows are filtered/sorted before display.
16
35
  * Receives the mapped rows; return a new array in the desired order.
package/dist/CmrTable/CmrTable.js CHANGED
@@ -32,6 +32,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
32
32
  import { jsx as _jsx } from "react/jsx-runtime";
33
33
  import './CmrTable.css';
34
34
  import { DataGrid } from '@mui/x-data-grid';
35
+ /** Default header icon / selection accent (purple). Exposed for host apps that want the package default explicitly. */
36
+ export var CMR_TABLE_DEFAULT_HEADER_ICON = '#580f8b';
37
+ var DEFAULT_HEADER_BG = '#F3E5F5';
38
+ var DEFAULT_HEADER_TEXT = '#333';
39
+ /** Unchecked row/header checkbox tint that pairs with {@link CMR_TABLE_DEFAULT_HEADER_ICON}. */
40
+ var DEFAULT_CHECKBOX_UNCHECKED = 'rgba(88, 15, 139, 0.54)';
35
41
  /** Extracts a comparable timestamp from a row for sorting. Supports createdAt, created_at, or similar date fields. */
36
42
  function getSubmittedTimestamp(row) {
37
43
  var _a, _b, _c;
@@ -46,38 +52,45 @@ function defaultSortByRecent(rows) {
46
52
  return __spreadArray([], rows, true).sort(function (a, b) { return getSubmittedTimestamp(b) - getSubmittedTimestamp(a); });
47
53
  }
48
54
  var CmrTable = function (props) {
49
- 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"]);
55
+ var _a;
56
+ 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"]);
57
+ var resolvedCheckboxChecked = checkboxCheckedColor !== null && checkboxCheckedColor !== void 0 ? checkboxCheckedColor : headerIconColor;
58
+ var resolvedCheckboxUnchecked = checkboxUncheckedColor !== null && checkboxUncheckedColor !== void 0 ? checkboxUncheckedColor : DEFAULT_CHECKBOX_UNCHECKED;
59
+ 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));
60
+ var tableClassName = ['cmr-table', className].filter(Boolean).join(' ');
50
61
  var mappedRows = dataSource
51
62
  ? dataSource.map(function (row) { return (__assign({ id: idAlias ? row[idAlias] : row['id'] }, row)); })
52
63
  : [];
53
64
  var displayRows = processRows ? processRows(mappedRows) : defaultSortByRecent(mappedRows);
54
- 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: {
65
+ var baseSx = {
66
+ '& .MuiDataGrid-columnHeaders': {
67
+ backgroundColor: headerBgColor,
68
+ color: headerTextColor
69
+ },
70
+ '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
71
+ color: "".concat(headerIconColor, " !important")
72
+ },
73
+ '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
74
+ color: "".concat(headerIconColor, " !important")
75
+ },
76
+ '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
77
+ color: "".concat(headerIconColor, " !important")
78
+ },
79
+ '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
80
+ color: "".concat(headerIconColor, " !important")
81
+ },
82
+ '& .MuiDataGrid-columnHeaderTitle': {
83
+ fontWeight: 'bold'
84
+ }
85
+ };
86
+ var mergedSx = userSx == null
87
+ ? baseSx
88
+ : Array.isArray(userSx)
89
+ ? __spreadArray([baseSx], userSx, true) : [baseSx, userSx];
90
+ return (_jsx("div", __assign({ style: wrapperStyle, className: tableClassName }, { children: _jsx(DataGrid, __assign({ rows: displayRows, columns: columns, checkboxSelection: showCheckbox, onRowSelectionModelChange: onRowSelectionModelChange, initialState: {
55
91
  pagination: {
56
92
  paginationModel: { pageSize: 50, page: 0 }
57
93
  }
58
- }, sx: {
59
- '& .MuiDataGrid-columnHeaders': {
60
- backgroundColor: headerBgColor,
61
- color: headerTextColor
62
- },
63
- // '& .MuiDataGrid-columnHeaders .MuiSvgIcon-root': {
64
- // color: headerIconColor,
65
- // },
66
- '&& .MuiDataGrid-columnHeader .MuiSvgIcon-root': {
67
- color: "".concat(headerIconColor, " !important")
68
- },
69
- '&& .MuiDataGrid-columnHeader .MuiDataGrid-sortIcon': {
70
- color: "".concat(headerIconColor, " !important")
71
- },
72
- '&& .MuiDataGrid-columnHeader .MuiDataGrid-menuIconButton .MuiSvgIcon-root': {
73
- color: "".concat(headerIconColor, " !important")
74
- },
75
- '&& .MuiDataGrid-columnHeader .MuiDataGrid-iconButtonContainer .MuiSvgIcon-root': {
76
- color: "".concat(headerIconColor, " !important")
77
- },
78
- '& .MuiDataGrid-columnHeaderTitle': {
79
- fontWeight: 'bold'
80
- }
81
- }, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
94
+ }, sx: mergedSx, localeText: { noRowsLabel: 'No Rows' } }, rest)) })));
82
95
  };
83
96
  export default CmrTable;
package/dist/core/features/rois/resultSlice.js CHANGED
@@ -43,7 +43,7 @@ export var resultSlice = createSlice({
43
43
  state.resultLoading = action.meta.jobId;
44
44
  }),
45
45
  builder.addCase(loadResult.fulfilled, function (state, action) {
46
- var _a;
46
+ var _a, _b, _c, _d, _e;
47
47
  // console.log(action.payload);
48
48
  state.activeJob = action.payload.job;
49
49
  //@ts-ignore
@@ -52,9 +52,9 @@ export var resultSlice = createSlice({
52
52
  state.activeJob.setup.task = action.payload.result.headers.options;
53
53
  //@ts-ignore
54
54
  state.activeJob.logs =
55
- action.payload.result.log || action.payload.result.headers.log;
55
+ (_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;
56
56
  //@ts-ignore
57
- state.activeJob.slices = (_a = action.payload.result.info) === null || _a === void 0 ? void 0 : _a.slices;
57
+ state.activeJob.slices = (_e = action.payload.result.info) === null || _e === void 0 ? void 0 : _e.slices;
58
58
  //@ts-ignore
59
59
  state.niis[state.activeJob.pipeline_id] = action.payload.niis;
60
60
  state.selectedVolume = 1;
package/dist/index.d.ts CHANGED
@@ -35,6 +35,8 @@ export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents
35
35
  export type { NiivueRoiTableProps } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
36
36
  import type { FC } from "react";
37
37
  import type { CmrTableProps } from "./CmrTable/CmrTable";
38
+ import { CMR_TABLE_DEFAULT_HEADER_ICON } from "./CmrTable/CmrTable";
38
39
  export declare const CmrTable: FC<CmrTableProps>;
39
40
  export type { CmrTableProps };
41
+ export { CMR_TABLE_DEFAULT_HEADER_ICON };
40
42
  export * from "./core";
package/dist/index.js CHANGED
@@ -29,6 +29,7 @@ export { resampleNiivueRoiHistogram, getDefaultRoiHistogramLayout, } from "./Cmr
29
29
  export { NiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/NiivueRoiHistogram";
30
30
  export { useNiivueRoiHistogram } from "./CmrComponents/niivue-roi-histogram/useNiivueRoiHistogram";
31
31
  export { NiivueRoiTable, DEFAULT_ROI_GROUP_TARGET_LABEL, } from "./CmrComponents/niivue-roi-table/NiivueRoiTable";
32
- import CmrTableComponent from "./CmrTable/CmrTable";
32
+ import CmrTableComponent, { CMR_TABLE_DEFAULT_HEADER_ICON } from "./CmrTable/CmrTable";
33
33
  export var CmrTable = CmrTableComponent;
34
+ export { CMR_TABLE_DEFAULT_HEADER_ICON };
34
35
  export * from "./core";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cloudmr-ux",
3
- "version": "4.3.6",
3
+ "version": "4.3.7",
4
4
  "author": "erosmontin@gmail.com",
5
5
  "license": "MIT",
6
6
  "repository": "erosmontin/cloudmr-ux",