Skip to content

Commit aeb1cd0

Browse files
alfredorubin96alfredorubin96
authored
Merge pull request #894 from neo4j-labs/850-migrate-datagrid-to-7x
Migrate DataGrid to 7x
2 parents 69dd2a1 + f6cdac7 commit aeb1cd0

File tree

5 files changed

+92
-35
lines changed

5 files changed

+92
-35
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@dnd-kit/sortable": "^7.0.2",
4343
"@mui/material": "^5.12.3",
4444
"@mui/styles": "^5.12.3",
45-
"@mui/x-data-grid": "5.17.26",
45+
"@mui/x-data-grid": "7.4.0",
4646
"@mui/x-date-pickers": "^5.0.17",
4747
"@neo4j-cypher/react-codemirror": "^1.0.3",
4848
"@neo4j-ndl/base": "1.10.3",

‎src/chart/table/TableActionsHelper.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,17 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => {
1515
// If the parameter is an array (to be expected), iterate over it to find the rows to check.
1616
if (Array.isArray(values)) {
1717
values.forEach((value) => {
18-
rows.forEach((row, index) => {
18+
rows.forEach((row) => {
1919
if (row[fieldName] == value) {
20-
selection.push(index);
20+
selection.push(row.id);
2121
}
2222
});
2323
});
2424
} else {
2525
// Else (special case), still check the row if it's a single value parameter.
26-
rows.forEach((row, index) => {
26+
rows.forEach((row) => {
2727
if (row[fieldName] == values) {
28-
selection.push(index);
28+
selection.push(row.id);
2929
}
3030
});
3131
}
@@ -35,7 +35,8 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => {
3535

3636
export const updateCheckBoxes = (actionsRules, rows, selection, setGlobalParameter) => {
3737
if (hasCheckboxes(actionsRules)) {
38-
const selectedRows = rows.filter((_, i) => selection.includes(i));
38+
const selectedRows = rows.filter((row) => selection.includes(row.id));
39+
console.log(selectedRows);
3940
let rules = actionsRules.filter((rule) => rule.condition && rule.condition == 'rowCheck');
4041
rules.forEach((rule) => {
4142
const parameterValues = selectedRows.map((row) => row[rule.value]).filter((v) => v !== undefined);

‎src/chart/table/TableChart.tsx

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ import Button from '@mui/material/Button';
2525
import { extensionEnabled } from '../../utils/ReportUtils';
2626
import { getCheckboxes, hasCheckboxes, updateCheckBoxes } from './TableActionsHelper';
2727

28-
const TABLE_HEADER_HEIGHT = 32;
29-
const TABLE_FOOTER_HEIGHT = 62;
3028
const TABLE_ROW_HEIGHT = 52;
3129
const HIDDEN_COLUMN_PREFIX = '__';
3230
const theme = createTheme({
@@ -93,7 +91,6 @@ export const NeoTableChart = (props: ChartProps) => {
9391
const useStyles = generateClassDefinitionsBasedOnRules(styleRules);
9492
const classes = useStyles();
9593
const tableRowHeight = compact ? TABLE_ROW_HEIGHT / 2 : TABLE_ROW_HEIGHT;
96-
const pageSizeReducer = compact ? 3 : 1;
9794

9895
const columnWidthsType =
9996
props.settings && props.settings.columnWidthsType ? props.settings.columnWidthsType : 'Relative (%)';
@@ -210,16 +207,14 @@ export const NeoTableChart = (props: ChartProps) => {
210207
);
211208
});
212209

213-
const availableRowHeight = (props.dimensions.height - TABLE_HEADER_HEIGHT - TABLE_FOOTER_HEIGHT) / tableRowHeight;
214-
const tablePageSize = compact
215-
? Math.round(availableRowHeight) - pageSizeReducer
216-
: Math.floor(availableRowHeight) - pageSizeReducer;
217-
218210
const pageNames = getPageNumbersAndNamesList();
211+
const customStyles = { '&.MuiDataGrid-root .MuiDataGrid-footerContainer > div': { marginTop: '0px' } };
212+
219213
const commonGridProps = {
220214
key: 'tableKey',
221-
headerHeight: 32,
222-
density: compact ? 'compact' : 'standard',
215+
columnHeaderHeight: 32,
216+
rowHeight: tableRowHeight,
217+
autoPageSize: true,
223218
rows: rows,
224219
columns: columns,
225220
columnVisibilityModel: columnVisibilityModel,
@@ -235,11 +230,9 @@ export const NeoTableChart = (props: ChartProps) => {
235230
}
236231
},
237232
checkboxSelection: hasCheckboxes(actionsRules),
238-
selectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter),
239-
onSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter),
240-
pageSize: tablePageSize > 0 ? tablePageSize : 5,
241-
rowsPerPageOptions: rows.length < 5 ? [rows.length, 5] : [5],
242-
disableSelectionOnClick: true,
233+
rowSelectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter),
234+
onRowSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter),
235+
disableRowSelectionOnClick: true,
243236
components: {
244237
ColumnSortedDescendingIcon: () => <></>,
245238
ColumnSortedAscendingIcon: () => <></>,
@@ -322,15 +315,12 @@ export const NeoTableChart = (props: ChartProps) => {
322315
{...commonGridProps}
323316
getRowHeight={() => 'auto'}
324317
sx={{
325-
'&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
326-
'&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' },
327-
'&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
328-
'&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
318+
...customStyles,
329319
'&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
330320
}}
331321
/>
332322
) : (
333-
<DataGrid {...commonGridProps} rowHeight={tableRowHeight} />
323+
<DataGrid {...commonGridProps} sx={customStyles} />
334324
)}
335325
</div>
336326
</ThemeProvider>

‎src/index.pcss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,11 @@
7474
@apply n-ml-token-3;
7575
}
7676

77+
/* DataGrid overrides */
78+
.MuiDataGrid-footerContainer > div {
79+
@apply n-mt-0;
80+
}
81+
7782
/* Make bullet list points in Markdown card view */
7883
.card-view ul {
7984
@apply n-list-disc n-ml-token-7;

‎yarn.lock

Lines changed: 70 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1313,6 +1313,13 @@
13131313
dependencies:
13141314
regenerator-runtime "^0.14.0"
13151315

1316+
"@babel/runtime@^7.24.0":
1317+
version "7.24.5"
1318+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
1319+
integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
1320+
dependencies:
1321+
regenerator-runtime "^0.14.0"
1322+
13161323
"@babel/template@^7.18.10", "@babel/template@^7.20.7":
13171324
version "7.20.7"
13181325
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -2476,6 +2483,15 @@
24762483
"@mui/utils" "^5.15.11"
24772484
prop-types "^15.8.1"
24782485

2486+
"@mui/private-theming@^5.15.14":
2487+
version "5.15.14"
2488+
resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.14.tgz#edd9a82948ed01586a01c842eb89f0e3f68970ee"
2489+
integrity sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==
2490+
dependencies:
2491+
"@babel/runtime" "^7.23.9"
2492+
"@mui/utils" "^5.15.14"
2493+
prop-types "^15.8.1"
2494+
24792495
"@mui/styled-engine@^5.15.11":
24802496
version "5.15.11"
24812497
resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.11.tgz#040181f31910e0f66d43a5c44fe89da06b34212b"
@@ -2486,6 +2502,16 @@
24862502
csstype "^3.1.3"
24872503
prop-types "^15.8.1"
24882504

2505+
"@mui/styled-engine@^5.15.14":
2506+
version "5.15.14"
2507+
resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.14.tgz#168b154c4327fa4ccc1933a498331d53f61c0de2"
2508+
integrity sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==
2509+
dependencies:
2510+
"@babel/runtime" "^7.23.9"
2511+
"@emotion/cache" "^11.11.0"
2512+
csstype "^3.1.3"
2513+
prop-types "^15.8.1"
2514+
24892515
"@mui/styles@^5.12.3":
24902516
version "5.15.11"
24912517
resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.11.tgz#2fc57a42eff47542924e1ba90fb188b733d295aa"
@@ -2523,11 +2549,30 @@
25232549
csstype "^3.1.3"
25242550
prop-types "^15.8.1"
25252551

2552+
"@mui/system@^5.15.14":
2553+
version "5.15.15"
2554+
resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.15.tgz#658771b200ce3c4a0f28e58169f02e5e718d1c53"
2555+
integrity sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==
2556+
dependencies:
2557+
"@babel/runtime" "^7.23.9"
2558+
"@mui/private-theming" "^5.15.14"
2559+
"@mui/styled-engine" "^5.15.14"
2560+
"@mui/types" "^7.2.14"
2561+
"@mui/utils" "^5.15.14"
2562+
clsx "^2.1.0"
2563+
csstype "^3.1.3"
2564+
prop-types "^15.8.1"
2565+
25262566
"@mui/types@^7.2.13":
25272567
version "7.2.13"
25282568
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8"
25292569
integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==
25302570

2571+
"@mui/types@^7.2.14":
2572+
version "7.2.14"
2573+
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.14.tgz#8a02ac129b70f3d82f2f9b76ded2c8d48e3fc8c9"
2574+
integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==
2575+
25312576
"@mui/utils@^5.10.3":
25322577
version "5.11.9"
25332578
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.9.tgz#8fab9cf773c63ad916597921860d2344b5d4b706"
@@ -2549,16 +2594,27 @@
25492594
prop-types "^15.8.1"
25502595
react-is "^18.2.0"
25512596

2552-
"@mui/[email protected]":
2553-
version "5.17.26"
2554-
resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-5.17.26.tgz#1f7fa73dd3986cf052e2fd2cb56eb4678a7bd913"
2555-
integrity sha512-eGJq9J0g9cDGLFfMmugOadZx0mJeOd/yQpHwEa5gUXyONS6qF0OhXSWyDOhDdA3l2TOoQzotMN5dY/T4Wl1KYA==
2597+
"@mui/utils@^5.15.14":
2598+
version "5.15.14"
2599+
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.14.tgz#e414d7efd5db00bfdc875273a40c0a89112ade3a"
2600+
integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==
25562601
dependencies:
2557-
"@babel/runtime" "^7.18.9"
2558-
"@mui/utils" "^5.10.3"
2559-
clsx "^1.2.1"
2602+
"@babel/runtime" "^7.23.9"
2603+
"@types/prop-types" "^15.7.11"
25602604
prop-types "^15.8.1"
2561-
reselect "^4.1.6"
2605+
react-is "^18.2.0"
2606+
2607+
"@mui/[email protected]":
2608+
version "7.4.0"
2609+
resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-7.4.0.tgz#1901f2908aca760146ccae74b064fc15462bcf63"
2610+
integrity sha512-ILu0AVqqHQf4wN/nblsJ/k7PkvlB115vQ/FEiYk7neZlc/kOJOUyst3MWMVClAecZ8+JEs476q40xd4r1CtMfw==
2611+
dependencies:
2612+
"@babel/runtime" "^7.24.0"
2613+
"@mui/system" "^5.15.14"
2614+
"@mui/utils" "^5.15.14"
2615+
clsx "^2.1.1"
2616+
prop-types "^15.8.1"
2617+
reselect "^4.1.8"
25622618

25632619
"@mui/x-date-pickers@^5.0.17":
25642620
version "5.0.19"
@@ -5975,6 +6031,11 @@ clsx@^2.1.0:
59756031
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
59766032
integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
59776033

6034+
clsx@^2.1.1:
6035+
version "2.1.1"
6036+
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
6037+
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
6038+
59786039
color-convert@^1.9.0:
59796040
version "1.9.3"
59806041
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -12151,7 +12212,7 @@ requires-port@^1.0.0:
1215112212
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
1215212213
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
1215312214

12154-
reselect@^4.1.6, reselect@^4.1.8:
12215+
reselect@^4.1.8:
1215512216
version "4.1.8"
1215612217
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
1215712218
integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==

0 commit comments

Comments
 (0)