loading animation refinements

[davmlaw]

🤖 Written by Claude

We added a set of DNA/genomics-themed loading animations that play while an analysis node grid loads (replacing the lone double-helix). They're user-selectable in User Settings → Grid Loading Animations, shown at random.

Public preview page (no login): /loading_animations — handy for tinkering and as a front-page/docs easter egg.

Already built: double-helix (classic, also the fallback), Read Pulse, Base FX (Matrix / Ripple / Wave), Flowcell, Read Pileup.

This issue tracks further ideas. None are started.

New animation ideas

• Sanger trace / electropherogram — the classic 4-colour chromatogram: smooth coloured peaks (A/C/G/T) scrolling, base calls underneath. Analog peaks rather than discrete flashes.
• Coverage track building — a depth histogram filling left→right as reads land, the skyline rising into a coverage profile with a sweep line.
• Replication fork (helix unzip) — the double strand unzips down the middle and complementary bases fill in on each side (A↔T, C↔G with connecting rungs). A more "alive" upgrade to the spinning helix.
• Translation / ribosome — base triplets slide through a reading head; each codon emits an amino-acid bead/3-letter code onto a growing peptide chain.
• Gel electrophoresis — fragment bands start in wells and migrate down lanes at size-dependent speeds; a loading bar that's literally a gel running.
• Lollipop sweep — a transcript bar with domains; mutation "lollipops" pop up along it one by one.
• Manhattan plot rain — points scatter upward across chromosome-coloured bands, a few crossing a significance line and flaring.
• Codon colourise (quick) — reuse the frozen GATC field but tint every third base (reading frame) and shift the frame.
• Methylation toggle (quick) — sparse CpG sites blink between methylated/unmethylated states.
• Contig assembly (quick) — fragments slide together and fuse into one long sequence, overlaps briefly highlighted.

Refinements to existing animations

• Clear-on-white palette — the analysis overlay renders dark-theme glyphs on a clear/white background, but the dark palette's lit colour is lighter than its resting colour, so the ripple highlight reads as a gentle lightening rather than a bright pulse. A palette tuned specifically for white backgrounds would make ripple (and others) pop.
• Per-animation tuning of speeds/density once seen in real grid loads.

Implementation notes

Loaders live in variantgrid/static_files/default_static/js/lib/loaders/ and self-register via VGLoaders.register(id, {label, start(container, opts) → stop()}). They support opts.theme (dark/light) and opts.clearBackground. To add one to the official set: drop the *.loader.js, include it in analysis/templates/analysis/analysis_includes.html, and add it to GridLoadingAnimation + the LOADER_IDS map in analysis.js (and to DEFAULT_GRID_LOADING_ANIMATIONS if on by default).