@graphty/layout 1.1.0 → 1.1.1

package/examples/forceatlas2-layout.html

@@ -153,12 +153,17 @@
             </div>
             
             <div class="control-group">
+                <label for="auto-configure">Auto-configure parameters:</label>
+                <input type="checkbox" id="auto-configure" checked>
+            </div>
+            
+            <div class="control-group" id="scaling-group">
                 <label for="scaling-ratio">Scaling Ratio:</label>
                 <input type="range" id="scaling-ratio" min="0.5" max="10" step="0.5" value="2">
                 <span id="scaling-ratio-value">2.0</span>
             </div>
             
-            <div class="control-group">
+            <div class="control-group" id="gravity-group">
                 <label for="gravity">Gravity:</label>
                 <input type="range" id="gravity" min="0" max="5" step="0.1" value="1">
                 <span id="gravity-value">1.0</span>
@@ -185,19 +190,67 @@
     </div>
 
     <script type="module">
-        import { forceatlas2Layout } from '../dist/layout.js';
+        import { 
+            forceatlas2Layout,
+            randomGraph,
+            scaleFreeGraph,
+            gridGraph,
+            autoConfigureForce
+        } from '../dist/layout.js';
         
         let currentGraph = null;
-        let currentSeed = Math.floor(Math.random() * 1000);
+        let currentConfig = null;
         
         function generateGraph(type, numNodes) {
-            const nodes = Array.from({length: numNodes}, (_, i) => i);
-            const edges = [];
-            
             switch(type) {
                 case 'scale-free':
-                    // Barabási–Albert model (preferential attachment)
-                    // Start with a small connected graph
+                    return scaleFreeGraph(numNodes, 2, Date.now());
+                    
+                case 'community':
+                    // Use multiple smaller scale-free graphs
+                    const numCommunities = Math.ceil(numNodes / 10);
+                    const nodesPerCommunity = Math.floor(numNodes / numCommunities);
+                    const nodes = [];
+                    const edges = [];
+                    
+                    // Create communities
+                    for (let c = 0; c < numCommunities; c++) {
+                        const start = c * nodesPerCommunity;
+                        const end = Math.min(start + nodesPerCommunity, numNodes);
+                        
+                        // Dense connections within community
+                        for (let i = start; i < end; i++) {
+                            nodes.push(i);
+                            for (let j = i + 1; j < end; j++) {
+                                if (Math.random() < 0.6) {
+                                    edges.push([i, j]);
+                                }
+                            }
+                        }
+                        
+                        // Sparse connections between communities
+                        if (c > 0) {
+                            const prevStart = (c - 1) * nodesPerCommunity;
+                            const prevEnd = Math.min(prevStart + nodesPerCommunity, numNodes);
+                            for (let i = start; i < end && i < start + 2; i++) {
+                                for (let j = prevStart; j < prevEnd && j < prevStart + 2; j++) {
+                                    if (Math.random() < 0.1) {
+                                        edges.push([i, j]);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    
+                    return { nodes: () => nodes, edges: () => edges };
+                    
+                case 'grid':
+                    const size = Math.ceil(Math.sqrt(numNodes));
+                    return gridGraph(size, size);
+                    
+                case 'random':
+                default:
+                    return randomGraph(numNodes, 0.1, Date.now());
                     for(let i = 1; i < Math.min(5, numNodes); i++) {
                         edges.push([0, i]);
                     }
@@ -394,9 +447,10 @@
                 const x = margin + (pos[0] - minX) / rangeX * scaleX;
                 const y = margin + (pos[1] - minY) / rangeY * scaleY;
                 
-                // Node size based on degree/mass
-                const mass = graph.masses[node] || 1;
-                const radius = 5 + Math.sqrt(mass) * 1.5;
+                // Node size based on degree
+                const edges = graph.edges();
+                const degree = edges.filter(([u, v]) => u === node || v === node).length;
+                const radius = 4 + Math.sqrt(degree) * 1.5;
                 
                 // Color based on position/edge distribution
                 const hue = (node * 360 / nodes.length) % 360;
@@ -430,20 +484,24 @@
             const graphType = document.getElementById('graph-type').value;
             
             try {
-                // Generate new graph and re-seed
+                // Generate new graph
                 currentGraph = generateGraph(graphType, numNodes);
-                currentSeed = Math.floor(Math.random() * 1000);
                 
-                // Just visualize without layout initially
-                const positions = {};
-                currentGraph.nodes().forEach(node => {
-                    // Random positions in a circle
-                    const angle = Math.random() * Math.PI * 2;
-                    const radius = Math.random() * 0.5;
-                    positions[node] = [
-                        Math.cos(angle) * radius,
-                        Math.sin(angle) * radius
-                    ];
+                // Auto-configure parameters
+                currentConfig = autoConfigureForce(currentGraph);
+                
+                // Update controls with recommended values
+                if (document.getElementById('auto-configure').checked) {
+                    document.getElementById('iterations').value = currentConfig.iterations;
+                    document.getElementById('iterations-value').textContent = currentConfig.iterations;
+                    document.getElementById('scaling-ratio').value = currentConfig.scalingRatio;
+                    document.getElementById('scaling-ratio-value').textContent = currentConfig.scalingRatio.toFixed(1);
+                    document.getElementById('gravity').value = currentConfig.gravity;
+                    document.getElementById('gravity-value').textContent = currentConfig.gravity.toFixed(1);
+                }
+                
+                // Apply layout immediately
+                applyLayout();
                 });
                 
                 visualizeGraph(currentGraph, positions);
@@ -470,9 +528,27 @@
         };
         
         async function runForceAtlas2() {
-            const iterations = parseInt(document.getElementById('iterations').value);
-            const scalingRatio = parseFloat(document.getElementById('scaling-ratio').value);
-            const gravity = parseFloat(document.getElementById('gravity').value);
+            const autoConfig = document.getElementById('auto-configure').checked;
+            
+            let iterations, scalingRatio, gravity;
+            if (autoConfig && currentConfig) {
+                iterations = currentConfig.iterations;
+                scalingRatio = currentConfig.scalingRatio;
+                gravity = currentConfig.gravity;
+                
+                // Update sliders to show auto values
+                document.getElementById('iterations').value = iterations;
+                document.getElementById('iterations-value').textContent = iterations;
+                document.getElementById('scaling-ratio').value = scalingRatio;
+                document.getElementById('scaling-ratio-value').textContent = scalingRatio.toFixed(1);
+                document.getElementById('gravity').value = gravity;
+                document.getElementById('gravity-value').textContent = gravity.toFixed(1);
+            } else {
+                iterations = parseInt(document.getElementById('iterations').value);
+                scalingRatio = parseFloat(document.getElementById('scaling-ratio').value);
+                gravity = parseFloat(document.getElementById('gravity').value);
+            }
+            
             const strongGravity = document.getElementById('strong-gravity').checked;
             const dissuadeHubs = document.getElementById('dissuade-hubs').checked;
             const linlog = document.getElementById('linlog').checked;
@@ -489,12 +565,12 @@
                 gravity,
                 false, // distributedAction
                 strongGravity,
-                currentGraph.masses, // nodeMass
+                null, // nodeMass
                 null, // nodeSize
                 null, // weight
                 dissuadeHubs,
                 linlog,
-                currentSeed
+                Date.now()
             );
             
             visualizeGraph(currentGraph, positions);
@@ -510,6 +586,24 @@
                 };
             });
             
+            // Auto-config checkbox handler
+            document.getElementById('auto-configure').onchange = function() {
+                const groups = ['scaling-group', 'gravity-group'];
+                groups.forEach(groupId => {
+                    const group = document.getElementById(groupId);
+                    group.style.opacity = this.checked ? '0.5' : '1';
+                });
+                
+                if (this.checked && currentConfig) {
+                    document.getElementById('iterations').value = currentConfig.iterations;
+                    document.getElementById('iterations-value').textContent = currentConfig.iterations;
+                    document.getElementById('scaling-ratio').value = currentConfig.scalingRatio;
+                    document.getElementById('scaling-ratio-value').textContent = currentConfig.scalingRatio.toFixed(1);
+                    document.getElementById('gravity').value = currentConfig.gravity;
+                    document.getElementById('gravity-value').textContent = currentConfig.gravity.toFixed(1);
+                }
+            };
+            
             // Remove auto-update on change for these controls
             document.getElementById('graph-type').onchange = null;
             

package/examples/multipartite-layout.html

@@ -114,12 +114,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,63 +140,75 @@
                 </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 '../dist/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;
-            }
-            
-            const edges = [];
+        function generateGraph(type, numLayers, nodesPerLayer) {
+            const totalNodes = numLayers * nodesPerLayer;
             
-            // Generate edges based on type
-            switch(edgeType) {
-                case 'adjacent':
-                    // Connect only adjacent layers
+            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}`);
+                        }
+                    }
+                    
+                    // Connect 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]);
+                        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 '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]);
+                            }
                         }
                     }
+                    
+                    return { nodes: () => nodes, edges: () => edges };
+            }
+        }
                     break;
                 
                 case 'hierarchical':
@@ -263,7 +274,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 +303,8 @@
                     rect.setAttribute('stroke-dasharray', '5,5');
                     svg.appendChild(rect);
                 }
-            });
+                });
+            }
             
             // Draw edges
             const edges = graph.edges();

package/examples/shell-layout.html

@@ -117,10 +117,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 +131,64 @@
     </div>
 
     <script type="module">
-        import { shellLayout } from '../dist/layout.js';
+        import { 
+            shellLayout, 
+            scaleFreeGraph,
+            randomGraph,
+            groupNodes,
+            findBestRoot
+        } from '../dist/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 +282,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/spring-layout.html

@@ -274,7 +274,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);