Spaces:

AncViz
/

graph-editor-pro

Running

App Files Files Community

AncViz commited on Nov 18, 2025

Commit

db6ded5

verified ·

1 Parent(s): 513b62b

Make the graph editable so the user can add documents, operations, connections, and so forth.

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +221 -19
script.js +540 -0
style.css +119 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Graph Editor Pro
-emoji: 🏃
-colorFrom: yellow
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Graph Editor Pro 🎨
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,221 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Genealogy Graph Analyzer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 min-h-screen text-white">
+    <!-- Header -->
+    <header class="bg-black/30 backdrop-blur-lg border-b border-white/10">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
+                        <i data-feather="git-branch" class="w-6 h-6"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                        Genealogy Graph Analyzer
+                    </h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button onclick="toggleEditMode()" id="editModeBtn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-all duration-200 flex items-center space-x-2">
+                        <i data-feather="edit-3" class="w-4 h-4"></i>
+                        <span>Edit Mode</span>
+                    </button>
+                    <button onclick="resetGraph()" class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200 flex items-center space-x-2">
+                        <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                        <span>Reset</span>
+                    </button>
+                    <button onclick="toggleFullscreen()" class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-200">
+                        <i data-feather="maximize" class="w-4 h-4"></i>
+                    </button>
+                </div>
+</div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-6">
+        <!-- Analysis Overview -->
+        <section class="mb-6 bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i data-feather="file-text" class="w-5 h-5 mr-2 text-purple-400"></i>
+                Analysis Task
+            </h2>
+            <div class="grid md:grid-cols-2 gap-4">
+                <div class="bg-white/5 rounded-lg p-4">
+                    <h3 class="text-sm font-medium text-gray-400 mb-2">Document 1</h3>
+                    <div class="flex items-center space-x-3">
+                        <div class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
+                            <i data-feather="file" class="w-6 h-6 text-blue-400"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Tree123.json</p>
+                            <p class="text-sm text-gray-400">Person: John Dow</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white/5 rounded-lg p-4">
+                    <h3 class="text-sm font-medium text-gray-400 mb-2">Document 2</h3>
+                    <div class="flex items-center space-x-3">
+                        <div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
+                            <i data-feather="file" class="w-6 h-6 text-purple-400"></i>
+                        </div>
+                        <div>
+                            <p class="font-medium">Tree456.json</p>
+                            <p class="text-sm text-gray-400">Person: John Dowe</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Graph Visualization -->
+        <section class="bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10">
+            <div class="flex items-center justify-between mb-4">
+                <h2 class="text-xl font-semibold flex items-center">
+                    <i data-feather="git-branch" class="w-5 h-5 mr-2 text-purple-400"></i>
+                    Directed Graph Visualization
+                </h2>
+                <div class="flex items-center space-x-2">
+                    <button onclick="addNode()" class="p-2 bg-green-600 hover:bg-green-700 rounded-lg transition-all" title="Add Node">
+                        <i data-feather="plus-circle" class="w-4 h-4"></i>
+                    </button>
+                    <button onclick="deleteSelectedNode()" class="p-2 bg-red-600 hover:bg-red-700 rounded-lg transition-all" title="Delete Node">
+                        <i data-feather="trash-2" class="w-4 h-4"></i>
+                    </button>
+                    <button onclick="connectNodes()" class="p-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-all" title="Connect Nodes">
+                        <i data-feather="link" class="w-4 h-4"></i>
+                    </button>
+                    <div class="w-px h-6 bg-white/20 mx-2"></div>
+                    <button onclick="zoomIn()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all">
+                        <i data-feather="zoom-in" class="w-4 h-4"></i>
+                    </button>
+                    <button onclick="zoomOut()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all">
+                        <i data-feather="zoom-out" class="w-4 h-4"></i>
+                    </button>
+                    <button onclick="fitToScreen()" class="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-all">
+                        <i data-feather="maximize-2" class="w-4 h-4"></i>
+                    </button>
+                </div>
+</div>
+            <div class="relative bg-gradient-to-br from-gray-900/50 to-black/50 rounded-lg overflow-hidden" style="height: 500px;">
+                <canvas id="graphCanvas" class="w-full h-full cursor-move"></canvas>
+                <!-- Edit Mode Indicator -->
+                <div id="editIndicator" class="absolute top-4 left-4 bg-green-600/90 backdrop-blur-lg rounded-lg px-3 py-2 text-sm font-medium hidden">
+                    <i data-feather="edit-3" class="w-4 h-4 inline mr-2"></i>
+                    Edit Mode Active
+                </div>
+                <!-- Node Edit Panel -->
+                <div id="editPanel" class="absolute top-4 right-4 bg-black/80 backdrop-blur-lg rounded-lg p-4 w-80 hidden">
+                    <h3 class="font-semibold mb-3 text-purple-400">Edit Node</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">Node Label</label>
+                            <input type="text" id="nodeLabel" class="w-full bg-white/10 rounded px-3 py-2 text-sm text-white border border-white/20 focus:border-purple-400 focus:outline-none">
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">Node Type</label>
+                            <select id="nodeType" class="w-full bg-white/10 rounded px-3 py-2 text-sm text-white border border-white/20 focus:border-purple-400 focus:outline-none">
+                                <option value="document">Document</option>
+                                <option value="operation">Operation</option>
+                                <option value="result">Result</option>
+                                <option value="data">Data</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-400 block mb-1">Node Color</label>
+                            <input type="color" id="nodeColor" class="w-full h-10 bg-white/10 rounded border border-white/20 cursor-pointer">
+                        </div>
+                        <div class="flex space-x-2">
+                            <button onclick="saveNodeChanges()" class="flex-1 bg-green-600 hover:bg-green-700 text-white rounded px-3 py-2 text-sm font-medium transition-all">
+                                Save
+                            </button>
+                            <button onclick="cancelEdit()" class="flex-1 bg-white/10 hover:bg-white/20 text-white rounded px-3 py-2 text-sm font-medium transition-all">
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Floating Info Panel -->
+                <div id="infoPanel" class="absolute top-4 right-4 bg-black/80 backdrop-blur-lg rounded-lg p-4 w-80 hidden">
+                    <h3 class="font-semibold mb-2 text-purple-400">Node Details</h3>
+                    <div id="nodeInfo" class="text-sm space-y-2"></div>
+                </div>
+            </div>
+</section>
+        <!-- Analysis Steps -->
+        <section class="mt-6 bg-black/20 backdrop-blur-lg rounded-xl p-6 border border-white/10">
+            <h2 class="text-xl font-semibold mb-4 flex items-center">
+                <i data-feather="list" class="w-5 h-5 mr-2 text-purple-400"></i>
+                Analysis Pipeline
+            </h2>
+            <div class="space-y-3">
+                <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('doc1')">
+                    <div class="w-10 h-10 bg-blue-500/20 rounded-full flex items-center justify-center">
+                        <span class="text-blue-400 font-bold">1</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="font-medium">Extract from Tree123.json</p>
+                        <p class="text-sm text-gray-400">Operation: extract_person</p>
+                    </div>
+                    <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('doc2')">
+                    <div class="w-10 h-10 bg-purple-500/20 rounded-full flex items-center justify-center">
+                        <span class="text-purple-400 font-bold">2</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="font-medium">Extract from Tree456.json</p>
+                        <p class="text-sm text-gray-400">Operation: extract_person</p>
+                    </div>
+                    <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('comparison')">
+                    <div class="w-10 h-10 bg-green-500/20 rounded-full flex items-center justify-center">
+                        <span class="text-green-400 font-bold">3</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="font-medium">Compare Names</p>
+                        <p class="text-sm text-gray-400">Operation: compare_names (threshold=0.8)</p>
+                    </div>
+                    <i data-feather="arrow-right" class="w-4 h-4 text-gray-400"></i>
+                </div>
+                <div class="flex items-center space-x-4 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-all cursor-pointer" onclick="highlightNode('classification')">
+                    <div class="w-10 h-10 bg-yellow-500/20 rounded-full flex items-center justify-center">
+                        <span class="text-yellow-400 font-bold">4</span>
+                    </div>
+                    <div class="flex-1">
+                        <p class="font-medium">Classify Same Person</p>
+                        <p class="text-sm text-gray-400">Operation: classify_same_person (method=fact_based)</p>
+                    </div>
+                    <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>
+                </div>
+            </div>
+        </section>
+        <!-- Result Summary -->
+        <section class="mt-6 bg-gradient-to-r from-green-900/20 to-emerald-900/20 backdrop-blur-lg rounded-xl p-6 border border-green-500/20">
+            <div class="flex items-center space-x-3">
+                <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
+                    <i data-feather="check" class="w-6 h-6 text-green-400"></i>
+                </div>
+                <div>
+                    <h3 class="text-xl font-semibold text-green-400">Analysis Complete</h3>
+                    <p class="text-gray-300">Classification: High probability of same person (85% match)</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,540 @@

+// Graph visualization class
+class DirectedGraph {
+    constructor(canvasId) {
+        this.canvas = document.getElementById(canvasId);
+        this.ctx = this.canvas.getContext('2d');
+        this.nodes = [];
+        this.edges = [];
+        this.selectedNode = null;
+        this.hoveredNode = null;
+        this.offset = { x: 0, y: 0 };
+        this.scale = 1;
+        this.isDragging = false;
+        this.dragStart = { x: 0, y: 0 };
+        this.editMode = false;
+        this.connectingMode = false;
+        this.connectingFrom = null;
+        this.tempConnection = null;
+        this.nodeIdCounter = 1;
+        this.setupCanvas();
+        this.createNodes();
+        this.createEdges();
+        this.setupEventListeners();
+        this.animate();
+    }
+setupCanvas() {
+        const rect = this.canvas.parentElement.getBoundingClientRect();
+        this.canvas.width = rect.width;
+        this.canvas.height = rect.height;
+    }
+    createNodes() {
+        // Document nodes
+        this.nodes.push({
+            id: 'doc1',
+            x: 100,
+            y: 100,
+            radius: 40,
+            color: '#3b82f6',
+            label: 'Tree123.json',
+            data: { person: 'John Dow', type: 'document' }
+        });
+        this.nodes.push({
+            id: 'doc2',
+            x: 100,
+            y: 250,
+            radius: 40,
+            color: '#a855f7',
+            label: 'Tree456.json',
+            data: { person: 'John Dowe', type: 'document' }
+        });
+        // Extracted nodes
+        this.nodes.push({
+            id: 'extracted1',
+            x: 300,
+            y: 100,
+            radius: 35,
+            color: '#60a5fa',
+            label: 'Extracted 1',
+            data: { operation: 'extract_person', source: 'doc1' }
+        });
+        this.nodes.push({
+            id: 'extracted2',
+            x: 300,
+            y: 250,
+            radius: 35,
+            color: '#c084fc',
+            label: 'Extracted 2',
+            data: { operation: 'extract_person', source: 'doc2' }
+        });
+        // Comparison node
+        this.nodes.push({
+            id: 'comparison',
+            x: 500,
+            y: 175,
+            radius: 45,
+            color: '#34d399',
+            label: 'Comparison',
+            data: { operation: 'compare_names', threshold: 0.8, result: 0.85 }
+        });
+        // Classification node
+        this.nodes.push({
+            id: 'classification',
+            x: 700,
+            y: 175,
+            radius: 50,
+            color: '#fbbf24',
+            label: 'Classification',
+            data: {
+                operation: 'classify_same_person',
+                method: 'fact_based',
+                result: 'High probability match',
+                confidence: 85
+            }
+        });
+    }
+    createEdges() {
+        // Document to extraction
+        this.edges.push({ from: 'doc1', to: 'extracted1', label: 'extract' });
+        this.edges.push({ from: 'doc2', to: 'extracted2', label: 'extract' });
+        // Extraction to comparison
+        this.edges.push({ from: 'extracted1', to: 'comparison', label: 'input' });
+        this.edges.push({ from: 'extracted2', to: 'comparison', label: 'input' });
+        // Comparison to classification
+        this.edges.push({ from: 'comparison', to: 'classification', label: 'result' });
+    }
+    setupEventListeners() {
+        this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+        this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+        this.canvas.addEventListener('mouseup', () => this.handleMouseUp());
+        this.canvas.addEventListener('wheel', (e) => this.handleWheel(e));
+        this.canvas.addEventListener('click', (e) => this.handleClick(e));
+        window.addEventListener('resize', () => {
+            this.setupCanvas();
+        });
+    }
+    handleMouseDown(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        if (this.editMode && this.hoveredNode) {
+            if (this.connectingMode) {
+                if (this.connectingFrom && this.connectingFrom !== this.hoveredNode) {
+                    // Create connection
+                    this.edges.push({
+                        from: this.connectingFrom.id,
+                        to: this.hoveredNode.id,
+                        label: 'connection'
+                    });
+                    this.connectingFrom = null;
+                    this.connectingMode = false;
+                    this.canvas.classList.remove('edit-mode-cursor');
+                }
+            } else {
+                this.selectedNode = this.hoveredNode;
+                this.showEditPanel(this.selectedNode);
+            }
+        } else if (!this.editMode) {
+            this.isDragging = true;
+            this.dragStart = { x: x - this.offset.x, y: y - this.offset.y };
+            this.canvas.style.cursor = 'grabbing';
+        } else if (this.editMode && !this.hoveredNode) {
+            // Add new node at click position
+            const worldX = (x - this.offset.x) / this.scale;
+            const worldY = (y - this.offset.y) / this.scale;
+            this.addNodeAt(worldX, worldY);
+        }
+    }
+    handleMouseMove(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left - this.offset.x) / this.scale;
+        const y = (e.clientY - rect.top - this.offset.y) / this.scale;
+        if (this.isDragging && !this.editMode) {
+            this.offset.x = e.clientX - rect.left - this.dragStart.x;
+            this.offset.y = e.clientY - rect.top - this.dragStart.y;
+        } else if (this.connectingMode && this.connectingFrom) {
+            this.tempConnection = { x: (e.clientX - rect.left - this.offset.x) / this.scale, y: (e.clientY - rect.top - this.offset.y) / this.scale };
+        } else {
+            // Check for hover over nodes
+            this.hoveredNode = null;
+            for (const node of this.nodes) {
+                const dist = Math.sqrt((x - node.x) ** 2 + (y - node.y) ** 2);
+                if (dist <= node.radius) {
+                    this.hoveredNode = node;
+                    if (this.editMode) {
+                        if (this.connectingMode) {
+                            this.canvas.style.cursor = 'crosshair';
+                        } else {
+                            this.canvas.style.cursor = 'pointer';
+                        }
+                    } else {
+                        this.canvas.style.cursor = 'pointer';
+                    }
+                    break;
+                }
+            }
+            if (!this.hoveredNode) {
+                this.canvas.style.cursor = this.editMode ? (this.connectingMode ? 'crosshair' : 'crosshair') : 'move';
+            }
+        }
+    }
+    handleMouseUp() {
+        this.isDragging = false;
+        this.canvas.style.cursor = this.editMode ? 'crosshair' : 'move';
+    }
+handleWheel(e) {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        this.scale *= delta;
+        this.scale = Math.max(0.5, Math.min(2, this.scale));
+    }
+    handleClick(e) {
+        if (this.hoveredNode) {
+            this.selectedNode = this.hoveredNode;
+            this.showNodeInfo(this.selectedNode);
+        }
+    }
+    showNodeInfo(node) {
+        const infoPanel = document.getElementById('infoPanel');
+        const nodeInfo = document.getElementById('nodeInfo');
+        infoPanel.classList.remove('hidden');
+        document.getElementById('editPanel').classList.add('hidden');
+        let html = `
+            <div class="space-y-2">
+                <p><span class="text-gray-400">ID:</span> <span class="font-medium">${node.id}</span></p>
+                <p><span class="text-gray-400">Label:</span> <span class="font-medium">${node.label}</span></p>
+                <p><span class="text-gray-400">Type:</span> <span class="font-medium">${node.data.type || 'custom'}</span></p>
+        `;
+        if (node.data.person) {
+            html += `<p><span class="text-gray-400">Person:</span> <span class="font-medium">${node.data.person}</span></p>`;
+        }
+        if (node.data.operation) {
+            html += `<p><span class="text-gray-400">Operation:</span> <span class="font-medium">${node.data.operation}</span></p>`;
+        }
+        if (node.data.result) {
+            html += `<p><span class="text-gray-400">Result:</span> <span class="font-medium text-green-400">${node.data.result}</span></p>`;
+        }
+        if (node.data.confidence) {
+            html += `<p><span class="text-gray-400">Confidence:</span> <span class="font-medium">${node.data.confidence}%</span></p>`;
+        }
+        html += `</div>`;
+        nodeInfo.innerHTML = html;
+    }
+    showEditPanel(node) {
+        const editPanel = document.getElementById('editPanel');
+        document.getElementById('infoPanel').classList.add('hidden');
+        editPanel.classList.remove('hidden');
+        document.getElementById('nodeLabel').value = node.label;
+        document.getElementById('nodeType').value = node.data.type || 'custom';
+        document.getElementById('nodeColor').value = node.color;
+    }
+    addNodeAt(x, y) {
+        const newNode = {
+            id: 'node_' + this.nodeIdCounter++,
+            x: x,
+            y: y,
+            radius: 35,
+            color: '#' + Math.floor(Math.random()*16777215).toString(16),
+            label: 'New Node',
+            data: { type: 'custom' }
+        };
+        this.nodes.push(newNode);
+        this.selectedNode = newNode;
+        this.showEditPanel(newNode);
+    }
+    deleteNode(nodeId) {
+        this.nodes = this.nodes.filter(n => n.id !== nodeId);
+        this.edges = this.edges.filter(e => e.from !== nodeId && e.to !== nodeId);
+        if (this.selectedNode && this.selectedNode.id === nodeId) {
+            this.selectedNode = null;
+            document.getElementById('editPanel').classList.add('hidden');
+        }
+    }
+draw() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.save();
+        this.ctx.translate(this.offset.x, this.offset.y);
+        this.ctx.scale(this.scale, this.scale);
+        // Draw edges
+        this.ctx.strokeStyle = 'rgba(168, 85, 247, 0.3)';
+        this.ctx.lineWidth = 2;
+        for (const edge of this.edges) {
+            const fromNode = this.nodes.find(n => n.id === edge.from);
+            const toNode = this.nodes.find(n => n.id === edge.to);
+            if (fromNode && toNode) {
+                this.drawArrow(fromNode, toNode, edge.label);
+            }
+        }
+        // Draw temporary connection line
+        if (this.connectingMode && this.connectingFrom && this.tempConnection) {
+            this.ctx.strokeStyle = '#10b981';
+            this.ctx.lineWidth = 3;
+            this.ctx.setLineDash([5, 5]);
+            this.ctx.beginPath();
+            this.ctx.moveTo(this.connectingFrom.x, this.connectingFrom.y);
+            this.ctx.lineTo(this.tempConnection.x, this.tempConnection.y);
+            this.ctx.stroke();
+            this.ctx.setLineDash([]);
+        }
+        // Draw nodes
+        for (const node of this.nodes) {
+            this.drawNode(node);
+        }
+        this.ctx.restore();
+    }
+    drawNode(node) {
+        const isHovered = this.hoveredNode === node;
+        const isSelected = this.selectedNode === node;
+        const isConnectingFrom = this.connectingFrom === node;
+        // Node glow effect
+        if (isHovered || isSelected || isConnectingFrom) {
+            const gradient = this.ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.radius * 2);
+            gradient.addColorStop(0, (isConnectingFrom ? '#10b981' : node.color) + '60');
+            gradient.addColorStop(1, 'transparent');
+            this.ctx.fillStyle = gradient;
+            this.ctx.beginPath();
+            this.ctx.arc(node.x, node.y, node.radius * 2, 0, Math.PI * 2);
+            this.ctx.fill();
+        }
+        // Node circle
+        this.ctx.fillStyle = node.color;
+        this.ctx.beginPath();
+        this.ctx.arc(node.x, node.y, isHovered ? node.radius * 1.1 : node.radius, 0, Math.PI * 2);
+        this.ctx.fill();
+        // Node border
+        if (isConnectingFrom) {
+            this.ctx.strokeStyle = '#10b981';
+            this.ctx.lineWidth = 4;
+        } else if (isSelected) {
+            this.ctx.strokeStyle = '#fff';
+            this.ctx.lineWidth = 3;
+        } else {
+            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+            this.ctx.lineWidth = 2;
+        }
+        this.ctx.stroke();
+        // Node label
+        this.ctx.fillStyle = '#fff';
+        this.ctx.font = 'bold 12px system-ui';
+        this.ctx.textAlign = 'center';
+        this.ctx.textBaseline = 'middle';
+        this.ctx.fillText(node.label, node.x, node.y);
+    }
+drawArrow(fromNode, toNode, label) {
+        const dx = toNode.x - fromNode.x;
+        const dy = toNode.y - fromNode.y;
+        const angle = Math.atan2(dy, dx);
+        const startX = fromNode.x + fromNode.radius * Math.cos(angle);
+        const startY = fromNode.y + fromNode.radius * Math.sin(angle);
+        const endX = toNode.x - toNode.radius * Math.cos(angle);
+        const endY = toNode.y - toNode.radius * Math.sin(angle);
+        // Draw line
+        this.ctx.beginPath();
+        this.ctx.moveTo(startX, startY);
+        this.ctx.lineTo(endX, endY);
+        this.ctx.stroke();
+        // Draw arrowhead
+        const arrowLength = 15;
+        const arrowAngle = Math.PI / 6;
+        this.ctx.beginPath();
+        this.ctx.moveTo(endX, endY);
+        this.ctx.lineTo(
+            endX - arrowLength * Math.cos(angle - arrowAngle),
+            endY - arrowLength * Math.sin(angle - arrowAngle)
+        );
+        this.ctx.moveTo(endX, endY);
+        this.ctx.lineTo(
+            endX - arrowLength * Math.cos(angle + arrowAngle),
+            endY - arrowLength * Math.sin(angle + arrowAngle)
+        );
+        this.ctx.stroke();
+        // Draw label
+        const midX = (startX + endX) / 2;
+        const midY = (startY + endY) / 2;
+        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+        this.ctx.font = '10px system-ui';
+        this.ctx.textAlign = 'center';
+        this.ctx.fillText(label, midX, midY - 10);
+    }
+    animate() {
+        this.draw();
+        requestAnimationFrame(() => this.animate());
+    }
+}
+// Initialize graph
+let graph;
+document.addEventListener('DOMContentLoaded', () => {
+    graph = new DirectedGraph('graphCanvas');
+});
+// Control functions
+function zoomIn() {
+    if (graph) {
+        graph.scale *= 1.2;
+        graph.scale = Math.min(2, graph.scale);
+    }
+}
+function zoomOut() {
+    if (graph) {
+        graph.scale *= 0.8;
+        graph.scale = Math.max(0.5, graph.scale);
+    }
+}
+function fitToScreen() {
+    if (graph) {
+        graph.scale = 1;
+        graph.offset = { x: 0, y: 0 };
+    }
+}
+function resetGraph() {
+    if (graph) {
+        graph.selectedNode = null;
+        graph.hoveredNode = null;
+        graph.connectingMode = false;
+        graph.connectingFrom = null;
+        document.getElementById('infoPanel').classList.add('hidden');
+        document.getElementById('editPanel').classList.add('hidden');
+        fitToScreen();
+    }
+}
+function toggleFullscreen() {
+    const graphContainer = document.getElementById('graphCanvas').parentElement;
+    if (!document.fullscreenElement) {
+        graphContainer.requestFullscreen();
+    } else {
+        document.exitFullscreen();
+    }
+}
+function toggleEditMode() {
+    if (!graph) return;
+    graph.editMode = !graph.editMode;
+    const editBtn = document.getElementById('editModeBtn');
+    const editIndicator = document.getElementById('editIndicator');
+    if (graph.editMode) {
+        editBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
+        editBtn.classList.add('bg-orange-600', 'hover:bg-orange-700');
+        editBtn.querySelector('span').textContent = 'Exit Edit';
+        editIndicator.classList.remove('hidden');
+        graph.canvas.classList.add('edit-mode-cursor');
+    } else {
+        editBtn.classList.remove('bg-orange-600', 'hover:bg-orange-700');
+        editBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
+        editBtn.querySelector('span').textContent = 'Edit Mode';
+        editIndicator.classList.add('hidden');
+        graph.canvas.classList.remove('edit-mode-cursor');
+        graph.connectingMode = false;
+        graph.connectingFrom = null;
+        document.getElementById('editPanel').classList.add('hidden');
+    }
+}
+function addNode() {
+    if (graph && graph.editMode) {
+        const centerX = (graph.canvas.width / 2 - graph.offset.x) / graph.scale;
+        const centerY = (graph.canvas.height / 2 - graph.offset.y) / graph.scale;
+        graph.addNodeAt(centerX, centerY);
+    }
+}
+function deleteSelectedNode() {
+    if (graph && graph.selectedNode && graph.editMode) {
+        graph.deleteNode(graph.selectedNode.id);
+    }
+}
+function connectNodes() {
+    if (graph && graph.editMode) {
+        graph.connectingMode = !graph.connectingMode;
+        if (graph.connectingMode) {
+            graph.canvas.style.cursor = 'crosshair';
+        } else {
+            graph.connectingFrom = null;
+            graph.canvas.style.cursor = 'crosshair';
+        }
+    }
+}
+function saveNodeChanges() {
+    if (graph && graph.selectedNode) {
+        graph.selectedNode.label = document.getElementById('nodeLabel').value;
+        graph.selectedNode.data.type = document.getElementById('nodeType').value;
+        graph.selectedNode.color = document.getElementById('nodeColor').value;
+        document.getElementById('editPanel').classList.add('hidden');
+    }
+}
+function cancelEdit() {
+    document.getElementById('editPanel').classList.add('hidden');
+    if (graph) {
+        graph.selectedNode = null;
+    }
+}
+function highlightNode(nodeId) {
+    if (graph) {
+        const node = graph.nodes.find(n => n.id === nodeId ||
+            (n.data && n.data.source === nodeId) ||
+            (n.id === 'extracted1' && nodeId === 'doc1') ||
+            (n.id === 'extracted2' && nodeId === 'doc2'));
+        if (node) {
+            graph.selectedNode = node;
+            graph.showNodeInfo(node);
+            // Pan to node
+            graph.offset.x = -node.x * graph.scale + graph.canvas.width / 2;
+            graph.offset.y = -node.y * graph.scale + graph.canvas.height / 2;
+        }
+    }
+}

style.css CHANGED Viewed

@@ -1,28 +1,128 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom animations */
+@keyframes pulse-glow {
+    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.5); }
+    50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.8); }
 }
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
 }
+.pulse-glow {
+    animation: pulse-glow 2s infinite;
 }
+.float-animation {
+    animation: float 3s ease-in-out infinite;
 }
+/* Glassmorphism effects */
+.glass {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(168, 85, 247, 0.5);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(168, 85, 247, 0.7);
+}
+/* Node hover effects */
+.node-hover {
+    filter: brightness(1.2);
+    transition: filter 0.3s ease;
+}
+/* Connection lines */
+.connection-line {
+    stroke: rgba(168, 85, 247, 0.6);
+    stroke-width: 2;
+    fill: none;
+    stroke-dasharray: 5, 5;
+    animation: dash 20s linear infinite;
+}
+@keyframes dash {
+    to {
+        stroke-dashoffset: -100;
+    }
+}
+/* Active node highlight */
+.active-node {
+    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
+    transform: scale(1.1);
+    transition: all 0.3s ease;
+}
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #a855f7, #ec4899);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+/* Smooth transitions */
+* {
+    transition: all 0.3s ease;
+}
+/* Canvas container */
+#graphCanvas {
+    display: block;
+    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
+}
+/* Edit mode styles */
+.edit-mode-cursor {
+    cursor: crosshair !important;
+}
+.connecting-line {
+    stroke: #10b981;
+    stroke-width: 3;
+    stroke-dasharray: 5, 5;
+    animation: dash 1s linear infinite;
+}
+.selected-for-connection {
+    filter: drop-shadow(0 0 15px #10b981);
+    animation: pulse-glow 1s infinite;
+}
+/* Edit panel styles */
+#editPanel input, #editPanel select {
+    color: white;
+}
+#editPanel input[type="color"] {
+    -webkit-appearance: none;
+    border: none;
+    width: 100%;
+}
+#editPanel input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+#editPanel input[type="color"]::-webkit-color-swatch {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
 }