Plotly.extendTraces freezes/lags on some devices / JavaScript

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

このレポートは Plotly.extendTraces を中心とし、最小限の呼び出し、scatter と scattergl の設定、および低性能の Android タブレットとの比較を含みます。まず 100ms と 150ms で更新を再現し、次に影響を受けるデバイス上で scatter と scattergl を比較します。ブロッキングの原因が切り分けられ、検証済みの解決策または明確な制限事項が記録されていれば完了です。