plotly / plotly/react-plotly.js
Chart type scatter3d make onClick loop when calling history.push inside it
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
Using Plot inside a Router with type "scatter3d" and trying to use history inside onClick (only if it doesn't unmount the Plot Component) make onClick loop after a first click.
Minimal example:
import Plot from "react-plotly.js";
import { BrowserRouter, Route, useHistory } from "react-router-dom";
function Chart3D() {
const history = useHistory();
return (
<Plot
onClick={() => {
console.log("This will be printed a lot");
history.push("/");
}}
data={[
{
x: [1],
y: [1],
z: [1],
type: "scatter3d",
},
]}
/>
);
}
export default function App() {
return (
<BrowserRouter>
<Route path="/" component={Chart3D} />
</BrowserRouter>
);
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the minimal example with react-plotly.js, BrowserRouter, useHistory, a scatter3d Plot, and history.push in onClick. Trace why the handler fires repeatedly after the first click without unmounting the Plot component. Done means the callback runs once per click while navigation still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100