Odd dependency error

[dpdug4n]

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'. I think this is an issue with the underlying .js???

Any advice or insight is appreciated.

Summarized Project Structure:

• app
  • __init__.py
  • app
    • app.py
    • pages
      • home.py
      • ag_grid_page.py
    • workers
      • db_worker.py
• tests
  • __init__.py
  • ag_grid_test.py
• pyproject.toml (poetry file)
  [tool.poetry.dependencies] python = "^3.10" dash-ag-grid = "*" dash = "*" pandas = "*" dash_bootstrap_components = "*"

Tests/Debugging attempts

From the project root level directory with the poetry shell loaded:

• I've copy/pasted an example dag snippet into ag_grid_test.py and that loads as expected without dependency errors when calling it via python -m tests.ag_grid_test
• I've verified dash-ag-grid is available in the project via python -c "help('modules')"

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

import app.workers.db_worker as db_worker 
import app.workers.date_to_epoch as date_to_epoch


db_worker = db_worker.Worker()

data = db_worker.query_to_dataframe(db_worker.query)

columnDefs = [{'field':col,'filter':True, 'sortable':True} for col in data.columns]

dash.register_page(
    __name__,
    name = "DB Browser",
    location = "sidebar"                    
)

date_range = dcc.DatePickerRange(
    id='query-date-range',
    start_date_placeholder_text="Start Period",
    end_date_placeholder_text="End Period",
    calendar_orientation='vertical',
    updatemode = 'bothdates',
    initial_visible_month = date.today(),
    min_date_allowed=date(1970,1,1), 
    max_date_allowed = date.today()
)

grid = dag.AgGrid(
    id = "db-browser",
    rowData=data.to_dict("records"),
    columnDefs=columnDefs,
    dashGridOptions={'pagination':True},
    className="ag-theme-alpine-dark"
)

def layout():
    return html.Div(
    [
        date_range,
        grid,
    ]
)

@callback(
    Output('db-browser','rowData'),    
    Input('query-date-range', 'start_date'),
    Input('query-date-range', 'end_date')
)
def update_query_date_range(start_date, end_date):
    if start_date and end_date:
        start_date_epoch = date_to_epoch.convert(date.fromisoformat(start_date))
        end_date_epoch = date_to_epoch.convert(date.fromisoformat(end_date))
        query = f"SELECT * FROM table WHERE timestamp BETWEEN {start_date_epoch} and {end_date_epoch}"
        data = db_worker.query_to_dataframe(query)
        return data.to_dict("records")

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

[dpdug4n]

Callback was causing the issue. Disregard.

[dpdug4n]

So I've been doing some testing/debugging, and still get the same dependency error, even when only updating the 'columnDefs'. Is this a bug, or am I missing something obvious?

Forum post - https://community.plotly.com/t/dash-ag-grid-dependency-error-callback-to-update-empty-grid-fails/82728

Example code -

import dash, logging, json
import dash_ag_grid as dag
from dash import html, dcc, Input, State, Output, ctx, callback
import dash_bootstrap_components as dbc

from datetime import date, timedelta

# logging
logging.basicConfig(level=logging.DEBUG)
logger = logging.getLogger(__name__)


## UI
dash.register_page(
    __name__,
    description = "",
    location = "sidebar"                    
)

query_btn = dbc.Button(
    "Update", 
    id="query-btn",
    color="primary",    # if start_date and end_date:
)

date_range = dcc.DatePickerRange(
    #https://dash.plotly.com/dash-core-components/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=[],#data.to_dict("records"),
    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 ctx.triggered_id == 'query-btn':
        columnDefs = [{'field':'test','filter':True, 'sortable':True}]
        # rowData = {'test':'testing123'}
        return columnDefs, #rowData

[AnnMarieW]

HI @dpdug4n

Yes it's a bug in 2.16. It's in the process of being fixed and the new release will be ready soon. In the meantime, you can use dash 2.15

[dpdug4n]

Ty for the info and quick response!! I'll lock in 2.16 in the poetry file.

[AnnMarieW]

Be sure to lock in 2.15 🙂

More info here: plotly/dash#2778

[dpdug4n]

Yes, I meant 2.15. All working as expected again. Ty!