feat(highcharts): implement gantt-dependencies

[github-actions]

Implementation: gantt-dependencies - python/highcharts

Implements the python/highcharts version of gantt-dependencies.

File: plots/gantt-dependencies/implementations/python/highcharts.py

Parent Issue: #3830

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) with a four-phase Gantt chart covering Jan–Mar 2024. Requirements Phase bars in brand green (#009E73), Design Phase in lavender (#C475FD), Development Phase in blue (#4467A3), Testing Phase in ochre (#BD8233). Dependency connectors use thick solid red (#AE3030) for critical-path links and thin dashed grey for non-critical links. Milestone diamonds visible at "Requirements Baseline ✓" and "Release Ready ★". Task data labels rendered inside/adjacent to bars with text-outline halos. X-axis shows weekly date ticks, Y-axis shows hierarchically indented task names. Title and subtitle are dark, clearly readable. A custom bottom-right legend explains connector types. AR-09 VIOLATION: The "Non-Critical" label in the custom bottom legend is clipped at the right canvas edge — the "ical" suffix (~80px at 36px font) is cut off. Calculation: with plotRight ≈ 3180px, the text starting at x + 332 = (plotRight − 480) + 332 ≈ 3032px and spanning ~240px ends at ~3272px, 72px beyond the 3200px boundary. All other text is readable.

Dark render (plot-dark.png): Near-black background (#1A1A17) with identical data colors (green, lavender, blue, ochre Imprint palette — confirmed matching light render). Title and axis labels rendered in light cream text (#F0EFE8 / #B8B7B0), clearly readable against the dark surface. No dark-on-dark failures detected for title, axis labels, tick labels, or data labels. Grid lines use the dark-theme rgba token. The same AR-09 clipping of "Non-Critical" at the right canvas edge is present in this render as well.

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

Score: 0/100

⛔ AUTO-REJECT: AR-09 — Edge Clipping
The custom SVG-renderer legend's "Non-Critical" text is clipped at the right canvas boundary in both renders.

Category	Score	Max
Visual Quality	22	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	10	10
Total (pre-AR-09)	86	100
Final (AR-09 override)	0	100

Visual Quality (22/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 66px, subtitle 44px, x-axis 44px, y-axis 40px, data-labels 32px). Both themes readable. Minor: 32px data labels with text-outline are slightly compressed on narrow bars.
• VQ-02: No Overlap (4/6) — Some data labels extend beyond bar bounds (overflow: 'allow') and lightly intrude into adjacent row space, especially in Design Phase area. Textoutline halos mitigate readability impact.
• VQ-03: Element Visibility (5/6) — Bars, milestone diamonds, and connectors are clearly visible. Dependency arrows at lineWidth=2 are slightly thin at full resolution.
• VQ-04: Color Accessibility (2/2) — CVD-safe Imprint palette; redundant encoding (solid/thick vs dashed/thin) for critical vs non-critical path.
• VQ-05: Layout & Canvas (0/4) — AR-09: legend "Non-Critical" label clipped at right canvas edge in both renders.
• VQ-06: Axis Labels & Title (2/2) — Title correct format, date-formatted X-axis, indented task names as Y-axis labels.
• VQ-07: Palette Compliance (2/2) — First phase = #009E73 ✓, phases 2–4 follow Imprint positions 2–4 ✓, critical semantic red = #AE3030 ✓, backgrounds #FAF8F1/#1A1A17 ✓, chrome correctly themed in both renders.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong intentional design: critical-path semantic coloring in matte red, phase color coding with Imprint palette, alternating row backgrounds, milestone diamonds at deliverables, custom connector-type legend. Clearly above defaults.
• DE-02: Visual Refinement (4/6) — Good: subtle grid, alternating row colors, connector differentiation, no navigator/scrollbar/rangeSelector noise. Both X and Y grid lines active — Y grid adds mild visual noise given alternateGridColor already provides row separation.
• DE-03: Data Storytelling (4/6) — Critical path visible immediately through thick red connectors; phase color groupings guide the eye; milestone markers anchor the timeline at delivery points.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct Highcharts Gantt chart with hierarchical phases and dependency connectors.
• SC-02: Required Features (4/4) — Dependency arrows ✓, group headers with aggregate spans ✓, different visual styles for dependency types ✓, milestones ✓.
• SC-03: Data Mapping (3/3) — Correct time axis, task hierarchy, dependency relationships.
• SC-04: Title & Legend (3/3) — Title gantt-dependencies · python · highcharts · anyplot.ai ✓, custom legend for connector types.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All Gantt features shown: phases, critical vs non-critical paths, parallel tasks (Backend/Frontend overlap), milestones, hierarchical grouping.
• DQ-02: Realistic Context (5/5) — Software development project (Requirements → Design → Development → Testing) is a neutral, realistic, comprehensible scenario.
• DQ-03: Appropriate Scale (4/4) — Q1 2024 timeline with realistic task durations (days to weeks), critical path correctly sequenced.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: imports → tokens → JS config → HTML render → screenshot → save.
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data structure.
• CQ-03: Clean Imports (2/2) — All imports used (os, tempfile, time, urllib.request, pathlib, PIL, selenium).
• CQ-04: Code Elegance (2/2) — Dual PNG/HTML configs are justified; SVG renderer legend is appropriate Highcharts idiom; no fake UI.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html ✓.

Library Mastery (10/10)

• LM-01: Idiomatic Usage (5/5) — Expert use of Highcharts.ganttChart() with parent/id hierarchy, proper connector configuration, milestone point type, alternateGridColor, navigator/scrollbar/rangeSelector disabled.
• LM-02: Distinctive Features (5/5) — Leverages Gantt-specific features unavailable in other libraries: built-in dependency connectors with per-link color/dash overrides, milestone points, parent/child row grouping, SVG renderer for custom chart elements.

Score Caps Applied

• AR-09 edge clipping → Score overridden to 0

Strengths

• Expert use of Highcharts Gantt-specific API (dependency connectors, milestones, parent/child hierarchy)
• Critical-path semantic coloring (#AE3030) creates clear visual storytelling
• Correct Imprint palette with semantically appropriate color assignments
• Full theme adaptation in both light and dark renders — no dark-on-dark failures
• Alternating row backgrounds add readability without visual noise
• HTML artifact correctly saved alongside PNG

Weaknesses

• AR-09 (critical fix): Custom bottom legend "Non-Critical" text overflows the right canvas edge in both renders. Fix: in the load event, reduce the x-origin offset from plotWidth - 480 to plotWidth - 600 (or equivalently shift the "Non-Critical" start from x + 332 to x + 265), or reduce the font size of the legend annotations from 36px to 28px, or break the second item to a second line.
• Minor data label overflow: overflow: 'allow' on data labels causes text to intrude lightly into adjacent row space; consider overflow: 'allow' with tighter crop: true or reduce data-label font from 32px to 28px to reduce intrusion.

Issues Found

1. AR-09 CRITICAL: "Non-Critical" legend text clipped at right canvas edge (both renders)
   • Fix: Shift legend origin left — change plotWidth - 480 to plotWidth - 600, or lower legend font from 36px to 28px, or move Non-Critical label start from x + 332 to x + 265.
2. VQ-02 MINOR: Data labels with overflow: 'allow' bleed slightly into adjacent rows in dense phase areas (Design Phase)
   • Fix: Reduce data-label font from 32px to 28px, or add inside: false to keep labels outside bars at lower visual cost.

AI Feedback for Next Attempt

The implementation is excellent in almost every dimension — full marks on Spec Compliance, Data Quality, Code Quality, and Library Mastery. The single blocker is the custom SVG-renderer legend overflowing the right canvas edge. Fix this by shifting the legend origin left: change var x = this.plotLeft + this.plotWidth - 480 to this.plotLeft + this.plotWidth - 600, and verify the Non-Critical text fits within the 3200px boundary. No other changes required to pass; the data label overflow (VQ-02) is a secondary improvement.

Verdict: REJECTED

[github-actions]

🔧 AI Review Produced No Score — Auto-Retrying

The Claude Code Action ran but didn't write quality_score.txt. Auto-retrying review once...

---

🤖 impl-review

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background — correct light surface. Title "gantt-dependencies · python · highcharts · anyplot.ai" rendered in dark ink, fully readable. Subtitle visible in secondary ink. X-axis date tick labels (Jan 1, Jan 8 … Mar 25) and y-axis task name labels are all clearly readable in dark text. Four phases are color-coded in Imprint palette order — Requirements green (#009E73), Design lavender (#C475FD), Development blue (#4467A3), Testing ochre (#BD8233). Dependency connectors are present: solid red for critical path, dashed grey for non-critical. Milestone diamond markers visible at "Requirements Baseline ✓" and "Release Ready ★". Critical defect: The custom renderer-drawn legend at bottom-right shows "— Critical Path" (fully visible) then "— Non-Criti" — the word "Non-Critical" is truncated; approximately 3 characters ("al") are clipped at the right canvas edge. All text in the main chart body is readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct dark surface. Title and subtitle readable in light cream text. X-axis and y-axis tick labels visible in light secondary ink. Task name labels in the left column are all readable — no dark-on-dark failures in the main chart body. Phase bar colors are identical to the light render (same green, lavender, blue, ochre) — only chrome flips as expected. Critical path (red) and non-critical (dashed grey) connectors and milestone markers remain visible. Critical defect: Identical bottom-right legend clipping — "Non-Criti" truncated at the right canvas edge in the same position as the light render.

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

Score: 0/100

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

Auto-reject triggered (AR-09). All category scores are zeroed by the auto-reject rule; per-criterion scoring is not applicable in this pass.

Visual Quality (0/30)

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

Design Excellence (0/20)

• DE-01: Aesthetic Sophistication (0/8) — N/A: AR-09 auto-reject
• DE-02: Visual Refinement (0/6) — N/A: AR-09 auto-reject
• DE-03: Data Storytelling (0/6) — N/A: AR-09 auto-reject

Spec Compliance (0/15)

• SC-01: Plot Type (0/5) — N/A: AR-09 auto-reject
• SC-02: Required Features (0/4) — N/A: AR-09 auto-reject
• SC-03: Data Mapping (0/3) — N/A: AR-09 auto-reject
• SC-04: Title & Legend (0/3) — N/A: AR-09 auto-reject

Data Quality (0/15)

• DQ-01: Feature Coverage (0/6) — N/A: AR-09 auto-reject
• DQ-02: Realistic Context (0/5) — N/A: AR-09 auto-reject
• DQ-03: Appropriate Scale (0/4) — N/A: AR-09 auto-reject

Code Quality (0/10)

• CQ-01: KISS Structure (0/3) — N/A: AR-09 auto-reject
• CQ-02: Reproducibility (0/2) — N/A: AR-09 auto-reject
• CQ-03: Clean Imports (0/2) — N/A: AR-09 auto-reject
• CQ-04: Code Elegance (0/2) — N/A: AR-09 auto-reject
• CQ-05: Output & API (0/1) — N/A: AR-09 auto-reject

Library Mastery (0/10)

• LM-01: Idiomatic Usage (0/5) — N/A: AR-09 auto-reject
• LM-02: Distinctive Features (0/5) — N/A: AR-09 auto-reject

Score Caps Applied

• AR-09 (Edge Clipping): Score forced to 0, verdict REJECTED

Strengths

• Excellent Highcharts Gantt implementation using hierarchical parent/child task relationships, milestone markers, and per-dependency connector styling — textbook use of the gantt-specific API
• Full Imprint palette compliance: Requirements (#009E73), Design (#C475FD), Development (#4467A3), Testing (#BD8233) in canonical order with correct first-series brand green
• Theme-adaptive chrome correctly threaded through all elements (background, title, axis labels, tooltip, gridlines, alternateGridColor) in both renders
• Critical path vs non-critical visual distinction is clear and well-implemented via solid red (#AE3030) vs dashed grey connectors per dependency
• Clean KISS code with proper inline Highcharts Gantt JS download, CDP viewport override, and PIL pin-to-exact-dims — all library best practices followed
• Interactive HTML output correctly generated alongside PNG artifacts
• Realistic, neutral software project lifecycle data covering all four phases with sensible timeline and cross-phase dependencies

Weaknesses

• AR-09 — Non-Critical legend text clipped at right canvas edge (both renders): The custom legend is drawn via chart.events.load using this.renderer. The Non-Critical text is placed at x + 332 where x = this.plotLeft + this.plotWidth - 480. At 36px fontsize, "Non-Critical" (11 chars) is approximately 220px wide, landing the right edge at plotLeft + plotWidth - 480 + 332 + 220 ≈ plotWidth + 72 — roughly 50px beyond the 3200px canvas boundary. Both renders show "Non-Criti" with "al" chopped off. Fix: Move the legend start point further left: change var x = this.plotLeft + this.plotWidth - 480 to var x = this.plotLeft + this.plotWidth - 640 (adds 160px buffer). Verify the entire legend fits: Critical Path line (50px) + label (~260px) + gap (50px) + Non-Critical line (50px) + label (~220px) = ~630px total width needed, so -640 gives 10px safety margin.
• Minor data-label overlap on phase group header rows: Task data labels (e.g., "Requirements Analysis", "Architecture Design") rendered over the parent phase group summary bars in the middle section create visual noise. Consider suppressing dataLabels on rows where id has no parent (group-level rows) by using formatter to return null for group items, or adding more padding to push labels outside the bar bounds.

Issues Found

1. AR-09 CRITICAL: Non-Critical legend text clipped at right canvas edge — both plot-light.png and plot-dark.png
   • Root cause: renderer.text placed at x+332 from plotWidth-480 anchor; "Non-Critical" at 36px overflows canvas by ~50px
   • Fix: Change var x = this.plotLeft + this.plotWidth - 480 → var x = this.plotLeft + this.plotWidth - 640
2. VQ-02 MINOR (not scored due to AR-09): Task data labels overlap phase group header bars
   • Fix: Add formatter to suppress labels on parent/group rows, or use padding: 0, inside: false for cleaner placement

AI Feedback for Next Attempt

The implementation is conceptually strong — nearly everything is correct. The only blocking defect is the custom legend clipping at the right canvas edge. Change var x = this.plotLeft + this.plotWidth - 480 to var x = this.plotLeft + this.plotWidth - 640 in the chart.events.load handler; this shifts the entire legend 160px left, giving the "Non-Critical" label (~220px wide starting at offset +332) sufficient room to land inside the 3200px canvas. After fixing the clipping, also suppress data labels on group/parent rows by checking if (!this.point.parent) return null in a dataLabels formatter — the current overlap of task labels onto phase header bars is a minor but noticeable polish issue.

Verdict: REJECTED

[github-actions]

❌ AI Review Failed (auto-retry exhausted)

The AI review action completed but did not produce valid output files. Auto-retry already tried once.

What happened:

• The Claude Code Action ran
• No quality_score.txt file was created

Manual rerun:

gh workflow run impl-review.yml -f pr_number=8215

---

🤖 impl-review

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) — correct. Title "gantt-dependencies · python · highcharts · anyplot.ai" in dark ink clearly visible at top; subtitle "Software Development Project Schedule — Critical Path & Phase Dependencies" in INK_SOFT below. X-axis date labels (Jan 1 – Mar 25) readable. Y-axis task names (phase headers + child tasks) in dark ink readable. Grid lines subtle with alternating row fill (ELEVATED_BG) adding excellent readability. Four colour bands visible: Requirements (#009E73 green), Design (#C475FD lavender), Development (#4467A3 blue), Testing (#BD8233 ochre). Dependency connectors present — critical path in #AE3030 solid red, non-critical in dashed INK_MUTED. Milestone diamonds visible. All main text readable against the light background. Exception: Bottom-right custom legend shows "Critical Path" (complete) but "Non-Criti..." — the word "Non-Critical" is clipped at the right canvas edge with approximately the last 3–4 characters ("cal") missing as pixels.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct. Title and subtitle in light #F0EFE8 text clearly visible. X-axis date labels in #B8B7B0 (INK_SOFT dark) readable. Y-axis task names in light ink readable. No dark-on-dark text failures for any labelled chart element. Data colours identical to light render — #009E73 green, #C475FD lavender, #4467A3 blue, #BD8233 ochre. Critical-path #AE3030 connectors and dashed non-critical connectors preserved. Brand green #009E73 clearly visible on dark surface. Same AR-09 clipping of "Non-Critical" legend text at the right canvas edge.

Both paragraphs required — both reviewed. AR-09 violation present identically in both renders.

Score: 0/100

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

Score forced to 0 by AR-09 auto-reject. Indicative score without AR-09: ~87/100.

Visual Quality (0/30)

• VQ-01: Text Legibility (0/8) — AR-09 override; indicative 6/8
• VQ-02: No Overlap (0/6) — AR-09 override; indicative 4/6 (phase header label bleeds into child task bars)
• VQ-03: Element Visibility (0/6) — AR-09 override; indicative 5/6
• VQ-04: Color Accessibility (0/2) — AR-09 override; indicative 2/2 (Imprint palette CVD-safe)
• VQ-05: Layout & Canvas (0/4) — AR-09 triggered: "Non-Critical" legend text clipped at right canvas edge
• VQ-06: Axis Labels & Title (0/2) — AR-09 override; indicative 2/2
• VQ-07: Palette Compliance (0/2) — AR-09 override; indicative 2/2 (perfect Imprint compliance)

Design Excellence (0/20)

• DE-01: Aesthetic Sophistication (0/8) — AR-09 override; indicative 6/8
• DE-02: Visual Refinement (0/6) — AR-09 override; indicative 4/6
• DE-03: Data Storytelling (0/6) — AR-09 override; indicative 5/6

Spec Compliance (0/15)

• SC-01: Plot Type (0/5) — AR-09 override; indicative 5/5
• SC-02: Required Features (0/4) — AR-09 override; indicative 4/4
• SC-03: Data Mapping (0/3) — AR-09 override; indicative 3/3
• SC-04: Title & Legend (0/3) — AR-09 override; indicative 3/3

Data Quality (0/15)

• DQ-01: Feature Coverage (0/6) — AR-09 override; indicative 6/6
• DQ-02: Realistic Context (0/5) — AR-09 override; indicative 5/5
• DQ-03: Appropriate Scale (0/4) — AR-09 override; indicative 4/4

Code Quality (0/10)

• CQ-01: KISS Structure (0/3) — AR-09 override; indicative 3/3
• CQ-02: Reproducibility (0/2) — AR-09 override; indicative 2/2
• CQ-03: Clean Imports (0/2) — AR-09 override; indicative 2/2
• CQ-04: Code Elegance (0/2) — AR-09 override; indicative 2/2
• CQ-05: Output & API (0/1) — AR-09 override; indicative 1/1

Library Mastery (0/10)

• LM-01: Idiomatic Usage (0/5) — AR-09 override; indicative 5/5
• LM-02: Distinctive Features (0/5) — AR-09 override; indicative 4/5

Score Caps Applied

• AR-09 AUTO-REJECT — score forced to 0

Strengths

• Perfect Imprint palette compliance: C1=#009E73 (Requirements), C2=#C475FD (Design), C3=#4467A3 (Development), C4=#BD8233 (Testing) in canonical order; CRITICAL=#AE3030 used correctly as semantic anchor for the critical path
• Full spec feature coverage: native Highcharts Gantt connectors with finish-to-start dependency arrows, phase group headers with aggregate bars, milestone markers (★ / ✓), and two dependency styles (critical solid vs. non-critical dashed)
• Strong theme-adaptive chrome: PAGE_BG, INK, INK_SOFT, INK_MUTED, GRID, ELEVATED_BG all properly tied to ANYPLOT_THEME; alternating grid rows using ELEVATED_BG add excellent readability
• Idiomatic Highcharts Gantt usage: parent/child hierarchy, native connector system with per-dependency color/lineWidth/dashStyle overrides
• Rich data storytelling: critical path concept clearly communicated via red connectors vs. dashed non-critical lines; phase colours create immediate visual grouping hierarchy

Weaknesses

• AR-09 VIOLATION: Custom bottom-right legend text "Non-Critical" is clipped at the right canvas edge. Math: anchor x = this.plotLeft + this.plotWidth - 480 ≈ 2700px; label starts at x + 332 = 3032px; at 36px font "Non-Critical" (12 chars ≈ 240px) ends at ~3272px — 72px past the 3200px canvas boundary. Fix: increase the anchor offset from -480 to -650 → label starts at x + 332 ≈ 2882px, ends at ~3122px, safely within 3200 - 20 = 3180px. Alternatively, reduce font from 36px to 28px so both legend items fit at the current anchor.

Issues Found

1. AR-09: "Non-Critical" legend text pixels clipped at the right canvas edge (both light and dark renders)
   • Fix: In the chart.events.load callback, change var x = this.plotLeft + this.plotWidth - 480 to var x = this.plotLeft + this.plotWidth - 650. This shifts both legend items left by 170px so "Non-Critical" ends at ~3122px, well within the 3180px safe boundary. No other changes needed.

AI Feedback for Next Attempt

This is a single-fix repair: move the custom legend anchor 170px to the left (change -480 to -650 in the load event x calculation). Everything else — palette, theme chrome, spec features, code quality, data storytelling — is excellent and should be preserved exactly as-is. Do not alter any other part of the implementation.

Verdict: REJECTED

[github-actions]

❌ AI Review Failed (auto-retry exhausted)

The AI review action completed but did not produce valid output files. Auto-retry already tried once.

What happened:

• The Claude Code Action ran
• No quality_score.txt file was created

Manual rerun:

gh workflow run impl-review.yml -f pr_number=8215

---

🤖 impl-review