plotly / plotly/react-plotly.js

Memory leak with uirevision while in storybook (scatter3d)

オープン
#349 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
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}
    />
  );
});

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. 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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。