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。完成的标准是隔离出阻塞的原因，并记录经过验证的解决方案或明确的限制。