plotly / plotly/plotly.js

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

Offen
#6,822 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

feature P3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

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!

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginnen Sie mit src/traces/scattergl/select.js und prüfen Sie, wie die Box-Auswahl derzeit Traces verarbeitet, wobei das gemeldete scattergl-Beispiel als Referenz für das Verhalten dient. Ermitteln Sie, wie eine auf Trace-Ebene gesetzte selectable-Option die Auswahl beeinflussen sollte, während die Auswahl für andere Traces erhalten bleibt. Die Aufgabe ist erledigt, wenn nicht auswählbare Traces ausgeschlossen werden und die Box-Auswahl bei großen Datensätzen reaktionsschnell ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend, performance
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.