Skip to content

Commit da75756

Browse files
PaururoPaururo
committed
Add a standalone BamViewer demo harness for browser-based component testing
Renders the real BamViewer component in a plain browser without launching the full Tauri app: vite.demo.config.ts aliases the Tauri core API to a mock that returns a real get_bam_view fixture (scenario 02a: chr_test MNV 28 G>T / 30 T>A, GCT->TCA Ala10Ser, 20 reads), so the read pileup, codon/AA tracks, coverage and reference render exactly as in the app. Run with 'npm run demo' (port 5180). Production build is unaffected (demo/ is outside the app tsconfig include).
1 parent c7c62e8 commit da75756

8 files changed

Lines changed: 1044 additions & 0 deletions

File tree

‎frontend/demo/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# BamViewer demo harness
2+
3+
Renders the real `BamViewer` component in a plain browser, without launching the
4+
full Tauri desktop app. The Tauri `get_bam_view` command is mocked
5+
(`tauri-core-mock.ts`) to return a fixture captured from the core engine, so the
6+
read pileup, codon/AA tracks, coverage and reference rows render exactly as in
7+
the app.
8+
9+
```bash
10+
cd frontend
11+
npm install # first time only
12+
npm run demo # serves the demo at http://localhost:5180
13+
```
14+
15+
Append `?reads=1` to the URL to auto-scroll the read pileup into view.
16+
17+
## Fixtures
18+
19+
- `sample_bam_view.json` — a real `get_bam_view` response for scenario `02a`
20+
(`chr_test` MNV `28 G>T` / `30 T>A`, codon `GCT→TCA` = Ala10Ser, 20 supporting
21+
reads), produced by calling the GUI backend command on the scenario BAM/FASTA.
22+
- `sample_tsv.json` — the matching `TsvData` parsed from that scenario's
23+
`variants.MNV.tsv`.
24+
25+
To refresh the fixtures, call `get_bam_view` (src-tauri) on a scenario work dir
26+
and serialize the response, then convert the scenario `.MNV.tsv` to
27+
`{headers, rows}`.

‎frontend/demo/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>get_MNV BamViewer demo</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="./main.tsx"></script>
11+
</body>
12+
</html>

‎frontend/demo/main.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Standalone demo entry: renders the real BamViewer component with a real
2+
// get_bam_view fixture (scenario 02a: chr_test MNV 28 G>T / 30 T>A, GCT->TCA
3+
// Ala10Ser, 20 supporting reads). Used to verify the read visualization renders
4+
// well without launching the full Tauri desktop app.
5+
import { StrictMode } from "react";
6+
import { createRoot } from "react-dom/client";
7+
import BamViewer from "../src/components/BamViewer";
8+
import type { TsvData } from "../src/types";
9+
import sampleTsv from "./sample_tsv.json";
10+
import "../src/index.css";
11+
import "../src/App.css";
12+
13+
const root = document.getElementById("root");
14+
if (!root) throw new Error("missing #root");
15+
16+
// Demo aid: once the (mocked) reads have rendered, scroll the reference row to
17+
// the top so a fresh-page screenshot frames the read pileup.
18+
if (new URLSearchParams(location.search).get("reads") === "1") {
19+
const tryScroll = () => {
20+
const ref = document.querySelector(".bam-grid-row--reference");
21+
if (ref) {
22+
ref.scrollIntoView({ block: "start" });
23+
window.scrollBy(0, -8);
24+
} else {
25+
setTimeout(tryScroll, 100);
26+
}
27+
};
28+
setTimeout(tryScroll, 300);
29+
}
30+
31+
createRoot(root).render(
32+
<StrictMode>
33+
<div className="app" style={{ padding: 16 }}>
34+
<h2 style={{ margin: "4px 0 12px" }}>get_MNV — Genomic Track Viewer (demo)</h2>
35+
<BamViewer
36+
bamPath="scenario02a/reads.bam"
37+
fastaPath="scenario02a/ref.fasta"
38+
data={sampleTsv as TsvData}
39+
minMapq={0}
40+
minBaseQuality={20}
41+
/>
42+
</div>
43+
</StrictMode>,
44+
);

0 commit comments

Comments
 (0)