plotly / plotly/react-plotly.js
Memory leak with uirevision while in storybook (scatter3d)
還沒有人認領這個 Issue。
- 主要語言
- JavaScript
- 星號
- 1.1k
- 分支
- 138
- 平均合併
- 3 天 2 小時
- 30 天內合併 PR
- 4
描述
I was doing some benchmarking and noticed a memory leak stemming from having uirevision=1. i comment out the field and no more leak.
I can't say if this is isolated to scatter3d, but thats what I was benchmarking.
i hit the issue only in storybook. porting the same code over to codesandbox does not encounter the leak. likewise if i comment out my <Scatter3D/> component from the Render, i do not encounter the leak.
apologies in advance if this is a storybook bug and not a plotly bug.
this is all pretty throwaway code half written with claude so forgive me for messiness!
// story
import type { Meta, StoryObj } from "@storybook/react";
import {
useEffect,
useState,
useRef,
useCallback,
useDeferredValue,
} from "react";
import { Scatter3D } from "./Scatter3D";
const meta: Meta<typeof Scatter3D> = {
title: "Charts/Scatter3D",
component: Scatter3D,
parameters: {
layout: "centered",
},
};
export default meta;
// Helper function to generate random data
function generateRandomData(traceCount: number, pointsPerTrace: number) {
return Array.from({ length: traceCount }, (_, traceIndex) => ({
x: Array.from({ length: pointsPerTrace }, () => Math.random() * 100),
y: Array.from({ length: pointsPerTrace }, () => Math.random() * 100),
z: Array.from({ length: pointsPerTrace }, () => Math.random() * 100),
name: `Trace ${traceIndex + 1}`,
}));
}
export const Benchmarking: StoryObj<{
traceCount: number;
updateFrequencyMs: number;
dataPointsPerTrace: number;
}> = {
args: {
traceCount: 1,
dataPointsPerTrace: 10000,
updateFrequencyMs: 100,
},
render:
};
// Scatter3D.tsx
import React, { memo } from "react";
import Plot from "react-plotly.js";
export interface Scatter3DProps {
data: Array<{
x: number[];
y: number[];
z: number[];
name?: string;
}>;
title?: string;
xAxisLabel?: string;
yAxisLabel?: string;
onAfterPlot?: any;
}
const spikeConfig = {
spikethickness: 1,
spikesides: true,
spikecolor: "black",
};
export const Scatter3D = memo(function Scatter3D({
data,
title = "3D Scatter Plot",
xAxisLabel = "X Axis",
yAxisLabel = "Y Axis",
onAfterPlot,
}: Scatter3DProps) {
return (
<Plot
data={data.map((trace, i) => ({
...trace,
type: "scatter3d" as const,
mode: "markers",
marker: {
color: `hsl(${(i * 360) / data.length}, 70%, 50%)`,
size: 2,
opacity: 0.8,
symbol: "circle",
line: { width: 0 },
},
name: trace.name ?? `Trace ${i + 1}`,
}))}
layout={{
width: 500,
height: 500,
scene: {
aspectmode: "cube",
xaxis: { ...spikeConfig, title: xAxisLabel },
yaxis: { ...spikeConfig, title: yAxisLabel },
zaxis: { ...spikeConfig, title: "Z Axis" },
camera: {
up: { z: 1 },
eye: { x: 2, y: 2, z: 1.5 },
},
},
uirevision: 1,
}}
config={{
displaylogo: false,
responsive: true,
plotGlPixelRatio: 1,
showAxisDragHandles: false,
showAxisRangeEntryBoxes: false,
queueLength: 0,
}}
useResizeHandler={false}
onAfterPlot={onAfterPlot}
/>
);
});
貢獻指南
這個儲存庫沒有索引到貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從 Storybook 基準測試和 Scatter3D.tsx 開始,比較使用 uirevision=1 時的重複渲染與移除該欄位後的版本。先在 Storybook 中重現該行為,再將其與提供的 CodeSandbox 觀察結果進行比較,然後確定保留的記憶體是由 react-plotly.js、scatter3d 還是 Storybook 環境造成的。完成的標準是:leak 的範圍可以重現,並且已確認修正方案或得出明確的上游診斷。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- react, typescript
- 領域
- data-visualization, frontend
- Issue 類型
- 缺陷
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100