plotly / plotly/react-plotly.js
Memory leak with uirevision while in storybook (scatter3d)
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 1.1k
- フォーク
- 138
- 平均マージ
- 3日 2時間
- マージ済み PR(30日)
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
Storybook のベンチマークと Scatter3D.tsx から始め、uirevision=1 を指定した場合と、そのフィールドを削除したバージョンで、繰り返しレンダリングを比較します。Storybook で挙動を再現し、提供された CodeSandbox の観察結果と比較したうえで、保持されたメモリの原因が react-plotly.js、scatter3d、Storybook 環境のいずれであるかを特定します。リークの発生範囲を再現でき、確認済みの修正または明確な upstream の診断が得られれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- data-visualization, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100