plotly / plotly/plotly.js

Clickmode "event+select" activated and Clicking outside of Graph calls onUpdate incorrectly

Open
#6,977 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

I have looked for issues but couldn't find anything and just wanted to bring awareness to clickmode: "event+select" issue.

Hi, currently working on Streamlit + Plotly selections! I noticed this bug that didn't seem like a bug on Streamlit's side.

It seems like onUpdate gets called and graph gets updated visually incorrectly when clickmode: "event+select" and dragmode: "select" and doing selection clicks. I would expect onDeselect to be called and layout.selections to remove the selection because selectedpoints in data has []

Reproducible example: https://codesandbox.io/p/sandbox/react-forked-6rypkr?file=%2Fsrc%2FApp.tsx

Steps to reproduce:

  1. Click on a single point
  2. Click outside of a point

Expectation: Graph is not less than 100% opaque
Actual: Graph is less than 100% opaque and weird and onUpdate is not called

Video to show actual:

https://github.com/plotly/react-plotly.js/assets/16749069/632b9ef7-c213-4a27-a7c7-08f5b8c9417e

I read that most issues here are likely Plotly.js problems but not sure if that's the case because I went to check plotly.js code and onUpdate is a callback while plotly.js contains an update function as far as I can tell but I assume everything in react-plotly.js is based off plotly.js so just trying to bring extra awareness to this issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox entry point, App.tsx, and reproduce the behavior using clickmode "event+select" and dragmode "select". Then trace the Plotly.js selection/update path and how react-plotly.js handles callbacks; done means clicking outside a selected point restores full opacity and produces the expected deselection state and callback behavior.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.