Lead with bubble chart; list every modality on one line (scrollable); treemap moves to Zoom out tab

app.py

@@ -314,10 +314,10 @@ def _modality_strip_html(df: pd.DataFrame) -> str:
     for name, n in counts.items():
         hue = MODALITY_HUES.get(str(name), DEFAULT_HUE)
         pct = (n / total) * 100
-        if pct < 0.8:
-            continue
+        # Every modality appears in the legend (user-facing single line),
+        # but sub-pixel bar segments get a min-width so they stay clickable.
         segments.append(
-            f'<span class="eeg-bar__seg" style="width:{pct:.2f}%;background:{hue}" '
+            f'<span class="eeg-bar__seg" style="width:{pct:.2f}%;background:{hue};min-width:2px" '
             f'title="{_html.escape(str(name))}: {n}"></span>'
         )
         legend.append(
@@ -576,10 +576,10 @@ with gr.Blocks(
         elem_classes=["eeg-overview"],
     ):
         gr.HTML(
-            '<p class="eeg-overview__lede">Each box is one dataset, sized by the '
-            'number of recordings and colored by experimental modality. Hover '
-            'for the exact count.</p>'
-            + _plot_iframe("dataset_treemap", height=900, title="Dataset treemap"),
+            '<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"],
         )
 
@@ -589,6 +589,14 @@ with gr.Blocks(
         elem_classes=["eeg-overview"],
     ):
         with gr.Tabs():
+            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"),
+                    elem_classes=["eeg-plot"],
+                )
             with gr.Tab("Growth"):
                 gr.HTML(
                     '<p class="eeg-overview__lede">New datasets added to the '

style.css

@@ -236,16 +236,25 @@ html.dark .eeg-hero__logo { filter: invert(1) hue-rotate(180deg) brightness(1.05
 
 .eeg-legend {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px 16px;
+  flex-wrap: nowrap;
+  gap: 14px;
   margin-top: 12px;
+  overflow-x: auto;
+  white-space: nowrap;
+  padding-bottom: 4px; /* space for the horizontal scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: var(--outline) transparent;
 }
+.eeg-legend::-webkit-scrollbar { height: 6px; }
+.eeg-legend::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 999px; }
+
 .eeg-legend__item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   color: var(--ink);
+  flex-shrink: 0;
 }
 .eeg-legend__swatch {
   width: 10px; height: 10px;