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

Báo cáo tập trung vào Plotly.extendTraces và bao gồm một lệnh gọi tối thiểu, các cấu hình scatter và scattergl, cùng một phép so sánh với máy tính bảng Android có hiệu năng thấp hơn. Trước tiên, hãy tái hiện các lần cập nhật ở 100ms và 150ms, sau đó so sánh scatter với scattergl trên các thiết bị bị ảnh hưởng. Được xem là hoàn tất khi đã cô lập được nguyên nhân gây chặn và ghi nhận một giải pháp đã được xác minh hoặc một giới hạn rõ ràng.