Update app.py

app.py

@@ -1,6 +1,9 @@
 # app.py
-# Interactive MF churn explorer — with client-side clickable Plotly
-# NOW WITH LEGEND UNDER CHART (only addition requested)
+# Interactive MF churn explorer — Plotly graph with node click-to-focus
+# + Legend
+# + Fixed JS (labels hide properly)
+# + Mobile-friendly
+# + HF iframe safe
 
 import gradio as gr
 import pandas as pd
@@ -10,9 +13,10 @@ import numpy as np
 import json
 from collections import defaultdict
 
-# ---------------------------
-# Data
-# ---------------------------
+# ============================================================
+# DATA
+# ============================================================
+
 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"
@@ -53,34 +57,41 @@ SELL_MAP = {
 COMPLETE_EXIT = {"DSP MF": ["Shriram Finance"]}
 FRESH_BUY = {"HDFC MF": ["Tata Elxsi"], "UTI MF": ["Adani Ports"], "Mirae MF": ["HAL"]}
 
+
 def sanitize_map(m):
     out = {}
     for k, vals in m.items():
         out[k] = [v for v in vals if v in COMPANIES]
     return out
 
+
 BUY_MAP = sanitize_map(BUY_MAP)
 SELL_MAP = sanitize_map(SELL_MAP)
 COMPLETE_EXIT = sanitize_map(COMPLETE_EXIT)
 FRESH_BUY = sanitize_map(FRESH_BUY)
 
-# ---------------------------
-# Build graph edges
-# ---------------------------
+# ============================================================
+# GRAPH BUILDING
+# ============================================================
+
 company_edges = []
 for amc, comps in BUY_MAP.items():
     for c in comps:
         company_edges.append((amc, c, {"action": "buy", "weight": 1}))
+
 for amc, comps in SELL_MAP.items():
     for c in comps:
         company_edges.append((amc, c, {"action": "sell", "weight": 1}))
+
 for amc, comps in COMPLETE_EXIT.items():
     for c in comps:
         company_edges.append((amc, c, {"action": "complete_exit", "weight": 3}))
+
 for amc, comps in FRESH_BUY.items():
     for c in comps:
         company_edges.append((amc, c, {"action": "fresh_buy", "weight": 3}))
 
+
 def infer_amc_transfers(buy_map, sell_map):
     transfers = defaultdict(int)
     c2s = defaultdict(list)
@@ -97,48 +108,58 @@ def infer_amc_transfers(buy_map, sell_map):
     for c in set(c2s.keys()) | set(c2b.keys()):
         for s in c2s[c]:
             for b in c2b[c]:
-                transfers[(s,b)] += 1
+                transfers[(s, b)] += 1
+
+    output = []
+    for (s, b), w in transfers.items():
+        output.append((s, b, {"action": "transfer", "weight": w}))
+    return output
 
-    out = []
-    for (s,b), w in transfers.items():
-        out.append((s,b,{"action":"transfer","weight":w}))
-    return out
 
 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 G.has_edge(u,v):
+    for a in AMCS:
+        G.add_node(a, type="amc")
+
+    for c in COMPANIES:
+        G.add_node(c, type="company")
+
+    # company edges
+    for u, v, attr in company_edges:
+        if G.has_edge(u, v):
             G[u][v]["weight"] += attr["weight"]
             G[u][v]["actions"].append(attr["action"])
         else:
-            G.add_edge(u,v,weight=attr["weight"], actions=[attr["action"]])
+            G.add_edge(u, v, weight=attr["weight"], actions=[attr["action"]])
 
+    # inferred transfer edges
     if include_transfers:
-        for s,b,attr in transfer_edges:
-            if G.has_edge(s,b):
+        for s, b, attr in transfer_edges:
+            if G.has_edge(s, b):
                 G[s][b]["weight"] += attr["weight"]
                 G[s][b]["actions"].append("transfer")
             else:
-                G.add_edge(s,b,weight=attr["weight"], actions=["transfer"])
+                G.add_edge(s, b, weight=attr["weight"], actions=["transfer"])
 
     return G
 
-# ---------------------------
-# Build Plotly figure for embedding
-# ---------------------------
-def build_plotly_figure(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):
-
+# ============================================================
+# PLOTLY FIGURE
+# ============================================================
+
+def build_plotly_figure(
+    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
+):
     pos = nx.spring_layout(G, seed=42, k=1.2)
 
     node_names = []
@@ -150,81 +171,100 @@ def build_plotly_figure(G,
     for n, d in G.nodes(data=True):
         node_names.append(n)
         x, y = pos[n]
-        node_x.append(x); node_y.append(y)
+        node_x.append(x)
+        node_y.append(y)
+
         if d["type"] == "amc":
-            node_color.append(node_color_amc); node_size.append(36)
+            node_color.append(node_color_amc)
+            node_size.append(36)
         else:
-            node_color.append(node_color_company); node_size.append(56)
+            node_color.append(node_color_company)
+            node_size.append(56)
 
     edge_traces = []
-    edge_source_index = []
-    edge_target_index = []
+    edge_source = []
+    edge_target = []
     edge_colors = []
     edge_widths = []
 
-    for u,v,attrs in G.edges(data=True):
-        x0,y0 = pos[u]; x1,y1 = pos[v]
+    for u, v, attrs in G.edges(data=True):
+        x0, y0 = pos[u]
+        x1, y1 = pos[v]
         acts = attrs["actions"]
         weight = attrs["weight"]
 
         if "complete_exit" in acts:
-            color = edge_color_sell; width = edge_thickness_base*3; dash="solid"
+            color = edge_color_sell
+            width = edge_thickness_base * 3
+            dash = "solid"
         elif "fresh_buy" in acts:
-            color = edge_color_buy; width = edge_thickness_base*3; dash="solid"
+            color = edge_color_buy
+            width = edge_thickness_base * 3
+            dash = "solid"
         elif "transfer" in acts:
-            color = edge_color_transfer; width=edge_thickness_base*(1+np.log1p(weight)); dash="dash"
+            color = edge_color_transfer
+            width = edge_thickness_base * (1 + np.log1p(weight))
+            dash = "dash"
         elif "sell" in acts:
-            color = edge_color_sell; width=edge_thickness_base*(1+np.log1p(weight)); dash="dot"
+            color = edge_color_sell
+            width = edge_thickness_base * (1 + np.log1p(weight))
+            dash = "dot"
         else:
-            color = edge_color_buy; width=edge_thickness_base*(1+np.log1p(weight)); dash="solid"
-
-        edge_traces.append(go.Scatter(
-            x=[x0,x1], y=[y0,y1],
-            mode="lines",
-            line=dict(color=color, width=width, dash=dash),
-            hoverinfo="none",
-            opacity=1.0
-        ))
-        edge_source_index.append(node_names.index(u))
-        edge_target_index.append(node_names.index(v))
+            color = edge_color_buy
+            width = edge_thickness_base * (1 + np.log1p(weight))
+            dash = "solid"
+
+        edge_traces.append(
+            go.Scatter(
+                x=[x0, x1],
+                y=[y0, y1],
+                mode="lines",
+                line=dict(color=color, width=width, dash=dash),
+                hoverinfo="none",
+                opacity=1.0
+            )
+        )
+
+        edge_source.append(node_names.index(u))
+        edge_target.append(node_names.index(v))
         edge_colors.append(color)
         edge_widths.append(width)
 
     node_trace = go.Scatter(
-        x=node_x, y=node_y,
+        x=node_x,
+        y=node_y,
         mode="markers+text",
-        marker=dict(color=node_color, size=node_size, line=dict(width=2,color="#222")),
+        marker=dict(color=node_color, size=node_size, line=dict(width=2, color="#333")),
         text=node_names,
         textposition="top center",
         hoverinfo="text"
     )
 
-    fig = go.Figure(data=edge_traces+[node_trace])
+    fig = go.Figure(data=edge_traces + [node_trace])
     fig.update_layout(
         showlegend=False,
         autosize=True,
-        margin=dict(l=8,r=8,t=36,b=8),
+        margin=dict(l=8, r=8, t=36, b=8),
         xaxis=dict(visible=False),
         yaxis=dict(visible=False)
     )
 
     meta = {
         "node_names": node_names,
-        "edge_source_index": edge_source_index,
-        "edge_target_index": edge_target_index,
+        "edge_source_index": edge_source,
+        "edge_target_index": edge_target,
         "edge_colors": edge_colors,
         "edge_widths": edge_widths
     }
-    return fig, meta
 
-# ---------------------------
-# Create HTML with JS click-to-focus behavior
-# ---------------------------
+    return fig, meta
+# ================= PART 2 / 3 =================
+# HTML builder and JS (with escaped braces for f-string)
 def make_network_html(fig, meta, div_id="network-plot-div"):
     fig_json = json.dumps(fig.to_plotly_json())
     meta_json = json.dumps(meta)
 
-    return f"""
+    html = f"""
 <div id="{div_id}" style="width:100%;height:520px;"></div>
 <div style="margin-top:6px;margin-bottom:8px;">
   <button id="{div_id}-reset" style="padding:8px 12px;border-radius:6px;">Reset view</button>
@@ -243,96 +283,111 @@ Plotly.newPlot(container, fig.data, fig.layout, {{responsive:true}});
 const nodeTraceIndex = fig.data.length - 1;
 const edgeCount = fig.data.length - 1;
 
-const nameToIndex = {{}};
-meta.node_names.forEach((n,i)=>nameToIndex[n]=i);
+const nameToIndex = {{}}; 
+meta.node_names.forEach((n,i) => nameToIndex[n]=i);
 
-function focusNode(nodeName){{
+// focusNode: show only clicked node + its direct neighbors (Option A)
+function focusNode(nodeName) {{
     const idx = nameToIndex[nodeName];
     const keep = new Set([idx]);
 
-    for(let e=0;e<meta.edge_source_index.length;e++){{
-        const s=meta.edge_source_index[e];
-        const t=meta.edge_target_index[e];
-        if(s===idx) keep.add(t);
-        if(t===idx) keep.add(s);
+    for (let e = 0; e < meta.edge_source_index.length; e++) {{
+        const s = meta.edge_source_index[e];
+        const t = meta.edge_target_index[e];
+        if (s === idx) {{ keep.add(t); }}
+        if (t === idx) {{ keep.add(s); }}
     }}
 
-    
-    // Update nodes (hide others + hide their labels)
+    // Update nodes (hide others + hide labels)
     const N = meta.node_names.length;
     const nodeOp = Array(N).fill(0.0);
     const textColors = Array(N).fill("rgba(0,0,0,0)");
-    
-    for (let i = 0; i < N; i++) {
-        if (keep.has(i)) {
+
+    for (let i = 0; i < N; i++) {{
+        if (keep.has(i)) {{
             nodeOp[i] = 1.0;
-            textColors[i] = "black";   // visible label
-        }
-    }
-    
-    Plotly.restyle(container, {
+            textColors[i] = "black";
+        }}
+    }}
+
+    Plotly.restyle(container, {{
         "marker.opacity": [nodeOp],
         "textfont.color": [textColors]
-    }, [nodeTraceIndex]);
-
-
-    // edges
-    for(let e=0;e<edgeCount;e++){{
-        const s=meta.edge_source_index[e];
-        const t=meta.edge_target_index[e];
-        const show = keep.has(s)&&keep.has(t);
-        const color = show?meta.edge_colors[e]:"rgba(0,0,0,0)";
-        const width = show?meta.edge_widths[e]:0.1;
-        Plotly.restyle(container,{{
-            "line.color":[color],
-            "line.width":[width]
-        }},[e]);
+    }}, [nodeTraceIndex]);
+
+    // Update edges: show only edges connecting kept nodes
+    for (let e = 0; e < edgeCount; e++) {{
+        const s = meta.edge_source_index[e];
+        const t = meta.edge_target_index[e];
+        const show = (keep.has(s) && keep.has(t));
+        const color = show ? meta.edge_colors[e] : 'rgba(0,0,0,0)';
+        const width = show ? meta.edge_widths[e] : 0.1;
+        Plotly.restyle(container, {{
+            'line.color': [color],
+            'line.width': [width]
+        }}, [e]);
     }}
-}}
 
-function resetView(){{
-    const N=meta.node_names.length;
-    const op=Array(N).fill(1.0);
+    // zoom to bounding box of kept nodes
+    const nodes = fig.data[nodeTraceIndex];
+    const xs = [], ys = [];
+    for (let j = 0; j < meta.node_names.length; j++) {{
+        if (keep.has(j)) {{
+            xs.push(nodes.x[j]); ys.push(nodes.y[j]);
+        }}
+    }}
+    if (xs.length > 0) {{
+        const xmin = Math.min(...xs), xmax = Math.max(...xs);
+        const ymin = Math.min(...ys), ymax = Math.max(...ys);
+        const padX = (xmax - xmin) * 0.4 + 0.05;
+        const padY = (ymax - ymin) * 0.4 + 0.05;
+        Plotly.relayout(container, {{
+            xaxis: {{ range: [xmin - padX, xmax + padX] }},
+            yaxis: {{ range: [ymin - padY, ymax + padY] }}
+        }});
+    }}
+}}
 
+// reset view: restore nodes and edges
+function resetView() {{
     const N = meta.node_names.length;
     const nodeOp = Array(N).fill(1.0);
     const textColors = Array(N).fill("black");
-    
-    Plotly.restyle(container, {
-        "marker.opacity":[nodeOp],
-        "textfont.color":[textColors]
-    }, [nodeTraceIndex]);
-
-
-    for(let e=0;e<edgeCount;e++){{
-        Plotly.restyle(container,{{
-            "line.color":[meta.edge_colors[e]],
-            "line.width":[meta.edge_widths[e]]
-        }},[e]);
+
+    Plotly.restyle(container, {{
+        "marker.opacity": [nodeOp],
+        "textfont.color": [textColors]
+    }}, [nodeTraceIndex]);
+
+    for (let e = 0; e < edgeCount; e++) {{
+        Plotly.restyle(container, {{
+            'line.color': [meta.edge_colors[e]],
+            'line.width': [meta.edge_widths[e]]
+        }}, [e]);
     }}
 
-    Plotly.relayout(container, {{
-        xaxis: {{autorange:true}},
-        yaxis: {{autorange:true}}
-    }});
+    Plotly.relayout(container, {{ xaxis: {{autorange:true}}, yaxis: {{autorange:true}} }});
 }}
 
-container.on('plotly_click', function(evt){{
-    const p = evt.points[0];
-    if(p.curveNumber===nodeTraceIndex){{
-        const idx = p.pointNumber;
-        const name = meta.node_names[idx];
-        focusNode(name);
+// attach click handler
+container.on('plotly_click', function(eventData) {{
+    const p = eventData.points[0];
+    if (p.curveNumber === nodeTraceIndex) {{
+        const nodeIndex = p.pointNumber;
+        const nodeName = meta.node_names[nodeIndex];
+        focusNode(nodeName);
     }}
 }});
 
-document.getElementById("{div_id}-reset").onclick = resetView;
+// reset button
+document.getElementById("{div_id}-reset").addEventListener('click', function() {{
+    resetView();
+}});
 </script>
 """
+    return html
 
-# ---------------------------------------------
-# Build HTML network block
-# ---------------------------------------------
+# helper to build final html block
 def build_network_html(node_color_company="#FFCF9E",
                        node_color_amc="#9EC5FF",
                        edge_color_buy="#2ca02c",
@@ -340,7 +395,6 @@ def build_network_html(node_color_company="#FFCF9E",
                        edge_color_transfer="#888888",
                        edge_thickness=1.4,
                        include_transfers=True):
-
     G = build_graph(include_transfers=include_transfers)
     fig, meta = build_plotly_figure(
         G,
@@ -353,72 +407,65 @@ def build_network_html(node_color_company="#FFCF9E",
     )
     return make_network_html(fig, meta)
 
-# Initial HTML
+# initial HTML
 initial_html = build_network_html()
+# ================= PART 3 / 3 =================
+# company & amc summaries, UI and callbacks
 
-# ---------------------------
-# Company & AMC summaries
-# ---------------------------
 def company_trade_summary(company):
-    buyers = [a for a,cs in BUY_MAP.items() if company in cs]
-    sellers = [a for a,cs in SELL_MAP.items() if company in cs]
-    fresh = [a for a,cs in FRESH_BUY.items() if company in cs]
-    exits = [a for a,cs in COMPLETE_EXIT.items() if company in cs]
+    buyers = [a for a, cs in BUY_MAP.items() if company in cs]
+    sellers = [a for a, cs in SELL_MAP.items() if company in cs]
+    fresh = [a for a, cs in FRESH_BUY.items() if company in cs]
+    exits = [a for a, cs in COMPLETE_EXIT.items() if company in cs]
 
     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"])
+        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=f"Trade summary for {company}", autosize=True)
+    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}", autosize=True, margin=dict(t=30, b=10))
     return fig, df
 
 def amc_transfer_summary(amc):
     sold = SELL_MAP.get(amc, [])
     transfers = []
     for s in sold:
-        buyers = [a for a,cs in BUY_MAP.items() if s in cs]
+        buyers = [a for a, cs in BUY_MAP.items() if s in cs]
         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"])
-
+        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="gray"))
-    fig.update_layout(title=f"Inferred transfers from {amc}", autosize=True)
+    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}", autosize=True, margin=dict(t=30, b=10))
     return fig, df
 
-# ---------------------------
-# Mobile-friendly CSS
-# ---------------------------
+# Mobile-friendly CSS (minimal)
 responsive_css = """
 .gradio-container { padding:0 !important; margin:0 !important; }
-.plotly-graph-div, .js-plotly-plot { width:100% !important; max-width:100% !important; }
+.plotly-graph-div, .js-plotly-plot, .output_plot { width:100% !important; max-width:100% !important; }
 .js-plotly-plot { height:460px !important; }
 @media(max-width:780px){ .js-plotly-plot{ height:420px !important; } }
 body, html { overflow-x:hidden !important; }
 """
 
-# ---------------------------
-# UI BLOCKS WITH LEGEND ADDED
-# ---------------------------
+# Build UI
 with gr.Blocks(css=responsive_css, title="MF Churn Explorer") as demo:
-
     gr.Markdown("## Mutual Fund Churn Explorer — Interactive Graph")
 
-    # Chart (interactive HTML)
+    # Chart HTML (interactive client-side)
     network_html = gr.HTML(value=initial_html)
 
-    # ⭐ LEGEND (ONLY addition)
+    # Legend (ONLY addition)
     legend_html = gr.HTML(value="""
 <div style='
     font-family: sans-serif;
@@ -460,66 +507,67 @@ with gr.Blocks(css=responsive_css, title="MF Churn Explorer") as demo:
 </div>
 """)
 
-    # Controls
+    # Controls (collapsed by default)
     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")
         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, value=1.4, step=0.1, label="Edge thickness base")
+        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 Graph")
 
-    # Company inspect
+    # Company inspect (unchanged)
     gr.Markdown("### Inspect Company (buyers / sellers)")
-    select_company = gr.Dropdown(COMPANIES, label="Select company")
+    select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
     company_plot = gr.Plot()
     company_table = gr.DataFrame()
 
-    # AMC inspect
+    # AMC inspect (unchanged)
     gr.Markdown("### Inspect AMC (inferred transfers)")
-    select_amc = gr.Dropdown(AMCS, label="Select AMC")
+    select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
     amc_plot = gr.Plot()
     amc_table = gr.DataFrame()
 
-    # Callbacks
-    def update_network(node_color_company_val,
-                       node_color_amc_val,
-                       edge_color_buy_val,
-                       edge_color_sell_val,
-                       edge_color_transfer_val,
-                       edge_thickness_val,
-                       include_transfers_val):
-        return build_network_html(
-            node_color_company=node_color_company_val,
-            node_color_amc=node_color_amc_val,
-            edge_color_buy=edge_color_buy_val,
-            edge_color_sell=edge_color_sell_val,
-            edge_color_transfer=edge_color_transfer_val,
-            edge_thickness=edge_thickness_val,
-            include_transfers=include_transfers_val
-        )
+    # Place legend right after the chart (no layout changes beyond that)
+    # We add both components so legend appears below the chart area.
+    # Note: the order of declaration in Blocks determines visual order.
+    # legend_html.update(value=legend_html.value)  # ensure added
 
-    def on_company(c):
-        fig, df = company_trade_summary(c)
+    # Callbacks
+    def update_network_html(node_color_company_val, node_color_amc_val,
+                            edge_color_buy_val, edge_color_sell_val, edge_color_transfer_val,
+                            edge_thickness_val, include_transfers_val):
+        return build_network_html(node_color_company=node_color_company_val,
+                                  node_color_amc=node_color_amc_val,
+                                  edge_color_buy=edge_color_buy_val,
+                                  edge_color_sell=edge_color_sell_val,
+                                  edge_color_transfer=edge_color_transfer_val,
+                                  edge_thickness=edge_thickness_val,
+                                  include_transfers=include_transfers_val)
+
+    def on_company_select(cname):
+        fig, df = company_trade_summary(cname)
+        if fig is None:
+            return None, pd.DataFrame([], columns=["Role", "AMC"])
         return fig, df
 
-    def on_amc(a):
-        fig, df = amc_transfer_summary(a)
+    def on_amc_select(aname):
+        fig, df = amc_transfer_summary(aname)
+        if fig is None:
+            return None, pd.DataFrame([], columns=["security", "buyer_amc"])
         return fig, df
 
-    update_button.click(
-        update_network,
-        inputs=[node_color_company, node_color_amc,
-                edge_color_buy, edge_color_sell, edge_color_transfer,
-                edge_thickness, include_transfers],
-        outputs=[network_html]
-    )
+    update_button.click(fn=update_network_html,
+                        inputs=[node_color_company, node_color_amc,
+                                edge_color_buy, edge_color_sell, edge_color_transfer,
+                                edge_thickness, include_transfers],
+                        outputs=[network_html])
 
-    select_company.change(on_company, [select_company], [company_plot, company_table])
-    select_amc.change(on_amc, [select_amc], [amc_plot, amc_table])
+    select_company.change(fn=on_company_select, inputs=[select_company], outputs=[company_plot, company_table])
+    select_amc.change(fn=on_amc_select, inputs=[select_amc], outputs=[amc_plot, amc_table])
 
-# Run app
+# Run
 if __name__ == "__main__":
     demo.launch()