Plotly selection state is lost when re-rendering.

[DylanVann]

This codepen shows the issue: https://codepen.io/dylanvann/pen/OYaedz

The onHover handler forces a re-render.

Whenever the Plot is re-rendered some state is lost. In particular the selection is lost.

How it behaves when re-rendering (selection box is not maintained):

How it behaves when not re-rendering (selection box is maintained):

[nicolaskruchten]

You should be able to use uirevision to avoid most such problems: https://plot.ly/javascript/uirevision/

[DylanVann]

It does not seem to work for selection state.

[nicolaskruchten]

In your codepen, what does the problem look like? Can you post a gif? I can't replicate any issues on this end...

[DylanVann]

Posted a couple gifs in the description.

[nicolaskruchten]

Oh I see, the selection box disappears. Yes, this is not something which is persistent in plotly.js at the moment (it's not part of the figure spec at all actually) ... issue: plotly/plotly.js#1851

[DylanVann]

Cool. Ideally to fit React's model selection could even be a controlled prop.

[nicolaskruchten]

Yes, this would be ideal but the underlying Plotly.js library doesn't really work in such a way as to be compatible with this. The idea behind uirevision is for it to be more controllably uncontrolled :)

[yifei-zhan]

@DylanVann you can control the constraint-range + range + selectedpoints property of traces to maintain the select state yourself, but it takes a lot of time. The api is not programmer-friendly

[will-moore]

Just ran into this issue myself.
When I drag to select a region on the scatter plot, I want to show the selected items so I'm using onSelected to update the selected IDs in a parent Component. But unfortunately this state change is causing the <Plot/> inside the <PlotContainer /> to re-render and so I don't see the selection change in the Plot:

Component = () => {
    const [selectedIds, setSelectdIds] = React.useState([]);

    return (
        <div>
            <PlotContainer setSelectdIds={setSelectdIds} />
            <ShowSelected selectedIds={selectedIds} />
        </div>
    )

Any pointers or workarounds would be much appreciated? Thanks.

[will-moore]

Actually, I re-read the issue above and realise that was really concerned about the selection box but I'm not too bothered about the box. For me, I lose the selection itself. Is there a way to preserve the selected points? I've used all the state management described at https://github.com/plotly/react-plotly.js#state-management to preserve the axis ranges etc but I don't see selected objects in any of that state?

[matthias-ccri]

It would be good to get the selection as an input props. I was hoping to use react-plotly. I'm implementing something like crossfilter where the plot selections/brushes are a key part of the interface.

However it sounds like the underlying plotly library doesn't have robust selection support. Is there some workaround, so I can use react-plotly instead of d3? — maybe overlaying my own selection box outside of plotly, but then it would have to synchronize with the margins and scales.

[will-moore]

I'm using Plotly with crossfilter, and it seems that sometimes I am losing the current selection because of a re-render and sometimes not. Haven't got to the bottom of it yet....
https://github.com/will-moore/parade-crossfilter/blob/master/src/plots/Plot.js is my wrapper to maintain axis ranges on re-render. The parent https://github.com/will-moore/parade-crossfilter/blob/master/src/plots/ScatterPlot.js listens for when the crossfilter filter changes to update the plot. Based on React-crossfilter example at https://www.lighttag.io/blog/react-dc-js/.

[m-podlesny]

@DylanVann Is your problem resolved? Shall we close this issue?

[DylanVann]

As far as I'm aware it is not.