Upload app.py

app.py

@@ -4,17 +4,43 @@ import dash
 from dash import html, dcc, dash_table
 import dash_cytoscape as cyto
 from dash.dependencies import Input, Output, State
-import io
 import json
 import urllib.parse
 
 app = dash.Dash(__name__, suppress_callback_exceptions=True)
 server = app.server
 
+uploaded_files = {}
+
 def parse_functions_from_files(file_dict):
     functions = {}
     defined_funcs = set()
 
+    def infer_type_from_value(value_node):
+        if isinstance(value_node, ast.Call) and isinstance(value_node.func, ast.Attribute):
+            if value_node.func.attr == "read_csv":
+                return "pd.DataFrame"
+            elif value_node.func.attr == "DataFrame":
+                return "pd.DataFrame"
+            elif value_node.func.attr == "array":
+                return "np.ndarray"
+        elif isinstance(value_node, ast.List):
+            return "list"
+        elif isinstance(value_node, ast.Dict):
+            return "dict"
+        elif isinstance(value_node, ast.Set):
+            return "set"
+        elif isinstance(value_node, ast.Constant):
+            if isinstance(value_node.value, str):
+                return "str"
+            elif isinstance(value_node.value, bool):
+                return "bool"
+            elif isinstance(value_node.value, int):
+                return "int"
+            elif isinstance(value_node.value, float):
+                return "float"
+        return "?"
+
     for fname, code in file_dict.items():
         tree = ast.parse(code)
         for node in ast.walk(tree):
@@ -26,44 +52,56 @@ def parse_functions_from_files(file_dict):
         for node in ast.walk(tree):
             if isinstance(node, ast.FunctionDef):
                 func_name = node.name
-                args = [arg.arg for arg in node.args.args]
+                args = []
+                arg_types = {}
+                local_assignments = {}
                 returns = []
                 calls = []
                 reads_state = set()
                 writes_state = set()
 
+                for arg in node.args.args:
+                    name = arg.arg
+                    if arg.annotation:
+                        arg_type = ast.unparse(arg.annotation)
+                    else:
+                        arg_type = "?"
+                    arg_types[name] = arg_type
+                    args.append(f"{name}: {arg_type}")
+
                 for sub in ast.walk(node):
-                    # Function calls
                     if isinstance(sub, ast.Call) and isinstance(sub.func, ast.Name):
                         if sub.func.id in defined_funcs:
                             calls.append(sub.func.id)
-
-                    # Return values
+                    elif isinstance(sub, ast.Assign):
+                        for target in sub.targets:
+                            if isinstance(target, ast.Name):
+                                local_assignments[target.id] = infer_type_from_value(sub.value)
                     elif isinstance(sub, ast.Return):
                         if sub.value is None:
                             continue
                         elif isinstance(sub.value, ast.Tuple):
-                            returns.extend([ast.unparse(elt) for elt in sub.value.elts])
+                            for elt in sub.value.elts:
+                                label = ast.unparse(elt)
+                                ret_type = local_assignments.get(label, infer_type_from_value(elt))
+                                returns.append(f"{label}: {ret_type}")
                         else:
-                            returns.append(ast.unparse(sub.value))
-
-                    # Streamlit session_state interactions
+                            label = ast.unparse(sub.value)
+                            ret_type = local_assignments.get(label, infer_type_from_value(sub.value))
+                            returns.append(f"{label}: {ret_type}")
                     elif isinstance(sub, ast.Subscript):
-                        if (
-                            isinstance(sub.value, ast.Attribute)
+                        if (isinstance(sub.value, ast.Attribute)
                             and isinstance(sub.value.value, ast.Name)
                             and sub.value.value.id == "st"
-                            and sub.value.attr == "session_state"
-                        ):
+                            and sub.value.attr == "session_state"):
                             key = None
                             try:
-                                if isinstance(sub.slice, ast.Constant):  # Python 3.9+
+                                if isinstance(sub.slice, ast.Constant):
                                     key = sub.slice.value
-                                elif isinstance(sub.slice, ast.Index) and isinstance(sub.slice.value, ast.Constant):  # <3.9
+                                elif isinstance(sub.slice, ast.Index) and isinstance(sub.slice.value, ast.Constant):
                                     key = sub.slice.value.value
                             except Exception:
                                 pass
-
                             if key:
                                 if isinstance(sub.ctx, ast.Store):
                                     writes_state.add(str(key))
@@ -76,7 +114,7 @@ def parse_functions_from_files(file_dict):
                     "calls": calls,
                     "filename": fname,
                     "reads_state": sorted(reads_state),
-                    "writes_state": sorted(writes_state),
+                    "writes_state": sorted(writes_state)
                 }
 
     return functions
@@ -92,56 +130,113 @@ def get_reachable_functions(start, graph):
     return visited
 
 app.layout = html.Div([
-    html.H2("Multi-File Function Dependency Graph (AST-based)"),
-    html.Div([
-        dcc.Upload(id="upload", children=html.Button("Upload Python Files"), multiple=True, style={"marginRight": "10px"}),
-        html.Div(id="main-function-ui", style={"marginRight": "10px", "width": "300px"}),
-        html.A("Download Graph JSON", id="download-link", download="graph.json", href="", target="_blank")
-    ], style={"display": "flex", "flexDirection": "row", "alignItems": "center", "gap": "10px"}),
-    html.Div(id="file-name", style={"marginTop": "10px"}),
-    cyto.Cytoscape(
-        id="cytoscape-graph",
-        layout={"name": "breadthfirst", "directed": True, "padding": 30, "spacingFactor": 1.5},
-        style={"width": "100%", "height": "600px"},
-        elements=[],
-        stylesheet=[
-            {"selector": "node", "style": {
-                "label": "data(label)",
-                "text-wrap": "wrap",
-                "text-max-width": 120,
-                "text-valign": "center",
-                "background-color": "#aed6f1"
-            }},
-            {"selector": "edge", "style": {
-                "curve-style": "bezier",
-                "target-arrow-shape": "triangle",
-                "arrow-scale": 2,
-                "line-color": "#888",
-                "target-arrow-color": "#888"
-            }}
-        ],
-        userZoomingEnabled=True,
-        userPanningEnabled=True,
-        minZoom=0.2,
-        maxZoom=2,
-        wheelSensitivity=0.1
-    ),
-    html.Hr(),
-    html.H4("Function Input/Output Table"),
-    dash_table.DataTable(
-        id="function-table",
-        columns=[],  # dynamically injected
-        style_table={"overflowX": "auto"},
-        style_cell={
-            "textAlign": "left",
-            "whiteSpace": "normal",
-            "wordBreak": "break-word",
-            "maxWidth": 300
-        }
-    )
+    html.H2("Function Dependency Visualizer (AST-Based)"),
+    dcc.Tabs(id="tab-selector", value="intro", children=[
+        dcc.Tab(label="📘 Introduction", value="intro"),
+        dcc.Tab(label="📊 Graph Explorer", value="graph")
+    ]),
+    html.Div(id="tab-content")
 ])
 
-uploaded_files = {}
+@app.callback(
+    Output("tab-content", "children"),
+    Input("tab-selector", "value")
+)
+def render_tab(tab):
+    if tab == "intro":
+        return dcc.Markdown("""
+### 📘 Introduction
+
+This tool analyzes uploaded Python files and visualizes how functions call one another.
+
+---
+
+#### 🔍 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:
+  - Call order on edges (`1`, `2`, `3`)
+  - Thicker lines if a function is called multiple times
+
+---
+
+#### 📂 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
+                            
+---
+                            
+### 👋 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.
+
+Tomas is also the creator of [**my.moneytoolbox.com**](https://mymoneytoolbox.com), a blog focused on:
+
+- Tax-efficient investing  
+- Retirement modeling  
+- Personal finance analytics  
+- Tools for DIY investors and early retirees
+
+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.
+
+        """, style={"padding": "20px", "maxWidth": "900px"})
+
+    return html.Div([
+        html.Div([
+            dcc.Upload(id="upload", children=html.Button("Upload Python Files"), multiple=True),
+            html.Div(id="main-function-ui", style={"marginRight": "10px", "width": "300px"}),
+            html.A("Download Graph JSON", id="download-link", download="graph.json", href="", target="_blank")
+        ], style={"display": "flex", "flexDirection": "row", "alignItems": "center", "gap": "10px"}),
+        html.Div(id="file-name", style={"marginTop": "10px"}),
+        cyto.Cytoscape(
+            id="cytoscape-graph",
+            layout={"name": "breadthfirst", "directed": True, "padding": 30, "spacingFactor": 1.5},
+            style={"width": "100%", "height": "600px"},
+            elements=[],
+            stylesheet=[
+                {"selector": "node", "style": {
+                    "label": "data(label)",
+                    "text-wrap": "wrap",
+                    "text-max-width": 120,
+                    "text-valign": "center",
+                    "background-color": "#aed6f1"
+                }},
+                {"selector": "edge", "style": {
+                    "curve-style": "bezier",
+                    "target-arrow-shape": "triangle",
+                    "arrow-scale": 2,
+                    "line-color": "#888",
+                    "target-arrow-color": "#888",
+                    "label": "data(label)",
+                    "font-size": "14px",
+                    "text-margin-y": -10
+                }}
+            ],
+            userZoomingEnabled=True,
+            userPanningEnabled=True,
+            minZoom=0.2,
+            maxZoom=2,
+            wheelSensitivity=0.1
+        ),
+        html.Hr(),
+        html.H4("Function Input/Output Table"),
+        dash_table.DataTable(
+            id="function-table",
+            columns=[],
+            style_table={"overflowX": "auto"},
+            style_cell={
+                "textAlign": "left",
+                "whiteSpace": "normal",
+                "wordBreak": "break-word",
+                "maxWidth": 300
+            }
+        )
+    ])
 
 @app.callback(
     Output("main-function-ui", "children"),
@@ -182,17 +277,25 @@ def update_multi_graph(main_func):
 
     edges = []
     for src in reachable:
-        for tgt in parsed[src]["calls"]:
-            if tgt in reachable:
+        call_sequence = parsed[src]["calls"]
+        call_index = 1
+        for tgt in call_sequence:
+            if tgt not in reachable:
+                continue
+            if not any(e["data"]["source"] == src and e["data"]["target"] == tgt for e in edges):
                 edge = {
                     "data": {
                         "source": src,
-                        "target": tgt
-                    }
+                        "target": tgt,
+                        "label": str(call_index)
+                    },
+                    "style": {
+                        "line-width": 4 if call_sequence.count(tgt) > 1 else 2
+                    },
+                    "classes": "crossfile" if parsed[src]["filename"] != parsed[tgt]["filename"] else ""
                 }
-                if parsed[src]["filename"] != parsed[tgt]["filename"]:
-                    edge["classes"] = "crossfile"
                 edges.append(edge)
+                call_index += 1
 
     raw_table_data = [{
         "Function": fn,