feat(muix): implement errorbar-basic

[github-actions]

Implementation: errorbar-basic - javascript/muix

Implements the javascript/muix version of errorbar-basic.

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

Parent Issue: #973

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Bar chart on a warm off-white #FAF8F1 surface showing 7 bars in Imprint brand green (#009E73) for plant stress conditions (Control, Low Temp, High Temp, Low pH, High pH, Drought, Flood). Error bars with top and bottom caps are rendered as custom SVG in dark ink, clearly visible against the green bars. Title "Seedling Growth Under Stress · errorbar-basic · javascript · muix · anyplot.ai" in dark ink is centered and readable (scaled to ~20px for the 77-char title). X-axis label "Growth Condition" and Y-axis label "Mean Stem Elongation (cm / week)" at 16px, tick labels at 14px — all clearly readable against the light background. Horizontal-only grid lines are subtle. No legend (correct for single series). All text is readable against the light background — legibility PASS.

Dark render (plot-dark.png): Same chart on a warm near-black #1A1A17 surface. MUI ThemeProvider auto-adapts chrome to light ink — title, axis labels, and tick labels all render in light text, clearly visible. Error bar whiskers and caps switch to light ink (t.ink) correctly, remaining visible against the dark background. Bar color (#009E73) is identical to the light render — only chrome flips. No dark-on-dark failures observed anywhere. All text is readable against the dark background — legibility PASS.

Both paragraphs are required. A review that only describes one render is invalid. ✓

Score: 89/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All text readable in both themes. Title scaled to ~20px due to 77-char length — readable but slightly small; axis labels 16px, ticks 14px are fine.
• VQ-02: No Overlap (6/6) — No text overlaps with error bars, bars, or other labels across either render.
• VQ-03: Element Visibility (6/6) — 7 bars clearly visible; error bars with top+bottom caps visible on all bars. Brand green reads well on both surfaces.
• VQ-04: Color Accessibility (2/2) — Single series in brand green; no CVD risk. Theme-adaptive ink on error bars provides high contrast.
• VQ-05: Layout & Canvas (4/4) — 3200×1800 canvas confirmed (no canvas gate failure). Margins (top:72 bottom:92 left:100 right:44) give adequate breathing room. No overflow or clipping observed.
• VQ-06: Axis Labels & Title (2/2) — Y-axis includes units (cm / week). X-axis "Growth Condition" is descriptive. Title format correct with optional descriptive prefix.
• VQ-07: Palette Compliance (2/2) — colors={[t.palette[0]]} = #009E73 for the single series. Backgrounds #FAF8F1 light / #1A1A17 dark. Data colors identical across themes.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (4/8) — Default level. Clean and correct but no emphasis, no focal point, no visual hierarchy beyond bar height. Descriptive title prefix is the only elevation above baseline.
• DE-02: Visual Refinement (4/6) — L-frame spines (MUI X default removes top/right). Horizontal-only grid, subtle. Rounded bar corners (borderRadius=4). No redundant legend for single series.
• DE-03: Data Storytelling (3/6) — Descriptive title "Seedling Growth Under Stress" aids reading. Clear ranking visible (Control highest, Drought lowest). No annotation or emphasis element highlights the key contrast.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Bar chart with error bars — standard and correct implementation of errorbar-basic.
• SC-02: Required Features (4/4) — Symmetric ±1 SD error bars present on all bars. Top and bottom caps visible. Consistent cap width across all bars.
• SC-03: Data Mapping (3/3) — X: 7 categorical conditions; Y: numeric means (1.9–4.2); error: symmetric ±0.5–0.9. All 7 groups within spec's 3–20 range.
• SC-04: Title & Legend (3/3) — Title "Seedling Growth Under Stress · errorbar-basic · javascript · muix · anyplot.ai" — correct format with optional descriptive prefix. No legend needed for single series.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Error bars on each bar, visible caps, symmetric errors, 7 diverse stress conditions covering temperature, pH, and water extremes.
• DQ-02: Realistic Context (5/5) — Plant stress experiment with cm/week stem elongation rates — scientifically plausible values and neutral domain.
• DQ-03: Appropriate Scale (4/4) — Y-axis 0–6; data 1.9–4.2 (bars) extending to ~4.7 with error bars. Good scale use without excessive padding.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — ErrorBars sub-component is necessary for the scale-hook approach. Main Chart is clean. No unnecessary abstractions.
• CQ-02: Reproducibility (2/2) — All data hard-coded as const arrays — fully deterministic, no RNG.
• CQ-03: Clean Imports (2/2) — All 7 imports used: ChartContainer, BarPlot, ChartsXAxis, ChartsYAxis, ChartsGrid, useXScale, useYScale.
• CQ-04: Code Elegance (2/2) — SVG error bars cleanly rendered via MUI X coordinate hooks. No fake interactivity. Title font-scaling formula present.
• CQ-05: Output & API (1/1) — MUI X is in INTERACTIVE_LIBRARIES; harness produces plot-light/dark.png + .html. skipAnimation on BarPlot. ANYPLOT_SIZE used for dimensions.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — ChartContainer composition pattern used correctly. Individual axis/grid components composed properly. colors prop, xAxis/yAxis id binding, margin control all idiomatic.
• LM-02: Distinctive Features (4/5) — useXScale/useYScale hooks used to draw custom SVG error bars in chart coordinate space — an advanced and distinctive MUI X technique. bandwidth() for proportional cap sizing is idiomatic for band scales.

Score Caps Applied

• None

Strengths

• Idiomatic MUI X composition (ChartContainer + BarPlot + individual axis/grid components) used correctly
• Advanced use of useXScale/useYScale hooks to render custom SVG error bars in chart coordinate space — the correct MUI X approach for custom overlays
• Both renders fully legible: error bars use t.ink so they adapt automatically (dark whiskers on cream, light whiskers on near-black)
• Correct single-series Imprint palette: colors={[t.palette[0]]} ensures brand green #009E73 throughout
• Realistic, neutral plant-stress dataset with meaningful variance; descriptive title prefix aids storytelling

Weaknesses

• Design sophistication is baseline: all bars uniform green with no visual emphasis — consider annotating the control vs drought contrast or using a reference line to create hierarchy
• Error bar caps (14% of bandwidth) are slightly small — widening to 18–20% would improve readability at mobile/thumbnail scale
• No data storytelling element beyond the title prefix — no reference line (e.g. control mean as baseline) or annotation to guide the viewer through the stress comparison

Issues Found

1. DE-01 DEFAULT: Uniform styling with no visual hierarchy or emphasis beyond bar height
   • Fix: Add a horizontal reference line at the Control mean, or annotate the min/max bars to draw the viewer's eye to the key comparison
2. DE-03 LOW: Visual storytelling limited to the descriptive title
   • Fix: Consider a subtle opacity variation (higher-performing bars more opaque) or a direct-label for the control bar to create a focal point

AI Feedback for Next Attempt

Approved at 89/100. Maintain the useXScale/useYScale hook approach for error bars — it is correct and idiomatic. If regenerating: (1) widen error bar caps slightly to ~18–20% of bandwidth; (2) add a reference line or minimal annotation to elevate design storytelling beyond the baseline. Keep the plant-stress dataset and descriptive title prefix.

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): A landscape bar chart on a warm off-white (#FAF8F1) background titled "Seedling Growth Under Stress · errorbar-basic · javascript · muix · anyplot.ai". Seven bars represent growth conditions: Control (full brand green #009E73), Low Temp / High Temp / Low pH / High pH / Flood (muted brand green ~60% opacity), and Drought (amber #DDCC77 semantic anchor). Each bar has a black-ink error bar with visible caps (±1 SD). A dashed reference line at y=4.2 spans the full plot width with an italic "Control baseline" label at the far right. The Y-axis is labeled "Mean Stem Elongation (cm / week)" with tick labels 0.0–6.0; the X-axis is labeled "Growth Condition" with all seven condition names. Grid lines are subtle horizontal-only lines. All text is clearly readable against the light background — no light-on-light issues. The title occupies ~80% of plot width at appropriately scaled font size.

Dark render (plot-dark.png): Same chart on a warm near-black (#1A1A17) background. The ThemeProvider flips all chrome to light: title, axis labels, tick labels, and the "Control baseline" reference label render in warm near-white — all clearly legible against the dark surface. Data colors are identical to the light render: Control = full brand green, Drought = amber, intermediate conditions = muted brand green. Error bar whiskers and caps are white/light-colored (ink token flips in dark mode), remaining clearly visible. No dark-on-dark failures detected. Grid lines adapt to light-on-dark, remaining subtle. The dashed baseline reference line is visible. Both renders are fully readable.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All text readable in both themes. Title scaled via formula for 74-char title (~20px). Axis labels at 16px, tick labels at 14px — slightly larger than needed for landscape canvas but within acceptable range.
• VQ-02: No Overlap (6/6) — No text/data collisions in either render; error bars clear of all labels.
• VQ-03: Element Visibility (6/6) — Error bar whiskers and caps clearly visible in both renders; bar fills clearly distinguishable; baseline reference line is clearly visible.
• VQ-04: Color Accessibility (2/2) — Imprint palette + amber anchor; CVD-safe.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed (landscape 3200×1800); generous margins (top:72, bottom:92, left:100, right:100); no clipping detected.
• VQ-06: Axis Labels & Title (2/2) — Y-axis has units (cm / week); X-axis descriptive; title correctly formatted.
• VQ-07: Palette Compliance (2/2) — Control = #009E73 (first series); Drought = #DDCC77 (amber semantic anchor, appropriate for caution); intermediates = brand green with alpha (single-series design choice). Backgrounds correct: #FAF8F1 / #1A1A17. Data colors identical across themes.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Semantic color hierarchy (full green = optimal/reference, amber = peak stress/caution, muted green = intermediate) is deliberate and effective. Reference baseline line adds contextual sophistication. Above the default floor of 4.
• DE-02: Visual Refinement (3/6) — Border radius on bars, horizontal-only subtle grid, no visible top/right spines; margins are generous. Solid refinement above the default floor of 2, but overall chrome is still MUI X default.
• DE-03: Data Storytelling (4/6) — Clear focal narrative: Control as reference, Drought as the worst stressor, intermediate conditions semantically grouped. Baseline dashed line anchors the comparison. Meaningful visual hierarchy guides the reader's eye.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct bar+error-bar chart type; custom SVG error bars overlaid on MUI X BarPlot.
• SC-02: Required Features (4/4) — Visible caps on all error bars; consistent widths; color variation across groups; symmetric ±1 SD errors.
• SC-03: Data Mapping (3/3) — X = categorical conditions; Y = mean stem elongation; error = ±1 SD; full data range shown.
• SC-04: Title & Legend (3/3) — Title: "Seedling Growth Under Stress · errorbar-basic · javascript · muix · anyplot.ai" matches {Descriptive Title} · {spec-id} · {language} · {library} · anyplot.ai. Single-series chart; legend omitted correctly.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All error bar features present: central values, ±1 SD whiskers with caps, reference baseline, color-coded groups.
• DQ-02: Realistic Context (5/5) — Plant stress experiment is scientifically plausible; cm/week growth rates and SD magnitudes are realistic; neutral subject matter.
• DQ-03: Appropriate Scale (4/4) — Y 0–6 cm/week is appropriate; 7 conditions within spec's 3–20 range; error magnitudes (0.5–0.9) proportionate to means.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — One necessary sub-component (ErrorBars) required to access CartesianContext hooks (no way to do it otherwise in MUI X). Minor complexity trade-off unavoidable.
• CQ-02: Reproducibility (2/2) — All data hardcoded; no RNG.
• CQ-03: Clean Imports (2/2) — All 8 imports are used; no dead imports.
• CQ-04: Code Elegance (2/2) — Semantic color comments explain the design intent clearly; as any casts appropriately scoped to untyped scale internals; no fake interactivity.
• CQ-05: Output & API (1/1) — Default-export component; harness handles screenshots; community only.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Uses ChartContainer composition pattern (more idiomatic than top-level BarChart for mixed content); proper hook-based scale access.
• LM-02: Distinctive Features (4/5) — useXScale/useYScale CartesianContext hooks for custom SVG overlay; colorMap.type: "ordinal" per-bar coloring on xAxis; ChartsReferenceLine with inline label — three distinctly MUI X features leveraged.

Score Caps Applied

• None

Strengths

• Semantic color hierarchy (full green → amber → muted green) creates an immediate, self-explaining narrative about plant stress severity
• Custom SVG ErrorBars component correctly uses CartesianContext hooks (useXScale/useYScale) — the idiomatic MUI X approach for custom overlays
• ChartsReferenceLine baseline anchors all comparisons visually with minimal code
• Both themes render correctly with fully readable text; ThemeProvider chrome adaptation is seamless
• Perfect spec compliance: error bars, caps, consistent widths, groups, and all data mapped correctly

Weaknesses

• Duplicate header comment block at top of file (old muix 7.29.1 header followed by correct MUI X Charts header) — cosmetic artifact from a prior rewrite; remove the first block
• Axis label font size (16px) is slightly on the larger side for a landscape 3200×1800 canvas; 14px would be more proportional while maintaining readability

Issues Found

1. DE-02 MODERATE: MUI X default chrome still visible — axis lines retain default MUI X appearance; no explicit spine removal or axis line suppression.
   • Fix: Add or use overrides on axis slots to remove or soften the axis spine lines on the top/right borders.
2. CQ-01 MINOR: Duplicate file header comment block at lines 1–4 (old quality=89 header) followed by the correct header at lines 7–10.
   • Fix: Remove the first comment block (lines 1–4); keep the standardized MUI X Charts header only.

AI Feedback for Next Attempt

This implementation is strong and approved. If regenerating: (1) remove the duplicate header block at lines 1–4; (2) consider explicit axis spine suppression via MUI X slotProps for cleaner DE-02 refinement; (3) axis label fontsize could drop from 16px to 14px for better proportional balance on the landscape canvas. Core design (semantic colors, CartesianContext hook overlay, ChartsReferenceLine baseline) is excellent and should be preserved.

Verdict: APPROVED