Pipeline Profiler — Static Analysis

A single-file, zero-backend web tool for loading, visualising, and comparing JSON pipeline profile outputs. Open index.html directly in a browser — no server or build step required.

Features

Profile loading

• Drag and drop one or more JSON files onto the sidebar, or use the Browse button.
• All loaded profiles are auto-selected and immediately visible.
• Profiles can be renamed inline by hovering over the entry and clicking the pencil icon. The label propagates to all charts, table headers, and comparison views.
• Individual profiles can be removed with the X button, or the entire list cleared at once.

Single profile view

Selecting one profile shows a full breakdown of that run:

• Overview cards — pipeline name, total wall time, start and end timestamps, source filename.
• System info — Python version, OS, CPU name and logical core count, GPU name and VRAM (if available).
• Execution timeline — horizontal Gantt chart showing each stage positioned at its cumulative start time.
• Wall time vs CPU time — grouped bar chart per stage.
• Memory usage — peak memory and memory delta per stage.
• GPU VRAM delta — per stage, shown only when a GPU is present in the profile.
• Throughput — displayed automatically when any stage reports throughput metrics.
• Stage details table — wall time, CPU time, CPU utilisation percentage, share of total time (with inline bar), peak memory, memory delta, GPU delta, and status per stage.

Comparison view

Selecting two or more profiles switches to a side-by-side comparison:

• Run summary table — pipeline name, total wall time, stage count, start time, and status for each profile.
• Key differences — stages ranked by variance across profiles. For two profiles this shows direction (faster/slower) and percentage change. For three or more it shows the fastest and slowest profile per stage along with the spread percentage. Stages with less than 5% spread are filtered out.
• Total wall time chart — single bar per profile.
• Stage wall time comparison — grouped bars, one group per stage, one bar per profile.
• Stage peak memory comparison — same layout as above.
• CPU efficiency comparison — CPU utilisation percentage per stage per profile.
• Detail tables — wall time, peak memory, and CPU time per stage per profile, with best values highlighted in green and worst in red.

Share links

The "Copy share link" button in the sidebar footer compresses all loaded profiles (including labels) into a URL-safe string using LZ-based compression and writes it to the URL hash. Pasting that URL in any browser will decompress and restore the exact same profiles and labels with all profiles auto-selected.

Select all / Deselect all

The sidebar footer contains a toggle button that selects all loaded profiles at once or clears the selection depending on current state.

Dark and light mode

A toggle button in the top-right header switches between a dark navy theme and a light blue theme. The preference is saved to localStorage and restored on next open. Charts re-render with appropriate colours when the theme changes.

JSON format

The tool expects JSON files with the following top-level structure. All fields are optional — missing fields are displayed as a dash.

{
  "pipeline": "string",
  "started_at": "ISO 8601 timestamp",
  "finished_at": "ISO 8601 timestamp",
  "total_wall_time_s": 305.5,
  "system": {
    "python": "3.12.3",
    "os": "Linux-...",
    "cpu_name": "Intel64 Family 6 ...",
    "cpu_count": 24,
    "gpu": {
      "available": true,
      "name": "NVIDIA GeForce RTX 5070 Ti",
      "total_vram_mb": 16603.5,
      "count": 1
    }
  },
  "stages": [
    {
      "name": "stage_name",
      "wall_time_s": 10.4,
      "cpu_time_s": 0.07,
      "peak_memory_mb": 2.5,
      "start_memory_mb": 0.0,
      "end_memory_mb": 0.9,
      "memory_delta_mb": 0.9,
      "gpu_start": { "allocated_mb": 0.0, "reserved_mb": 0.0, "free_mb": 16603.5 },
      "gpu_end":   { "allocated_mb": 0.0, "reserved_mb": 0.0, "free_mb": 16603.5 },
      "gpu_delta_allocated_mb": 0.0,
      "throughput": {},
      "status": "ok",
      "error": null
    }
  ]
}

Files do not need to share identical stage sets. When comparing, stages are unioned across all selected profiles and missing entries are shown as a dash.

Dependencies

All dependencies are loaded from CDN and require an internet connection on first use. No installation or build step is needed.

| Library | Version | Purpose | |||| | Chart.js | 4.4.0 | All charts | | Lucide | latest | Icons | | lz-string | 1.5.0 | Share link compression |

Usage

1. Open index.html in a modern browser (Chrome, Firefox, Edge, or Safari).
2. Drop one or more .json profile files onto the sidebar drop zone.
3. Profiles load and auto-select. A single selected profile shows the detailed view; two or more show the comparison view.
4. Rename a profile by hovering over it and clicking the pencil icon.
5. Use "Copy share link" to generate a URL that restores the current session for anyone you share it with.