plotly / plotly/plotly.js

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

Ouverte
#6,822 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

feature P3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
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!

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par src/traces/scattergl/select.js et examinez la façon dont la sélection par cadre traite actuellement les traces, en utilisant l’exemple scattergl signalé comme référence du comportement. Déterminez comment une option selectable au niveau d’une trace devrait affecter la sélection tout en préservant la sélection des autres traces. C’est terminé lorsque les traces non sélectionnables sont exclues et que la sélection par cadre reste réactive avec de grands ensembles de données.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
data-visualization, frontend, performance
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.