# Console Errors Caused by Ag Grid?

**URL:** <https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934>\
**Category:** Dash Python\
**Created:** [July 18, 2024, 10:55pm UTC](https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934 "2024-07-18T22:55:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![KoalifiedEnough](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@KoalifiedEnough](https://community.plotly.com/u/KoalifiedEnough)\
**Post date:** [July 18, 2024, 10:55pm UTC](https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934/1 "2024-07-18T22:55:00Z")

</div>

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

 ![Screenshot 2024-07-18 185238](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/d/ed0b593594f90ef4bbaf5ca8ef5c55d666830548.png)

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:

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 18, 2024, 11:11pm UTC](https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934/2 "2024-07-18T23:11:27Z")

</div>

Hi @KoalifiedEnough

It looks like those errors are because you are using AG Grid Enterprise without a license. This is fine during a trial period, but you will see errors in the console. For more info see:

> **[Using AG Grid Enterprise | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/enterprise-ag-grid)**
>
> How to enable AG Grid Enterprise modules in Dash AG Grid

> **[AG Grid: License and Pricing](https://www.ag-grid.com/license-pricing/)**
>
> View license and pricing details for AG Grid. Compare features in AG Grid Community vs. Enterprise. Purchase AG Grid Bundle for a discount Grid & Charts licenses.

---

<div class="post-metadata">

**Author:** ![KoalifiedEnough](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@KoalifiedEnough](https://community.plotly.com/u/KoalifiedEnough)\
**Post date:** [July 18, 2024, 11:22pm UTC](https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934/3 "2024-07-18T23:22:44Z")

</div>

I see. So i only have that option enabled so i can sort the country column by uniqueness/type it in quickly. Is there a way to do that not using the enterprise module? or is this an “i need to learn javascript” moment?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 18, 2024, 11:36pm UTC](https://community.plotly.com/t/console-errors-caused-by-ag-grid/85934/4 "2024-07-18T23:36:51Z")

</div>

Yeah, the Set Filters feature in AG Grid Enterprise is really nice. My favorite workaround is to use external filters. It doesn’t take much JavaScript, only a simple function for filtering. You can see an example here:

> **[Dash AG Grid Examples: External Filters](https://dashaggridexamples.pythonanywhere.com/external-filters)**
>
> Tutorials, tips & tricks and additional examples to supplement the Dash AG Grid documentation.

And my [Figure Friday app](https://community.plotly.com/t/figure-friday-2024-week-28/84980/5) uses an external filter too 🙂

More info in the dash docs too: [External Filter | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid/external-filter)