import { useMemo, useRef, useState } from "react"; import { useDiveState, useSQLQuery } from "@motherduck/react-sql-query"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/tahoe_100m/a365b1f0-2d77-463d-940d-d705135b9027', alias: 'tahoe_100m' } ]; // ------------------------------------------------------------------ theme const N = (v: unknown): number => (v == null ? 0 : Number(v)); const TEXT = "#231f20"; const MUTED = "#6a6a6a"; const PRIMARY = "#0777b3"; const PAGE = "#f8f8f8"; const EMPTY = "#e4e4e4"; const RULE = "#d9d9d9"; const TYPE_PRIORITY = ["Deletion", "Gain", "Stopgain", "Frameshift", "Splice_site", "Missense", "Promoter", "Other"]; const TYPE_COLOR: Record = { Missense: PRIMARY, Frameshift: "#e18727", Stopgain: "#bd4e35", Deletion: "#1f3b5b", Gain: "#2d7a00", Splice_site: "#8e6bbf", Promoter: "#638cad", Other: "#adadad", }; const TYPE_LABEL: Record = { Missense: "Missense", Frameshift: "Frameshift", Stopgain: "Stopgain", Deletion: "Deletion", Gain: "Copy gain", Splice_site: "Splice site", Promoter: "Promoter", Other: "Other", }; const normType = (t: unknown): string => { const s = t == null ? "" : String(t); return TYPE_COLOR[s] ? s : "Other"; }; const ORGAN_COLOR: Record = { Lung: "#4e79a7", Bowel: "#59a14f", Pancreas: "#f28e2b", Skin: "#e15759", Kidney: "#76b7b2", Uterus: "#b07aa1", "Bladder/Urinary Tract": "#edc948", "CNS/Brain": "#9c755f", "Esophagus/Stomach": "#ff9da7", Breast: "#bab0ac", Liver: "#86bcb6", Cervix: "#d37295", "Peripheral Nervous System": "#499894", }; const organColor = (o: string) => ORGAN_COLOR[o] ?? "#cccccc"; const fmtCells = (n: number) => (n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : `${Math.round(n / 1e3)}K`); type Mut = { line: string; gene: string; type: string; rawType: string; zyg: string; effect: string; mech: string; geneType: string; }; type Line = { name: string; organ: string; cells: number }; // ------------------------------------------------------------------ component export default function TahoeOncoplot() { const [topGenes, setTopGenes] = useDiveState("topGenes", 30); const [sortBy, setSortBy] = useDiveState<"cells" | "waterfall" | "organ">("sortBy", "cells"); const [includeLow, setIncludeLow] = useDiveState("includeLow", false); const [selectedLine, setSelectedLine] = useDiveState("line", ""); const [hover, setHover] = useState<{ x: number; y: number; rows: string[] } | null>(null); const wrapRef = useRef(null); const linesQ = useSQLQuery(` SELECT o.cell_name, count(*) AS n_cells, any_value(m.organ) AS organ FROM "tahoe_100m"."main"."obs_metadata" AS o LEFT JOIN ( SELECT cell_name, any_value("Organ") AS organ FROM "tahoe_100m"."main"."cell_line_metadata" GROUP BY 1 ) AS m USING (cell_name) GROUP BY 1 ORDER BY n_cells DESC `); const mutQ = useSQLQuery(` SELECT cell_name, "Driver_Gene_Symbol" AS gene, "Driver_VarType" AS var_type, "Driver_VarZyg" AS zyg, "Driver_ProtEffect_or_CdnaEffect" AS effect, "Driver_Mech_InferDM" AS mech, "Driver_GeneType_DM" AS gene_type FROM "tahoe_100m"."main"."cell_line_metadata" ORDER BY cell_name, gene `); const model = useMemo(() => { const lineRows = Array.isArray(linesQ.data) ? linesQ.data : []; const mutRows = Array.isArray(mutQ.data) ? mutQ.data : []; if (!lineRows.length || !mutRows.length) return null; let lines: Line[] = lineRows .map((r: any) => ({ name: String(r.cell_name), organ: String(r.organ ?? "Unknown"), cells: N(r.n_cells) })) .sort((a, b) => b.cells - a.cells); const lowAbundance = lines.slice(47).map((l) => l.name); if (!includeLow) lines = lines.slice(0, 47); const lineSet = new Set(lines.map((l) => l.name)); const totalCells = lines.reduce((a, l) => a + l.cells, 0); const allMuts: Mut[] = mutRows .filter((r: any) => lineSet.has(String(r.cell_name))) .map((r: any) => ({ line: String(r.cell_name), gene: String(r.gene), type: normType(r.var_type), rawType: String(r.var_type ?? "—"), zyg: String(r.zyg ?? ""), effect: String(r.effect ?? ""), mech: String(r.mech ?? ""), geneType: String(r.gene_type ?? ""), })); const geneLines = new Map>(); for (const m of allMuts) { if (!geneLines.has(m.gene)) geneLines.set(m.gene, new Set()); geneLines.get(m.gene)!.add(m.line); } const totalGenes = geneLines.size; const genes = [...geneLines.entries()] .map(([gene, s]) => ({ gene, n: s.size })) .sort((a, b) => b.n - a.n || a.gene.localeCompare(b.gene)) .slice(0, Math.max(5, Math.min(topGenes, totalGenes))); const geneIdx = new Map(genes.map((g, i) => [g.gene, i])); const cell = new Map(); for (const m of allMuts) { if (!geneIdx.has(m.gene)) continue; const k = `${m.line}|${m.gene}`; if (!cell.has(k)) cell.set(k, []); cell.get(k)!.push(m); } const dominant = (ms: Mut[]) => [...ms].sort((a, b) => TYPE_PRIORITY.indexOf(a.type) - TYPE_PRIORITY.indexOf(b.type))[0].type; if (sortBy === "waterfall") { const key = (l: Line) => genes.map((g) => (cell.has(`${l.name}|${g.gene}`) ? "1" : "0")).join(""); lines = [...lines].sort((a, b) => (key(a) > key(b) ? -1 : key(a) < key(b) ? 1 : b.cells - a.cells)); } else if (sortBy === "organ") { const organN = new Map(); for (const l of lines) organN.set(l.organ, (organN.get(l.organ) ?? 0) + 1); lines = [...lines].sort( (a, b) => (organN.get(b.organ) ?? 0) - (organN.get(a.organ) ?? 0) || a.organ.localeCompare(b.organ) || b.cells - a.cells, ); } const stacks = lines.map((l) => { const counts: Record = {}; for (const g of genes) { const ms = cell.get(`${l.name}|${g.gene}`); if (ms) { const t = dominant(ms); counts[t] = (counts[t] ?? 0) + 1; } } return counts; }); const maxStack = Math.max(1, ...stacks.map((s) => Object.values(s).reduce((a, b) => a + b, 0))); const perLineAll = new Map(); for (const m of allMuts) perLineAll.set(m.line, (perLineAll.get(m.line) ?? 0) + 1); const highest = [...perLineAll.entries()].sort((a, b) => b[1] - a[1])[0]; const typesPresent = TYPE_PRIORITY.filter((t) => allMuts.some((m) => geneIdx.has(m.gene) && m.type === t)); const organsPresent = [...new Set(lines.map((l) => l.organ))].sort(); return { lines, genes, cell, dominant, stacks, maxStack, allMuts, totalGenes, highest, typesPresent, organsPresent, lowAbundance, totalCells }; }, [linesQ.data, mutQ.data, topGenes, sortBy, includeLow]); // ---------------------------------------------------------------- geometry const W = 800; const ML = 78; const MR = 62; const TOPBAR = 54; const GAP = 10; const TILE_H = 13; const ORGAN_H = 10; const LABEL_H = 76; const nLines = model?.lines.length ?? 47; const nGenes = model?.genes.length ?? topGenes; const tileW = (W - ML - MR) / nLines; const gridTop = TOPBAR + GAP; const gridH = nGenes * TILE_H; const organY = gridTop + gridH + 6; const H = organY + ORGAN_H + LABEL_H; const showTip = (e: any, rows: string[]) => { const rect = wrapRef.current?.getBoundingClientRect(); setHover({ x: e.clientX - (rect?.left ?? 0) + 12, y: e.clientY - (rect?.top ?? 0) + 12, rows }); }; const loading = linesQ.isLoading || mutQ.isLoading; const error = linesQ.isError ? String(linesQ.error) : mutQ.isError ? String(mutQ.error) : null; const topGene = model?.genes[0]; const topPct = model && topGene ? Math.round((100 * topGene.n) / model.lines.length) : 0; const selected = model?.lines.find((l) => l.name === selectedLine) ?? null; const selectedMuts = model && selected ? model.allMuts.filter((m) => m.line === selected.name).sort((a, b) => a.gene.localeCompare(b.gene)) : []; const segBtn = (active: boolean) => ({ background: active ? TEXT : "transparent", color: active ? "#fff" : TEXT, border: `1px solid ${active ? TEXT : RULE}`, cursor: "pointer", }); // ---------------------------------------------------------------- render return (

Driver mutation landscape of Tahoe-100M cell lines

Oncoplot of the {model?.lines.length ?? 47} most abundant cell lines, after Fig. 2A of Zhang et al. (2025). Genes are ranked by the number of lines carrying a driver alteration.

{/* KPIs */}

{/* Controls */}

Genes shown setTopGenes(Number(e.target.value))} style={{ accentColor: PRIMARY, width: 140 }} /> {nGenes}

Order cell lines by

{( [ ["cells", "Cell count"], ["waterfall", "Mutation pattern"], ["organ", "Organ"], ] as const ).map(([k, lbl], i) => ( ))}

setIncludeLow(e.target.checked)} style={{ accentColor: PRIMARY }} /> Include 3 low-abundance lines

{/* Oncoplot */}

setHover(null)}> {error ? (

{error}

) : loading || !model ? (

) : ( )} {hover && (

{hover.rows.map((r, i) => (

{r}

))}

)}

{/* Legend */} {model && (

Variant type {model.typesPresent.map((t) => ( {TYPE_LABEL[t]} ))} Multiple variants

)} {model && (

Organ {model.organsPresent.map((o) => ( {o} ))}

)} {/* Selected cell line detail */} {selected && model && (

{selected.name}

{selected.organ} · {fmtCells(selected.cells)} cells · {selectedMuts.length} driver alteration{selectedMuts.length === 1 ? "" : "s"}

{["Gene", "Variant type", "Effect", "Zygosity", "Mechanism", "Gene class"].map((h) => ( ))} {selectedMuts.map((m, i) => ( ))}

{h}
{m.gene}	{m.rawType}	{m.effect \|\| "—"}	{m.zyg \|\| "—"}	{m.mech \|\| "—"}	{m.geneType \|\| "—"}

)}

Sources: tahoe_100m.main.cell_line_metadata (driver annotations) and obs_metadata (cell counts). When a gene carries several variants in one line, the tile shows the highest-priority type and a dot marks the multiplicity. Click a tile or label to see a line's full driver list.

); } // ------------------------------------------------------------------ KPI function Kpi({ loading, value, label, sub }: { loading: boolean; value: string; label: string; sub: string }) { return (

{loading ? (

) : (

{value}

)}

{label} {sub ? · {sub} : null}

); }

Tahoe-100M Driver Mutation Oncoplot

Comments