Plotly.extendTraces freezes/lags on some devices / JavaScript
維護者通常 1 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 35/100
- Issue 類型
- 缺陷
- 描述清晰度
- 需要釐清
- 活躍度
- 停滯
- 技術堆疊
- javascript
研究方向
該報告以 Plotly.extendTraces 為中心，包含一個最小呼叫、scatter 與 scattergl 設定，以及與較低效能 Android 平板電腦的比較。先重現 100ms 和 150ms 時的更新，接著在受影響的裝置上比較 scatter 與 scattergl。完成的標準是隔離出造成阻塞的原因，並記錄經驗證的解決方案或明確的限制。
由索引模型根據 Issue 內容生成。
描述
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
- 主要語言
- JavaScript
- 星號
- 18.4k
- 分支
- 2k
- 平均合併
- 1 天 19 小時
- 30 天內合併 PR
- 20
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
plotly/plotly.js 的其他 Issue
-
chore P3 plotly-internal size: 3 task
難度 2/5 1-3 小時 新手友好度 77/100
plotly/plotly.js#8064 · 1 則留言 ·
維護者通常 1 天內回覆
-
chore P1 plotly-internal size: 1 task
難度 1/5 1 小時以內 新手友好度 82/100
維護者通常 1 天內回覆
-
chore P3 plotly-internal size: 1 task
難度 2/5 1-3 小時 新手友好度 65/100
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 65/100
plotly/plotly.js#7648 · 3 則留言 ·
維護者通常 1 天內回覆
-
bug infrastructure P2
難度 1/5 1 小時以內 新手友好度 65/100
維護者通常 1 天內回覆
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 85/100
維護者通常 3 天內回覆
-
Add: Atlas TV未關閉channels:add check:passed
難度 2/5 1-3 小時 新手友好度 74/100
維護者通常 4 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 82/100
jaegertracing/jaeger-ui#4547 · 3 則留言 ·
維護者通常 1 天內回覆
-
feedback simulation workshop
難度 2/5 1-3 小時 新手友好度 75/100
githubnext/gh-aw-workshop#4090 ·
維護者通常 1 天內回覆
-
bug deck: add to staging level: missing p-feature: Manage Submissions p-feature: Submissions and process priority: MUST HAVE ready for dev lead role: missing size: missing time sensitive
難度 2/5 1-3 小時 新手友好度 67/100
hackforla/tdm-calculator#3581 ·
維護者通常 2 天內回覆