asynchronous JS error on renaming elements in dash-ag-grid in Google Chrome

[matt-sd-watson]

I have implemented a dash-ag-grid component that dynamically receives a list and populates draggable rows:

html.Div([dag.AgGrid(
                                 id='blend-options-ag-grid',
                                 rowData=[],
                                 columnDefs=[{'field': 'Current canvas blend'}],
                                 defaultColDef={"sortable": True, "filter": True},
                                 columnSize="sizeToFit",
                                 dashGridOptions={
                                     "rowDragManaged": True,
                                     "animateRows": True,
                                     "rowDragMultiRow": True,
                                     "rowSelection": "multiple",
                                     "rowDragEntireRow": True,
                                     "domLayout": "autoHeight"
                                 })], style={"margin-bottom": "-30px"}),

In the latest version of google chrome, the following error sometimes occurs, but indiscriminately for this component:

Error: Line 1: Unexpected token ILLEGAL
    at e.constructError (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1381663)
    at e.createError (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1381882)
    at e.throwError (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1382005)
    at e.throwUnexpectedToken (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1386671)
    at e.scanStringLiteral (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1398576)
    at e.lex (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1402373)
    at e.nextToken (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1321312)
    at e.parseBinaryExpression (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1342038)
    at e.inheritCoverGrammar (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1324400)
    at e.parseConditionalExpression (http://127.0.0.1:5000/ccramic/_dash-component-suites/dash_ag_grid/async-community.js:2:1342858)

Switching to Firefox resolves the issue.

[AnnMarieW]

Hi @matt-sd-watson

Note that Managed Row Drag does not work with sort and filter. See the constraints listed in the docs:

https://dash.plotly.com/dash-ag-grid/row-dragging

The logic for managed dragging has the following constraints:

Works with Client-Side row model only; not with the Infinite, Server-Side or Viewport row models. Does not work if Pagination is enabled. Does not work when sorting is applied. This is because the sort order of the rows depends on the data and moving the data would break the sort order. Does not work when filtering is applied. This is because a filter removes rows making it impossible to know what ' real' order of rows when some are missing. Does not work when row grouping or pivot is active. This is because moving rows between groups would require a knowledge of the underlying data which only your application knows. These constraints can be bypassed by using unmanaged row dragging.

See the AG Grid docs for more details on unmanaged row dragging.

[matt-sd-watson]

@AnnMarieW I have tried setting the input with the following settings based on this documentation:

defaultColDef={"sortable": False, "filter": False},
                                 columnSize="sizeToFit",
                                 dashGridOptions={
                                     "rowDragManaged": True,
                                     "animateRows": True,
                                     "pagination": False,

but the error still persists.

Interestingly enough, it doesn't happen consistently, and it appears to happen only in Chrome on a Windows OS.

[BSd3v]

Hello @matt-sd-watson,

How is your data set up?

Is your grid always going to have the same number of rows?

Are you using getRowId?

[matt-sd-watson]

@BSd3v My data are being returned as a pandas data frame, always with the same number of columns (1) with the same column name. However, since the rows are changing dynamically through a callback, sometimes there are no rows to return to the frame, in which case I return an empty list [].

I am not using getRowId anywhere explicitly that I know of.

[BSd3v]

Typically, updates on a getRowId would allow it to stay in place, this would probably circumvent some of the errors that you are encountering.

Do you have a test app that I can try out?

[matt-sd-watson]

Where does the getRowId attribute normally get set? When I attempt to set it to False under dashGridOptions, no rows show up on callback. Unfortunately right now the app we are developing is private so I cannot grant access to it, but I might be able to generate a minimal example.

[BSd3v]

Here is the documentation on it:

https://dash.plotly.com/dash-ag-grid/row-ids#application-assigned-ids

[matt-sd-watson]

@BSd3v I assume that the getRowId attribute doesn't need to be set for the managed dragging? What is curious is that this error shows up only on Windows OS Google Chrome it seems. I have tried to replicate the error on Ubuntu and Macbook and it doesn't seem to occur there.

[BSd3v]

Correct, it doesnt need to be... but, with how you are using it, it might be able to help the grid identify unique identifiers, but idk.

And yes, that is a bit strange that it is only on Windows with Chrome.

[BSd3v]

Hello @matt-sd-watson,

Have you updated to the new version of the grid, and does this issue continue to persist?