npm - @graphty/layout - Versions diffs - 1.1.0 → 1.2.0 - Mend

@graphty/layout 1.1.0 → 1.2.0

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 (57) hide show

package/.env.example +11 -0
package/.github/workflows/ci.yml +89 -14
package/.releaserc.json +22 -0
package/CHANGELOG.md +31 -0
package/CLAUDE.md +104 -0
package/CONTRIBUTING.md +1 -0
package/DEPLOYMENT.md +59 -0
package/README.md +662 -93
package/dist/layout-helpers.d.ts +123 -0
package/dist/layout-helpers.js +458 -0
package/dist/layout-helpers.js.map +1 -0
package/dist/layout.d.ts +275 -0
package/dist/layout.js +2304 -0
package/dist/layout.js.map +1 -0
package/dist/vitest.config.d.ts +2 -0
package/dist/vitest.config.js +30 -0
package/dist/vitest.config.js.map +1 -0
package/examples/3d-force-directed.html +611 -0
package/examples/3d-kamada-kawai.html +394 -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 +49 -39
package/examples/bipartite-layout.html +89 -69
package/examples/circular-layout.html +26 -35
package/examples/forceatlas2-layout.html +134 -28
package/examples/index.html +75 -0
package/examples/kamada-kawai-layout.html +13 -1
package/examples/multipartite-layout.html +73 -88
package/examples/planar-layout.html +13 -1
package/examples/random-layout.html +13 -1
package/examples/shell-layout.html +65 -34
package/examples/spectral-layout.html +13 -1
package/examples/spiral-layout.html +13 -1
package/examples/spring-layout.html +25 -3
package/layout-helpers.ts +560 -0
package/layout.ts +316 -14
package/package.json +20 -6
package/test/arf-layout.test.ts +443 -0
package/test/bfs-layout.test.ts +427 -0
package/test/bipartite-layout.test.ts +344 -0
package/test/circular-layout.test.ts +442 -0
package/test/forceatlas2-layout.test.ts +405 -0
package/test/fruchterman-reingold-layout.test.ts +477 -0
package/test/graph-generators.test.ts +450 -0
package/test/kamada-kawai-layout.test.ts +623 -0
package/test/multipartite-layout.test.ts +404 -0
package/test/planar-layout.test.ts +266 -0
package/test/random-layout.test.ts +254 -0
package/test/rescale-layout.test.ts +373 -0
package/test/shell-layout.test.ts +347 -0
package/test/spectral-layout.test.ts +378 -0
package/test/spiral-layout.test.ts +338 -0
package/test/spring-layout.test.ts +241 -0
package/vite.config.js +36 -0
package/vitest.config.ts +30 -0
package/.releaserc +0 -3

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/examples/multipartite-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>Multipartite Layout Test</title>
@@ -114,12 +126,11 @@
             </div>
             <div class="control-group">
-                <label for="edge-type">Connection type:</label>
-                <select id="edge-type">
-                    <option value="adjacent">Adjacent layers</option>
-                    <option value="random">Random between layers</option>
-                    <option value="hierarchical">Hierarchical</option>
-                    <option value="complete">Complete</option>
+                <label for="graph-type">Graph type:</label>
+                <select id="graph-type">
+                    <option value="scale-free">Scale-Free (automatic layers)</option>
+                    <option value="tree">Tree-like</option>
+                    <option value="custom-layers">Custom Layers</option>
                 </select>
             </div>
@@ -141,102 +152,74 @@
                 </select>
             </div>
+            <div class="control-group">
+                <label for="layer-method">Layer assignment:</label>
+                <select id="layer-method">
+                    <option value="bfs">BFS (distance-based)</option>
+                    <option value="degree">Degree-based</option>
+                    <option value="community">Community-based</option>
+                </select>
+            </div>
             <button onclick="applyLayout()">Apply Layout</button>
             <div id="layers-info" class="layers-info"></div>
         </div>
     </div>
     <script type="module">
-        import { multipartiteLayout } from '../dist/layout.js';
+        import {
+            multipartiteLayout,
+            scaleFreeGraph,
+            starGraph,
+            randomGraph,
+            groupNodes,
+            findBestRoot
+        } from "./layout.js";
         let currentGraph = null;
+        let currentLayers = null;
-        function generateMultipartiteGraph(numLayers, nodesPerLayer, edgeType) {
-            const layers = {};
-            const allNodes = [];
-            // Create layers
-            for (let layer = 0; layer < numLayers; layer++) {
-                const layerNodes = [];
-                for (let node = 0; node < nodesPerLayer; node++) {
-                    const nodeName = `L${layer}N${node}`;
-                    layerNodes.push(nodeName);
-                    allNodes.push(nodeName);
-                }
-                layers[layer] = layerNodes;
-            }
+        function generateGraph(type, numLayers, nodesPerLayer) {
+            const totalNodes = numLayers * nodesPerLayer;
-            const edges = [];
-            // Generate edges based on type
-            switch(edgeType) {
-                case 'adjacent':
-                    // Connect only adjacent layers
-                    for (let layer = 0; layer < numLayers - 1; layer++) {
-                        const currentLayer = layers[layer];
-                        const nextLayer = layers[layer + 1];
-                        currentLayer.forEach(node1 => {
-                            nextLayer.forEach(node2 => {
-                                if (Math.random() < 0.4) { // 40% probability
-                                    edges.push([node1, node2]);
-                                }
-                            });
-                        });
-                    }
-                    break;
-                case 'random':
-                    // Random connections between all layers
-                    for (let i = 0; i < allNodes.length * 0.8; i++) {
-                        const node1 = allNodes[Math.floor(Math.random() * allNodes.length)];
-                        const node2 = allNodes[Math.floor(Math.random() * allNodes.length)];
-                        // Avoid self-loops and duplicates
-                        if (node1 !== node2 && !edges.some(([s, t]) =>
-                            (s === node1 && t === node2) || (s === node2 && t === node1))) {
-                            edges.push([node1, node2]);
+            switch(type) {
+                case 'scale-free':
+                    // Generate scale-free network
+                    return scaleFreeGraph(totalNodes, 2, Date.now());
+                case 'tree':
+                    // Generate tree-like structure
+                    return starGraph(totalNodes);
+                case 'custom-layers':
+                default:
+                    // Generate custom layered graph
+                    const nodes = [];
+                    const edges = [];
+                    // Create nodes
+                    for (let layer = 0; layer < numLayers; layer++) {
+                        for (let node = 0; node < nodesPerLayer; node++) {
+                            nodes.push(`L${layer}N${node}`);
                         }
                     }
-                    break;
-                case 'hierarchical':
-                    // Hierarchical connections (each node connects to nodes in the next layer)
+                    // Connect adjacent layers
                     for (let layer = 0; layer < numLayers - 1; layer++) {
-                        const currentLayer = layers[layer];
-                        const nextLayer = layers[layer + 1];
-                        currentLayer.forEach((node1, idx) => {
-                            // Connect to 1-2 nodes in the next layer
-                            const connections = Math.min(2, nextLayer.length);
-                            for (let c = 0; c < connections; c++) {
-                                const targetIdx = (idx + c) % nextLayer.length;
-                                edges.push([node1, nextLayer[targetIdx]]);
+                        for (let n1 = 0; n1 < nodesPerLayer; n1++) {
+                            for (let n2 = 0; n2 < nodesPerLayer; n2++) {
+                                if (Math.random() < 0.3) {
+                                    edges.push([
+                                        `L${layer}N${n1}`,
+                                        `L${layer + 1}N${n2}`
+                                    ]);
+                                }
                             }
-                        });
-                    }
-                    break;
-                case 'complete':
-                    // Each layer is fully connected to the next
-                    for (let layer = 0; layer < numLayers - 1; layer++) {
-                        const currentLayer = layers[layer];
-                        const nextLayer = layers[layer + 1];
-                        currentLayer.forEach(node1 => {
-                            nextLayer.forEach(node2 => {
-                                edges.push([node1, node2]);
-                            });
-                        });
+                        }
                     }
-                    break;
+                    return { nodes: () => nodes, edges: () => edges };
             }
-            return {
-                nodes: () => allNodes,
-                edges: () => edges,
-                layers
-            };
         }
         function visualizeGraph(graph, positions) {
@@ -263,7 +246,8 @@
             // Draw layer guidelines
             const layerColors = ['#F44336', '#9C27B0', '#3F51B5', '#009688', '#FF9800'];
-            Object.entries(graph.layers).forEach(([layerIdx, layerNodes]) => {
+            if (currentLayers) {
+                currentLayers.forEach((layerNodes, layerIdx) => {
                 const layerPositions = layerNodes.map(node => positions[node]);
                 if (layerPositions.length > 1) {
@@ -291,7 +275,8 @@
                     rect.setAttribute('stroke-dasharray', '5,5');
                     svg.appendChild(rect);
                 }
-            });
+                });
+            }
             // Draw edges
             const edges = graph.edges();

package/examples/planar-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>Planar Layout Test</title>
@@ -161,7 +173,7 @@
     </div>
     <script type="module">
-        import { planarLayout } from '../dist/layout.js';
+        import { planarLayout } from "./layout.js";
         let currentGraph = null;

package/examples/random-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>Random Layout Test</title>
@@ -142,7 +154,7 @@
     </div>
     <script type="module">
-        import { randomLayout } from '../dist/layout.js';
+        import { randomLayout } from "./layout.js";
         let currentGraph = null;

package/examples/shell-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>Shell Layout Test</title>
@@ -117,10 +129,12 @@
             <div class="control-group">
                 <label for="shell-pattern">Shell pattern:</label>
                 <select id="shell-pattern">
-                    <option value="auto">Automatic</option>
-                    <option value="centered">Center + Ring</option>
-                    <option value="triple">Three Rings</option>
-                    <option value="nested">Nested Rings</option>
+                    <option value="degree">By Degree (hubs in center)</option>
+                    <option value="k-core">By K-Core (density)</option>
+                    <option value="bfs">By Distance (BFS)</option>
+                    <option value="community">By Community</option>
+                    <option value="manual-center">Manual: Center + Ring</option>
+                    <option value="manual-triple">Manual: Three Rings</option>
                 </select>
             </div>
@@ -129,46 +143,64 @@
     </div>
     <script type="module">
-        import { shellLayout } from '../dist/layout.js';
+        import {
+            shellLayout,
+            scaleFreeGraph,
+            randomGraph,
+            groupNodes,
+            findBestRoot
+        } from "./layout.js";
         let currentGraph = null;
         function generateGraph(numNodes) {
-            const nodes = Array.from({length: numNodes}, (_, i) => i);
-            const edges = [];
-            // Generate simple connected graph
-            for(let i = 1; i < numNodes; i++) {
-                edges.push([Math.floor(Math.random() * i), i]);
+            // Use scale-free graph for interesting shell patterns
+            if (numNodes < 50) {
+                return scaleFreeGraph(numNodes, 2, Date.now());
+            } else {
+                // For larger graphs, use random graph
+                return randomGraph(numNodes, 0.05, Date.now());
             }
-            return { nodes: () => nodes, edges: () => edges };
         }
-        function getShellConfiguration(pattern, numNodes) {
+        function getShellConfiguration(pattern, graph) {
+            const numNodes = graph.nodes().length;
             switch(pattern) {
-                case 'centered':
-                    return [[0], Array.from({length: numNodes - 1}, (_, i) => i + 1)];
-                case 'triple':
+                case 'degree':
+                    // Group by degree - hubs in center
+                    return groupNodes(graph, 'degree', Math.min(4, Math.ceil(numNodes / 10)));
+                case 'k-core':
+                    // Group by k-core decomposition
+                    return groupNodes(graph, 'k-core');
+                case 'bfs':
+                    // Group by distance from best root
+                    const root = findBestRoot(graph);
+                    return groupNodes(graph, 'bfs', 0, { root });
+                case 'community':
+                    // Group by detected communities
+                    return groupNodes(graph, 'community', Math.min(5, Math.ceil(numNodes / 20)));
+                case 'manual-center':
+                    // Manual: center node + outer ring
+                    const nodes = graph.nodes();
+                    return [[nodes[0]], nodes.slice(1)];
+                case 'manual-triple':
+                    // Manual: three equal rings
                     const third = Math.floor(numNodes / 3);
+                    const allNodes = graph.nodes();
                     return [
-                        Array.from({length: third}, (_, i) => i),
-                        Array.from({length: third}, (_, i) => i + third),
-                        Array.from({length: numNodes - 2 * third}, (_, i) => i + 2 * third)
+                        allNodes.slice(0, third),
+                        allNodes.slice(third, 2 * third),
+                        allNodes.slice(2 * third)
                     ];
-                case 'nested':
-                    const shells = [];
-                    let remaining = numNodes;
-                    let start = 0;
-                    while(remaining > 0) {
-                        const shellSize = Math.min(Math.ceil(remaining / 2), remaining);
-                        shells.push(Array.from({length: shellSize}, (_, i) => i + start));
-                        start += shellSize;
-                        remaining -= shellSize;
-                    }
-                    return shells;
                 default:
-                    return null; // Auto-configuration
+                    return groupNodes(graph, 'degree', 3);
             }
         }
@@ -262,9 +294,8 @@
             if(!currentGraph) return;
             const pattern = document.getElementById('shell-pattern').value;
-            const numNodes = currentGraph.nodes().length;
-            const shells = getShellConfiguration(pattern, numNodes);
+            const shells = getShellConfiguration(pattern, currentGraph);
             const positions = shellLayout(currentGraph, shells, 1, [0, 0], 2);
             visualizeGraph(currentGraph, positions);

package/examples/spectral-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>Spectral Layout Test</title>
@@ -135,7 +147,7 @@
     </div>
     <script type="module">
-        import { spectralLayout } from '../dist/layout.js';
+        import { spectralLayout } from "./layout.js";
         let currentGraph = null;

package/examples/spiral-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>Spiral Layout Test</title>
@@ -171,7 +183,7 @@
     </div>
     <script type="module">
-        import { spiralLayout } from '../dist/layout.js';
+        import { spiralLayout } from "./layout.js";
         let currentGraph = null;

package/examples/spring-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>Spring Layout Test</title>
@@ -141,7 +153,7 @@
     </div>
     <script type="module">
-        import { springLayout } from '../dist/layout.js';
+        import { springLayout } from "./layout.js";
         let currentGraph = null;
@@ -274,7 +286,17 @@
             if(!currentGraph) return;
             const iterations = parseInt(document.getElementById('iterations').value);
-            const k = parseFloat(document.getElementById('k-value').value);
+            const autoConfig = document.getElementById('auto-config').checked;
+            let k;
+            if (autoConfig && currentConfig) {
+                k = currentConfig.k;
+                // Update slider to show auto-configured value
+                document.getElementById('k-value').value = k;
+                document.getElementById('k-value-value').textContent = k.toFixed(2);
+            } else {
+                k = parseFloat(document.getElementById('k-value').value);
+            }
             const positions = springLayout(currentGraph, k, null, null, iterations, 1, [0, 0], 2);
@@ -298,4 +320,4 @@
         newGraph();
     </script>
 </body>
-</html>
+</html>