DCC_GraphClickData field Empty on Appstart

Dash Python
1

Hello I am wondering if it is possible to create an empty dag grid table at appstart, or basically a table that does not have filled the DCC_GraphClickData component on appstart. I have an example here:

from dash import html
import dash_bootstrap_components as dbc
import dash
import pandas as pd
import dash_ag_grid as dag
from dash_iconify import DashIconify

app = dash.Dash(__name__)


columnDefs =[
  
   {
     "headerName": "TTM",
     "field":"GRAPH", 
     "cellRenderer": "DCC_GraphClickData", 
     "maxWidth": 175,
     "minWidth": 175,
    },

   {"headerName":"Company Name",
     "field": "NAME",
     "sortable": True, 
     "filter": True,
     'cellStyle':{
        "display": "flex",
        "vertical-align": "middle",
        "align-items": "center"} 
      },    

]

defaultColDef = {
    "resizable": True,
    "sortable": False,
    "editable": False,
}




data = {
        'NAME': ["Alphabet Inc.", "Microsoft Corporation", "Meta Platforms Inc.", "Netflix Inc.", "Apple Inc.", "TSLA.Inc", "Amazon.com Inc.", "GameStop", "Advanced Micro Devices Inc.", "PayPal"],    
        'GRAPH': [None,None,None,None,None,None,None,None,None, None] ,
}
df = pd.DataFrame(data)

test= dag.AgGrid(
            id="selection-single-grid",
            columnDefs=columnDefs,
            className="ag-theme-alpine-dark color-fonts",
            rowData=df.to_dict('records'),
            columnSize="sizeToFit",
            defaultColDef=defaultColDef,
            dashGridOptions={"rowSelection": "single",
                             "rowHeight": 60,
                             }
            )
app.layout = html.Div([
    test
])


if __name__ == '__main__':
    app.run(host='127.0.0.1', port='3000', debug=True)```

This code goes into an :
dashAgGridComponentFunctions.js

var dagcomponentfuncs = window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {};


dagcomponentfuncs.DCC_GraphClickData = function (props) {
    const { setData } = props;
    function setProps() {
        const graphProps = arguments[0];
        if (graphProps['clickData']) {
            setData(graphProps);
        }

    }
    return React.createElement(window.dash_core_components.Graph, {
        figure: props.value,
        setProps,
        style: { height: '100%' },
        config: { displayModeBar: false },
    });
};

So basically I want the table to be filled on Appstart and after that I want to add Graphs to avoid delay. Unluckily I am running into undefined behaviour. Can anyone help me?

2

Hello @cosco,

You need to make this check if there is a value:

dagcomponentfuncs.DCC_GraphClickData = function (props) {
    if (!props.value) {return ''}
    const { setData } = props;
    function setProps() {
        const graphProps = arguments[0];
        if (graphProps['clickData']) {
            setData(graphProps);
        }

    }
    return React.createElement(window.dash_core_components.Graph, {
        figure: props.value,
        setProps,
        style: { height: '100%' },
        config: { displayModeBar: false },
    });
};
3

Hello jinnyzor, thank you for the fast reply. This is similar to:

python - I have plotly dash app, and get this error: Cannot read properties of null (reading ‘layout’) - Stack Overflow

I will try to implement it. Best Regards

4

I guess? Haha.

It just makes sure that you have a value to actually work with, else it just returns blank.

5

Works great

2 Likes