Update app.py

app.py

@@ -1,427 +1,210 @@
 # app.py
-# Final fixed readable version (use this to replace your current app.py)
-# - ACCESS_CODE from HF Secrets (os.getenv("ACCESS_CODE"))
-# - Email + Access Code gate
-# - Logs attempts to session.log in repo root
-# - Readable multi-line D3 JS (radial outward labels + connected nodes)
-# - Inspect panels for Company and AMC
+# FINAL VERSION — Uses iframe to load D3 graph; login gate; session.log logging
 
+import gradio as gr
 import os
-import json
 import time
-from collections import defaultdict
 import pandas as pd
-import gradio as gr
 
-# --------------------
-# Config
-# --------------------
+# ===============================
+# CONFIG
+# ===============================
 ACCESS_CODE = os.getenv("ACCESS_CODE", "")
-LOG_FILE = "session.log"
-if not os.path.exists(LOG_FILE):
-    open(LOG_FILE, "w").close()
+LOGFILE = "session.log"
+
+# Create log file if missing
+if not os.path.exists(LOGFILE):
+    open(LOGFILE, "w").close()
+
 
-def write_log(email, code, ua, ok):
+def log_attempt(email, code, ua, ok):
+    """Append login attempts to session.log."""
     ts = time.strftime("%Y-%m-%d %H:%M:%S")
     status = "OK" if ok else "FAIL"
-    safe_code = (code[:2] + "***") if code else "<empty>"
-    ua = ua or "<ua?>"
-    line = f"{ts} | {status} | email={email} | code={safe_code} | ua={ua}\\n"
+    safe_code = code[:2] + "***" if code else "<none>"
+    ua = ua or "<no-ua>"
+    line = f"{ts} | {status} | email={email} | code={safe_code} | ua={ua}\n"
     try:
-        with open(LOG_FILE, "a") as f:
+        with open(LOGFILE, "a") as f:
             f.write(line)
     except Exception as e:
-        print("Failed writing log:", e)
-
-# --------------------
-# 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"]
-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)
-
-SHORT_LABELS = {"SBI MF":"SBI","ICICI Pru MF":"ICICI","HDFC MF":"HDFC","Nippon India MF":"NIPP","Kotak MF":"KOT","UTI MF":"UTI","Axis MF":"AXIS","Aditya Birla SL MF":"ABSL","Mirae MF":"MIR","DSP MF":"DSP","HDFC Bank":"HDFCB","ICICI Bank":"ICICB","Bajaj Finance":"BajFin","Bajaj Finserv":"BajFsv","Adani Ports":"AdPorts","Tata Motors":"TataM","Shriram Finance":"ShrFin","HAL":"HAL","TCS":"TCS","AU Small Finance Bank":"AUSFB","Pearl Global":"PearlG","Hindalco":"Hind","Tata Elxsi":"Elxsi","Cummins India":"Cumm","Vedanta":"Ved"}
-FULL_LABELS = {k: k for k in SHORT_LABELS}
-
-# --------------------
-# Transfers and ordering
-# --------------------
-def infer_transfers(buy_map, sell_map):
-    c2s = defaultdict(list)
-    c2b = defaultdict(list)
-    transfers = defaultdict(int)
-    for amc, comps in sell_map.items():
-        for c in comps:
-            c2s[c].append(amc)
-    for amc, comps in buy_map.items():
-        for c in comps:
-            c2b[c].append(amc)
-    for c in set(c2s) | set(c2b):
-        for s in c2s[c]:
-            for b in c2b[c]:
-                transfers[(s, b)] += 1
-    return transfers
-
-TRANSFER_COUNTS = infer_transfers(BUY_MAP, SELL_MAP)
-
-def mixed_order(amcs, companies):
-    out = []
-    m = max(len(amcs), len(companies))
-    for i in range(m):
-        if i < len(amcs): out.append(amcs[i])
-        if i < len(companies): out.append(companies[i])
-    return out
-
-NODES = mixed_order(AMCS, COMPANIES)
-NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
-
-def build_flows():
-    buys = []
-    sells = []
-    transfers = []
-    loops = set()
-    for amc, comps in BUY_MAP.items():
-        for c in comps:
-            w = 3 if c in FRESH_BUY.get(amc, []) else 1
-            buys.append((amc, c, w))
-    for amc, comps in SELL_MAP.items():
-        for c in comps:
-            w = 3 if c in COMPLETE_EXIT.get(amc, []) else 1
-            sells.append((c, amc, w))
-    for (s, b), w in TRANSFER_COUNTS.items():
-        transfers.append((s, b, w))
-    for a, c, _ in buys:
-        for c2, b, _ in sells:
-            if c == c2:
-                loops.add((a, c, b))
-    return buys, sells, transfers, list(loops)
-
-BUYS, SELLS, TRANSFER_LIST, LOOPS = build_flows()
-
-# --------------------
-# Inspect callbacks
-# --------------------
+        print("Log error:", e)
+
+
+# ===============================
+# INSPECT CALLBACKS
+# ===============================
+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"]
+}
+
 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]
+
     df = pd.DataFrame({
-        "Role": (["Buyer"] * len(buyers)) + (["Seller"] * len(sellers)) + (["Fresh buy"] * len(fresh)) + (["Complete exit"] * len(exits)),
-        "AMC": buyers + sellers + fresh + exits
+        "Role": (["Buyer"] * len(buyers)) + (["Seller"] * len(sellers)),
+        "AMC": buyers + sellers
     })
+
     if df.empty:
         return None, df
+
     counts = df.groupby("Role").size().reset_index(name="Count")
-    fig = {"data": [{"type":"bar", "x": counts["Role"].tolist(), "y": counts["Count"].tolist()}], "layout": {"title": f"Trades for {company}"}}
+    fig = {
+        "data": [{
+            "type": "bar",
+            "x": counts["Role"].tolist(),
+            "y": counts["Count"].tolist(),
+            "marker": {"color": ["green", "red"][: len(counts)]},
+        }],
+        "layout": {"title": f"Trades for {company}"}
+    }
+
     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]
         for b in buyers:
             transfers.append({"security": s, "buyer_amc": b})
+
     df = pd.DataFrame(transfers)
+
     if df.empty:
         return None, df
+
     counts = df["buyer_amc"].value_counts().reset_index()
     counts.columns = ["Buyer AMC", "Count"]
-    fig = {"data": [{"type":"bar", "x": counts["Buyer AMC"].tolist(), "y": counts["Count"].tolist()}], "layout": {"title": f"Inferred transfers from {amc}"}}
+
+    fig = {
+        "data": [{
+            "type": "bar",
+            "x": counts["Buyer AMC"].tolist(),
+            "y": counts["Count"].tolist(),
+            "marker": {"color": "gray"}
+        }],
+        "layout": {"title": f"Inferred transfers from {amc}"}
+    }
+
     return fig, df
 
-# --------------------
-# Readable JS template (multi-line)
-# --------------------
-JS_TEMPLATE = r"""
-<div id="arc-container" style="width:100%; height:720px;"></div>
-<div style="margin-top:8px;">
-  <button id="arc-reset" style="padding:8px 12px; border-radius:6px;">Reset</button>
-</div>
-<div style="margin-top:12px; font-family:sans-serif; font-size:13px;">
-  <b>Legend</b><br/>
-  <span style="color:#1a9850; font-weight:600;">BUY</span>: green solid<br/>
-  <span style="color:#d73027; font-weight:600;">SELL</span>: red dotted<br/>
-  <span style="color:#636363; font-weight:600;">TRANSFER</span>: grey (inferred)<br/>
-  <span style="color:#1f9e89; font-weight:600;">LOOP</span>: teal (external arc)<br/>
-  <div style="margin-top:6px;color:#666;font-size:12px;">Click a node to expand full label and show connected nodes' full labels (radial outward).</div>
-</div>
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script>
-const NODES = __NODES__;
-const NODE_TYPE = __NODE_TYPE__;
-const BUYS = __BUYS__;
-const SELLS = __SELLS__;
-const TRANSFERS = __TRANSFERS__;
-const LOOPS = __LOOPS__;
-const SHORT_LABEL = __SHORT_LABEL__;
-const FULL_LABEL = __FULL_LABEL__;
-
-function drawArc(){
-  const container = document.getElementById("arc-container");
-  container.innerHTML = "";
-  const w = Math.min(1000, container.clientWidth || 900);
-  const h = Math.max(520, Math.floor(w * 0.68));
-  const svg = d3.select(container).append("svg")
-    .attr("width","100%")
-    .attr("height", h)
-    .attr("viewBox", [-w/2, -h/2, w, h].join(" "));
-
-  const radius = Math.min(w,h) * 0.36;
-  const n = NODES.length;
-  function angle(i){ return (i/n) * 2 * Math.PI; }
-
-  const pos = NODES.map((name,i)=>{
-    const ang = angle(i) - Math.PI/2;
-    return { name, angle: ang, x: Math.cos(ang)*radius, y: Math.sin(ang)*radius };
-  });
-
-  const index = {};
-  NODES.forEach((nm,i)=> index[nm]=i);
-
-  const nodeG = svg.append("g").selectAll("g")
-    .data(pos).enter().append("g")
-    .attr("transform", d => `translate(${d.x},${d.y})`);
-
-  nodeG.append("circle")
-    .attr("r",18)
-    .style("fill", d => NODE_TYPE[d.name] === "amc" ? "#003f5c" : "#f59e0b")
-    .style("stroke","#111")
-    .style("stroke-width",1)
-    .style("cursor","pointer");
-
-  nodeG.append("text")
-    .attr("dy","0.35em")
-    .style("font-size","10px")
-    .style("fill","#fff")
-    .style("text-anchor","middle")
-    .style("pointer-events","none")
-    .text(d => SHORT_LABEL[d.name] || d.name);
-
-  function arcPath(x0,y0,x1,y1,above){
-    const mx=(x0+x1)/2, my=(y0+y1)/2;
-    const len=Math.sqrt(mx*mx+my*my) || 1;
-    const ux=mx/len, uy=my/len;
-    const offset = (above ? -1 : 1) * Math.max(36, radius*0.9);
-    const cx = mx + ux*offset, cy = my + uy*offset;
-    return `M ${x0} ${y0} Q ${cx} ${cy} ${x1} ${y1}`;
-  }
-
-  const allW = [].concat(BUYS.map(d=>d[2]), SELLS.map(d=>d[2]), TRANSFERS.map(d=>d[2]));
-  const sw = d3.scaleLinear().domain([1, Math.max(...allW,1)]).range([1.2,6]);
-
-  const buyG = svg.append("g");
-  BUYS.forEach(([a,c,w])=>{
-    if(!(a in index) || !(c in index)) return;
-    const s = pos[index[a]], t = pos[index[c]];
-    buyG.append("path")
-      .attr("d", arcPath(s.x,s.y,t.x,t.y,true))
-      .attr("stroke","#1a9850")
-      .attr("fill","none")
-      .attr("stroke-width", sw(w))
-      .attr("data-src", a)
-      .attr("data-tgt", c)
-      .attr("opacity", 0.92);
-  });
-
-  const sellG = svg.append("g");
-  SELLS.forEach(([c,a,w])=>{
-    if(!(c in index) || !(a in index)) return;
-    const s = pos[index[c]], t = pos[index[a]];
-    sellG.append("path")
-      .attr("d", arcPath(s.x,s.y,t.x,t.y,false))
-      .attr("stroke","#d73027")
-      .attr("fill","none")
-      .attr("stroke-dasharray","4,3")
-      .attr("stroke-width", sw(w))
-      .attr("data-src", c)
-      .attr("data-tgt", a)
-      .attr("opacity", 0.86);
-  });
-
-  const trG = svg.append("g");
-  TRANSFERS.forEach(([s,b,w])=>{
-    if(!(s in index) || !(b in index)) return;
-    const sp = pos[index[s]], tp = pos[index[b]];
-    const mx = (sp.x + tp.x)/2, my = (sp.y + tp.y)/2;
-    trG.append("path")
-      .attr("d", `M ${sp.x} ${sp.y} Q ${mx*0.3} ${my*0.3} ${tp.x} ${tp.y}`)
-      .attr("stroke","#636363")
-      .attr("fill","none")
-      .attr("stroke-width", sw(w))
-      .attr("opacity", 0.7)
-      .attr("data-src", s)
-      .attr("data-tgt", b);
-  });
-
-  const loopG = svg.append("g");
-  LOOPS.forEach(([a,c,b])=>{
-    if(!(a in index) || !(b in index)) return;
-    const sa = pos[index[a]], sb = pos[index[b]];
-    const mx = (sa.x + sb.x)/2, my = (sa.y + sb.y)/2;
-    const len = Math.sqrt((sa.x - sb.x)**2 + (sa.y - sb.y)**2);
-    const outward = Math.max(40, radius*0.28 + len*0.12);
-    const dx = mx, dy = my;
-    const nlen = Math.sqrt(dx*dx + dy*dy) || 1;
-    const ux = dx / nlen, uy = dy / nlen;
-    const cx = mx + ux*outward, cy = my + uy*outward;
-    const d = `M ${sa.x} ${sa.y} Q ${cx} ${cy} ${sb.x} ${sb.y}`;
-    loopG.append("path")
-      .attr("d", d)
-      .attr("stroke","#1f9e89")
-      .attr("fill","none")
-      .attr("stroke-width", 2.8)
-      .attr("opacity", 0.95);
-  });
-
-  const outsideLayer = svg.append("g").attr("class","outside-labels");
-
-  function placeOutsideLabels(names){
-    outsideLayer.selectAll("*").remove();
-    names.forEach(nm=>{
-      const p = pos[index[nm]];
-      const offset = radius + 30;
-      const x = p.x + Math.cos(p.angle)*offset;
-      const y = p.y + Math.sin(p.angle)*offset;
-      const deg = (p.angle * 180 / Math.PI);
-      const anchor = (deg > -90 && deg < 90) ? "start" : "end";
-      outsideLayer.append("text")
-        .attr("x", x)
-        .attr("y", y)
-        .attr("dy","0.35em")
-        .text(FULL_LABEL[nm] || nm)
-        .style("font-family","sans-serif")
-        .style("font-size","12px")
-        .style("fill","#0b1220")
-        .style("text-anchor", anchor);
-    });
-  }
-
-  function highlight(nodeName){
-    nodeG.selectAll("circle").style("opacity", d => d.name===nodeName ? 1.0 : 0.18);
-    nodeG.selectAll("text").style("opacity", d => d.name===nodeName ? 0.0 : 0.28);
-
-    const connected = new Set([nodeName]);
-    buyG.selectAll("path").each(function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); if(s===nodeName||t===nodeName){ connected.add(s); connected.add(t); }});
-    sellG.selectAll("path").each(function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); if(s===nodeName||t===nodeName){ connected.add(s); connected.add(t); }});
-    trG.selectAll("path").each(function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); if(s===nodeName||t===nodeName){ connected.add(s); connected.add(t); }});
-
-    placeOutsideLabels(Array.from(connected));
-
-    buyG.selectAll("path").style("opacity", function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); return (s===nodeName||t===nodeName) ? 0.98 : 0.06; });
-    sellG.selectAll("path").style("opacity", function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); return (s===nodeName||t===nodeName) ? 0.98 : 0.06; });
-    trG.selectAll("path").style("opacity", function(){ const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt"); return (s===nodeName||t===nodeName) ? 0.98 : 0.06; });
-  }
-
-  function resetView(){
-    nodeG.selectAll("circle").style("opacity",1.0);
-    nodeG.selectAll("text").style("opacity",1.0).text(d => SHORT_LABEL[d.name] || d.name);
-    buyG.selectAll("path").style("opacity",0.92);
-    sellG.selectAll("path").style("opacity",0.86);
-    trG.selectAll("path").style("opacity",0.7);
-    loopG.selectAll("path").style("opacity",0.95);
-    outsideLayer.selectAll("*").remove();
-  }
-
-  nodeG.selectAll("circle").on("click", function(event,d){ highlight(d.name); event.stopPropagation(); });
-  nodeG.selectAll("text").on("click", function(event,d){ highlight(d.name); event.stopPropagation(); });
-
-  document.getElementById("arc-reset").onclick = resetView;
-  svg.on("click", ()=> resetView());
-}
 
-drawArc();
-window.addEventListener("resize", drawArc);
-</script>
-"""
-
-# Build final HTML
-def make_arc_html():
-    html = JS_TEMPLATE
-    html = html.replace("__NODES__", json.dumps(NODES))
-    html = html.replace("__NODE_TYPE__", json.dumps(NODE_TYPE))
-    html = html.replace("__BUYS__", json.dumps(BUYS))
-    html = html.replace("__SELLS__", json.dumps(SELLS))
-    html = html.replace("__TRANSFERS__", json.dumps(TRANSFER_LIST))
-    html = html.replace("__LOOPS__", json.dumps(LOOPS))
-    html = html.replace("__SHORT_LABEL__", json.dumps(SHORT_LABELS))
-    html = html.replace("__FULL_LABEL__", json.dumps(FULL_LABELS))
-    return html
-
-ARC_HTML = make_arc_html()
-
-# Gate function
-def gate_fn(email, code, ua):
+# ===============================
+# GATE CHECK
+# ===============================
+def gate(email, code, ua):
     if not email or not code:
-        write_log(email or "<empty>", code or "<empty>", ua or "<ua?>", False)
-        return gr.update(visible=True), gr.update(visible=False), "Enter both email and access code."
-    if ACCESS_CODE and code.strip() == ACCESS_CODE:
-        write_log(email, code, ua or "<ua?>", True)
-        return gr.update(visible=False), gr.update(visible(True), visible=True), f"Access granted for {email}."
+        log_attempt(email, code, ua, False)
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            "❌ Enter both email and code."
+        )
+
+    if code.strip() == ACCESS_CODE:
+        log_attempt(email, code, ua, True)
+        return (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            f"✅ Access granted for {email}"
+        )
+
     else:
-        write_log(email, code, ua or "<ua?>", False)
-        return gr.update(visible=True), gr.update(visible=False), "Invalid access code."
+        log_attempt(email, code, ua, False)
+        return (
+            gr.update(visible=True),
+            gr.update(visible=False),
+            "❌ Invalid code."
+        )
 
-# NOTE: The two occurrences above using gr.update(visible(True), visible=True) are intentional mistakes to avoid.
-# The correct code below replaces gate_fn usage in the UI wiring.
 
-# Build UI
-with gr.Blocks(title="MF Churn — Secure Arc Diagram") as demo:
+# ===============================
+# UI
+# ===============================
+with gr.Blocks(css="body {background:#fafafa;}") as demo:
+
     gr.Markdown("## 🔒 Mutual Fund Churn — Secure Access")
 
+    # Gate login
     with gr.Column(visible=True) as gate_col:
-        email_box = gr.Textbox(label="Email")
-        code_box = gr.Textbox(label="Access Code", type="password")
-        ua_box = gr.Textbox(visible=False, elem_id="ua_box")
-        submit_btn = gr.Button("Unlock")
-        gate_msg = gr.Markdown("")
-        gr.HTML("<script>document.getElementById('ua_box').value = navigator.userAgent || '';</script>")
-
+        email = gr.Textbox(label="Email")
+        code = gr.Textbox(label="Access Code", type="password")
+        ua = gr.Textbox(visible=False, elem_id="ua_box")
+        gr.HTML("<script>document.getElementById('ua_box').value = navigator.userAgent;</script>")
+        btn = gr.Button("Unlock")
+        msg = gr.Markdown("")
+
+    # Real app
     with gr.Column(visible=False) as app_col:
-        gr.Markdown("### Arc Diagram (click node to expand labels)")
-        gr.HTML(ARC_HTML)
+        gr.Markdown("### 📊 Arc Diagram")
+
+        # Load the D3 visual from iframe
+        gr.HTML("""
+        <iframe src="graph.html" 
+                style="width:100%; height:820px; border:none; background:white;">
+        </iframe>
+        """)
+
         gr.Markdown("---")
-        gr.Markdown("### Inspect Company")
-        select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
-        company_plot = gr.Plot()
-        company_table = gr.DataFrame()
-        gr.Markdown("### Inspect AMC")
-        select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
+        gr.Markdown("### Company-level view")
+        sel_company = gr.Dropdown(choices=COMPANIES, label="Select company")
+        comp_plot = gr.Plot()
+        comp_table = gr.DataFrame()
+
+        gr.Markdown("### AMC-level view")
+        sel_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
         amc_plot = gr.Plot()
         amc_table = gr.DataFrame()
 
-    # Correct gate wrapper that performs the visibility updates
-    def gate_wrapper(email, code, ua):
-        if not email or not code:
-            write_log(email or "<empty>", code or "<empty>", ua or "<ua?>", False)
-            return gr.update(visible=True), gr.update(visible=False), "Enter both email and access code."
-        if ACCESS_CODE and code.strip() == ACCESS_CODE:
-            write_log(email, code, ua or "<ua?>", True)
-            return gr.update(visible=False), gr.update(visible=True), f"Access granted for {email}."
-        else:
-            write_log(email, code, ua or "<ua?>", False)
-            return gr.update(visible=True), gr.update(visible=False), "Invalid access code."
-
-    submit_btn.click(fn=gate_wrapper, inputs=[email_box, code_box, ua_box], outputs=[gate_col, app_col, gate_msg])
-
-    select_company.change(company_trade_summary, select_company, [company_plot, company_table])
-    select_amc.change(amc_transfer_summary, select_amc, [amc_plot, amc_table])
+    # Login callback
+    btn.click(
+        gate,
+        inputs=[email, code, ua],
+        outputs=[gate_col, app_col, msg]
+    )
+
+    # Inspect callbacks
+    sel_company.change(company_trade_summary, sel_company, [comp_plot, comp_table])
+    sel_amc.change(amc_transfer_summary, sel_amc, [amc_plot, amc_table])
+
 
 if __name__ == "__main__":
     demo.launch()