npm - @graphty/layout - Versions diffs - 1.0.0 - Mend

@graphty/layout 1.0.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 (20) hide show

package/.husky/commit-msg +1 -0
package/.husky/prepare-commit-msg +1 -0
package/README.md +59 -0
package/commitlint.config.js +37 -0
package/examples/arf-layout.html +512 -0
package/examples/bfs-layout.html +483 -0
package/examples/bipartite-layout.html +362 -0
package/examples/circular-layout.html +301 -0
package/examples/forceatlas2-layout.html +527 -0
package/examples/index.html +166 -0
package/examples/kamada-kawai-layout.html +413 -0
package/examples/multipartite-layout.html +407 -0
package/examples/planar-layout.html +376 -0
package/examples/random-layout.html +316 -0
package/examples/shell-layout.html +290 -0
package/examples/spectral-layout.html +323 -0
package/examples/spiral-layout.html +435 -0
package/examples/spring-layout.html +301 -0
package/layout.js +2377 -0
package/package.json +39 -0

package/examples/forceatlas2-layout.html ADDED Viewed

@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ForceAtlas2 Layout Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 250px 1fr 250px;
+            gap: 20px;
+        }
+        .graph-controls {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            height: fit-content;
+        }
+        .layout-controls {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            height: fit-content;
+        }
+        .visualization {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            padding: 20px;
+        }
+        .control-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+            color: #333;
+        }
+        input[type="range"], input[type="number"], select, input[type="checkbox"] {
+            width: 100%;
+            padding: 5px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        button {
+            background: #4CAF50;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            width: 100%;
+            margin: 5px 0;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        #graph-svg {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .back-link {
+            margin-bottom: 20px;
+        }
+        .back-link a {
+            color: #2c5aa0;
+            text-decoration: none;
+        }
+        .back-link a:hover {
+            text-decoration: underline;
+        }
+        .info-box {
+            background: #f0f7ff;
+            border: 1px solid #c0d7f0;
+            border-radius: 4px;
+            padding: 10px;
+            margin-top: 15px;
+            font-size: 0.85em;
+        }
+        .loading {
+            text-align: center;
+            color: #666;
+            font-style: italic;
+            margin-top: 10px;
+        }
+        .checkbox-control {
+            display: flex;
+            align-items: center;
+        }
+        .checkbox-control input {
+            width: auto;
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="back-link">
+        <a href="index.html">← Back to Index</a>
+    </div>
+    <h1>ForceAtlas2 Layout Test</h1>
+    <div class="container">
+        <div class="graph-controls">
+            <h3>Graph Settings</h3>
+            <div class="control-group">
+                <label for="num-nodes">Number of nodes:</label>
+                <input type="range" id="num-nodes" min="10" max="50" value="20">
+                <span id="num-nodes-value">20</span>
+            </div>
+            <div class="control-group">
+                <label for="graph-type">Graph type:</label>
+                <select id="graph-type">
+                    <option value="random">Random</option>
+                    <option value="scale-free">Scale-free</option>
+                    <option value="community">Community structure</option>
+                    <option value="grid">Grid</option>
+                </select>
+            </div>
+            <button onclick="newGraph()">New Graph</button>
+            <div class="info-box">
+                <strong>ForceAtlas2:</strong> An advanced force-directed layout algorithm designed for network visualization.
+                It helps reveal the structure of networks with community patterns.
+            </div>
+        </div>
+        <div class="visualization">
+            <svg id="graph-svg" width="800" height="600"></svg>
+        </div>
+        <div class="layout-controls">
+            <h3>Layout Parameters</h3>
+            <div class="control-group">
+                <label for="iterations">Iterations:</label>
+                <input type="range" id="iterations" min="10" max="3000" value="100">
+                <span id="iterations-value">100</span>
+            </div>
+            <div class="control-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">
+                <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>
+            </div>
+            <div class="control-group checkbox-control">
+                <input type="checkbox" id="strong-gravity">
+                <label for="strong-gravity">Strong Gravity</label>
+            </div>
+            <div class="control-group checkbox-control">
+                <input type="checkbox" id="dissuade-hubs">
+                <label for="dissuade-hubs">Dissuade Hubs</label>
+            </div>
+            <div class="control-group checkbox-control">
+                <input type="checkbox" id="linlog">
+                <label for="linlog">LinLog Mode</label>
+            </div>
+            <button onclick="applyLayout()">Apply Layout</button>
+            <div id="loading" class="loading" style="display: none;">Computing layout...</div>
+        </div>
+    </div>
+    <script type="module">
+        import { forceatlas2Layout } from './layout.js';
+        let currentGraph = null;
+        let currentSeed = Math.floor(Math.random() * 1000);
+        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
+                    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) {
+            const svg = document.getElementById('graph-svg');
+            const svgRect = svg.getBoundingClientRect();
+            const width = svgRect.width;
+            const height = svgRect.height;
+            svg.innerHTML = '';
+            const margin = 50;
+            const scaleX = (width - 2 * margin);
+            const scaleY = (height - 2 * margin);
+            const nodes = graph.nodes();
+            const posValues = nodes.map(n => positions[n]);
+            const minX = Math.min(...posValues.map(p => p[0]));
+            const maxX = Math.max(...posValues.map(p => p[0]));
+            const minY = Math.min(...posValues.map(p => p[1]));
+            const maxY = Math.max(...posValues.map(p => p[1]));
+            const rangeX = maxX - minX || 1;
+            const rangeY = maxY - minY || 1;
+            // Draw edges
+            const edges = graph.edges();
+            edges.forEach(([source, target]) => {
+                const sourcePos = positions[source];
+                const targetPos = positions[target];
+                const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
+                const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
+                const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
+                const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
+                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                line.setAttribute('x1', x1);
+                line.setAttribute('y1', y1);
+                line.setAttribute('x2', x2);
+                line.setAttribute('y2', y2);
+                line.setAttribute('stroke', '#999');
+                line.setAttribute('stroke-width', '1.5');
+                line.setAttribute('stroke-opacity', '0.6');
+                svg.appendChild(line);
+            });
+            // Draw nodes
+            nodes.forEach(node => {
+                const pos = positions[node];
+                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;
+                // Color based on position/edge distribution
+                const hue = (node * 360 / nodes.length) % 360;
+                const color = `hsl(${hue}, 70%, 50%)`;
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', x);
+                circle.setAttribute('cy', y);
+                circle.setAttribute('r', radius);
+                circle.setAttribute('fill', color);
+                circle.setAttribute('stroke', '#333');
+                circle.setAttribute('stroke-width', '1');
+                svg.appendChild(circle);
+                // Add node label for smaller graphs
+                if(nodes.length <= 30) {
+                    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                    text.setAttribute('x', x);
+                    text.setAttribute('y', y + 3);
+                    text.setAttribute('text-anchor', 'middle');
+                    text.setAttribute('font-size', '9');
+                    text.setAttribute('fill', 'white');
+                    text.textContent = node;
+                    svg.appendChild(text);
+                }
+            });
+        }
+        window.newGraph = function() {
+            const numNodes = parseInt(document.getElementById('num-nodes').value);
+            const graphType = document.getElementById('graph-type').value;
+            try {
+                // Generate new graph and re-seed
+                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
+                    ];
+                });
+                visualizeGraph(currentGraph, positions);
+            } catch (error) {
+                console.error('Error in graph generation:', error);
+            }
+        };
+        window.applyLayout = async function() {
+            if (!currentGraph) return;
+            const loadingDiv = document.getElementById('loading');
+            loadingDiv.style.display = 'block';
+            try {
+                // Run layout with same graph but new parameters
+                await runForceAtlas2();
+            } catch (error) {
+                console.error('Error in ForceAtlas2 layout:', error);
+            } finally {
+                loadingDiv.style.display = 'none';
+            }
+        };
+        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 strongGravity = document.getElementById('strong-gravity').checked;
+            const dissuadeHubs = document.getElementById('dissuade-hubs').checked;
+            const linlog = document.getElementById('linlog').checked;
+            // Run layout with a small delay to allow UI update
+            await new Promise(resolve => setTimeout(resolve, 10));
+            const positions = await forceatlas2Layout(
+                currentGraph,
+                null, // positions
+                iterations,
+                1.0, // jitterTolerance
+                scalingRatio,
+                gravity,
+                false, // distributedAction
+                strongGravity,
+                currentGraph.masses, // nodeMass
+                null, // nodeSize
+                null, // weight
+                dissuadeHubs,
+                linlog,
+                currentSeed
+            );
+            visualizeGraph(currentGraph, positions);
+        }
+        function setupControls() {
+            const sliders = ['num-nodes', 'iterations', 'scaling-ratio', 'gravity'];
+            sliders.forEach(id => {
+                const slider = document.getElementById(id);
+                const valueSpan = document.getElementById(id + '-value');
+                slider.oninput = function() {
+                    valueSpan.textContent = this.value;
+                };
+            });
+            // Remove auto-update on change for these controls
+            document.getElementById('graph-type').onchange = null;
+            // Checkbox controls don't auto-update either now
+            const checkboxes = ['strong-gravity', 'dissuade-hubs', 'linlog'];
+            checkboxes.forEach(id => {
+                document.getElementById(id).onchange = null;
+            });
+        }
+        setupControls();
+        newGraph();
+    </script>
+</body>
+</html>

package/examples/index.html ADDED Viewed

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NetworkX Layout Tests</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            color: #333;
+        }
+        .layout-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        .layout-card {
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .layout-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+        }
+        .layout-title {
+            color: #2c5aa0;
+            margin-bottom: 10px;
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+        .layout-description {
+            color: #666;
+            margin-bottom: 15px;
+            line-height: 1.4;
+        }
+        .test-button {
+            background: #4CAF50;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            transition: background-color 0.2s;
+        }
+        .test-button:hover {
+            background: #45a049;
+        }
+        .footer {
+            text-align: center;
+            margin-top: 40px;
+            color: #666;
+            font-size: 0.9em;
+        }
+        .visualization {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            padding: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>NetworkX Layout Algorithm Tests</h1>
+        <p>Interactive tests for graph layout algorithms in JavaScript</p>
+    </div>
+    <div class="layout-grid">
+        <div class="layout-card">
+            <div class="layout-title">Random Layout</div>
+            <div class="layout-description">Positions nodes randomly in a unit square</div>
+            <a href="random-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Circular Layout</div>
+            <div class="layout-description">Positions nodes on a circle</div>
+            <a href="circular-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Shell Layout</div>
+            <div class="layout-description">Positions nodes in concentric circles</div>
+            <a href="shell-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Spring Layout</div>
+            <div class="layout-description">Force-based layout with attractive and repulsive forces (Fruchterman-Reingold)</div>
+            <a href="spring-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Spectral Layout</div>
+            <div class="layout-description">Layout based on eigenvectors of the Laplacian matrix</div>
+            <a href="spectral-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Spiral Layout</div>
+            <div class="layout-description">Positions nodes along a spiral</div>
+            <a href="spiral-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Bipartite Layout</div>
+            <div class="layout-description">Layout for bipartite graphs with nodes on two lines</div>
+            <a href="bipartite-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Multipartite Layout</div>
+            <div class="layout-description">Layout for multipartite graphs with nodes on multiple levels</div>
+            <a href="multipartite-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">BFS Layout</div>
+            <div class="layout-description">Layout based on breadth-first search algorithm</div>
+            <a href="bfs-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Planar Layout</div>
+            <div class="layout-description">Layout without edge intersections (approximated)</div>
+            <a href="planar-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">Kamada-Kawai Layout</div>
+            <div class="layout-description">Layout based on minimizing distances between nodes</div>
+            <a href="kamada-kawai-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">ForceAtlas2 Layout</div>
+            <div class="layout-description">Advanced force-based layout algorithm</div>
+            <a href="forceatlas2-layout.html" class="test-button">Test Layout</a>
+        </div>
+        <div class="layout-card">
+            <div class="layout-title">ARF Layout</div>
+            <div class="layout-description">Layout with customizable attractive and repulsive forces</div>
+            <a href="arf-layout.html" class="test-button">Test Layout</a>
+        </div>
+    </div>
+    <div class="footer">
+        <p>Ported from NetworkX Python library - Interactive tests for JavaScript</p>
+    </div>
+</body>
+</html>