Update app.py

app.py

@@ -29,6 +29,13 @@ h1,h2,h3{ color:var(--text); }
 hr{ border-color:var(--border); }
 .badge{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; margin:2px; }
 
+/* Keep the predictions list above the plot so it can receive pointer events */
+.predictions-panel { position: relative; z-index: 5; }
+.plot-panel { position: relative; z-index: 1; }
+
+/* Safety: prevent any wide Plotly overlay from swallowing events on the left */
+.plot-panel .js-plotly-plot { position: relative; z-index: 1; }
+
 .rowbtn{
   width:100%; padding:10px 12px; border-radius:12px;
   border:1px solid var(--border); background:#fff; color:var(--text);
@@ -177,6 +184,7 @@ def highlight(token_id: int):
     return fig
 
 def preview_token(token_id: int):
+    print("preview ->", token_id)  # TEMP: check Logs
     token_id = int(token_id)
     # TEMP DEBUG: verify hover fires in Space logs
     print("preview ->", token_id)
@@ -188,6 +196,7 @@ def preview_token(token_id: int):
 
 def append_token(token_id: int):
     # keep decode() here so spacing stays correct in the prompt
+    print("append ->", token_id)   # TEMP: check Logs
     decoded = tokenizer.decode([int(token_id)])
     text_rx.set(text_rx.value + decoded)
     preview_token(int(token_id))  # keep highlight on clicked token
@@ -244,15 +253,16 @@ def PredictionsList():
                 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_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
+                on_pointer_enter=lambda e=None, tid=tid: preview_token(tid),
+                on_focus=lambda e=None, tid=tid: preview_token(tid),
             ):
                 solara.Text(label)
 
+
 # ------------------ Page ------------------
 @solara.component
 def Page():
@@ -272,10 +282,10 @@ def Page():
 
         # Two columns
         with solara.Row(gap="24px", style={"align-items": "flex-start"}):
-            with solara.Column():
+            with solara.Column(classes=["predictions-panel"]):
                 PredictionsList()
 
-            with solara.Column():
+            with solara.Column(classes=["plot-panel"]):
                 solara.Markdown("### Semantic Neighborhood")
                 if not coords:
                     solara.Markdown("> Embedding map unavailable – add `assets/embeddings/*.json`.")