How to create components from JSON

Dash Python
1

Hello,

I would like to know if its possible to generate an html component from a JSON dict object, generated with the to_plotly_json() method. I found a method called generate_class in the dash development module but it does not seem to work.

I would like something like this pseudocode:

from dash_html_components import Div

results = Div(children="children here computed after a long procedure to be returned in a callback") 
# Magic function generate_component that creates a component with the serialized information
retrieved_results = generate_component(results)

And thus results and retrieved_results are the same component. Is this even possible ?

Thanks for your help!

2

Hi @aquinomas welcome to the forum! Not sure I completely understand what you are after here. So, you’ve got this plotly figure object which is the result of a long computation, and which is saved as a JSON string. If you want to display it your app, you can create a new plotly figure doing

import plotly.graph_objects as go
fig = go.Figure(json_dict)

and then pass the fig objects to a dcc.Graph. Would this be a solution?

3

Hi @Emmanuelle, thank you for your answer. Sorry, I was not very clear.
The problem is that I need something more general but effectively in the spirit of go.Figure(json_dict), that is, a method that receives a json_dict as input to generate html components. I am using tabs, so my goal is two solve the issue of changing tabs and keeping the generated content. Below an simple example of what I want to do:

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
tab1_content = Div("simple content")

def some_big_computation():
    
    result = big_computation_here()
    # Result looks like this:  [P("result line 1"), P(["result line 2", Mark("highlighted token")])]
    return result

tabs = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="Tab 1", tab_id="tab-1"),
                dbc.Tab(label="Tab 2", tab_id="tab-2"),
            ],
            id="tabs",
            active_tab="tab-1",
        ),
        html.Div(id="content"),
    ]
)

@app.callback(Output("content", "children"), [Input("tabs", "active_tab")])
def switch_tab(at):
    if at == "tab-1":
        return tab1_content
    elif at == "tab-2":
        tab2_content = some_big_computation()
        return tab2_content
    return html.P("This shouldn't ever be displayed...")

I would like to store tab2_content, which is a list of Paragraphs ( P objects) with Markers sometimes. I could indeed store the content of these objects but it would be very cumbersome as they themselves come from a list of complex objects (list of FlairNLP Sentences). So I could try to serialize the content of this Sentence list but it would be more cumbersome I believe.

In any case, I thought the to_plotly_json Component method would have some sort of inverse function (such as from_plotly_json) but I could not find it.

So in the end, I am building a pair of functions to serialize and de-serialize a component. I would like to know if it is good practice, as maybe there is a more appropriate way of doing what I want (given that I could not find a lot of resources about the topic. This comes very close Serialising/Deserialising Dash components).

Thank you again!

4

Hi again!

Well actually I know now why there are not a lot of related questions: I can actually store components directly in the dcc.Store! I was confused between the old invisible-div method where you needed your data to be serializable :confused:

In conclusion, no need to serialize your components. Just store them in the Store.

2 Likes