feat: replace pyvis with plotly for reliable graph rendering in Gradio

app.py

@@ -1,13 +1,9 @@
 import gradio as gr
 import pandas as pd
 import networkx as nx
-from pyvis.network import Network
+import plotly.graph_objects as go
 from huggingface_hub import hf_hub_download
-import tempfile, os
-
-# ---------------------------------------------------------------------------
-# Data loading (cached at module level so it happens once on Space boot)
-# ---------------------------------------------------------------------------
+import numpy as np
 
 REPO_ID = "overthelex/ua-court-citation-graph"
 
@@ -27,20 +23,20 @@ edges_df["node_b"] = edges_df["law_b"] + " ст. " + edges_df["article_b"]
 ALL_LAWS = sorted(edges_df["law_a"].unique().tolist())
 
 DOMAIN_COLORS = {
-    "Кримінальний кодекс України": "#e74c3c",
-    "Кримінальний процесуальний кодекс України": "#c0392b",
-    "Цивільний кодекс України": "#3498db",
-    "Цивільний процесуальний кодекс України": "#2980b9",
-    "Господарський кодекс України": "#2ecc71",
-    "Господарський процесуальний кодекс України": "#27ae60",
-    "Кодекс адміністративного судочинства України": "#f39c12",
-    "КУпАП": "#e67e22",
-    "Податковий кодекс України": "#9b59b6",
-    "Сімейний кодекс України": "#1abc9c",
-    "Земельний кодекс України": "#d35400",
-    "Конституція України": "#f1c40f",
+    "Кримінальний кодекс України": "#ef4444",
+    "Кримінальний процесуальний кодекс України": "#f97316",
+    "Цивільний кодекс України": "#3b82f6",
+    "Цивільний процесуальний кодекс України": "#60a5fa",
+    "Господарський кодекс України": "#22c55e",
+    "Господарський процесуальний кодекс України": "#4ade80",
+    "Кодекс адміністративного судочинства України": "#eab308",
+    "КУпАП": "#f59e0b",
+    "Податковий кодекс України": "#a855f7",
+    "Сімейний кодекс України": "#14b8a6",
+    "Земельний кодекс України": "#f97316",
+    "Конституція України": "#fbbf24",
 }
-DEFAULT_COLOR = "#95a5a6"
+DEFAULT_COLOR = "#94a3b8"
 
 print(f"Loaded {len(edges_df):,} edges, {len(centrality_df)} centrality nodes, {len(stats_df):,} citation stats")
 
@@ -52,12 +48,31 @@ def get_color(law_name: str) -> str:
     return DEFAULT_COLOR
 
 
-def build_graph(
-    law_filter: list[str],
-    min_weight: int,
-    max_edges: int,
-    layout: str,
-) -> str:
+SHORT_NAMES = [
+    ("Кримінальний процесуальний кодекс України", "КПК"),
+    ("Кримінальний кодекс України", "ККУ"),
+    ("Цивільний процесуальний кодекс України", "ЦПК"),
+    ("Цивільний кодекс України", "ЦКУ"),
+    ("Господарський процесуальний кодекс України", "ГПК"),
+    ("Господарський кодекс України", "ГКУ"),
+    ("Кодекс адміністративного судочинства України", "КАСУ"),
+    ("Податковий кодекс України", "ПКУ"),
+    ("Сімейний кодекс України", "СКУ"),
+    ("Земельний кодекс України", "ЗКУ"),
+    ("Конституція України", "КУ"),
+]
+
+
+def shorten(name: str) -> str:
+    for long, short in SHORT_NAMES:
+        if name == long:
+            return short
+    if len(name) > 20:
+        return name[:18] + "..."
+    return name
+
+
+def build_graph(law_filter: list[str], min_weight: int, max_edges: int, layout: str):
     filtered = edges_df[edges_df["weight"] >= min_weight]
 
     if law_filter:
@@ -67,7 +82,16 @@ def build_graph(
     filtered = filtered.nlargest(max_edges, "weight")
 
     if filtered.empty:
-        return "<div style='padding:40px;text-align:center;color:#666;font-size:18px;'>Немає ребер для обраних фільтрів. Спробуйте зменшити мінімальну вагу або змінити фільтр.</div>"
+        fig = go.Figure()
+        fig.update_layout(
+            paper_bgcolor="#0f172a", plot_bgcolor="#0f172a",
+            annotations=[dict(text="Немає ребер. Зменшіть мінімальну вагу.",
+                            showarrow=False, font=dict(size=18, color="#94a3b8"),
+                            xref="paper", yref="paper", x=0.5, y=0.5)],
+            xaxis=dict(visible=False), yaxis=dict(visible=False),
+            height=750,
+        )
+        return fig
 
     G = nx.Graph()
     for _, row in filtered.iterrows():
@@ -76,78 +100,143 @@ def build_graph(
     degree_dict = dict(G.degree(weight="weight"))
     pr = nx.pagerank(G, weight="weight")
 
-    height = "750px"
-    net = Network(height=height, width="100%", bgcolor="#1a1a2e", font_color="white")
-    net.barnes_hut(
-        gravity=-3000,
-        central_gravity=0.3,
-        spring_length=150,
-        spring_strength=0.01,
-        damping=0.09,
+    if layout == "Kamada-Kawai":
+        pos = nx.kamada_kawai_layout(G, weight="weight")
+    else:
+        pos = nx.spring_layout(G, k=2.5 / np.sqrt(G.number_of_nodes()),
+                                iterations=100, weight="weight", seed=42)
+
+    max_w = filtered["weight"].max()
+    min_w = filtered["weight"].min()
+    w_range = max_w - min_w if max_w > min_w else 1
+
+    edge_x, edge_y, edge_hover = [], [], []
+    for u, v, d in G.edges(data=True):
+        x0, y0 = pos[u]
+        x1, y1 = pos[v]
+        edge_x.extend([x0, x1, None])
+        edge_y.extend([y0, y1, None])
+
+    edge_trace = go.Scatter(
+        x=edge_x, y=edge_y,
+        mode="lines",
+        line=dict(width=0.5, color="rgba(148,163,184,0.2)"),
+        hoverinfo="none",
+        showlegend=False,
     )
 
+    thick_edge_traces = []
+    sorted_edges = sorted(G.edges(data=True), key=lambda e: e[2]["weight"], reverse=True)
+    top_n = min(50, len(sorted_edges))
+    for u, v, d in sorted_edges[:top_n]:
+        x0, y0 = pos[u]
+        x1, y1 = pos[v]
+        w = d["weight"]
+        width = 1 + 5 * ((w - min_w) / w_range)
+        opacity = 0.3 + 0.5 * ((w - min_w) / w_range)
+        thick_edge_traces.append(go.Scatter(
+            x=[x0, x1, None], y=[y0, y1, None],
+            mode="lines",
+            line=dict(width=width, color=f"rgba(96,165,250,{opacity:.2f})"),
+            hoverinfo="text",
+            hovertext=f"{u} ↔ {v}<br>Вага: {w:,} рішень",
+            showlegend=False,
+        ))
+
     max_pr = max(pr.values()) if pr else 1
+    node_groups: dict[str, dict] = {}
     for node in G.nodes():
         parts = node.split(" ст. ", 1)
-        law = parts[0] if len(parts) == 2 else ""
-        size = 10 + 40 * (pr.get(node, 0) / max_pr)
+        law = parts[0] if len(parts) == 2 else "Інше"
+        article = parts[1] if len(parts) == 2 else node
         color = get_color(law)
-        title = (
+
+        if law not in node_groups:
+            node_groups[law] = {"x": [], "y": [], "text": [], "hover": [],
+                                "size": [], "color": color}
+
+        x, y = pos[node]
+        size = 8 + 40 * (pr.get(node, 0) / max_pr)
+        hover = (
             f"<b>{node}</b><br>"
             f"Зважений ступінь: {degree_dict.get(node, 0):,}<br>"
             f"PageRank: {pr.get(node, 0):.6f}<br>"
-            f"Зв'язки: {G.degree(node)}"
+            f"Зв'язків: {G.degree(node)}"
         )
-        net.add_node(node, label=parts[1] if len(parts) == 2 else node,
-                      title=title, size=size, color=color, group=law)
-
-    max_w = filtered["weight"].max()
-    for u, v, d in G.edges(data=True):
-        w = d["weight"]
-        width = 1 + 9 * (w / max_w)
-        net.add_edge(u, v, value=width,
-                     title=f"{u} ↔ {v}<br>Вага: {w:,} рішень")
-
-    net.set_options("""
-    {
-      "interaction": {
-        "hover": true,
-        "tooltipDelay": 100,
-        "navigationButtons": true,
-        "keyboard": true
-      },
-      "physics": {
-        "stabilization": {"iterations": 200}
-      }
-    }
-    """)
-
-    path = os.path.join(tempfile.gettempdir(), "graph.html")
-    net.save_graph(path)
-
-    with open(path, "r") as f:
-        html = f.read()
-
-    legend_items = "".join(
-        f'<span style="margin-right:12px;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:{c};margin-right:4px;vertical-align:middle;"></span>{k}</span>'
-        for k, c in DOMAIN_COLORS.items()
-        if any(k in n for n in G.nodes())
+        node_groups[law]["x"].append(x)
+        node_groups[law]["y"].append(y)
+        node_groups[law]["text"].append(f"ст. {article}")
+        node_groups[law]["hover"].append(hover)
+        node_groups[law]["size"].append(size)
+
+    node_traces = []
+    for group_name in sorted(node_groups.keys()):
+        data = node_groups[group_name]
+        node_traces.append(go.Scatter(
+            x=data["x"], y=data["y"],
+            mode="markers+text",
+            marker=dict(
+                size=data["size"],
+                color=data["color"],
+                line=dict(width=1.5, color="rgba(255,255,255,0.4)"),
+            ),
+            text=data["text"],
+            textposition="top center",
+            textfont=dict(size=9, color="#cbd5e1"),
+            hoverinfo="text",
+            hovertext=data["hover"],
+            name=shorten(group_name),
+        ))
+
+    fig = go.Figure(data=[edge_trace] + thick_edge_traces + node_traces)
+
+    fig.update_layout(
+        paper_bgcolor="#0f172a",
+        plot_bgcolor="#0f172a",
+        height=750,
+        margin=dict(l=5, r=5, t=45, b=5),
+        title=dict(
+            text=(f"Вузлів: {G.number_of_nodes()} | "
+                  f"Ребер: {G.number_of_edges()} | "
+                  f"Мін. вага: {filtered['weight'].min():,} | "
+                  f"Макс. вага: {filtered['weight'].max():,}"),
+            font=dict(size=13, color="#94a3b8"),
+            x=0.5,
+        ),
+        xaxis=dict(visible=False, showgrid=False, zeroline=False),
+        yaxis=dict(visible=False, showgrid=False, zeroline=False),
+        legend=dict(
+            font=dict(color="#e2e8f0", size=11),
+            bgcolor="rgba(15,23,42,0.9)",
+            bordercolor="rgba(71,85,105,0.5)",
+            borderwidth=1,
+            orientation="h",
+            yanchor="bottom",
+            y=1.02,
+            xanchor="center",
+            x=0.5,
+        ),
+        hoverlabel=dict(
+            bgcolor="#1e293b",
+            font_size=13,
+            font_color="#e2e8f0",
+            bordercolor="#475569",
+        ),
+        dragmode="pan",
     )
-    legend = f'<div style="padding:6px 12px;background:#16213e;color:#eee;font-size:13px;border-radius:6px;margin-bottom:4px;display:flex;flex-wrap:wrap;gap:4px;">{legend_items}</div>' if legend_items else ""
-
-    stats_html = (
-        f'<div style="padding:6px 12px;background:#0f3460;color:#eee;font-size:13px;border-radius:6px;margin-bottom:4px;">'
-        f'Вузлів: <b>{G.number_of_nodes()}</b> | '
-        f'Ребер: <b>{G.number_of_edges()}</b> | '
-        f'Мін. вага: <b>{filtered["weight"].min():,}</b> | '
-        f'Макс. вага: <b>{filtered["weight"].max():,}</b>'
-        f'</div>'
+
+    fig.update_layout(
+        modebar=dict(
+            bgcolor="rgba(15,23,42,0.8)",
+            color="#94a3b8",
+            activecolor="#60a5fa",
+        )
     )
 
-    return stats_html + legend + html
+    return fig
 
 
-def get_top_articles(n: int = 20):
+def get_top_articles(n: int = 30):
     top = stats_df.nlargest(n, "total_citations")[
         ["law_number", "law_article", "citation_type", "total_citations", "unique_decisions"]
     ].copy()
@@ -176,20 +265,13 @@ def get_communities():
     return df
 
 
-# ---------------------------------------------------------------------------
-# Gradio UI
-# ---------------------------------------------------------------------------
-
 with gr.Blocks(
     title="Ukrainian Court Citation Graph",
     theme=gr.themes.Base(
         primary_hue="blue",
         neutral_hue="slate",
     ),
-    css="""
-    .graph-container iframe { border: none; border-radius: 8px; }
-    footer { display: none !important; }
-    """,
+    css="footer { display: none !important; }",
 ) as demo:
     gr.Markdown(
         """
@@ -220,16 +302,14 @@ with gr.Blocks(
                     info="Топ-N найважчих ребер",
                 )
                 layout = gr.Radio(
-                    choices=["Barnes-Hut"],
-                    value="Barnes-Hut",
+                    choices=["Spring", "Kamada-Kawai"],
+                    value="Spring",
                     label="Алгоритм розташування",
                 )
                 btn = gr.Button("Побудувати граф", variant="primary", size="lg")
 
             with gr.Column(scale=3):
-                graph_output = gr.HTML(
-                    value="<div style='padding:40px;text-align:center;color:#666;'>Натисніть 'Побудувати граф' для візуалізації</div>",
-                )
+                graph_output = gr.Plot()
 
         btn.click(
             fn=build_graph,
@@ -239,24 +319,15 @@ with gr.Blocks(
 
     with gr.Tab("Топ статей за цитуваннями"):
         gr.Markdown("### Найбільш цитовані нормативні положення")
-        top_articles = gr.Dataframe(
-            value=get_top_articles(30),
-            interactive=False,
-        )
+        gr.Dataframe(value=get_top_articles(30), interactive=False)
 
     with gr.Tab("Centrality (PageRank, HITS)"):
         gr.Markdown("### Топ-20 за PageRank у графі со-цитувань")
-        centrality_table = gr.Dataframe(
-            value=get_top_centrality(),
-            interactive=False,
-        )
+        gr.Dataframe(value=get_top_centrality(), interactive=False)
 
     with gr.Tab("Спільноти (Louvain)"):
         gr.Markdown("### Виявлені спільноти за періодами (Louvain community detection)")
-        communities_table = gr.Dataframe(
-            value=get_communities(),
-            interactive=False,
-        )
+        gr.Dataframe(value=get_communities(), interactive=False)
 
     gr.Markdown(
         """

requirements.txt

@@ -3,5 +3,6 @@ huggingface_hub
 pandas
 pyarrow
 networkx
-pyvis
+plotly
 scipy
+numpy