feat(highcharts): implement circlepacking-basic

[github-actions]

Implementation: circlepacking-basic - javascript/highcharts

Implements the javascript/highcharts version of circlepacking-basic.

File: plots/circlepacking-basic/implementations/javascript/highcharts.js

Parent Issue: #2498

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Bold dark title "circlepacking-basic · javascript · highcharts · anyplot.ai" at top, softer-gray subtitle explaining the encoding below. A light-gray-outlined root circle encompasses 5 tinted category rings (src=green #009E73, tests=lavender, docs=blue, assets=ochre, build=matte red — canonical Imprint order), each with a dark-ink label above it. Leaf circles inside each ring are area-scaled to file/folder size, filled solid in the category color, with per-leaf contrast-aware label ink. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Same title/subtitle now in light ink, clearly readable. All 5 category ring colors and every leaf fill color are pixel-identical to the light render — only chrome (title, subtitle, ring labels) flipped to light ink. Leaf label ink itself is unchanged from the light render (it's computed from each leaf's fixed fill color, not the page theme), which is the intended and correct design — e.g. "components/" stays white-on-green, "images/" stays dark-on-ochre in both renders. No dark-on-dark or light-on-light failures.

Both renders pass the legibility check.

Score: 88/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	16	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	9	10
Library Mastery	7	10
Total	88	100

Visual Quality (27/30)

• VQ-01: Text Legibility (6/8) - explicit sizing throughout; smallest leaf labels (9-10px) may fade at ~400px mobile scale
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (5/6) - a couple of the smallest leaf circles are tiny dots by nature of the underlying data
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4) - square 2400×2400 confirmed, well-balanced margins
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2) - first series #009E73, canonical Imprint order, identical data colors across themes

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) - thoughtful custom packing + contrast-aware labeling, clearly above a configured default
• DE-02: Visual Refinement (5/6) - clean chrome and whitespace; styling is a bit uniform across all 5 rings
• DE-03: Data Storytelling (5/6) - size-by-area + category color makes the largest directories/files immediately obvious

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - genuine circle packing
• SC-02: Required Features (4/4) - efficient packing, color-by-category, labels on larger circles + hover for smaller, area-scaled sizing, padded root
• SC-03: Data Mapping (3/3) - radius = sqrt(value), area encodes size correctly
• SC-04: Title & Legend (3/3) - title format exact; inline category self-labeling substitutes appropriately for a legend

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) - good size variation across 5 categories / ~26 leaves, but only 2 hierarchy levels used of the spec's allowed 2-4
• DQ-02: Realistic Context (5/5) - plausible, neutral software-repository scenario
• DQ-03: Appropriate Scale (4/4) - realistic, internally consistent KB/MB sizes

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - several helper functions, justified by the custom geometry algorithm
• CQ-02: Reproducibility (2/2) - fully deterministic, no RNG
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2) - no fake UI/interactivity
• CQ-05: Output & API (1/1) - correct mount-node contract, animation disabled

Library Mastery (7/10)

• LM-01: Idiomatic Usage (3/5) - correct, well-integrated chart.renderer use given highcharts-more isn't vendored, but bypasses the higher-level series/plotOptions API entirely
• LM-02: Distinctive Features (4/5) - leverages chart.renderer.g/circle/text tied into the chart's own plotLeft/plotWidth/margins lifecycle, a genuinely Highcharts-specific technique

Score Caps Applied

• None

Strengths

• Deterministic custom force-relaxation packing algorithm (index-seeded, no RNG) avoids the missing highcharts-more dependency entirely and is reused cleanly for both the leaf level and the directory level
• Per-leaf label ink is computed from each fill's own luminance rather than the page theme, so text stays readable on every one of the 8 Imprint colors in both light and dark renders — first series correctly uses brand green #009E73
• SVG <title> hover tooltips on every circle (root, ring, leaf) preserve full names and totals even where the static label is truncated — a good, non-fake use of the interactive-library allowance
• Theme-adaptive chrome is threaded correctly end-to-end: page background, title/subtitle ink, and ring stroke colors all flip appropriately while the 8 categorical data colors stay pixel-identical across themes

Weaknesses

• Leaf labels on the smallest labeled circles (~24-30px radius, e.g. 'types.d...', 'fixture...', 'changel...') use 9-10px font — legible at full 2400px resolution but likely to disappear at the ~400px mobile thumbnail; consider raising the minimum labeled-circle radius or the font floor slightly
• Hierarchy is only 2 levels deep (root → directory → file) even though the spec allows up to 4; one more nesting level would better demonstrate the packing algorithm and improve DQ-01
• Visual treatment is uniform across all 5 rings (same stroke width, same 10% fill alpha everywhere) — more depth variation would push this toward "publication-ready"
• chart.renderer is used for 100% of the drawing (series: []) — a well-justified workaround given highcharts-more isn't vendored, but it means the implementation never exercises Highcharts' higher-level series API

Issues Found

1. LM-01 MEDIUM: Entirely renderer-based, no series/plotOptions usage
   • Fix: Not really fixable without the missing addon module — acceptable as-is; no action needed unless a native alternative becomes available
2. VQ-01 LOW: Smallest leaf labels may not survive mobile downscaling
   • Fix: Raise the leafR >= 24 label threshold slightly, or bump the minimum font floor from 9px to ~10-11px

AI Feedback for Next Attempt

Solid, technically correct implementation — the main levers to cross into the 90s are polish, not correctness: (1) nudge the smallest leaf-label threshold/font floor up a touch for mobile legibility, (2) consider one extra hierarchy level to more fully use the spec's "2-4 levels" allowance, and (3) add a little more visual depth variation (stroke weight or fill alpha by depth) so the design reads as more deliberately layered rather than uniformly styled across all 5 rings.

Verdict: REJECTED

[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): Root circle outlined in light gray on a warm off-white #FAF8F1 background encompasses 5 tinted category rings (src=green #009E73, tests=lavender, docs=blue, assets=ochre, build=matte red — canonical Imprint order for these abstract directory categories). Inside src/, a new nested components/ ring shows 4 named files (Table.jsx, Modal.jsx, Form.jsx, Button…) three levels deep. Title and subtitle are in bold/soft dark ink, clearly readable. All chrome text is readable, except the components/ · 480 KB label whose descender is visibly crossed by that ring's own stroke line — a minor overlap, not a legibility failure.

Dark render (plot-dark.png): Same layout on a warm near-black #1A1A17 background. Title/subtitle and ring labels flip to light ink and remain clearly readable; the same components/ stroke-overlap is present (geometry-driven, not theme-driven). All 5 category ring colors and every leaf fill color are pixel-identical to the light render — only chrome flipped. No dark-on-dark or light-on-light failures observed.

Both renders pass the theme-readability checklist.

Score: 89/100

Category	Score	Max
Visual Quality	26	30
Design Excellence	17	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	7	10
Total	89	100

Visual Quality (26/30)

• VQ-01: Text Legibility (6/8) — smallest leaf labels (font floor 10px) still likely to fade at ~400px mobile scale
• VQ-02: No Overlap (5/6) — the new components/ · 480 KB nested-ring label is crossed by that ring's own stroke line
• VQ-03: Element Visibility (5/6) — a couple of the smallest leaf circles are tiny dots by nature of the data
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4) — square 2400x2400 canvas confirmed, no overflow/clipping
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (17/20)

• DE-01: Aesthetic Sophistication (7/8) — new depth-based stroke width / fill alpha differentiation pushes this past "configured default"
• DE-02: Visual Refinement (5/6) — the components/ label crowding keeps it just short of perfect
• DE-03: Data Storytelling (5/6) — new 3rd nesting level demonstrates genuine hierarchical depth

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) — now 3 hierarchy levels (root → category → components subdirectory → file), up from 2 last attempt
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — several helpers justified by the custom recursive packing algorithm
• 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 (7/10)

• LM-01: Idiomatic Usage (3/5) — still bypasses Highcharts' higher-level series/plotOptions API entirely (justified: highcharts-more isn't vendored)
• LM-02: Distinctive Features (4/5) — chart.renderer.g/circle/text tied into the chart's own plotLeft/plotWidth/margins lifecycle

Score Caps Applied

• None

Strengths

• Fixed the attempt-1 hierarchy-depth weakness: components/ now splits into 4 named files, giving a genuine 3-level hierarchy instead of 2
• Addressed the attempt-1 uniformity critique: ring stroke width, fill alpha, and padding now vary by depth
• Per-leaf label ink computed from each fill's own luminance keeps text readable on every Imprint color in both themes
• Data colors are pixel-identical between light/dark renders; only chrome flips; SVG <title> tooltips preserve full names on every circle

Weaknesses

• New nested-ring label overlap: the components/ · 480 KB label is crossed by its own ring's stroke line — the label-offset formula doesn't clear the smaller padding used at depth ≥ 2; increase the vertical offset (or padding) for nested-ring labels
• Smallest leaf labels (font floor 10px) will likely wash out at the ~400px mobile thumbnail scale
• Still 100% chart.renderer with series: [] — a well-justified workaround, but it never exercises Highcharts' higher-level series API, which caps Library Mastery

Issues Found

1. VQ-02 MINOR: components/ ring-title label overlaps its own ring's stroke line
   • Fix: increase the label's vertical offset for depth ≥ 2 rings (or slightly increase RING_PADDING * 0.7) so the label clears the stroke
2. VQ-01 LOW: Smallest leaf labels may be illegible at mobile thumbnail scale
   • Fix: raise the minimum font floor slightly or hide labels on circles below ~30px radius

AI Feedback for Next Attempt

This attempt is approved. If revisited, nudge the components/ sub-ring label upward so it clears its own stroke line, and consider a slightly higher font floor for the smallest leaf labels to improve mobile legibility.

Verdict: APPROVED