plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Add Plotly.profile() API for performance profiling

Open Rhoahndur opened this issue 3 months ago • 1 comments

Overview

This PR adds a new Plotly.profile() API method that enables users to diagnose rendering performance of their Plotly charts by collecting timing data for each phase of the rendering pipeline.

Motivation

Users often ask "why is my chart slow?" but currently have no built-in way to diagnose where time is being spent. This profiler provides visibility into the rendering lifecycle, helping users understand whether bottlenecks are in data processing (doCalcdata), DOM manipulation (drawFramework), or actual drawing (drawData).

Future direction: This MVP focuses on timing collection. Down the line, this could potentially be extended to:

  • Provide optimization suggestions based on profile data (e.g., "consider using scattergl for datasets > 10k points")
  • Recommend optimal data structures for different trace types
  • Help users choose appropriate partial bundles based on their usage

I wanted to get community feedback on the core API before expanding scope.

What this PR does

  • Adds Plotly.profile(gd, [enable]) to enable/disable profiling on a graph div
  • Collects timing for rendering phases: supplyDefaults, doCalcdata, drawFramework, drawData, etc.
  • Stores results in gd._profileData after each render
  • Emits plotly_profiled event for reactive integrations
  • Zero overhead when profiling is disabled

Usage

// Enable profiling
Plotly.profile(gd);

// Render or update a chart
Plotly.react(gd, [{y: [1, 2, 3]}]);

// Inspect timing breakdown
console.log(gd._profileData);
// { total: 45.2, phases: { supplyDefaults: {...}, doCalcdata: {...}, ... } }

// Listen for profiling events
gd.on('plotly_profiled', data => console.log('Render took', data.total, 'ms'));

// Disable profiling
Plotly.profile(gd, false);

Files changed

  • src/lib/profiler.js (NEW) - Core timing utility
  • src/plot_api/profile.js (NEW) - Public API method
  • src/lib/index.js - Export profiler module
  • src/plot_api/index.js - Export profile method
  • src/plot_api/plot_api.js - Add timing hooks to rendering pipeline
  • test/jasmine/tests/profile_test.js (NEW) - Unit tests

Checklist

  • Working on dev branch, not master
  • Merged with latest upstream/master
  • Did NOT modify dist/ folder
  • npm run lint passes
  • Tests pass (npm run test-jasmine -- profile)

Note: This is my first contribution to plotly.js (working on two PRs for this project). I've done my best to follow the contribution guidelines and existing code patterns, but I'm very open to feedback on the API design, implementation approach, or anything else. Thank you for taking the time to review!

Rhoahndur avatar Nov 26 '25 21:11 Rhoahndur

Thank you for the contribution @Rhoahndur !

Profiling tools would be a great addition to the library, and we like the simplicity of this approach.

Could you explain why you chose these specific points to mark?

Could you open an issue and link it to this PR, describing the motivation for this work? What you have in the Motivation section is a great start; if you could provide specific examples of charts you have wanted to profile, that would also be helpful background.

It would also be helpful to see an example of the intended usage for this feature — would you be willing to put together a small demo of the profiler in action, with a few different charts that take different amounts of time to render, maybe on Codepen? You can link to the Plotly.js artifact from CircleCI so that this branch's changes are included.

emilykl avatar Dec 04 '25 21:12 emilykl