Update app.py

app.py

@@ -1,3 +1,7 @@
+# app.py — Mobile-first, HF-iframe-friendly Gradio app
+# Paste this into your Hugging Face Space (Gradio). Uses inline CSS to handle iframe constraints.
+# Requirements: gradio, networkx, plotly, pandas, numpy
+
 import gradio as gr
 import pandas as pd
 import networkx as nx
@@ -5,10 +9,9 @@ import plotly.graph_objects as go
 import numpy as np
 from collections import defaultdict
 
-# ============================================================
-# DATA
-# ============================================================
-
+# ---------------------------
+# Data (same sample dataset)
+# ---------------------------
 AMCS = [
     "SBI MF", "ICICI Pru MF", "HDFC MF", "Nippon India MF", "Kotak MF",
     "UTI MF", "Axis MF", "Aditya Birla SL MF", "Mirae MF", "DSP MF"
@@ -46,15 +49,8 @@ SELL_MAP = {
     "DSP MF": ["HAL", "Shriram Finance"]
 }
 
-COMPLETE_EXIT = {
-    "DSP MF": ["Shriram Finance"]
-}
-
-FRESH_BUY = {
-    "HDFC MF": ["Tata Elxsi"],
-    "UTI MF": ["Adani Ports"],
-    "Mirae MF": ["HAL"]
-}
+COMPLETE_EXIT = {"DSP MF": ["Shriram Finance"]}
+FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": ["HAL"]}
 
 
 def sanitize_map(m):
@@ -69,10 +65,9 @@ SELL_MAP = sanitize_map(SELL_MAP)
 COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
 FRESH_BUY = sanitize_map(FRESH_BUY)
 
-# ============================================================
-# GRAPH BUILDING
-# ============================================================
-
+# ---------------------------
+# Graph construction
+# ---------------------------
 company_edges = []
 for amc, comps in BUY_MAP.items():
     for c in comps:
@@ -92,22 +87,18 @@ def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
     company_to_sellers = defaultdict(list)
     company_to_buyers = defaultdict(list)
-
     for amc, comps in sell_map.items():
         for c in comps:
             company_to_sellers[c].append(amc)
-
     for amc, comps in buy_map.items():
         for c in comps:
             company_to_buyers[c].append(amc)
-
     for c in set(company_to_sellers.keys()) | set(company_to_buyers.keys()):
         sellers = company_to_sellers[c]
         buyers = company_to_buyers[c]
         for s in sellers:
             for b in buyers:
                 transfers[(s, b)] += 1
-
     edge_list = []
     for (s, b), w in transfers.items():
         edge_list.append((s, b, {"action": "transfer", "weight": w}))
@@ -119,13 +110,10 @@ transfer_edges = infer_amc_transfers(BUY_MAP, SELL_MAP)
 
 def build_graph(include_transfers=True):
     G = nx.DiGraph()
-
     for a in AMCS:
         G.add_node(a, type="amc")
-
     for c in COMPANIES:
         G.add_node(c, type="company")
-
     for u, v, attr in company_edges:
         if u in G.nodes and v in G.nodes:
             if G.has_edge(u, v):
@@ -133,7 +121,6 @@ def build_graph(include_transfers=True):
                 G[u][v]["actions"].append(attr["action"])
             else:
                 G.add_edge(u, v, weight=attr["weight"], actions=[attr["action"]])
-
     if include_transfers:
         for s, b, attr in transfer_edges:
             if s in G.nodes and b in G.nodes:
@@ -142,111 +129,74 @@ def build_graph(include_transfers=True):
                     G[s][b]["actions"].append("transfer")
                 else:
                     G.add_edge(s, b, weight=attr["weight"], actions=["transfer"])
-
     return G
 
-# ============================================================
-# PLOTLY NETWORK DRAWING
-# ============================================================
-
-
+# ---------------------------
+# Plotly drawing helper
+# ---------------------------
 def graph_to_plotly(
-        G,
-        node_color_amc="#9EC5FF",
-        node_color_company="#FFCF9E",
-        node_shape_amc="circle",
-        node_shape_company="circle",
-        edge_color_buy="#2ca02c",
-        edge_color_sell="#d62728",
-        edge_color_transfer="#888888",
-        edge_thickness_base=1.4,
-        show_labels=True
+    G,
+    node_color_amc="#9EC5FF",
+    node_color_company="#FFCF9E",
+    edge_color_buy="#2ca02c",
+    edge_color_sell="#d62728",
+    edge_color_transfer="#888888",
+    edge_thickness_base=1.4,
+    show_labels=True,
 ):
+    # spring layout - deterministic seed
     pos = nx.spring_layout(G, seed=42, k=1.2)
 
     node_x, node_y, node_text, node_color, node_size = [], [], [], [], []
-
     for n, d in G.nodes(data=True):
         x, y = pos[n]
-        node_x.append(x)
-        node_y.append(y)
-        node_text.append(n)
-
+        node_x.append(x); node_y.append(y); node_text.append(n)
         if d["type"] == "amc":
-            node_color.append(node_color_amc)
-            node_size.append(40)
+            node_color.append(node_color_amc); node_size.append(36)
         else:
-            node_color.append(node_color_company)
-            node_size.append(60)
+            node_color.append(node_color_company); node_size.append(56)
 
     node_trace = go.Scatter(
         x=node_x, y=node_y,
         mode="markers+text" if show_labels else "markers",
-        marker=dict(
-            color=node_color,
-            size=node_size,
-            line=dict(width=2, color="#222")
-        ),
-        text=node_text if show_labels else None,
-        textposition="top center"
+        marker=dict(color=node_color, size=node_size, line=dict(width=2, color="#222")),
+        text=node_text if show_labels else None, textposition="top center", hoverinfo="text"
     )
 
     edge_traces = []
-
     for u, v, attrs in G.edges(data=True):
         acts = attrs.get("actions", [])
         weight = attrs.get("weight", 1)
-
-        x0, y0 = pos[u]
-        x1, y1 = pos[v]
-
+        x0, y0 = pos[u]; x1, y1 = pos[v]
         if "complete_exit" in acts:
-            color = edge_color_sell
-            dash = "solid"
-            width = edge_thickness_base * 3
+            color = edge_color_sell; dash = "solid"; width = edge_thickness_base * 3
         elif "fresh_buy" in acts:
-            color = edge_color_buy
-            dash = "solid"
-            width = edge_thickness_base * 3
+            color = edge_color_buy; dash = "solid"; width = edge_thickness_base * 3
         elif "transfer" in acts:
-            color = edge_color_transfer
-            dash = "dash"
-            width = edge_thickness_base * (1 + np.log1p(weight))
+            color = edge_color_transfer; dash = "dash"; width = edge_thickness_base * (1 + np.log1p(weight))
         elif "sell" in acts:
-            color = edge_color_sell
-            dash = "dot"
-            width = edge_thickness_base * (1 + np.log1p(weight))
+            color = edge_color_sell; dash = "dot"; width = edge_thickness_base * (1 + np.log1p(weight))
         else:
-            color = edge_color_buy
-            dash = "solid"
-            width = edge_thickness_base * (1 + np.log1p(weight))
-
-        edge_traces.append(
-            go.Scatter(
-                x=[x0, x1, None],
-                y=[y0, y1, None],
-                mode="lines",
-                line=dict(color=color, width=width, dash=dash),
-                hoverinfo="none"
-            )
-        )
+            color = edge_color_buy; dash = "solid"; width = edge_thickness_base * (1 + np.log1p(weight))
+
+        edge_traces.append(go.Scatter(
+            x=[x0, x1, None], y=[y0, y1, None],
+            mode="lines", line=dict(color=color, width=width, dash=dash),
+            hoverinfo="none"
+        ))
 
     fig = go.Figure(data=edge_traces + [node_trace])
-    fig.update_layout(
-        showlegend=False,
-        height=900,
-        width=1400,
-        margin=dict(l=5, r=5, t=40, b=20),
-        xaxis=dict(visible=False),
-        yaxis=dict(visible=False)
-    )
+    # use autosize for better responsiveness inside iframe
+    fig.update_layout(showlegend=False,
+                      autosize=True,
+                      margin=dict(l=8, r=8, t=36, b=8),
+                      xaxis=dict(visible=False),
+                      yaxis=dict(visible=False))
     return fig
 
-# ============================================================
-# COMPANY & AMC INSPECTION
-# ============================================================
-
-
+# ---------------------------
+# Summaries (company/amc)
+# ---------------------------
 def company_trade_summary(company_name):
     buyers = [a for a, comps in BUY_MAP.items() if company_name in comps]
     sellers = [a for a, comps in SELL_MAP.items() if company_name in comps]
@@ -254,142 +204,123 @@ def company_trade_summary(company_name):
     exits = [a for a, comps in COMPLETE_EXIT.items() if company_name in comps]
 
     df = pd.DataFrame({
-        "Role": ["Buyer"] * len(buyers) + ["Seller"] * len(sellers)
-                + ["Fresh buy"] * len(fresh) + ["Complete exit"] * len(exits),
+        "Role": ["Buyer"] * len(buyers) + ["Seller"] * len(sellers) + ["Fresh buy"] * len(fresh) + ["Complete exit"] * len(exits),
         "AMC": buyers + sellers + fresh + exits
     })
 
     if df.empty:
         return None, pd.DataFrame([], columns=["Role", "AMC"])
-
     counts = df.groupby("Role").size().reset_index(name="Count")
-
-    fig = go.Figure(go.Bar(
-        x=counts["Role"],
-        y=counts["Count"],
-        marker_color=["green", "red", "orange", "black"][:len(counts)]
-    ))
-    fig.update_layout(
-        title_text=f"Trade summary for {company_name}",
-        height=300
-    )
+    colors = ["green", "red", "orange", "black"][:len(counts)]
+    fig = go.Figure(go.Bar(x=counts["Role"], y=counts["Count"], marker_color=colors))
+    fig.update_layout(title_text=f"Trade summary for {company_name}", autosize=True, margin=dict(t=30,b=10))
     return fig, df
 
 
 def amc_transfer_summary(amc_name):
     sold = SELL_MAP.get(amc_name, [])
     transfers = []
-
     for s in sold:
         buyers = [a for a, comps in BUY_MAP.items() if s in comps]
         for b in buyers:
             transfers.append({"security": s, "buyer_amc": b})
-
     df = pd.DataFrame(transfers)
-
     if df.empty:
         return None, pd.DataFrame([], columns=["security", "buyer_amc"])
-
     counts = df["buyer_amc"].value_counts().reset_index()
     counts.columns = ["Buyer AMC", "Count"]
-
-    fig = go.Figure(go.Bar(
-        x=counts["Buyer AMC"],
-        y=counts["Count"],
-        marker_color="lightslategray"
-    ))
-    fig.update_layout(
-        title_text=f"Inferred transfers from {amc_name}",
-        height=300
-    )
+    fig = go.Figure(go.Bar(x=counts["Buyer AMC"], y=counts["Count"], marker_color="lightslategray"))
+    fig.update_layout(title_text=f"Inferred transfers from {amc_name}", autosize=True, margin=dict(t=30,b=10))
     return fig, df
 
-# ============================================================
-# INITIAL GRAPH
-# ============================================================
-
+# ---------------------------
+# Initial graph
+# ---------------------------
 initial_graph = build_graph(include_transfers=True)
 initial_fig = graph_to_plotly(initial_graph)
 
-# ============================================================
-# GRADIO UI — CLEAN, FULL-WIDTH LAYOUT
-# ============================================================
+# ---------------------------
+# Mobile-first CSS (override HF iframe quirks)
+# ---------------------------
+responsive_css = """
+/* Remove excessive padding inside HF iframe */
+.gradio-container { padding: 0 !important; margin: 0 !important; }
+
+/* Make the plot area truly full-width */
+.plotly-graph-div, .js-plotly-plot, .output_plot {
+    width: 100% !important;
+    max-width: 100% !important;
+}
 
-with gr.Blocks() as demo:
-    gr.Markdown("## Mutual Fund Churn Explorer — Full Network & Transfer Analysis")
+/* Ensure plot will shrink on small screens but remain legible */
+.js-plotly-plot {
+    height: 460px !important;
+}
 
-    # === FULL-WIDTH NETWORK GRAPH AT THE TOP ===
-    network_plot = gr.Plot(
-        value=initial_fig,
-        label="Network graph (drag to zoom)"
-    )
+/* Make controls compact and finger-friendly */
+.gradio-container .gr-input, .gradio-container .gr-button {
+    width: 100% !important;
+}
 
-    # === SETTINGS BELOW THE GRAPH ===
-    with gr.Accordion("Network Customization", open=True):
-        node_color_company = gr.ColorPicker("#FFCF9E", label="Company node color")
-        node_color_amc = gr.ColorPicker("#9EC5FF", label="AMC node color")
+/* Accordion collapsed by default on mobile; larger touch targets */
+@media only screen and (max-width: 780px) {
+    .js-plotly-plot { height: 420px !important; }
+    .gr-accordion { font-size: 15px; }
+    .gradio-container { padding: 6px !important; }
+}
 
-        node_shape_company = gr.Dropdown(["circle", "square", "diamond"], value="circle",
-                                         label="Company node shape")
-        node_shape_amc = gr.Dropdown(["circle", "square", "diamond"], value="circle",
-                                     label="AMC node shape")
+/* Avoid horizontal scroll and ensure content uses available width */
+body, html { overflow-x: hidden !important; }
+"""
 
+# ---------------------------
+# Gradio UI (Blocks) — accordion closed by default (mobile-first)
+# ---------------------------
+with gr.Blocks(css=responsive_css, title="MF Churn Explorer (mobile-first)") as demo:
+    gr.Markdown("## Mutual Fund Churn Explorer — Mobile Friendly")
+    # Full-width network on top
+    network_plot = gr.Plot(value=initial_fig, label="Network graph (tap to zoom)")
+
+    # Controls in a collapsed accordion (closed by default to save vertical space)
+    with gr.Accordion("Network Customization — expand to edit", open=False):
+        node_color_company = gr.ColorPicker("#FFCF9E", label="Company node color")
+        node_color_amc = gr.ColorPicker("#9EC5FF", label="AMC node color")
+        node_shape_company = gr.Dropdown(["circle", "square", "diamond"], value="circle", label="Company node shape")
+        node_shape_amc = gr.Dropdown(["circle", "square", "diamond"], value="circle", label="AMC node shape")
         edge_color_buy = gr.ColorPicker("#2ca02c", label="BUY edge color")
         edge_color_sell = gr.ColorPicker("#d62728", label="SELL edge color")
         edge_color_transfer = gr.ColorPicker("#888888", label="Transfer edge color")
-
         edge_thickness = gr.Slider(0.5, 6.0, value=1.4, step=0.1, label="Edge thickness base")
         include_transfers = gr.Checkbox(value=True, label="Show AMC→AMC inferred transfers")
+        update_button = gr.Button("Update network")
 
-        update_button = gr.Button("Update Network Graph")
-
-    gr.Markdown("### Inspect a Company (buyers / sellers)")
-    select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
+    gr.Markdown("### Quick inspection (mobile)")
+    select_company = gr.Dropdown(choices=COMPANIES, label="Select company (buyers / sellers)")
     company_out_plot = gr.Plot(label="Company trade summary")
-    company_out_table = gr.DataFrame(label="Company table")
+    company_out_table = gr.DataFrame(label="Company trade table")
 
-    gr.Markdown("### Inspect an AMC (transfer analysis)")
-    select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
+    select_amc = gr.Dropdown(choices=AMCS, label="Select AMC (inferred transfers)")
     amc_out_plot = gr.Plot(label="AMC transfer summary")
     amc_out_table = gr.DataFrame(label="AMC transfer table")
 
-    # === CALLBACKS ===
-
+    # ---------------------------
+    # Callbacks
+    # ---------------------------
     def update_network(node_color_company_val, node_color_amc_val,
                        node_shape_company_val, node_shape_amc_val,
                        edge_color_buy_val, edge_color_sell_val, edge_color_transfer_val,
                        edge_thickness_val, include_transfers_val):
-
         G = build_graph(include_transfers=include_transfers_val)
-        fig = graph_to_plotly(
-            G,
-            node_color_amc=node_color_amc_val,
-            node_color_company=node_color_company_val,
-            node_shape_amc=node_shape_amc_val,
-            node_shape_company=node_shape_company_val,
-            edge_color_buy=edge_color_buy_val,
-            edge_color_sell=edge_color_sell_val,
-            edge_color_transfer=edge_color_transfer_val,
-            edge_thickness_base=edge_thickness_val,
-        )
+        fig = graph_to_plotly(G,
+                              node_color_amc=node_color_amc_val,
+                              node_color_company=node_color_company_val,
+                              edge_color_buy=edge_color_buy_val,
+                              edge_color_sell=edge_color_sell_val,
+                              edge_color_transfer=edge_color_transfer_val,
+                              edge_thickness_base=edge_thickness_val,
+                              show_labels=True)
         return fig
 
-    update_button.click(
-        update_network,
-        [
-            node_color_company,
-            node_color_amc,
-            node_shape_company,
-            node_shape_amc,
-            edge_color_buy,
-            edge_color_sell,
-            edge_color_transfer,
-            edge_thickness,
-            include_transfers,
-        ],
-        [network_plot]
-    )
-
     def handle_company(company):
         fig, df = company_trade_summary(company)
         return fig, df
@@ -398,9 +329,14 @@ with gr.Blocks() as demo:
         fig, df = amc_transfer_summary(amc)
         return fig, df
 
+    update_button.click(update_network,
+                        inputs=[node_color_company, node_color_amc, node_shape_company, node_shape_amc,
+                                edge_color_buy, edge_color_sell, edge_color_transfer, edge_thickness, include_transfers],
+                        outputs=[network_plot])
+
     select_company.change(handle_company, select_company, [company_out_plot, company_out_table])
     select_amc.change(handle_amc, select_amc, [amc_out_plot, amc_out_table])
 
-
+# Launch
 if __name__ == "__main__":
     demo.launch()