kemal/rarelens
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): show what the pipeline is doing while a job runs

Browse Source 
"running" for two and a half minutes tells the user nothing. The job page now shows a
spinner, the elapsed time, and the pipeline step Nextflow is actually on.

- the API streams the Nextflow output into jobs.log as it arrives, instead of keeping it
  only when the run dies. Writes are throttled to one every 3s, or immediately when a new
  process starts, and are skipped for a job that has already finished, so a late line
  cannot overwrite the loader's result.
- web/src/lib/progress.ts formats the elapsed time and picks the latest [PROCESS] line.
  No percentage: the pipeline cannot honestly estimate one.
- the spinner animates only under prefers-reduced-motion: no-preference.

Verified on a live run: the page showed "VEP (tiny)" for the duration, then the variant
table replaced it on success.

Tests: api 53, web 20; ruff, mypy, svelte-check clean.
This commit is contained in:
Kemal Yaylali
2026-09-12 07:46:44 +01:00
parent ae58e33fe2
commit 33e788122b
14 changed files with 638 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app.css
+8 -1
View File
@@ -32,4 +32,11 @@ td.coord, td.hgvs { font-family: var(--mono); font-size: 0.85rem; } /* aligned
.status { font-weight: 600; }
.status.failed { color: #9a1b1b; }
.status.running, .status.queued { color: var(--amber); }
@media (prefers-reduced-motion: no-preference) { button { transition: background 120ms; } }
.progress { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); margin: 0.25rem 0 1rem; }
.progress .hgvs { font-size: 0.85rem; }
.spinner { width: 0.9rem; height: 0.9rem; flex: none; border: 2px solid var(--line); border-top-color: var(--plum); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
button { transition: background 120ms; }
.spinner { animation: spin 0.9s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }