// ────────────────────────────────────────────────────────────── // LIULIAN — Data workspace (the strengthened one) // Dataset list + detail · schema · table · quicklook · transform // · import · export · manifest · share // ────────────────────────────────────────────────────────────── function DataPage({ onAgent, nav }) { const [activeId, setActiveId] = React.useState("swiss-river-1990"); const [view, setView] = React.useState("overview"); // overview / schema / table / explore / pipeline / manifest / share const [showImport, setShowImport] = React.useState(false); const ds = DATASETS.find(d => d.id === activeId); return (
setShowImport(true)} />
setShowImport(true)} onAgent={onAgent} />
{view === "overview" && } {view === "schema" && } {view === "table" && } {view === "explore" && } {view === "pipeline" && } {view === "manifest" && } {view === "share" && }
{showImport && setShowImport(false)} />}
); } // next-step strip that appears at the bottom of each view function DataNextSteps({ ds, onAgent, nav }) { return ( nav("train") }, { lbl: "Open in Visualize", hint: "start a new chart cell · scratch · auto-saved", run: () => nav("visualize") }, { lbl: "Ask the agent", hint: "describe what you want to know — agent will pick the chart", run: onAgent }, ]} /> ); } // ─────────────────── left rail ─────────────────── function DatasetList({ activeId, setActiveId, onImport }) { const [q, setQ] = React.useState(""); const filtered = DATASETS.filter(d => (d.name + " " + d.id + " " + d.domain).toLowerCase().includes(q.toLowerCase())); return ( ); } // ─────────────────── header band ─────────────────── function DatasetHeader({ ds, onImport, onAgent }) { return (
Dataset · {ds.domain} · manifest {ds.manifest} · sha256 {ds.sha}

{ds.name}

{ds.description}

); } // ─────────────────── sub-nav for the dataset surface ─────────────────── function SubNav({ view, setView, ds }) { const items = [ { id: "overview", label: "Overview", meta: `${ds.rows.toLocaleString()} rows` }, { id: "schema", label: "Schema", meta: `${ds.features + 2} fields` }, { id: "table", label: "Table", meta: "preview" }, { id: "explore", label: "Explore", meta: "quicklook" }, { id: "pipeline", label: "Pipeline", meta: "4 steps" }, { id: "manifest", label: "Manifest", meta: "yaml" }, { id: "share", label: "Share", meta: "public" }, ]; return ( ); } // ─────────────────── OVERVIEW ─────────────────── function DatasetOverview({ ds }) { return (
0.78 + Math.sin(i / 6) * 0.08 + (i > 50 ? -0.15 : 0))} color="#131313" fill="rgba(226,6,19,0.08)" height={110} />
0.984 rolling coverage · 12 gap-windows · longest gap 4 h on 2023-08-04 · imputed by linear
{[ { sev: "ok", text: "All required fields present and typed.", at: "08:14" }, { sev: "warn", text: "discharge: 0.012% nulls — within tolerance (≤ 0.1%).", at: "08:14" }, { sev: "warn", text: "temperature: 0.041% nulls in winter blocks.", at: "08:14" }, { sev: "ok", text: "ts monotonic; no duplicate keys across (ts, station_id).", at: "08:14" }, { sev: "info", text: "11 outlier points beyond 5σ flagged but kept (storms).", at: "08:14" }, ].map((row, i) => (
{row.sev} {row.text} {row.at}
))}
{[ { ver: "v3.2.1", sha: "b7f2a1ce", at: "2026-05-12 04:00", note: "Re-imported May BAFU snapshot. +14k rows." , author: "lj" }, { ver: "v3.2.0", sha: "a8b211ef", at: "2026-04-21 11:30", note: "Add precip from ETH IDAweb mirror.", author: "lj" }, { ver: "v3.1.0", sha: "44c0b1ab", at: "2026-03-04 09:01", note: "Switch ts unit to UTC ISO-8601.", author: "ms" }, { ver: "v3.0.0", sha: "1ff03d22", at: "2026-01-14 17:22", note: "Initial manifest v3 — added is_snowmelt flag.", author: "lj" }, ].map((v, i) => (
{v.ver}{i === 0 && HEAD} {v.note} {v.at} @{v.author}
))}
A LIULIAN dataset is a folder of time-series shards plus a YAML manifest that pins schema, topology, and an integrity hash. The manifest is the contract; the shards are interchangeable. To break the contract, bump the manifest version.
⌘K → "compare manifests"
{[ { type: "Run", name: "patchtst · seed=42", meta: "r-7c83" }, { type: "Run", name: "lstm · seed=42", meta: "r-7c89" }, { type: "Report", name: "Swiss-River · Overview", meta: "swiss-river-overview" }, { type: "Chart", name: "Q95 distribution", meta: "cell-022" }, ].map((u, i) => (
{u.type} {u.name}
))}
this dataset is internal to liulian/aare-hydro
); } function DetailRow({ k, v, mono }) { return (
{k} {v}
); } // ─────────────────── SCHEMA ─────────────────── function DatasetSchema({ ds }) { const fields = ds.fields.length ? ds.fields : [ { name: "ts", type: "timestamp", null: 0, uniq: ds.rows, ex: "1990-01-01T00:00:00Z" }, { name: "id", type: "string", null: 0, uniq: ds.stations, ex: "sensor-0" }, ]; return (
# field · type null% unique range distribution example · unit
{fields.map((f, i) => (
{(i + 1).toString().padStart(2, "0")}
{f.name}
{f.type}{f.unit ? ` · ${f.unit}` : ""}
0.03 ? "var(--bern-deep)" : "var(--ink-muted)" }}>{(f.null * 100).toFixed(3)}% {f.uniq.toLocaleString()} {f.min !== undefined ? `${f.min} – ${f.max}` : "—"} {f.type === "float64" || f.type === "float32" ? : f.type === "bool" ?
:
—
} {f.ex}{f.unit ? · {f.unit} : ""}
))}
edits land in pipeline · not on raw shards
); } // ─────────────────── TABLE ─────────────────── function DatasetTable({ ds }) { const [edit, setEdit] = React.useState(null); // {r,c} const [data, setData] = React.useState(TABLE_SAMPLE); const [sortBy, setSortBy] = React.useState(null); const [filter, setFilter] = React.useState(""); const cols = [ { k: "_i", lbl: "#", w: 48, meta: "row", align: "right", num: true }, { k: "ts", lbl: "ts", w: 160, meta: "timestamp", mono: true }, { k: "station_id", lbl: "station_id", w: 130, meta: "string" }, { k: "discharge", lbl: "discharge", w: 130, meta: "float64 · m³/s", num: true, mono: true }, { k: "temperature", lbl: "temperature", w: 130, meta: "float32 · °C", num: true, mono: true }, { k: "precip", lbl: "precip", w: 110, meta: "float32 · mm/h", num: true, mono: true }, { k: "is_snowmelt", lbl: "is_snowmelt", w: 110, meta: "bool", align: "center" }, ]; let rows = data; if (filter) { const t = filter.toLowerCase(); rows = rows.filter(r => JSON.stringify(r).toLowerCase().includes(t)); } if (sortBy) rows = [...rows].sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : -1)); function commit(rIdx, key, value) { setData(d => d.map((r, i) => i === rIdx ? { ...r, [key]: value } : r)); setEdit(null); } return (
{/* toolbar */}
setFilter(e.target.value)} placeholder="filter — try `station_id = aare-bern`" style={{ flex: "0 0 320px", border: "1px solid var(--hairline)", borderRadius: 6, padding: "6px 10px", fontSize: 12.5, fontFamily: "var(--sans)", outline: "none", background: "var(--surface)" }} /> {rows.length.toLocaleString()} of {ds.rows.toLocaleString()} · click cell to edit
{cols.map(c => ( ))} {rows.slice(0, 60).map((row, rIdx) => ( {cols.map(c => { const editing = edit && edit.r === rIdx && edit.c === c.k; const val = row[c.k]; return ( ); })} ))}
setSortBy(c.k)} style={{ textAlign: c.align || "left", padding: "10px 12px", borderBottom: "1px solid var(--hairline)", borderRight: "1px solid var(--hairline)", fontWeight: 500, minWidth: c.w, width: c.w, cursor: "pointer", fontFamily: c.mono ? "var(--mono)" : "var(--sans)", }}>
{c.lbl} {sortBy === c.k && ↑}
{c.meta}
c.k !== "_i" && setEdit({ r: rIdx, c: c.k })} style={{ textAlign: c.align || (c.num ? "right" : "left"), padding: editing ? 0 : "6px 12px", borderBottom: "1px solid var(--hairline)", borderRight: "1px solid var(--hairline)", color: c.k === "_i" ? "var(--ink-faint)" : "var(--ink-soft)", fontFamily: c.mono || c.num ? "var(--mono)" : "var(--sans)", cursor: c.k === "_i" ? "default" : "text", position: "relative", }}> {editing ? ( commit(rIdx, c.k, c.num ? +e.target.value : e.target.value)} onKeyDown={e => { if (e.key === "Enter") { commit(rIdx, c.k, c.num ? +e.target.value : e.target.value); } if (e.key === "Escape") { setEdit(null); } }} style={{ width: "100%", border: "2px solid var(--bern)", padding: "5px 10px", fontFamily: "inherit", fontSize: "inherit", textAlign: c.align || (c.num ? "right" : "left"), background: "var(--bern-tint)", outline: "none" }} /> ) : ( typeof val === "boolean" ? {val ? "true" : "false"} : typeof val === "number" ? val.toFixed(c.k === "discharge" || c.k === "temperature" ? 2 : 2) : val )}
showing {Math.min(60, rows.length)} / {ds.rows.toLocaleString()}
); } // ─────────────────── EXPLORE (quicklook gallery) ─────────────────── function DatasetExplore({ ds }) { return (
300 + Math.sin(i / 8) * 40 + Math.sin(i / 23) * 25 + (i / 4))} color="#131313" /> 412 + Math.sin(i / 6) * 30 + (i > 120 ? (i - 120) * 1.4 : 0))} color="#E20613" fill="rgba(226,6,19,0.10)" />
); } function QuickCard({ title, sub, mono, children }) { return (
{title}
{sub}
{mono}
{children}
cell-{(title.length * 31 % 999).toString().padStart(3, "0")}
); } function ScatterPlaceholder() { const r = rng(5); const pts = Array.from({ length: 60 }, () => [r() * 280 + 10, 110 - r() * 90 - 10]); return {pts.map(([x, y], i) => )}; } function RidgePlaceholder() { return {Array.from({ length: 6 }, (_, k) => { const y0 = 20 + k * 16; const r = rng(k + 21); const d = Array.from({ length: 60 }, (_, i) => { const x = i / 60; const peak = Math.exp(-Math.pow((x - 0.4 - k * 0.05) * 5, 2)); return [i * 5, y0 - peak * 14 - r() * 1.5]; }); return (i === 0 ? "M" : "L") + p[0] + "," + p[1]).join(" ") + ` L 300,${y0} L 0,${y0} Z`} fill="#FDEBEC" stroke="#E20613" strokeWidth="0.8" opacity={1 - k * 0.08} />; })}; } function HeatmapPlaceholder() { const r = rng(7); return {Array.from({ length: 24 }, (_, j) => Array.from({ length: 12 }, (_, i) => { const v = r(); return ; }))}; } // ─────────────────── PIPELINE ─────────────────── function DatasetPipeline({ ds }) { return (
{[ { idx: "01", name: "load", fn: "read_parquet(s3://liulian-warm/swiss-river-1990/v3/*.parquet)", note: "412 MB · 1.84M rows" }, { idx: "02", name: "cast", fn: "cast(ts → datetime64[ns, UTC]); cast(discharge → float64)", note: "0 errors" }, { idx: "03", name: "impute", fn: "linear_interpolate(temperature, max_gap='2h')", note: "1832 imputed" }, { idx: "04", name: "flag", fn: "is_snowmelt = (temperature > 0) & (precip == 0) & (alt > 1500)", note: "computed" }, ].map((s, i) => (
{s.idx} {s.name} {s.fn} {s.note}
))}
The pipeline is the only writer. Raw shards are immutable; every transformation is a step here. Rebuild bumps a new manifest version — old downstream runs keep pointing at the version they were trained on.
); } // ─────────────────── MANIFEST ─────────────────── function DatasetManifest({ ds }) { const yaml = `# liulian-manifest · v${ds.manifest.replace('v','')} id: ${ds.id} name: "${ds.name}" domain: ${ds.domain} license: ${ds.license} source: ${ds.source} range: start: 1990-01-01T00:00:00Z end: 2024-12-31T23:00:00Z cadence: 1h shape: rows: ${ds.rows} entities: ${ds.stations} features: ${ds.features} schema: ts: { type: timestamp, tz: UTC, required: true } station_id: { type: string, fk: stations.id } discharge: { type: float64, unit: "m³/s", min: 0, max: 4000 } temperature: { type: float32, unit: "°C", min: -20, max: 40 } precip: { type: float32, unit: "mm/h", min: 0, max: 200 } is_snowmelt: { type: bool } topology: graph: swiss-river-network/v2.0 primary_key: [ts, station_id] ordering: ts ascending quality: null_tolerance: 0.001 monotonic_ts: strict duplicate_keys: forbid outlier_policy: keep+flag (z>5) storage: format: parquet compression: zstd shard_bytes: 128 MB uri: s3://liulian-warm/${ds.id}/v3/ integrity: sha256: ${ds.sha}... signed_by: @lj on ${ds.updated} `; return (
manifest.yaml · {ds.manifest} 
{yaml}
The manifest is editable but versioned. Edits do not retroactively rewrite the shards — they create a candidate next version. Promotion to HEAD happens only after the integrity check passes.
); } // ─────────────────── SHARE ─────────────────── function DatasetShare({ ds }) { return (

Public datasets can be read by anyone with the URL. Writes always require an editor role.

https://liulian.app/d/{ds.id} 
{`from liulian import Dataset
ds = Dataset.load("${ds.id}", version="${ds.manifest}")
df = ds.read(stations=["aare-bern"], range="last:7d")
df.head()`}
{[ ["parquet · zstd", "412 MB · native"], ["csv · gzip", "188 MB · 1.84M rows"], ["jsonl · gzip", "240 MB · streamable"], ["arrow · ipc", "402 MB · zero-copy"], ["webdataset · tar","ML-ready · sharded"], ].map(([k, v], i) => (
{k} {v}
))}
Sharing a dataset shares the contract, not the bytes. Downstream consumers receive a verifiable manifest; the shards are streamed on demand from the warm tier.
); } // ─────────────────── IMPORT DIALOG ─────────────────── function ImportDialog({ onClose }) { const [step, setStep] = React.useState("source"); // source · preview · finalize const [mode, setMode] = React.useState("file"); const [drag, setDrag] = React.useState(false); return (
e.stopPropagation()} style={{ width: step === "preview" ? 980 : 760, maxWidth: "94vw", maxHeight: "88vh", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 14, overflow: "hidden", boxShadow: "0 28px 60px rgba(19,19,19,0.18)", display: "flex", flexDirection: "column" }}>
Workspace · Data · The Annotated Drop

Import a dataset

step {step === "source" ? "1" : step === "preview" ? "2" : "3"} of 3 · {step === "source" ? "source" : step === "preview" ? "preview" : "finalize"}
{step === "source" && setStep("preview")} onClose={onClose} />} {step === "preview" && setStep("source")} onCommit={() => setStep("finalize")} />} {step === "finalize" && }
); } function SourceStep({ mode, setMode, drag, setDrag, onPreview, onClose }) { return (
{mode === "file" && (
{ e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={e => { e.preventDefault(); setDrag(false); }} style={{ height: 220, border: "1px dashed " + (drag ? "var(--bern)" : "var(--hairline-strong)"), borderRadius: 10, background: drag ? "var(--bern-tint)" : "var(--canvas-warm)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8 }}> Drop a CSV, Parquet, or JSONL file here or up to 5 GB · sharded automatically
)} {mode === "url" && (
LIULIAN will fetch the URL server-side, infer the schema, and present an annotated preview.
)} {mode === "sql" && (
query