Upload 3 files

app.py

@@ -5,29 +5,102 @@ import dash_cytoscape as cyto
 from dash.dependencies import Input, Output, State
 import pandas as pd
 
-from utility import parse_functions_from_files, get_reachable_functions, get_backtrace_functions
+from utility import parse_functions_from_files, get_reachable_functions, get_backtrace_functions, build_nodes_and_edges
 from introduction import get_intro_markdown
 
 app = dash.Dash(__name__, suppress_callback_exceptions=True)
 server = app.server
 
+
 app.layout = html.Div([
-    html.H2("Function Dependency Visualizer (AST-Based)"),
+    html.H2("Function Dependency Visualizer (AST-Based)", style={
+        "textAlign": "center",
+        "marginTop": "20px",
+        "fontSize": "28px",
+        "color": "#333"
+    }),
     dcc.Store(id="parsed-functions-store"),
-    dcc.Upload(id="upload", children=html.Button("Upload Python Files"), multiple=True),
-    dcc.Dropdown(id="main-function", style={"width": "300px"}),
-    dcc.Checklist(id="backtrace-toggle", options=[{"label": "Backtrace Mode", "value": "backtrace"}], value=[]),
-    dcc.Checklist(id="function-detail-toggle", options=[{"label": "Show Function-Level Detail in summary tab", "value": "show"}], value=[]),
+
+    html.Div([
+        html.Div([
+            html.Label("Upload Files"),
+            dcc.Upload(
+                id="upload",
+                children=html.Div("📤 Drag and drop or click to upload Python files", style={
+                    "border": "2px dashed #ccc",
+                    "padding": "10px",
+                    "textAlign": "center",
+                    "cursor": "pointer",
+                    "color": "#555",
+                    "fontSize": "14px"
+                }),
+                multiple=True
+            )
+        ], style={"width": "24%", "display": "inline-block", "verticalAlign": "top", "marginRight": "1%"}),
+
+        html.Div([
+            html.Label("Main Function"),
+            dcc.Dropdown(id="main-function", style={"width": "100%"})
+        ], style={"width": "24%", "display": "inline-block", "verticalAlign": "top", "marginRight": "1%"}),
+
+        html.Div([
+            html.Label("Max Depth"),
+            dcc.Dropdown(
+                id="max-depth",
+                options=[{"label": str(i), "value": i} for i in range(1, 11)],
+                value=10,
+                clearable=False,
+                style={"width": "100%"}
+            )
+        ], style={"width": "24%", "display": "inline-block", "verticalAlign": "top", "marginRight": "1%"}),
+
+        html.Div([
+            html.Label("Options"),
+            dcc.Checklist(
+                id="backtrace-toggle",
+                options=[{"label": "Backtrace Mode", "value": "backtrace"}],
+                value=[],
+                labelStyle={"display": "block", "fontWeight": "normal"}
+            ),
+            dcc.Checklist(
+                id="function-detail-toggle",
+                options=[{"label": "Show Function-Level Detail", "value": "show"}],
+                value=[],
+                labelStyle={"display": "block", "fontWeight": "normal"},
+                style={"marginTop": "5px"}
+            )
+        ], style={"width": "24%", "display": "inline-block", "verticalAlign": "top"})
+    ], style={
+        "backgroundColor": "#f9f9f9",
+        "padding": "15px",
+        "borderRadius": "10px",
+        "margin": "20px auto",
+        "width": "95%",
+        "boxShadow": "0 2px 6px rgba(0,0,0,0.1)"
+    }),
+
+
     dcc.Tabs(id="tab-selector", value="intro", children=[
         dcc.Tab(label="📘 Introduction", value="intro"),
         dcc.Tab(label="📊 Graph Explorer", value="graph"),
         dcc.Tab(label="📁 File Summary", value="summary")
-    ]),
-    html.Div(id="intro-tab"),
-    html.Div(id="graph-tab"),
-    html.Div(id="summary-tab")
+    ], style={"margin": "0 20px"}),
+
+    html.Div(html.Div(id="intro-tab", style={"margin": "0 20px"}), id="intro-tab-container"),
+    html.Div(id="graph-tab-container", style={"margin": "0 20px"}),
+    html.Div(id="summary-tab-container", style={"margin": "0 20px"}),
+
+
+    html.Footer("Built by Tomas Larsson • MIT Licensed", style={
+        "textAlign": "center",
+        "fontSize": "14px",
+        "marginTop": "40px",
+        "marginBottom": "20px",
+        "color": "#888"
+    })
 ])
 
+
 @app.callback(
     Output("main-function", "options"),
     Output("main-function", "value"),
@@ -36,6 +109,7 @@ app.layout = html.Div([
     State("upload", "filename")
 )
 def handle_upload(contents, filenames):
+    print("=== handle_upload triggered ===")
     if not contents:
         return [], None, {}
     uploaded_files = {}
@@ -43,13 +117,19 @@ def handle_upload(contents, filenames):
         _, content_string = content.split(",")
         uploaded_files[name] = base64.b64decode(content_string).decode("utf-8")
     parsed = parse_functions_from_files(uploaded_files)
-    options = [{"label": fn, "value": fn} for fn in parsed if parsed[fn]["calls"]]
+    print("== PARSED FUNCTION NAMES ==")
+    for fn, meta in parsed.items():
+        print(f"{fn} → calls: {meta.get('calls', [])}")
+    print("== END ==")
+
+#    options = [{"label": fn, "value": fn} for fn in parsed if parsed[fn]["calls"]]
+    options = [{"label": fn, "value": fn} for fn in parsed]
     return options, options[0]["value"] if options else None, parsed
 
 @app.callback(
-    Output("intro-tab", "style"),
-    Output("graph-tab", "style"),
-    Output("summary-tab", "style"),
+    Output("intro-tab-container", "style"),
+    Output("graph-tab-container", "style"),
+    Output("summary-tab-container", "style"),
     Input("tab-selector", "value")
 )
 def toggle_tabs(tab):
@@ -63,48 +143,46 @@ def toggle_tabs(tab):
 def show_intro(_):
     return get_intro_markdown()
 
+from collections import deque, defaultdict
+
 @app.callback(
-    Output("graph-tab", "children"),
+    Output("graph-tab-container", "children"),
     Input("main-function", "value"),
     Input("backtrace-toggle", "value"),
+    Input("max-depth", "value"),
     State("parsed-functions-store", "data")
 )
-def update_graph(main_func, backtrace_mode, parsed):
+def update_graph(main_func, backtrace_mode, max_depth, parsed):
     if not parsed or not main_func:
         return html.Div("Upload files and select a main function.")
+
     graph = {k: v["calls"] for k, v in parsed.items()}
     reachable = get_backtrace_functions(main_func, graph) if "backtrace" in backtrace_mode else get_reachable_functions(main_func, graph)
-    nodes = [{"data": {"id": name, "label": name}} for name in reachable]
-    #edges = [{"data": {"source": src, "target": tgt}, "classes": "edge"} for src in reachable for tgt in parsed[src]["calls"] if tgt in reachable]
-    edges = []
-    for src in reachable:
-        call_sequence = parsed[src]["calls"]
-        call_index = 1
-        for tgt in call_sequence:
-            if tgt in reachable:
-                edge = {
-                    "data": {
-                        "source": src,
-                        "target": tgt,
-                        "label": str(call_index)
-                    },
-                    "style": {
-                        "line-width": 4 if call_sequence.count(tgt) > 1 else 2
-                    }
-                }
-                edges.append(edge)
-                call_index += 1
 
+    nodes, edges = build_nodes_and_edges(parsed, main_func, reachable, reverse="backtrace" in backtrace_mode, max_depth=max_depth)
 
 
     return cyto.Cytoscape(
         id="cytoscape-graph",
-        layout={"name": "breadthfirst"},
+        layout={"name": "preset"},
         style={"width": "100%", "height": "600px"},
         elements=nodes + edges,
         stylesheet=[
-            {"selector": "node", "style": {"label": "data(label)", "text-wrap": "wrap"}},
-            #{"selector": "edge", "style": {"curve-style": "bezier", "target-arrow-shape": "triangle", "target-arrow-color": "#888", "line-color": "#888"}}
+            {"selector": "node", "style": {
+                "label": "data(label)",
+                "text-wrap": "wrap",
+                "text-valign": "bottom",
+                "text-halign": "center"
+            }},
+            {"selector": ".main", "style": {
+                "background-color": "blue",
+                "line-color": "blue",
+                "color": "black",
+                "label": "data(label)",
+                "text-wrap": "wrap",
+                "text-valign": "bottom",
+                "text-halign": "center"
+            }},
             {"selector": "edge", "style": {
                 "label": "data(label)",
                 "curve-style": "bezier",
@@ -113,9 +191,9 @@ def update_graph(main_func, backtrace_mode, parsed):
                 "line-color": "#888",
                 "arrow-scale": 2,
                 "font-size": "14px",
-                "text-margin-y": -10
+                "text-margin-y": -10,
+                "text-margin-x": 10,
             }}
- 
         ],
         userZoomingEnabled=True,
         userPanningEnabled=True,
@@ -124,8 +202,9 @@ def update_graph(main_func, backtrace_mode, parsed):
         wheelSensitivity=0.1
     )
 
+
 @app.callback(
-    Output("summary-tab", "children"),
+    Output("summary-tab-container", "children"),
     Input("parsed-functions-store", "data"),
     Input("function-detail-toggle", "value")
 )

introduction.py

@@ -2,43 +2,56 @@ from dash import dcc
 
 def get_intro_markdown():
     return dcc.Markdown("""
-### 📘 Introduction
+### ⚡ Function Call Visualizer for Python
 
-This tool analyzes uploaded Python files and visualizes how functions call one another.
+Upload `.py` files and instantly see how functions connect—**visually**.  
+Ideal for refactoring, onboarding, debugging, or exploring unfamiliar code.
 
 ---
 
 #### 🔍 Features
-- Upload multiple `.py` files
-- Select a top-level function to explore all functions it calls
-- Function table shows:
-  - Arguments and return values with inferred types (e.g. `df: pd.DataFrame`)
-  - Streamlit `session_state` variables read/written (if applicable)
-- Graph shows:
+- Upload **one or more** Python files
+- Pick a top-level function to trace all its calls
+- Auto-inferred:
+  - Function arguments and return types (e.g. `df: pd.DataFrame`)
+  - Session state usage (e.g. Streamlit `session_state`)
+- Interactive graph with:
   - Call order on edges (`1`, `2`, `3`)
-  - Thicker lines if a function is called multiple times
+  - Thicker lines for repeated calls
+  - Directional arrows and clear layout by call depth
+- Toggleable summary tables
 
 ---
 
-#### 📂 How to Use
+#### 🚀 How to Use
 1. Switch to the **Graph Explorer** tab
-2. Upload one or more `.py` files
-3. Pick the entry point function
-4. Explore the graph and table dynamically
-                            
+2. Upload `.py` file(s)
+3. Select an entry-point function
+4. Explore how your code is structured—at a glance
+
 ---
-                            
-### 👋 About the Creator
 
-This tool was built by **Tomas Larsson**, a data scientist and financial modeler with a passion for making complex topics easy to explore and understand.
+### 👋 About the Creator
 
-Tomas is also the creator of [**my.moneytoolbox.com**](https://mymoneytoolbox.com), a blog focused on:
+This open-source tool is built by **Tomas Larsson**,  
+a data scientist and creator of [**my.moneytoolbox.com**](https://mymoneytoolbox.com), where he shares tools and insights for:
 
 - Tax-efficient investing  
 - Retirement modeling  
 - Personal finance analytics  
-- Tools for DIY investors and early retirees
+- Code-first decision tools for DIY investors and engineers
+
+---
+
+### 🤝 Connect
+
+Love dev tools like this?  
+Tomas shares more on [**LinkedIn**](https://www.linkedin.com/in/tomaslarsson/) —  
+follow along for open-source tools at the intersection of data, finance, and visualization.
+
+---
 
-Whether you're a fellow data enthusiast or someone planning their financial future, Tomas's blog is a resource-rich destination with transparent tools, clear explanations, and practical guidance.
+### 🧠 Tags  
+`#python` `#static-analysis` `#ast` `#code-visualization` `#developer-tools` `#streamlit` `#dash` `#visualization`
 
         """)

utility.py

@@ -81,3 +81,66 @@ def get_backtrace_functions(target, graph):
             visited.add(node)
             stack.extend(reverse_graph.get(node, []))
     return visited
+
+from collections import deque, defaultdict
+
+def build_nodes_and_edges(parsed, root_func, reachable, reverse=False, max_depth=10):
+    depth_map = {}
+    x_offset_map = defaultdict(int)
+    positions = {}
+    visited = set()
+    queue = deque([(root_func, 0)])
+
+    while queue:
+        current, depth = queue.popleft()
+        if current in visited or depth > max_depth:
+            continue
+        visited.add(current)
+
+        adjusted_depth = -depth if reverse else depth
+        x = x_offset_map[adjusted_depth] * 300
+        y = adjusted_depth * 150
+        positions[current] = {"x": x, "y": y}
+        x_offset_map[adjusted_depth] += 1
+
+        if reverse:
+            # Find callers of this function
+            next_funcs = [
+                caller for caller, meta in parsed.items()
+                if current in meta["calls"] and caller in reachable
+            ]
+        else:
+            # Find callees
+            next_funcs = [
+                callee for callee in parsed[current]["calls"]
+                if callee in reachable
+            ]
+
+        for nxt in next_funcs:
+            queue.append((nxt, depth + 1))
+
+    nodes = [{
+        "data": {"id": name, "label": name},
+        "position": positions.get(name, {"x": 0, "y": 0}),
+        "classes": "main" if name == root_func else ""
+    } for name in visited]
+
+    edges = []
+    for src in visited:
+        call_sequence = parsed[src]["calls"]
+        call_index = 1
+        for tgt in call_sequence:
+            if tgt in visited:
+                edges.append({
+                    "data": {
+                        "source": src,
+                        "target": tgt,
+                        "label": str(call_index)
+                    },
+                    "style": {
+                        "line-width": 4 if call_sequence.count(tgt) > 1 else 2
+                    }
+                })
+                call_index += 1
+
+    return nodes, edges