From b7dc088ae3fbc2b3a8acd999badf7269c42d8d7c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 16 Dec 2025 04:35:55 +0000
Subject: [PATCH] Add new graph layout options and dependencies

Co-authored-by: daniel.robert.lewis <daniel.robert.lewis@gmail.com>
---
 index.html        | 44 +++++++++++++++++++++++++
 package-lock.json | 56 ++++++++++++++++++++++++++++++++
 package.json      |  2 ++
 src/graph.js      | 83 +++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 183 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 32a1437..2c42eb6 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,18 @@ <h3 class="panel-title">Custom Query</h3>
                 <line x1="18" y1="10" x2="12" y2="6"/>
               </svg>
             </button>
+            <button class="toolbar-btn" data-layout="breadthfirst" title="Breadth-first (Directed Tree)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="6" cy="6" r="2"/>
+                <circle cx="18" cy="6" r="2"/>
+                <circle cx="6" cy="18" r="2"/>
+                <circle cx="18" cy="18" r="2"/>
+                <line x1="8" y1="6" x2="16" y2="6"/>
+                <line x1="6" y1="8" x2="6" y2="16"/>
+                <line x1="18" y1="8" x2="18" y2="16"/>
+                <line x1="8" y1="18" x2="16" y2="18"/>
+              </svg>
+            </button>
             <button class="toolbar-btn" data-layout="circle" title="Circular">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="10"/>
@@ -147,6 +159,38 @@ <h3 class="panel-title">Custom Query</h3>
                 <rect x="3" y="14" width="7" height="7"/>
               </svg>
             </button>
+            <button class="toolbar-btn" data-layout="cose" title="Force-directed (COSE)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="2"/>
+                <circle cx="4.5" cy="8" r="1.75"/>
+                <circle cx="19.5" cy="8" r="1.75"/>
+                <circle cx="6" cy="19" r="1.75"/>
+                <circle cx="18" cy="19" r="1.75"/>
+                <line x1="10.5" y1="11.2" x2="6.2" y2="8.8"/>
+                <line x1="13.5" y1="11.2" x2="17.8" y2="8.8"/>
+                <line x1="11.2" y1="13.5" x2="7.2" y2="17.6"/>
+                <line x1="12.8" y1="13.5" x2="16.8" y2="17.6"/>
+              </svg>
+            </button>
+            <button class="toolbar-btn" data-layout="fcose" title="Fast Force-directed (fCOSE)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="7" cy="7" r="2"/>
+                <circle cx="17" cy="7" r="2"/>
+                <circle cx="7" cy="17" r="2"/>
+                <circle cx="17" cy="17" r="2"/>
+                <line x1="9" y1="7" x2="15" y2="7"/>
+                <line x1="9" y1="17" x2="15" y2="17"/>
+                <line x1="7" y1="9" x2="7" y2="15"/>
+                <line x1="17" y1="9" x2="17" y2="15"/>
+                <path d="M12 4v4M12 16v4" />
+              </svg>
+            </button>
+            <button class="toolbar-btn" data-layout="cose-bilkent" title="Spring Layout (CoSE-Bilkent)">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M7 4c0 2 4 2 4 4s-4 2-4 4 4 2 4 4-4 2-4 4" />
+                <path d="M13 4c0 2 4 2 4 4s-4 2-4 4 4 2 4 4-4 2-4 4" />
+              </svg>
+            </button>
             <button class="toolbar-btn" data-layout="clustered" title="Clustered Circles">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="7" cy="7" r="5"/>
diff --git a/package-lock.json b/package-lock.json
index 9c3bec8..19b31ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
       "license": "MIT",
       "dependencies": {
         "cytoscape": "^3.30.4",
+        "cytoscape-cose-bilkent": "^4.1.0",
         "cytoscape-dagre": "^2.5.0",
+        "cytoscape-fcose": "^2.2.0",
         "sql.js": "^1.11.0"
       },
       "devDependencies": {
@@ -788,6 +790,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/cytoscape": {
       "version": "3.33.1",
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
@@ -797,6 +808,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
     "node_modules/cytoscape-dagre": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.5.0.tgz",
@@ -809,6 +832,33 @@
         "cytoscape": "^3.2.22"
       }
     },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "license": "MIT"
+    },
     "node_modules/dagre": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
@@ -926,6 +976,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
diff --git a/package.json b/package.json
index 992d428..de0eb06 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "cytoscape": "^3.30.4",
+    "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-dagre": "^2.5.0",
+    "cytoscape-fcose": "^2.2.0",
     "sql.js": "^1.11.0"
   },
   "devDependencies": {
diff --git a/src/graph.js b/src/graph.js
index 4ba7498..4768032 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -4,9 +4,13 @@
 
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
+import fcose from 'cytoscape-fcose';
+import coseBilkent from 'cytoscape-cose-bilkent';
 
 // Register dagre layout
 cytoscape.use(dagre);
+cytoscape.use(fcose);
+cytoscape.use(coseBilkent);
 
 // Dark Forest color palette for nodes
 const NODE_COLORS = {
@@ -211,6 +215,15 @@ const LAYOUTS = {
     fit: true,
     padding: 30,
   },
+  breadthfirst: {
+    name: 'breadthfirst',
+    directed: true,
+    spacingFactor: 1.25,
+    animate: true,
+    animationDuration: 350,
+    fit: true,
+    padding: 30,
+  },
   circle: {
     name: 'circle',
     animate: true,
@@ -238,6 +251,50 @@ const LAYOUTS = {
     concentric: (node) => node.data('caller_count') || 0,
     levelWidth: () => 3,
   },
+  cose: {
+    // Built-in force-directed layout (good general-purpose)
+    name: 'cose',
+    animate: true,
+    animationDuration: 500,
+    fit: true,
+    padding: 30,
+    randomize: true,
+    // Tuning for directed call graphs (reduce hairballs a bit)
+    nodeOverlap: 4,
+    idealEdgeLength: 90,
+    nodeRepulsion: 4500,
+    gravity: 0.25,
+    numIter: 800,
+  },
+  fcose: {
+    // Faster COSE variant for larger graphs
+    name: 'fcose',
+    animate: true,
+    animationDuration: 600,
+    fit: true,
+    padding: 30,
+    randomize: true,
+    quality: 'default',
+    nodeSeparation: 80,
+    idealEdgeLength: 90,
+    nodeRepulsion: 6500,
+    edgeElasticity: 0.45,
+    gravity: 0.25,
+    numIter: 900,
+  },
+  'cose-bilkent': {
+    // Popular spring-embedder implementation (often nicer spacing than COSE)
+    name: 'cose-bilkent',
+    animate: true,
+    animationDuration: 600,
+    fit: true,
+    padding: 30,
+    randomize: true,
+    idealEdgeLength: 100,
+    nodeRepulsion: 9000,
+    gravity: 0.25,
+    numIter: 1200,
+  },
 };
 
 /**
@@ -248,6 +305,7 @@ export class GraphManager {
     this.containerId = containerId;
     this.cy = null;
     this.currentLayout = 'dagre';
+    this.currentLayoutInstance = null;
     this.nodes = new Map(); // Track nodes by hash
     this.onNodeSelect = null;
     this.onNodeHover = null;
@@ -440,14 +498,35 @@ export class GraphManager {
    * @param {string} layoutName - Layout name (dagre, circle, grid, concentric, clustered)
    */
   runLayout(layoutName = this.currentLayout) {
+    // Stop any running layout before starting a new one
+    if (this.currentLayoutInstance && typeof this.currentLayoutInstance.stop === 'function') {
+      try {
+        this.currentLayoutInstance.stop();
+      } catch {
+        // ignore
+      }
+    }
+
     if (layoutName === 'clustered') {
       this.runClusteredLayout();
       this.currentLayout = layoutName;
+      this.currentLayoutInstance = null;
       return;
     }
-    const layout = LAYOUTS[layoutName] || LAYOUTS.dagre;
+
+    const layout = { ...(LAYOUTS[layoutName] || LAYOUTS.dagre) };
+
+    // Breadthfirst looks best when we explicitly set roots (entry points)
+    if (layout.name === 'breadthfirst') {
+      const roots = this.cy.nodes().roots();
+      if (roots && roots.length > 0) {
+        layout.roots = roots;
+      }
+    }
+
     this.currentLayout = layoutName;
-    this.cy.layout(layout).run();
+    this.currentLayoutInstance = this.cy.layout(layout);
+    this.currentLayoutInstance.run();
   }
 
   /**