Memory leak with uirevision while in storybook (scatter3d)

Aperta
  • Qualcosa non va?
#349 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
data-visualization, frontend

Direzione di ricerca

Inizia con il benchmark di Storybook e Scatter3D.tsx, confrontando rendering ripetuti con uirevision=1 con la versione in cui quel campo è stato rimosso. Riproduci il comportamento in Storybook e confrontalo con l’osservazione fornita di CodeSandbox, quindi determina se la memoria trattenuta è causata da react-plotly.js, scatter3d o dall’ambiente Storybook. Il lavoro è completato quando l’ambito del leak è riproducibile ed esiste un fix confermato o una diagnosi upstream chiara.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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}
    />
  );
});
Lingua principale
JavaScript
Stelle
1.1k
Fork
138
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di plotly/react-plotly.js

Tutte le issue di plotly/react-plotly.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.