1import { BackendPanel } from "./BackendPanel";
3// One of the NWB files in DANDI dandiset 000986 (mouse auditory cortex).
4// This is the same asset shown at:
5// https://neurosift.app/nwb?url=https%3A%2F%2Fapi.dandiarchive.org%2Fapi%2Fassets%2Faacd1c8a-73f7-469e-bf08-0afd5c1052f9%2Fdownload%2F&dandisetId=000986
6const DOWNLOAD_URL =
7 "https://api.dandiarchive.org/api/assets/aacd1c8a-73f7-469e-bf08-0afd5c1052f9/download/";
8const DANDISET_ID = "000986";
10export const Demo = () => {
11 return (
12 <div>
13 <h2>Live demo</h2>
14 <p style={{ fontSize: 14, color: "#444", maxWidth: 800 }}>
15 Both panels below read the <em>same</em> remote NWB file lazily, entirely
16 in your browser — nothing is downloaded in full and there is no server.
17 The left panel reads the raw HDF5 over HTTP range requests (h5wasm); the
18 right panel reads through a precomputed LINDI JSON index. Open your
19 browser's network tab to watch the partial range requests.
20 </p>
21 <div
22 style={{
23 fontSize: 12,
24 fontFamily: "monospace",
25 background: "#f0f0f0",
26 padding: "8px 10px",
27 borderRadius: 6,
28 marginBottom: 16,
29 wordBreak: "break-all",
30 }}
31 >
32 dandiset {DANDISET_ID} · {DOWNLOAD_URL}
33 <br />
34 <a
35 href={`https://neurosift.app/nwb?url=${encodeURIComponent(DOWNLOAD_URL)}&dandisetId=${DANDISET_ID}`}
36 target="_blank"
37 rel="noopener noreferrer"
38 >
39 open this file in neurosift ↗
40 </a>
41 </div>
42 <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
43 <BackendPanel
44 title="Direct HDF5 (h5wasm + range requests)"
45 description="Resolves the DANDI redirect, then reads the raw .nwb HDF5 with h5wasm in a web worker. Each group/dataset/slice triggers HTTP Range requests for just those bytes."
46 mode="direct"
47 downloadUrl={DOWNLOAD_URL}
48 dandisetId={DANDISET_ID}
49 />
50 <BackendPanel
51 title="LINDI (JSON reference index)"
52 description="Loads a precomputed JSON index that maps every group/dataset/attribute to byte ranges. Metadata is read from the index; only chunk data is range-requested from the original HDF5."
53 mode="lindi"
54 downloadUrl={DOWNLOAD_URL}
55 dandisetId={DANDISET_ID}
56 />
57 </div>
58 </div>
59 );
60};