Update app.py

app.py

@@ -1,29 +1,45 @@
 # app.py
-# Final gated Arc Diagram app
-# - Email + Code gateway (code: CHATGPTROCKS)
-# - Logs success & failures to session.log
-# - Radial outward full labels on click + connected nodes show full labels
-# - High-contrast colors, legend restored
-# - No JS f-string escaping issues (JS injected via .replace)
+# Gated MF Arc Diagram — Final working version
+# - Email + Access Code gate
+# - ACCESS_CODE loaded from HF SECRETS
+# - session.log in root (success + fail, masked code)
+# - Fully working arc diagram (no JS issues)
 
 import gradio as gr
-import pandas as pd
+import os
 import json
 import time
-import os
+import pandas as pd
 from collections import defaultdict
 
-# ---------------------------
-# Config
-# ---------------------------
-import os
-ACCESS_CODE = os.getenv("ACCESS_CODE", "")
-LOG_FILE = "session.log"  # will be created/used in repo root
-os.makedirs(os.path.dirname(LOG_FILE) or ".", exist_ok=True)
+# ============================================================
+# CONFIG
+# ============================================================
+ACCESS_CODE = os.getenv("ACCESS_CODE", "")  # From HF Secrets
+LOG_FILE = "session.log"  # writes in repo root
+if not os.path.exists(LOG_FILE):
+    open(LOG_FILE, "w").close()  # create empty file if missing
+
+
+def log_event(email, code, ua, ok):
+    """Append login attempt to session.log (masked code for safety)."""
+    timestamp = 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"{timestamp} | {status} | email={email} | code={safe_code} | ua={ua}\n"
+    try:
+        with open(LOG_FILE, "a") as f:
+            f.write(line)
+    except Exception as e:
+        print("Logging failed:", e)
+
+
+# ============================================================
+# DATA
+# ============================================================
 
-# ---------------------------
-# Data (same source)
-# ---------------------------
 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,7 +62,7 @@ BUY_MAP = {
     "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"],
@@ -64,20 +80,20 @@ 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 = {}
+    sanitized = {}
     for k, vals in m.items():
-        out[k] = [v for v in vals if v in COMPANIES]
-    return out
+        sanitized[k] = [v for v in vals if v in COMPANIES]
+    return sanitized
+
 
 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 + full labels
-# ---------------------------
+# short and full labels
 SHORT_LABELS = {
     "SBI MF": "SBI", "ICICI Pru MF": "ICICI", "HDFC MF": "HDFC",
     "Nippon India MF": "NIPP", "Kotak MF": "KOT", "UTI MF": "UTI",
@@ -92,114 +108,145 @@ SHORT_LABELS = {
     "Hindalco": "Hind", "Tata Elxsi": "Elxsi",
     "Cummins India": "Cumm", "Vedanta": "Ved"
 }
-FULL_LABEL = {k: k for k in SHORT_LABELS}
+FULL_LABELS = {k: k for k in SHORT_LABELS}
 
-# ---------------------------
-# Infer AMC→AMC transfers
-# ---------------------------
-def infer_amc_transfers(buy_map, sell_map):
-    transfers = defaultdict(int)
+
+# ============================================================
+# TRANSFERS + LOOPS
+# ============================================================
+
+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 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 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_amc_transfers(BUY_MAP, SELL_MAP)
 
-# ---------------------------
-# Mixed ordering
-# ---------------------------
-def build_mixed_ordering(amcs, companies):
-    mixed = []
-    n = max(len(amcs), len(companies))
-    for i in range(n):
-        if i < len(amcs): mixed.append(amcs[i])
-        if i < len(companies): mixed.append(companies[i])
-    return mixed
+TRANSFERS = infer_transfers(BUY_MAP, SELL_MAP)
 
-NODES = build_mixed_ordering(AMCS, COMPANIES)
+# For arc ordering
+def build_order(amcs, companies):
+    seq = []
+    m = max(len(amcs), len(companies))
+    for i in range(m):
+        if i < len(amcs): seq.append(amcs[i])
+        if i < len(companies): seq.append(companies[i])
+    return seq
+
+
+NODES = build_order(AMCS, COMPANIES)
 NODE_TYPE = {n: ("amc" if n in AMCS else "company") for n in NODES}
 
-# ---------------------------
-# Build flows
-# ---------------------------
+
 def build_flows():
-    buys, sells, transfers, loops = [], [], [], []
+    buys = []
+    sells = []
+    transfers = []
+    loops = set()
+
+    # buys
     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))
+
+    # sells
     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
+    for (s, b), w in TRANSFERS.items():
         transfers.append((s, b, w))
-    seen = set()
+
+    # loops
     for a, c, _ in buys:
         for c2, b, _ in sells:
             if c == c2:
-                seen.add((a, c, b))
-    loops = list(seen)
-    return buys, sells, transfers, loops
+                loops.add((a, c, b))
 
-BUYS, SELLS, TRANSFERS, LOOPS = build_flows()
+    return buys, sells, transfers, list(loops)
 
-# ---------------------------
-# Logging helper
-# ---------------------------
-def write_log(timestamp, email, code, ua, ok):
-    # mask code in logs for security? we'll log full code as requested; you can mask if needed
-    status = "OK" if ok else "FAIL"
-    line = f"{timestamp} | {status} | email: {email} | code: {code} | ua: {ua}\n"
-    try:
-        with open(LOG_FILE, "a") as f:
-            f.write(line)
-    except Exception as e:
-        print("Log write failed:", e)
 
-# ---------------------------
-# Gate callback
-# ---------------------------
-def check_access(email, code, ua):
-    now = time.strftime("%Y-%m-%d %H:%M:%S")
-    if (not email) or (not code):
-        write_log(now, email or "<empty>", code or "<empty>", ua or "<ua?>", False)
-        return gr.update(visible=True), gr.update(visible=False), "Please provide both email and code."
-    if code.strip() == ACCESS_CODE:
-        # success: log and reveal app
-        write_log(now, email, code, ua or "<ua?>", True)
-        return gr.update(visible=False), gr.update(visible=True), f"Access granted for {email}."
-    else:
-        write_log(now, email, code, ua or "<ua?>", False)
-        return gr.update(visible=True), gr.update(visible=False), "Invalid code."
+BUYS, SELLS, TRANSFER_LIST, LOOPS = build_flows()
+
+# ============================================================
+# Inspect functions
+# ============================================================
+
+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]
+    exiters = [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(exiters),
+        "AMC": buyers + sellers + fresh + exiters
+    })
+
+    if df.empty:
+        return None, df
+
+    counts = df.groupby("Role").size().reset_index(name="Count")
+    fig = {
+        "data": [{"type": "bar", "x": counts["Role"], "y": counts["Count"]}],
+        "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"], "y": counts["Count"]}],
+        "layout": {"title": f"Inferred transfers from {amc}"}
+    }
+    return fig, df
 
-# ---------------------------
-# JS Template for arc diagram
-# (raw string; placeholders replaced with .replace())
-# ---------------------------
-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:10px; font-family:sans-serif; font-size:13px;">
-  <b>Legend</b><br/>
-  <span style="display:inline-block;width:12px;height:8px;background:#1a9850;margin-right:6px;"></span> BUY (green solid)<br/>
-  <span style="display:inline-block;width:12px;height:8px;background:#d73027;margin-right:6px;border-bottom:3px dotted #d73027;"></span> SELL (red dotted)<br/>
-  <span style="display:inline-block;width:12px;height:8px;background:#636363;margin-right:6px;"></span> TRANSFER (grey, inferred)<br/>
-  <span style="display:inline-block;width:12px;height:8px;background:#1f9e89;margin-right:6px;"></span> LOOP (teal external arc)<br/>
-  <div style="margin-top:6px;color:#666;font-size:12px;">Click node to expand full label and show connected nodes' labels (radial outward).</div>
+# ============================================================
+# JS Template (safe raw string, placeholders replaced)
+# ============================================================
+JS_TEMPLATE = r"""
+<div id="arc-container" style="width:100%;height:720px;"></div>
+<button id="arc-reset" style="margin-top:10px;padding:6px 10px;">Reset</button>
+
+<div style="margin-top:12px;font-size:14px;font-family:sans-serif;">
+  <b>Legend</b><br>
+  <span style="color:#1a9850;font-weight:bold;">BUY</span>: green solid<br>
+  <span style="color:#d73027;font-weight:bold;">SELL</span>: red dotted<br>
+  <span style="color:#636363;font-weight:bold;">TRANSFER</span>: grey chords (inferred)<br>
+  <span style="color:#1f9e89;font-weight:bold;">LOOP</span>: teal external arcs<br>
+  <div style="margin-top:6px;font-size:12px;color:#777;">Click a node to expand full label and connected labels.</div>
 </div>
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
@@ -210,285 +257,288 @@ const BUYS = __BUYS__;
 const SELLS = __SELLS__;
 const TRANSFERS = __TRANSFERS__;
 const LOOPS = __LOOPS__;
+const SHORT_LABEL = __SHORT_LABEL__;
+const FULL_LABEL = __FULL_LABEL__;
 
-const SHORT_LABEL_JS = __SHORT_LABEL__;
-const FULL_LABEL_JS = __FULL_LABEL__;
-
-// draw routine
-function draw() {
+function draw(){
     const container = document.getElementById("arc-container");
     container.innerHTML = "";
-    const w = Math.min(980, container.clientWidth || 860);
-    const h = Math.max(540, Math.floor(w * 0.75));
+    const width = Math.min(980, container.clientWidth || 860);
+    const height = Math.max(540, Math.floor(width * 0.75));
     const svg = d3.select(container).append("svg")
         .attr("width","100%")
-        .attr("height",h)
-        .attr("viewBox",[-w/2,-h/2,w,h].join(" "));
+        .attr("height",height)
+        .attr("viewBox",[-width/2, -height/2, width, height].join(" "));
 
-    const radius = Math.min(w,h)*0.36;
+    const radius = Math.min(width,height)*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;
+        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);
+    NODES.forEach((nm,i)=>index[nm]=i);
 
-    // group for nodes
-    const g = svg.append("g").selectAll("g")
+    const nodeG = svg.append("g").selectAll("g")
         .data(pos).enter().append("g")
         .attr("transform", d => `translate(${d.x},${d.y})`);
 
-    g.append("circle")
-        .attr("r", 16)
-        .style("fill", d => NODE_TYPE[d.name] === "amc" ? "#003f5c" : "#f59e0b")
-        .style("stroke", "#111")
-        .style("stroke-width", 1)
+    nodeG.append("circle")
+        .attr("r",16)
+        .style("fill",d=>NODE_TYPE[d.name]==="amc"?"#003f5c":"#f59e0b")
+        .style("stroke","#111").style("stroke-width",1)
         .style("cursor","pointer");
 
-    // short labels inside
-    g.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_JS[d.name] || d.name);
-
-    // helper bezier
-    function arcPath(x0,y0,x1,y1,above=true){
+    nodeG.append("text")
+        .text(d=>SHORT_LABEL[d.name])
+        .attr("dy","0.35em")
+        .attr("fill","#fff")
+        .style("font-size","10px")
+        .style("pointer-events","none")
+        .style("text-anchor","middle");
+
+    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 dx=mx, dy=my;
+        const len=Math.sqrt(dx*dx+dy*dy)||1;
+        const ux=dx/len, uy=dy/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 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]);
 
-    // BUY arcs (top)
     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]];
+        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("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);
+            .attr("stroke-width",sw(w))
+            .attr("data-src",a)
+            .attr("data-tgt",c)
+            .attr("opacity",0.92);
     });
 
-    // SELL arcs (bottom)
     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]];
+        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("d",arcPath(s.x,s.y,t.x,t.y,false))
             .attr("stroke","#d73027")
+            .style("stroke-dasharray","4,3")
             .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);
+            .attr("stroke-width",sw(w))
+            .attr("data-src",c)
+            .attr("data-tgt",a)
+            .attr("opacity",0.86);
     });
 
-    // TRANSFERS grey chords
     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;
-        const path = `M ${sp.x} ${sp.y} Q ${mx*0.3} ${my*0.3} ${tp.x} ${tp.y}`;
+        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", path)
-            .attr("stroke", "#636363")
+            .attr("d",`M ${sp.x} ${sp.y} Q ${mx*0.3} ${my*0.3} ${tp.x} ${tp.y}`)
+            .attr("stroke","#636363")
+            .attr("stroke-width",sw(w))
             .attr("fill","none")
-            .attr("stroke-width", sw(w))
-            .attr("opacity", 0.7)
-            .attr("data-src", s)
-            .attr("data-tgt", b);
+            .attr("opacity",0.7)
+            .attr("data-src",s)
+            .attr("data-tgt",b);
     });
 
-    // LOOPS outside
     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 ndx = mx, ndy = my;
-        const nlen = Math.sqrt(ndx*ndx + ndy*ndy) || 1;
-        const ux = ndx/nlen, uy = ndy/nlen;
-        const cx = mx + ux*outward, cy = my + uy*outward;
-        const path = `M ${sa.x} ${sa.y} Q ${cx} ${cy} ${sb.x} ${sb.y}`;
+        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", path)
-            .attr("stroke", "#1f9e89")
+            .attr("d",d)
+            .attr("stroke","#1f9e89")
             .attr("fill","none")
-            .attr("stroke-width", 2.8)
-            .attr("opacity", 0.95);
+            .attr("stroke-width",2.8)
+            .attr("opacity",0.95);
     });
 
-    // outside label layer (initially empty)
-    const outsideLabelLayer = svg.append("g").attr("class","outside-labels");
-
-    // helper to place radial outside labels
-    function placeOutsideLabels(names){
-        outsideLabelLayer.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";
-            outsideLabelLayer.append("text")
-                .attr("x", x)
-                .attr("y", y)
-                .attr("dy", "0.35em")
-                .text(FULL_LABEL_JS[nm] || nm)
-                .style("font-family","sans-serif")
+    const outside = svg.append("g");
+
+    function showOutside(names){
+        outside.selectAll("*").remove();
+        names.forEach(nm=>{
+            const p=pos[index[nm]];
+            const dist=radius+30;
+            const x=p.x + Math.cos(p.angle)*dist;
+            const y=p.y + Math.sin(p.angle)*dist;
+            const deg=(p.angle*180/Math.PI);
+            const anchor=(deg>-90 && deg<90)?"start":"end";
+            outside.append("text")
+                .attr("x",x)
+                .attr("y",y)
+                .attr("dy","0.35em")
+                .text(FULL_LABEL[nm])
                 .style("font-size","12px")
-                .style("fill","#0b1220")
-                .style("text-anchor", anchor)
-                .style("background","white");
+                .style("font-family","sans-serif")
+                .style("fill","#111")
+                .style("text-anchor",anchor);
         });
     }
 
-    // highlight behavior: show full label for node and its connected nodes
-    function highlight(nodeName){
-        // dim non-related nodes
-        g.selectAll("circle").style("opacity", d => d.name === nodeName ? 1.0 : 0.18);
-        // set inside short labels to less prominent
-        g.selectAll("text").style("opacity", d => d.name === nodeName ? 0.0 : 0.28);
+    function reset(){
+        nodeG.selectAll("circle").style("opacity",1);
+        nodeG.selectAll("text").style("opacity",1).text(d=>SHORT_LABEL[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);
+        outside.selectAll("*").remove();
+    }
+
+    function highlight(node){
+        nodeG.selectAll("circle").style("opacity",d=>d.name===node?1:0.18);
+        nodeG.selectAll("text").style("opacity",0.2);
+
+        const connected=new Set([node]);
 
-        // find connected nodes (sources/targets)
-        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); }
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            if(s===node||t===node){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); }
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            if(s===node||t===node){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); }
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            if(s===node||t===node){connected.add(s);connected.add(t);}
         });
 
-        // show outside labels for all connected nodes (including clicked)
-        placeOutsideLabels(Array.from(connected));
+        showOutside(Array.from(connected));
 
-        // fade arcs except the relevant ones
-        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;
+        buyG.selectAll("path").style("opacity",function(){
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            return (s===node||t===node)?1: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;
+        sellG.selectAll("path").style("opacity",function(){
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            return (s===node||t===node)?1: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;
+        trG.selectAll("path").style("opacity",function(){
+            const s=this.getAttribute("data-src"), t=this.getAttribute("data-tgt");
+            return (s===node||t===node)?1:0.06;
         });
     }
 
-    function reset(){
-        g.selectAll("circle").style("opacity",1.0);
-        g.selectAll("text").style("opacity",1.0).text(d => SHORT_LABEL_JS[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);
-        outsideLabelLayer.selectAll("*").remove();
-    }
+    nodeG.selectAll("circle").on("click",(e,d)=>{highlight(d.name);e.stopPropagation();});
+    nodeG.selectAll("text").on("click",(e,d)=>{highlight(d.name);e.stopPropagation();});
 
-    g.selectAll("circle").on("click", function(e,d){ highlight(d.name); e.stopPropagation(); });
-    g.selectAll("text").on("click", function(e,d){ highlight(d.name); e.stopPropagation(); });
+    document.getElementById("arc-reset").onclick=reset;
 
-    document.getElementById("arc-reset").onclick = reset;
-    svg.on("click", function(){ reset(); });
+    svg.on("click", ()=>reset());
 }
 
-// initial draw & responsive
 draw();
 window.addEventListener("resize", draw);
 </script>
 """
 
-# ---------------------------
-# make html with replacements
-# ---------------------------
+
+# ============================================================
+# HTML builder
+# ============================================================
+
 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(TRANSFERS))
+    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_LABEL))
+    html = html.replace("__FULL_LABEL__", json.dumps(FULL_LABELS))
     return html
 
+
 ARC_HTML = make_arc_html()
 
-# ---------------------------
-# Gradio UI with gate
-# ---------------------------
-with gr.Blocks(title="MF Churn — Gated Arc Diagram") as demo:
-    gr.Markdown("## Mutual Fund Churn — Access Controlled")
-    # Gate container
-    with gr.Row(visible=True) as gate_row:
-        with gr.Column():
-            gr.Markdown("**Enter your email and access code**")
-            email_input = gr.Textbox(label="Email", placeholder="you@example.com")
-            code_input = gr.Textbox(label="Access code", placeholder="Enter access code")
-            ua_hidden = gr.Textbox(value="", visible=False, elem_id="ua_field")
-            submit_btn = gr.Button("Unlock")
-            gate_status = gr.Markdown("")
-            # small JS to capture user-agent into hidden field
-            gr.HTML("<script>document.getElementById('ua_field').value = navigator.userAgent || ''; </script>")
-
-    # App container hidden until auth
+# ============================================================
+# Gate callback
+# ============================================================
+
+def gate_fn(email, code, ua):
+    if not email or not code:
+        log_event(email or "<empty>", code or "<empty>", ua, False)
+        return gr.update(visible=True), gr.update(visible=False), "Enter both email and access code."
+
+    if code.strip() == ACCESS_CODE:
+        log_event(email, code, ua, True)
+        return gr.update(visible=False), gr.update(visible=True), f"Access granted for {email}."
+    else:
+        log_event(email, code, ua, False)
+        return gr.update(visible=True), gr.update(visible=False), "Invalid access code."
+
+
+# ============================================================
+# UI
+# ============================================================
+
+with gr.Blocks(title="MF Churn — Secure Arc Diagram") as demo:
+    gr.Markdown("## 🔒 Mutual Fund Churn — Secure Access")
+
+    # Gate
+    with gr.Column(visible=True) as gate_col:
+        email_box = gr.Textbox(label="Email")
+        pass_box = gr.Textbox(label="Access Code", type="password")
+        ua_box = gr.Textbox(visible=False, elem_id="ua_box")
+        login_btn = gr.Button("Login")
+        gate_msg = gr.Markdown()
+        gr.HTML("<script>document.getElementById('ua_box').value = navigator.userAgent;</script>")
+
+    # App
     with gr.Column(visible=False) as app_col:
-        gr.Markdown("### Diagram (click a node to expand labels)")
-        arc_html = gr.HTML(ARC_HTML)
+        gr.Markdown("### Arc Diagram (Click nodes to expand labels)")
+        gr.HTML(ARC_HTML)
+
         gr.Markdown("---")
-        gr.Markdown("### Inspect Company / AMC")
-        select_company = gr.Dropdown(choices=COMPANIES, label="Select company")
+        gr.Markdown("### Inspect Company")
+        select_company = gr.Dropdown(COMPANIES)
         company_plot = gr.Plot()
         company_table = gr.DataFrame()
-        select_amc = gr.Dropdown(choices=AMCS, label="Select AMC")
+
+        gr.Markdown("### Inspect AMC")
+        select_amc = gr.Dropdown(AMCS)
         amc_plot = gr.Plot()
         amc_table = gr.DataFrame()
 
-    # Wire up gate
-    submit_btn.click(fn=check_access,
-                     inputs=[email_input, code_input, ua_hidden],
-                     outputs=[gate_row, app_col, gate_status])
-
-    # inspectors unchanged
-    def company_cb(c):
-        return company_trade_summary(c) if c else (None, pd.DataFrame([], columns=["Role","AMC"]))
-    def amc_cb(a):
-        return amc_transfer_summary(a) if a else (None, pd.DataFrame([], columns=["security","buyer_amc"]))
+    login_btn.click(
+        fn=gate_fn,
+        inputs=[email_box, pass_box, ua_box],
+        outputs=[gate_col, app_col, gate_msg]
+    )
 
-    select_company.change(fn=company_cb, inputs=[select_company], outputs=[company_plot, company_table])
-    select_amc.change(fn=amc_cb, inputs=[select_amc], outputs=[amc_plot, amc_table])
+    select_company.change(company_trade_summary, select_company, [company_plot, company_table])
+    select_amc.change(amc_transfer_summary, select_amc, [amc_plot, amc_table])
 
 if __name__ == "__main__":
     demo.launch()