Spaces:
Sleeping
Sleeping
| # 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 | |
| import plotly.graph_objects as go | |
| import numpy as np | |
| from collections import defaultdict | |
| # --------------------------- | |
| # 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" | |
| ] | |
| COMPANIES = [ | |
| "HDFC Bank", "ICICI Bank", "Bajaj Finance", "Bajaj Finserv", "Adani Ports", | |
| "Tata Motors", "Shriram Finance", "HAL", "TCS", "AU Small Finance Bank", | |
| "Pearl Global", "Hindalco", "Tata Elxsi", "Cummins India", "Vedanta" | |
| ] | |
| BUY_MAP = { | |
| "SBI MF": ["Bajaj Finance", "AU Small Finance Bank"], | |
| "ICICI Pru MF": ["HDFC Bank"], | |
| "HDFC MF": ["Tata Elxsi", "TCS"], | |
| "Nippon India MF": ["Hindalco"], | |
| "Kotak MF": ["Bajaj Finance"], | |
| "UTI MF": ["Adani Ports", "Shriram Finance"], | |
| "Axis MF": ["Tata Motors", "Shriram Finance"], | |
| "Aditya Birla SL MF": ["AU Small Finance Bank"], | |
| "Mirae MF": ["Bajaj Finance", "HAL"], | |
| "DSP MF": ["Tata Motors", "Bajaj Finserv"] | |
| } | |
| SELL_MAP = { | |
| "SBI MF": ["Tata Motors"], | |
| "ICICI Pru MF": ["Bajaj Finance", "Adani Ports"], | |
| "HDFC MF": ["HDFC Bank"], | |
| "Nippon India MF": ["Hindalco"], | |
| "Kotak MF": ["AU Small Finance Bank"], | |
| "UTI MF": ["Hindalco", "TCS"], | |
| "Axis MF": ["TCS"], | |
| "Aditya Birla SL MF": ["Adani Ports"], | |
| "Mirae MF": ["TCS"], | |
| "DSP MF": ["HAL", "Shriram Finance"] | |
| } | |
| 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) | |
| # --------------------------- | |
| # Graph construction | |
| # --------------------------- | |
| 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) | |
| 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})) | |
| return edge_list | |
| 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): | |
| 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"]]) | |
| if include_transfers: | |
| for s, b, attr in transfer_edges: | |
| if s in G.nodes and b in G.nodes: | |
| 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"]) | |
| return G | |
| # --------------------------- | |
| # Plotly drawing helper | |
| # --------------------------- | |
| def graph_to_plotly( | |
| 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) | |
| if d["type"] == "amc": | |
| node_color.append(node_color_amc); node_size.append(36) | |
| else: | |
| 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", 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] | |
| if "complete_exit" in acts: | |
| 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 | |
| elif "transfer" in acts: | |
| 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)) | |
| 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" | |
| )) | |
| fig = go.Figure(data=edge_traces + [node_trace]) | |
| # 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 | |
| # --------------------------- | |
| # 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] | |
| fresh = [a for a, comps in FRESH_BUY.items() if company_name in comps] | |
| 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), | |
| "AMC": buyers + sellers + fresh + exits | |
| }) | |
| if df.empty: | |
| return None, pd.DataFrame([], columns=["Role", "AMC"]) | |
| counts = df.groupby("Role").size().reset_index(name="Count") | |
| 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}", autosize=True, margin=dict(t=30,b=10)) | |
| return fig, df | |
| # --------------------------- | |
| # Initial graph | |
| # --------------------------- | |
| initial_graph = build_graph(include_transfers=True) | |
| initial_fig = graph_to_plotly(initial_graph) | |
| # --------------------------- | |
| # 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; | |
| } | |
| /* Ensure plot will shrink on small screens but remain legible */ | |
| .js-plotly-plot { | |
| height: 460px !important; | |
| } | |
| /* Make controls compact and finger-friendly */ | |
| .gradio-container .gr-input, .gradio-container .gr-button { | |
| width: 100% !important; | |
| } | |
| /* 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; } | |
| } | |
| /* 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") | |
| 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 trade table") | |
| 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 | |
| # --------------------------- | |
| 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, | |
| 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 | |
| def handle_company(company): | |
| fig, df = company_trade_summary(company) | |
| return fig, df | |
| def handle_amc(amc): | |
| 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() | |