loading animation refinements
- Dominant language
- Python
- Stars
- 30
- Forks
- 3
- Avg merge
- 9h 28m
- Merged PRs (30d)
- 42
Description
🤖 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).
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.