Hello! I’ve been here a lot for answers, but this is my first post. Apologies for any bad etiquette.
I’m using react-plotly.js
with typescript. I’m running into an issue with dragging on the graph (such as to make a selection). I’m not sure if this is known or by design. The following is a minimal example to demonstrate the behavior.
import React, { useState } from 'react';
import Plot from 'react-plotly.js';
const exampleData:Plotly.Data[] = [
{
type: "scattergl",
x: [1,2],
y: [1,2]
}
]
function App() {
const [selectionQ, setSelectionQ] = useState(false);
return (
<>
<div>
<button
onClick={() => setSelectionQ(!selectionQ)}
>
Trigger Selection
</button>
</div>
<Plot
data={exampleData}
layout={{
dragmode: selectionQ ? 'select' : 'zoom'
}}
/>
</>
);
}
export default App;
It is simply a button that controls a state governing whether the default dragmode is select
or zoom
. What happens is the page loads fine, and everything works. Once the button is clicked, the dragmode switches to select
, but when I try to drag (not just click), I get the following error.
Cannot read properties of null (reading '0')
TypeError: Cannot read properties of null (reading '0')
at Object.select [as selectPoints] (http://localhost:3004/static/js/bundle.js:103325:54)
at _doSelect (http://localhost:3004/static/js/bundle.js:17797:49)
at reselect (http://localhost:3004/static/js/bundle.js:17892:31)
at dragOptions.moveFn (http://localhost:3004/static/js/bundle.js:17190:22)
at HTMLDocument.onMove (http://localhost:3004/static/js/bundle.js:5184:23)
After extensive head-slamming, I’ve discovered that the problem seems to be with scattergl
because it all works fine if I use scatter
.
Some more observations (maintaining scattergl
):
- Moving the definition of
exampleData
into theApp
function fixes the issue, but this is a problem if I’m trying to pass the data to a state as a prop. - Manually selecting the
Box Select
tool does NOT cause the same error. - In fact, after manually selecting the
Box Select
tool (or even just ignoring the initial error), the button works totally fine. - Defaulting the
selectionQ
state totrue
works totally fine, and the button can be toggled without issue.
Again, I’m not sure if this is a known limitation of scattergl
or if I’m just doing something in some horribly unidiomatic way.
Thanks!