Skip to content

Conversation

@Rhoahndur
Copy link

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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant