npm - @graphty/layout - Versions diffs - 1.1.1 → 1.2.1 - Mend

@graphty/layout 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/.env.example +11 -0
package/.github/workflows/ci.yml +3 -7
package/CHANGELOG.md +14 -0
package/DEPLOYMENT.md +59 -0
package/README.md +54 -1
package/dist/vitest.config.js +2 -2
package/dist/vitest.config.js.map +1 -1
package/examples/3d-force-directed.html +611 -0
package/examples/3d-kamada-kawai.html +379 -0
package/examples/3d-layout-comparison.html +448 -0
package/examples/3d-spherical-layout.html +319 -0
package/examples/arf-layout.html +13 -1
package/examples/bfs-layout.html +38 -32
package/examples/bipartite-layout.html +16 -4
package/examples/circular-layout.html +14 -2
package/examples/forceatlas2-layout.html +118 -151
package/examples/index.html +75 -0
package/examples/kamada-kawai-layout.html +13 -1
package/{dist → examples}/layout-helpers.js +58 -29
package/examples/multipartite-layout.html +44 -54
package/examples/planar-layout.html +13 -1
package/examples/random-layout.html +13 -1
package/examples/shell-layout.html +16 -2
package/examples/spectral-layout.html +13 -1
package/examples/spiral-layout.html +13 -1
package/examples/spring-layout.html +15 -13
package/package.json +6 -3
package/src/algorithms/index.ts +6 -0
package/src/algorithms/optimization/index.ts +12 -0
package/src/algorithms/optimization/kamada-kawai-solver.ts +231 -0
package/src/algorithms/optimization/lbfgs.ts +68 -0
package/src/algorithms/optimization/line-search.ts +50 -0
package/src/algorithms/optimization/types.ts +8 -0
package/src/algorithms/planarity/check.ts +38 -0
package/src/algorithms/planarity/embedding.ts +216 -0
package/src/algorithms/planarity/index.ts +12 -0
package/src/algorithms/planarity/lr-test.ts +70 -0
package/src/algorithms/planarity/special-graphs.ts +126 -0
package/src/generators/basic.ts +93 -0
package/src/generators/bipartite.ts +45 -0
package/src/generators/grid.ts +42 -0
package/src/generators/index.ts +15 -0
package/src/generators/random.ts +39 -0
package/src/generators/scale-free.ts +72 -0
package/src/index.ts +18 -0
package/src/layouts/basic/index.ts +5 -0
package/src/layouts/basic/random.ts +32 -0
package/src/layouts/force-directed/arf.ts +130 -0
package/src/layouts/force-directed/forceatlas2.ts +407 -0
package/src/layouts/force-directed/fruchterman-reingold.ts +164 -0
package/src/layouts/force-directed/index.ts +9 -0
package/src/layouts/force-directed/kamada-kawai.ts +112 -0
package/src/layouts/force-directed/spring.ts +35 -0
package/src/layouts/geometric/circular.ts +77 -0
package/src/layouts/geometric/index.ts +7 -0
package/src/layouts/geometric/shell.ts +80 -0
package/src/layouts/geometric/spiral.ts +93 -0
package/src/layouts/hierarchical/bfs.ts +81 -0
package/src/layouts/hierarchical/bipartite.ts +94 -0
package/src/layouts/hierarchical/index.ts +7 -0
package/src/layouts/hierarchical/multipartite.ts +88 -0
package/src/layouts/index.ts +9 -0
package/src/layouts/specialized/index.ts +6 -0
package/src/layouts/specialized/planar.ts +65 -0
package/src/layouts/specialized/spectral.ts +128 -0
package/src/types/embedding.ts +11 -0
package/src/types/graph.ts +13 -0
package/src/types/index.ts +7 -0
package/src/types/layout.ts +9 -0
package/src/utils/graph.ts +77 -0
package/src/utils/index.ts +9 -0
package/src/utils/numpy.ts +108 -0
package/src/utils/params.ts +26 -0
package/src/utils/random.ts +53 -0
package/src/utils/rescale.ts +137 -0
package/test/arf-layout.test.ts +1 -1
package/test/bfs-layout.test.ts +1 -1
package/test/bipartite-layout.test.ts +1 -1
package/test/circular-layout.test.ts +145 -3
package/test/forceatlas2-layout.test.ts +1 -1
package/test/fruchterman-reingold-layout.test.ts +1 -1
package/test/graph-generators.test.ts +1 -1
package/test/kamada-kawai-layout.test.ts +273 -1
package/test/multipartite-layout.test.ts +1 -1
package/test/planar-layout.test.ts +1 -1
package/test/random-layout.test.ts +1 -1
package/test/rescale-layout.test.ts +1 -1
package/test/shell-layout.test.ts +1 -1
package/test/spectral-layout.test.ts +1 -1
package/test/spiral-layout.test.ts +1 -1
package/test/spring-layout.test.ts +1 -1
package/vite.config.js +36 -0
package/vitest.config.ts +2 -2
package/dist/layout-helpers.d.ts +0 -123
package/dist/layout-helpers.js.map +0 -1
package/dist/layout.d.ts +0 -275
package/dist/layout.js +0 -2280
package/dist/layout.js.map +0 -1
package/layout-helpers.ts +0 -559
package/layout.ts +0 -2867

package/examples/forceatlas2-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ForceAtlas2 Layout Test</title>
@@ -191,16 +203,117 @@
     <script type="module">
         import {
-            forceatlas2Layout,
-            randomGraph,
-            scaleFreeGraph,
-            gridGraph,
+            forceatlas2Layout
+        } from "./layout.js";
+        import {
             autoConfigureForce
-        } from '../dist/layout.js';
+        } from "./layout-helpers.js";
         let currentGraph = null;
         let currentConfig = null;
+        // Graph generation utilities
+        function randomGraph(n, p, seed) {
+            const nodes = Array.from({length: n}, (_, i) => i);
+            const edges = [];
+            // Simple random graph with probability p for each edge
+            for (let i = 0; i < n; i++) {
+                for (let j = i + 1; j < n; j++) {
+                    if (Math.random() < p) {
+                        edges.push([i, j]);
+                    }
+                }
+            }
+            return {
+                nodes: () => nodes,
+                edges: () => edges
+            };
+        }
+        function scaleFreeGraph(n, m, seed) {
+            const nodes = Array.from({length: n}, (_, i) => i);
+            const edges = [];
+            // Start with a complete graph of m+1 nodes
+            for (let i = 0; i <= m; i++) {
+                for (let j = i + 1; j <= m; j++) {
+                    edges.push([i, j]);
+                }
+            }
+            // Add remaining nodes with preferential attachment
+            for (let i = m + 1; i < n; i++) {
+                const degrees = new Map();
+                for (const [u, v] of edges) {
+                    degrees.set(u, (degrees.get(u) || 0) + 1);
+                    degrees.set(v, (degrees.get(v) || 0) + 1);
+                }
+                const totalDegree = Array.from(degrees.values()).reduce((a, b) => a + b, 0);
+                const targets = new Set();
+                while (targets.size < Math.min(m, i)) {
+                    let r = Math.random() * totalDegree;
+                    let node = 0;
+                    for (const [n, d] of degrees) {
+                        r -= d;
+                        if (r <= 0) {
+                            node = n;
+                            break;
+                        }
+                    }
+                    if (!targets.has(node)) {
+                        targets.add(node);
+                        edges.push([i, node]);
+                    }
+                }
+            }
+            return {
+                nodes: () => nodes,
+                edges: () => edges
+            };
+        }
+        function gridGraph(rows, cols) {
+            const nodes = [];
+            const edges = [];
+            // Create nodes
+            for (let r = 0; r < rows; r++) {
+                for (let c = 0; c < cols; c++) {
+                    nodes.push(r * cols + c);
+                }
+            }
+            // Create edges
+            for (let r = 0; r < rows; r++) {
+                for (let c = 0; c < cols; c++) {
+                    const node = r * cols + c;
+                    // Right edge
+                    if (c < cols - 1) {
+                        edges.push([node, node + 1]);
+                    }
+                    // Down edge
+                    if (r < rows - 1) {
+                        edges.push([node, node + cols]);
+                    }
+                }
+            }
+            return {
+                nodes: () => nodes,
+                edges: () => edges
+            };
+        }
         function generateGraph(type, numNodes) {
             switch(type) {
                 case 'scale-free':
@@ -251,150 +364,7 @@
                 case 'random':
                 default:
                     return randomGraph(numNodes, 0.1, Date.now());
-                    for(let i = 1; i < Math.min(5, numNodes); i++) {
-                        edges.push([0, i]);
-                    }
-                    // Add nodes with preferential attachment
-                    for(let i = 5; i < numNodes; i++) {
-                        // Number of connections for new node
-                        const newEdges = Math.min(3, i);
-                        // Track edge count per node for preferential attachment
-                        const nodeDegrees = new Array(i).fill(0);
-                        for(const edge of edges) {
-                            nodeDegrees[edge[0]]++;
-                            nodeDegrees[edge[1]]++;
-                        }
-                        // Calculate total degree for probability
-                        const totalDegree = nodeDegrees.reduce((sum, deg) => sum + deg, 0);
-                        // Add edges based on preferential attachment
-                        const added = new Set();
-                        for(let j = 0; j < newEdges; j++) {
-                            let targetNode;
-                            do {
-                                // Choose node with probability proportional to its degree
-                                let rand = Math.random() * totalDegree;
-                                targetNode = 0;
-                                while(targetNode < i && rand > 0) {
-                                    rand -= nodeDegrees[targetNode];
-                                    if(rand > 0) targetNode++;
-                                }
-                                if(targetNode >= i) targetNode = Math.floor(Math.random() * i);
-                            } while(added.has(targetNode));
-                            edges.push([i, targetNode]);
-                            added.add(targetNode);
-                        }
-                    }
-                    break;
-                case 'community':
-                    // Create community structure with 3-4 communities
-                    const numCommunities = Math.min(4, Math.ceil(numNodes / 10));
-                    const communitySizes = [];
-                    let remainingNodes = numNodes;
-                    for(let i = 0; i < numCommunities - 1; i++) {
-                        const size = Math.ceil(numNodes / numCommunities);
-                        communitySizes.push(size);
-                        remainingNodes -= size;
-                    }
-                    communitySizes.push(remainingNodes);
-                    let nodeIndex = 0;
-                    for(let c = 0; c < numCommunities; c++) {
-                        const communityStart = nodeIndex;
-                        const communityEnd = communityStart + communitySizes[c];
-                        // Connect nodes within community (dense)
-                        for(let i = communityStart; i < communityEnd; i++) {
-                            for(let j = i + 1; j < communityEnd; j++) {
-                                if(Math.random() < 0.7) { // High probability within community
-                                    edges.push([i, j]);
-                                }
-                            }
-                        }
-                        // Connect to other communities (sparse)
-                        if(c > 0) {
-                            const prevCommunityStart = nodeIndex - communitySizes[c-1];
-                            const bridgeEdges = Math.max(1, Math.floor(communitySizes[c] * 0.1));
-                            for(let e = 0; e < bridgeEdges; e++) {
-                                const source = communityStart + Math.floor(Math.random() * communitySizes[c]);
-                                const target = prevCommunityStart + Math.floor(Math.random() * communitySizes[c-1]);
-                                edges.push([source, target]);
-                            }
-                        }
-                        nodeIndex = communityEnd;
-                    }
-                    break;
-                case 'grid':
-                    // Create a grid-like structure
-                    const gridSize = Math.ceil(Math.sqrt(numNodes));
-                    for(let i = 0; i < numNodes; i++) {
-                        const row = Math.floor(i / gridSize);
-                        const col = i % gridSize;
-                        // Connect right
-                        if(col < gridSize - 1 && i + 1 < numNodes) {
-                            edges.push([i, i + 1]);
-                        }
-                        // Connect down
-                        if(row < gridSize - 1 && i + gridSize < numNodes) {
-                            edges.push([i, i + gridSize]);
-                        }
-                    }
-                    break;
-                case 'random':
-                default:
-                    // Random graph with controlled density
-                    const density = 0.1; // 10% of possible edges
-                    const possibleEdges = (numNodes * (numNodes - 1)) / 2;
-                    const targetEdges = Math.ceil(possibleEdges * density);
-                    // Ensure connected graph with spanning tree
-                    for(let i = 1; i < numNodes; i++) {
-                        const parent = Math.floor(Math.random() * i);
-                        edges.push([parent, i]);
-                    }
-                    // Add random edges up to target density
-                    let additionalEdges = targetEdges - (numNodes - 1);
-                    let attempts = 0;
-                    while(additionalEdges > 0 && attempts < 1000) {
-                        const a = Math.floor(Math.random() * numNodes);
-                        const b = Math.floor(Math.random() * numNodes);
-                        if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
-                            edges.push([a, b]);
-                            additionalEdges--;
-                        }
-                        attempts++;
-                    }
-                    break;
             }
-            // Create node masses based on degree
-            const masses = {};
-            for(const edge of edges) {
-                masses[edge[0]] = (masses[edge[0]] || 1) + 0.1;
-                masses[edge[1]] = (masses[edge[1]] || 1) + 0.1;
-            }
-            return {
-                nodes: () => nodes,
-                edges: () => edges,
-                masses: masses
-            };
         }
         function visualizeGraph(graph, positions) {
@@ -502,9 +472,6 @@
                 // Apply layout immediately
                 applyLayout();
-                });
-                visualizeGraph(currentGraph, positions);
             } catch (error) {
                 console.error('Error in graph generation:', error);

package/examples/index.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NetworkX Layout Tests</title>
@@ -71,6 +83,38 @@
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             padding: 20px;
         }
+        .section-header {
+            text-align: center;
+            margin: 40px 0 20px 0;
+            color: #333;
+        }
+        .section-header h2 {
+            color: #2c5aa0;
+            margin-bottom: 10px;
+        }
+        .section-header p {
+            color: #666;
+            margin: 0;
+        }
+        .layout-card.threed {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .layout-card.threed .layout-title {
+            color: #fff;
+        }
+        .layout-card.threed .layout-description {
+            color: #f0f0f0;
+        }
+        .layout-card.threed .test-button {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+        .layout-card.threed .test-button:hover {
+            background: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.5);
+        }
     </style>
 </head>
 <body>
@@ -79,6 +123,11 @@
         <p>Interactive tests for graph layout algorithms in JavaScript</p>
     </div>
+    <div class="section-header">
+        <h2>2D Layout Algorithms</h2>
+        <p>Classic graph layout algorithms for 2D visualization</p>
+    </div>
     <div class="layout-grid">
         <div class="layout-card">
             <div class="layout-title">Random Layout</div>
@@ -159,6 +208,32 @@
         </div>
     </div>
+    <div class="section-header">
+        <h2>3D Layout Algorithms</h2>
+        <p>Interactive 3D visualizations with Three.js - drag to rotate, scroll to zoom</p>
+    </div>
+    <div class="layout-grid">
+        <div class="layout-card threed">
+            <div class="layout-title">3D Force-Directed Layouts</div>
+            <div class="layout-description">Compare spring, ForceAtlas2, and ARF algorithms in immersive 3D space with interactive controls</div>
+            <a href="3d-force-directed.html" class="test-button">Explore 3D</a>
+        </div>
+        <div class="layout-card threed">
+            <div class="layout-title">3D Kamada-Kawai Layout</div>
+            <div class="layout-description">Stress-minimization algorithm in 3D with real-time stress calculation and graph generation</div>
+            <a href="3d-kamada-kawai.html" class="test-button">Explore 3D</a>
+        </div>
+        <div class="layout-card threed">
+            <div class="layout-title">3D Spherical Layout</div>
+            <div class="layout-description">Nodes positioned on a 3D sphere surface with auto-rotation and customizable graph types</div>
+            <a href="3d-spherical-layout.html" class="test-button">Explore 3D</a>
+        </div>
+    </div>
     <div class="footer">
         <p>Ported from NetworkX Python library - Interactive tests for JavaScript</p>
     </div>

package/examples/kamada-kawai-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kamada-Kawai Layout Test</title>
@@ -157,7 +169,7 @@
     </div>
     <script type="module">
-        import { kamadaKawaiLayout } from '../dist/layout.js';
+        import { kamadaKawaiLayout } from "./layout.js";
         let currentGraph = null;
         let distances = null;

package/{dist → examples}/layout-helpers.js RENAMED Viewed

@@ -409,49 +409,78 @@ function groupByKCore(nodes, edges) {
         .map(([, nodeList]) => nodeList);
 }
 function groupByCommunity(nodes, edges, targetGroups) {
-    // Simple community detection using modularity
+    // Fast community detection using label propagation
     const communities = new Map();
-    nodes.forEach((node, i) => communities.set(node, i));
-    // Build adjacency
     const adj = new Map();
-    nodes.forEach(node => adj.set(node, new Set()));
+    // Initialize each node in its own community
+    nodes.forEach((node, i) => {
+        communities.set(node, i);
+        adj.set(node, new Set());
+    });
+    // Build adjacency
     edges.forEach(([u, v]) => {
         adj.get(u).add(v);
         adj.get(v).add(u);
     });
-    // Iteratively merge communities
-    let numCommunities = nodes.length;
-    while (numCommunities > targetGroups) {
-        let improved = false;
-        for (const node of nodes) {
-            const currentComm = communities.get(node);
-            const neighborComms = new Set();
-            adj.get(node).forEach(neighbor => {
-                neighborComms.add(communities.get(neighbor));
+    // Label propagation algorithm
+    const maxIterations = 10; // Prevent infinite loops
+    for (let iter = 0; iter < maxIterations; iter++) {
+        let changed = false;
+        // Process nodes in random order
+        const shuffledNodes = nodes.slice().sort(() => Math.random() - 0.5);
+        for (const node of shuffledNodes) {
+            const neighbors = adj.get(node);
+            if (neighbors.size === 0) continue;
+            // Count community frequencies among neighbors
+            const commCounts = new Map();
+            neighbors.forEach(neighbor => {
+                const comm = communities.get(neighbor);
+                commCounts.set(comm, (commCounts.get(comm) || 0) + 1);
             });
-            for (const targetComm of Array.from(neighborComms)) {
-                if (targetComm !== currentComm) {
-                    // Simple decision: join most common neighbor community
-                    communities.set(node, targetComm);
-                    improved = true;
-                    break;
+            // Find most frequent community
+            let maxCount = 0;
+            let bestComm = communities.get(node);
+            commCounts.forEach((count, comm) => {
+                if (count > maxCount || (count === maxCount && comm < bestComm)) {
+                    maxCount = count;
+                    bestComm = comm;
                 }
+            });
+            if (bestComm !== communities.get(node)) {
+                communities.set(node, bestComm);
+                changed = true;
             }
-            if (improved)
-                break;
         }
-        if (!improved)
-            break;
-        // Count communities
-        numCommunities = new Set(communities.values()).size;
+        if (!changed) break;
     }
-    // Group nodes by community
+    // Consolidate communities
     const groups = new Map();
     communities.forEach((comm, node) => {
-        if (!groups.has(comm))
-            groups.set(comm, []);
+        if (!groups.has(comm)) groups.set(comm, []);
         groups.get(comm).push(node);
     });
-    return Array.from(groups.values());
+    let result = Array.from(groups.values());
+    // If we have too many groups, merge the smallest ones
+    while (result.length > targetGroups && result.length > 1) {
+        // Sort by size
+        result.sort((a, b) => a.length - b.length);
+        // Merge two smallest groups
+        const merged = result[0].concat(result[1]);
+        result = [merged, ...result.slice(2)];
+    }
+    return result;
 }
 //# sourceMappingURL=layout-helpers.js.map