From c666767ec95b15114c4091a248a7506a88678409 Mon Sep 17 00:00:00 2001 From: Marius Conjeaud Date: Tue, 14 May 2024 17:43:31 +0200 Subject: [PATCH 1/2] Migrate DataGrid to 7.x #850 ; Initial changes --- package.json | 2 +- src/chart/table/TableChart.tsx | 17 +++----- yarn.lock | 79 ++++++++++++++++++++++++++++++---- 3 files changed, 76 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index c3886272b..8db254534 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@dnd-kit/sortable": "^7.0.2", "@mui/material": "^5.12.3", "@mui/styles": "^5.12.3", - "@mui/x-data-grid": "5.17.26", + "@mui/x-data-grid": "7.4.0", "@mui/x-date-pickers": "^5.0.17", "@neo4j-cypher/react-codemirror": "^1.0.3", "@neo4j-ndl/base": "1.10.3", diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx index d64633056..223b625c8 100644 --- a/src/chart/table/TableChart.tsx +++ b/src/chart/table/TableChart.tsx @@ -92,7 +92,6 @@ export const NeoTableChart = (props: ChartProps) => { const useStyles = generateClassDefinitionsBasedOnRules(styleRules); const classes = useStyles(); const tableRowHeight = compact ? TABLE_ROW_HEIGHT / 2 : TABLE_ROW_HEIGHT; - const pageSizeReducer = compact ? 3 : 1; const columnWidthsType = props.settings && props.settings.columnWidthsType ? props.settings.columnWidthsType : 'Relative (%)'; @@ -209,15 +208,10 @@ export const NeoTableChart = (props: ChartProps) => { ); }); - const availableRowHeight = (props.dimensions.height - TABLE_HEADER_HEIGHT - TABLE_FOOTER_HEIGHT) / tableRowHeight; - const tablePageSize = compact - ? Math.round(availableRowHeight) - pageSizeReducer - : Math.floor(availableRowHeight) - pageSizeReducer; - const pageNames = getPageNumbersAndNamesList(); const commonGridProps = { key: 'tableKey', - headerHeight: 32, + columnHeaderHeight: 32, density: compact ? 'compact' : 'standard', rows: rows, columns: columns, @@ -234,11 +228,10 @@ export const NeoTableChart = (props: ChartProps) => { } }, checkboxSelection: hasCheckboxes(actionsRules), - selectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter), - onSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter), - pageSize: tablePageSize > 0 ? tablePageSize : 5, - rowsPerPageOptions: rows.length < 5 ? [rows.length, 5] : [5], - disableSelectionOnClick: true, + rowSelectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter), + onRowSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter), + autoPageSize: true, + disableRowSelectionOnClick: true, components: { ColumnSortedDescendingIcon: () => <>, ColumnSortedAscendingIcon: () => <>, diff --git a/yarn.lock b/yarn.lock index d40d1a106..849a1db2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1313,6 +1313,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.24.0": + version "7.24.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c" + integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.18.10", "@babel/template@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -2444,6 +2451,15 @@ "@mui/utils" "^5.15.11" prop-types "^15.8.1" +"@mui/private-theming@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.14.tgz#edd9a82948ed01586a01c842eb89f0e3f68970ee" + integrity sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/utils" "^5.15.14" + prop-types "^15.8.1" + "@mui/styled-engine@^5.15.11": version "5.15.11" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.11.tgz#040181f31910e0f66d43a5c44fe89da06b34212b" @@ -2454,6 +2470,16 @@ csstype "^3.1.3" prop-types "^15.8.1" +"@mui/styled-engine@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.14.tgz#168b154c4327fa4ccc1933a498331d53f61c0de2" + integrity sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw== + dependencies: + "@babel/runtime" "^7.23.9" + "@emotion/cache" "^11.11.0" + csstype "^3.1.3" + prop-types "^15.8.1" + "@mui/styles@^5.12.3": version "5.15.11" resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.11.tgz#2fc57a42eff47542924e1ba90fb188b733d295aa" @@ -2491,11 +2517,30 @@ csstype "^3.1.3" prop-types "^15.8.1" +"@mui/system@^5.15.14": + version "5.15.15" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.15.tgz#658771b200ce3c4a0f28e58169f02e5e718d1c53" + integrity sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/private-theming" "^5.15.14" + "@mui/styled-engine" "^5.15.14" + "@mui/types" "^7.2.14" + "@mui/utils" "^5.15.14" + clsx "^2.1.0" + csstype "^3.1.3" + prop-types "^15.8.1" + "@mui/types@^7.2.13": version "7.2.13" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8" integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g== +"@mui/types@^7.2.14": + version "7.2.14" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.14.tgz#8a02ac129b70f3d82f2f9b76ded2c8d48e3fc8c9" + integrity sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ== + "@mui/utils@^5.10.3": version "5.11.9" resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.9.tgz#8fab9cf773c63ad916597921860d2344b5d4b706" @@ -2517,16 +2562,27 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-data-grid@5.17.26": - version "5.17.26" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-5.17.26.tgz#1f7fa73dd3986cf052e2fd2cb56eb4678a7bd913" - integrity sha512-eGJq9J0g9cDGLFfMmugOadZx0mJeOd/yQpHwEa5gUXyONS6qF0OhXSWyDOhDdA3l2TOoQzotMN5dY/T4Wl1KYA== +"@mui/utils@^5.15.14": + version "5.15.14" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.14.tgz#e414d7efd5db00bfdc875273a40c0a89112ade3a" + integrity sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA== dependencies: - "@babel/runtime" "^7.18.9" - "@mui/utils" "^5.10.3" - clsx "^1.2.1" + "@babel/runtime" "^7.23.9" + "@types/prop-types" "^15.7.11" prop-types "^15.8.1" - reselect "^4.1.6" + react-is "^18.2.0" + +"@mui/x-data-grid@7.4.0": + version "7.4.0" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-7.4.0.tgz#1901f2908aca760146ccae74b064fc15462bcf63" + integrity sha512-ILu0AVqqHQf4wN/nblsJ/k7PkvlB115vQ/FEiYk7neZlc/kOJOUyst3MWMVClAecZ8+JEs476q40xd4r1CtMfw== + dependencies: + "@babel/runtime" "^7.24.0" + "@mui/system" "^5.15.14" + "@mui/utils" "^5.15.14" + clsx "^2.1.1" + prop-types "^15.8.1" + reselect "^4.1.8" "@mui/x-date-pickers@^5.0.17": version "5.0.19" @@ -5974,6 +6030,11 @@ clsx@^2.1.0: resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb" integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg== +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -12160,7 +12221,7 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== -reselect@^4.1.6, reselect@^4.1.8: +reselect@^4.1.8: version "4.1.8" resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524" integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== From 52064e238ed2503f96d71be8ba68c812babb842a Mon Sep 17 00:00:00 2001 From: Marius Conjeaud Date: Wed, 15 May 2024 14:49:54 +0200 Subject: [PATCH 2/2] Fix compact x wrapping --- src/chart/table/TableActionsHelper.ts | 11 ++++++----- src/chart/table/TableChart.tsx | 15 ++++++--------- src/index.pcss | 5 +++++ 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/chart/table/TableActionsHelper.ts b/src/chart/table/TableActionsHelper.ts index 7b946df2e..1dc3a4508 100644 --- a/src/chart/table/TableActionsHelper.ts +++ b/src/chart/table/TableActionsHelper.ts @@ -15,17 +15,17 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => { // If the parameter is an array (to be expected), iterate over it to find the rows to check. if (Array.isArray(values)) { values.forEach((value) => { - rows.forEach((row, index) => { + rows.forEach((row) => { if (row[fieldName] == value) { - selection.push(index); + selection.push(row.id); } }); }); } else { // Else (special case), still check the row if it's a single value parameter. - rows.forEach((row, index) => { + rows.forEach((row) => { if (row[fieldName] == values) { - selection.push(index); + selection.push(row.id); } }); } @@ -35,7 +35,8 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => { export const updateCheckBoxes = (actionsRules, rows, selection, setGlobalParameter) => { if (hasCheckboxes(actionsRules)) { - const selectedRows = rows.filter((_, i) => selection.includes(i)); + const selectedRows = rows.filter((row) => selection.includes(row.id)); + console.log(selectedRows); let rules = actionsRules.filter((rule) => rule.condition && rule.condition == 'rowCheck'); rules.forEach((rule) => { const parameterValues = selectedRows.map((row) => row[rule.value]).filter((v) => v !== undefined); diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx index 223b625c8..8bfac0c6c 100644 --- a/src/chart/table/TableChart.tsx +++ b/src/chart/table/TableChart.tsx @@ -24,8 +24,6 @@ import Button from '@mui/material/Button'; import { extensionEnabled } from '../../utils/ReportUtils'; import { getCheckboxes, hasCheckboxes, updateCheckBoxes } from './TableActionsHelper'; -const TABLE_HEADER_HEIGHT = 32; -const TABLE_FOOTER_HEIGHT = 62; const TABLE_ROW_HEIGHT = 52; const HIDDEN_COLUMN_PREFIX = '__'; const theme = createTheme({ @@ -209,10 +207,13 @@ export const NeoTableChart = (props: ChartProps) => { }); const pageNames = getPageNumbersAndNamesList(); + const customStyles = { '&.MuiDataGrid-root .MuiDataGrid-footerContainer > div': { marginTop: '0px' } }; + const commonGridProps = { key: 'tableKey', columnHeaderHeight: 32, - density: compact ? 'compact' : 'standard', + rowHeight: tableRowHeight, + autoPageSize: true, rows: rows, columns: columns, columnVisibilityModel: columnVisibilityModel, @@ -230,7 +231,6 @@ export const NeoTableChart = (props: ChartProps) => { checkboxSelection: hasCheckboxes(actionsRules), rowSelectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter), onRowSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter), - autoPageSize: true, disableRowSelectionOnClick: true, components: { ColumnSortedDescendingIcon: () => <>, @@ -301,15 +301,12 @@ export const NeoTableChart = (props: ChartProps) => { {...commonGridProps} getRowHeight={() => 'auto'} sx={{ - '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' }, - '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' }, - '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' }, - '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' }, + ...customStyles, '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' }, }} /> ) : ( - + )} diff --git a/src/index.pcss b/src/index.pcss index f1bd03ad2..ecb10a406 100644 --- a/src/index.pcss +++ b/src/index.pcss @@ -74,6 +74,11 @@ @apply n-ml-token-3; } + /* DataGrid overrides */ + .MuiDataGrid-footerContainer > div { + @apply n-mt-0; + } + /* Make bullet list points in Markdown card view */ .card-view ul { @apply n-list-disc n-ml-token-7;