Redesign Space UI: hero, modality strip, HTML detail cards, Okabe-Ito palette

app.py

@@ -1,15 +1,24 @@
 """EEGDash Dataset Catalog — Hugging Face Space.
 
-Mirrors the searchable table from https://eegdash.org and generates one-liner
-load snippets for EEGDash and braindecode. Rows whose slug matches an existing
-repo under the ``EEGDash`` org on the Hub are flagged as ``on 🤗`` and can be
-loaded via ``BaseConcatDataset.pull_from_hub``.
+Design system (kept in sync with ``style.css``):
+
+* Typography: Inter for UI (14px base, 600 for headings), JetBrains Mono for
+  code snippets. Hierarchy: hero title > section titles > labels > meta.
+* Palette: Okabe-Ito (colorblind-safe). Brand is #0072B2 (EEG-blue). One warm
+  accent #E69F00 reserved for the ``on 🤗`` flag — never decorative. Neutral
+  ramp is slate (#f8fafc → #0f172a).
+* Encoding: categorical modality gets one Okabe-Ito hue per value. Continuous
+  (dataset size) is never encoded by color.
+* Annotation: the hero, modality strip and detail panel each carry one
+  sentence of prose so the page reads as an argument, not a data dump.
 """
 
 from __future__ import annotations
 
 import ast
+import html as _html
 import json
+import logging
 import os
 from functools import lru_cache
 from pathlib import Path
@@ -21,9 +30,27 @@ from huggingface_hub.utils import HfHubHTTPError
 
 HF_ORG = "EEGDash"
 CSV_PATH = Path(__file__).parent / "dataset_summary.csv"
+CSS_PATH = Path(__file__).parent / "style.css"
 EEGDASH_URL = "https://eegdash.org"
 GITHUB_URL = "https://github.com/eegdash/EEGDash"
 
+# Okabe-Ito categorical palette — one hue per modality, reused consistently
+# across the modality strip and filter chips so the reader learns the mapping
+# once.
+MODALITY_HUES: dict[str, str] = {
+    "Visual": "#0072B2",
+    "Auditory": "#009E73",
+    "Motor": "#D55E00",
+    "Tactile": "#CC79A7",
+    "Multisensory": "#E69F00",
+    "Resting State": "#56B4E9",
+    "Sleep": "#F0E442",
+    "Anesthesia": "#999999",
+    "Other": "#555555",
+    "Unknown": "#cbd5e1",
+}
+DEFAULT_HUE = "#64748b"
+
 TABLE_COLUMNS = [
     "dataset",
     "author_year",
@@ -54,20 +81,19 @@ DISPLAY_HEADERS = {
     "n_records": "Records",
     "n_tasks": "Tasks",
     "nchans": "Channels",
-    "sfreq": "Sampling rate (Hz)",
+    "sfreq": "Hz",
     "size": "Size",
     "license": "License",
-    "on_hf": "on 🤗",
+    "on_hf": "🤗",
 }
 
+log = logging.getLogger(__name__)
 
-def _parse_mode_from_json_col(cell: object) -> str:
-    """Return the most common value from a ``[{val, count}, ...]`` JSON cell.
 
-    The summary CSV stores per-recording distributions of channel counts and
-    sampling rates as a JSON list. The catalog UI wants a single
-    representative value: the one with the highest ``count``.
-    """
+# -------------------- Data loading --------------------
+
+
+def _parse_mode_from_json_col(cell: object) -> str:
     if not isinstance(cell, str) or not cell.strip():
         return ""
     try:
@@ -88,11 +114,6 @@ def _parse_mode_from_json_col(cell: object) -> str:
 
 @lru_cache(maxsize=1)
 def _hf_repos() -> set[str]:
-    """Slugs that exist as dataset repos under the EEGDash org.
-
-    Cached for the lifetime of the process. Failures (no network, rate limit)
-    degrade to an empty set rather than breaking the page load.
-    """
     try:
         api = HfApi()
         repos = api.list_datasets(author=HF_ORG, limit=500)
@@ -109,7 +130,7 @@ def _load_catalog() -> pd.DataFrame:
     df["on_hf"] = df["dataset"].apply(lambda s: "✓" if s in on_hub else "")
     for col in ("n_subjects", "n_records", "n_tasks"):
         df[col] = pd.to_numeric(df[col], errors="coerce").fillna(0).astype(int)
-    extra = ["dataset_title", "doi"]
+    extra = ["dataset_title", "doi", "duration_hours_total"]
     for col in TABLE_COLUMNS + extra:
         if col not in df.columns:
             df[col] = ""
@@ -117,6 +138,9 @@ def _load_catalog() -> pd.DataFrame:
     return df
 
 
+# -------------------- Filtering --------------------
+
+
 def _unique_sorted(series: pd.Series) -> list[str]:
     return sorted({str(v).strip() for v in series if str(v).strip()})
 
@@ -138,6 +162,8 @@ def _filter(
             out["dataset"].str.lower()
             + " "
             + out["author_year"].str.lower()
+            + " "
+            + out["dataset_title"].astype(str).str.lower()
         )
         out = out[hay.str.contains(q, regex=False, na=False)]
     if modalities:
@@ -159,163 +185,341 @@ def _render_table(df: pd.DataFrame) -> pd.DataFrame:
     return df[TABLE_COLUMNS].rename(columns=DISPLAY_HEADERS)
 
 
-def _snippets(slug: str, on_hf: bool) -> str:
-    native = f"""```python
-# EEGDash (streams from S3 / NEMAR, preserves BIDS)
-from eegdash import EEGDashDataset
-
-ds = EEGDashDataset(dataset="{slug}", cache_dir="./cache")
-print(len(ds), "recordings")
-```"""
-    hf_block = f"""```python
-# From Hugging Face (braindecode Zarr format, pre-windowed)
-from braindecode.datasets import BaseConcatDataset
-
-ds = BaseConcatDataset.pull_from_hub("{HF_ORG}/{slug}")
-```"""
-    if not on_hf:
-        hf_block = (
-            "> ℹ️ Not mirrored on Hugging Face yet. "
-            "Open an issue on "
-            f"[github.com/eegdash/EEGDash]({GITHUB_URL}/issues) to request it, "
-            "or push it yourself:\n\n"
-            "```python\n"
-            "from eegdash import EEGDashDataset\n"
-            f'ds = EEGDashDataset(dataset="{slug}", cache_dir="./cache")\n'
-            f'ds.push_to_hub("{HF_ORG}/{slug}")\n'
-            "```"
+# -------------------- Hero (stats + modality strip) --------------------
+
+
+def _fmt_num(n: float) -> str:
+    if n >= 1_000_000:
+        return f"{n / 1_000_000:.1f}M"
+    if n >= 1_000:
+        return f"{n / 1_000:.1f}k"
+    return f"{int(n):,}"
+
+
+def _hero_html(df: pd.DataFrame, total_all: int) -> str:
+    """Hero banner — the one thing a first-time visitor reads.
+
+    Four stat cards answer: "how big is this catalog?" at a glance. The
+    count is filter-aware so the banner tracks what's currently visible.
+    """
+    subjects = int(df["n_subjects"].sum())
+    records = int(df["n_records"].sum())
+    hours_series = pd.to_numeric(df["duration_hours_total"], errors="coerce").fillna(0)
+    hours = float(hours_series.sum())
+    on_hf = int((df["on_hf"] == "✓").sum())
+    viewing = len(df)
+
+    return f"""
+<section class="eeg-hero">
+  <div class="eeg-hero__left">
+    <div class="eeg-hero__kicker">Open catalog</div>
+    <h1 class="eeg-hero__title">EEG / MEG datasets,<br/>one import away.</h1>
+    <p class="eeg-hero__lede">
+      Search {total_all} publicly shared recordings and load any of them with
+      a single line of Python — streamed from NEMAR or mirrored to
+      <a href="https://huggingface.co/{HF_ORG}">🤗 {HF_ORG}</a>.
+    </p>
+    <div class="eeg-hero__cta">
+      <a class="eeg-btn eeg-btn--primary" href="{EEGDASH_URL}">eegdash.org →</a>
+      <a class="eeg-btn" href="{GITHUB_URL}">GitHub</a>
+      <a class="eeg-btn" href="https://pypi.org/project/eegdash/">PyPI</a>
+    </div>
+  </div>
+  <div class="eeg-hero__stats" role="group" aria-label="Catalog totals">
+    <div class="eeg-stat"><div class="eeg-stat__n">{_fmt_num(viewing)}</div><div class="eeg-stat__l">datasets <span class="eeg-stat__meta">of {total_all}</span></div></div>
+    <div class="eeg-stat"><div class="eeg-stat__n">{_fmt_num(subjects)}</div><div class="eeg-stat__l">subjects</div></div>
+    <div class="eeg-stat"><div class="eeg-stat__n">{_fmt_num(records)}</div><div class="eeg-stat__l">recordings</div></div>
+    <div class="eeg-stat eeg-stat--accent"><div class="eeg-stat__n">{on_hf}</div><div class="eeg-stat__l">on <span aria-label="Hugging Face">🤗</span></div></div>
+  </div>
+</section>
+"""
+
+
+def _modality_strip_html(df: pd.DataFrame) -> str:
+    """Horizontal bar of dataset counts by modality — quick shape check.
+
+    Effectiveness via length (bars), expressiveness via categorical hue.
+    One stacked row is enough because we're answering a single question:
+    which experimental paradigms dominate the catalog?
+    """
+    counts = (
+        df["modality of exp"]
+        .replace("", "Unknown")
+        .value_counts()
+        .sort_values(ascending=False)
+    )
+    if counts.empty:
+        return ""
+    total = int(counts.sum())
+    segments = []
+    legend = []
+    for name, n in counts.items():
+        hue = MODALITY_HUES.get(str(name), DEFAULT_HUE)
+        pct = (n / total) * 100
+        if pct < 0.8:
+            continue
+        segments.append(
+            f'<span class="eeg-bar__seg" style="width:{pct:.2f}%;background:{hue}" '
+            f'title="{_html.escape(str(name))}: {n}"></span>'
+        )
+        legend.append(
+            f'<span class="eeg-legend__item">'
+            f'<span class="eeg-legend__swatch" style="background:{hue}"></span>'
+            f"{_html.escape(str(name))} <span class='eeg-legend__n'>{n}</span>"
+            f"</span>"
         )
-    return native + "\n\n" + hf_block
+    return f"""
+<section class="eeg-modality" aria-label="Datasets by experimental modality">
+  <div class="eeg-modality__head">
+    <span class="eeg-modality__title">By modality</span>
+    <span class="eeg-modality__meta">{total} datasets · {len(counts)} modalities</span>
+  </div>
+  <div class="eeg-bar" role="img" aria-label="Stacked breakdown of datasets by modality">{''.join(segments)}</div>
+  <div class="eeg-legend">{''.join(legend)}</div>
+</section>
+"""
+
+
+# -------------------- Detail card (HTML) --------------------
+
+
+def _e(v: object) -> str:
+    return _html.escape(str(v)) if v is not None else ""
 
 
-def _detail(df: pd.DataFrame, slug: str) -> str:
+def _snippet_block(label: str, code: str) -> str:
+    return (
+        f'<div class="eeg-snippet"><div class="eeg-snippet__hd">{_e(label)}</div>'
+        f'<pre class="eeg-snippet__code">{_e(code)}</pre></div>'
+    )
+
+
+def _detail_html(df: pd.DataFrame, slug: str) -> str:
     if not slug:
-        return "Pick a dataset row above to see details and load snippets."
+        return _empty_detail()
     match = df[df["dataset"] == slug]
     if match.empty:
-        return f"Dataset `{slug}` not found in the catalog."
+        return _empty_detail()
     row = match.iloc[0]
     on_hf = row["on_hf"] == "✓"
-    doi = row.get("doi", "")
-    title = row.get("dataset_title", "") or slug
-    lines = [f"## `{slug}` — {title}"]
+    title = str(row.get("dataset_title", "") or slug)
+    doi = str(row.get("doi", "") or "").strip()
+    author = str(row.get("author_year", "") or "").strip()
+    license_ = str(row.get("license", "") or "—").strip() or "—"
+    modality = str(row.get("modality of exp", "") or "").strip() or "—"
+    pathology = str(row.get("Type Subject", "") or "").strip() or "—"
+    modality_hue = MODALITY_HUES.get(modality, DEFAULT_HUE)
+
+    doi_link = (
+        f'<a class="eeg-tag" href="https://doi.org/{_e(doi)}" target="_blank" rel="noopener">doi:{_e(doi)}</a>'
+        if doi
+        else ""
+    )
+    hf_link = (
+        f'<a class="eeg-tag eeg-tag--accent" href="https://huggingface.co/datasets/{HF_ORG}/{_e(slug)}" target="_blank" rel="noopener">🤗 on Hub</a>'
+        if on_hf
+        else '<span class="eeg-tag eeg-tag--muted">not mirrored yet</span>'
+    )
+
+    stats = [
+        ("Subjects", _fmt_num(int(row.get("n_subjects", 0) or 0))),
+        ("Recordings", _fmt_num(int(row.get("n_records", 0) or 0))),
+        ("Tasks", _fmt_num(int(row.get("n_tasks", 0) or 0))),
+        ("Channels", str(row.get("nchans", "") or "—")),
+        ("Sampling", f"{row.get('sfreq', '') or '—'} Hz"),
+        ("Size", str(row.get("size", "") or "—")),
+    ]
+    stat_cards = "".join(
+        f'<div class="eeg-kv"><div class="eeg-kv__n">{_e(v)}</div><div class="eeg-kv__l">{_e(k)}</div></div>'
+        for k, v in stats
+    )
+
+    native_snippet = (
+        "from eegdash import EEGDashDataset\n\n"
+        f'ds = EEGDashDataset(dataset="{slug}", cache_dir="./cache")\n'
+        'print(len(ds), "recordings")'
+    )
     if on_hf:
-        lines.append(
-            f"[🤗 EEGDash/{slug}](https://huggingface.co/datasets/{HF_ORG}/{slug})"
+        hub_snippet = (
+            "from braindecode.datasets import BaseConcatDataset\n\n"
+            f'ds = BaseConcatDataset.pull_from_hub("{HF_ORG}/{slug}")'
+        )
+        hub_block = _snippet_block("From 🤗 Hub (braindecode, Zarr)", hub_snippet)
+    else:
+        hub_snippet = (
+            "from eegdash import EEGDashDataset\n\n"
+            f'ds = EEGDashDataset(dataset="{slug}", cache_dir="./cache")\n'
+            f'ds.push_to_hub("{HF_ORG}/{slug}")'
         )
-    if doi:
-        lines.append(f"[DOI: {doi}](https://doi.org/{doi})")
-    lines.append("")
-    lines.append("| | |")
-    lines.append("|--|--|")
-    for key, label in [
-        ("author_year", "Author (year)"),
-        ("source", "Source"),
-        ("record_modality", "Recording"),
-        ("Type Subject", "Pathology"),
-        ("modality of exp", "Modality"),
-        ("type of exp", "Type"),
-        ("n_subjects", "Subjects"),
-        ("n_records", "Records"),
-        ("n_tasks", "Tasks"),
-        ("nchans", "Channels"),
-        ("sfreq", "Sampling rate (Hz)"),
-        ("size", "Size"),
-        ("license", "License"),
-    ]:
-        val = row.get(key, "")
-        if str(val).strip():
-            lines.append(f"| **{label}** | {val} |")
-    lines.append("")
-    lines.append("### Load")
-    lines.append(_snippets(slug, on_hf))
-    return "\n".join(lines)
+        hub_block = (
+            '<div class="eeg-note">This dataset isn’t mirrored on 🤗 yet. '
+            f'<a href="{GITHUB_URL}/issues">Open an issue</a> to request it '
+            "or push it yourself:</div>"
+            + _snippet_block("Push to the Hub", hub_snippet)
+        )
+
+    return f"""
+<article class="eeg-card" aria-labelledby="eeg-card-title">
+  <header class="eeg-card__hd">
+    <div class="eeg-card__id">
+      <span class="eeg-card__slug">{_e(slug)}</span>
+      <span class="eeg-card__modality" style="--hue:{modality_hue}">{_e(modality)}</span>
+    </div>
+    <h2 id="eeg-card-title" class="eeg-card__title">{_e(title)}</h2>
+    <div class="eeg-card__meta">
+      {f'<span class="eeg-tag">{_e(author)}</span>' if author else ''}
+      <span class="eeg-tag">{_e(license_)}</span>
+      <span class="eeg-tag">{_e(pathology)}</span>
+      {doi_link}
+      {hf_link}
+    </div>
+  </header>
+
+  <div class="eeg-card__kvs">{stat_cards}</div>
+
+  <section class="eeg-card__body">
+    <h3 class="eeg-card__h3">Load it</h3>
+    {_snippet_block("Native EEGDash (streams from S3 / NEMAR)", native_snippet)}
+    {hub_block}
+  </section>
+</article>
+"""
+
+
+def _empty_detail() -> str:
+    return """
+<article class="eeg-card eeg-card--empty">
+  <div class="eeg-card__ghost">
+    <div class="eeg-card__ghost-title">Pick a dataset</div>
+    <p>Click any row in the table above to see its metadata, load snippet, and 🤗 status.</p>
+  </div>
+</article>
+"""
+
+
+# -------------------- Event handlers --------------------
 
 
 CATALOG = _load_catalog()
+TOTAL_ALL = len(CATALOG)
 MODALITY_CHOICES = _unique_sorted(CATALOG["modality of exp"])
 SUBJECT_CHOICES = _unique_sorted(CATALOG["Type Subject"])
 SOURCE_CHOICES = _unique_sorted(CATALOG["source"])
 LICENSE_CHOICES = _unique_sorted(CATALOG["license"])
 
 
-CSS = """
-#detail { min-height: 320px; }
-.gradio-container { max-width: 1400px !important; }
-"""
-
-
 def _on_select(evt: gr.SelectData, df) -> str:
-    """Return the detail markdown for the clicked row.
-
-    Bypasses ``gr.State`` so the lookup is a single hop: click → detail.
-    Handles deselection and header clicks (``evt.index`` may be ``None``)
-    and the three shapes gradio 5.x can pass the table value as (DataFrame,
-    list-of-lists, or a dict with ``headers``/``data``).
-    """
     if evt is None or evt.index is None:
-        return "Pick a dataset row above to see details and load snippets."
+        return _empty_detail()
     row_idx = evt.index[0] if isinstance(evt.index, (list, tuple)) else evt.index
     if df is None:
-        return "Pick a dataset row above to see details and load snippets."
+        return _empty_detail()
     if isinstance(df, pd.DataFrame):
         if df.empty or row_idx >= len(df):
-            return "Pick a dataset row above to see details and load snippets."
+            return _empty_detail()
         slug = str(df.iloc[row_idx, 0])
     elif isinstance(df, dict) and "data" in df:
         rows = df["data"]
         if not rows or row_idx >= len(rows):
-            return "Pick a dataset row above to see details and load snippets."
+            return _empty_detail()
         slug = str(rows[row_idx][0])
     else:
         try:
             slug = str(df[row_idx][0])
         except (IndexError, TypeError, KeyError):
-            return "Pick a dataset row above to see details and load snippets."
-    return _detail(CATALOG, slug)
+            return _empty_detail()
+    return _detail_html(CATALOG, slug)
 
 
 def _on_filter(
     query, modalities, subject_types, sources, licenses, min_subjects, only_on_hf
 ):
     filtered = _filter(
-        CATALOG, query, modalities, subject_types, sources, licenses, min_subjects, only_on_hf
+        CATALOG,
+        query,
+        modalities,
+        subject_types,
+        sources,
+        licenses,
+        min_subjects,
+        only_on_hf,
+    )
+    return (
+        _render_table(filtered),
+        _hero_html(filtered, TOTAL_ALL),
+        _modality_strip_html(filtered),
     )
-    count_md = f"**{len(filtered)}** of {len(CATALOG)} datasets"
-    return _render_table(filtered), count_md
-
 
-with gr.Blocks(title="EEGDash Dataset Catalog", css=CSS, theme=gr.themes.Soft()) as demo:
-    gr.Markdown(
-        f"""# 🧠 EEGDash Dataset Catalog
 
-Search {len(CATALOG)}+ EEG/MEG datasets and get copy-paste load snippets.
-Mirrored from [eegdash.org]({EEGDASH_URL}) · Code on [GitHub]({GITHUB_URL}) ·
-Library on [PyPI](https://pypi.org/project/eegdash/).
-"""
+# -------------------- UI assembly --------------------
+
+CSS = CSS_PATH.read_text(encoding="utf-8") if CSS_PATH.exists() else ""
+
+THEME = gr.themes.Base(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.slate,
+    neutral_hue=gr.themes.colors.slate,
+    font=(gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"),
+    font_mono=(
+        gr.themes.GoogleFont("JetBrains Mono"),
+        "ui-monospace",
+        "SFMono-Regular",
+        "monospace",
+    ),
+).set(
+    body_background_fill="#f8fafc",
+    body_background_fill_dark="#0b1220",
+    background_fill_primary="#ffffff",
+    background_fill_primary_dark="#111827",
+    border_color_primary="#e2e8f0",
+    border_color_primary_dark="#1f2937",
+    button_primary_background_fill="#0072B2",
+    button_primary_background_fill_hover="#005A8F",
+    button_primary_text_color="#ffffff",
+    block_radius="14px",
+    input_radius="10px",
+    body_text_color="#0f172a",
+    body_text_color_dark="#e2e8f0",
+)
+
+
+with gr.Blocks(
+    title="EEGDash — EEG/MEG dataset catalog",
+    css=CSS,
+    theme=THEME,
+    analytics_enabled=False,
+) as demo:
+    hero = gr.HTML(_hero_html(CATALOG, TOTAL_ALL), elem_classes=["eeg-hero-wrap"])
+    modality_strip = gr.HTML(
+        _modality_strip_html(CATALOG), elem_classes=["eeg-modality-wrap"]
     )
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            query = gr.Textbox(
-                label="Search",
-                placeholder="dataset id, author, year…",
-                show_label=True,
-            )
+    with gr.Row(elem_classes=["eeg-toolbar"]):
+        query = gr.Textbox(
+            label="Search",
+            placeholder="Type a dataset id, author, or keyword…",
+            show_label=False,
+            elem_classes=["eeg-search"],
+            scale=4,
+        )
+        only_on_hf = gr.Checkbox(
+            label="Only 🤗-mirrored",
+            value=False,
+            elem_classes=["eeg-toggle"],
+            scale=1,
+        )
+
+    with gr.Accordion("Filters", open=False, elem_classes=["eeg-filters"]):
+        with gr.Row():
             modalities = gr.CheckboxGroup(
-                label="Modality",
-                choices=MODALITY_CHOICES,
-                value=[],
+                label="Modality", choices=MODALITY_CHOICES, value=[]
             )
             subject_types = gr.CheckboxGroup(
-                label="Subject type",
-                choices=SUBJECT_CHOICES,
-                value=[],
+                label="Pathology / population", choices=SUBJECT_CHOICES, value=[]
             )
+        with gr.Row():
             sources = gr.CheckboxGroup(
-                label="Source",
-                choices=SOURCE_CHOICES,
-                value=[],
+                label="Source", choices=SOURCE_CHOICES, value=[]
             )
             licenses = gr.Dropdown(
                 label="License",
@@ -323,38 +527,52 @@ Library on [PyPI](https://pypi.org/project/eegdash/).
                 multiselect=True,
                 value=[],
             )
-            min_subjects = gr.Slider(
-                label="Min. subjects",
-                minimum=0,
-                maximum=500,
-                step=10,
-                value=0,
-            )
-            only_on_hf = gr.Checkbox(label="Only datasets mirrored on 🤗", value=False)
-            count = gr.Markdown(f"**{len(CATALOG)}** of {len(CATALOG)} datasets")
+        min_subjects = gr.Slider(
+            label="Minimum subjects",
+            minimum=0,
+            maximum=500,
+            step=10,
+            value=0,
+        )
 
-        with gr.Column(scale=3):
+    with gr.Row(elem_classes=["eeg-main"]):
+        with gr.Column(scale=3, elem_classes=["eeg-main__table"]):
             table = gr.Dataframe(
                 value=_render_table(CATALOG),
                 interactive=False,
-                wrap=True,
+                wrap=False,
                 column_widths=[
-                    "130px", "140px", "90px", "90px", "120px", "110px",
-                    "150px", "90px", "90px", "70px", "90px", "120px",
-                    "90px", "130px", "70px",
+                    "140px", "140px", "90px", "90px", "120px", "110px",
+                    "140px", "85px", "85px", "60px", "80px", "70px",
+                    "85px", "110px", "50px",
                 ],
-                label="Catalog",
-            )
-            detail = gr.Markdown(
-                "Pick a dataset row above to see details and load snippets.",
-                elem_id="detail",
+                label=None,
+                show_label=False,
+                elem_classes=["eeg-table"],
+                max_height=640,
             )
+        with gr.Column(scale=2, elem_classes=["eeg-main__detail"]):
+            detail = gr.HTML(_empty_detail(), elem_classes=["eeg-detail"])
+
+    gr.HTML(
+        f"""
+<footer class="eeg-foot">
+  <span>
+    EEGDash is open source · BSD-3-Clause · data licenses follow their origin.
+    <a href="{EEGDASH_URL}">eegdash.org</a> ·
+    <a href="{GITHUB_URL}">github</a> ·
+    <a href="https://huggingface.co/{HF_ORG}">🤗 {HF_ORG}</a>
+  </span>
+</footer>
+""",
+        elem_classes=["eeg-foot-wrap"],
+    )
 
     filter_inputs = [
         query, modalities, subject_types, sources, licenses, min_subjects, only_on_hf,
     ]
     for w in filter_inputs:
-        w.change(_on_filter, filter_inputs, [table, count])
+        w.change(_on_filter, filter_inputs, [table, hero, modality_strip])
 
     table.select(_on_select, [table], [detail])
 

style.css

@@ -0,0 +1,523 @@
+/* ================================================================
+   EEGDash Space — visual design system
+   -----------------------------------------------------------------
+   Scale:  1  2  3  4  5  6  7  8  9  10
+           4  8 12 16 20 24 32 40 56 72  (px)
+   Radii:  6 (sm) / 10 (md) / 14 (lg) / 20 (xl)
+   Motion: 150ms ease for hover, 220ms for layout
+   Palette (Okabe-Ito + slate neutrals):
+     brand      #0072B2   (EEG waves; primary interaction)
+     accent     #E69F00   (reserved for 🤗 flag, never decorative)
+     success    #009E73
+     danger     #D55E00
+     ink / text #0f172a   /   muted  #64748b
+     surface    #ffffff   /   subtle #f1f5f9   /   outline #e2e8f0
+   ================================================================ */
+
+:root {
+  --brand: #0072B2;
+  --brand-strong: #005A8F;
+  --brand-soft: #e6f1fa;
+  --accent: #E69F00;
+  --accent-soft: #fdf2dd;
+  --ok: #009E73;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --outline: #e2e8f0;
+  --surface: #ffffff;
+  --subtle: #f1f5f9;
+  --code-bg: #0f172a;
+  --code-ink: #e2e8f0;
+  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
+  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
+}
+
+.dark, .dark :root, html.dark {
+  --ink: #e2e8f0;
+  --muted: #94a3b8;
+  --outline: #1f2937;
+  --surface: #111827;
+  --subtle: #0b1220;
+  --brand-soft: #102a42;
+  --accent-soft: #2a1d00;
+  --code-bg: #020617;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
+}
+
+.gradio-container {
+  max-width: 1320px !important;
+  padding: 24px 20px 40px !important;
+}
+
+/* Kill gradio's default form chrome around our HTML blocks. */
+.eeg-hero-wrap, .eeg-modality-wrap, .eeg-foot-wrap {
+  background: transparent !important;
+  border: 0 !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+.eeg-hero-wrap > .prose, .eeg-modality-wrap > .prose, .eeg-foot-wrap > .prose { max-width: none; }
+
+/* ---------- Hero ---------- */
+
+.eeg-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+  gap: 32px;
+  align-items: center;
+  padding: 32px 28px;
+  border-radius: 20px;
+  background:
+    radial-gradient(1200px 320px at -10% -40%, rgba(0,114,178,.14), transparent 60%),
+    radial-gradient(900px 240px at 110% -30%, rgba(230,159,0,.10), transparent 60%),
+    linear-gradient(180deg, var(--surface), var(--subtle));
+  border: 1px solid var(--outline);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 16px;
+}
+
+.eeg-hero__kicker {
+  font-size: 11.5px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--brand);
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.eeg-hero__title {
+  font-size: clamp(26px, 3.2vw, 40px);
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+  color: var(--ink);
+  margin: 0 0 14px;
+}
+
+.eeg-hero__lede {
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.55;
+  margin: 0 0 18px;
+  max-width: 58ch;
+}
+
+.eeg-hero__lede a {
+  color: var(--brand);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color 150ms ease;
+}
+.eeg-hero__lede a:hover { border-bottom-color: var(--brand); }
+
+.eeg-hero__cta { display: flex; gap: 8px; flex-wrap: wrap; }
+
+.eeg-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--outline);
+  background: var(--surface);
+  color: var(--ink);
+  font-size: 13.5px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
+}
+.eeg-btn:hover { transform: translateY(-1px); border-color: var(--brand); }
+.eeg-btn--primary {
+  background: var(--brand);
+  border-color: var(--brand);
+  color: #fff;
+}
+.eeg-btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
+
+.eeg-hero__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.eeg-stat {
+  background: var(--surface);
+  border: 1px solid var(--outline);
+  border-radius: 14px;
+  padding: 16px 18px;
+  box-shadow: var(--shadow-sm);
+}
+
+.eeg-stat__n {
+  font-family: "Inter", ui-sans-serif, sans-serif;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  line-height: 1;
+}
+.eeg-stat__l {
+  color: var(--muted);
+  font-size: 12.5px;
+  margin-top: 6px;
+  text-transform: lowercase;
+}
+.eeg-stat__meta { opacity: .7; margin-left: 4px; }
+
+.eeg-stat--accent {
+  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--outline));
+}
+.eeg-stat--accent .eeg-stat__n { color: var(--accent); }
+
+@media (max-width: 860px) {
+  .eeg-hero { grid-template-columns: 1fr; padding: 24px 18px; }
+  .eeg-hero__stats { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* ---------- Modality strip ---------- */
+
+.eeg-modality {
+  padding: 16px 18px;
+  border-radius: 14px;
+  background: var(--surface);
+  border: 1px solid var(--outline);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 16px;
+}
+
+.eeg-modality__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+.eeg-modality__title {
+  font-size: 12px;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 600;
+}
+.eeg-modality__meta {
+  color: var(--muted);
+  font-size: 12.5px;
+}
+
+.eeg-bar {
+  display: flex;
+  width: 100%;
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--subtle);
+  box-shadow: inset 0 0 0 1px var(--outline);
+}
+.eeg-bar__seg { display: block; height: 100%; transition: filter 150ms ease; }
+.eeg-bar__seg:hover { filter: brightness(1.08); }
+
+.eeg-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  margin-top: 12px;
+}
+.eeg-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12.5px;
+  color: var(--ink);
+}
+.eeg-legend__swatch {
+  width: 10px; height: 10px;
+  border-radius: 3px;
+  display: inline-block;
+}
+.eeg-legend__n {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  margin-left: 2px;
+}
+
+/* ---------- Toolbar & filters ---------- */
+
+.eeg-toolbar {
+  gap: 12px;
+  margin-bottom: 8px !important;
+}
+
+.eeg-search textarea, .eeg-search input {
+  font-size: 15px !important;
+  padding: 12px 14px !important;
+  border-radius: 12px !important;
+}
+
+.eeg-toggle label {
+  font-weight: 500;
+  color: var(--ink);
+}
+
+.eeg-filters { margin-top: 4px; }
+.eeg-filters label span { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
+
+/* CheckboxGroup → chip style */
+.eeg-filters .wrap.svelte-1j5x5b > label,
+.eeg-filters fieldset label {
+  border-radius: 999px !important;
+  padding: 6px 12px !important;
+  border: 1px solid var(--outline) !important;
+  background: var(--surface) !important;
+  transition: all 150ms ease;
+}
+.eeg-filters input[type="checkbox"]:checked + span {
+  color: var(--brand);
+}
+
+/* ---------- Main table + detail ---------- */
+
+.eeg-main { gap: 16px !important; align-items: stretch; }
+
+.eeg-main__table, .eeg-main__detail {
+  min-width: 0;
+}
+
+.eeg-table {
+  border-radius: 14px !important;
+  overflow: hidden !important;
+  border: 1px solid var(--outline) !important;
+  background: var(--surface) !important;
+  box-shadow: var(--shadow-sm);
+}
+
+.eeg-table table {
+  font-size: 13px !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.eeg-table thead th {
+  background: var(--subtle) !important;
+  color: var(--muted) !important;
+  font-weight: 600 !important;
+  font-size: 11.5px !important;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  border-bottom: 1px solid var(--outline) !important;
+  padding: 10px 12px !important;
+}
+
+.eeg-table tbody td {
+  padding: 9px 12px !important;
+  border-bottom: 1px solid var(--outline) !important;
+  color: var(--ink);
+}
+
+.eeg-table tbody tr { transition: background 150ms ease, transform 150ms ease; }
+.eeg-table tbody tr:hover { background: var(--brand-soft) !important; cursor: pointer; }
+.eeg-table tbody tr.selected { background: var(--brand-soft) !important; }
+
+/* First column = slug, emphasized */
+.eeg-table tbody td:first-child {
+  font-weight: 600;
+  color: var(--brand);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 12px !important;
+}
+
+/* 🤗 column (last) */
+.eeg-table tbody td:last-child {
+  text-align: center;
+  color: var(--accent);
+  font-weight: 700;
+}
+
+/* ---------- Detail card ---------- */
+
+.eeg-detail { padding: 0 !important; background: transparent !important; border: 0 !important; }
+
+.eeg-card {
+  background: var(--surface);
+  border: 1px solid var(--outline);
+  border-radius: 14px;
+  padding: 24px;
+  box-shadow: var(--shadow-md);
+  min-height: 520px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.eeg-card--empty {
+  background: linear-gradient(180deg, var(--subtle), var(--surface));
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--muted);
+}
+.eeg-card__ghost-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--ink);
+  margin-bottom: 6px;
+}
+.eeg-card--empty p { max-width: 36ch; font-size: 14px; line-height: 1.5; }
+
+.eeg-card__id {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+.eeg-card__slug {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--brand);
+  background: var(--brand-soft);
+  padding: 4px 10px;
+  border-radius: 8px;
+}
+.eeg-card__modality {
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: var(--hue, var(--muted));
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--hue, var(--muted)) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--hue, var(--muted)) 30%, transparent);
+}
+
+.eeg-card__title {
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.eeg-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.eeg-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--subtle);
+  border: 1px solid var(--outline);
+  color: var(--ink);
+  font-size: 11.5px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 150ms ease, border-color 150ms ease;
+}
+.eeg-tag:hover { background: var(--brand-soft); border-color: var(--brand); }
+.eeg-tag--accent {
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 30%, var(--outline));
+  color: var(--accent);
+}
+.eeg-tag--accent:hover { border-color: var(--accent); }
+.eeg-tag--muted { color: var(--muted); cursor: default; }
+.eeg-tag--muted:hover { background: var(--subtle); border-color: var(--outline); }
+
+.eeg-card__kvs {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  padding: 14px;
+  background: var(--subtle);
+  border-radius: 12px;
+  border: 1px solid var(--outline);
+}
+.eeg-kv { text-align: center; }
+.eeg-kv__n {
+  font-family: "Inter", ui-sans-serif, sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.eeg-kv__l {
+  color: var(--muted);
+  font-size: 11px;
+  margin-top: 5px;
+  text-transform: lowercase;
+  letter-spacing: .02em;
+}
+
+@media (max-width: 620px) {
+  .eeg-card__kvs { grid-template-columns: repeat(3, 1fr); }
+}
+
+.eeg-card__h3 {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--muted);
+  font-weight: 600;
+  margin: 4px 0 10px;
+}
+
+.eeg-snippet + .eeg-snippet { margin-top: 10px; }
+
+.eeg-snippet {
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--outline);
+}
+.eeg-snippet__hd {
+  background: var(--subtle);
+  padding: 6px 12px;
+  font-size: 11.5px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--outline);
+  font-weight: 500;
+}
+.eeg-snippet__code {
+  margin: 0;
+  padding: 14px 16px;
+  background: var(--code-bg);
+  color: var(--code-ink);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  overflow-x: auto;
+}
+
+.eeg-note {
+  margin: 10px 0 8px;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.eeg-note a { color: var(--brand); }
+
+/* ---------- Footer ---------- */
+
+.eeg-foot {
+  text-align: center;
+  color: var(--muted);
+  font-size: 12.5px;
+  padding: 24px 0 8px;
+  margin-top: 16px;
+  border-top: 1px solid var(--outline);
+}
+.eeg-foot a { color: var(--brand); text-decoration: none; margin: 0 4px; }
+.eeg-foot a:hover { text-decoration: underline; }
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 960px) {
+  .eeg-main { flex-direction: column !important; }
+}