How to detect changes by javascript in dash

Dash Python
4

Thanks!
Changed my code, added also changes Store from js. All is detectable now.

For someone who will search for the solution:

from dash import html, Output, Input, Dash, no_update, dcc
import json
import time

app = Dash(__name__)
app.layout = html.Div(
    [
        html.Button("testing1", "testing1"),
        html.Div(id="test1"),
        html.Div(id="test1_javascript"),
        html.Div(id="test1_javascript_as_component"),
        html.Div(id="test1_javascript_as_reactdom"),
        dcc.Store(id="js_data_store", data={}),
        html.Div(id="log"),
    ]
)

app.clientside_callback(
    """function (n) {
        function render_react_element(element){
            const { type, namespace, props } = element;
            // Validate data (optional, add checks for type and namespace)
            // Construct the element based on type and namespace
            const Element = window[namespace][type];
            console.log(`Element for ${element}:`, typeof(Element), Element);
            const created_element = React.createElement(Element, props);
            return created_element;
        }

        // document.getElementById('test1_javascript').innerText=`update with js, n=${n}`;
        dash_clientside.set_props("test1_javascript", {children: `update with js, n=${n}`});

        let dom_value = window.dash_html_components.H1({"children": `value from reactdom ${n}`});
        console.log('dom_value: ' , typeof(dom_value), dom_value);
        // ReactDOM.render(dom_value, document.getElementById('test1_javascript_as_reactdom'));
        dash_clientside.set_props('test1_javascript_as_reactdom', {'children':{'props': {'children': `value from reactdom ${n}`}, 'type': 'H1', 'namespace': 'dash_html_components'}})

        if (n) {
                    console.log('n:', n);
        
                    dash_clientside.set_props("js_data_store", {data: {'value':'new_value'}}); // working
                    
                    
                    const element = 
                        """
    + json.dumps(html.H1(f"test1").to_plotly_json())
    + """
                console.log('element: ' , typeof(element), element);
                // document.getElementById('test1_javascript_as_component').innerText=element;

                if (1){
                    const created_element = render_react_element(element);
                    console.log('created_element: ', typeof(created_element), created_element);
                    // ReactDOM.render(created_element, document.getElementById('test1_javascript_as_component'));
                    var children = JSON.parse(JSON.stringify(created_element))['props'];
                    console.log('test1_javascript_as_component', typeof(children), children);
                    // dash_clientside.set_props("test1_javascript_as_component", {children: element})
                    dash_clientside.set_props("test1_javascript_as_component", {children: [element, element]})
                }

                return element;
        }
        
        return window.dash_clientside.no_update
    }""",
    Output("test1", "children"),
    Input("testing1", "n_clicks"),
)


@app.callback(
    Output("log", "children"),
    [
        Input("test1", "children"),
        Input("test1_javascript", "children"),
        # Input("test1_javascript", "value"),
        Input("test1_javascript_as_reactdom", "children"),
        Input("test1_javascript_as_component", "children"),
        Input("js_data_store", "data"),
    ],
)
def detect_changes_with_javascript(*changes):
    print(f"{changes=}")
    if changes:
        return [html.Div(f"detected at {time.time()} {changes=}")]
    return no_update


if __name__ == "__main__":
    app.run_server(debug=True)

For those who want to understand the speed of set_props: Dash_clientside.set_props 50 times slower than document.getElementById(id).innerText

2 Likes