plotly / plotly/plotly.js

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

Aperta
#6,822 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

feature P3
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

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!

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia da src/traces/scattergl/select.js e verifica come la selezione tramite riquadro elabora attualmente le trace, usando l'esempio scattergl segnalato come riferimento del comportamento. Determina in che modo un'opzione selectable a livello di trace dovrebbe influire sulla selezione, mantenendo la selezione per le altre trace. Il lavoro è concluso quando le trace non selezionabili vengono escluse e la selezione tramite riquadro è reattiva con dataset di grandi dimensioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
data-visualization, frontend, performance
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.