Nineteen literature-derived analysis views (preview), one commit each

CLAUDE.md

@@ -47,7 +47,7 @@ ClickHouse SQL; clients never send SQL. Live at https://cbiolab.vercel.app (UI a
   error for a kind known only at run time is `plainResult(kind, {…})`. **Kinds never import each other:** a
   kind's runner, figure and `<kind>-<part>.ts` modules import only one another and the shared
   modules (`lib/views/`: run, shared, rows, covariates; `lib/figures/`: common, volcano, bars,
-  forest) — `local/kind-boundary` in `eslint.config.mjs` enforces it; what two kinds need moves
+  forest, km) — `local/kind-boundary` in `eslint.config.mjs` enforces it; what two kinds need moves
   into a shared module, listed there. Kinds registered through `drawn()`
   have their figure drawn from the result and a throw reported as the view's error.
 - **`lib/oncoprint.ts`** — spec → rows (ClickHouse fetch); **`lib/oncoprint-assemble.ts`** — rows →

app/globals.css

@@ -31,6 +31,7 @@
   --color-border: var(--line); --color-input: var(--line); --color-ring: var(--accent);
   --color-paper: var(--paper); --color-link: var(--accent-ink);
   --color-ok: var(--ok); --color-ok-soft: var(--ok-soft);
+  --color-new: var(--new);
   --color-mark: var(--mark); --color-mark-soft: var(--mark-soft);
   --color-amp: var(--amp); --color-del: var(--del);
   --color-white: #fff; --color-black: #000; --color-transparent: transparent; --color-current: currentColor;
@@ -89,6 +90,8 @@
   --accent: #0f86a1; --accent-ink: #0b6478; --accent-soft: #e3f0f3;
   --line: #dde4e8; --code-bg: #f1f5f7; --mark: #b25e09; --mark-soft: #fbf0e2;
   --ok: #2e7d32; --ok-soft: #e6f2e6; --err: #b3261e; --err-soft: #fbeae9;
+  /* the NEW mark's text (app/lab/new-mark.tsx) */
+  --new: #ea580c;
   /* copy-number calls as text: amplification red, deep deletion blue */
   --amp: #c62828; --del: #1f5fbf;
 
@@ -114,6 +117,7 @@
     --accent: #45b8c2; --accent-ink: #7fd3da; --accent-soft: #16333a;
     --line: #2a353c; --code-bg: #1a242a; --mark: #e0a35c; --mark-soft: #35270f;
     --ok: #7bc47f; --ok-soft: #17301a; --err: #f2b8b5; --err-soft: #3a2323;
+    --new: #fb923c;
     --amp: #ff8a80; --del: #82b1ff;
     --on-accent: #0d1417;
   }
@@ -669,8 +673,8 @@ main.analysis-main { max-width: min(132rem, 100%); }
 .extag.on { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--bg); }
 .extag.on .meta { color: var(--bg); opacity: 0.8; }
 .extag.is-static { cursor: default; }
-.exfacet { align-items: baseline; }
-.exfacet-l { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 3.6rem; }
+.exfacet { margin-top: var(--s4); }
+.exfacet-l { font-size: var(--t-sm); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: var(--s1); border-bottom: 1px solid var(--line); }
 .exempty { color: var(--muted); }
 .vkind {
   font-size: var(--t-xs); padding: 0.1rem 0.45rem; border-radius: var(--r-pill); white-space: nowrap;

app/lab/analysis-sections.tsx

@@ -34,12 +34,17 @@ import type { DocStore } from "./doc-store.ts";
 import type { SavedCohort, SavedWorkspace } from "./use-saved.ts";
 import type { ExploreResult } from "../../lib/types.ts";
 import type { ViewCtx } from "./view-cards.tsx";
+import { isNewKind } from "../../lib/new-in-lab.ts";
+import { NewMark } from "./new-mark.tsx";
 
 /** A view kind already in the document: filled with the accent colour, so "on" cannot be mistaken
  *  for a chip still loading (a pale pulsing fill). */
 const VIEW_ON = "aria-pressed:bg-primary aria-pressed:text-primary-foreground hover:aria-pressed:bg-primary/90 " +
   "hover:aria-pressed:text-primary-foreground dark:aria-pressed:bg-primary dark:hover:aria-pressed:bg-primary/90";
 
+/** A kind not yet in the document: a grey fill, so each pill reads apart from its neighbours on the white card. */
+const ADD_PILL = "border-transparent bg-border text-foreground hover:bg-border/70";
+
 /** What the Analysis tab's sections read from the page and the actions they can take; the page builds one per render. */
 export interface AnalysisCtx {
   VIEW_KINDS: { kind: string; label: string; why?: () => string | null; loading?: () => boolean; }[];
@@ -448,7 +453,7 @@ export function ViewColumn({ ctx }: { ctx: AnalysisCtx }) {
               if (present) return (
                 <Button key={kind} variant="outline" size="xs" className={cn(CHIP, VIEW_ON)} aria-pressed disabled={busy}
                   title={"remove the " + label.toLowerCase() + " view" + (present > 1 ? "s (" + present + ")" : "")}
-                  onClick={() => removeViews((v) => v.kind === kind)}>{label}{present > 1 && " ×" + present}<X /></Button>
+                  onClick={() => removeViews((v) => v.kind === kind)}>{label}{isNewKind(kind) && <NewMark />}{present > 1 && " ×" + present}<X /></Button>
               );
               const full = (doc.views || []).length >= 6;
               // with no cohorts yet there is no study to ask about: the view's cohorts decide later
@@ -458,10 +463,10 @@ export function ViewColumn({ ctx }: { ctx: AnalysisCtx }) {
                 : waiting ? "loading this study's catalog — a moment"
                 : (known && why ? why() : null);
               return (
-                <Button key={kind} variant="outline" size="xs" className={cn(CHIP, waiting && "chip-wave disabled:opacity-100")} aria-pressed={false}
+                <Button key={kind} variant="outline" size="xs" className={cn(CHIP, ADD_PILL, waiting && "chip-wave disabled:opacity-100")} aria-pressed={false}
                   aria-busy={waiting || undefined} disabled={!!blocked}
                   title={blocked || ("add a " + label.toLowerCase() + " view, then choose its cohorts")}
-                  onClick={() => addView(kind)}><Plus />{label}</Button>
+                  onClick={() => addView(kind)}><Plus />{label}{isNewKind(kind) && <NewMark />}</Button>
               );
             })}
           </div>

app/lab/examples-tab.tsx

@@ -18,14 +18,21 @@ import { parseExamplesUrl } from "../../lib/site.ts";
 import type { CohortDef } from "../../lib/types.ts";
 import { Tabs, TabsList, TabsTrigger } from "../_ui/tabs";
 import CohortPills from "./pills";
+import { isNewKind } from "../../lib/new-in-lab.ts";
+import { NewMark } from "./new-mark.tsx";
 
 /** a tag filter: an outline chip, filled while it is the one shown */
 const TAG = "group rounded-pill px-2.5 text-sm font-normal aria-pressed:border-link aria-pressed:bg-link aria-pressed:text-card aria-pressed:hover:bg-link/90 aria-pressed:hover:text-card";
+/** the views and topics lists: links flowing down columns, the chosen one in bold */
+const FACET_COLS = "mt-1 columns-[11rem] gap-x-6";
+const FACET_ITEM = "items-baseline text-sm font-normal aria-pressed:font-semibold aria-pressed:text-foreground aria-pressed:underline";
 const TAG_N = "text-muted-foreground group-aria-pressed:text-card/80";
 const FEATURES = new Map(EXAMPLES.map(e => [e, exampleFeatures(e)]));
 const byName = (a: string, b: string) => a.localeCompare(b, undefined, { sensitivity: "base" });
 const VIEWS = [...new Set([...FEATURES.values()].flatMap(f => f.views))].sort(byName);
 const TOPICS = [...new Set([...FEATURES.values()].flatMap(f => f.topics))].sort(byName);
+/** chips (a view kind, or a topic) under which at least one example draws a NEW view */
+const HAS_NEW = new Set([...FEATURES.values()].filter(f => f.views.some(isNewKind)).flatMap(f => [...f.views.filter(isNewKind), ...f.topics]));
 const has = (ex: DslExample, t: string) => { const f = FEATURES.get(ex)!; return f.views.includes(t) || f.topics.includes(t); };
 
 const hostOf = (url: string) => { try { return new URL(url).host; } catch { return url; } };
@@ -85,12 +92,14 @@ export function ExamplesTab({ tag, onTag, query, onQuery, busy, onRun, link, els
   useEffect(() => () => onQuery(latest.current), [onQuery]);
   const searched = EXAMPLES.filter(e => matchesSearch(e, draft));
   const shown = tag === "all" ? searched : searched.filter(e => has(e, tag));
-  const chip = (t: string) => {
+  const item = (t: string) => {
     const n = searched.filter(e => has(e, t)).length;
     return (
-      <Button key={t} variant="outline" size="xs" className={cn(TAG, n === 0 && "opacity-50")} aria-pressed={tag === t} onClick={() => onTag(tag === t ? "all" : t)}>
-        {t} <span className={TAG_N}>{n}</span>
-      </Button>
+      <div key={t} className="break-inside-avoid py-0.5">
+        <Button variant="link" size="inline" className={cn(FACET_ITEM, n === 0 && "opacity-50")} aria-pressed={tag === t} onClick={() => onTag(tag === t ? "all" : t)}>
+          <span className="inline-block first-letter:uppercase">{t}</span> <span className="text-muted-foreground">{n}</span>{HAS_NEW.has(t) && <NewMark />}
+        </Button>
+      </div>
     );
   };
 
@@ -132,8 +141,8 @@ export function ExamplesTab({ tag, onTag, query, onQuery, busy, onRun, link, els
             all <span className={TAG_N}>{searched.length}</span>
           </Button>
         </div>
-        <div className="extags exfacet"><span className="exfacet-l">views</span>{VIEWS.map(chip)}</div>
-        <div className="extags exfacet"><span className="exfacet-l">topics</span>{TOPICS.map(chip)}</div>
+        <div className="exfacet"><div className="exfacet-l">views</div><div className={FACET_COLS}>{VIEWS.map(item)}</div></div>
+        <div className="exfacet"><div className="exfacet-l">topics</div><div className={FACET_COLS}>{TOPICS.map(item)}</div></div>
       </div>
 
       {shown.length === 0 && (
@@ -152,7 +161,7 @@ export function ExamplesTab({ tag, onTag, query, onQuery, busy, onRun, link, els
           const { views, topics } = FEATURES.get(ex)!;
           return (
             <div className="card excard" key={ex.title}>
-              <h3>{ex.title}</h3>
+              <h3>{ex.title}{views.some(isNewKind) && <NewMark />}</h3>
               <div className="extags small">
                 {views.map(k => <span key={k} className="vkind" title="a view this example draws">{k}</span>)}
                 {topics.map(t => <span key={t} className="extag is-static">{t}</span>)}