plotly / plotly/react-plotly.js

Memory leak with uirevision while in storybook (scatter3d)

Đang mở
#349 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
1.1k
Fork
138
Merge trung bình
3 ngày 2 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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}
    />
  );
});

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với benchmark của Storybook và Scatter3D.tsx, so sánh các lần render lặp lại với uirevision=1 với phiên bản đã xóa trường đó. Tái hiện hành vi trong Storybook và so sánh với quan sát CodeSandbox được cung cấp, sau đó xác định liệu bộ nhớ bị giữ lại là do react-plotly.js, scatter3d hay môi trường Storybook gây ra. Được coi là hoàn tất khi phạm vi của leak có thể tái hiện và đã xác nhận được bản sửa hoặc có chẩn đoán upstream rõ ràng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
data-visualization, frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.