I’m getting a rather odd dependency error for dash_ag_grid in a multi-page dash project. I am using poetry, but that doesn’t seem to be the cause. Python isn’t throwing any dependency errors for dash-ag-grid, but when loading the application, Dash displays a ‘Error loading dependencies’ on the webpage and the error within the UI debugger is ‘dash_ag_grid was not found’.
Update -
It’s an issue with the callback updating the ag_grid, not a library dependency error. How do I update the grid’s columnDef and rowData within a callback?
I’ve set the initial callback to be prevented, and set it to trigger on a btn click, so it should display the AgGrid as an empty one on page load, but I still get the dependency error. Page loads without the dependency error as soon as I comment out the callback. Already verified the returned columnDefs & rowData are valid.
Summarized Project Structure:
- app
__init__.py- app
- app.py
- pages
- home.py
- ag_grid_page.py
- workers
- db_worker.py
ag_grid_page.py
import dash, logging
from dash import html, dcc, Input, Output, callback
import dash_bootstrap_components as dbc
import dash_ag_grid as dag
from datetime import date, timedelta
import app.workers.db_worker as db_worker
import app.workers.date_to_epoch as date_to_epoch
dash.register_page(
__name__,
name = "DB Browser",
location = "sidebar"
)
query_btn = dbc.Button(
"Update",
id="query-btn",
color="primary",
class_name="me-1"
)
date_range = dcc.DatePickerRange(
id='query-date-range',
start_date_placeholder_text="Start Period",
start_date=date.today() - timedelta(weeks=1),
end_date=date.today(),
calendar_orientation='vertical',
initial_visible_month = date.today(),
min_date_allowed=date(1970,1,1),
max_date_allowed = date.today(),
updatemode="bothdates"
)
grid = dag.AgGrid(
id = "grid",
rowData=[],
columnDefs=[],
dashGridOptions={'pagination':True},
className="ag-theme-alpine-dark"
)
def layout():
return html.Div(
[
dbc.Row([
dbc.Col(date_range, width="auto"),
dbc.Col(query_btn, width="auto")
], justify="start"),
grid
]
)
@callback(
Output('grid','columnDefs'),
Output('grid','rowData'),
Input('query-btn','n_clicks'),
State('query-date-range', 'start_date'),
State('query-date-range', 'end_date'),
prevent_initial_call=True,
)
def update_query_date_range(nclicks,start_date, end_date):
if nclicks != 0:
start_date_epoch = date_to_epoch.convert(start_date)
end_date_epoch = date_to_epoch.convert(end_date)
query = f"SELECT * FROM queries WHERE timestamp BETWEEN {start_date_epoch} and {end_date_epoch}"
data = app.Worker().query_to_dataframe(query)
columnDefs=[{'field':col,'filter':True, 'sortable':True} for col in data.columns]
rowData = data.to_dict("records"),
return columnDefs, rowData
Dash Error
dash_ag_grid was not found.
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
resolve@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:9871:11
validateProp@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:5234:69
validateMap@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:5302:23
validateCallbacksToLayout@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:5312:14
./src/actions/index.js/hydrateInitialOutputs/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:6038:77
./node_modules/redux-thunk/es/index.js/createThunkMiddleware/middleware/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:73972:18
./src/APIController.react.js/storeEffect/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:3903:17
batchedUpdates$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:21991:14
storeEffect@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_16_0m1709417115.dev.js:3873:53
commitHookEffectListMount@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:19866:28
commitPassiveHookEffects@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:19904:38
callCallback@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:182:16
invokeGuardedCallbackDev@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:231:18
invokeGuardedCallback@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:286:33
flushPassiveEffectsImpl@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:22988:32
unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:2685:14
runWithPriority$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:11174:12server = app.server
flushPassiveEffects@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:22955:14
commitBeforeMutationEffects/<@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_16_0m1709417115.14.0.js:22834:13
workLoop@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:2629:44
flushWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:2584:18
performWorkUntilDeadline@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:2196:50
EventHandlerNonNull*@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:2219:5
@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:15:29
@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_16_0m1709417115.14.0.js:16:2
