Add user-defined color schemes with color picker UI by Copilot · Pull Request #6 · BackofenLab/vaRRI-js

Copilot · 2026-07-02T08:19:10Z

Users had no way to customize the colors used in visualizations — all colors (strand coloring, highlighting, background highlighting, subsequence highlighting) were hardcoded throughout the library.

vaRRI.js — Configurable color API

Added a module-level COLORS object with default values, plus setColors() / getColors() in the public API:

// Override one or more colours before rendering
vaRRI.setColors({
  sequence1: '#0077bb',
  sequence2: '#ee7733',
  intermolecularHighlight: '#009988',
  backgroundHighlight: '#cc3311',
  subsequenceHighlight: '#aa3377',
});

// Inspect current settings
const current = vaRRI.getColors();

All five color keys (sequence1, sequence2, intermolecularHighlight, backgroundHighlight, subsequenceHighlight) have existing defaults preserved, so existing usage is unaffected. Updated functions: sequenceColoring, colorLabelRed, highlightingRegion, highlightingBasepairs, backgroundhighlightingBasepairs, backgroundhighlightingRegion, highlightSubsequence.

index.html — Color picker legend

Replaced static color swatches in the legend with <input type="color"> elements styled to match the existing swatch shapes (circular / rectangular).
Each picker initializes to the library default.
On change, applyColors() reads all pickers → calls vaRRI.setColors() → re-renders. Uses onchange (not oninput) to avoid continuous re-renders while dragging.
runVisualization() also calls applyColors() on every run to keep picker state and library state in sync.

Tests

Added 9 tests covering getColors/setColors: default values, copy isolation, partial and multi-key overrides, effect on sequenceColoring, and state restoration after reset.

…legend

…ts init

martin-raden · 2026-07-02T08:41:30Z

@copilot

replace in the legend "G-U basepair (dashed)" with "base pair" and replace the associated dashed line with a colored bar (similar to "Background highlight") in the base pair color (currently red as default)
make the new colored bar a color chooser for base pair color
add the option to chose a base pair color to the JS lib and connect it with the introduced color choser for base pair color

Copilot · 2026-07-02T08:48:03Z

@copilot

replace in the legend "G-U basepair (dashed)" with "base pair" and replace the associated dashed line with a colored bar (similar to "Background highlight") in the base pair color (curr...

Done in commit Add basepair color: COLORS.basepair key, color picker in legend, tests.

Added basepair key to the COLORS object in vaRRI.js (default 'red').
visualiseBasepairStrength now sets stroke to COLORS.basepair on all basepair links (G-U dashed styling is preserved on top of the color).
Replaced the static dashed-line legend entry ("G-U basepair (dashed)") with a rectangular <input type="color"> picker (id color-basepair, default #ff0000) labeled "Base pair", styled the same way as the "Background highlight" swatch.
applyColors() now passes the picker value as the basepair color to vaRRI.setColors().
Tests updated: new key present in getColors result, default is 'red', and setColors({basepair: …}) works correctly (102/102 pass).

martin-raden · 2026-07-02T09:01:00Z

@copilot BUG: the base pair color in the visualization is not changed when using the base pair color chooser

Copilot · 2026-07-02T09:05:27Z

@copilot BUG: the base pair color in the visualization is not changed when using the base pair color chooser

Fixed in the latest commit. The root cause was CSS specificity: the Fornac stylesheet has line.fornac-link[link_type="basepair"] { stroke: red; }, which always overrides SVG presentation attributes set via setAttribute('stroke', ...). Changed visualiseBasepairStrength to use link.style.stroke = COLORS.basepair (inline style) instead, which has higher priority in the CSS cascade and correctly reflects the chosen color.

martin-raden · 2026-07-02T11:37:36Z

     *
     * @param {number} targetIndex
     */
    function colorLabelRed(targetIndex) {


@copilot rename function and all occurrences to highlightLabel

Done — colorLabelRed renamed to highlightLabel at all occurrences in the latest commit.

martin-raden · 2026-07-02T11:38:31Z

rename to highlightRegion and update all usages

martin-raden · 2026-07-02T11:39:48Z

rename to highlightBasepairs and update all usages

martin-raden · 2026-07-02T11:41:54Z

     *
     * @param {Object} v  Validated parameter dictionary.
     */
    function visualiseBasepairStrength(v) {


rename to styleBasepairs and update all occurrences

martin-raden · 2026-07-02T11:47:58Z

      <div class="legend-grid">
        <div class="legend-item">
-          <div class="swatch" style="background:lightblue;"></div>
+          <input type="color" id="color-seq1" class="legend-color" value="#add8e6"


read and set all default color values of all color choosers from the varri.js COLORS object

martin-raden · 2026-07-02T11:50:34Z

@copilot implement all requested changes from the review

Copilot · 2026-07-02T11:53:36Z

@copilot implement all requested changes from the review

All four review requests are addressed in the latest commit:

highlightingRegion → highlightRegion (all call sites + exports updated)
highlightingBasepairs → highlightBasepairs (all call sites + exports updated)
visualiseBasepairStrength → styleBasepairs (all call sites + exports updated)
Color pickers now read initial values from vaRRI.getColors() via initColorPickers() (canvas-based CSS→hex conversion), removing the hardcoded hex values from the HTML

martin-raden · 2026-07-02T11:58:49Z

            // G-U basepair strength
            if (v.guBasepairs) {
-                visualiseBasepairStrength(v);
+                styleBasepairs(v);


@copilot move the surrounding if-statement into "styleBasepairs" and check within the function how GU base pairs should be styled (if v.guBasepairs is true, use dashed style, otherwise normal solid style)

Done in commit Refactor styleBasepairs: move guBasepairs check inside function. The surrounding if (v.guBasepairs) guard has been moved inside styleBasepairs. The function is now called unconditionally and handles both cases internally: when v.guBasepairs is true, G-U pairs get dashed styling while all others get solid; when false, all basepairs use solid styling. The basepair color is always applied regardless.

Initial plan

3fafbba

Copilot AI assigned Copilot and martin-raden Jul 2, 2026

Copilot AI linked an issue Jul 2, 2026 that may be closed by this pull request

color chooser #5

Closed

Copilot started work on behalf of martin-raden July 2, 2026 08:19 View session

Copilot AI added 2 commits July 2, 2026 08:27

Add color chooser: configurable COLORS in vaRRI.js, color pickers in …

ef08b6c

…legend

Address review: use onchange instead of oninput; clean up test defaul…

330ec1b

…ts init

Copilot AI changed the title ~~[WIP] Enable user defined color schemes in varri.js library~~ Add user-defined color schemes with color picker UI Jul 2, 2026

Copilot AI requested a review from martin-raden July 2, 2026 08:32

Copilot finished work on behalf of martin-raden July 2, 2026 08:32

Copilot started work on behalf of martin-raden July 2, 2026 08:41 View session

Add basepair color: COLORS.basepair key, color picker in legend, tests

094d22b

Copilot finished work on behalf of martin-raden July 2, 2026 08:48

Copilot started work on behalf of martin-raden July 2, 2026 09:01 View session

Fix basepair color picker: use inline style to override Fornac CSS

8ffc6e4

Copilot finished work on behalf of martin-raden July 2, 2026 09:05

martin-raden requested changes Jul 2, 2026

View reviewed changes

Copilot started work on behalf of martin-raden July 2, 2026 11:48 View session

Rename colorLabelRed to highlightLabel and update all usages

c7880ba

Copilot finished work on behalf of martin-raden July 2, 2026 11:49

Copilot AI requested a review from martin-raden July 2, 2026 11:49

Copilot started work on behalf of martin-raden July 2, 2026 11:50 View session

Rename functions, init color pickers from vaRRI.getColors() defaults

81cc23a

Copilot finished work on behalf of martin-raden July 2, 2026 11:54

martin-raden reviewed Jul 2, 2026

View reviewed changes

Copilot started work on behalf of martin-raden July 2, 2026 11:59 View session

Refactor styleBasepairs: move guBasepairs check inside function

ae422d5

Copilot finished work on behalf of martin-raden July 2, 2026 12:01

Copilot AI requested a review from martin-raden July 2, 2026 12:01

rearranging elements

50a52da

martin-raden marked this pull request as ready for review July 2, 2026 12:23

martin-raden merged commit 747dcbd into main Jul 2, 2026
1 check passed

martin-raden deleted the copilot/color-chooser-implementation branch July 2, 2026 12:23

Uh oh!

Conversation

Copilot AI commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

vaRRI.js — Configurable color API

index.html — Color picker legend

Tests

Uh oh!

martin-raden commented Jul 2, 2026

Uh oh!

Copilot AI commented Jul 2, 2026

Uh oh!

martin-raden commented Jul 2, 2026

Uh oh!

Copilot AI commented Jul 2, 2026

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

martin-raden commented Jul 2, 2026

Uh oh!

Copilot AI commented Jul 2, 2026

Uh oh!

martin-raden Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jul 2, 2026 •

edited

Loading