feat(highcharts): implement circos-basic

[github-actions]

Implementation: circos-basic - python/highcharts

Implements the python/highcharts version of circos-basic.

File: plots/circos-basic/implementations/python/highcharts.py

Parent Issue: #3005

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (): The visualization displays a circular dependency wheel with 8 chromosomes arranged around the perimeter, connected by ribbons of varying widths proportional to their connection strength. The background is warm off-white (#FAF8F1), with the main circular wheel centered. An inner concentric pie chart shows expression values as percentages (28%, 19%, 16%, 13%, 10%, 7%, 5%, 2%). All chromosome segments are distinctly colored using the Okabe-Ito palette starting with #009E73 (blue-green). The title and subtitle at the top are in dark ink (#1A1A17) and are clearly readable. The legend on the right displays all 8 chromosomes with their corresponding colors in a styled box. Data labels showing chromosome names (Chr1-Chr8) appear on the outer ring with text outlines for clarity. All text elements are fully readable against the light background.

Dark render (): The same circular dependency wheel layout renders on a warm near-black background (#1A1A17). The data colors (Okabe-Ito palette segments) are identical to the light render, confirming theme-independent data representation. The title and subtitle appear in light ink (#F0EFE8) and are clearly visible. The legend maintains the same structure with light text on the dark elevated background (#242420). The chromosome labels on the outer ring are rendered in light text with subtle outlines, remaining readable. Expression percentages in the inner pie chart are similarly light-colored with contrast outlines. No dark-on-dark failures are present. All text is readable and the visualization maintains full clarity in both themes.

Score: 86/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (6/8) - Most text explicitly sized and readable; outer ring chromosome labels could be larger for 3600px canvas
• VQ-02: No Overlap (6/6) - No text overlap; legend positioned clear of plot
• VQ-03: Element Visibility (6/6) - All markers and ribbons well-sized and clearly visible
• VQ-04: Color Accessibility (2/2) - Okabe-Ito palette is CVD-safe with strong contrast
• VQ-05: Layout & Canvas (4/4) - Perfect balance; plot fills 60-70% of canvas with generous margins
• VQ-06: Axis Labels & Title (2/2) - Title format correct; descriptive subtitle provided
• VQ-07: Palette Compliance (2/2) - First series #009E73; multi-series follow Okabe-Ito order; backgrounds #FAF8F1/#1A1A17; theme-adaptive chrome perfect

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (5/8) - Publication-ready aesthetic with thoughtful Okabe-Ito color application; primarily uses library defaults with limited custom refinement
• DE-02: Visual Refinement (5/6) - Good refinement with styled legend box, text outlines for readability, and generous whitespace
• DE-03: Data Storytelling (5/6) - Clear visual hierarchy with meaningful connection width encoding and secondary expression dimension

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct circos/dependency wheel with all required features
• SC-02: Required Features (4/4) - Segments, ribbons, proportional widths, distinct colors, concentric tracks all present
• SC-03: Data Mapping (3/3) - Source→target ribbons, value→width, all connections visible
• SC-04: Title & Legend (3/3) - Title format correct; legend shows all chromosomes with colors

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) - Shows connection variation, expression variance, realistic distribution
• DQ-02: Realistic Context (5/5) - Real bioinformatics scenario with genomic chromosome data
• DQ-03: Appropriate Scale (4/4) - Expression percentages realistic; exponential flow distribution appropriate

Code Quality (9/10)

• CQ-01: KISS Structure (3/3) - Clean linear flow: imports → data → config → export
• CQ-02: Reproducibility (2/2) - Seed set; deterministic flow matrix generation
• CQ-03: Clean Imports (2/2) - All imports used; no bloat
• CQ-04: Code Elegance (1/2) - Generally clean, but dummy zero-sized pie series (lines 145-155) for legend population is slightly inelegant
• CQ-05: Output & API (1/1) - Correct output format with both PNG and HTML

Library Mastery (5/10)

• LM-01: Idiomatic Usage (2/5) - Does not use recommended highcharts_core Python library; instead uses raw JSON config with Selenium. This approach works but is not idiomatic for Python integration
• LM-02: Distinctive Features (3/5) - Effective use of dependency wheel chart type, but overall approach is fairly generic

Score Caps Applied

• None applied

Strengths

• Excellent spec compliance with perfect implementation of all required features
• Outstanding theme adaptation with readable text in both light and dark modes
• Perfect palette compliance using Okabe-Ito throughout
• Clean data design with realistic genomic scenario
• Well-balanced layout and canvas utilization
• Proper use of text outlines for legibility across colored backgrounds

Weaknesses

• Not using the recommended Python highcharts_core library; instead relies on raw JavaScript/JSON configuration
• Chromosome labels on outer ring could be larger for the 3600px canvas size
• Dummy pie series workaround for legend population is inelegant

Issues Found

1. LM-01 LOW: Not using highcharts_core Python API

   • Fix: Migrate to the recommended approach if dependency-wheel is supported, or document why raw JSON/Selenium is necessary

2. VQ-01 MINOR: Outer ring labels slightly small

   • Fix: Increase font size for chromosome labels from 28px to 32-36px for better visibility at 3600px resolution

3. CQ-04 MINOR: Inelegant legend population method

   • Fix: Consider if Highcharts supports alternative legend population without creating zero-sized series

AI Feedback for Next Attempt

This is a strong implementation with perfect spec compliance and excellent theme adaptation. The circular layout is well-executed and the data storytelling is clear. Focus on: (1) using the recommended highcharts_core Python library where possible, or documenting the Selenium/PNG export requirements; (2) increasing outer ring label sizes for the large 3600px canvas; (3) simplifying the legend population approach if alternatives exist. The visualization quality itself is publication-ready and ready for immediate repair.

Verdict: REJECTED

Reason: Score of 86/100 is below the Review 1 threshold of 90. Repair attempts should address library integration and minor sizing issues before attempting re-review.

[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): The plot displays a circular dependency wheel with 8 chromosomes (Chr1-Chr8) arranged around the ring, each assigned a distinct Okabe-Ito color starting with #009E73 (brand green). Inter-chromosomal connections are shown as ribbons with width proportional to flow values. The center contains a donut pie chart showing expression percentages for each chromosome. The background is warm off-white (#FAF8F1). The title "circos-basic · highcharts · anyplot.ai" with subtitle "Chromosomal Connections with Expression Tracks" are clearly readable with dark text. All chromosome labels, percentage values, and legend entries are legible. The legend on the right displays all 8 chromosomes with matching color swatches.

Dark render (plot-dark.png): The identical layout and data structure render on the warm near-black background (#1A1A17) with light text for all labels. The data colors (ribbons, pie segments) are identical to the light render—only the chrome (background, title, labels, legend) adapts to the dark theme. All text is clearly visible against the dark background with no dark-on-dark failures. The #009E73 brand green remains distinctly visible. Both title/subtitle and all axis labels are readable. The theme adaptation is flawless across both renders.

Score: 89/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All text readable in both themes with proper font sizes
• VQ-02: No Overlap (6/6) - Clean label placement, no collisions
• VQ-03: Element Visibility (6/6) - Ribbons, nodes, pie segments all clearly visible
• VQ-04: Color Accessibility (2/2) - Okabe-Ito palette is CVD-safe with good contrast
• VQ-05: Layout & Canvas (4/4) - Well-proportioned square canvas, nothing cut off
• VQ-06: Axis Labels & Title (2/2) - Correct format "circos-basic · highcharts · anyplot.ai"
• VQ-07: Palette Compliance (2/2) - First color #009E73, backgrounds #FAF8F1/#1A1A17, both renders theme-correct

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) - Circular arrangement is elegant, custom legend with title and symbol sizing, good color hierarchy. Could refine ribbon styling further.
• DE-02: Visual Refinement (4/6) - Good polish with text outlines for readability, legend background/border, proper margins. Room for subtle enhancements.
• DE-03: Data Storytelling (4/6) - Clear visual hierarchy with outer categorical segments → ribbons → center expression data. Focal point established.

Spec Compliance (14/15)

• SC-01: Plot Type (4/5) - Uses dependencywheel, a circular plot with connections and relationships. Minor deduction: specification calls for "1-3 concentric tracks inside the outer ring" but Highcharts' dependencywheel doesn't support true concentric rings. Workaround uses pie chart in center, which is effective but not the spec'd track structure.
• SC-02: Required Features (4/4) - All features present: source/target/value data, segment coloring, proportional ribbons, expression track
• SC-03: Data Mapping (3/3) - Correct mapping of chromosomes, flows, and expression values
• SC-04: Title & Legend (3/3) - Correct format, legend shows all chromosomes

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all aspects: 8 chromosome segments, 28 connections, expression values with realistic percentages
• DQ-02: Realistic Context (5/5) - Genomic context appropriate; exponential distribution for flows; some chromosome pairs with stronger connections (realistic)
• DQ-03: Appropriate Scale (4/4) - 8 segments within 5-30 range, 28 connections within 10-100 range, sensible percentages

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Direct, no unnecessary functions
• CQ-02: Reproducibility (2/2) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only used imports: numpy, selenium, urllib, json, tempfile, time, pathlib
• CQ-04: Code Elegance (2/2) - No fake UI; proper module downloads; clean structure
• CQ-05: Output & API (1/1) - Saves as plot-{THEME}.png and plot-{THEME}.html

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) - Uses Highcharts' high-level API with proper options structure; theme-adaptive colors implemented idiomatically; downloads and loads required modules correctly
• LM-02: Distinctive Features (2/5) - Uses dependencywheel module (not available in other libraries) and pie composite overlay. Limited opportunity to showcase more distinctive Highcharts capabilities.

Score Caps Applied

• None - all criteria scores above cap thresholds

Strengths

• Flawless theme adaptation: both light and dark renders perfectly readable with correct palette usage
• Okabe-Ito colors applied correctly with brand green (#009E73) as primary series
• Large, legible text sizes appropriate for high-resolution canvas
• Realistic, reproducible data with exponential distribution and seed-based generation
• Clean, idiomatic Highcharts code with proper module management
• Well-structured legend with chromosome identification and symbol colors

Weaknesses

• Spec calls for "1-3 concentric tracks inside the outer ring" but Highcharts' dependencywheel doesn't support true concentric rings. The pie chart workaround is effective but doesn't match the concentric-ring architecture described in specification.
• Limited showcase of Highcharts' distinctive visualization capabilities beyond the dependencywheel module

Issues Found

1. SC-01 MINOR: Incomplete concentric track support
   • Fix: This is a Highcharts API limitation (no native circos support). The dependencywheel + pie workaround is the best available approach, but acknowledge that true multi-layer concentric rings cannot be implemented in Highcharts.

AI Feedback for Next Attempt

The implementation is solid and theme-adaptation is excellent. The main limitation is architectural: Highcharts lacks native circos support with concentric rings. Consider whether enhanced ribbon styling, additional pie layers, or alternative Highcharts features could more closely approximate the spec's multi-track concept. Otherwise, the current approach is the optimal solution within Highcharts' constraints.

Verdict: APPROVED