[github-actions]

Implementation: network-weighted - javascript/muix

Implements the javascript/muix version of network-weighted.

File: plots/network-weighted/implementations/javascript/muix.tsx

Generation: adopted from 5b2bcb3e5e4dc5b3685a669c07cf3ab1b9918f69 (5b2bcb3) by gemini-4-argon; the model below runs repair

Model: opus

Parent Issue: #3290

Regeneration: previous quality 90 (forced: adopted from 5b2bcb3, fresh-generation review path)

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): On the warm off-white #FAF8F1 square canvas, with no axes or grid, 15 research-lab nodes are colored by domain in Imprint order: Life Sciences #009E73 first, then purple, blue and ochre. Each node has a page-colored outline, and its radius (15–40 px) follows weighted degree, so DSI, GEN, AIR and MAT are the largest. 24 gray edges are 2–13 px wide, and their opacity rises with weight; AIR–DSI is the heaviest and darkest. The bold title network-weighted · javascript · muix · anyplot.ai spans about half the width. Bold node codes sit on page-colored chips above each node. A bottom legend band has a domain row and an edge-width row ("Edge width = Co-authored papers · node size = weighted degree:") with labeled samples for 6, 26 and 45. All text is readable against the light background.

Dark render (plot-dark.png): On the #1A1A17 near-black surface, the layout and node colors match the light render exactly; only the chrome flips. The edges become light gray, and the thinnest edge (NEU–IMM, weight 6) is still visible. The title, node codes and legend text are all light ink and clearly readable. The label chips use the dark page color. There is no dark-on-dark text.

Score: 85/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	85	100

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8)
• VQ-02: No Overlap (5/6) - AIR/IMM label chips cover the short ROB–AIR and GEN–IMM edges
• VQ-03: Element Visibility (5/6) - the edge-width legend samples use a fixed opacity that doesn't match the edges
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2) - N/A (no axes)
• VQ-07: Palette Compliance (2/2)

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) - page-colored node outlines and label chips, a clear text hierarchy
• DE-02: Visual Refinement (3/6) - edges drawn light-to-heavy, rounded caps, a tuned two-row legend band
• DE-03: Data Storytelling (3/6) - edge opacity rising with weight makes the heaviest links read first

Spec Compliance (15/15)

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

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4) - legend 6/26/45 checked against data min/mid/max

Code Quality (10/10)

• CQ-01: KISS Structure (3/3)
• 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 (6/10)

• LM-01: Idiomatic Usage (4/5) - custom SVG overlay in ChartsContainer via useXScale/useYScale
• LM-02: Distinctive Features (2/5) - useDrawingArea-bounded hover card; legends are hand-built HTML

Score Caps Applied

• None

Strengths

• Edge width scales linearly from 2 px (weight 6) to 13 px (weight 45): the thinnest edge stays visible in both themes, and the thickest never buries a node.
• The spring layout shortens the ideal length of heavy edges, so strongly collaborating labs sit closer together and the four domains form readable clusters.
• Node radius encodes weighted degree and node color encodes the research domain; the legend band names both. The edge-width legend shows labeled samples for 6, 26 and 45 papers.
• Both renders are theme-correct: the Imprint domain colors are identical, edges and labels use ink tokens, and page-colored outlines and label chips separate nodes and text from the edges.
• It uses the MUI X composition idiom: a custom SVG overlay inside ChartsContainer, positioned with useXScale/useYScale, plus a React-state hover card for edges and nodes in the HTML output.

Weaknesses

• VQ-02 (both): the AIR and IMM label chips (16 px text on a 42×20 page-colored rect above each node) sit on the short ROB–AIR (weight 29) and GEN–IMM (weight 42) edges and hide most of their visible length, so those thicknesses can't be read along the edge → keep label chips off edge segments, for example by placing each label on the side of its node away from its heaviest edge, or by shrinking the chip to the text width. Likely cause: every label is fixed at y = cy - radius - 11, regardless of where the node's edges leave.
• VQ-03 (both): the edge-width legend samples are drawn at a fixed strokeOpacity of 0.55, while the edges use 0.22 + ratio*0.4 (0.22 for weight 6, 0.62 for weight 45). As a result, the "6" sample is darker and the "45" sample lighter than the edges they explain → draw each sample with the same opacity formula as the edges. Likely cause: strokeOpacity={0.55} on the legend <line>.
• Suggestion: show the full institute names (already in NODE_LABEL) as a small caption list or in the legend band, so the three-letter codes can be decoded in the static PNG.

[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): Square 2400×2400 canvas on the warm off-white #FAF8F1 page. Bold near-black title "network-weighted · javascript · muix · anyplot.ai" centered at the top (~50 % of the width). Fifteen research labs are drawn as circles, colored by research domain in Imprint positions 1–4 (Life Sciences #009E73 green, Physical Sciences #C475FD purple, Computer Science #4467A3 blue, Engineering #BD8233 ochre), sized by weighted degree (DSI largest, AST smallest) and outlined in the page color. Edges are ink-colored lines whose width (2–13 px) and opacity grow with co-authored paper count; AIR–DSI (45) and GEN–IMM (42) are the darkest, thickest strokes, NEU–IMM (6) and AST–CLI (8) are thin but visible light-gray lines. Bold three-letter lab codes sit just outside each node on a translucent page-colored chip, placed in the widest gap between the node's edges. No axes, no grid. Below the network: a domain legend with four colored dots, and a weight-scale row "Edge width = Co-authored papers · node size = weighted degree:" with sample strokes labeled 6, 26 and 45. All text is dark and clearly readable on the light background.

Dark render (plot-dark.png): Same layout on the warm near-black #1A1A17 page. Node fills are identical to the light render (green, purple, blue, ochre); only chrome flips: title and lab codes are light ink, legend text is light-gray inkSoft, edges are light-gray strokes whose heaviest ones (AIR–DSI, GEN–IMM, QPL–MAT) are the brightest. Thin edges (NEU–IMM, AST–CLI, DSI–MAT) are dim but still visible against the dark page. The legend weight samples flip to light ink and match the edges. No dark-on-dark text anywhere; all text is readable.

Score: 86/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - explicit sizes (22 px title, 16 px bold codes, 14–15 px legend), readable in both themes
• VQ-02: No Overlap (6/6) - no text collisions; labels sit on top of edges as the spec asks
• VQ-03: Element Visibility (6/6) - thinnest edge visible in both themes, legend strokes match the edges
• VQ-04: Color Accessibility (2/2) - four CVD-distinct Imprint hues, weight also carried by width
• VQ-05: Layout & Canvas (4/4) - square canvas, network centered, nothing clipped
• VQ-06: Axis Labels & Title (2/2) - N/A (no axes by design); legend caption names the weight variable
• VQ-07: Palette Compliance (2/2) - Imprint 1–4 in canonical order, correct page backgrounds, theme tokens for chrome

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) - edge opacity coupled to weight, page-colored node outlines, translucent label chips
• DE-02: Visual Refinement (4/6) - each label placed in the widest angular gap between its node's edges; integrated two-row legend
• DE-03: Data Storytelling (3/6) - weight-dependent spring length pulls heavy collaborators together; heavy edges darker as focal strokes

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4) - thickness by weight, force layout, labeled weight scale, node size = weighted degree, color = domain with legend, labels on top
• SC-03: Data Mapping (3/3) - layout-positioned type; widths and node radii follow the data
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - hubs (DSI, GEN), heavy vs light links, a peripheral node (AST)
• DQ-02: Realistic Context (5/5) - research-institute co-authorship network, neutral
• DQ-03: Appropriate Scale (4/4) - checked: weight samples 6 / 26 / 45 equal min / rounded midpoint / max; DSI has the largest weighted degree (107) and AST the smallest (29), matching node sizes

Code Quality (9/10)

• CQ-01: KISS Structure (2/3)
• CQ-02: Reproducibility (2/2) - fixed-seed LCG, hard-coded data
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2) - written-out force layout is allowed (nothing in MUI X computes it)
• CQ-05: Output & API (1/1) - default export, skipAnimation, MUI X v9 ChartsContainer

Library Mastery (5/10)

• LM-01: Idiomatic Usage (3/5) - ChartsContainer composition with hidden linear axes as the coordinate system
• LM-02: Distinctive Features (2/5) - useXScale / useYScale / useDrawingArea composition hooks drive a custom SVG overlay

Score Caps Applied

• None

Strengths

• Edge width and opacity both scale with co-authored papers, and the legend's 6 / 26 / 45 strokes use the same mapping, so the scale reads directly in both themes
• Force layout with weight-dependent spring length keeps strong collaborators (AIR–DSI, GEN–IMM, QPL–MAT) close together
• Lab codes are placed in the widest free angle around each node on a translucent page-colored chip, so labels stay readable over edges
• Uses MUI X v9 composition (ChartsContainer + scale hooks) with hidden axes as the coordinate frame, and React-state hover tooltips in the HTML output

Weaknesses

• CQ-01 (code): a standalone helper function labelAngle (lines 233–254) and the edgeOpacity arrow function sit beside the plot code → inline the angle computation in the node map and the opacity expression at its two uses. Likely cause: helpers factored out during the label-placement pass.
• Suggestion: drawing the nodes as a MUI X scatter series would let the native ChartsTooltip replace the hand-built hover box.
• Suggestion: the tooltip width expression is repeated three times in lines 378–389; a single constant would shorten it.