app.py

# 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()