Lead with Sankey as navigation view; unify into Catalog views tabs

app.py

@@ -571,51 +571,52 @@ with gr.Blocks(
     )
 
     with gr.Accordion(
-        "Overview — what’s in the catalog",
+        "Catalog views",
         open=True,
         elem_classes=["eeg-overview"],
     ):
-        gr.HTML(
-            '<p class="eeg-overview__lede">Each bubble is one dataset, sized by '
-            'recordings and colored by experimental modality. Hover for details; '
-            'axes span subject count and recording duration.</p>'
-            + _plot_iframe("dataset_bubble", height=820, title="Dataset bubble chart"),
-            elem_classes=["eeg-plot"],
-        )
-
-    with gr.Accordion(
-        "Zoom out — growth, clinical, and flow",
-        open=False,
-        elem_classes=["eeg-overview"],
-    ):
-        with gr.Tabs():
+        with gr.Tabs(elem_classes=["eeg-tabs"]):
+            with gr.Tab("Flow"):
+                gr.HTML(
+                    '<p class="eeg-overview__lede">The catalog as a navigation '
+                    'map. Every dataset flows from its <em>experimental '
+                    'modality</em> (left) to its <em>clinical population</em> '
+                    '(middle) to its <em>repository</em> (right). Ribbon '
+                    'thickness is the dataset count along that path — follow '
+                    'any color to see where a paradigm of interest lives.</p>'
+                    + _plot_iframe("dataset_sankey", height=640, title="Catalog flow (sankey)"),
+                    elem_classes=["eeg-plot"],
+                )
+            with gr.Tab("Bubbles"):
+                gr.HTML(
+                    '<p class="eeg-overview__lede">Every dataset as an '
+                    'individual mark. Bubble size is recording count, color is '
+                    'experimental modality, axes span subjects × duration. '
+                    'Hover to find a specific dataset; use the filter below to '
+                    'narrow the field.</p>'
+                    + _plot_iframe("dataset_bubble", height=780, title="Dataset bubble chart"),
+                    elem_classes=["eeg-plot"],
+                )
             with gr.Tab("Treemap"):
                 gr.HTML(
-                    '<p class="eeg-overview__lede">Same catalog, nested rectangles '
-                    '— area is proportional to recording count inside each '
-                    'modality group.</p>'
-                    + _plot_iframe("dataset_treemap", height=900, title="Dataset treemap"),
+                    '<p class="eeg-overview__lede">Nested rectangles grouped by '
+                    'modality. Area is proportional to recording count — the '
+                    'biggest tiles are the heaviest contributors.</p>'
+                    + _plot_iframe("dataset_treemap", height=820, title="Dataset treemap"),
                     elem_classes=["eeg-plot"],
                 )
             with gr.Tab("Growth"):
                 gr.HTML(
                     '<p class="eeg-overview__lede">New datasets added to the '
-                    'catalog over time, colored by source.</p>'
+                    'catalog over time, colored by source. The slope tells you '
+                    'how fast the archive has expanded.</p>'
                     + _plot_iframe("dataset_growth", height=520, title="Catalog growth"),
                     elem_classes=["eeg-plot"],
                 )
-            with gr.Tab("Sankey"):
-                gr.HTML(
-                    '<p class="eeg-overview__lede">Flow from modality to '
-                    'pathology to source — follow the thickest lines to see '
-                    'where the catalog’s weight lies.</p>'
-                    + _plot_iframe("dataset_sankey", height=560, title="Dataset sankey"),
-                    elem_classes=["eeg-plot"],
-                )
             with gr.Tab("Clinical"):
                 gr.HTML(
                     '<p class="eeg-overview__lede">Clinical populations '
-                    'represented in the catalog, from healthy controls to '
+                    'represented in the catalog — from healthy controls to '
                     'neurodegenerative and psychiatric conditions.</p>'
                     + _plot_iframe("dataset_clinical", height=520, title="Clinical breakdown"),
                     elem_classes=["eeg-plot"],

style.css

@@ -571,6 +571,42 @@ html.dark .eeg-card__rec { filter: invert(1) hue-rotate(180deg) brightness(1.1);
   line-height: 1.55;
   max-width: 78ch;
 }
+.eeg-overview__lede em {
+  font-style: normal;
+  color: var(--ink);
+  font-weight: 600;
+  background: var(--brand-soft);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+/* Tab strip inside Catalog views — make the tab buttons chip-like so the
+   "Flow / Bubbles / Treemap / …" row reads as a choice of lens, not a
+   throwaway. */
+.eeg-tabs [role="tablist"] {
+  gap: 6px !important;
+  border-bottom: 1px solid var(--outline) !important;
+  padding: 0 0 0 2px !important;
+  margin-bottom: 14px !important;
+}
+.eeg-tabs [role="tab"] {
+  padding: 8px 14px !important;
+  border-radius: 10px 10px 0 0 !important;
+  font-weight: 500 !important;
+  font-size: 13.5px !important;
+  color: var(--muted) !important;
+  border: 1px solid transparent !important;
+  border-bottom: 0 !important;
+  background: transparent !important;
+  transition: color 150ms ease, background 150ms ease;
+}
+.eeg-tabs [role="tab"]:hover { color: var(--ink) !important; background: var(--subtle) !important; }
+.eeg-tabs [role="tab"][aria-selected="true"] {
+  color: var(--brand) !important;
+  background: var(--surface) !important;
+  border-color: var(--outline) !important;
+  box-shadow: 0 1px 0 0 var(--surface);
+}
 
 /* Plotly fragments ship their own .eegdash-figure wrapper. Let it render as-is
    but make sure it doesn't get boxed twice by gradio's surrounding block. */