[Bug] Fix reloading issues of the AG Grid

vizro-core/examples/_dev/app.py

@@ -1,28 +1,70 @@
-"""Example to show dashboard configuration."""
-
+import pandas as pd
 import vizro.models as vm
-import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.tables import dash_ag_grid, dash_data_table
+from vizro.tables import dash_ag_grid
+
+# DATA
+data = {
+ "this_is_a_really_long_column_name_0": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short_col_name": [4, 5, 6],
+ "this_is_a_really_long_column_name_2": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short": [10, 11, 12],
+ "this_is_a_really_long_column_name_4": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "this_is_a_really_long_column_name_6": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short4": [10, 11, 12],
+ "this_is_a_really_long_column_name_7": [13, 14, 15],
+}
 
-df = px.data.iris()
+df = pd.DataFrame(data)
+
+# df = px.data.gapminder()
 
 page = vm.Page(
- title="My first dashboard",
+ title="Example of a Dash AG Grid",
  components=[
- vm.Graph(
- id="scatter_chart",
- figure=px.scatter(df, x="sepal_length", y="petal_width", color="species", title="Title - Plotly Chart"),
+ vm.AgGrid(
+ title="Dash AG Grid",
+ figure=dash_ag_grid(
+ id="grid1",
+ data_frame=df,
+ defaultColDef={"flex": 1, "minWidth": 200},
+ persistence=True,
+ persisted_props=["filterModel", "columnSize"], # ,persistence_type = "local" #columnSize="autoSize"#
+ ),
  ),
- vm.AgGrid(title="Title - AG Grid", figure=dash_ag_grid(data_frame=df)),
- vm.Table(title="Title - DataTable", figure=dash_data_table(data_frame=df)),
  ],
- controls=[
- vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])),
+ controls=[vm.Filter(column="this_is_a_really_long_column_name_0")],
+)
+page2 = vm.Page(
+ title="Example of a Dash AG Grid 2",
+ components=[
+ vm.AgGrid(
+ title="Dash AG Grid 2",
+ figure=dash_ag_grid(
+ id="grid2",
+ data_frame=df,
+ columnSize="autoSize", # , persistence=True, persisted_props=["filterModel","columnSize"]#,persistence_type = "local"
+ ),
+ ),
  ],
+ # controls=[vm.Filter(column="continent")],
 )
+dashboard = vm.Dashboard(pages=[page, page2])
 
-dashboard = vm.Dashboard(pages=[page])
-
-if __name__ == "__main__":
- Vizro().build(dashboard).run()
+Vizro().build(dashboard).run()

vizro-core/examples/_dev/app2.py

@@ -0,0 +1,20 @@
+import dash
+from dash import Dash, dcc, html
+
+app = Dash(__name__, use_pages=True)
+
+app.layout = html.Div(
+ [
+ html.H1("Multi-page app with Dash Pages"),
+ html.Div(
+ [
+ html.Div(dcc.Link(f"{page['name']} - {page['path']}", href=page["relative_path"]))
+ for page in dash.page_registry.values()
+ ]
+ ),
+ dash.page_container,
+ ]
+)
+
+if __name__ == "__main__":
+ app.run(debug=True)

vizro-core/examples/_dev/pages/analytics.py

@@ -0,0 +1,76 @@
+import dash
+import dash_ag_grid as dag
+import pandas as pd
+from dash import Input, Output, callback, dcc, html
+
+# Define some sample data
+data = {
+ "this_is_a_really_long_column_name_0": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short_col_name": [4, 5, 6],
+ "this_is_a_really_long_column_name_2": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short": [10, 11, 12],
+ "this_is_a_really_long_column_name_4": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "this_is_a_really_long_column_name_6": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short4": [10, 11, 12],
+ "this_is_a_really_long_column_name_7": [13, 14, 15],
+}
+columnDefs = [
+ {"field": "this_is_a_really_long_column_name_0"},
+ {"field": "short_col_name"},
+ {"field": "this_is_a_really_long_column_name_2"},
+ {"field": "short"},
+ {"field": "this_is_a_really_long_column_name_4"},
+ {"field": "this_is_a_really_long_column_name_6"},
+ {"field": "short4"},
+ {"field": "this_is_a_really_long_column_name_7"},
+]
+
+# Create DataFrame
+df = pd.DataFrame(data)
+
+grid = dag.AgGrid(
+ id="get-started-example-basic",
+ rowData=df.to_dict("records"),
+ columnDefs=columnDefs,
+ columnSize="autoSize",
+)
+
+dash.register_page(__name__)
+
+layout = html.Div(
+ [
+ html.H1("This is our Analytics page"),
+ grid,
+ html.Div(
+ [
+ "Select a city: ",
+ dcc.RadioItems(
+ options=["New York City", "Montreal", "San Francisco"], value="Montreal", id="analytics-input"
+ ),
+ ]
+ ),
+ html.Br(),
+ html.Div(id="analytics-output"),
+ ]
+)
+
+
+@callback(Output("analytics-output", "children"), Input("analytics-input", "value"))
+def update_city_selected(input_value):
+ return f"You selected: {input_value}"

vizro-core/examples/_dev/pages/archive.py

@@ -0,0 +1,11 @@
+import dash
+from dash import html
+
+dash.register_page(__name__)
+
+layout = html.Div(
+ [
+ html.H1("This is our Archive page"),
+ html.Div("This is our Archive page content."),
+ ]
+)

vizro-core/examples/_dev/pages/home.py

@@ -0,0 +1,116 @@
+from collections import defaultdict
+from typing import Any, Dict, Mapping
+
+import dash
+import dash_ag_grid as dag
+import pandas as pd
+from dash import html
+
+
+# AG Grid as in core code
+def _set_defaults_nested(supplied: Mapping[str, Any], defaults: Mapping[str, Any]) -> Dict[str, Any]:
+ supplied = defaultdict(dict, supplied)
+ for default_key, default_value in defaults.items():
+ if isinstance(default_value, Mapping):
+ supplied[default_key] = _set_defaults_nested(supplied[default_key], default_value)
+ else:
+ supplied.setdefault(default_key, default_value)
+ return dict(supplied)
+
+
+def dash_ag_grid(data_frame: pd.DataFrame, **kwargs) -> dag.AgGrid:
+ """Implementation of `dash_ag_grid.AgGrid` with sensible defaults to be used in [`AgGrid`][vizro.models.AgGrid]."""
+ defaults = {
+ # "className": "ag-theme-quartz-dark ag-theme-vizro",
+ "columnDefs": [{"field": col} for col in data_frame.columns],
+ "rowData": data_frame.apply(
+ lambda x: (
+ x.dt.strftime("%Y-%m-%d") # set date columns to `dateString` for AG Grid filtering to function
+ if pd.api.types.is_datetime64_any_dtype(x)
+ else x
+ )
+ ).to_dict("records"),
+ "defaultColDef": {
+ "resizable": True,
+ "sortable": True,
+ "filter": True,
+ "filterParams": {
+ "buttons": ["apply", "reset"],
+ "closeOnApply": True,
+ },
+ "flex": 1,
+ "minWidth": 70,
+ },
+ "dashGridOptions": {
+ "animateRows": False,
+ "pagination": True,
+ },
+ # "style": {"height": "100%"},
+ }
+ kwargs = _set_defaults_nested(kwargs, defaults)
+ return dag.AgGrid(**kwargs)
+
+
+# DATA
+data = {
+ "this_is_a_really_long_column_name_0": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short_col_name": [4, 5, 6],
+ "this_is_a_really_long_column_name_2": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short": [10, 11, 12],
+ "this_is_a_really_long_column_name_4": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "this_is_a_really_long_column_name_6": [
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ "sdfjalskdfnaksnfa;sldknfalksdnfl;kasdnfl;kasndflkasdf",
+ ],
+ "short4": [10, 11, 12],
+ "this_is_a_really_long_column_name_7": [13, 14, 15],
+}
+
+df = pd.DataFrame(data)
+
+# Testing out:
+# columnSize
+# Persistence
+grid = html.Div(
+ dash_ag_grid(
+ data_frame=df, id="persistence-grid", columnSize="autoSize", persistence=True, persisted_props=["filterModel"]
+ ),
+ id="persistence-grid-div",
+)
+
+dash.register_page(__name__, path="/")
+
+
+# @dash.callback(
+# dash.Output("persistence-grid-div", "children"),
+# dash.Input("example-button", "n_clicks"))
+# def update_grid(n_clicks):
+# if n_clicks is None:
+# dash.exceptions.PreventUpdate
+# return dash_ag_grid(
+# data_frame=df, id="persistence-grid"#, columnSize="autoSize", persistence=True, persisted_props=["filterModel"]
+# )
+
+
+layout = html.Div(
+ [
+ html.H1("This is our Home page"),
+ grid,
+ # dbc.Button(
+ # "Click me", id="example-button", className="me-2", n_clicks=0
+ # )
+ ]
+)

vizro-core/src/vizro/models/_components/ag_grid.py

@@ -111,7 +111,7 @@ def build(self):
  # here) must have the same setting as the object that is built by the on-page-load mechanism using
  # with the user settings and rendered finally. Otherwise the grid is not rendered correctly.
  # Hence be careful when editing the line below.
- html.Div(self.__call__(data_frame=pd.DataFrame()), id=self.id, className="table-container"),
+ html.Div(self.__call__(), id=self.id, className="table-container"),
  ],
  id=f"{self.id}_outer",
  color="grey",

vizro-core/src/vizro/tables/_dash_ag_grid.py

@@ -67,8 +67,8 @@ def dash_ag_grid(data_frame: pd.DataFrame, **kwargs) -> dag.AgGrid:
  "buttons": ["apply", "reset"],
  "closeOnApply": True,
  },
- "flex": 1,
- "minWidth": 70,
+ # "flex": 1,
+ # "minWidth": 70,
  },
  "dashGridOptions": {
  "dataTypeDefinitions": _DATA_TYPE_DEFINITIONS,