tooluniverse 0.2.0__py3-none-any.whl → 1.0.1__py3-none-any.whl

tooluniverse/tool_graph_web_ui.py

@@ -0,0 +1,955 @@
+"""
+Tool Graph Web UI
+
+A Flask-based web application for visualizing and exploring the tool composition graph
+generated by ToolGraphComposer.
+"""
+
+import json
+import os
+from flask import Flask, render_template, jsonify, request
+import pickle
+from typing import Dict, Any, List, Optional
+
+
+class ToolGraphWebUI:
+    """Web interface for visualizing tool composition graphs."""
+
+    def __init__(self, graph_data_path: Optional[str] = None):
+        self.app = Flask(__name__, template_folder="templates", static_folder="static")
+        self.graph_data: Optional[Dict[str, Any]] = None
+        self.graph_data_path = graph_data_path
+
+        self._setup_routes()
+        self._load_graph_data()
+
+    def _setup_routes(self):
+        """Setup Flask routes."""
+
+        @self.app.route("/")
+        def index():
+            """Main graph visualization page."""
+            return render_template("tool_graph.html")
+
+        @self.app.route("/api/graph")
+        def get_graph():
+            """API endpoint to get graph data."""
+            if not self.graph_data:
+                return jsonify({"error": "No graph data loaded"}), 404
+
+            # Convert to format suitable for D3.js
+            d3_data = self._convert_to_d3_format(self.graph_data)
+            return jsonify(d3_data)
+
+        @self.app.route("/api/stats")
+        def get_stats():
+            """API endpoint to get graph statistics."""
+            if not self.graph_data:
+                return jsonify({"error": "No graph data loaded"}), 404
+
+            return jsonify(self.graph_data.get("metadata", {}))
+
+        @self.app.route("/api/tool/<tool_id>")
+        def get_tool_details(tool_id):
+            """API endpoint to get detailed information about a specific tool."""
+            if not self.graph_data:
+                return jsonify({"error": "No graph data loaded"}), 404
+
+            # Find the tool
+            tool = None
+            for node in self.graph_data.get("nodes", []):
+                if node.get("id") == tool_id:
+                    tool = node
+                    break
+
+            if not tool:
+                return jsonify({"error": "Tool not found"}), 404
+
+            # Get connections
+            connections = self._get_tool_connections(tool_id)
+
+            return jsonify({"tool": tool, "connections": connections})
+
+        @self.app.route("/api/search")
+        def search_tools():
+            """API endpoint to search tools."""
+            query = request.args.get("q", "").lower()
+            category = request.args.get("category", "")
+
+            if not self.graph_data:
+                return jsonify({"error": "No graph data loaded"}), 404
+
+            results = []
+            for node in self.graph_data.get("nodes", []):
+                # Search in name and description
+                if (
+                    query in node.get("name", "").lower()
+                    or query in node.get("description", "").lower()
+                ):
+                    if not category or node.get("category") == category:
+                        results.append(
+                            {
+                                "id": node.get("id"),
+                                "name": node.get("name"),
+                                "description": node.get("description"),
+                                "category": node.get("category"),
+                            }
+                        )
+
+            return jsonify(results)
+
+        @self.app.route("/api/load_graph", methods=["POST"])
+        def load_graph():
+            """API endpoint to load a new graph file."""
+            data = request.json
+            graph_path = data.get("path")
+
+            if not graph_path or not os.path.exists(graph_path):
+                return jsonify({"error": "Invalid graph path"}), 400
+
+            try:
+                self.graph_data_path = graph_path
+                self._load_graph_data()
+                return jsonify(
+                    {"status": "success", "message": "Graph loaded successfully"}
+                )
+            except Exception as e:
+                return jsonify({"error": f"Failed to load graph: {str(e)}"}), 500
+
+    def _load_graph_data(self):
+        """Load graph data from file."""
+        if not self.graph_data_path:
+            print("No graph data path specified")
+            return
+
+        try:
+            # Try to load JSON first
+            if self.graph_data_path.endswith(".json"):
+                with open(self.graph_data_path, "r", encoding="utf-8") as f:
+                    self.graph_data = json.load(f)
+            # Try pickle format
+            elif self.graph_data_path.endswith(".pkl"):
+                with open(self.graph_data_path, "rb") as f:
+                    self.graph_data = pickle.load(f)
+                    # Handle cached format
+                    if (
+                        isinstance(self.graph_data, dict)
+                        and "graph_data" in self.graph_data
+                    ):
+                        self.graph_data = self.graph_data["graph_data"]
+            else:
+                print(f"Unsupported file format: {self.graph_data_path}")
+                return
+
+            print(
+                f"Loaded graph with {len(self.graph_data.get('nodes', []))} nodes and {len(self.graph_data.get('edges', []))} edges"
+            )
+
+        except Exception as e:
+            print(f"Error loading graph data: {e}")
+            self.graph_data = None
+
+    def _convert_to_d3_format(self, graph_data: Dict[str, Any]) -> Dict[str, Any]:
+        """Convert graph data to D3.js compatible format."""
+
+        nodes = []
+        links = []
+
+        # Process nodes
+        for node in graph_data.get("nodes", []):
+            d3_node = {
+                "id": node.get("id"),
+                "name": node.get("name"),
+                "description": (
+                    node.get("description")[:100] + "..."
+                    if len(node.get("description", "")) > 100
+                    else node.get("description", "")
+                ),
+                "category": node.get("category"),
+                "type": node.get("type"),
+                "group": self._get_category_group(node.get("category")),
+            }
+            nodes.append(d3_node)
+
+        # Process edges
+        for edge in graph_data.get("edges", []):
+            d3_link = {
+                "source": edge.get("source"),
+                "target": edge.get("target"),
+                "value": edge.get("compatibility_score", 50),
+                "confidence": edge.get("confidence", 50),
+                "automation_ready": edge.get("automation_ready", False),
+                "needs_transformation": edge.get("needs_transformation", False),
+            }
+            links.append(d3_link)
+
+        return {
+            "nodes": nodes,
+            "links": links,
+            "metadata": graph_data.get("metadata", {}),
+        }
+
+    def _get_category_group(self, category: str) -> int:
+        """Map category to a numeric group for visualization."""
+        category_groups = {
+            "opentarget": 1,
+            "ChEMBL": 2,
+            "fda_drug_label": 3,
+            "clinical_trials": 4,
+            "EuropePMC": 5,
+            "semantic_scholar": 6,
+            "pubtator": 7,
+            "monarch": 8,
+            "agents": 9,
+            "dataset": 10,
+            "special_tools": 11,
+        }
+        return category_groups.get(category, 0)
+
+    def _get_tool_connections(self, tool_id: str) -> Dict[str, List]:
+        """Get incoming and outgoing connections for a tool."""
+        # Guard against missing graph data
+        if not self.graph_data:
+            return {"incoming": [], "outgoing": []}
+
+        incoming: List[Dict[str, Any]] = []
+        outgoing: List[Dict[str, Any]] = []
+
+        for edge in self.graph_data.get("edges", []):
+            if edge.get("target") == tool_id:
+                incoming.append(
+                    {
+                        "source": edge.get("source"),
+                        "compatibility_score": edge.get("compatibility_score"),
+                        "automation_ready": edge.get("automation_ready"),
+                        "needs_transformation": edge.get("needs_transformation"),
+                    }
+                )
+            elif edge.get("source") == tool_id:
+                outgoing.append(
+                    {
+                        "target": edge.get("target"),
+                        "compatibility_score": edge.get("compatibility_score"),
+                        "automation_ready": edge.get("automation_ready"),
+                        "needs_transformation": edge.get("needs_transformation"),
+                    }
+                )
+
+        return {"incoming": incoming, "outgoing": outgoing}
+
+    def run(self, host: str = "0.0.0.0", port: int = 5000, debug: bool = True):
+        """Run the web application."""
+        print(f"Starting Tool Graph Web UI on http://{host}:{port}")
+        self.app.run(host=host, port=port, debug=debug)
+
+
+def create_web_ui_files():
+    """Create the necessary HTML, CSS, and JS files for the web UI."""
+
+    # Create directories
+    os.makedirs("templates", exist_ok=True)
+    os.makedirs("static", exist_ok=True)
+
+    # HTML template
+    html_content = """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToolUniverse Composition Graph</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+</head>
+<body>
+    <div id="app">
+        <header>
+            <h1>ToolUniverse Composition Graph</h1>
+            <div class="controls">
+                <div class="search-container">
+                    <input type="text" id="search" placeholder="Search tools...">
+                    <select id="categoryFilter">
+                        <option value="">All Categories</option>
+                    </select>
+                </div>
+                <div class="view-controls">
+                    <button id="resetZoom">Reset Zoom</button>
+                    <button id="showStats">Statistics</button>
+                    <label>
+                        <input type="checkbox" id="showEdgeLabels"> Show Edge Labels
+                    </label>
+                </div>
+            </div>
+        </header>
+
+        <main>
+            <div id="graph-container">
+                <svg id="graph"></svg>
+            </div>
+
+            <div id="sidebar">
+                <div id="tool-details" class="panel">
+                    <h3>Tool Details</h3>
+                    <div id="tool-info">
+                        <p>Select a tool to view details</p>
+                    </div>
+                </div>
+
+                <div id="graph-stats" class="panel" style="display: none;">
+                    <h3>Graph Statistics</h3>
+                    <div id="stats-content"></div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="{{ url_for('static', filename='graph.js') }}"></script>
+</body>
+</html>"""
+
+    # CSS styles
+    css_content = """
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: #f5f5f5;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header {
+    background: white;
+    padding: 1rem;
+    border-bottom: 1px solid #ddd;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+header h1 {
+    margin: 0 0 1rem 0;
+    color: #333;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.search-container {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.search-container input, .search-container select {
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.view-controls {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.view-controls button {
+    padding: 0.5rem 1rem;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.view-controls button:hover {
+    background: #0056b3;
+}
+
+main {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+#graph-container {
+    flex: 1;
+    position: relative;
+}
+
+#graph {
+    width: 100%;
+    height: 100%;
+    background: white;
+}
+
+#sidebar {
+    width: 300px;
+    background: white;
+    border-left: 1px solid #ddd;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.panel {
+    margin-bottom: 2rem;
+}
+
+.panel h3 {
+    margin-top: 0;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.5rem;
+}
+
+/* Graph styling */
+.node {
+    stroke: #fff;
+    stroke-width: 2px;
+    cursor: pointer;
+}
+
+.node:hover {
+    stroke-width: 3px;
+    stroke: #333;
+}
+
+.node.selected {
+    stroke: #ff6b35;
+    stroke-width: 3px;
+}
+
+.link {
+    stroke: #999;
+    stroke-opacity: 0.6;
+    fill: none;
+}
+
+.link.high-compatibility {
+    stroke: #2ecc71;
+    stroke-width: 2px;
+}
+
+.link.medium-compatibility {
+    stroke: #f39c12;
+    stroke-width: 1.5px;
+}
+
+.link.low-compatibility {
+    stroke: #e74c3c;
+    stroke-width: 1px;
+}
+
+.node-label {
+    font-size: 10px;
+    font-family: sans-serif;
+    pointer-events: none;
+}
+
+.edge-label {
+    font-size: 8px;
+    font-family: sans-serif;
+    fill: #666;
+    pointer-events: none;
+}
+
+/* Tool details styling */
+.tool-info-item {
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.tool-info-item strong {
+    display: block;
+    margin-bottom: 0.25rem;
+    color: #495057;
+}
+
+.connections {
+    margin-top: 1rem;
+}
+
+.connection-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.connection-item {
+    padding: 0.25rem;
+    border-bottom: 1px solid #eee;
+    font-size: 0.9em;
+}
+
+.compatibility-score {
+    float: right;
+    font-weight: bold;
+}
+
+.score-high { color: #2ecc71; }
+.score-medium { color: #f39c12; }
+.score-low { color: #e74c3c; }
+
+/* Responsive design */
+@media (max-width: 768px) {
+    main {
+        flex-direction: column;
+    }
+
+    #sidebar {
+        width: 100%;
+        height: 40%;
+        border-left: none;
+        border-top: 1px solid #ddd;
+    }
+
+    .controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .view-controls {
+        justify-content: center;
+    }
+}
+"""
+
+    # JavaScript for D3.js visualization
+    js_content = """
+class ToolGraphVisualizer {
+    constructor() {
+        this.svg = d3.select("#graph");
+        this.width = window.innerWidth - 300; // Account for sidebar
+        this.height = window.innerHeight - 100; // Account for header
+        this.simulation = null;
+        this.nodes = [];
+        this.links = [];
+        this.selectedNode = null;
+
+        this.initializeGraph();
+        this.loadGraphData();
+        this.setupEventListeners();
+
+        // Resize handler
+        window.addEventListener('resize', () => this.handleResize());
+    }
+
+    initializeGraph() {
+        this.svg
+            .attr("width", this.width)
+            .attr("height", this.height);
+
+        // Add zoom behavior
+        const zoom = d3.zoom()
+            .scaleExtent([0.1, 10])
+            .on("zoom", (event) => {
+                this.svg.select("g").attr("transform", event.transform);
+            });
+
+        this.svg.call(zoom);
+
+        // Create main group for zoomable content
+        this.graphGroup = this.svg.append("g");
+
+        // Create arrow markers for directed edges
+        this.svg.append("defs").append("marker")
+            .attr("id", "arrow")
+            .attr("viewBox", "0 -5 10 10")
+            .attr("refX", 20)
+            .attr("refY", 0)
+            .attr("markerWidth", 6)
+            .attr("markerHeight", 6)
+            .attr("orient", "auto")
+            .append("path")
+            .attr("d", "M0,-5L10,0L0,5")
+            .attr("fill", "#666");
+    }
+
+    async loadGraphData() {
+        try {
+            const response = await fetch('/api/graph');
+            const data = await response.json();
+
+            if (data.error) {
+                this.showError(data.error);
+                return;
+            }
+
+            this.nodes = data.nodes;
+            this.links = data.links;
+
+            this.updateCategoryFilter();
+            this.renderGraph();
+
+        } catch (error) {
+            this.showError(`Failed to load graph data: ${error.message}`);
+        }
+    }
+
+    updateCategoryFilter() {
+        const categories = [...new Set(this.nodes.map(n => n.category))].sort();
+        const select = d3.select("#categoryFilter");
+
+        select.selectAll("option:not(:first-child)").remove();
+
+        categories.forEach(category => {
+            select.append("option")
+                .attr("value", category)
+                .text(category);
+        });
+    }
+
+    renderGraph() {
+        // Clear existing graph
+        this.graphGroup.selectAll("*").remove();
+
+        // Create simulation
+        this.simulation = d3.forceSimulation(this.nodes)
+            .force("link", d3.forceLink(this.links).id(d => d.id).distance(80))
+            .force("charge", d3.forceManyBody().strength(-300))
+            .force("center", d3.forceCenter(this.width / 2, this.height / 2))
+            .force("collision", d3.forceCollide().radius(20));
+
+        // Create links
+        const link = this.graphGroup.append("g")
+            .attr("class", "links")
+            .selectAll("line")
+            .data(this.links)
+            .enter().append("line")
+            .attr("class", d => `link ${this.getCompatibilityClass(d.value)}`)
+            .attr("marker-end", "url(#arrow)");
+
+        // Create nodes
+        const node = this.graphGroup.append("g")
+            .attr("class", "nodes")
+            .selectAll("circle")
+            .data(this.nodes)
+            .enter().append("circle")
+            .attr("class", "node")
+            .attr("r", 8)
+            .attr("fill", d => this.getNodeColor(d.group))
+            .call(d3.drag()
+                .on("start", (event, d) => this.dragStarted(event, d))
+                .on("drag", (event, d) => this.dragged(event, d))
+                .on("end", (event, d) => this.dragEnded(event, d)))
+            .on("click", (event, d) => this.selectNode(d));
+
+        // Add node labels
+        const label = this.graphGroup.append("g")
+            .attr("class", "labels")
+            .selectAll("text")
+            .data(this.nodes)
+            .enter().append("text")
+            .attr("class", "node-label")
+            .attr("dx", 12)
+            .attr("dy", 4)
+            .text(d => d.name);
+
+        // Add simulation tick handler
+        this.simulation.on("tick", () => {
+            link
+                .attr("x1", d => d.source.x)
+                .attr("y1", d => d.source.y)
+                .attr("x2", d => d.target.x)
+                .attr("y2", d => d.target.y);
+
+            node
+                .attr("cx", d => d.x)
+                .attr("cy", d => d.y);
+
+            label
+                .attr("x", d => d.x)
+                .attr("y", d => d.y);
+        });
+
+        // Add tooltips
+        node.append("title")
+            .text(d => `${d.name}\\n${d.description}\\nCategory: ${d.category}`);
+    }
+
+    getCompatibilityClass(score) {
+        if (score >= 80) return "high-compatibility";
+        if (score >= 60) return "medium-compatibility";
+        return "low-compatibility";
+    }
+
+    getNodeColor(group) {
+        const colors = d3.schemeCategory10;
+        return colors[group % colors.length];
+    }
+
+    selectNode(node) {
+        // Update visual selection
+        this.graphGroup.selectAll(".node")
+            .classed("selected", false);
+
+        this.graphGroup.selectAll(".node")
+            .filter(d => d.id === node.id)
+            .classed("selected", true);
+
+        this.selectedNode = node;
+        this.loadToolDetails(node.id);
+    }
+
+    async loadToolDetails(toolId) {
+        try {
+            const response = await fetch(`/api/tool/${toolId}`);
+            const data = await response.json();
+
+            if (data.error) {
+                this.showError(data.error);
+                return;
+            }
+
+            this.displayToolDetails(data.tool, data.connections);
+
+        } catch (error) {
+            this.showError(`Failed to load tool details: ${error.message}`);
+        }
+    }
+
+    displayToolDetails(tool, connections) {
+        const container = d3.select("#tool-info");
+        container.html("");
+
+        // Basic tool information
+        container.append("div")
+            .attr("class", "tool-info-item")
+            .html(`<strong>Name:</strong> ${tool.name}`);
+
+        container.append("div")
+            .attr("class", "tool-info-item")
+            .html(`<strong>Type:</strong> ${tool.type}`);
+
+        container.append("div")
+            .attr("class", "tool-info-item")
+            .html(`<strong>Category:</strong> ${tool.category}`);
+
+        container.append("div")
+            .attr("class", "tool-info-item")
+            .html(`<strong>Description:</strong> ${tool.description}`);
+
+        // Connections
+        const connectionsDiv = container.append("div")
+            .attr("class", "connections");
+
+        // Incoming connections
+        if (connections.incoming.length > 0) {
+            connectionsDiv.append("h4").text("Can receive input from:");
+            const incomingList = connectionsDiv.append("div")
+                .attr("class", "connection-list");
+
+            connections.incoming.forEach(conn => {
+                const item = incomingList.append("div")
+                    .attr("class", "connection-item");
+
+                item.append("span").text(conn.source);
+                item.append("span")
+                    .attr("class", `compatibility-score ${this.getScoreClass(conn.compatibility_score)}`)
+                    .text(`${conn.compatibility_score}%`);
+            });
+        }
+
+        // Outgoing connections
+        if (connections.outgoing.length > 0) {
+            connectionsDiv.append("h4").text("Can provide input to:");
+            const outgoingList = connectionsDiv.append("div")
+                .attr("class", "connection-list");
+
+            connections.outgoing.forEach(conn => {
+                const item = outgoingList.append("div")
+                    .attr("class", "connection-item");
+
+                item.append("span").text(conn.target);
+                item.append("span")
+                    .attr("class", `compatibility-score ${this.getScoreClass(conn.compatibility_score)}`)
+                    .text(`${conn.compatibility_score}%`);
+            });
+        }
+    }
+
+    getScoreClass(score) {
+        if (score >= 80) return "score-high";
+        if (score >= 60) return "score-medium";
+        return "score-low";
+    }
+
+    setupEventListeners() {
+        // Search functionality
+        d3.select("#search").on("input", (event) => {
+            this.searchTools(event.target.value);
+        });
+
+        // Category filter
+        d3.select("#categoryFilter").on("change", (event) => {
+            this.filterByCategory(event.target.value);
+        });
+
+        // Reset zoom
+        d3.select("#resetZoom").on("click", () => {
+            this.svg.transition().duration(750).call(
+                d3.zoom().transform,
+                d3.zoomIdentity
+            );
+        });
+
+        // Show statistics
+        d3.select("#showStats").on("click", () => {
+            this.toggleStats();
+        });
+
+        // Edge labels toggle
+        d3.select("#showEdgeLabels").on("change", (event) => {
+            this.toggleEdgeLabels(event.target.checked);
+        });
+    }
+
+    searchTools(query) {
+        if (!query) {
+            this.graphGroup.selectAll(".node").style("opacity", 1);
+            this.graphGroup.selectAll(".node-label").style("opacity", 1);
+            return;
+        }
+
+        const queryLower = query.toLowerCase();
+        this.graphGroup.selectAll(".node")
+            .style("opacity", d =>
+                d.name.toLowerCase().includes(queryLower) ||
+                d.description.toLowerCase().includes(queryLower) ? 1 : 0.2
+            );
+
+        this.graphGroup.selectAll(".node-label")
+            .style("opacity", d =>
+                d.name.toLowerCase().includes(queryLower) ||
+                d.description.toLowerCase().includes(queryLower) ? 1 : 0.2
+            );
+    }
+
+    filterByCategory(category) {
+        if (!category) {
+            this.graphGroup.selectAll(".node").style("display", "block");
+            this.graphGroup.selectAll(".node-label").style("display", "block");
+            return;
+        }
+
+        this.graphGroup.selectAll(".node")
+            .style("display", d => d.category === category ? "block" : "none");
+
+        this.graphGroup.selectAll(".node-label")
+            .style("display", d => d.category === category ? "block" : "none");
+    }
+
+    async toggleStats() {
+        const statsPanel = d3.select("#graph-stats");
+        const isVisible = statsPanel.style("display") !== "none";
+
+        if (isVisible) {
+            statsPanel.style("display", "none");
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/stats');
+            const stats = await response.json();
+
+            this.displayStats(stats);
+            statsPanel.style("display", "block");
+
+        } catch (error) {
+            this.showError(`Failed to load statistics: ${error.message}`);
+        }
+    }
+
+    displayStats(stats) {
+        const container = d3.select("#stats-content");
+        container.html("");
+
+        container.append("p").html(`<strong>Total Tools:</strong> ${stats.total_tools || 'N/A'}`);
+        container.append("p").html(`<strong>Analysis Depth:</strong> ${stats.analysis_depth || 'N/A'}`);
+        container.append("p").html(`<strong>Min Compatibility Score:</strong> ${stats.min_compatibility_score || 'N/A'}`);
+        container.append("p").html(`<strong>Created:</strong> ${stats.creation_time || 'N/A'}`);
+    }
+
+    toggleEdgeLabels(show) {
+        // Implementation for edge labels toggle
+        // This would require additional data binding for edge labels
+        console.log("Edge labels toggle:", show);
+    }
+
+    dragStarted(event, d) {
+        if (!event.active) this.simulation.alphaTarget(0.3).restart();
+        d.fx = d.x;
+        d.fy = d.y;
+    }
+
+    dragged(event, d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
+
+    dragEnded(event, d) {
+        if (!event.active) this.simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+    }
+
+    handleResize() {
+        this.width = window.innerWidth - 300;
+        this.height = window.innerHeight - 100;
+
+        this.svg
+            .attr("width", this.width)
+            .attr("height", this.height);
+
+        if (this.simulation) {
+            this.simulation
+                .force("center", d3.forceCenter(this.width / 2, this.height / 2))
+                .restart();
+        }
+    }
+
+    showError(message) {
+        console.error(message);
+        d3.select("#tool-info").html(`<div style="color: red;">Error: ${message}</div>`);
+    }
+}
+
+// Initialize the visualizer when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new ToolGraphVisualizer();
+});
+"""
+
+    # Write files
+    with open("templates/tool_graph.html", "w", encoding="utf-8") as f:
+        f.write(html_content)
+
+    with open("static/style.css", "w", encoding="utf-8") as f:
+        f.write(css_content)
+
+    with open("static/graph.js", "w", encoding="utf-8") as f:
+        f.write(js_content)
+
+    print("Web UI files created successfully!")
+
+
+if __name__ == "__main__":
+    import sys
+
+    if len(sys.argv) > 1:
+        graph_path = sys.argv[1]
+    else:
+        graph_path = "./tool_composition_graph.json"
+
+    # Create web UI files if they don't exist
+    if not os.path.exists("templates/tool_graph.html"):
+        create_web_ui_files()
+
+    # Start the web UI
+    ui = ToolGraphWebUI(graph_path)
+    ui.run()