Update app.py

app.py

@@ -33,7 +33,7 @@ hr{ border-color:var(--border); }
   width:100%; padding:10px 12px; border-radius:12px;
   border:1px solid var(--border); background:#fff; color:var(--text);
   display:flex; justify-content:flex-start; align-items:center;
-  text-align:left; cursor:pointer;
+  text-align:left; cursor:pointer; user-select:none;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   letter-spacing:.2px;
 }
@@ -43,8 +43,8 @@ hr{ border-color:var(--border); }
 # ------------------ App state ------------------
 text_rx = solara.reactive("twinkle, twinkle, little ")
 preds_rx = solara.reactive(pd.DataFrame(columns=["probs", "id", "tok"]))
-selected_token_id_rx = solara.reactive(None)  # the token we’re currently highlighting
-neighbor_list_rx = solara.reactive([])        # [(tok_display, sim), ...]
+selected_token_id_rx = solara.reactive(None)   # currently highlighted token id
+neighbor_list_rx = solara.reactive([])         # [(tok_display, sim), ...]
 notice_rx = solara.reactive("Click a candidate (or hover to preview).")
 auto_running_rx = solara.reactive(True)
 last_hovered_id_rx = solara.reactive(None)
@@ -103,7 +103,7 @@ def predict_top10(prompt: str) -> pd.DataFrame:
     topk = torch.topk(scores, 10)
     ids = [int(topk.indices[0, i]) for i in range(10)]
     probs = [float(topk.values[0, i]) for i in range(10)]
-    toks = [tokenizer.decode([i]) for i in ids]  # used for append; display uses display_token_from_id
+    toks = [tokenizer.decode([i]) for i in ids]  # for append; display uses display_token_from_id
     df = pd.DataFrame({"probs": probs, "id": ids, "tok": toks})
     df["probs"] = df["probs"].map(lambda p: f"{p:.2%}")
     return df
@@ -114,11 +114,9 @@ def on_predict():
     preds_rx.set(df)
     if len(df) == 0:
         return
-    # Only auto-select the top-1 if we don't have a selection yet.
     if selected_token_id_rx.value is None:
         preview_token(int(df.iloc[0]["id"]))
     else:
-        # Keep highlighting whatever the user last hovered/clicked.
         fig_rx.set(highlight(int(selected_token_id_rx.value)))
 
 # ------------------ Plotly figure ------------------
@@ -180,6 +178,8 @@ def highlight(token_id: int):
 
 def preview_token(token_id: int):
     token_id = int(token_id)
+    # TEMP DEBUG: verify hover fires in Space logs
+    print("preview ->", token_id)
     if last_hovered_id_rx.value == token_id:
         return
     last_hovered_id_rx.set(token_id)
@@ -190,9 +190,8 @@ def append_token(token_id: int):
     # keep decode() here so spacing stays correct in the prompt
     decoded = tokenizer.decode([int(token_id)])
     text_rx.set(text_rx.value + decoded)
-    # lock highlight to the clicked token and keep it after re-predict
-    preview_token(int(token_id))
-    on_predict()  # refresh next tokens but preserve highlight
+    preview_token(int(token_id))  # keep highlight on clicked token
+    on_predict()                  # refresh predictions, preserve selection
 
 # ------------------ Auto-predict on typing (debounced) ------------------
 @solara.component
@@ -221,7 +220,7 @@ def AutoPredictWatcher():
     solara.use_effect(effect, [text, auto])
     return solara.Text("", style={"display": "none"})
 
-# ------------------ UI: clickable + HOVERABLE rows ------------------
+# ------------------ UI: rows as Div (hover + click here) ------------------
 @solara.component
 def PredictionsList():
     df = preds_rx.value
@@ -240,17 +239,19 @@ def PredictionsList():
             tok_disp = display_token_from_id(tid)
             label = fmt_row(i, prob, tid, tok_disp)
 
-            # Put ALL hover handlers directly on the Button.
-            solara.Button(
-                label,
-                on_click=lambda tid=tid: append_token(tid),                 # click to append
-                on_mouse_enter=lambda e=None, tid=tid: preview_token(tid),  # hover preview
-                on_mouse_over=lambda e=None, tid=tid: preview_token(tid),   # extra safety
-                on_mouse_move=lambda e=None, tid=tid: preview_token(tid),   # tracks movement
-                on_focus=lambda e=None, tid=tid: preview_token(tid),        # keyboard focus
+            # One Div per row: both hover and click handlers live here.
+            with solara.Div(
                 classes=["rowbtn"],
                 style={"justifyContent": "flex-start", "width": "100%"},
-            )
+                attributes={"tabindex": "0", "role": "button"},
+                on_click=lambda e=None, tid=tid: append_token(tid),               # click to append
+                on_mouse_enter=lambda e=None, tid=tid: preview_token(tid),        # hover preview
+                on_mouse_over=lambda e=None, tid=tid: preview_token(tid),
+                on_mouse_move=lambda e=None, tid=tid: preview_token(tid),
+                on_pointer_enter=lambda e=None, tid=tid: preview_token(tid),      # pointer events (more reliable)
+                on_focus=lambda e=None, tid=tid: preview_token(tid),              # keyboard
+            ):
+                solara.Text(label)
 
 # ------------------ Page ------------------
 @solara.component
@@ -294,4 +295,4 @@ def Page():
 
 # Seed initial predictions and mount
 on_predict()
-Page()
+Page()