Plotly - Dash @app.callback does not re-render Dash elements inside custom component unless re-render is triggered somehow

Question

Inside usage.py I try to update graph-tooltip:

@app.callback(
Output("grid-value", "children"),
Input("live-graph", "hoverData"),
)
def display_hover(hoverData):
    if hoverData is None:
        return no_update

    # demo only shows the first point, but other points may also be available
    pt = hoverData["points"][0]

    x = pt["x"]
    y = pt["y"]

    children = f"{x}:{y}"

    return children

Both the live-graph and grid-value elements are inside custom Dash component (dash-react-flow, but with a new node type that can contain anything passed to it from Dash).

Now if I over a the live-graph, it gets updated only once I click, so it seems not to be re-rendering properly.

I implemented the node:

function AnyContentNode({ data }) {
  return (
    <div className="any-content-node" id={data.id} >
      <div>
          {
              data.elements?.map((node, index) => {
                  return window.elements[data.elementId][node];
              })
          }
      </div>
        {
            data.handles?.map((node, index) => {
              return <Handle key={index} type={node.direction} position={node.position} id={node.id} />
            })
        }
    </div>
  );
}

where window.elements contains the node that is not being updated properly. I suspect that storing elements inside window.elements might be the cause of this, but I did not find any other way to pass those elements into the custom node without having to change the source code for ReactFlow.

So far it works for non-dynamic elements, but currently I got stuck when I have to update dynamic element. It gets occasionally updated, but that is not very good user-experience.

Is there a way to force re-render/or somehow fix this? I am quite new to React, so I don't have a good knowledge of the default hooks etc. I tried to see whether componentDidUpdate gets triggered and it does (so many times, every second).

Plotly - Dash @app.callback does not re-render Dash elements inside custom component unless re-render is triggered somehow

0 Answers0