Improve text contrast and horizontal table scrolling in Space UI

public_space_app.py

@@ -463,6 +463,67 @@ def _space_css() -> str:
       color: #4b4b4b;
       margin-bottom: 12px;
     }
+    .gradio-container .prose,
+    .gradio-container .prose p,
+    .gradio-container .prose li,
+    .gradio-container .prose strong,
+    .gradio-container .prose h1,
+    .gradio-container .prose h2,
+    .gradio-container .prose h3,
+    .gradio-container .prose h4,
+    .gradio-container .prose code {
+      color: var(--body-text-color) !important;
+    }
+    .table-shell {
+      background: var(--block-background-fill);
+      border: 1px solid var(--border-color-primary);
+      border-radius: 18px;
+      overflow: hidden;
+      margin-top: 10px;
+    }
+    .table-scroll {
+      overflow-x: auto;
+      overflow-y: auto;
+      max-height: 520px;
+    }
+    .public-table {
+      border-collapse: collapse;
+      width: max-content;
+      min-width: 100%;
+      font-size: 0.92rem;
+    }
+    .public-table thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: var(--block-title-background-fill, var(--block-background-fill));
+      color: var(--body-text-color);
+      text-align: left;
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border-color-primary);
+      white-space: nowrap;
+    }
+    .public-table tbody td {
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border-color-primary);
+      color: var(--body-text-color);
+      white-space: nowrap;
+      max-width: none;
+    }
+    .public-table tbody tr:nth-child(even) td {
+      background: color-mix(in srgb, var(--block-background-fill) 88%, var(--body-background-fill) 12%);
+    }
+    .public-table a {
+      color: #c67f00 !important;
+      text-decoration: underline;
+    }
+    .table-note {
+      padding: 10px 12px;
+      font-size: 0.88rem;
+      color: var(--body-text-color-subdued);
+      border-top: 1px solid var(--border-color-primary);
+      background: var(--body-background-fill);
+    }
     """
 
 
@@ -1091,6 +1152,38 @@ def _graph_table(edges: pd.DataFrame) -> pd.DataFrame:
     ]
 
 
+def _format_table_cell(value: Any) -> str:
+    text = "" if value is None else str(value)
+    if not text:
+        return ""
+    escaped = html.escape(text)
+    if text.startswith("http://") or text.startswith("https://"):
+        label = escaped if len(text) <= 90 else html.escape(text[:87] + "...")
+        return f'<a href="{escaped}" target="_blank" rel="noopener noreferrer">{label}</a>'
+    display = escaped if len(text) <= 120 else html.escape(text[:117] + "...")
+    return f'<span title="{escaped}">{display}</span>'
+
+
+def _table_html(frame: pd.DataFrame, *, empty_message: str, note: str = "", max_rows: int | None = None) -> str:
+    if frame is None or frame.empty:
+        return f'<div class="panel-note">{html.escape(empty_message)}</div>'
+    preview = frame.head(int(max_rows)) if max_rows is not None else frame
+    headers = "".join(f"<th>{html.escape(str(col))}</th>" for col in preview.columns)
+    body_rows: list[str] = []
+    for row in preview.fillna("").astype(str).to_dict("records"):
+        body_cells = "".join(f"<td>{_format_table_cell(value)}</td>" for value in row.values())
+        body_rows.append(f"<tr>{body_cells}</tr>")
+    note_html = f'<div class="table-note">{html.escape(note)}</div>' if note else ""
+    return (
+        '<div class="table-shell">'
+        '<div class="table-scroll">'
+        f'<table class="public-table"><thead><tr>{headers}</tr></thead><tbody>{"".join(body_rows)}</tbody></table>'
+        '</div>'
+        f"{note_html}"
+        '</div>'
+    )
+
+
 def _filter_events(events: pd.DataFrame, member_query: str, event_type: str, score_label: str, text_query: str) -> pd.DataFrame:
     filtered = events.copy()
     if member_query.strip():
@@ -1441,7 +1534,15 @@ def build_app(copy_path: str | Path):
             review_status=review_status,
             max_edges=int(top_n),
         )
-        return summary, _render_graph(filtered_nodes, filtered_edges), _graph_table(filtered_edges)
+        return (
+            summary,
+            _render_graph(filtered_nodes, filtered_edges),
+            _table_html(
+                _graph_table(filtered_edges),
+                empty_message="No relationships match the current graph filters.",
+                note="Scroll sideways if you want to inspect every column in the current graph view.",
+            ),
+        )
 
     def _reset_graph(member_query: str):
         default_family = str(graph_defaults.get("relationship_family", "sector"))
@@ -1474,11 +1575,21 @@ def build_app(copy_path: str | Path):
             gr.update(value=int(default_top_n)),
             summary,
             _render_graph(filtered_nodes, filtered_edges),
-            _graph_table(filtered_edges),
+            _table_html(
+                _graph_table(filtered_edges),
+                empty_message="No relationships match the current graph filters.",
+                note="Scroll sideways if you want to inspect every column in the current graph view.",
+            ),
         )
 
     def _update_events(member_query: str, event_type: str, score_label: str, text_query: str):
-        return _filter_events(events, member_query, event_type, score_label, text_query)
+        filtered = _filter_events(events, member_query, event_type, score_label, text_query)
+        display = filtered.head(150)
+        return _table_html(
+            display,
+            empty_message="No released event rows match the current filters.",
+            note=f"Showing {len(display)} of {len(filtered)} matching released event rows." if len(filtered) > len(display) else f"Showing {len(display)} released event rows.",
+        )
 
     with gr.Blocks(title=copy_payload.get("title", "Congress Public Records Slice"), css=_space_css()) as app:
         gr.HTML(_hero_html(manifest))
@@ -1565,7 +1676,7 @@ def build_app(copy_path: str | Path):
             graph_summary_md = gr.Markdown()
             graph_html = gr.HTML()
             with gr.Accordion("Current relationships in this map", open=False):
-                graph_df = gr.Dataframe(interactive=False)
+                graph_df = gr.HTML()
 
             for control in (graph_family, graph_only_strong, graph_top_n):
                 control.change(
@@ -1600,20 +1711,36 @@ def build_app(copy_path: str | Path):
                     event_type = gr.Dropdown(label="Event type", choices=event_type_choices, value="all")
                     score_label = gr.Dropdown(label="Score label", choices=score_label_choices, value="all")
                     text_query = gr.Textbox(label="Issuer or sector search")
-                explore_df = gr.Dataframe(value=events.head(100), interactive=False)
+                explore_df = gr.HTML(value=_table_html(events.head(100), empty_message="No released event rows are available."))
                 for control in (member_query, event_type, score_label, text_query):
                     control.change(_update_events, [member_query, event_type, score_label, text_query], explore_df)
 
             with gr.Accordion("Inspect one released event row", open=False):
                 event_id = gr.Dropdown(label="Event id", choices=event_id_choices, value=event_id_choices[0] if event_id_choices else None)
                 event_detail_md = gr.Markdown()
-                event_detail_df = gr.Dataframe(interactive=False)
-                event_id.change(_event_detail, [gr.State(events), gr.State(provenance), event_id], [event_detail_md, event_detail_df])
-                app.load(_event_detail, [gr.State(events), gr.State(provenance), event_id], [event_detail_md, event_detail_df])
+                event_detail_df = gr.HTML()
+
+                def _event_detail_view(events_state: pd.DataFrame, prov_state: pd.DataFrame, event_id_value: str):
+                    detail_md, prov_rows = _event_detail(events_state, prov_state, event_id_value)
+                    table_html = _table_html(
+                        prov_rows,
+                        empty_message="No provenance rows are attached to this released event row.",
+                        note="Scroll sideways to inspect all provenance columns and URLs.",
+                    )
+                    return detail_md, table_html
+
+                event_id.change(_event_detail_view, [gr.State(events), gr.State(provenance), event_id], [event_detail_md, event_detail_df])
+                app.load(_event_detail_view, [gr.State(events), gr.State(provenance), event_id], [event_detail_md, event_detail_df])
 
             with gr.Accordion("Integrity-checked source records and audit summary", open=False):
                 gr.Markdown(_consistency_summary_markdown(data["consistency"]))
-                gr.Dataframe(value=data["artifact_index"].head(200), interactive=False)
+                gr.HTML(
+                    _table_html(
+                        data["artifact_index"].head(200),
+                        empty_message="No source artifact rows are available in the audit index.",
+                        note="Scroll sideways to inspect long URLs and SHA-256 values.",
+                    )
+                )
 
             with gr.Accordion("Methodology, limits, and downloads", open=False):
                 gr.Markdown(copy_payload.get("landing_markdown", ""))