feat(chartjs): implement flamegraph-basic

[github-actions]

Implementation: flamegraph-basic - javascript/chartjs

Implements the javascript/chartjs version of flamegraph-basic.

File: plots/flamegraph-basic/implementations/javascript/chartjs.js

Parent Issue: #4665

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (~#FAF8F1). Title "flamegraph-basic · javascript · chartjs · anyplot.ai" is dark and bold; italic subtitle "Simulated CPU profile · bar width = samples · horizontal order is arbitrary, not temporal" sits below it. Y-axis title "Call stack depth (root → leaf)" rotated on the left, numeric depth ticks 0–6, X-axis title "Samples" with linear ticks 0–378. Stacked horizontal bars layer bottom-up from main (full-width red, depth 0) through runServer (ochre) and handleRequest (amber), up to leaves like executeQuery (ochre, 78), compileTemplate (red), renderHTML (red). Colors are the three Imprint warm anchors #DDCC77, #BD8233, #AE3030. Function names render inside wide-enough bars; narrow ones (writeR…) truncate with an ellipsis. All chrome and bar-internal labels readable — no light-on-light failures.

Dark render (plot-dark.png): Warm near-black background (~#1A1A17). Title and subtitle render in light Imprint ink — clearly readable. Y-axis title, axis ticks, X-axis title all in light ink — readable. Grid hairlines remain subtle but visible. Bar colors are identical to the light render (same warm anchors at the same positions: main=red, runServer=ochre, handleRequest=amber, …). Inside-bar text contrast is preserved (dark text on amber/ochre bars; light text on matte-red bars). No dark-on-dark failures.

Score: 85/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	12	15
Code Quality	9	10
Library Mastery	8	10
Total	85	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — readable in both themes; dark-text-on-amber is slightly thin at luminance threshold 0.5
• VQ-02: No Overlap (6/6) — hairline separators, ellipsis truncation
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2) — warm CVD-safe palette
• VQ-05: Layout & Canvas (4/4) — exactly 3200×1800; no clipping
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2) — Imprint warm anchors per documented semantic exception for flame graphs

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — warm Imprint-anchored palette + explanatory subtitle; could push further
• DE-02: Visual Refinement (3/6) — subtle grid, hairline separators, no top/right spines; numeric y-ticks redundant
• DE-03: Data Storytelling (4/6) — root-at-bottom hierarchy clear; color is hashed rather than encoding hotness, so the real hotspot doesn't pop

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (12/15)

• DQ-01: Feature Coverage (3/6) — only ~20 unique frames vs spec's stated 50–500
• DQ-02: Realistic Context (5/5) — web API request handler is neutral and plausible
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — three helper functions; textOn / warmFor could be inlined
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — proper Chart.js mount + plugin registration
• LM-02: Distinctive Features (4/5) — afterDatasetsDraw + scale.getPixelForValue + chartArea is the right Chart.js escape hatch for a non-native chart type

Score Caps Applied

• None

Strengths

• Custom afterDatasetsDraw plugin draws the flame graph on top of an invisible bar chart, reusing Chart.js title/scales/grid chrome instead of building everything from scratch — idiomatic plugin pattern.
• Warm palette #DDCC77 / #BD8233 / #AE3030 is drawn from Imprint's three warm anchors, satisfying both the Brendan-Gregg aesthetic and the style guide.
• Data colors identical between light/dark; only chrome flips — theme adaptation correct.
• Per-bar luminance check (textOn) keeps in-bar text readable on every hue across both themes.
• Subtitle explicitly states bar-width semantics, preventing the most common flame-graph misreading.
• Realistic web-API handler tree with neutral domain and plausible sample counts.

Weaknesses

• DQ-01: Tree has ~20 unique frames, well below the spec's 50–500. Broaden the simulated profile — more sibling branches, deeper subtrees, a second top-level child of main — so the chart actually demonstrates the density it's designed for.
• DE-03: Frame colors are picked by hashing name+depth, so hue carries no signal about hotness. executeQuery (the actual hotspot at 78 samples) reads as one red box among several. Mapping the warm palette to self-time or depth would create a true focal point.
• DE-02: Numeric depth y-tick labels (0–6) duplicate the visible bar stacking. Consider ticks: { display: false } on the y-scale and let the rotated axis title carry the meaning.
• VQ-01 minor: Dark text on amber #DDCC77 is thinner than ideal. Raising the textOn luminance threshold from 0.5 to ~0.6, or switching to a slightly softer ink on amber, would tighten 400 px mobile legibility.
• CQ-01: textOn and warmFor are a few lines each — inlining them would keep the snippet flatter, in line with the KISS preference of the spec implementations.

Issues Found

1. DQ-01 LOW: Frame count (~20) is well below spec range (50–500).
   • Fix: Expand the profile tree — add more children under dispatchHandler, a second sibling subtree under main, and a few more leaf-level frames so the flame graph has the density flame graphs are designed for.
2. DE-03 LOW: Color does not encode hotness.
   • Fix: Map the warm anchors to self-time tiers (cool amber for low, ochre for medium, matte red for high) so the eye lands on the actual hotspot, or map to depth for a clean gradient.
3. DE-02 LOW: Redundant numeric y-tick labels.
   • Fix: Hide y-tick labels and rely on the rotated Call stack depth (root → leaf) axis title plus visible stacking.

AI Feedback for Next Attempt

Broaden the simulated profile to ~50+ unique frames (more siblings, more depth, a second top-level subtree). Map the warm palette to a meaningful axis (e.g. tiered by self-samples) so the actual hotspot (executeQuery) becomes the focal point instead of being one red box among several. Hide numeric y-tick labels — the bars and axis title already convey depth.

Verdict: APPROVED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white #FAF8F1 background. Bold dark title "flamegraph-basic · javascript · chartjs · anyplot.ai" with muted italic subtitle "Simulated CPU profile · bar width = samples · color = self-time tier · horizontal order is arbitrary, not temporal". Y-axis title "Call stack depth (root → leaf)" rotated 90° on the left; numeric y-tick labels are correctly hidden (attempt-1 weakness fixed). X-axis title "Samples" with ticks at 0/100/200/300/400/500/554. Stacked horizontal bars layered bottom-up: depth-0 amber "main" (554 samples), splitting through "runServer" + "backgroundJobs", up to leaves at depth 6/7. Colors map to self-time tiers — amber #DDCC77 for ≤10, ochre #BD8233 for ≤24, matte red #AE3030 for the actual hotspots (executeQuery 92, compileTemplate 28, resampleImg 26, renderHTML 24). Function names sit inside bars ≥60 px; narrower bars truncate with an ellipsis ("dbFe…", "compil…", "rende…", "gzip…", "resam…"). No #009E73 brand green — documented warm-palette semantic exception for the flame-graph aesthetic. All chrome and bar-internal text clearly readable; no light-on-light failures.

Dark render (plot-dark.png): Warm near-black #1A1A17 background. Title/subtitle/axis title/ticks rendered in light Imprint ink, all readable. Bar fill colors are IDENTICAL to the light render — same warm Imprint anchors at the same positions. Only the chrome flipped. Inside-bar text contrast preserved: dark #1A1A17 on amber/ochre bars (still readable because amber is light enough), white #FFFDF6 on the matte-red bars (e.g. "executeQuery", "compil…", "rende…", "resam…"). Subtle grid hairlines visible against the warm dark surface; pageBg-coloured hairlines between sibling bars are dark and tidy. No dark-on-dark failures.

Score: 93/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	17	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	93	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (17/20)

• DE-01: Aesthetic Sophistication (7/8) — Color encodes self-time hotness via 3 Imprint warm anchors; minor: discrete tiers vs. continuous gradient.
• DE-02: Visual Refinement (5/6) — Y-tick labels hidden, subtle grid, hairline separators.
• DE-03: Data Storytelling (5/6) — Matte-red executeQuery reads as the focal point; subtitle calls out color = self-time tier.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Tree now has 54 unique stack frames (was ~20 in attempt 1).
• DQ-02: Realistic Context (5/5) — Web API handler + background jobs.
• DQ-03: Appropriate Scale (4/4) — Per-frame samples 1–92, total 554.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Two helpers (visit, colorFor); FNV hash + luminance threshold from attempt 1 removed.
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Uses Chart.js plugin hook and scale.getPixelForValue idiomatically; most rendering is in raw ctx calls (necessary for a non-native type).
• LM-02: Distinctive Features (4/5) — Custom afterDatasetsDraw plugin with chartArea-based coordinate math is the distinctive Chart.js technique.

Score Caps Applied

• None

Strengths

• Color now meaningfully encodes self-time hotness via three Imprint warm anchors (amber ≤10, ochre ≤24, matte red >24) — the actual CPU hotspots (executeQuery, compileTemplate, resampleImg, renderHTML) pop out as red focal points instead of being hashed at random.
• Y-axis numeric tick labels are now hidden; the rotated y-title carries the meaning and the bar stacking shows depth visually, eliminating the redundant chrome flagged in attempt 1.
• Call-stack tree now contains 54 unique frames, comfortably inside the spec's 50–500 range.
• Helper-function surface is reduced to just two (visit DFS + 3-line colorFor); the FNV hash and luminance threshold from attempt 1 are gone, keeping the snippet KISS.
• Per-tier text contrast is explicit (#1A1A17 on amber/ochre, #FFFDF6 on matte red) — readable in both themes without a luminance heuristic.
• Custom afterDatasetsDraw plugin idiomatically extends Chart.js with scale.getPixelForValue and chartArea for coordinate transforms.
• Data colors identical between light and dark; only chrome flips.
• Subtitle documents the new color encoding and prevents flame-graph misreading.
• Canvas exactly 3200×1800; no clipping or overflow.

Weaknesses

• DE-01 minor: Three-tier color encoding is a clear upgrade over hashing, but the boundaries (≤10, ≤24, >24) are coarse — frames at 22 (gzipCompress) and 28 (compileTemplate) land in different tiers despite being similarly hot. A continuous warm gradient interpolating across the three anchors would let the eye rank hotness more precisely.
• LM-01 minor: Most flame-graph geometry is drawn in raw ctx.fillRect/ctx.fillText inside the plugin; Chart.js itself only contributes title/subtitle/axes/grid chrome. Right approach for a non-native chart type, but does not exercise Chart.js's higher-level dataset/scale features deeply.
• DE-02 minor: The placeholder dataset (data: depthLabels.map(() => 0) with invisible fill/border) exists purely to keep Chart.js's bar pipeline happy — functional and well-commented, no cleaner option in Chart.js core for this case.

Issues Found

None blocking. Attempt 2 successfully resolves every weakness raised in attempt 1's 85-point review (y-tick chrome, color storytelling, helper-function count, stack-frame density, dark-on-amber contrast). Remaining notes above are sophistication ceiling items, not defects.

AI Feedback for Next Attempt

None required — implementation is approved at 93/100. If a future polish pass is ever wanted, the lowest-hanging item is replacing the 3 discrete color tiers with a continuous warm gradient (e.g. interpolated from #DDCC77 → #BD8233 → #AE3030 keyed on log(self+1) / log(maxSelf+1)) so hue ranks hotspots monotonically.

Verdict: APPROVED