I’m structuring an app where i occasionally come across console errors that i dont know how to debug (or even if i need to).
Frequently I come across these ******* errors like in the MRE posted below or ComponentBoundaryErrorsCaused by a CheckedComponent
It seems like my app slows down when I encounter more of these errors in the console, how do i fix it if there is nothing said in the error message?
full MRE:
import dash
import pandas as pd
import dash_ag_grid as dag
import dash_mantine_components as dmc
from dash import Dash,Output, Input, html, callback,dcc
import plotly.express as px
df_wind = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/wind_dataset.csv")
df_gap_minder = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")
df_gap_minder_plot = px.data.gapminder()
def return_dataset(dataset_name):
if dataset_name =='wind':
df = df_wind
elif dataset_name =='pop':
df = df_gap_minder
return df
def return_columns(dataset_name):
columns = {'wind': [{'field': 'direction'},
{'field': 'strength'},
{'field': 'frequency'},
],
'pop': [{'field': 'country', "filter": "agSetColumnFilter",},
{'field': 'pop', 'headerName': 'Population'},
{'field': 'lifeExp', 'headerName': 'Life Expectancy', 'filter': True},
]
}
return columns[dataset_name]
def tab1_layout():
layout= html.Div(
[html.H4("Animated GDP and population over decades"),
html.P("Select an animation:"),
dcc.RadioItems(
id="selection",
options=["GDP - Scatter", "Population - Bar"],
value="GDP - Scatter",
),
dcc.Loading(dcc.Graph(id="graph"), type="cube"),
]
)
@callback(Output("graph", "figure"),
Input("selection", "value"))
def display_animated_graph(selection):
animations = {"GDP - Scatter": px.scatter(
df_gap_minder_plot,
x="gdpPercap",
y="lifeExp",
animation_frame="year",
animation_group="country",
size="pop",
color="continent",
hover_name="country",
log_x=True,
size_max=55,
range_x=[100, 100000],
range_y=[25, 90],
),
"Population - Bar": px.bar(
df_gap_minder_plot,
x="continent",
y="pop",
color="continent",
animation_frame="year",
animation_group="country",
range_y=[0, 4000000000],
),
}
return animations[selection]
return layout
def tab2_layout():
default_values = list(df_wind['direction'].unique())
default_data = [{"value": dir,"label": dir} for dir in df_wind['direction'].unique()]
multi_select = dmc.MultiSelect(label="Select Options",
id="framework-multi-select",
value=default_values,
data=default_data
,
w=750,
mb=10)
grid_chooser = dmc.SegmentedControl(id="segmented",
value="wind",
data=[{"value": "wind", "label": "Wind Data Set"},
{"value": "pop", "label": "Country Data Set"},
],
mb=10,
)
my_checkbox = dmc.CheckboxGroup(
id="checkbox-group",
label="Select your favorite framework/library",
description="This is anonymous",
withAsterisk=True,
mb=10,
children=dmc.Group(
[
dmc.Checkbox(label="React", value="react"),
dmc.Checkbox(label="Vue", value="vue"),
dmc.Checkbox(label="Svelte", value="svelte"),
dmc.Checkbox(label="Angular", value="angular"),
],
mt=10,
),
value=["react", "vue"],
)
layout=html.Div([dmc.Stack(children = [grid_chooser,
multi_select,
my_checkbox,
dmc.Text(id="checkbox-group-output"),
dmc.Loader(children=[dmc.Container(id="segmented-value", children=html.Div())],
type='default')]
)
])
@callback(Output("checkbox-group-output", "children"), Input("checkbox-group", "value"))
def checkbox(value):
print (value)
return ", ".join(value) if value else None
@callback(Output("framework-multi-select", "data"),
Output("framework-multi-select", "value"),
Input("segmented", "value"))
def update_options(value):
df = return_dataset(value)
col = {'wind':'direction','pop':'country'}.get(value)
values = list(df[col].unique())
data=[{"value": i,"label": i} for i in df[col].unique()]
return data,values
@callback(Output("segmented-value", "children"),
Input("framework-multi-select", "value"),
Input("segmented", "value"))
def update_dataset(filter,value):
dataset = return_dataset(value)
if value =='wind':
dataset = pd.concat([dataset]*10000,axis=0)
mask = dataset['direction'].isin(filter)
df = dataset[mask].copy()
elif value=='pop':
mask = dataset['country'].isin(filter)
df = dataset[mask].copy()
colDefs = return_columns(value)
grid = dag.AgGrid(
enableEnterpriseModules=True,
id="dataset-browser",
rowData=df.to_dict("records"),
columnDefs=colDefs,)
return grid
return layout
dash._dash_renderer._set_react_version('18.2.0')
stylesheets = [
"https://unpkg.com/@mantine/dates@7/styles.css",
"https://unpkg.com/@mantine/code-highlight@7/styles.css",
"https://unpkg.com/@mantine/charts@7/styles.css",
"https://unpkg.com/@mantine/carousel@7/styles.css",
"https://unpkg.com/@mantine/notifications@7/styles.css",
"https://unpkg.com/@mantine/nprogress@7/styles.css",
]
app = Dash(__name__, external_stylesheets=stylesheets)
app.layout = dmc.MantineProvider(
children= dmc.Tabs(
[
dmc.TabsList(
[
dmc.TabsTab("Plotter", value="plot"),
dmc.TabsTab("Browser", value="agGrids"),
]
),
dmc.TabsPanel(tab1_layout(), value="plot"),
dmc.TabsPanel(tab2_layout(), value="agGrids"),
],
value="plot",
)
)
if __name__ == "__main__":
app.run(debug=True,port=8100)
