Redesign linked feature attribution explorer

app.py

@@ -680,7 +680,12 @@ def figure_layout(
         plot_bgcolor="#FFFFFF",
         margin=dict(l=54, r=28, t=58, b=58 if not legend_below else 105),
         font=dict(family="Arial, Helvetica, sans-serif", size=13, color=TEXT_COLOR),
-        title=dict(font=dict(size=16, color=TEXT_COLOR), x=0.01, xanchor="left"),
+        title=dict(
+            font=dict(size=16, color=TEXT_COLOR),
+            x=0.02,
+            xanchor="left",
+            pad=dict(l=6, b=8),
+        ),
         legend=legend,
         hoverlabel=dict(
             align="left",
@@ -916,20 +921,32 @@ def dataset_example_figures(dataset: str) -> tuple[go.Figure, go.Figure, str]:
         .to_numpy(dtype=int)
     )
     customdata = np.repeat(feature_ids[:, None], values.shape[1], axis=1)
-    upper = max(float(np.nanpercentile(values.to_numpy(dtype=float), 99.5)), 1.0)
+    upper = max(int(np.ceil(np.nanmax(values.to_numpy(dtype=float)))), 1)
+    if upper <= 4:
+        count_ticks = list(range(upper + 1))
+    else:
+        count_ticks = np.unique(
+            np.rint(np.linspace(0, upper, 4)).astype(int)
+        ).tolist()
     neural_figure = go.Figure(
         go.Heatmap(
             z=values.to_numpy(dtype=float),
             x=time_values,
             y=np.arange(len(feature_ids)),
             customdata=customdata,
-            colorscale=[[0.0, "#F7FAFC"], [1.0, "#164E63"]],
+            colorscale=[[0.0, "#F8FAFB"], [1.0, "#263238"]],
             zmin=0,
             zmax=upper,
-            colorbar=dict(title="Count", thickness=13),
+            colorbar=dict(
+                title="Count / bin",
+                thickness=13,
+                tickmode="array",
+                tickvals=count_ticks,
+                ticktext=[str(value) for value in count_ticks],
+            ),
             hovertemplate=(
                 "Feature=%{customdata}<br>Time=%{x:.0f} ms<br>"
-                "Neural value=%{z:.3f}<extra></extra>"
+                "Count=%{z:.0f}<extra></extra>"
             ),
         )
     )
@@ -1348,7 +1365,7 @@ def compute_figures(
         title="Training and inference time",
         barmode="group",
     )
-    runtime.update_xaxes(title="Elapsed time (seconds, log scale)", type="log")
+    runtime.update_xaxes(title="Elapsed time (s, log)", type="log")
     runtime.update_yaxes(title="", showgrid=False)
     figure_layout(runtime, height=max(470, 27 * len(frame) + 155), legend_below=True)
 
@@ -1519,15 +1536,14 @@ def feature_attribution_frame(dataset: str, model: str | None) -> pd.DataFrame:
     return frame.sort_values("attribution_rank", kind="stable")
 
 
-def feature_raster_figure(dataset: str) -> go.Figure:
+def feature_story_raster_payload(dataset: str) -> dict:
     frame = feature_example_raster[
         feature_example_raster["dataset"].astype(str).eq(dataset)
     ].copy()
     if frame.empty:
-        return empty_figure("No example raster is available.", height=560)
+        return {"dataset": dataset, "features": [], "counts": []}
 
     numeric_columns = [
-        "trial_index",
         "display_index",
         "feature_index",
         "validation_value",
@@ -1547,487 +1563,67 @@ def feature_raster_figure(dataset: str) -> go.Figure:
 
     n_time = int(frame["n_time"].iloc[0])
     value_columns = [f"value_{index:03d}" for index in range(n_time)]
-    raw = frame[value_columns].apply(pd.to_numeric, errors="coerce").to_numpy(dtype=float)
-    vmax = max(float(np.nanpercentile(raw, 99.5)), 1.0)
-    display = np.sqrt(np.clip(raw, 0.0, vmax) / vmax)
+    counts = (
+        frame[value_columns]
+        .apply(pd.to_numeric, errors="coerce")
+        .to_numpy(dtype=float)
+    )
+    if not np.allclose(counts, np.rint(counts)):
+        raise ValueError(f"Feature raster contains noninteger counts for {dataset}")
+    counts = np.rint(counts).astype(int)
     time_ms = (
         np.arange(n_time) - int(frame["t0_index"].iloc[0])
     ) * float(frame["bin_ms"].iloc[0])
-    feature_ids = frame["feature_index"].to_numpy(dtype=int)
-    customdata = np.empty((len(frame), n_time, 2), dtype=object)
-    customdata[:, :, 0] = feature_ids[:, None]
-    customdata[:, :, 1] = raw
-
-    figure = make_subplots(
-        rows=1,
-        cols=2,
-        shared_yaxes=True,
-        column_widths=[0.035, 0.965],
-        horizontal_spacing=0.012,
-    )
-    if dataset == "allen_neuropixels":
-        strip_values = frame["validation_value"].to_numpy(dtype=float)[:, None]
-        strip_custom = np.empty((len(frame), 1, 2), dtype=object)
-        strip_custom[:, :, 0] = feature_ids[:, None]
-        strip_custom[:, :, 1] = strip_values
-        strip = go.Heatmap(
-            z=strip_values,
-            y=np.arange(len(frame)),
-            customdata=strip_custom,
-            colorscale="Cividis",
-            zmin=float(np.nanmin(strip_values)),
-            zmax=float(np.nanmax(strip_values)),
-            showscale=False,
-            hovertemplate=(
-                "Feature=%{customdata[0]:.0f}<br>"
-                "gOSI=%{customdata[1]:.4f}<extra></extra>"
-            ),
-        )
-        strip_title = "gOSI"
-    else:
-        group_colors = FEATURE_GROUP_COLORS[dataset]
-        groups = [group for group in group_colors if group in set(frame["feature_group"])]
-        codes = frame["feature_group"].map({group: index for index, group in enumerate(groups)})
-        scale: list[list[float | str]] = []
-        for index, group in enumerate(groups):
-            lower = index / len(groups)
-            upper = (index + 1) / len(groups)
-            scale.extend([[lower, group_colors[group]], [upper, group_colors[group]]])
-        strip_values = codes.to_numpy(dtype=float)[:, None]
-        strip_custom = np.asarray(
-            [[[int(feature), str(group)]] for feature, group in zip(feature_ids, frame["feature_group"])],
-            dtype=object,
-        )
-        strip = go.Heatmap(
-            z=strip_values,
-            y=np.arange(len(frame)),
-            customdata=strip_custom,
-            colorscale=scale,
-            zmin=0,
-            zmax=max(len(groups), 1),
-            showscale=False,
-            hovertemplate=(
-                "Feature=%{customdata[0]:.0f}<br>"
-                "Group=%{customdata[1]}<extra></extra>"
+    features = [
+        {
+            "feature_index": int(row.feature_index),
+            "group": str(row.feature_group),
+            "validation_value": (
+                None
+                if pd.isna(row.validation_value)
+                else float(row.validation_value)
             ),
-        )
-        strip_title = "Group"
-    figure.add_trace(strip, row=1, col=1)
-
-    count_ticks = np.linspace(0.0, vmax, 5)
-    figure.add_trace(
-        go.Heatmap(
-            z=display,
-            x=time_ms,
-            y=np.arange(len(frame)),
-            customdata=customdata,
-            colorscale=[[0.0, "#FFFFFF"], [1.0, "#263238"]],
-            zmin=0,
-            zmax=1,
-            colorbar=dict(
-                title="Count",
-                thickness=11,
-                tickvals=np.sqrt(count_ticks / vmax),
-                ticktext=[f"{value:g}" for value in count_ticks],
-            ),
-            hovertemplate=(
-                "Feature=%{customdata[0]:.0f}<br>Time=%{x:.0f} ms<br>"
-                "Count=%{customdata[1]:.0f}<extra></extra>"
-            ),
-        ),
-        row=1,
-        col=2,
-    )
-    figure.add_vline(x=0, line_color="#D55E00", line_dash="dash", row=1, col=2)
-    if dataset != "allen_neuropixels":
-        for group in frame["feature_group"].drop_duplicates().astype(str):
-            indices = np.flatnonzero(frame["feature_group"].astype(str).eq(group))
-            if len(indices):
-                figure.add_annotation(
-                    x=0.01,
-                    xref="paper",
-                    y=float(indices.mean()),
-                    yref="y2",
-                    text=group,
-                    showarrow=False,
-                    xanchor="left",
-                    bgcolor="rgba(255,255,255,0.82)",
-                    font=dict(size=10, color="#334957"),
-                )
-                figure.add_hline(
-                    y=float(indices[-1]) + 0.5,
-                    line_color="#FFFFFF",
-                    line_width=1.2,
-                    row=1,
-                    col=2,
-                )
-    figure_layout(figure, height=560)
-    figure.update_layout(
-        title="Example neural activity",
-        margin=dict(l=18, r=24, t=66, b=58),
-    )
-    figure.add_annotation(
-        x=0.013,
-        y=1.035,
-        xref="paper",
-        yref="paper",
-        text=strip_title,
-        showarrow=False,
-        font=dict(size=10, color=MUTED_COLOR),
-    )
-    figure.update_xaxes(visible=False, row=1, col=1)
-    figure.update_yaxes(visible=False, autorange="reversed", row=1, col=1)
-    figure.update_xaxes(title="Time from scoring onset (ms)", row=1, col=2)
-    figure.update_yaxes(visible=False, autorange="reversed", row=1, col=2)
-    return figure
+        }
+        for row in frame.itertuples(index=False)
+    ]
+    return {
+        "dataset": dataset,
+        "dataset_label": DATASET_LABELS[dataset],
+        "features": features,
+        "counts": counts.tolist(),
+        "time_ms": time_ms.tolist(),
+        "max_count": int(counts.max(initial=0)),
+    }
 
 
-def feature_sorter_figure(
+def feature_story_attribution_payload(
     dataset: str,
     model: str | None,
-    arrangement: str = "ranked",
-) -> go.Figure:
-    frame = feature_attribution_frame(dataset, model).reset_index(drop=True)
+) -> dict:
+    frame = feature_attribution_frame(dataset, model)
     if frame.empty:
-        return empty_figure("Select an available method to inspect feature attributions.", height=560)
-    ranked = arrangement == "ranked"
-    has_ranking = frame["signed_attribution"].nunique(dropna=True) > 1
-    if ranked and not has_ranking:
-        return empty_figure(
-            "Signed feature-attribution values are tied for this method and dataset.",
-            height=560,
-        )
-
-    n_features = len(frame)
-    values = frame["signed_attribution"].to_numpy(dtype=float)
-    ranks = frame["attribution_rank"].to_numpy(dtype=float)
-    feature_ids = frame["feature_index"].to_numpy(dtype=int)
-    y_low = min(float(np.nanmin(values)), 0.0)
-    y_high = max(float(np.nanmax(values)), 0.0)
-    y_span = max(y_high - y_low, 1e-6)
-    final_x = (ranks - 1.0) / max(n_features - 1, 1)
-    final_y = (values - y_low) / y_span
-    display_range = [-0.035, 1.055]
-
-    group_colors = FEATURE_GROUP_COLORS.get(dataset, {})
-    if dataset == "allen_neuropixels":
-        validation = frame["validation_value"].to_numpy(dtype=float)
-        vmin = float(np.nanmin(validation))
-        vmax = float(np.nanmax(validation))
-        scale = max(vmax - vmin, 1e-9)
-        start_x = (validation - vmin) / scale
-        start_y = 0.5 + (
-            ((feature_ids * 37) % 101) / 100.0 - 0.5
-        ) * 0.42
-        trace_groups = ["gOSI"]
-        trace_indices = [np.arange(n_features)]
-    else:
-        trace_groups = [
-            group for group in group_colors if group in set(frame["feature_group"])
-        ]
-        trace_indices = [
-            np.flatnonzero(frame["feature_group"].astype(str).eq(group))
-            for group in trace_groups
-        ]
-        centers = np.linspace(0.72, 0.28, len(trace_groups))
-        start_x = np.zeros(n_features, dtype=float)
-        start_y = np.zeros(n_features, dtype=float)
-        for center, indices in zip(centers, trace_indices):
-            ordered = indices[
-                np.argsort(frame.loc[indices, "feature_index"].to_numpy(), kind="stable")
-            ]
-            n_columns = max(1, int(np.ceil(np.sqrt(len(ordered) * 4.0))))
-            n_rows = max(1, int(np.ceil(len(ordered) / n_columns)))
-            row_y = (
-                np.asarray([center])
-                if n_rows == 1
-                else center + np.linspace(-0.075, 0.075, n_rows)
-            )
-            for row_index in range(n_rows):
-                row = ordered[row_index * n_columns : (row_index + 1) * n_columns]
-                if not len(row):
-                    continue
-                if n_columns == 1:
-                    row_x = np.asarray([0.5])
-                else:
-                    offset = (n_columns - len(row)) / 2.0
-                    row_x = (np.arange(len(row)) + offset) / (n_columns - 1)
-                start_x[row] = 0.04 + 0.92 * row_x
-                start_y[row] = row_y[row_index]
-
-    marker_size = 6 if n_features > 300 else (8 if n_features > 120 else 10)
-
-    def trace_for(indices: np.ndarray, group: str, x: np.ndarray, y: np.ndarray) -> go.Scatter:
-        subset = frame.iloc[indices]
-        customdata = np.asarray(
-            [
-                [
-                    int(row.feature_index),
-                    int(row.attribution_rank),
-                    float(row.signed_attribution),
-                    float(row.validation_value),
-                    str(row.feature_group),
-                    str(row.attribution_bin),
-                ]
-                for row in subset.itertuples(index=False)
-            ],
-            dtype=object,
-        )
-        validation_hover = (
-            "<br>gOSI=%{customdata[3]:.4f}"
-            if dataset == "allen_neuropixels"
-            else ""
-        )
-        group_hover = (
-            "" if dataset == "allen_neuropixels" else "<br>Group=%{customdata[4]}"
-        )
-        marker: dict = dict(
-            size=marker_size,
-            opacity=0.82,
-            line=dict(color="#FFFFFF", width=0.45),
-        )
-        if dataset == "allen_neuropixels":
-            marker.update(
-                color=subset["validation_value"],
-                colorscale="Cividis",
-                cmin=float(frame["validation_value"].min()),
-                cmax=float(frame["validation_value"].max()),
-                colorbar=dict(title="gOSI", thickness=12),
-            )
-        else:
-            marker["color"] = group_colors[group]
-        rank_hover = "<br>Rank=%{customdata[1]:.0f}" if ranked and has_ranking else ""
-        return go.Scatter(
-            x=x[indices],
-            y=y[indices],
-            ids=[f"{dataset}:{int(value)}" for value in subset["feature_index"]],
-            mode="markers",
-            name=group,
-            showlegend=ranked and dataset != "allen_neuropixels",
-            marker=marker,
-            customdata=customdata,
-            hovertemplate=(
-                "Feature=%{customdata[0]:.0f}"
-                + group_hover
-                + rank_hover
-                + "<br>Signed Kernel SHAP=%{customdata[2]:+.5f}"
-                + validation_hover
-                + "<extra></extra>"
-            ),
-        )
-
-    x = final_x if ranked else start_x
-    y = final_y if ranked else start_y
-    figure = go.Figure(
-        data=[
-            trace_for(indices, group, x, y)
-            for group, indices in zip(trace_groups, trace_indices)
-        ]
-    )
-    shapes: list[dict] = []
-    if ranked:
-        for rank_bin in ATTRIBUTION_BIN_ORDER:
-            bin_ranks = frame.loc[
-                frame["attribution_bin"].astype(str).eq(rank_bin), "attribution_rank"
-            ].to_numpy(dtype=float)
-            if not len(bin_ranks):
-                continue
-            bin_x = (bin_ranks - 1.0) / max(n_features - 1, 1)
-            shapes.append(
-                dict(
-                    type="rect",
-                    x0=float(bin_x.min()) - 0.5 / max(n_features - 1, 1),
-                    x1=float(bin_x.max()) + 0.5 / max(n_features - 1, 1),
-                    y0=display_range[0],
-                    y1=display_range[1],
-                    fillcolor=ATTRIBUTION_BIN_COLORS[rank_bin],
-                    opacity=0.045,
-                    line_width=0,
-                    layer="below",
-                )
-            )
-        shapes.append(
-            dict(
-                type="line",
-                x0=display_range[0],
-                x1=display_range[1],
-                y0=(0.0 - y_low) / y_span,
-                y1=(0.0 - y_low) / y_span,
-                line=dict(color="#71808D", dash="dash", width=1.3),
-            )
-        )
-    elif dataset != "allen_neuropixels":
-        centers = np.linspace(0.7, 0.3, len(trace_groups))
-        for center, group in zip(centers, trace_groups):
-            shapes.append(
-                dict(
-                    type="rect",
-                    x0=display_range[0],
-                    x1=display_range[1],
-                    y0=center - 0.095,
-                    y1=center + 0.095,
-                    fillcolor=group_colors[group],
-                    opacity=0.08,
-                    line_width=0,
-                    layer="below",
-                )
-            )
-
-    title = "Signed Kernel SHAP vs. rank" if ranked else None
-    figure_layout(figure, height=560)
-    if ranked:
-        rank_ticks = np.unique(
-            np.rint(np.linspace(1, n_features, 5)).astype(int)
-        )
-        rank_tickvals = (rank_ticks - 1.0) / max(n_features - 1, 1)
-        value_ticks = np.linspace(y_low, y_high, 5)
-        value_tickvals = (value_ticks - y_low) / y_span
-        figure.update_xaxes(
-            visible=True,
-            range=display_range,
-            tickmode="array",
-            tickvals=rank_tickvals,
-            ticktext=[str(value) for value in rank_ticks],
-            title="Attribution rank",
-        )
-        figure.update_yaxes(
-            visible=True,
-            range=display_range,
-            tickmode="array",
-            tickvals=value_tickvals,
-            ticktext=[f"{value:.3g}" for value in value_ticks],
-            title="Signed Kernel SHAP value",
-        )
-    elif dataset == "allen_neuropixels":
-        ticks = np.linspace(vmin, vmax, 5)
-        tickvals = (ticks - vmin) / max(vmax - vmin, 1e-9)
-        figure.update_xaxes(
-            visible=True,
-            range=display_range,
-            tickmode="array",
-            tickvals=tickvals,
-            ticktext=[f"{value:.2f}" for value in ticks],
-            title="gOSI",
-            showgrid=False,
-        )
-        figure.update_yaxes(
-            visible=True,
-            range=display_range,
-            showticklabels=False,
-            ticks="",
-            title=" ",
-            showgrid=False,
-            zeroline=False,
-        )
-    else:
-        figure.update_xaxes(
-            visible=True,
-            range=display_range,
-            showticklabels=False,
-            ticks="",
-            title="",
-            showgrid=False,
-            zeroline=False,
-        )
-        figure.update_yaxes(
-            visible=True,
-            range=display_range,
-            tickmode="array",
-            tickvals=centers,
-            ticktext=trace_groups,
-            tickfont=dict(size=10),
-            ticks="",
-            title="",
-            showgrid=False,
-            zeroline=False,
-        )
-    figure.update_xaxes(automargin=False)
-    figure.update_yaxes(automargin=False)
-    animation_controls: list[dict] = []
-    if ranked:
-        animated_traces = list(range(len(trace_indices)))
-
-        def coordinate_frame(
-            name: str,
-            x_values: np.ndarray,
-            y_values: np.ndarray,
-        ) -> go.Frame:
-            return go.Frame(
-                name=name,
-                traces=animated_traces,
-                data=[
-                    go.Scatter(x=x_values[indices], y=y_values[indices])
-                    for indices in trace_indices
-                ],
-            )
-
-        figure.frames = [
-            coordinate_frame("feature-reference", start_x, start_y),
-            coordinate_frame("feature-ranked", final_x, final_y),
-        ]
-        animation_controls = [
-            dict(
-                type="buttons",
-                direction="left",
-                showactive=False,
-                x=1.0,
-                xanchor="right",
-                y=-0.38,
-                yanchor="top",
-                pad=dict(t=4, r=0),
-                bgcolor="#F3EFF8",
-                bordercolor="#C8BBDD",
-                borderwidth=1,
-                font=dict(size=11, color="#4D3880"),
-                buttons=[
-                    dict(
-                        label="↻ Replay sorting",
-                        method="animate",
-                        args=[
-                            ["feature-reference", "feature-ranked"],
-                            {
-                                "mode": "immediate",
-                                "fromcurrent": False,
-                                "frame": [
-                                    {"duration": 120, "redraw": False},
-                                    {"duration": 900, "redraw": False},
-                                ],
-                                "transition": [
-                                    {"duration": 0},
-                                    {
-                                        "duration": 900,
-                                        "easing": "cubic-in-out",
-                                    },
-                                ],
-                            },
-                        ],
-                    )
-                ],
-            )
-        ]
-    if ranked:
-        margin = dict(l=58, r=28, t=66, b=165)
-    elif dataset == "allen_neuropixels":
-        margin = dict(l=46, r=54, t=26, b=76)
-    else:
-        margin = dict(l=112, r=24, t=26, b=76)
-    figure.update_layout(
-        title=title,
-        shapes=shapes,
-        annotations=[],
-        updatemenus=animation_controls,
-        margin=margin,
-        uirevision=f"feature-sorter:{dataset}:{model}:{arrangement}",
-        legend=dict(
-            orientation="h",
-            yanchor="top",
-            y=-0.17,
-            xanchor="left",
-            x=0,
-            font=dict(size=10),
-        ),
-    )
-    return figure
+        return {
+            "dataset": dataset,
+            "model": model,
+            "method": "",
+            "features": [],
+            "tied": False,
+        }
+    values = pd.to_numeric(frame["signed_attribution"], errors="coerce")
+    return {
+        "dataset": dataset,
+        "model": model,
+        "method": dataset_model_label(str(model), dataset),
+        "tied": values.nunique(dropna=True) <= 1,
+        "features": [
+            {
+                "feature_index": int(row.feature_index),
+                "rank": int(row.attribution_rank),
+                "signed_attribution": float(row.signed_attribution),
+            }
+            for row in frame.itertuples(index=False)
+        ],
+    }
 
 
 def trial_frame(dataset: str, models: Sequence[str] | None) -> pd.DataFrame:
@@ -2067,7 +1663,7 @@ def trial_detection_figure(dataset: str, models: Sequence[str] | None) -> go.Fig
     fig.update_layout(
         title="Corrupted-trial detection"
     )
-    fig.update_xaxes(title="ROC-AUC from negative trial value")
+    fig.update_xaxes(title="Detection ROC-AUC")
     fig.update_yaxes(title="", showgrid=False)
     return figure_layout(fig, height=max(430, 25 * len(frame) + 145))
 
@@ -2300,7 +1896,7 @@ def trial_retrain_figures() -> tuple[go.Figure, go.Figure, go.Figure, pd.DataFra
     return removal, relation, historical_fig, round_numeric(table)
 
 
-def historical_trajectory_figure() -> go.Figure:
+def historical_trajectory_figure(*, stacked: bool = False) -> go.Figure:
     frame = trial_historical_trajectories.copy()
     current_r2 = float(frame["current_only_r2"].iloc[0])
     historical_r2 = float(frame["historical_selected_r2"].iloc[0])
@@ -2321,12 +1917,20 @@ def historical_trajectory_figure() -> go.Figure:
             2.5,
         ),
     ]
-    fig = make_subplots(
-        rows=1,
-        cols=3,
-        horizontal_spacing=0.045,
-        subplot_titles=[panel[2] for panel in panels],
-    )
+    if stacked:
+        fig = make_subplots(
+            rows=3,
+            cols=1,
+            vertical_spacing=0.075,
+            subplot_titles=[panel[2] for panel in panels],
+        )
+    else:
+        fig = make_subplots(
+            rows=1,
+            cols=3,
+            horizontal_spacing=0.045,
+            subplot_titles=[panel[2] for panel in panels],
+        )
 
     direction_labels = dict(zip(DIRECTION_LEGEND_ORDER, DIRECTION_LEGEND_LABELS))
     for direction_rank, direction_index in enumerate(DIRECTION_LEGEND_ORDER):
@@ -2335,6 +1939,8 @@ def historical_trajectory_figure() -> go.Figure:
         for panel_index, (x_column, y_column, _title, opacity, width) in enumerate(
             panels, start=1
         ):
+            subplot_row = panel_index if stacked else 1
+            subplot_col = 1 if stacked else panel_index
             x_values: list[object] = []
             y_values: list[object] = []
             hover_values: list[list[object]] = []
@@ -2363,7 +1969,7 @@ def historical_trajectory_figure() -> go.Figure:
                     name=direction_label,
                     legendgroup=f"direction-{direction_index}",
                     legendrank=direction_rank,
-                    showlegend=panel_index == 1,
+                    showlegend=False,
                     opacity=opacity,
                     line=dict(color=DIRECTION_PALETTE[direction_index], width=width),
                     customdata=hover_values,
@@ -2373,8 +1979,8 @@ def historical_trajectory_figure() -> go.Figure:
                         "Time bin=%{customdata[2]}<br>x=%{x:.3f}<br>y=%{y:.3f}<extra></extra>"
                     ),
                 ),
-                row=1,
-                col=panel_index,
+                row=subplot_row,
+                col=subplot_col,
             )
 
     first_points = (
@@ -2383,6 +1989,8 @@ def historical_trajectory_figure() -> go.Figure:
     for panel_index, (x_column, y_column, _title, _opacity, _width) in enumerate(
         panels, start=1
     ):
+        subplot_row = panel_index if stacked else 1
+        subplot_col = 1 if stacked else panel_index
         fig.add_trace(
             go.Scatter(
                 x=[float(first_points[x_column].mean())],
@@ -2392,8 +2000,8 @@ def historical_trajectory_figure() -> go.Figure:
                 showlegend=False,
                 hovertemplate="Mean trajectory origin<extra></extra>",
             ),
-            row=1,
-            col=panel_index,
+            row=subplot_row,
+            col=subplot_col,
         )
 
     x_values = pd.concat(
@@ -2409,6 +2017,8 @@ def historical_trajectory_figure() -> go.Figure:
     x_range = [float(x_values.min() - 0.06 * x_span), float(x_values.max() + 0.06 * x_span)]
     y_range = [float(y_values.min() - 0.06 * y_span), float(y_values.max() + 0.06 * y_span)]
     for panel_index in range(1, 4):
+        subplot_row = panel_index if stacked else 1
+        subplot_col = 1 if stacked else panel_index
         x_axis_id = "x" if panel_index == 1 else f"x{panel_index}"
         fig.update_xaxes(
             range=x_range,
@@ -2416,8 +2026,8 @@ def historical_trajectory_figure() -> go.Figure:
             zeroline=False,
             showticklabels=False,
             ticks="",
-            row=1,
-            col=panel_index,
+            row=subplot_row,
+            col=subplot_col,
         )
         fig.update_yaxes(
             range=y_range,
@@ -2427,24 +2037,15 @@ def historical_trajectory_figure() -> go.Figure:
             ticks="",
             scaleanchor=x_axis_id,
             scaleratio=1,
-            row=1,
-            col=panel_index,
+            row=subplot_row,
+            col=subplot_col,
         )
 
-    figure_layout(fig, height=510, legend_below=True)
+    figure_layout(fig, height=930 if stacked else 480)
     fig.update_layout(
         title="Held-out trajectories · RNN",
-        margin=dict(l=28, r=28, t=76, b=118),
-        legend=dict(
-            orientation="h",
-            yanchor="top",
-            y=-0.10,
-            xanchor="center",
-            x=0.5,
-            title="Reach direction",
-            traceorder="normal",
-            font=dict(size=11),
-        ),
+        margin=dict(l=24, r=24, t=76 if not stacked else 68, b=24),
+        showlegend=False,
     )
     fig.for_each_annotation(
         lambda annotation: annotation.update(font=dict(size=12, color=TEXT_COLOR))
@@ -2452,6 +2053,29 @@ def historical_trajectory_figure() -> go.Figure:
     return fig
 
 
+def historical_direction_legend() -> html.Div:
+    labels = dict(zip(DIRECTION_LEGEND_ORDER, DIRECTION_LEGEND_LABELS))
+    return html.Div(
+        [
+            html.Span("Reach direction", className="trajectory-legend-title"),
+            *[
+                html.Span(
+                    [
+                        html.Span(
+                            className="trajectory-legend-swatch",
+                            style={"backgroundColor": DIRECTION_PALETTE[index]},
+                        ),
+                        labels[index],
+                    ],
+                    className="trajectory-legend-item",
+                )
+                for index in DIRECTION_LEGEND_ORDER
+            ],
+        ],
+        className="trajectory-legend",
+    )
+
+
 def condition_sort_key(value: object) -> tuple[int, float | str]:
     try:
         return (0, float(value))
@@ -2519,7 +2143,13 @@ def add_latent_color_columns(df: pd.DataFrame, dataset: str, color_mode: str) ->
     return out
 
 
-def latent_space_figure(dataset: str, model: str | None, color_mode: str) -> go.Figure:
+def latent_space_figure(
+    dataset: str,
+    model: str | None,
+    color_mode: str,
+    *,
+    stacked: bool = False,
+) -> go.Figure:
     if dataset == "mc_pacman":
         return empty_figure(
             "Cross-recording consistency is not available for this dataset.",
@@ -2550,7 +2180,7 @@ def latent_space_figure(dataset: str, model: str | None, color_mode: str) -> go.
         trajectories["color_value"] = pd.Series(dtype=str)
 
     sessions = list(dict.fromkeys(samples["session_label"].astype(str)))
-    columns = 2 if len(sessions) > 1 else 1
+    columns = 1 if stacked else (2 if len(sessions) > 1 else 1)
     rows = int(np.ceil(len(sessions) / columns))
     fig = make_subplots(
         rows=rows,
@@ -2697,7 +2327,7 @@ def latent_space_figure(dataset: str, model: str | None, color_mode: str) -> go.
         title += f" · R² = {float(score.iloc[0]):.3f}"
     fig.update_layout(
         title=title,
-        height=700 if rows > 1 else 500,
+        height=(max(520, 300 * rows + 110) if stacked else (700 if rows > 1 else 500)),
         paper_bgcolor="#FFFFFF",
         plot_bgcolor="#FFFFFF",
         margin=dict(l=8, r=8, t=72, b=88),
@@ -2711,11 +2341,63 @@ def latent_space_figure(dataset: str, model: str | None, color_mode: str) -> go.
             entrywidth=46,
             entrywidthmode="pixels",
         ),
+        showlegend=not stacked,
     )
     fig.for_each_annotation(lambda annotation: annotation.update(font=dict(size=12, color="#526171")))
     return fig
 
 
+def latent_mobile_legend(dataset: str, color_mode: str) -> html.Div:
+    frame = latent_samples[latent_samples["dataset"].astype(str).eq(dataset)].copy()
+    frame = add_latent_color_columns(frame, dataset, color_mode)
+    label = condition_axis_label(dataset, color_mode)
+    if dataset == "ratinabox":
+        colors = [RATINABOX_SCALE[0][1], RATINABOX_SCALE[len(RATINABOX_SCALE) // 2][1], RATINABOX_SCALE[-1][1]]
+        return html.Div(
+            [
+                html.Span(label, className="latent-mobile-legend-title"),
+                *[
+                    html.Span(
+                        className="latent-mobile-legend-dot",
+                        style={"backgroundColor": color},
+                    )
+                    for color in colors
+                ],
+            ],
+            className="latent-mobile-legend",
+        )
+
+    values = sorted(frame["color_value"].dropna().unique(), key=condition_sort_key)
+    if dataset == "monkey":
+        colors = {
+            value: DIRECTION_PALETTE[int(value) % len(DIRECTION_PALETTE)]
+            for value in values
+        }
+    elif dataset == "speech":
+        colors = {value: SPEECH_PALETTE.get(value, "#777777") for value in values}
+    else:
+        colors = {value: ALLEN_PALETTE.get(value, "#777777") for value in values}
+    return html.Div(
+        [
+            html.Span(label, className="latent-mobile-legend-title"),
+            *[
+                html.Span(
+                    [
+                        html.Span(
+                            className="latent-mobile-legend-dot",
+                            style={"backgroundColor": colors[value]},
+                        ),
+                        condition_label(dataset, value, color_mode),
+                    ],
+                    className="latent-mobile-legend-item",
+                )
+                for value in values
+            ],
+        ],
+        className="latent-mobile-legend",
+    )
+
+
 def consistency_frame(dataset: str, models: Sequence[str] | None) -> pd.DataFrame:
     frame = filter_models(active_rows(consistency), models)
     frame = frame[frame["dataset"].astype(str) == str(dataset)].copy()
@@ -2755,7 +2437,7 @@ def consistency_figures(
         )
     )
     bar_fig.update_layout(title="Latent consistency")
-    bar_fig.update_xaxes(title="Latent-consistency R²", range=[0, 1.02])
+    bar_fig.update_xaxes(title="Consistency R²", range=[0, 1.02])
     bar_fig.update_yaxes(title="", showgrid=False)
     figure_layout(bar_fig, height=max(400, 27 * len(bar) + 145))
     columns = ["method", "latent_consistency_r2"]
@@ -3021,7 +2703,17 @@ app.layout = html.Div(
                                 ],
                                 className="inline-controls",
                             ),
-                            graph_box("latent-space", "Aligned latent representations for each recording.", class_name="latent-graph"),
+                            graph_box(
+                                "latent-space",
+                                "Aligned latent representations for each recording.",
+                                class_name="latent-graph latent-space-desktop",
+                            ),
+                            graph_box(
+                                "latent-space-mobile",
+                                "Aligned latent representations stacked for narrow screens.",
+                                class_name="latent-graph latent-space-mobile",
+                            ),
+                            html.Div(id="latent-mobile-legend"),
                             html.Div(
                                 [
                                     graph_box("consistency-bars", "Latent-consistency R-squared for the selected dataset."),
@@ -3050,51 +2742,34 @@ app.layout = html.Div(
                             "Feature-level attribution",
                             html.Div(
                                 [
-                                    html.Div(
-                                        [
-                                            html.Label("Method", htmlFor="feature-method"),
-                                            dcc.Dropdown(id="feature-method", clearable=False),
-                                        ],
-                                        className="control",
-                                    ),
-                                    html.Div(
-                                        [
-                                            html.Label("Feature view", htmlFor="feature-arrangement"),
-                                            dcc.RadioItems(
-                                                id="feature-arrangement",
-                                                options=[
-                                                    {
-                                                        "label": "Reference annotation",
-                                                        "value": "reference",
-                                                    },
-                                                    {
-                                                        "label": "Signed SHAP ranking",
-                                                        "value": "ranked",
-                                                    },
-                                                ],
-                                                value="ranked",
-                                                inline=True,
-                                                className="arrangement-toggle",
-                                            ),
-                                        ],
-                                        className="control",
-                                    ),
+                                    html.Label("Method", htmlFor="feature-method"),
+                                    dcc.Dropdown(id="feature-method", clearable=False),
                                 ],
-                                className="inline-controls",
+                                className="control feature-method-control",
                             ),
-                            html.Div(id="feature-selection-detail", className="feature-selection-detail"),
+                            dcc.Store(id="feature-story-raster-data"),
+                            dcc.Store(id="feature-story-attribution-data"),
                             html.Div(
-                                [
-                                    graph_box(
-                                        "feature-raster",
-                                        "Example neural activity raster ordered by reference annotation.",
-                                    ),
-                                    graph_box(
-                                        "feature-rank-plot",
-                                        "Interactive input-feature views showing reference annotations and signed Kernel SHAP score versus rank.",
-                                    ),
-                                ],
-                                className="chart-grid feature-story-grid",
+                                id="feature-story-viz",
+                                className="feature-story-viz",
+                                role="group",
+                                tabIndex=0,
+                                **{
+                                    "aria-label": (
+                                        "Linked example neural activity and signed "
+                                        "Kernel SHAP feature ranking."
+                                    )
+                                },
+                            ),
+                            html.Span(
+                                id="feature-story-render-token",
+                                className="feature-story-render-token",
+                            ),
+                            html.Div(
+                                "Hover or tap a raster row or attribution dot to trace the same feature.",
+                                id="feature-selection-detail",
+                                className="feature-selection-detail",
+                                **{"aria-live": "polite"},
                             ),
                             html.Div(
                                 [
@@ -3103,7 +2778,7 @@ app.layout = html.Div(
                                 ],
                                 className="download-grid panel-downloads",
                             ),
-                            subtitle="Explore each input feature in its reference context, then replay how the features sort into the signed Kernel SHAP ranking.",
+                            subtitle="Follow each input feature from an example trial to its signed Kernel SHAP rank.",
                             class_name="axis-feature",
                         ),
                         panel(
@@ -3173,8 +2848,14 @@ app.layout = html.Div(
                             graph_box(
                                 "trial-historical-trajectories",
                                 "Held-out RNN target-session trajectories for ground truth, current-session training, and nonnegative-valued historical-trial selection.",
-                                class_name="historical-trajectory-graph",
+                                class_name="historical-trajectory-graph historical-trajectory-desktop",
                             ),
+                            graph_box(
+                                "trial-historical-trajectories-mobile",
+                                "Held-out RNN target-session trajectories, stacked for narrow screens.",
+                                class_name="historical-trajectory-graph historical-trajectory-mobile",
+                            ),
+                            historical_direction_legend(),
                             details_table("View data", dataframe_table("trial-retrain-table", page_size=17)),
                             html.Div(
                                 [
@@ -3333,6 +3014,8 @@ def update_consistency_selector(dataset: str, models: list[str] | None, current:
 
 @app.callback(
     Output("latent-space", "figure"),
+    Output("latent-space-mobile", "figure"),
+    Output("latent-mobile-legend", "children"),
     Output("consistency-bars", "figure"),
     Output("consistency-heatmap", "figure"),
     Output("consistency-table", "columns"),
@@ -3350,8 +3033,11 @@ def update_consistency(
 ):
     dataset = dataset or DATASETS[0]
     bars, heatmap, table = consistency_figures(dataset, models)
+    resolved_color_mode = color_mode or "condition"
     return (
-        latent_space_figure(dataset, method, color_mode or "condition"),
+        latent_space_figure(dataset, method, resolved_color_mode),
+        latent_space_figure(dataset, method, resolved_color_mode, stacked=True),
+        latent_mobile_legend(dataset, resolved_color_mode),
         bars,
         heatmap,
         column_defs(table.columns),
@@ -3396,70 +3082,48 @@ def update_feature_selector(
 
 
 @app.callback(
-    Output("feature-raster", "figure"),
+    Output("feature-story-raster-data", "data"),
     Input("dataset-filter", "value"),
 )
-def update_feature_raster(dataset: str):
-    return feature_raster_figure(dataset or DATASETS[0])
+def update_feature_story_raster(dataset: str):
+    return feature_story_raster_payload(dataset or DATASETS[0])
 
 
 @app.callback(
-    Output("feature-rank-plot", "figure"),
-    Output("feature-rank-plot", "clickData"),
+    Output("feature-story-attribution-data", "data"),
     Input("dataset-filter", "value"),
     Input("feature-method", "value"),
-    Input("feature-arrangement", "value"),
 )
-def update_feature_attributions(
+def update_feature_story_attribution(
     dataset: str,
     method: str | None,
-    arrangement: str,
 ):
-    sorter = feature_sorter_figure(
-        dataset or DATASETS[0], method, arrangement or "ranked"
-    )
-    return sorter, None
+    return feature_story_attribution_payload(dataset or DATASETS[0], method)
 
 
-@app.callback(
-    Output("feature-selection-detail", "children"),
-    Input("feature-rank-plot", "clickData"),
-    Input("dataset-filter", "value"),
-    Input("feature-method", "value"),
-    Input("feature-arrangement", "value"),
+app.clientside_callback(
+    """
+    function(rasterData, attributionData, activeTab) {
+        if (!rasterData || !attributionData ||
+            activeTab !== "feature" ||
+            rasterData.dataset !== attributionData.dataset ||
+            !window.benchdashFeatureStory) {
+            return window.dash_clientside.no_update;
+        }
+        window.benchdashFeatureStory.schedule(
+            "feature-story-viz",
+            "feature-selection-detail",
+            rasterData,
+            attributionData
+        );
+        return `${rasterData.dataset}:${attributionData.model}:feature`;
+    }
+    """,
+    Output("feature-story-render-token", "children"),
+    Input("feature-story-raster-data", "data"),
+    Input("feature-story-attribution-data", "data"),
+    Input("tabs", "value"),
 )
-def update_feature_selection_detail(
-    click_data: dict | None,
-    dataset: str,
-    method: str | None,
-    arrangement: str,
-):
-    instruction = (
-        "Each dot is one input feature. In the ranked view, use ↻ Replay sorting "
-        "to follow every feature into its signed Kernel SHAP rank."
-    )
-    if not click_data or not click_data.get("points"):
-        return instruction
-    custom = click_data["points"][0].get("customdata")
-    if not custom or len(custom) < 6:
-        return instruction
-    frame = feature_attribution_frame(dataset or DATASETS[0], method)
-    feature_index = int(float(custom[0]))
-    selected = frame[
-        frame["feature_index"].astype(int).eq(feature_index)
-    ]
-    if selected.empty:
-        return instruction
-    row = selected.iloc[0]
-    detail = f"Feature index {feature_index}"
-    if arrangement == "ranked" and frame["signed_attribution"].nunique(dropna=True) > 1:
-        detail += f" · rank {int(row['attribution_rank'])} of {len(frame)}"
-    detail += f" · signed Kernel SHAP {float(row['signed_attribution']):+.5f}"
-    if dataset == "allen_neuropixels" and pd.notna(row["validation_value"]):
-        detail += f" · gOSI {float(row['validation_value']):.4f}"
-    else:
-        detail += f" · {row['feature_group']}"
-    return detail
 
 
 @app.callback(
@@ -3512,6 +3176,7 @@ def update_feature(dataset: str, models: list[str] | None):
     Output("trial-recovery", "figure"),
     Output("trial-historical", "figure"),
     Output("trial-historical-trajectories", "figure"),
+    Output("trial-historical-trajectories-mobile", "figure"),
     Output("trial-retrain-table", "columns"),
     Output("trial-retrain-table", "data"),
     Input("dataset-filter", "value"),
@@ -3534,6 +3199,7 @@ def update_trial(dataset: str, models: list[str] | None):
         relation,
         historical,
         historical_trajectory_figure(),
+        historical_trajectory_figure(stacked=True),
         column_defs(retrain_table.columns),
         records(retrain_table),
     )

assets/feature_story.js

@@ -0,0 +1,849 @@
+(function () {
+  "use strict";
+
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  const GROUP_COLORS = {
+    "Recorded": "#0072B2",
+    "Synthetic control": "#BDBDBD",
+    "Place": "#CC79A7",
+    "Head direction": "#56B4E9",
+    "Speed": "#E69F00",
+  };
+  const DATASET_RECORDED_COLORS = {
+    monkey: "#0072B2",
+    speech: "#009E73",
+    mc_pacman: "#D55E00",
+  };
+  const TEXT = "#17202A";
+  const MUTED = "#607080";
+  const GRID = "#E7ECEF";
+  const DARK_GRID = "#AAB6BE";
+
+  function clamp(value, low, high) {
+    return Math.max(low, Math.min(high, value));
+  }
+
+  function svgElement(tag, attributes, text) {
+    const node = document.createElementNS(SVG_NS, tag);
+    Object.entries(attributes || {}).forEach(([name, value]) => {
+      node.setAttribute(name, String(value));
+    });
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+
+  function htmlElement(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+
+  function mixColor(start, end, fraction) {
+    const t = clamp(fraction, 0, 1);
+    const parse = (hex) => [
+      parseInt(hex.slice(1, 3), 16),
+      parseInt(hex.slice(3, 5), 16),
+      parseInt(hex.slice(5, 7), 16),
+    ];
+    const a = parse(start);
+    const b = parse(end);
+    const values = a.map((value, index) => Math.round(value + (b[index] - value) * t));
+    return `rgb(${values[0]}, ${values[1]}, ${values[2]})`;
+  }
+
+  function gosiColor(value, low, high) {
+    const span = Math.max(high - low, 1e-9);
+    return mixColor("#DCE7EC", "#245B78", (value - low) / span);
+  }
+
+  function featureColor(dataset, feature, validationDomain) {
+    if (dataset === "allen_neuropixels") {
+      return gosiColor(feature.validation_value || 0, validationDomain[0], validationDomain[1]);
+    }
+    if (feature.group === "Recorded" && DATASET_RECORDED_COLORS[dataset]) {
+      return DATASET_RECORDED_COLORS[dataset];
+    }
+    return GROUP_COLORS[feature.group] || "#6A51A3";
+  }
+
+  function numericTicks(low, high, count) {
+    if (!Number.isFinite(low) || !Number.isFinite(high)) return [0];
+    if (Math.abs(high - low) < 1e-12) return [low];
+    return Array.from({ length: count }, (_, index) => low + (high - low) * index / (count - 1));
+  }
+
+  function integerTicks(maximum) {
+    const max = Math.max(0, Math.round(maximum));
+    if (max <= 4) return Array.from({ length: max + 1 }, (_, index) => index);
+    const candidates = [0, Math.round(max / 3), Math.round(2 * max / 3), max];
+    return [...new Set(candidates)];
+  }
+
+  function formatScore(value) {
+    if (Math.abs(value) >= 0.1) return value.toFixed(2).replace(/\.?0+$/, "");
+    if (Math.abs(value) >= 0.01) return value.toFixed(3).replace(/\.?0+$/, "");
+    return value.toPrecision(2).replace("e+", "e");
+  }
+
+  function signedScore(value) {
+    const prefix = value > 0 ? "+" : "";
+    return `${prefix}${Number(value).toPrecision(4).replace("e+", "e")}`;
+  }
+
+  function bezier(start, controlOne, controlTwo, end, fraction) {
+    const t = clamp(fraction, 0, 1);
+    const u = 1 - t;
+    return {
+      x: u * u * u * start.x + 3 * u * u * t * controlOne.x +
+        3 * u * t * t * controlTwo.x + t * t * t * end.x,
+      y: u * u * u * start.y + 3 * u * u * t * controlOne.y +
+        3 * u * t * t * controlTwo.y + t * t * t * end.y,
+    };
+  }
+
+  function groupSpans(features) {
+    const spans = [];
+    features.forEach((feature, index) => {
+      const previous = spans[spans.length - 1];
+      if (!previous || previous.group !== feature.group) {
+        spans.push({ group: feature.group, first: index, last: index });
+      } else {
+        previous.last = index;
+      }
+    });
+    return spans;
+  }
+
+  function buildState(container, detailNode, rasterData, attributionData) {
+    const attribution = new Map(
+      attributionData.features.map((feature) => [Number(feature.feature_index), feature])
+    );
+    const validationValues = rasterData.features
+      .map((feature) => Number(feature.validation_value))
+      .filter(Number.isFinite);
+    const validationDomain = validationValues.length
+      ? [Math.min(...validationValues), Math.max(...validationValues)]
+      : [0, 1];
+    const features = rasterData.features.map((feature, row) => {
+      const featureIndex = Number(feature.feature_index);
+      const score = attribution.get(featureIndex);
+      if (!score) throw new Error(`Missing attribution for feature ${featureIndex}`);
+      return {
+        ...feature,
+        ...score,
+        feature_index: featureIndex,
+        row,
+        color: featureColor(rasterData.dataset, feature, validationDomain),
+      };
+    });
+    if (features.length !== attribution.size) {
+      throw new Error("Raster and attribution feature sets differ");
+    }
+
+    container.replaceChildren();
+    const visual = htmlElement("div", "feature-story-visual");
+    const canvas = htmlElement("canvas", "feature-story-canvas");
+    canvas.setAttribute("aria-hidden", "true");
+    const svg = svgElement("svg", {
+      class: "feature-story-overlay",
+      role: "img",
+      "aria-label": "Feature activity rows linked to signed Kernel SHAP ranks",
+    });
+    svg.append(
+      svgElement("title", {}, "Feature activity linked to signed Kernel SHAP ranking"),
+      svgElement(
+        "desc",
+        {},
+        "Each feature dot moves from its row in the example activity raster to its signed attribution rank."
+      )
+    );
+    visual.append(canvas, svg);
+
+    const playback = htmlElement("div", "feature-story-playback");
+    const sourceLabel = htmlElement("span", "feature-story-playback-label", "Example-trial order");
+    sourceLabel.classList.add("source");
+    const slider = htmlElement("input", "feature-story-slider");
+    slider.type = "range";
+    slider.min = "0";
+    slider.max = "1";
+    slider.step = "0.01";
+    slider.value = "1";
+    slider.setAttribute("aria-label", "Feature mapping progress from example-trial order to SHAP rank");
+    const targetLabel = htmlElement(
+      "span",
+      "feature-story-playback-label",
+      attributionData.tied ? "Feature order" : "SHAP rank"
+    );
+    targetLabel.classList.add("target");
+    const replay = htmlElement("button", "feature-story-replay", "Replay mapping");
+    replay.type = "button";
+    playback.append(sourceLabel, slider, targetLabel, replay);
+    container.append(visual, playback);
+
+    const state = {
+      signature: `${rasterData.dataset}:${attributionData.model}`,
+      container,
+      detailNode,
+      rasterData,
+      attributionData,
+      validationDomain,
+      features,
+      visual,
+      canvas,
+      svg,
+      slider,
+      replay,
+      progress: 1,
+      hovered: null,
+      locked: null,
+      keyboardRow: 0,
+      positions: new Map(),
+      circles: new Map(),
+      animationFrame: null,
+      resizeObserver: null,
+      abortController: new AbortController(),
+      geometry: null,
+    };
+    container.__featureStory = state;
+    return state;
+  }
+
+  function addText(svg, x, y, text, options) {
+    const settings = options || {};
+    const node = svgElement("text", {
+      x,
+      y,
+      fill: settings.fill || TEXT,
+      "font-size": settings.size || 11,
+      "font-weight": settings.weight || 400,
+      "text-anchor": settings.anchor || "start",
+      "dominant-baseline": settings.baseline || "alphabetic",
+      class: settings.className || "",
+    }, text);
+    svg.appendChild(node);
+    return node;
+  }
+
+  function computeGeometry(state, width) {
+    const mobile = width < 720;
+    if (mobile) {
+      const rasterLabelWidth = state.rasterData.dataset === "allen_neuropixels" ? 10 : 74;
+      const raster = {
+        x: rasterLabelWidth,
+        y: 54,
+        width: Math.max(120, width - rasterLabelWidth - 18),
+        height: 244,
+      };
+      const chart = {
+        x: 46,
+        y: 394,
+        width: Math.max(130, width - 92),
+        height: 254,
+      };
+      return { mobile, width, height: 708, raster, chart };
+    }
+    const rasterLabelWidth = state.rasterData.dataset === "allen_neuropixels" ? 18 : 92;
+    const chartX = Math.round(width * 0.59);
+    const raster = {
+      x: rasterLabelWidth,
+      y: 54,
+      width: Math.max(220, chartX - rasterLabelWidth - 64),
+      height: 438,
+    };
+    const chart = {
+      x: chartX,
+      y: 54,
+      width: Math.max(220, width - chartX - 52),
+      height: 438,
+    };
+    return { mobile, width, height: 552, raster, chart };
+  }
+
+  function drawRaster(state) {
+    const { raster } = state.geometry;
+    const canvas = state.canvas;
+    const ratio = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = Math.round(state.geometry.width * ratio);
+    canvas.height = Math.round(state.geometry.height * ratio);
+    canvas.style.width = `${state.geometry.width}px`;
+    canvas.style.height = `${state.geometry.height}px`;
+    const context = canvas.getContext("2d", { alpha: false });
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.fillStyle = "#FFFFFF";
+    context.fillRect(0, 0, state.geometry.width, state.geometry.height);
+
+    const rows = state.features.length;
+    const columns = state.rasterData.time_ms.length;
+    const rowHeight = raster.height / Math.max(rows, 1);
+    const columnWidth = raster.width / Math.max(columns, 1);
+    const maximum = Math.max(Number(state.rasterData.max_count), 1);
+    state.rasterData.counts.forEach((row, rowIndex) => {
+      row.forEach((value, columnIndex) => {
+        if (!value) return;
+        context.fillStyle = mixColor("#F8FAFB", "#263238", Number(value) / maximum);
+        const x0 = raster.x + columnIndex * columnWidth;
+        const x1 = raster.x + (columnIndex + 1) * columnWidth;
+        const y0 = raster.y + rowIndex * rowHeight;
+        const y1 = raster.y + (rowIndex + 1) * rowHeight;
+        context.fillRect(
+          Math.floor(x0),
+          Math.floor(y0),
+          Math.max(1, Math.ceil(x1) - Math.floor(x0)),
+          Math.max(1, Math.ceil(y1) - Math.floor(y0))
+        );
+      });
+      context.fillStyle = state.features[rowIndex].color;
+      context.fillRect(
+        raster.x + raster.width + 3,
+        raster.y + rowIndex * rowHeight,
+        5,
+        Math.max(1, rowHeight)
+      );
+    });
+    context.strokeStyle = "#CFD8DE";
+    context.lineWidth = 1;
+    context.strokeRect(raster.x - 0.5, raster.y - 0.5, raster.width + 1, raster.height + 1);
+  }
+
+  function drawCountLegend(state, y) {
+    const { svg, geometry } = state;
+    let ticks = integerTicks(state.rasterData.max_count);
+    if (geometry.width < 300 && ticks.length > 2) {
+      ticks = [0, Math.round(state.rasterData.max_count)];
+    }
+    const maximum = Math.max(Number(state.rasterData.max_count), 1);
+    const itemWidth = geometry.mobile ? 32 : 38;
+    const labelWidth = geometry.width < 300 ? 50 : 58;
+    const width = labelWidth + ticks.length * itemWidth;
+    const start = Math.max(geometry.raster.x, geometry.raster.x + geometry.raster.width - width);
+    addText(svg, start, y, "Count / bin", { size: 9, fill: MUTED, weight: 600 });
+    ticks.forEach((tick, index) => {
+      const x = start + labelWidth + index * itemWidth;
+      svg.appendChild(svgElement("rect", {
+        x,
+        y: y - 9,
+        width: 9,
+        height: 9,
+        rx: 1,
+        fill: mixColor("#F8FAFB", "#263238", tick / maximum),
+        stroke: "#CAD3D9",
+        "stroke-width": 0.6,
+      }));
+      addText(svg, x + 13, y, String(tick), { size: 9, fill: MUTED });
+    });
+  }
+
+  function drawReferenceLabels(state) {
+    const { svg, geometry, features } = state;
+    if (state.rasterData.dataset === "allen_neuropixels") {
+      addText(svg, geometry.raster.x + geometry.raster.width + 10, geometry.raster.y - 7, "gOSI", {
+        size: 9,
+        fill: MUTED,
+        anchor: "end",
+      });
+      return;
+    }
+    const rowHeight = geometry.raster.height / Math.max(features.length, 1);
+    groupSpans(features).forEach((span) => {
+      const y = geometry.raster.y + ((span.first + span.last + 1) / 2) * rowHeight;
+      addText(svg, geometry.raster.x - 8, y, span.group, {
+        size: geometry.mobile ? 9 : 10,
+        fill: MUTED,
+        anchor: "end",
+        baseline: "middle",
+      });
+    });
+  }
+
+  function drawFeatureLegend(state, y) {
+    const { svg, geometry, features } = state;
+    let x = geometry.chart.x;
+    if (state.rasterData.dataset === "allen_neuropixels") {
+      addText(svg, x, y, "gOSI", { size: 9, fill: MUTED, weight: 600 });
+      x += 31;
+      const values = numericTicks(state.validationDomain[0], state.validationDomain[1], 3);
+      values.forEach((value) => {
+        svg.appendChild(svgElement("circle", {
+          cx: x + 5,
+          cy: y - 3,
+          r: 4,
+          fill: gosiColor(value, state.validationDomain[0], state.validationDomain[1]),
+          stroke: "#FFFFFF",
+          "stroke-width": 0.6,
+        }));
+        addText(svg, x + 12, y, value.toFixed(2), { size: 9, fill: MUTED });
+        x += geometry.mobile ? 50 : 58;
+      });
+      return;
+    }
+    const groups = [...new Map(features.map((feature) => [feature.group, feature.color])).entries()];
+    groups.forEach(([group, color]) => {
+      svg.appendChild(svgElement("circle", {
+        cx: x + 4,
+        cy: y - 3,
+        r: 4,
+        fill: color,
+        stroke: "#FFFFFF",
+        "stroke-width": 0.6,
+      }));
+      addText(svg, x + 12, y, group, { size: 9, fill: MUTED });
+      x += 18 + group.length * 5.3;
+    });
+  }
+
+  function drawAxes(state) {
+    const { svg, geometry, features } = state;
+    const { raster, chart } = geometry;
+    addText(svg, raster.x, 20, "Example activity · one trial", { size: 13, weight: 700 });
+    drawCountLegend(state, 39);
+    drawReferenceLabels(state);
+
+    const time = state.rasterData.time_ms.map(Number);
+    const timeLow = time[0];
+    const timeHigh = time[time.length - 1];
+    const timeTicks = [timeLow];
+    if (timeLow < 0 && timeHigh > 0) timeTicks.push(0);
+    if (timeHigh !== timeLow) timeTicks.push(timeHigh);
+    svg.appendChild(svgElement("line", {
+      x1: raster.x,
+      x2: raster.x + raster.width,
+      y1: raster.y + raster.height,
+      y2: raster.y + raster.height,
+      stroke: DARK_GRID,
+      "stroke-width": 1,
+    }));
+    timeTicks.forEach((tick) => {
+      const fraction = (tick - timeLow) / Math.max(timeHigh - timeLow, 1e-9);
+      const x = raster.x + fraction * raster.width;
+      svg.appendChild(svgElement("line", {
+        x1: x,
+        x2: x,
+        y1: raster.y + raster.height,
+        y2: raster.y + raster.height + 4,
+        stroke: DARK_GRID,
+      }));
+      addText(svg, x, raster.y + raster.height + 16, `${Math.round(tick)}`, {
+        size: 9,
+        fill: MUTED,
+        anchor: "middle",
+      });
+    });
+    addText(svg, raster.x + raster.width / 2, raster.y + raster.height + 34, "Time from scoring onset (ms)", {
+      size: 10,
+      fill: MUTED,
+      anchor: "middle",
+    });
+
+    const chartTitleY = geometry.mobile ? 360 : 20;
+    const legendY = geometry.mobile ? 380 : 39;
+    addText(
+      svg,
+      chart.x,
+      chartTitleY,
+      state.attributionData.tied ? "Signed Kernel SHAP values" : "Signed Kernel SHAP ranking",
+      { size: 13, weight: 700 }
+    );
+    drawFeatureLegend(state, legendY);
+
+    const scores = features.map((feature) => Number(feature.signed_attribution));
+    let scoreLow = Math.min(0, ...scores);
+    let scoreHigh = Math.max(0, ...scores);
+    let span = scoreHigh - scoreLow;
+    if (span < 1e-12) span = Math.max(Math.abs(scoreHigh), 1) * 0.1;
+    scoreLow -= span * 0.08;
+    scoreHigh += span * 0.08;
+    state.scoreDomain = [scoreLow, scoreHigh];
+
+    const xTicks = numericTicks(scoreLow, scoreHigh, geometry.mobile ? 3 : 5);
+    xTicks.forEach((tick) => {
+      const x = chart.x + (tick - scoreLow) / (scoreHigh - scoreLow) * chart.width;
+      svg.appendChild(svgElement("line", {
+        x1: x,
+        x2: x,
+        y1: chart.y,
+        y2: chart.y + chart.height,
+        stroke: Math.abs(tick) < span * 0.03 ? DARK_GRID : GRID,
+        "stroke-width": Math.abs(tick) < span * 0.03 ? 1.2 : 0.8,
+      }));
+      addText(svg, x, chart.y + chart.height + 17, formatScore(tick), {
+        size: 9,
+        fill: MUTED,
+        anchor: "middle",
+      });
+    });
+    addText(svg, chart.x + chart.width / 2, chart.y + chart.height + 36, "Signed Kernel SHAP value", {
+      size: 10,
+      fill: MUTED,
+      anchor: "middle",
+    });
+
+    const rankMaximum = features.length;
+    const rankTicks = [...new Set([1, Math.max(1, Math.round(rankMaximum / 2)), rankMaximum])];
+    addText(svg, chart.x + chart.width + 10, chart.y - 10, state.attributionData.tied ? "Feature" : "Rank", {
+      size: 9,
+      fill: MUTED,
+      weight: 600,
+    });
+    rankTicks.forEach((rank) => {
+      const y = chart.y + (rank - 1) / Math.max(rankMaximum - 1, 1) * chart.height;
+      svg.appendChild(svgElement("line", {
+        x1: chart.x + chart.width,
+        x2: chart.x + chart.width + 4,
+        y1: y,
+        y2: y,
+        stroke: DARK_GRID,
+      }));
+      addText(svg, chart.x + chart.width + 8, y, String(rank), {
+        size: 9,
+        fill: MUTED,
+        baseline: "middle",
+      });
+    });
+  }
+
+  function sourcePosition(state, feature) {
+    const { raster } = state.geometry;
+    return {
+      x: raster.x + raster.width + 6,
+      y: raster.y + (feature.row + 0.5) / state.features.length * raster.height,
+    };
+  }
+
+  function targetPosition(state, feature) {
+    const { chart } = state.geometry;
+    const [low, high] = state.scoreDomain;
+    const x = chart.x + (Number(feature.signed_attribution) - low) / Math.max(high - low, 1e-9) * chart.width;
+    const displayedRank = state.attributionData.tied ? feature.row + 1 : Number(feature.rank);
+    const y = chart.y + (displayedRank - 1) / Math.max(state.features.length - 1, 1) * chart.height;
+    return { x, y };
+  }
+
+  function featurePosition(state, feature, progress) {
+    const start = sourcePosition(state, feature);
+    const end = targetPosition(state, feature);
+    const mobile = state.geometry.mobile;
+    const controlOne = mobile
+      ? { x: start.x, y: start.y + (end.y - start.y) * 0.42 }
+      : { x: start.x + (end.x - start.x) * 0.40, y: start.y };
+    const controlTwo = mobile
+      ? { x: end.x, y: end.y - (end.y - start.y) * 0.34 }
+      : { x: end.x - (end.x - start.x) * 0.32, y: end.y };
+    return bezier(start, controlOne, controlTwo, end, progress);
+  }
+
+  function updateConnector(state) {
+    if (!state.connector || !state.rowHighlight) return;
+    const selectedId = state.locked !== null ? state.locked : state.hovered;
+    if (selectedId === null) {
+      state.connector.setAttribute("visibility", "hidden");
+      state.rowHighlight.setAttribute("visibility", "hidden");
+      state.circles.forEach((circle) => {
+        circle.setAttribute("opacity", "0.86");
+        circle.setAttribute("r", circle.dataset.baseRadius);
+      });
+      return;
+    }
+    const feature = state.features.find((item) => item.feature_index === selectedId);
+    if (!feature) return;
+    const start = sourcePosition(state, feature);
+    const current = state.positions.get(selectedId) || targetPosition(state, feature);
+    const mid = state.geometry.mobile
+      ? `C ${start.x} ${(start.y + current.y) / 2}, ${current.x} ${(start.y + current.y) / 2}, ${current.x} ${current.y}`
+      : `C ${(start.x + current.x) / 2} ${start.y}, ${(start.x + current.x) / 2} ${current.y}, ${current.x} ${current.y}`;
+    state.connector.setAttribute("d", `M ${start.x} ${start.y} ${mid}`);
+    state.connector.setAttribute("stroke", feature.color);
+    state.connector.setAttribute("visibility", "visible");
+    const rowHeight = state.geometry.raster.height / state.features.length;
+    state.rowHighlight.setAttribute("x", state.geometry.raster.x);
+    state.rowHighlight.setAttribute("y", state.geometry.raster.y + feature.row * rowHeight);
+    state.rowHighlight.setAttribute("width", state.geometry.raster.width + 9);
+    state.rowHighlight.setAttribute("height", Math.max(rowHeight, 1.5));
+    state.rowHighlight.setAttribute("stroke", feature.color);
+    state.rowHighlight.setAttribute("visibility", "visible");
+    state.circles.forEach((circle, featureId) => {
+      const active = featureId === selectedId;
+      circle.setAttribute("opacity", active ? "1" : "0.16");
+      circle.setAttribute("r", active ? Number(circle.dataset.baseRadius) + 2.2 : circle.dataset.baseRadius);
+    });
+  }
+
+  function updatePositions(state, progress) {
+    state.progress = clamp(progress, 0, 1);
+    state.slider.value = String(state.progress);
+    state.features.forEach((feature) => {
+      const point = featurePosition(state, feature, state.progress);
+      state.positions.set(feature.feature_index, point);
+      const circle = state.circles.get(feature.feature_index);
+      if (circle) {
+        circle.setAttribute("cx", point.x);
+        circle.setAttribute("cy", point.y);
+      }
+    });
+    updateConnector(state);
+  }
+
+  function updateReplayPositions(state, progress) {
+    const globalProgress = clamp(progress, 0, 1);
+    state.progress = globalProgress;
+    state.slider.value = String(globalProgress);
+    state.features.forEach((feature) => {
+      const delay = state.features.length > 1
+        ? feature.row / (state.features.length - 1) * 0.12
+        : 0;
+      const local = clamp((globalProgress - delay) / 0.88, 0, 1);
+      const eased = 1 - Math.pow(1 - local, 3);
+      const point = featurePosition(state, feature, eased);
+      state.positions.set(feature.feature_index, point);
+      const circle = state.circles.get(feature.feature_index);
+      if (circle) {
+        circle.setAttribute("cx", point.x);
+        circle.setAttribute("cy", point.y);
+      }
+    });
+    updateConnector(state);
+  }
+
+  function detailText(state, feature, cell) {
+    const noun = state.rasterData.dataset === "allen_neuropixels" ? "Unit" : "Feature";
+    const parts = [`${noun} ${feature.feature_index}`];
+    if (state.rasterData.dataset === "allen_neuropixels" && Number.isFinite(Number(feature.validation_value))) {
+      parts.push(`gOSI ${Number(feature.validation_value).toFixed(3)}`);
+    } else {
+      parts.push(feature.group);
+    }
+    if (!state.attributionData.tied) parts.push(`rank ${feature.rank} of ${state.features.length}`);
+    parts.push(`signed Kernel SHAP ${signedScore(Number(feature.signed_attribution))}`);
+    if (cell) parts.push(`${Math.round(cell.time)} ms`, `${cell.count} count${cell.count === 1 ? "" : "s"}`);
+    return parts.join(" · ");
+  }
+
+  function selectFeature(state, featureId, cell, lock) {
+    const feature = state.features.find((item) => item.feature_index === featureId);
+    if (!feature) return;
+    if (lock !== undefined) state.locked = lock ? featureId : null;
+    state.hovered = featureId;
+    state.keyboardRow = feature.row;
+    state.detailNode.textContent = detailText(state, feature, cell);
+    updateConnector(state);
+  }
+
+  function clearSelection(state, clearLock) {
+    if (clearLock) state.locked = null;
+    state.hovered = null;
+    if (state.locked === null) {
+      state.detailNode.textContent = "Hover or tap a raster row or attribution dot to trace the same feature.";
+    }
+    updateConnector(state);
+  }
+
+  function rasterCellAt(state, event) {
+    const bounds = state.visual.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const y = event.clientY - bounds.top;
+    const raster = state.geometry.raster;
+    if (x < raster.x || x > raster.x + raster.width || y < raster.y || y > raster.y + raster.height) {
+      return null;
+    }
+    const row = clamp(Math.floor((y - raster.y) / raster.height * state.features.length), 0, state.features.length - 1);
+    const column = clamp(Math.floor((x - raster.x) / raster.width * state.rasterData.time_ms.length), 0, state.rasterData.time_ms.length - 1);
+    return {
+      row,
+      column,
+      time: Number(state.rasterData.time_ms[column]),
+      count: Number(state.rasterData.counts[row][column]),
+    };
+  }
+
+  function replay(state) {
+    if (state.animationFrame !== null) cancelAnimationFrame(state.animationFrame);
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      updatePositions(state, 1);
+      return;
+    }
+    const pause = 130;
+    const duration = 980;
+    const startTime = performance.now();
+    updatePositions(state, 0);
+    const step = (now) => {
+      const elapsed = now - startTime;
+      if (elapsed <= pause) {
+        state.animationFrame = requestAnimationFrame(step);
+        return;
+      }
+      const raw = clamp((elapsed - pause) / duration, 0, 1);
+      updateReplayPositions(state, raw);
+      if (raw < 1) {
+        state.animationFrame = requestAnimationFrame(step);
+      } else {
+        state.animationFrame = null;
+      }
+    };
+    state.animationFrame = requestAnimationFrame(step);
+  }
+
+  function draw(state) {
+    const width = Math.floor(state.container.clientWidth);
+    if (width < 240) return;
+    state.geometry = computeGeometry(state, width);
+    state.visual.style.height = `${state.geometry.height}px`;
+    state.svg.setAttribute("viewBox", `0 0 ${state.geometry.width} ${state.geometry.height}`);
+    state.svg.setAttribute("width", String(state.geometry.width));
+    state.svg.setAttribute("height", String(state.geometry.height));
+    state.svg.replaceChildren(
+      svgElement("title", {}, "Feature activity linked to signed Kernel SHAP ranking"),
+      svgElement("desc", {}, "Hover or tap a feature to trace it from the example activity raster to its signed attribution rank.")
+    );
+    drawRaster(state);
+    drawAxes(state);
+
+    state.rowHighlight = svgElement("rect", {
+      fill: "rgba(255,255,255,0.05)",
+      stroke: "#6A51A3",
+      "stroke-width": 1.2,
+      visibility: "hidden",
+      "pointer-events": "none",
+    });
+    state.svg.appendChild(state.rowHighlight);
+    state.connector = svgElement("path", {
+      fill: "none",
+      stroke: "#6A51A3",
+      "stroke-width": 1.35,
+      opacity: 0.85,
+      visibility: "hidden",
+      "pointer-events": "none",
+    });
+    state.svg.appendChild(state.connector);
+
+    const dotGroup = svgElement("g", { class: "feature-story-dots" });
+    state.svg.appendChild(dotGroup);
+    state.circles = new Map();
+    const baseRadius = state.features.length > 300 ? 2.7 : state.features.length > 140 ? 3.2 : 4.1;
+    state.features.forEach((feature) => {
+      const circle = svgElement("circle", {
+        r: baseRadius,
+        fill: feature.color,
+        stroke: "#FFFFFF",
+        "stroke-width": 0.75,
+        opacity: 0.86,
+        "data-feature-id": feature.feature_index,
+        class: "feature-story-dot",
+      });
+      circle.dataset.baseRadius = String(baseRadius);
+      dotGroup.appendChild(circle);
+      state.circles.set(feature.feature_index, circle);
+    });
+    updatePositions(state, state.progress);
+  }
+
+  function bindInteractions(state) {
+    const signal = state.abortController.signal;
+    state.visual.addEventListener("pointermove", (event) => {
+      if (state.locked !== null) return;
+      const circle = event.target.closest && event.target.closest(".feature-story-dot");
+      if (circle) {
+        selectFeature(state, Number(circle.dataset.featureId), null);
+        return;
+      }
+      const cell = rasterCellAt(state, event);
+      if (cell) {
+        selectFeature(state, state.features[cell.row].feature_index, cell);
+      } else {
+        clearSelection(state, false);
+      }
+    }, { signal });
+    state.visual.addEventListener("pointerleave", () => {
+      if (state.locked === null) clearSelection(state, false);
+    }, { signal });
+    state.visual.addEventListener("click", (event) => {
+      const circle = event.target.closest && event.target.closest(".feature-story-dot");
+      const cell = circle ? null : rasterCellAt(state, event);
+      const featureId = circle
+        ? Number(circle.dataset.featureId)
+        : cell
+          ? state.features[cell.row].feature_index
+          : null;
+      if (featureId === null) {
+        clearSelection(state, true);
+        return;
+      }
+      const shouldLock = state.locked !== featureId;
+      selectFeature(state, featureId, cell, shouldLock);
+      if (!shouldLock) clearSelection(state, true);
+    }, { signal });
+    state.slider.addEventListener("input", () => {
+      if (state.animationFrame !== null) cancelAnimationFrame(state.animationFrame);
+      state.animationFrame = null;
+      updatePositions(state, Number(state.slider.value));
+    }, { signal });
+    state.replay.addEventListener("click", () => replay(state), { signal });
+    state.container.addEventListener("keydown", (event) => {
+      if (!["ArrowDown", "ArrowUp", "Home", "End", "Enter", "Escape"].includes(event.key)) return;
+      event.preventDefault();
+      if (event.key === "Escape") {
+        clearSelection(state, true);
+        return;
+      }
+      if (event.key === "Home") state.keyboardRow = 0;
+      if (event.key === "End") state.keyboardRow = state.features.length - 1;
+      if (event.key === "ArrowDown") state.keyboardRow = Math.min(state.features.length - 1, state.keyboardRow + 1);
+      if (event.key === "ArrowUp") state.keyboardRow = Math.max(0, state.keyboardRow - 1);
+      const feature = state.features[state.keyboardRow];
+      selectFeature(state, feature.feature_index, null, event.key === "Enter" ? true : undefined);
+    }, { signal });
+  }
+
+  function destroy(state) {
+    if (!state) return;
+    if (state.animationFrame !== null) cancelAnimationFrame(state.animationFrame);
+    if (state.resizeObserver) state.resizeObserver.disconnect();
+    if (state.abortController) state.abortController.abort();
+  }
+
+  function render(containerId, detailId, rasterData, attributionData) {
+    const container = document.getElementById(containerId);
+    const detailNode = document.getElementById(detailId);
+    if (!container || !detailNode || !rasterData.features || !attributionData.features) return "waiting";
+    const signature = `${rasterData.dataset}:${attributionData.model}`;
+    if (container.__featureStory && container.__featureStory.signature === signature) {
+      return signature;
+    }
+    destroy(container.__featureStory);
+    try {
+      const state = buildState(container, detailNode, rasterData, attributionData);
+      bindInteractions(state);
+      state.resizeObserver = new ResizeObserver(() => {
+        window.requestAnimationFrame(() => draw(state));
+      });
+      state.resizeObserver.observe(container);
+      window.requestAnimationFrame(() => draw(state));
+      detailNode.textContent = "Hover or tap a raster row or attribution dot to trace the same feature.";
+      return signature;
+    } catch (error) {
+      container.replaceChildren(htmlElement("div", "feature-story-error", "Feature visualization unavailable."));
+      detailNode.textContent = "Feature visualization unavailable.";
+      console.error(error);
+      return `error:${signature}`;
+    }
+  }
+
+  let scheduleGeneration = 0;
+
+  function schedule(containerId, detailId, rasterData, attributionData) {
+    scheduleGeneration += 1;
+    const generation = scheduleGeneration;
+    let attempts = 0;
+    const mount = () => {
+      if (generation !== scheduleGeneration) return;
+      if (document.getElementById(containerId) && document.getElementById(detailId)) {
+        render(containerId, detailId, rasterData, attributionData);
+        return;
+      }
+      attempts += 1;
+      if (attempts < 60) window.requestAnimationFrame(mount);
+    };
+    window.requestAnimationFrame(mount);
+  }
+
+  window.benchdashFeatureStory = { render, schedule };
+})();

assets/styles.css

@@ -607,6 +607,76 @@ h2 {
   margin-top: 14px !important;
 }
 
+.latent-space-mobile,
+.latent-mobile-legend {
+  display: none;
+}
+
+.latent-mobile-legend {
+  gap: 7px 12px;
+  align-items: center;
+  margin: 8px 0 14px;
+  padding: 9px 12px;
+  border: 1px solid #e2e8ec;
+  border-radius: 7px;
+  background: #fafbfc;
+  color: #536672;
+  font-size: 10px;
+}
+
+.latent-mobile-legend-title {
+  grid-column: 1 / -1;
+  font-weight: 750;
+}
+
+.latent-mobile-legend-item {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.latent-mobile-legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.historical-trajectory-mobile {
+  display: none;
+}
+
+.trajectory-legend {
+  display: grid;
+  grid-template-columns: auto repeat(8, minmax(0, auto));
+  gap: 8px 13px;
+  align-items: center;
+  margin: 8px 0 14px;
+  padding: 9px 12px;
+  border: 1px solid #e2e8ec;
+  border-radius: 7px;
+  background: #fafbfc;
+  color: #536672;
+  font-size: 10px;
+}
+
+.trajectory-legend-title {
+  font-weight: 750;
+}
+
+.trajectory-legend-item {
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.trajectory-legend-swatch {
+  width: 13px;
+  height: 3px;
+  border-radius: 3px;
+}
+
 .inline-controls {
   display: grid;
   grid-template-columns: minmax(240px, 420px) minmax(260px, 380px);
@@ -623,55 +693,122 @@ h2 {
   grid-template-columns: minmax(240px, 420px);
 }
 
-.arrangement-toggle {
-  display: flex;
+.feature-method-control {
+  max-width: 420px;
+  margin-bottom: 14px;
+  padding: 13px 14px;
+  border: 1px solid #e0e6ea;
+  border-radius: 9px;
+  background: #fafbfc;
+}
+
+.feature-story-viz {
   width: 100%;
-  max-width: 380px;
   overflow: hidden;
-  border: 1px solid #cbd5dd;
-  border-radius: 7px;
+  border: 1px solid #dfe6ea;
+  border-radius: 9px;
   background: #ffffff;
 }
 
-.arrangement-toggle label {
+.feature-story-viz:focus-visible {
+  outline-offset: 3px !important;
+}
+
+.feature-story-visual {
   position: relative;
-  flex: 1 1 0;
-  min-width: 0;
-  margin: 0;
-  padding: 9px 13px;
-  border-right: 1px solid #dce3e8;
-  color: #5a6c79;
+  width: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.feature-story-canvas,
+.feature-story-overlay {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+.feature-story-overlay {
+  pointer-events: none;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.feature-story-overlay text {
+  user-select: none;
+}
+
+.feature-story-dot {
   cursor: pointer;
-  font-size: 12px;
+  pointer-events: all;
+}
+
+.feature-story-playback {
+  display: grid;
+  grid-template-areas: "source slider target replay";
+  grid-template-columns: auto minmax(150px, 1fr) auto auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 58px;
+  padding: 10px 14px;
+  border-top: 1px solid #edf1f3;
+  background: #fbfcfc;
+}
+
+.feature-story-playback-label {
+  color: #5b6d79;
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0;
-  line-height: 1.55;
-  text-transform: none;
-  text-align: center;
-  white-space: normal;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
 }
 
-.arrangement-toggle label:last-child {
-  border-right: 0;
+.feature-story-playback-label.source {
+  grid-area: source;
 }
 
-.arrangement-toggle input {
-  position: absolute;
-  opacity: 0;
+.feature-story-playback-label.target {
+  grid-area: target;
+}
+
+.feature-story-slider {
+  grid-area: slider;
+  width: 100%;
+  accent-color: var(--feature);
+  cursor: ew-resize;
 }
 
-.arrangement-toggle label:has(input:checked) {
-  background: #eee9f6;
+.feature-story-replay {
+  grid-area: replay;
+  min-height: 34px;
+  padding: 7px 12px;
+  border: 1px solid #b9accf;
+  border-radius: 6px;
+  background: #f4f1f8;
   color: #4d3880;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 750;
+}
+
+.feature-story-replay:hover {
+  border-color: #846fa6;
+  background: #eee9f5;
+}
+
+.feature-story-render-token {
+  display: none;
 }
 
-.feature-story-grid {
-  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.42fr);
+.feature-story-error {
+  padding: 40px 20px;
+  color: #607080;
+  text-align: center;
 }
 
 .feature-selection-detail {
   min-height: 36px;
-  margin: 0 0 12px;
+  margin: 12px 0;
   padding: 9px 11px;
   border-left: 3px solid var(--feature);
   border-radius: 6px;
@@ -859,9 +996,6 @@ h2 {
     grid-template-columns: 1fr;
   }
 
-  .feature-story-grid {
-    grid-template-columns: 1fr;
-  }
 }
 
 @media (max-width: 820px) {
@@ -909,22 +1043,96 @@ h2 {
     grid-template-columns: 1fr;
   }
 
+  .feature-method-control {
+    max-width: none;
+  }
+
   .modebar-container {
     display: none !important;
   }
 
-  .heatmap-graph,
+  .heatmap-graph {
+    overflow: visible;
+  }
+
+  .heatmap-graph > div {
+    width: 100% !important;
+    min-width: 0;
+  }
+
   .latent-graph {
     overflow-x: auto;
+    padding-bottom: 7px;
+    scrollbar-color: #a9b5bd #eef2f4;
+    scrollbar-width: thin;
   }
 
-  .heatmap-graph > div,
-  .latent-graph > div {
+  .latent-space-desktop > div {
     min-width: 660px;
   }
 }
 
 @media (max-width: 560px) {
+  .heatmap-graph {
+    display: none;
+  }
+
+  .latent-space-desktop {
+    display: none;
+  }
+
+  .latent-space-mobile {
+    display: block;
+    overflow: visible;
+    padding-bottom: 0;
+  }
+
+  .latent-space-mobile > div {
+    width: 100% !important;
+    min-width: 0;
+  }
+
+  .latent-mobile-legend {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .historical-trajectory-desktop {
+    display: none;
+  }
+
+  .historical-trajectory-mobile {
+    display: block;
+  }
+
+  .trajectory-legend {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 7px 12px;
+  }
+
+  .trajectory-legend-title {
+    grid-column: 1 / -1;
+  }
+
+  .feature-story-playback {
+    grid-template-areas:
+      "source target"
+      "slider slider"
+      "replay replay";
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 12px;
+    padding: 11px 12px 12px;
+  }
+
+  .feature-story-playback-label.target {
+    text-align: right;
+  }
+
+  .feature-story-replay {
+    width: 100%;
+    min-height: 40px;
+  }
+
   .site-nav {
     align-items: flex-start;
     padding: 15px 0;