Taipy layout annotation text not updating itself when callback is triggered

Question

I am trying to create a network graph like this (https://plotly.com/python/network-graphs/).

It all worked fine until I try to add some annotation texts next to the links in the network graph.

The issue is that the annotation text is not automatically updating itself when on_change function is triggered. It only gets updated when the webpage is refreshed.

I have tried to print the text in the state when the callback is triggered. I do see the layout text values are updated in the callback, it just doesn't update in the visuals (unless the web is refreshed).

Answer 1

We have a rebuild property on charts to refresh the chart when its configuration is changed. However, annotations still need to be concerned by this property.

You can now use a partial to actualize your graph with the correct annotations.

The code below comes from the documentation on annotations with the changes to actualize annotations.

• The chart is put in a partial called p;
• A button on the page calls change_annotation(state) to update the annotations;
• This function changes the layout with the new annotations and updates the partial at the end.

from taipy.gui import Gui


def f(x):
    return x*x*x/3-x

x = [(x-10)/4.5 for x in range(0, 21)]

data = {
    "x": x,
    "y": [f(x) for x in x]
}

layout = {
    # Chart title
    "title": "Local extrema",
    "annotations": [
        # Annotation for local maximum (x = -1)
        {
            "text": "Local <b>max</b>",
            "font": {
                "size": 20
            },
            "x": -1,
            "y": f(-1)
        },
        # Annotation for local minimum (x = 1)
        {
            "text": "Local <b>min</b>",
            "font": {
                "size": 20
            },
            "x": 1,
            "y": f(1),
            "xanchor": "left"
        }
    ]
}

def change_annotation(state):
    layout["annotations"][0]["text"] = "General <b>max</b>"
    layout["annotations"][1]["text"] = "General <b>min</b>"
    state.layout = layout
    state.p.update_content(state, md_for_chart)


md_for_chart = "<|{data}|chart|x=x|y=y|layout={layout}|>"

md = """
<|part|partial={p}|>

<|change annotation|button|on_action=change_annotation|>
"""

gui = Gui(md)
p = gui.add_partial(md_for_chart)
gui.run()