plotly / plotly/plotly.js

add trace option to make some data not selectable in order to speed up slow box select

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

Nobody has claimed this yet.

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

Description

Hi,

When there are a lot of data traces displayed in the plot (>10,000), box select is slow and laggy when you click and drag to select data traces. I notice it is even slower in version plotly.js@2.27.1 than it is in plotly.js@2.5.1. A hypothetical solution for me would be if you added a feature to exclude some traces from being selectable, as in the example below.

Example of proposed feature:

import React from 'react';
import Plot from 'react-plotly.js';

class MyPlot extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3, 4],
            y: [10, 15, 13, 17],
            type: 'scattergl',
            mode: 'lines+markers',
            name: 'Selectable Trace'
          },
          {
            x: [1, 2, 3, 4],
            y: [16, 5, 11, 9],
            type: 'scattergl',
            mode: 'lines+markers',
            name: 'Non-selectable Trace',
            selectable: false   //  <------ THIS IS THE NEW FEATURE THAT IS BEING REQUESTED
          }
        ]}
        layout={{ 
          title: 'Selectable vs Non-selectable Traces'
        }}
      />
    );
  }
}

I have a temporary fix to speed up selection. When I tested this naive change, box select's click and drag is no longer laggy:

// Change in file: plotly.js/src/traces/scattergl/select.js
 module.exports = function select(searchInfo, selectionTester) {
  return [];  // Changed to always return no selected traces, because my own onSelected handler can do all the work using only the selected x, y range coordinates.
 }

If you can tell me how to monkey patch this in, that would be very helpful!

Thanks!

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 src/traces/scattergl/select.js and review how box selection currently processes traces, using the reported scattergl example as the behavior reference. Determine how a trace-level selectable option should affect selection while preserving selection for other traces. Done means non-selectable traces are excluded and box select is responsive with large datasets.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
data-visualization, frontend, performance
Issue type
Feature
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.