Plotly.extendTraces freezes/lags on some devices / JavaScript

[graphefruit]

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

[gvwilson]

Hi, and thanks for your report. For tech support and "how-to" questions, please post in our community forum https://community.plotly.com/. Thank you - @gvwilson

[graphefruit]

Hello @gvwilson thank you for the comment and support!

Thats not an "how-to" or tech-supports, its an bug which is existing on low-budget devices.
I can clearly make an ticket on the community itself, but I thought bugs where to report here?

Thanks for guidance!
Best
Lars

[gvwilson]

Thanks for the clarification @graphefruit - I'll reopen and add it to our queue, though realistically we're not going to be able to get to it any time soon :-(

[graphefruit]

Thank you & Understood! When theres time i'M happy to support again!
If I can already assist with some things like JavaScript-Traces or something else I'd be happy to support, after I like stated got an tablet from a user where I could reproduce this case.