From d9956d151981ff2a01dc152df66e77c5cacdd22b Mon Sep 17 00:00:00 2001 From: BSd3v Date: Mon, 30 Sep 2024 13:06:17 -0400 Subject: [PATCH 01/13] bump to AG Grid version `32.2` --- package-lock.json | 104 ++++++++++++++++++++++++++++++---------------- package.json | 8 ++-- 2 files changed, 73 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 72741ee7..6890a369 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,21 @@ { "name": "dash-ag-grid", - "version": "31.2.1", + "version": "32.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "dash-ag-grid", - "version": "31.2.1", + "version": "32.2.0", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.7", "@mui/material": "^5.15.7", - "ag-grid-community": "31.2.1", - "ag-grid-enterprise": "31.2.1", - "ag-grid-react": "31.2.1", + "ag-grid-community": "32.2.0", + "ag-grid-enterprise": "32.2.0", + "ag-grid-react": "32.2.0", "d3-format": "^3.1.0", "d3-time": "^3.1.0", "d3-time-format": "^4.1.0", @@ -3414,30 +3414,47 @@ } }, "node_modules/ag-charts-community": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.2.0.tgz", - "integrity": "sha512-dS5nPExh81owIIdyHli0TvWvSyhmZy2RncM/s3/KXpjAf3eiVN2fxfT2z+QxqsLyoms+fernp5cAuSju0peYXw==" + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", + "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "dependencies": { + "ag-charts-locale": "10.2.0", + "ag-charts-types": "10.2.0" + } + }, + "node_modules/ag-charts-locale": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", + "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + }, + "node_modules/ag-charts-types": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", + "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" }, "node_modules/ag-grid-community": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz", - "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A==" + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", + "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "dependencies": { + "ag-charts-types": "10.2.0" + } }, "node_modules/ag-grid-enterprise": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.2.1.tgz", - "integrity": "sha512-gQLy+fHNwNC4AK0dF38TqCWdfQ2vaw4xoIpEMj1rEcp8xYpU3acX71np/DXNEIzM6gqB13qxT2L1p0zaah5pMw==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", + "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", "dependencies": { - "ag-charts-community": "9.2.0", - "ag-grid-community": "31.2.1" + "ag-charts-community": "10.2.0", + "ag-grid-community": "32.2.0" } }, "node_modules/ag-grid-react": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz", - "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", + "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", "dependencies": { - "ag-grid-community": "31.2.1", + "ag-grid-community": "32.2.0", "prop-types": "^15.8.1" }, "peerDependencies": { @@ -14698,30 +14715,47 @@ "requires": {} }, "ag-charts-community": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-9.2.0.tgz", - "integrity": "sha512-dS5nPExh81owIIdyHli0TvWvSyhmZy2RncM/s3/KXpjAf3eiVN2fxfT2z+QxqsLyoms+fernp5cAuSju0peYXw==" + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", + "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "requires": { + "ag-charts-locale": "10.2.0", + "ag-charts-types": "10.2.0" + } + }, + "ag-charts-locale": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", + "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + }, + "ag-charts-types": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", + "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" }, "ag-grid-community": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz", - "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A==" + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", + "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "requires": { + "ag-charts-types": "10.2.0" + } }, "ag-grid-enterprise": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-31.2.1.tgz", - "integrity": "sha512-gQLy+fHNwNC4AK0dF38TqCWdfQ2vaw4xoIpEMj1rEcp8xYpU3acX71np/DXNEIzM6gqB13qxT2L1p0zaah5pMw==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", + "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", "requires": { - "ag-charts-community": "9.2.0", - "ag-grid-community": "31.2.1" + "ag-charts-community": "10.2.0", + "ag-grid-community": "32.2.0" } }, "ag-grid-react": { - "version": "31.2.1", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz", - "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==", + "version": "32.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", + "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", "requires": { - "ag-grid-community": "31.2.1", + "ag-grid-community": "32.2.0", "prop-types": "^15.8.1" } }, diff --git a/package.json b/package.json index b3048127..200c8a83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dash-ag-grid", - "version": "31.2.0", + "version": "32.2.0", "description": "Dash wrapper around AG Grid, the best interactive data grid for the web.", "repository": { "type": "git", @@ -31,9 +31,9 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "ag-grid-community": "31.2.1", - "ag-grid-enterprise": "31.2.1", - "ag-grid-react": "31.2.1", + "ag-grid-community": "32.2.0", + "ag-grid-enterprise": "32.2.0", + "ag-grid-react": "32.2.0", "@mui/icons-material": "^5.15.7", "@mui/material": "^5.15.7", "d3-format": "^3.1.0", From 7797e0a78378d438c75581ffadfaa7f219e46a8a Mon Sep 17 00:00:00 2001 From: BSd3v Date: Mon, 30 Sep 2024 16:51:37 -0400 Subject: [PATCH 02/13] fixing failing test for `filters`: - needed new `dash_ag_grid.useGridFilter` - needed api update for `filterChangedCallback` deprecation to `onModelChange` and whether or not it is empty to kill `isFilterActive` --- src/lib/fragments/AgGrid.react.js | 7 +++-- tests/assets/dashAgGridFunctions.js | 40 ++++++++++++----------------- tests/test_custom_filter.py | 2 +- 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 52a2b92f..4a475b90 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -46,7 +46,7 @@ import MarkdownRenderer from '../renderers/markdownRenderer'; import RowMenuRenderer from '../renderers/rowMenuRenderer'; import {customFunctions} from '../renderers/customFunctions'; -import {AgGridReact} from 'ag-grid-react'; +import {AgGridReact, useGridFilter} from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; @@ -1134,7 +1134,7 @@ export default class DashAgGrid extends Component { cellRendererData: { value, colId: props.column.colId, - rowIndex: props.rowIndex, + rowIndex: props.node.sourceRowIndex, rowId: props.node.id, timestamp: Date.now(), }, @@ -1453,3 +1453,6 @@ DashAgGrid.propTypes = {parentState: PropTypes.any, ..._propTypes}; export const propTypes = DashAgGrid.propTypes; export const defaultProps = DashAgGrid.defaultProps; + +var dagfuncs = window.dash_ag_grid = window.dash_ag_grid || {}; +dagfuncs.useGridFilter = useGridFilter; \ No newline at end of file diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 2128fa6c..47be5046 100644 --- a/tests/assets/dashAgGridFunctions.js +++ b/tests/assets/dashAgGridFunctions.js @@ -184,29 +184,23 @@ const {useImperativeHandle, useState, useEffect, forwardRef} = React; dagfuncs.YearFilter = forwardRef((props, ref) => { const [year, setYear] = useState('All'); - useImperativeHandle(ref, () => { - return { - doesFilterPass(params) { - return params.data.year >= 2010; - }, - - isFilterActive() { - return year === '2010' - }, - - // this example isn't using getModel() and setModel(), - // so safe to just leave these empty. don't do this in your code!!! - getModel() { - }, - - setModel() { - } - } - }); - - useEffect(() => { - props.filterChangedCallback() - }, [year]); + dash_ag_grid.useGridFilter({ + doesFilterPass(params) { + return params.data.year >= 2010; + }, + + // this example isn't using getModel() and setModel(), + // so safe to just leave these empty. don't do this in your code!!! + getModel() { + }, + + setModel() { + } + }); + + useEffect(() => { + props.onModelChange(year === "All" ? null : year) + }, [year]); setProps = ({value}) => { if (value) { diff --git a/tests/test_custom_filter.py b/tests/test_custom_filter.py index 2afb68ea..b0e6c545 100644 --- a/tests/test_custom_filter.py +++ b/tests/test_custom_filter.py @@ -114,7 +114,7 @@ def test_fi003_custom_filter(dash_duo): grid.wait_for_cell_text(0, 0, "23") - dash_duo.find_element('.ag-header-cell[aria-colindex="3"] .ag-icon-menu').click() + dash_duo.find_element('.ag-header-cell[aria-colindex="3"] span[data-ref="eFilterButton"]').click() dash_duo.find_element('.ag-filter label:nth-child(2)').click() From bb415d85bfd07ea5b99240680de7365dbb2f618d Mon Sep 17 00:00:00 2001 From: BSd3v Date: Mon, 30 Sep 2024 17:07:33 -0400 Subject: [PATCH 03/13] fixing for lint --- src/lib/fragments/AgGrid.react.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 4a475b90..0bf4d135 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -1454,5 +1454,5 @@ DashAgGrid.propTypes = {parentState: PropTypes.any, ..._propTypes}; export const propTypes = DashAgGrid.propTypes; export const defaultProps = DashAgGrid.defaultProps; -var dagfuncs = window.dash_ag_grid = window.dash_ag_grid || {}; -dagfuncs.useGridFilter = useGridFilter; \ No newline at end of file +var dagfuncs = (window.dash_ag_grid = window.dash_ag_grid || {}); +dagfuncs.useGridFilter = useGridFilter; From 64d4b8365014eed3db3419317181d0f835a1be66 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Wed, 19 Mar 2025 16:44:34 -0400 Subject: [PATCH 04/13] bumping to 32.3 --- package-lock.json | 116 ++++++++++++++++++++++++---------------------- package.json | 8 ++-- 2 files changed, 65 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6890a369..919466d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,21 +1,21 @@ { "name": "dash-ag-grid", - "version": "32.2.0", + "version": "32.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "dash-ag-grid", - "version": "32.2.0", + "version": "32.3.0", "license": "MIT", "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.7", "@mui/material": "^5.15.7", - "ag-grid-community": "32.2.0", - "ag-grid-enterprise": "32.2.0", - "ag-grid-react": "32.2.0", + "ag-grid-community": "32.3.4", + "ag-grid-enterprise": "32.3.4", + "ag-grid-react": "32.3.4", "d3-format": "^3.1.0", "d3-time": "^3.1.0", "d3-time-format": "^4.1.0", @@ -3414,52 +3414,58 @@ } }, "node_modules/ag-charts-community": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", - "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.3.4.tgz", + "integrity": "sha512-Acm4KNaS2khHH1Q1J96xtXclhqU2ku10amYRcpsVPdKL9dz9MmMbE6ja9DSGJuz3Zl8pwXlcT4GaQjNnaLKUFw==", + "license": "MIT", "dependencies": { - "ag-charts-locale": "10.2.0", - "ag-charts-types": "10.2.0" + "ag-charts-locale": "10.3.4", + "ag-charts-types": "10.3.4" } }, "node_modules/ag-charts-locale": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", - "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.3.4.tgz", + "integrity": "sha512-b2DiNzkzJpyAM+YXv7qapApHRCmyJdn1qPWGDnFD8NqoMatMbvxpbjkbD8nmR9rECsI3l5uw9lvH1uxDks5lLA==", + "license": "MIT" }, "node_modules/ag-charts-types": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", - "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.4.tgz", + "integrity": "sha512-MU+3gvKn1jEyLlMHS0Vu0nHmIQxiVJAnA6ftUatLZvV0c7hOWap4VWghqZ0cVZUJsCdMI59Iuq1u3xquKv4LOQ==", + "license": "MIT" }, "node_modules/ag-grid-community": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", - "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.4.tgz", + "integrity": "sha512-iYQYFapKkqtCml1BvIX/nyNO6SvZYe/Z/1hLa7/7Dpzj2uqABJZIPGgW/ZTOc+/YiM9JYJWMkD7c+5E23GzkAw==", + "license": "MIT", "dependencies": { - "ag-charts-types": "10.2.0" + "ag-charts-types": "10.3.4" } }, "node_modules/ag-grid-enterprise": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", - "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.3.4.tgz", + "integrity": "sha512-IgOw87Wg65x/fxKIhGHKgKL21Acht6P5kN1LHxzrV+PUn3Q13+52qhbLq+9Ck1FTxPqd2PgKrtLrZiQJWneYTA==", + "license": "Commercial", "dependencies": { - "ag-charts-community": "10.2.0", - "ag-grid-community": "32.2.0" + "ag-charts-community": "10.3.4", + "ag-grid-community": "32.3.4" } }, "node_modules/ag-grid-react": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", - "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.3.4.tgz", + "integrity": "sha512-JuIum0etQnWUxWt4EbCXkLGa2lNLgFXNK0nR/rr2+WcOHZSIo1wXe5DPySnL725BK+yPqfB6XZmZcETpEDT+bQ==", + "license": "MIT", "dependencies": { - "ag-grid-community": "32.2.0", + "ag-grid-community": "32.3.4", "prop-types": "^15.8.1" }, "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/ajv": { @@ -14715,47 +14721,47 @@ "requires": {} }, "ag-charts-community": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.2.0.tgz", - "integrity": "sha512-zRB5xvMj14Mli8kEmcy4wDBzJpdOF7+3yqCXrr8ug3sGjMlAJaf33Vu6qqxzlS/Vpip6TNvjPK9Q6RdtDHslRw==", + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-10.3.4.tgz", + "integrity": "sha512-Acm4KNaS2khHH1Q1J96xtXclhqU2ku10amYRcpsVPdKL9dz9MmMbE6ja9DSGJuz3Zl8pwXlcT4GaQjNnaLKUFw==", "requires": { - "ag-charts-locale": "10.2.0", - "ag-charts-types": "10.2.0" + "ag-charts-locale": "10.3.4", + "ag-charts-types": "10.3.4" } }, "ag-charts-locale": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.2.0.tgz", - "integrity": "sha512-JAwuJFXwoVE94YFuwo1ZtnCJa4rFLQna+t2xT5qT2KUaohVPHB+Zd8ivP62lOv9j2ZgzSg4WANBo2UT1LCtl2Q==" + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-10.3.4.tgz", + "integrity": "sha512-b2DiNzkzJpyAM+YXv7qapApHRCmyJdn1qPWGDnFD8NqoMatMbvxpbjkbD8nmR9rECsI3l5uw9lvH1uxDks5lLA==" }, "ag-charts-types": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz", - "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ==" + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.4.tgz", + "integrity": "sha512-MU+3gvKn1jEyLlMHS0Vu0nHmIQxiVJAnA6ftUatLZvV0c7hOWap4VWghqZ0cVZUJsCdMI59Iuq1u3xquKv4LOQ==" }, "ag-grid-community": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.0.tgz", - "integrity": "sha512-zr29DGo6U4JR6pSOgZrZWuN1CTWdpUCfZWWpF47us6MzdFWGN5gcdiXGw40wg9XMGacShNX1aW8o33S4yVkzMw==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.4.tgz", + "integrity": "sha512-iYQYFapKkqtCml1BvIX/nyNO6SvZYe/Z/1hLa7/7Dpzj2uqABJZIPGgW/ZTOc+/YiM9JYJWMkD7c+5E23GzkAw==", "requires": { - "ag-charts-types": "10.2.0" + "ag-charts-types": "10.3.4" } }, "ag-grid-enterprise": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.2.0.tgz", - "integrity": "sha512-fv2Jb4Hdr/hSqJ9xR08/FaeakY1aymnZh/+7ToYQUF1x6vhDBlhiD7//aBO4ErXypmymoHLVRqFQDa/8UpS5Zw==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-32.3.4.tgz", + "integrity": "sha512-IgOw87Wg65x/fxKIhGHKgKL21Acht6P5kN1LHxzrV+PUn3Q13+52qhbLq+9Ck1FTxPqd2PgKrtLrZiQJWneYTA==", "requires": { - "ag-charts-community": "10.2.0", - "ag-grid-community": "32.2.0" + "ag-charts-community": "10.3.4", + "ag-grid-community": "32.3.4" } }, "ag-grid-react": { - "version": "32.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.2.0.tgz", - "integrity": "sha512-9jPyvcY0+7fP/XzL/oMLBve/ox1gFWtl/aQ/+fvQ5AEnDJxN8P84Kp5JapMsPLkSf9WI/5fOCoIKHSaXcU7mNQ==", + "version": "32.3.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-32.3.4.tgz", + "integrity": "sha512-JuIum0etQnWUxWt4EbCXkLGa2lNLgFXNK0nR/rr2+WcOHZSIo1wXe5DPySnL725BK+yPqfB6XZmZcETpEDT+bQ==", "requires": { - "ag-grid-community": "32.2.0", + "ag-grid-community": "32.3.4", "prop-types": "^15.8.1" } }, diff --git a/package.json b/package.json index 30091d08..4480c33d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dash-ag-grid", - "version": "32.2.0", + "version": "32.3.0", "description": "Dash wrapper around AG Grid, the best interactive data grid for the web.", "repository": { "type": "git", @@ -32,9 +32,9 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "ag-grid-community": "32.2.0", - "ag-grid-enterprise": "32.2.0", - "ag-grid-react": "32.2.0", + "ag-grid-community": "32.3.4", + "ag-grid-enterprise": "32.3.4", + "ag-grid-react": "32.3.4", "@mui/icons-material": "^5.15.7", "@mui/material": "^5.15.7", "d3-format": "^3.1.0", From 0ab5ff4387583f3fa0af1d96c346fc0a589253ff Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Mon, 24 Mar 2025 12:14:11 -0400 Subject: [PATCH 05/13] placeholder changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a2b435f..e1b5913b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ All notable changes to `dash-ag-grid` will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/). Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source Dash AG Grid repo +## [unreleased] + ## [31.3.1] - 2025-03-17 ### Fixed From bc444736736648594723ac302ea5bc56faac9566 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 1 Apr 2025 17:25:16 -0400 Subject: [PATCH 06/13] updates for Dash 3 `dashRenderyType` to keep the grid to rerendering too often --- src/lib/components/AgGrid.react.js | 10 +++++++++- src/lib/fragments/AgGrid.react.js | 25 ++++++++++++++++++------- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 3cca1376..f2069f51 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -12,7 +12,7 @@ function getGrid(enable) { /** * Dash interface to AG Grid, a powerful tabular data component. */ -export default class DashAgGrid extends Component { +class DashAgGrid extends Component { constructor(props) { super(props); @@ -750,11 +750,19 @@ DashAgGrid.propTypes = { * Other ag-grid options */ dashGridOptions: PropTypes.object, + + /** + * dashRenderType to determine why grid is rendering + */ + dashRenderType: PropTypes.string, }; export const propTypes = DashAgGrid.propTypes; export const defaultProps = DashAgGrid.defaultProps; +DashAgGrid.dashRenderType = true +export default DashAgGrid; + export const apiGetters = {}; const _get = (flavor) => (id) => { diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 2e16b4c1..3f469f71 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -604,6 +604,15 @@ export default class DashAgGrid extends Component { !equals( {...omit(OMIT_PROP_RENDER, nextProps)}, {...omit(OMIT_PROP_RENDER, this.props)} + ) && (nextProps?.dashRenderType != 'internal' || + !equals( + nextProps.rowData, + this.props.rowData + ) || + !equals( + nextProps.selectedRows, + this.props.selectedRows + ) ) ) { return true; @@ -617,14 +626,16 @@ export default class DashAgGrid extends Component { return true; } if (gridApi && !gridApi?.isDestroyed()) { - if (columnState) { - if (columnState !== this.props.columnState) { - return true; + if (nextProps?.dashRenderType != 'internal') { + if (columnState) { + if (columnState !== this.props.columnState) { + return true; + } } - } - if (filterModel) { - if (!equals(filterModel, gridApi.getFilterModel())) { - return true; + if (filterModel) { + if (!equals(filterModel, gridApi.getFilterModel())) { + return true; + } } } if (selectedRows) { From db2ef2becf9f0202443ae55a9a30dff3d2c2b31f Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 1 Apr 2025 17:40:02 -0400 Subject: [PATCH 07/13] fixing for lint --- src/lib/components/AgGrid.react.js | 6 +++--- src/lib/fragments/AgGrid.react.js | 16 +++++----------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index f2069f51..5495c896 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -752,15 +752,15 @@ DashAgGrid.propTypes = { dashGridOptions: PropTypes.object, /** - * dashRenderType to determine why grid is rendering - */ + * dashRenderType to determine why grid is rendering + */ dashRenderType: PropTypes.string, }; export const propTypes = DashAgGrid.propTypes; export const defaultProps = DashAgGrid.defaultProps; -DashAgGrid.dashRenderType = true +DashAgGrid.dashRenderType = true; export default DashAgGrid; export const apiGetters = {}; diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index 3f469f71..d4d7dd13 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -604,16 +604,10 @@ export default class DashAgGrid extends Component { !equals( {...omit(OMIT_PROP_RENDER, nextProps)}, {...omit(OMIT_PROP_RENDER, this.props)} - ) && (nextProps?.dashRenderType != 'internal' || - !equals( - nextProps.rowData, - this.props.rowData - ) || - !equals( - nextProps.selectedRows, - this.props.selectedRows - ) - ) + ) && + (nextProps?.dashRenderType !== 'internal' || + !equals(nextProps.rowData, this.props.rowData) || + !equals(nextProps.selectedRows, this.props.selectedRows)) ) { return true; } @@ -626,7 +620,7 @@ export default class DashAgGrid extends Component { return true; } if (gridApi && !gridApi?.isDestroyed()) { - if (nextProps?.dashRenderType != 'internal') { + if (nextProps?.dashRenderType !== 'internal') { if (columnState) { if (columnState !== this.props.columnState) { return true; From 4401e038f432184db372debf96fbf4445a34caaa Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Thu, 10 Apr 2025 10:35:53 -0400 Subject: [PATCH 08/13] adding adjustments to allow `getRowStyle` to be a `function` passed --- src/lib/fragments/AgGrid.react.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index d4d7dd13..a0e13844 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -488,7 +488,8 @@ export default class DashAgGrid extends Component { if (target === 'getRowId') { return this.convertFunction(value); } - if (target === 'getRowStyle') { + if (target === 'getRowStyle' && + (has('styleConditions', value) || has('defaultStyle', value))) { return this.handleDynamicStyle(value); } if (OBJ_OF_FUNCTIONS[target]) { From d9749412ecf46c73e0a4ba9e03e5235a312400b3 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Thu, 10 Apr 2025 10:38:27 -0400 Subject: [PATCH 09/13] fixing for lint --- src/lib/fragments/AgGrid.react.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/fragments/AgGrid.react.js b/src/lib/fragments/AgGrid.react.js index a0e13844..06c273f2 100644 --- a/src/lib/fragments/AgGrid.react.js +++ b/src/lib/fragments/AgGrid.react.js @@ -488,8 +488,10 @@ export default class DashAgGrid extends Component { if (target === 'getRowId') { return this.convertFunction(value); } - if (target === 'getRowStyle' && - (has('styleConditions', value) || has('defaultStyle', value))) { + if ( + target === 'getRowStyle' && + (has('styleConditions', value) || has('defaultStyle', value)) + ) { return this.handleDynamicStyle(value); } if (OBJ_OF_FUNCTIONS[target]) { From fa5feddef8c36e7e8c83ad768c5b4b7f8ca7196e Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Thu, 10 Apr 2025 11:06:54 -0400 Subject: [PATCH 10/13] adding test for `getRowStyle` as function --- tests/assets/dashAgGridFunctions.js | 4 ++ tests/test_conditional_formatting.py | 64 ++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/tests/assets/dashAgGridFunctions.js b/tests/assets/dashAgGridFunctions.js index 2fc31490..eacb3e65 100644 --- a/tests/assets/dashAgGridFunctions.js +++ b/tests/assets/dashAgGridFunctions.js @@ -498,4 +498,8 @@ dagfuncs.sortColumns = (a, b) => b.localeCompare(a) dagfuncs.TestEvent = (params, setEventData) => { console.log(params) setEventData('here I am') +} + +dagfuncs.testToyota = (params) => { + return params.data.make == 'Toyota' ? {'color': 'blue'} : {} } \ No newline at end of file diff --git a/tests/test_conditional_formatting.py b/tests/test_conditional_formatting.py index c4d16f39..2f95215b 100644 --- a/tests/test_conditional_formatting.py +++ b/tests/test_conditional_formatting.py @@ -177,4 +177,68 @@ def test_cf002_conditional_formatting_enterprise(dash_duo): until( lambda: "background-color: silver" in grid.get_row(6).get_attribute("style"), timeout=3, + ) + +def test_cf003_conditional_formatting(dash_duo): + app = Dash(__name__) + + columnDefs = [ + { + "headerName": "Make", + "field": "make", + }, + { + "headerName": "Model", + "field": "model", + }, + {"headerName": "Price", "field": "price"}, + {"field": "changes"}, + ] + + rowData = [ + {"make": "Toyota", "model": "Celica", "price": 35000}, + {"make": "Ford", "model": "Mondeo", "price": 32000}, + {"make": "Porsche", "model": "Boxster", "price": 72000}, + ] + + defaultColDef = { + "valueSetter": {"function": "addEdits(params)"}, + "editable": True, + } + + getRowStyle = { + "function": 'testToyota(params)' + } + + app.layout = html.Div( + [ + dcc.Markdown( + "In this grid, the __Make__ column has a popup below the cell, the __Model__ has a popup above the cell, and the __Price__ has the default (in cell) editor." + ), + dag.AgGrid( + columnDefs=columnDefs, + rowData=rowData, + defaultColDef=defaultColDef, + columnSize="sizeToFit", + getRowStyle=getRowStyle, + id="grid", + ), + html.Button(id="focus"), + ], + style={"margin": 20}, + ) + + dash_duo.start_server(app) + + grid = utils.Grid(dash_duo, "grid") + + grid.wait_for_cell_text(0, 0, "Toyota") + + ### testing styles + grid.get_cell(0, 0).click() + until(lambda: "color: blue" in grid.get_row(0).get_attribute("style"), timeout=3) + grid.get_cell(0, 0).send_keys("t") + grid.get_cell(0, 1).click() + until( + lambda: "color: blue" not in grid.get_row(0).get_attribute("style"), timeout=3 ) \ No newline at end of file From 2ed88ec351e0607d93c1977a23510ad0f9dac0d6 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Thu, 10 Apr 2025 16:19:34 -0400 Subject: [PATCH 11/13] updating changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1b5913b..dc4367cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,12 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D ## [unreleased] +### Fixed +- [#328](https://github.com/plotly/dash-ag-grid/pull/328) fixed issue where `getRowStyle` wast able to be passed as a complete function + +### Changed +- [#328](https://github.com/plotly/dash-ag-grid/pull/328) bumping to v`32.3` for the grid + ## [31.3.1] - 2025-03-17 ### Fixed From 4a3dc5dc67fd0c81aa537e5bc7987998fd5ba1c7 Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Thu, 10 Apr 2025 16:21:07 -0400 Subject: [PATCH 12/13] updating changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dc4367cb..3a2510d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,9 @@ Links "DE#nnn" prior to version 2.0 point to the Dash Enterprise closed-source D - [#328](https://github.com/plotly/dash-ag-grid/pull/328) fixed issue where `getRowStyle` wast able to be passed as a complete function ### Changed -- [#328](https://github.com/plotly/dash-ag-grid/pull/328) bumping to v`32.3` for the grid +- [#328](https://github.com/plotly/dash-ag-grid/pull/328) + - bumping to v`32.3` for the grid + - the grid checks if updates are from an internal source (3.0.2 dash) and will selectively rerender if so ## [31.3.1] - 2025-03-17 From 836c274278a13546852b60c10da1f8abf8fbc37e Mon Sep 17 00:00:00 2001 From: BSd3v <82055130+BSd3v@users.noreply.github.com> Date: Tue, 15 Apr 2025 12:32:13 -0400 Subject: [PATCH 13/13] adjustments based on feedback --- package.json | 2 +- src/lib/components/AgGrid.react.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4480c33d..43d85e61 100644 --- a/package.json +++ b/package.json @@ -86,4 +86,4 @@ "browserslist": [ "last 7 years and not dead" ] -} \ No newline at end of file +} diff --git a/src/lib/components/AgGrid.react.js b/src/lib/components/AgGrid.react.js index 5495c896..05b460e8 100644 --- a/src/lib/components/AgGrid.react.js +++ b/src/lib/components/AgGrid.react.js @@ -24,6 +24,8 @@ class DashAgGrid extends Component { this.buildArray = this.buildArray.bind(this); } + static dashRenderType = true; + buildArray(arr1, arr2) { if (arr1) { if (!arr1.includes(arr2)) { @@ -760,7 +762,6 @@ DashAgGrid.propTypes = { export const propTypes = DashAgGrid.propTypes; export const defaultProps = DashAgGrid.defaultProps; -DashAgGrid.dashRenderType = true; export default DashAgGrid; export const apiGetters = {};