Update app.py

app.py

@@ -29,6 +29,22 @@ theme_css = """
 }
 body{ background:var(--bg); color:var(--text); }
 .badge{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; margin:2px; }
+/* Highlight hovered prediction token */
+.badge:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+/* Optional: style an active hovered token */
+.badge.hovered {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
 
 /* Make sure the prediction list can receive pointer events even if Plotly expands */
 .predictions-panel { position: relative; z-index: 5; }
@@ -224,34 +240,49 @@ def AutoPredictWatcher():
 @solara.component
 def PredictionsList():
     df = preds_rx.value
-    with solara.Column(gap="6px", style={"maxWidth":"720px"}):
+    with solara.Column(gap="6px", style={"maxWidth": "720px"}):
         solara.Markdown("### Prediction")
         solara.Text(
             " #  probs    token  predicted next token",
             style={
-                "color":"var(--muted)",
-                "fontFamily":'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                "color": "var(--muted)",
+                "fontFamily": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
             },
         )
+
         for i, row in df.iterrows():
-            tid = int(row["id"]); prob = row["probs"]
+            tid = int(row["id"])
+            prob = row["probs"]
             tok_disp = display_token_from_id(tid)
-            label = fmt_row(i, prob, tid, tok_disp)
+            row_label = fmt_row(i, prob, tid, tok_disp)
 
-            # Use Div so pointer events are reliable; accept *args to handle any signature
-            solara.Button(
-                label,
-                classes=["rowbtn"],
+            # Wrapper DIV catches pointer/hover; Button handles click (and also hooks hover)
+            with solara.Div(
+                classes=["rowbtn"],  # styling on the wrapper
                 style={"justifyContent": "flex-start", "width": "100%"},
-                # click to append
-                on_click=lambda *args, tid=tid: append_token(tid),
-                # hover preview (bind several to be robust)
+                attributes={"tabindex": "0", "role": "button"},
+                # ---- HOVER = preview neighborhood (wrapper) ----
                 on_mouse_enter=lambda *args, tid=tid: preview_token(tid),
                 on_mouse_over=lambda *args, tid=tid: preview_token(tid),
                 on_mouse_move=lambda *args, tid=tid: preview_token(tid),
-                on_focus=lambda *args, tid=tid: preview_token(tid),  # keyboard focus
-            )
-
+                on_pointer_enter=lambda *args, tid=tid: preview_token(tid),
+                on_pointer_move=lambda *args, tid=tid: preview_token(tid),
+                on_focus=lambda *args, tid=tid: preview_token(tid),   # keyboard focus
+            ):
+                solara.Button(
+                    row_label,
+                    classes=[],  # keep wrapper styled; leave button unstyled
+                    style={"justifyContent": "flex-start", "width": "100%"},
+                    # ---- CLICK = append token to text ----
+                    on_click=lambda *args, tid=tid: append_token(tid),
+                    # Redundant hover hooks on the button too (helps on some builds)
+                    on_mouse_enter=lambda *args, tid=tid: preview_token(tid),
+                    on_mouse_over=lambda *args, tid=tid: preview_token(tid),
+                    on_mouse_move=lambda *args, tid=tid: preview_token(tid),
+                    on_pointer_enter=lambda *args, tid=tid: preview_token(tid),
+                    on_pointer_move=lambda *args, tid=tid: preview_token(tid),
+                    on_focus=lambda *args, tid=tid: preview_token(tid),
+                )
 
 # ---------- Page ----------
 @solara.component
@@ -269,23 +300,27 @@ def Page():
         solara.InputText("Enter text", value=text_rx, continuous_update=True, style={"minWidth":"520px"})
         solara.Markdown(f"*{notice_rx.value}*")
 
-        with solara.Row(gap="24px", style={"align-items":"flex-start"}):
+        with solara.Row(classes=["app-row"]):
+            # Left column: predictions list (fixed width, sits above plot for events)
             with solara.Column(classes=["predictions-panel"]):
                 PredictionsList()
-
+        
+            # Right column: plot + neighbor chips
             with solara.Column(classes=["plot-panel"]):
                 solara.Markdown("### Semantic Neighborhood")
                 if not coords:
                     solara.Markdown("> Embedding map unavailable – add `assets/embeddings/*.json`.")
                 else:
                     solara.FigurePlotly(fig_rx.value)
-
+        
                 if neighbor_list_rx.value:
                     solara.Markdown("**Nearest neighbors:**")
-                    with solara.Row(style={"flex-wrap":"wrap"}):
+                    with solara.Row(style={"flex-wrap": "wrap"}):
                         for tok, sim in neighbor_list_rx.value:
-                            solara.HTML(tag="span",
-                                unsafe_innerHTML=f'<span class="badge">{tok} &nbsp; {(sim*100):.1f}%</span>')
+                            solara.HTML(
+                                tag="span",
+                                unsafe_innerHTML=f'<span class="badge">{tok} &nbsp; {(sim*100):.1f}%</span>',
+                            )
 
         AutoPredictWatcher()