Plotly.extendTraces freezes/lags on some devices / JavaScript

Der Bericht konzentriert sich auf Plotly.extendTraces und umfasst einen minimalen Aufruf, Konfigurationen für scatter und scattergl sowie einen Vergleich mit einem leistungsschwächeren Android-Tablet. Beginne damit, Aktualisierungen bei 100ms und 150ms zu reproduzieren, und vergleiche dann scatter mit scattergl auf den betroffenen Geräten. Als erledigt gilt die Aufgabe, wenn die Ursache der Blockierung isoliert und eine verifizierte Lösung oder eine klare Einschränkung dokumentiert ist.

Hello Plotly-Community,

first of all I'd like to thank for all your awesome work for this library!

I'm developing a coffee application (android + ios), where users can track their coffee parameters, and attach bluetooth scales, pressure devices, refractometer aswell as talking with portafilters via HTTP.

All this devices sends data back, which then get plotted in real time.

• Weight
• Temperature
• Pressure
• Flow

The bluetooth scales sends in a time range from about 100ms each time a data package with the current weight and this gets then drawn into the application.

Several months I've got an request by users, which bought some lower-quality tablets (Like Samsung Galaxy A7 Lite).

A user has send me his device to debug the whole situation, because first I thought it may be has something to do with the bluetooth-chip or wifi chip and the data beeing sent over it.

But after all debugging I found out that when executing

const xData = [[]];
const yData = [[]];
const tracesData = [0];

Plotly.extendTraces(
  this.profileDiv.nativeElement,
  {
    x: xData,
    y: yData,
  },
  tracesData,
);

its freezing the application for a bit and with this the whole thread is blocked and lags are the result.

What I did as an actual work around, I added a settings toggle for those users which then can set an interval-timer for refreshing the graph:

 if (this.graph_threshold_frequency_update_active === true) {
      if (
        Date.now() - this.graphUpdateChartTimestamp <
        this.graph_frequency_update_interval
      ) {
        return;
      }
      this.graphUpdateChartTimestamp = Date.now();
    }

Going from 100ms to 150ms did the magic already - so just 50ms more.

Anyhow I was wondering what causes the .extendTraces blocking that much?
Is it because in the Galaxy is a such low powered GPU?

I'm using Plotly 2.3.X, but also tried the 3.0-RC both with the same effect.

My layout of the plotly chart has already undergone some "customization":

layout = {
        width: chartWidth,
        height: chartHeight,
        margin: {
          l: 20,
          r: 20,
          b: 20,
          t: 20,
          pad: 2,
        },
        showlegend: false,
        dragmode: false,
        hovermode: false,
        clickmode: 'none',
        extendtreemapcolors: false,
        extendiciclecolors: false,
        extendsunburstcolors: false,
        extendfunnelareacolors: false,
        extendpiecolors: false,
        hidesources: true,
        hoverdistance: 0,
        spikedistance: 0,
        autosize: false,
        autotypenumbers: 'strict',
        xaxis: {
          tickformat: tickFormat,
          visible: true,
          domain: [0, 1],
          fixedrange: true,
          type: 'date',
          range: [startRange, endRange],
        },
        yaxis: {
          title: '',
          titlefont: { color: '#cdc2ac' },
          tickfont: { color: '#cdc2ac' },
          fixedrange: true,
          side: 'left',
          position: 0.03,
          rangemode: 'nonnegative',
          range: [suggestedMinWeight, suggestedMaxWeight],
        },
        yaxis2: {
          title: '',
          titlefont: { color: '#7F97A2' },
          tickfont: { color: '#7F97A2' },
          anchor: 'free',
          overlaying: 'y',
          side: 'right',
          showgrid: false,
          position: 0.97,
          fixedrange: true,
          rangemode: 'nonnegative',
          range: [suggestedMinFlow, suggestedMaxFlow],
        },
      };

Also my traces:

traces.weightTrace = {
      x: [],
      y: [],
      name: this.translate.instant('BREW_FLOW_WEIGHT'),
      yaxis: 'y',
      type: 'scatter',
      mode: 'lines',
      line: {
        shape: 'linear',
        color: _isReference ? '#ebe6dd' : '#cdc2ac',
        width: 2,
      },
      visible: _isDetail ? true : _graphSettings.weight,
      hoverinfo: _isDetail ? 'all' : 'skip',
      showlegend: false,
    };

Adding to this: I used before scattergl, which made also a huge performance issues on other tablets, so changing to scatter fix this already.

Happy if I can share more insights, the app is open source, so pointing to it and sharing the whole code is also no issue.

As a reference, the graph looks like this e.g.:

Have a great cup of coffee & Thanks
Lars