Update app.py

app.py

@@ -338,20 +338,73 @@ body, .gradio-container {
   border-bottom-color: var(--accent) !important;
 }
 
-/* ── Dataframe ── */
-.dataframe-wrap table {
-  font-family: var(--mono) !important;
-  font-size: .78rem !important;
+/* ── Review Table (custom HTML — replaces gr.Dataframe) ── */
+#review-table-wrap {
+  overflow-x: auto;
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
 }
-.dataframe-wrap th {
-  background: #1a1f2e !important;
-  color: var(--accent) !important;
-  font-family: var(--display) !important;
-  font-size: .7rem !important;
-  letter-spacing: .08em !important;
-  text-transform: uppercase !important;
+.rt-table {
+  width: 100%;
+  min-width: 960px;
+  border-collapse: collapse;
+  font-family: var(--mono);
+  font-size: .78rem;
 }
-.dataframe-wrap td { border-color: var(--border) !important; }
+.rt-table th {
+  background: #1a1f2e;
+  color: var(--accent);
+  font-family: var(--display);
+  font-size: .68rem;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  padding: .65rem .8rem;
+  text-align: left;
+  border-bottom: 2px solid var(--border);
+  white-space: nowrap;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.rt-table td {
+  padding: .55rem .8rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+  color: var(--text);
+}
+.rt-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
+.rt-table tr:hover td { background: rgba(79,142,247,.06); transition: background .15s; }
+.rt-col-num    { width: 45px;  text-align: center; color: var(--muted); }
+.rt-col-label  { min-width: 160px; font-weight: 600; }
+.rt-col-evid   { min-width: 240px; line-height: 1.6; color: var(--muted); }
+.rt-col-sent   { width: 80px;  text-align: center; }
+.rt-col-paper  { width: 70px;  text-align: center; }
+.rt-col-appr   { width: 72px;  text-align: center; }
+.rt-col-rename { min-width: 140px; }
+.rt-col-reason { min-width: 200px; }
+.rt-check {
+  width: 18px; height: 18px; cursor: pointer;
+  accent-color: var(--success);
+}
+.rt-input, .rt-textarea {
+  width: 100%; box-sizing: border-box;
+  padding: .32rem .55rem;
+  background: #0d0f14;
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 5px;
+  font-family: var(--sans);
+  font-size: .78rem;
+  transition: border-color .15s;
+}
+.rt-input:focus, .rt-textarea:focus {
+  border-color: var(--accent);
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(79,142,247,.18);
+}
+.rt-textarea { resize: vertical; min-height: 46px; }
+.rt-empty { color: var(--muted); padding: 1.5rem; font-style: italic; text-align: center; }
 
 /* ── File upload ── */
 .file-drop {
@@ -477,14 +530,20 @@ def build_app():
 
             # ── Tab A: Review Table ──────────────────────────────────────
             with gr.Tab("📋  Review Table"):
-                review_table = gr.Dataframe(
-                    value=EMPTY_TABLE,
-                    headers=TABLE_COLS,
-                    datatype=["number", "str", "str", "number", "number", "str", "str", "str"],
-                    interactive=True,
-                    wrap=True,
-                    elem_classes=["dataframe-wrap"],
-                    label="Topic review — edit Approve / Rename To / Reasoning, then click Submit",
+                gr.HTML(
+                    "<p style='color:var(--muted,#7a8299);font-size:.8rem;margin:0 0 .6rem'>"
+                    "Check ✓ Approve, optionally fill Rename To / Reasoning, then click Submit.</p>"
+                )
+                review_table_html = gr.HTML(
+                    value="<p class='rt-empty' style='color:#7a8299;padding:1rem;font-style:italic'>"
+                          "No topics yet — run topic modelling first.</p>",
+                    label="",
+                )
+                # Hidden textbox holds JSON-serialised table rows, kept in sync by JS
+                review_json_state = gr.Textbox(
+                    value="[]",
+                    visible=False,
+                    elem_id="review-json-state",
                 )
                 submit_review_btn = gr.Button(
                     "Submit Review  ✓",
@@ -533,7 +592,7 @@ def build_app():
         def on_send(message, history, csv_path, charts_state, downloads_state):
             """Stream agent responses and update all UI elements."""
             if not message.strip():
-                yield history, "", phase_html("idle"), [], None, charts_state, downloads_state
+                yield history, "", phase_html("idle"), gr.update(), gr.update(), None, charts_state, downloads_state
                 return
 
             # Accumulate streamed updates
@@ -548,38 +607,109 @@ def build_app():
                 (last_history, last_phase,
                  last_charts, last_downloads, new_topics) = result
 
+                _html, _json = _rows_to_html(new_topics) if new_topics else (gr.update(), gr.update())
                 yield (
                     last_history,
                     "",                          # clear input
                     phase_html(last_phase),
-                    _rows_to_df(new_topics) if new_topics else gr.update(),
+                    _html,
+                    _json,
                     gr.update(),                 # downloads updated below
                     last_charts,
                     last_downloads,
                 )
 
             # Final yield with downloads
+            _html, _json = _rows_to_html(new_topics) if new_topics else (gr.update(), gr.update())
             yield (
                 last_history,
                 "",
                 phase_html(last_phase),
-                _rows_to_df(new_topics) if new_topics else gr.update(),
+                _html,
+                _json,
                 last_downloads if last_downloads else None,
                 last_charts,
                 last_downloads,
             )
 
-        def _rows_to_df(rows):
+        def _rows_to_html(rows):
+            """Convert agent row data → (html_str, json_str) for the custom table."""
             if not rows:
-                return EMPTY_TABLE
-            df = pd.DataFrame(rows, columns=TABLE_COLS)
-            return df
+                html = "<p class='rt-empty'>No topics yet — run topic modelling first.</p>"
+                return html, "[]"
+
+            padded = []
+            for r in rows:
+                row = list(r) + [""] * max(0, 8 - len(r))
+                padded.append(row[:8])
+
+            json_data = json.dumps(padded)
+
+            rows_html = ""
+            for i, row in enumerate(padded):
+                num, label, evidence, sentences, papers, approve, rename, reasoning = row
+                checked = "checked" if str(approve).lower() in ("true", "1", "yes", "✓") else ""
+                # Escape for HTML attribute safety
+                rename_esc   = str(rename).replace('"', "&quot;")
+                reason_esc   = str(reasoning).replace("<", "&lt;").replace(">", "&gt;")
+                evidence_esc = str(evidence).replace("<", "&lt;").replace(">", "&gt;")
+                label_esc    = str(label).replace("<", "&lt;").replace(">", "&gt;")
+                rows_html += f"""
+        <tr data-row="{i}">
+          <td class="rt-col-num">{num}</td>
+          <td class="rt-col-label">{label_esc}</td>
+          <td class="rt-col-evid">{evidence_esc}</td>
+          <td class="rt-col-sent">{sentences}</td>
+          <td class="rt-col-paper">{papers}</td>
+          <td class="rt-col-appr">
+            <input type="checkbox" class="rt-check" {checked}
+              onchange="rtUpdate({i},5,this.checked)">
+          </td>
+          <td class="rt-col-rename">
+            <input type="text" class="rt-input" value="{rename_esc}"
+              oninput="rtUpdate({i},6,this.value)" placeholder="new label…">
+          </td>
+          <td class="rt-col-reason">
+            <textarea class="rt-textarea" rows="2"
+              oninput="rtUpdate({i},7,this.value)" placeholder="notes…">{reason_esc}</textarea>
+          </td>
+        </tr>"""
+
+            html = f"""<div id="review-table-wrap">
+<script>
+(function(){{
+  window._rtData = {json_data};
+  window.rtUpdate = function(idx, col, val) {{
+    window._rtData[idx][col] = val;
+    var el = document.querySelector('#review-json-state textarea');
+    if (!el) return;
+    var setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype,'value').set;
+    setter.call(el, JSON.stringify(window._rtData));
+    el.dispatchEvent(new Event('input',{{bubbles:true}}));
+  }};
+}})();
+</script>
+<table class="rt-table">
+  <thead><tr>
+    <th class="rt-col-num">#</th>
+    <th class="rt-col-label">Topic Label</th>
+    <th class="rt-col-evid">Top Evidence</th>
+    <th class="rt-col-sent">Sentences</th>
+    <th class="rt-col-paper">Papers</th>
+    <th class="rt-col-appr">Approve</th>
+    <th class="rt-col-rename">Rename To</th>
+    <th class="rt-col-reason">Reasoning</th>
+  </tr></thead>
+  <tbody>{rows_html}</tbody>
+</table></div>"""
+            return html, json_data
 
         send_outputs = [
             chatbot,
             user_input,
             phase_display,
-            review_table,
+            review_table_html,
+            review_json_state,
             download_files,
             state_charts,
             state_downloads,
@@ -597,9 +727,12 @@ def build_app():
         )
 
         # ── Submit review ─────────────────────────────────────────────────
-        def on_submit_review(table_df, history, charts_state, downloads_state):
+        def on_submit_review(json_str, history, charts_state, downloads_state):
             """Pass edited table back to the agent as a review submission."""
-            rows = table_df.values.tolist() if isinstance(table_df, pd.DataFrame) else table_df or []
+            try:
+                rows = json.loads(json_str) if json_str and json_str.strip() not in ("", "[]") else []
+            except Exception:
+                rows = []
 
             last_history   = history
             last_phase     = "review"
@@ -628,7 +761,7 @@ def build_app():
 
         submit_review_btn.click(
             fn=on_submit_review,
-            inputs=[review_table, chatbot, state_charts, state_downloads],
+            inputs=[review_json_state, chatbot, state_charts, state_downloads],
             outputs=[chatbot, phase_display, download_files, state_charts, state_downloads],
         )