feat(muix): implement circlepacking-basic

[github-actions]

Implementation: circlepacking-basic - javascript/muix

Implements the javascript/muix version of circlepacking-basic.

File: plots/circlepacking-basic/implementations/javascript/muix.tsx

Parent Issue: #2498

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white cream background (#FAF8F1). Title "circlepacking-basic · javascript · muix · anyplot.ai" in bold dark ink, fully legible; subtitle in softer gray ink, legible. Legend row (Equities, Fixed Income, Real Estate, Alternatives, Cash & Equivalents) fully legible dark-on-cream, first swatch brand green. Root circle outlined with a subtle light-gray stroke; branch circles use light tints with a colored stroke matching their legend swatch; leaf circles are white-mixed tints of their branch color scaled by relative value, each labeled with luminance-chosen dark/white text so contrast always holds. Several smaller/mid leaf labels truncate with an ellipsis (e.g. "Direct...", "Treasury...", "Money...", "Corporate..."). All text is readable against the light background — no light-on-light failures.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title/subtitle/legend flip to light ink and stay fully legible; root circle stroke flips to light gray. Branch and leaf circle colors are visually identical to the light render — only chrome flipped, exactly as required. No dark-on-dark failures: leaf/branch text stays legible because its color is chosen from the fill's luminance, independent of page theme.

Both paragraphs above describe both renders; both pass legibility.

Score: 87/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	16	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	9	10
Library Mastery	5	10
Total	87	100

Visual Quality (28/30)

• VQ-01: Text Legibility (6/8) - Explicit sizing throughout, but several leaf labels truncate mid-word, losing information
• 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 (16/20)

• DE-01: Aesthetic Sophistication (6/8) - Thoughtful value-scaled tinting, hand-rolled packing geometry, luminance-adaptive text
• DE-02: Visual Refinement (5/6) - Clean whitespace and strokes; truncated labels are the one rough edge
• DE-03: Data Storytelling (5/6) - Hue = category, shade = relative size, gives legible hierarchy

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 (14/15)

• DQ-01: Feature Coverage (5/6) - 20 nodes / 3 levels is the floor of the spec's range
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - Multiple helper functions, justified by the custom packing algorithm
• CQ-02: Reproducibility (2/2) - Seeded LCG (seed=42)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (5/10)

• LM-01: Idiomatic Usage (3/5) - Uses ChartContainer + useDrawingArea, but series=[] means no actual MUI X chart component is ever exercised
• LM-02: Distinctive Features (2/5) - useDrawingArea is MUI X-specific, but the rest of the render is bespoke SVG, generic

Score Caps Applied

• None

Strengths

• Correct Imprint palette usage: first branch #009E73, canonical order, identical data colors across themes, theme-correct chrome in both renders
• Genuinely custom circle-packing layout (seeded force simulation) — real engineering to work around MUI X community having no native packing layout, fully deterministic
• Luminance-based text color switching keeps every leaf label high-contrast regardless of fill tint or page theme
• Clean, correctly-sized square canvas, no overlap, no clipping, correct harness contract usage (skipAnimation, ANYPLOT_SIZE sizing)

Weaknesses

• Several leaf labels truncate mid-word ("Direct...", "Corporate...", "Int'l...", "Municipal...", "Treasury...", "Emerging...", "Money...") — tune truncateLabel/maxChars so more leaf circles show their full label; notably "Corporate Bonds" ($180K, a larger circle) truncates while smaller "US Small Cap" ($140K) does not
• MUI X is used only as an SVG canvas (ChartContainer + useDrawingArea) with series=[] — no actual MUI X chart component or MUI X-specific tooltip/legend primitive is exercised, so Library Mastery stays low
• Dataset sits at the floor of the spec's size range (20 nodes / 3 levels) — a fourth hierarchy level or more leaf nodes per branch would better demonstrate deep nesting

Issues Found

1. VQ-01 MEDIUM: Mid-word label truncation on several leaf circles
   • Fix: Tighten or rework the maxChars formula in truncateLabel (currently Math.max(4, Math.floor((l.r * 1.7) / (nameSize * 0.55)))) so labels like "Corporate Bonds" and "Int'l Developed" fit fully on circles of their size; consider a two-line wrap for names longer than ~10 characters instead of ellipsis-truncating
2. LM-01/LM-02 LOW: Minimal use of MUI X's actual chart API
   • Fix: Look for a legitimate way to route through an MUI X chart primitive (e.g. ChartsTooltip, ChartsLegend) even in a manually-laid-out chart, or note explicitly why a bespoke SVG body is the correct call for a plot type the community package doesn't natively support
3. DQ-01 LOW: Dataset at the floor of the spec's size/depth range
   • Fix: Add a 4th hierarchy level or grow leaf count per branch to more richly demonstrate nested nesting

AI Feedback for Next Attempt

Score is solid (87/100) but attempt 1 needs ≥90 to auto-approve. Fix the label truncation so larger leaf circles ("Corporate Bonds", "Int'l Developed", "Emerging Markets") show their full text instead of cutting off mid-word — either tighten the maxChars formula or wrap to a second line for names longer than ~10 characters. Consider deepening the hierarchy (4 levels) or growing the leaf count toward the middle of the 20-200 range, and look for any legitimate way to touch an actual MUI X chart primitive (tooltip, legend) to lift Library Mastery beyond a bare ChartContainer canvas.

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): Warm off-white cream background (#FAF8F1), not pure white. Title "circlepacking-basic · javascript · muix · anyplot.ai" in bold dark ink, fully legible; subtitle in softer gray ink. Legend row of 5 color-dot + label pairs (Equities, Fixed Income, Real Estate, Alternatives, Cash & Equivalents), fully legible dark-on-cream. Root circle has a subtle light-gray stroke. Branch circles use light-tinted fills with a 2px colored stroke matching their legend swatch (green, lavender, blue, ochre, red — canonical Imprint order, first branch #009E73). Leaf circles are white-mixed tints of their branch color scaled by relative value, each labeled in dark or white text chosen by relative luminance. All text is readable against the light background — no light-on-light failures.

Dark render (plot-dark.png): Warm near-black background (#1A1A17), not pure black. Title/subtitle flip to light/off-white ink, fully legible; legend text is light-colored. Root circle stroke renders in light gray, visible against the dark surface. Branch and leaf circle colors are visually identical to the light render — only chrome (background, text, root stroke) flipped, exactly as required. All text is readable against the dark background — no dark-on-dark failures; the leaf label text color is luminance-based on the fill itself, so it stays high-contrast independent of page theme.

Both renders confirmed: the attempt-1 weakness of mid-word truncated leaf labels ('Direct...', 'Corporate...', 'Treasury...', 'Money...', etc.) is fully resolved — every leaf circle now shows its complete label, wrapped onto two balanced lines via MUI X's ChartsText primitive where needed.

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — mid-word truncation from attempt 1 is fully fixed via wrapLabel() + ChartsText; every leaf label renders in full in both themes
• 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 (6/8) - Thoughtful value-scaled tinting, hand-rolled packing geometry, luminance-adaptive text; legend styling stays simple
• DE-02: Visual Refinement (6/6) - Clean whitespace, subtle strokes, no grid clutter; the truncation rough edge from attempt 1 is gone
• DE-03: Data Storytelling (5/6) - Hue = category, shade = relative size within category

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 (14/15)

• DQ-01: Feature Coverage (5/6) - Still 20 nodes / 3 levels, the floor of the spec's range, unchanged from attempt 1
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - Helper functions justified by the packing algorithm; file header is duplicated (two overlapping // anyplot.ai comment blocks) and should be cleaned up
• 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 (4/5) - Now exercises ChartContainer + useDrawingArea + ChartsText, but still no actual MUI X chart component (series=[])
• LM-02: Distinctive Features (3/5) - ChartsText's native \n line-splitting used deliberately for balanced two-line wrapping; useDrawingArea ties custom geometry into MUI X's own margin system

Score Caps Applied

• None

Strengths

• Truncation weakness from attempt 1 is fully fixed: wrapLabel() balances long leaf names onto two lines via MUI X's own ChartsText primitive, so every leaf circle now shows its full label instead of ellipsis-truncating mid-word
• Correct Imprint palette usage: first branch #009E73, remaining branches in canonical order, identical data colors between light/dark renders, theme-correct chrome in both
• Genuinely custom circle-packing layout (seeded force simulation, seed=42) since the community MUI X package has no built-in packing layout — real engineering, fully deterministic
• Luminance-based text color switching keeps every leaf label high-contrast regardless of branch fill tint or page theme
• Clean, correctly-sized square canvas with no overlap or clipping, correct use of the harness contract (skipAnimation, ANYPLOT_SIZE sizing)

Weaknesses

• The file header is duplicated/corrupted: lines 1-10 contain two overlapping // anyplot.ai comment blocks (one with Library: muix 7.29.1 | JavaScript 22.23.2 / Quality: 87/100, another with Library: MUI X Charts | React | Node 22 / Quality: pending) — collapse into a single clean header
• MUI X is still used mostly as an SVG canvas (ChartContainer + useDrawingArea + ChartsText) with series=[] — no actual MUI X chart component or MUI X-specific tooltip/legend primitive is exercised; likely an inherent limit of circle-packing on the community package rather than something fixable
• Dataset still sits at the floor of the spec's size range (20 nodes / 3 levels), unchanged from attempt 1

Issues Found

1. CQ-01 LOW: Duplicated file header (two overlapping // anyplot.ai metadata blocks at the top of the file)
   • Fix: Keep only one header block (the current //# anyplot-orientation: square + one // anyplot.ai / title / library / license / quality-line block)

AI Feedback for Next Attempt

This attempt is publication quality — no further changes required for approval. If revisited, a purely optional polish would be deduplicating the file header and considering a 4th hierarchy level or a couple more leaf nodes to better showcase the spec's deep-nesting range.

Verdict: APPROVED