@graphty/layout 1.2.3 → 1.2.5
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.
- package/dist/src/algorithms/index.d.ts +5 -0
- package/dist/src/algorithms/index.js +6 -0
- package/dist/src/algorithms/index.js.map +1 -0
- package/dist/src/algorithms/optimization/index.d.ts +7 -0
- package/dist/src/algorithms/optimization/index.js +7 -0
- package/dist/src/algorithms/optimization/index.js.map +1 -0
- package/dist/src/algorithms/optimization/kamada-kawai-solver.d.ts +32 -0
- package/dist/src/algorithms/optimization/kamada-kawai-solver.js +176 -0
- package/dist/src/algorithms/optimization/kamada-kawai-solver.js.map +1 -0
- package/dist/src/algorithms/optimization/lbfgs.d.ts +13 -0
- package/dist/src/algorithms/optimization/lbfgs.js +56 -0
- package/dist/src/algorithms/optimization/lbfgs.js.map +1 -0
- package/dist/src/algorithms/optimization/line-search.d.ts +15 -0
- package/dist/src/algorithms/optimization/line-search.js +37 -0
- package/dist/src/algorithms/optimization/line-search.js.map +1 -0
- package/dist/src/algorithms/optimization/types.d.ts +5 -0
- package/dist/src/algorithms/optimization/types.js +5 -0
- package/dist/src/algorithms/optimization/types.js.map +1 -0
- package/dist/src/algorithms/planarity/check.d.ts +17 -0
- package/dist/src/algorithms/planarity/check.js +30 -0
- package/dist/src/algorithms/planarity/check.js.map +1 -0
- package/dist/src/algorithms/planarity/embedding.d.ts +29 -0
- package/dist/src/algorithms/planarity/embedding.js +179 -0
- package/dist/src/algorithms/planarity/embedding.js.map +1 -0
- package/dist/src/algorithms/planarity/index.d.ts +7 -0
- package/dist/src/algorithms/planarity/index.js +8 -0
- package/dist/src/algorithms/planarity/index.js.map +1 -0
- package/dist/src/algorithms/planarity/lr-test.d.ts +15 -0
- package/dist/src/algorithms/planarity/lr-test.js +54 -0
- package/dist/src/algorithms/planarity/lr-test.js.map +1 -0
- package/dist/src/algorithms/planarity/special-graphs.d.ts +28 -0
- package/dist/src/algorithms/planarity/special-graphs.js +108 -0
- package/dist/src/algorithms/planarity/special-graphs.js.map +1 -0
- package/dist/src/generators/basic.d.ts +28 -0
- package/dist/src/generators/basic.js +79 -0
- package/dist/src/generators/basic.js.map +1 -0
- package/dist/src/generators/bipartite.d.ts +16 -0
- package/dist/src/generators/bipartite.js +40 -0
- package/dist/src/generators/bipartite.js.map +1 -0
- package/dist/src/generators/grid.d.ts +11 -0
- package/dist/src/generators/grid.js +37 -0
- package/dist/src/generators/grid.js.map +1 -0
- package/dist/src/generators/index.d.ts +8 -0
- package/dist/src/generators/index.js +9 -0
- package/dist/src/generators/index.js.map +1 -0
- package/dist/src/generators/random.d.ts +12 -0
- package/dist/src/generators/random.js +34 -0
- package/dist/src/generators/random.js.map +1 -0
- package/dist/src/generators/scale-free.d.ts +12 -0
- package/dist/src/generators/scale-free.js +62 -0
- package/dist/src/generators/scale-free.js.map +1 -0
- package/dist/src/index.d.ts +10 -0
- package/dist/src/index.js +15 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/layouts/basic/index.d.ts +4 -0
- package/dist/src/layouts/basic/index.js +5 -0
- package/dist/src/layouts/basic/index.js.map +1 -0
- package/dist/src/layouts/basic/random.d.ts +14 -0
- package/dist/src/layouts/basic/random.js +27 -0
- package/dist/src/layouts/basic/random.js.map +1 -0
- package/dist/src/layouts/force-directed/arf.d.ts +13 -0
- package/dist/src/layouts/force-directed/arf.js +103 -0
- package/dist/src/layouts/force-directed/arf.js.map +1 -0
- package/dist/src/layouts/force-directed/forceatlas2.d.ts +22 -0
- package/dist/src/layouts/force-directed/forceatlas2.js +340 -0
- package/dist/src/layouts/force-directed/forceatlas2.js.map +1 -0
- package/dist/src/layouts/force-directed/fruchterman-reingold.d.ts +19 -0
- package/dist/src/layouts/force-directed/fruchterman-reingold.js +131 -0
- package/dist/src/layouts/force-directed/fruchterman-reingold.js.map +1 -0
- package/dist/src/layouts/force-directed/index.d.ts +8 -0
- package/dist/src/layouts/force-directed/index.js +9 -0
- package/dist/src/layouts/force-directed/index.js.map +1 -0
- package/dist/src/layouts/force-directed/kamada-kawai.d.ts +15 -0
- package/dist/src/layouts/force-directed/kamada-kawai.js +87 -0
- package/dist/src/layouts/force-directed/kamada-kawai.js.map +1 -0
- package/dist/src/layouts/force-directed/spring.d.ts +19 -0
- package/dist/src/layouts/force-directed/spring.js +23 -0
- package/dist/src/layouts/force-directed/spring.js.map +1 -0
- package/dist/src/layouts/geometric/circular.d.ts +14 -0
- package/dist/src/layouts/geometric/circular.js +67 -0
- package/dist/src/layouts/geometric/circular.js.map +1 -0
- package/dist/src/layouts/geometric/index.d.ts +6 -0
- package/dist/src/layouts/geometric/index.js +7 -0
- package/dist/src/layouts/geometric/index.js.map +1 -0
- package/dist/src/layouts/geometric/shell.d.ts +15 -0
- package/dist/src/layouts/geometric/shell.js +67 -0
- package/dist/src/layouts/geometric/shell.js.map +1 -0
- package/dist/src/layouts/geometric/spiral.d.ts +16 -0
- package/dist/src/layouts/geometric/spiral.js +73 -0
- package/dist/src/layouts/geometric/spiral.js.map +1 -0
- package/dist/src/layouts/hierarchical/bfs.d.ts +12 -0
- package/dist/src/layouts/hierarchical/bfs.js +62 -0
- package/dist/src/layouts/hierarchical/bfs.js.map +1 -0
- package/dist/src/layouts/hierarchical/bipartite.d.ts +16 -0
- package/dist/src/layouts/hierarchical/bipartite.js +72 -0
- package/dist/src/layouts/hierarchical/bipartite.js.map +1 -0
- package/dist/src/layouts/hierarchical/index.d.ts +6 -0
- package/dist/src/layouts/hierarchical/index.js +7 -0
- package/dist/src/layouts/hierarchical/index.js.map +1 -0
- package/dist/src/layouts/hierarchical/multipartite.d.ts +12 -0
- package/dist/src/layouts/hierarchical/multipartite.js +73 -0
- package/dist/src/layouts/hierarchical/multipartite.js.map +1 -0
- package/dist/src/layouts/index.d.ts +8 -0
- package/dist/src/layouts/index.js +9 -0
- package/dist/src/layouts/index.js.map +1 -0
- package/dist/src/layouts/specialized/index.d.ts +5 -0
- package/dist/src/layouts/specialized/index.js +6 -0
- package/dist/src/layouts/specialized/index.js.map +1 -0
- package/dist/src/layouts/specialized/planar.d.ts +14 -0
- package/dist/src/layouts/specialized/planar.js +47 -0
- package/dist/src/layouts/specialized/planar.js.map +1 -0
- package/dist/src/layouts/specialized/spectral.d.ts +14 -0
- package/dist/src/layouts/specialized/spectral.js +106 -0
- package/dist/src/layouts/specialized/spectral.js.map +1 -0
- package/dist/src/types/embedding.d.ts +9 -0
- package/dist/src/types/embedding.js +5 -0
- package/dist/src/types/embedding.js.map +1 -0
- package/dist/src/types/graph.d.ts +10 -0
- package/dist/src/types/graph.js +5 -0
- package/dist/src/types/graph.js.map +1 -0
- package/dist/src/types/index.d.ts +6 -0
- package/dist/src/types/index.js +7 -0
- package/dist/src/types/index.js.map +1 -0
- package/dist/src/types/layout.d.ts +6 -0
- package/dist/src/types/layout.js +5 -0
- package/dist/src/types/layout.js.map +1 -0
- package/dist/src/utils/graph.d.ts +34 -0
- package/dist/src/utils/graph.js +69 -0
- package/dist/src/utils/graph.js.map +1 -0
- package/dist/src/utils/index.d.ts +8 -0
- package/dist/src/utils/index.js +9 -0
- package/dist/src/utils/index.js.map +1 -0
- package/dist/src/utils/numpy.d.ts +17 -0
- package/dist/src/utils/numpy.js +101 -0
- package/dist/src/utils/numpy.js.map +1 -0
- package/dist/src/utils/params.d.ts +17 -0
- package/dist/src/utils/params.js +22 -0
- package/dist/src/utils/params.js.map +1 -0
- package/dist/src/utils/random.d.ts +14 -0
- package/dist/src/utils/random.js +42 -0
- package/dist/src/utils/random.js.map +1 -0
- package/dist/src/utils/rescale.d.ts +21 -0
- package/dist/src/utils/rescale.js +194 -0
- package/dist/src/utils/rescale.js.map +1 -0
- package/dist/vitest.config.js +1 -1
- package/dist/vitest.config.js.map +1 -1
- package/package.json +19 -4
- package/src/layouts/force-directed/forceatlas2.ts +23 -4
- package/src/utils/rescale.ts +90 -15
- package/.env.example +0 -11
- package/.github/workflows/ci.yml +0 -101
- package/.releaserc.json +0 -22
- package/CHANGELOG.md +0 -52
- package/CLAUDE.md +0 -104
- package/CONTRIBUTING.md +0 -1
- package/DEPLOYMENT.md +0 -59
- package/build-examples-script.js +0 -26
- package/commitlint.config.js +0 -37
- package/examples/3d-force-directed.html +0 -611
- package/examples/3d-kamada-kawai.html +0 -379
- package/examples/3d-layout-comparison.html +0 -448
- package/examples/3d-spherical-layout.html +0 -319
- package/examples/arf-layout.html +0 -524
- package/examples/bfs-layout.html +0 -487
- package/examples/bipartite-layout.html +0 -382
- package/examples/circular-layout.html +0 -292
- package/examples/forceatlas2-layout.html +0 -588
- package/examples/index.html +0 -241
- package/examples/kamada-kawai-layout.html +0 -425
- package/examples/layout-helpers.js +0 -23
- package/examples/layout.js +0 -2304
- package/examples/multipartite-layout.html +0 -410
- package/examples/planar-layout.html +0 -388
- package/examples/random-layout.html +0 -328
- package/examples/shell-layout.html +0 -323
- package/examples/spectral-layout.html +0 -335
- package/examples/spiral-layout.html +0 -447
- package/examples/spring-layout.html +0 -313
- package/test/arf-layout.test.ts +0 -443
- package/test/bfs-layout.test.ts +0 -427
- package/test/bipartite-layout.test.ts +0 -344
- package/test/circular-layout.test.ts +0 -442
- package/test/forceatlas2-layout.test.ts +0 -405
- package/test/fruchterman-reingold-layout.test.ts +0 -477
- package/test/graph-generators.test.ts +0 -450
- package/test/kamada-kawai-layout.test.ts +0 -623
- package/test/multipartite-layout.test.ts +0 -404
- package/test/planar-layout.test.ts +0 -266
- package/test/random-layout.test.ts +0 -254
- package/test/rescale-layout.test.ts +0 -373
- package/test/shell-layout.test.ts +0 -347
- package/test/spectral-layout.test.ts +0 -378
- package/test/spiral-layout.test.ts +0 -338
- package/test/spring-layout.test.ts +0 -241
- package/test/test-utils.ts +0 -34
- package/test/utils-graph.test.ts +0 -155
- package/test/utils-index.test.ts +0 -77
- package/test/utils-numpy.test.ts +0 -272
- package/test/utils-params.test.ts +0 -99
- package/test/utils-random.test.ts +0 -229
- package/tsconfig.json +0 -16
- package/vite.config.js +0 -36
- package/vitest.config.ts +0 -30
|
@@ -1,382 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<!-- Eruda Mobile Console -->
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
|
|
6
|
-
<script>
|
|
7
|
-
// Initialize Eruda console for mobile debugging
|
|
8
|
-
if (typeof eruda !== "undefined") {
|
|
9
|
-
eruda.init();
|
|
10
|
-
// Auto-show on mobile devices
|
|
11
|
-
if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
|
|
12
|
-
eruda.show();
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
</script>
|
|
16
|
-
<meta charset="UTF-8">
|
|
17
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
18
|
-
<title>Bipartite Layout Test</title>
|
|
19
|
-
<style>
|
|
20
|
-
body {
|
|
21
|
-
font-family: Arial, sans-serif;
|
|
22
|
-
margin: 0;
|
|
23
|
-
padding: 20px;
|
|
24
|
-
background-color: #f5f5f5;
|
|
25
|
-
}
|
|
26
|
-
.container {
|
|
27
|
-
max-width: 1400px;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
display: grid;
|
|
30
|
-
grid-template-columns: 250px 1fr 250px;
|
|
31
|
-
gap: 20px;
|
|
32
|
-
}
|
|
33
|
-
.graph-controls {
|
|
34
|
-
background: white;
|
|
35
|
-
padding: 20px;
|
|
36
|
-
border-radius: 8px;
|
|
37
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
38
|
-
height: fit-content;
|
|
39
|
-
}
|
|
40
|
-
.layout-controls {
|
|
41
|
-
background: white;
|
|
42
|
-
padding: 20px;
|
|
43
|
-
border-radius: 8px;
|
|
44
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
45
|
-
height: fit-content;
|
|
46
|
-
}
|
|
47
|
-
.visualization {
|
|
48
|
-
background: white;
|
|
49
|
-
border-radius: 8px;
|
|
50
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
51
|
-
padding: 20px;
|
|
52
|
-
}
|
|
53
|
-
.control-group {
|
|
54
|
-
margin-bottom: 15px;
|
|
55
|
-
}
|
|
56
|
-
label {
|
|
57
|
-
display: block;
|
|
58
|
-
margin-bottom: 5px;
|
|
59
|
-
font-weight: bold;
|
|
60
|
-
color: #333;
|
|
61
|
-
}
|
|
62
|
-
input[type="range"], input[type="number"], select {
|
|
63
|
-
width: 100%;
|
|
64
|
-
padding: 5px;
|
|
65
|
-
border: 1px solid #ddd;
|
|
66
|
-
border-radius: 4px;
|
|
67
|
-
}
|
|
68
|
-
button {
|
|
69
|
-
background: #4CAF50;
|
|
70
|
-
color: white;
|
|
71
|
-
border: none;
|
|
72
|
-
padding: 10px 15px;
|
|
73
|
-
border-radius: 4px;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
width: 100%;
|
|
76
|
-
margin: 5px 0;
|
|
77
|
-
}
|
|
78
|
-
button:hover {
|
|
79
|
-
background: #45a049;
|
|
80
|
-
}
|
|
81
|
-
#graph-svg {
|
|
82
|
-
border: 1px solid #ddd;
|
|
83
|
-
border-radius: 4px;
|
|
84
|
-
}
|
|
85
|
-
.back-link {
|
|
86
|
-
margin-bottom: 20px;
|
|
87
|
-
}
|
|
88
|
-
.back-link a {
|
|
89
|
-
color: #2c5aa0;
|
|
90
|
-
text-decoration: none;
|
|
91
|
-
}
|
|
92
|
-
.back-link a:hover {
|
|
93
|
-
text-decoration: underline;
|
|
94
|
-
}
|
|
95
|
-
.partition-info {
|
|
96
|
-
background: #f0f7ff;
|
|
97
|
-
border: 1px solid #c0d7f0;
|
|
98
|
-
border-radius: 4px;
|
|
99
|
-
padding: 10px;
|
|
100
|
-
margin-top: 15px;
|
|
101
|
-
font-size: 0.85em;
|
|
102
|
-
}
|
|
103
|
-
</style>
|
|
104
|
-
</head>
|
|
105
|
-
<body>
|
|
106
|
-
<div class="back-link">
|
|
107
|
-
<a href="index.html">← Back to Index</a>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<h1>Bipartite Layout Test</h1>
|
|
111
|
-
|
|
112
|
-
<div class="container">
|
|
113
|
-
<div class="graph-controls">
|
|
114
|
-
<h3>Graph Settings</h3>
|
|
115
|
-
|
|
116
|
-
<div class="control-group">
|
|
117
|
-
<label for="set-a-size">Set A size:</label>
|
|
118
|
-
<input type="range" id="set-a-size" min="2" max="15" value="5">
|
|
119
|
-
<span id="set-a-size-value">5</span>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<div class="control-group">
|
|
123
|
-
<label for="set-b-size">Set B size:</label>
|
|
124
|
-
<input type="range" id="set-b-size" min="2" max="15" value="7">
|
|
125
|
-
<span id="set-b-size-value">7</span>
|
|
126
|
-
</div>
|
|
127
|
-
|
|
128
|
-
<div class="control-group">
|
|
129
|
-
<label for="edge-density">Edge density:</label>
|
|
130
|
-
<input type="range" id="edge-density" min="0.1" max="1" step="0.1" value="0.3">
|
|
131
|
-
<span id="edge-density-value">0.3</span>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<button onclick="newGraph()">Generate Bipartite Graph</button>
|
|
135
|
-
<button onclick="generateMixedGraph()">Generate Random Graph</button>
|
|
136
|
-
<div id="partition-info" class="partition-info"></div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<div class="visualization">
|
|
140
|
-
<svg id="graph-svg" width="800" height="600"></svg>
|
|
141
|
-
</div>
|
|
142
|
-
|
|
143
|
-
<div class="layout-controls">
|
|
144
|
-
<h3>Layout Parameters</h3>
|
|
145
|
-
|
|
146
|
-
<div class="control-group">
|
|
147
|
-
<label for="alignment">Alignment:</label>
|
|
148
|
-
<select id="alignment">
|
|
149
|
-
<option value="vertical">Vertical</option>
|
|
150
|
-
<option value="horizontal">Horizontal</option>
|
|
151
|
-
</select>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<div class="control-group">
|
|
155
|
-
<label for="aspect-ratio">Aspect Ratio:</label>
|
|
156
|
-
<input type="range" id="aspect-ratio" min="0.5" max="3" step="0.1" value="1.33">
|
|
157
|
-
<span id="aspect-ratio-value">1.33</span>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<button onclick="applyLayout()">Apply Layout</button>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
|
|
164
|
-
<script type="module">
|
|
165
|
-
import {
|
|
166
|
-
bipartiteLayout,
|
|
167
|
-
bipartiteGraph,
|
|
168
|
-
randomGraph
|
|
169
|
-
} from "./layout.js";
|
|
170
|
-
import { detectBipartite } from "./layout-helpers.js";
|
|
171
|
-
|
|
172
|
-
let currentGraph = null;
|
|
173
|
-
let detectedBipartite = null;
|
|
174
|
-
|
|
175
|
-
function visualizeGraph(graph, positions) {
|
|
176
|
-
const svg = document.getElementById('graph-svg');
|
|
177
|
-
const svgRect = svg.getBoundingClientRect();
|
|
178
|
-
const width = svgRect.width;
|
|
179
|
-
const height = svgRect.height;
|
|
180
|
-
|
|
181
|
-
svg.innerHTML = '';
|
|
182
|
-
|
|
183
|
-
const margin = 50;
|
|
184
|
-
const scaleX = (width - 2 * margin);
|
|
185
|
-
const scaleY = (height - 2 * margin);
|
|
186
|
-
|
|
187
|
-
const nodes = graph.nodes();
|
|
188
|
-
const posValues = nodes.map(n => positions[n]);
|
|
189
|
-
const minX = Math.min(...posValues.map(p => p[0]));
|
|
190
|
-
const maxX = Math.max(...posValues.map(p => p[0]));
|
|
191
|
-
const minY = Math.min(...posValues.map(p => p[1]));
|
|
192
|
-
const maxY = Math.max(...posValues.map(p => p[1]));
|
|
193
|
-
|
|
194
|
-
const rangeX = maxX - minX || 1;
|
|
195
|
-
const rangeY = maxY - minY || 1;
|
|
196
|
-
|
|
197
|
-
// Draw edges
|
|
198
|
-
const edges = graph.edges();
|
|
199
|
-
edges.forEach(([source, target]) => {
|
|
200
|
-
const sourcePos = positions[source];
|
|
201
|
-
const targetPos = positions[target];
|
|
202
|
-
|
|
203
|
-
const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
|
|
204
|
-
const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
|
|
205
|
-
const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
|
|
206
|
-
const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
|
|
207
|
-
|
|
208
|
-
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
209
|
-
line.setAttribute('x1', x1);
|
|
210
|
-
line.setAttribute('y1', y1);
|
|
211
|
-
line.setAttribute('x2', x2);
|
|
212
|
-
line.setAttribute('y2', y2);
|
|
213
|
-
line.setAttribute('stroke', '#999');
|
|
214
|
-
line.setAttribute('stroke-width', '2');
|
|
215
|
-
svg.appendChild(line);
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
// Draw nodes with different colors for set A and B
|
|
219
|
-
nodes.forEach(node => {
|
|
220
|
-
const pos = positions[node];
|
|
221
|
-
const x = margin + (pos[0] - minX) / rangeX * scaleX;
|
|
222
|
-
const y = margin + (pos[1] - minY) / rangeY * scaleY;
|
|
223
|
-
|
|
224
|
-
// Determine color based on set (use detected sets if available)
|
|
225
|
-
const setA = detectedBipartite ? detectedBipartite.setA : graph.setA;
|
|
226
|
-
const isSetA = setA.includes(node);
|
|
227
|
-
const color = isSetA ? '#E91E63' : '#2196F3';
|
|
228
|
-
|
|
229
|
-
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
230
|
-
circle.setAttribute('cx', x);
|
|
231
|
-
circle.setAttribute('cy', y);
|
|
232
|
-
circle.setAttribute('r', '8');
|
|
233
|
-
circle.setAttribute('fill', color);
|
|
234
|
-
circle.setAttribute('stroke', '#333');
|
|
235
|
-
circle.setAttribute('stroke-width', '2');
|
|
236
|
-
svg.appendChild(circle);
|
|
237
|
-
|
|
238
|
-
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
239
|
-
text.setAttribute('x', x);
|
|
240
|
-
text.setAttribute('y', y + 4);
|
|
241
|
-
text.setAttribute('text-anchor', 'middle');
|
|
242
|
-
text.setAttribute('font-size', '10');
|
|
243
|
-
text.setAttribute('fill', 'white');
|
|
244
|
-
text.textContent = node;
|
|
245
|
-
svg.appendChild(text);
|
|
246
|
-
});
|
|
247
|
-
|
|
248
|
-
// Add legend
|
|
249
|
-
const legendGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
250
|
-
|
|
251
|
-
// Set A
|
|
252
|
-
const circleA = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
253
|
-
circleA.setAttribute('cx', width - 100);
|
|
254
|
-
circleA.setAttribute('cy', 30);
|
|
255
|
-
circleA.setAttribute('r', '6');
|
|
256
|
-
circleA.setAttribute('fill', '#E91E63');
|
|
257
|
-
circleA.setAttribute('stroke', '#333');
|
|
258
|
-
legendGroup.appendChild(circleA);
|
|
259
|
-
|
|
260
|
-
const textA = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
261
|
-
textA.setAttribute('x', width - 85);
|
|
262
|
-
textA.setAttribute('y', 35);
|
|
263
|
-
textA.setAttribute('font-size', '12');
|
|
264
|
-
textA.textContent = 'Set A';
|
|
265
|
-
legendGroup.appendChild(textA);
|
|
266
|
-
|
|
267
|
-
// Set B
|
|
268
|
-
const circleB = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
269
|
-
circleB.setAttribute('cx', width - 100);
|
|
270
|
-
circleB.setAttribute('cy', 50);
|
|
271
|
-
circleB.setAttribute('r', '6');
|
|
272
|
-
circleB.setAttribute('fill', '#2196F3');
|
|
273
|
-
circleB.setAttribute('stroke', '#333');
|
|
274
|
-
legendGroup.appendChild(circleB);
|
|
275
|
-
|
|
276
|
-
const textB = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
277
|
-
textB.setAttribute('x', width - 85);
|
|
278
|
-
textB.setAttribute('y', 55);
|
|
279
|
-
textB.setAttribute('font-size', '12');
|
|
280
|
-
textB.textContent = 'Set B';
|
|
281
|
-
legendGroup.appendChild(textB);
|
|
282
|
-
|
|
283
|
-
svg.appendChild(legendGroup);
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
window.newGraph = function() {
|
|
287
|
-
const setASize = parseInt(document.getElementById('set-a-size').value);
|
|
288
|
-
const setBSize = parseInt(document.getElementById('set-b-size').value);
|
|
289
|
-
const edgeDensity = parseFloat(document.getElementById('edge-density').value);
|
|
290
|
-
|
|
291
|
-
// Generate bipartite graph using our generator
|
|
292
|
-
currentGraph = bipartiteGraph(setASize, setBSize, edgeDensity, Date.now());
|
|
293
|
-
|
|
294
|
-
// Auto-detect bipartite structure
|
|
295
|
-
detectedBipartite = detectBipartite(currentGraph);
|
|
296
|
-
|
|
297
|
-
// Apply layout immediately
|
|
298
|
-
applyLayout();
|
|
299
|
-
|
|
300
|
-
// Update partition info
|
|
301
|
-
const infoDiv = document.getElementById('partition-info');
|
|
302
|
-
const totalNodes = setASize + setBSize;
|
|
303
|
-
infoDiv.innerHTML = `
|
|
304
|
-
<strong>Generated Bipartite Graph:</strong><br>
|
|
305
|
-
Set A: ${currentGraph.setA.length} nodes (${((setASize / totalNodes) * 100).toFixed(1)}%)<br>
|
|
306
|
-
Set B: ${currentGraph.setB.length} nodes (${((setBSize / totalNodes) * 100).toFixed(1)}%)<br>
|
|
307
|
-
Edges: ${currentGraph.edges().length}<br>
|
|
308
|
-
<strong>Auto-detected:</strong> ${detectedBipartite ? 'Yes ✓' : 'No ✗'}
|
|
309
|
-
`;
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
window.applyLayout = function() {
|
|
313
|
-
if (!currentGraph) return;
|
|
314
|
-
|
|
315
|
-
const alignment = document.getElementById('alignment').value;
|
|
316
|
-
const aspectRatio = parseFloat(document.getElementById('aspect-ratio').value);
|
|
317
|
-
|
|
318
|
-
// Use detected sets if available, otherwise use generated sets
|
|
319
|
-
const setA = detectedBipartite ? detectedBipartite.setA : currentGraph.setA;
|
|
320
|
-
const positions = bipartiteLayout(currentGraph, setA, alignment, 1, [0, 0], aspectRatio);
|
|
321
|
-
|
|
322
|
-
visualizeGraph(currentGraph, positions);
|
|
323
|
-
};
|
|
324
|
-
|
|
325
|
-
function setupControls() {
|
|
326
|
-
const controls = ['set-a-size', 'set-b-size', 'aspect-ratio', 'edge-density'];
|
|
327
|
-
controls.forEach(id => {
|
|
328
|
-
const slider = document.getElementById(id);
|
|
329
|
-
const valueSpan = document.getElementById(id + '-value');
|
|
330
|
-
slider.oninput = function() {
|
|
331
|
-
valueSpan.textContent = this.value;
|
|
332
|
-
};
|
|
333
|
-
});
|
|
334
|
-
|
|
335
|
-
document.getElementById('alignment').onchange = null;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
window.generateMixedGraph = async function() {
|
|
339
|
-
const totalNodes = parseInt(document.getElementById('set-a-size').value) +
|
|
340
|
-
parseInt(document.getElementById('set-b-size').value);
|
|
341
|
-
const edgeDensity = parseFloat(document.getElementById('edge-density').value);
|
|
342
|
-
|
|
343
|
-
// Generate random graph that might or might not be bipartite
|
|
344
|
-
currentGraph = randomGraph(totalNodes, edgeDensity * 0.3, Date.now());
|
|
345
|
-
|
|
346
|
-
// Try to detect bipartite structure
|
|
347
|
-
detectedBipartite = detectBipartite(currentGraph);
|
|
348
|
-
|
|
349
|
-
if (detectedBipartite) {
|
|
350
|
-
// If bipartite, use bipartite layout
|
|
351
|
-
applyLayout();
|
|
352
|
-
|
|
353
|
-
const infoDiv = document.getElementById('partition-info');
|
|
354
|
-
infoDiv.innerHTML = `
|
|
355
|
-
<strong>Random Graph (Bipartite Detected!):</strong><br>
|
|
356
|
-
Set A: ${detectedBipartite.setA.length} nodes<br>
|
|
357
|
-
Set B: ${detectedBipartite.setB.length} nodes<br>
|
|
358
|
-
Edges: ${currentGraph.edges().length}<br>
|
|
359
|
-
<strong>Auto-detected:</strong> Yes ✓
|
|
360
|
-
`;
|
|
361
|
-
} else {
|
|
362
|
-
// Not bipartite - show with spring layout instead
|
|
363
|
-
const { springLayout } = await import('./layout.js');
|
|
364
|
-
const positions = springLayout(currentGraph);
|
|
365
|
-
visualizeGraph(currentGraph, positions);
|
|
366
|
-
|
|
367
|
-
const infoDiv = document.getElementById('partition-info');
|
|
368
|
-
infoDiv.innerHTML = `
|
|
369
|
-
<strong>Random Graph (Not Bipartite):</strong><br>
|
|
370
|
-
Nodes: ${currentGraph.nodes().length}<br>
|
|
371
|
-
Edges: ${currentGraph.edges().length}<br>
|
|
372
|
-
<strong>Auto-detected:</strong> No ✗<br>
|
|
373
|
-
<em>Using spring layout instead</em>
|
|
374
|
-
`;
|
|
375
|
-
}
|
|
376
|
-
};
|
|
377
|
-
|
|
378
|
-
setupControls();
|
|
379
|
-
newGraph();
|
|
380
|
-
</script>
|
|
381
|
-
</body>
|
|
382
|
-
</html>
|
|
@@ -1,292 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<!-- Eruda Mobile Console -->
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
|
|
6
|
-
<script>
|
|
7
|
-
// Initialize Eruda console for mobile debugging
|
|
8
|
-
if (typeof eruda !== "undefined") {
|
|
9
|
-
eruda.init();
|
|
10
|
-
// Auto-show on mobile devices
|
|
11
|
-
if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
|
|
12
|
-
eruda.show();
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
</script>
|
|
16
|
-
<meta charset="UTF-8">
|
|
17
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
18
|
-
<title>Circular Layout Test</title>
|
|
19
|
-
<style>
|
|
20
|
-
body {
|
|
21
|
-
font-family: Arial, sans-serif;
|
|
22
|
-
margin: 0;
|
|
23
|
-
padding: 20px;
|
|
24
|
-
background-color: #f5f5f5;
|
|
25
|
-
}
|
|
26
|
-
.container {
|
|
27
|
-
max-width: 1400px;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
display: grid;
|
|
30
|
-
grid-template-columns: 250px 1fr 250px;
|
|
31
|
-
gap: 20px;
|
|
32
|
-
}
|
|
33
|
-
.graph-controls {
|
|
34
|
-
background: white;
|
|
35
|
-
padding: 20px;
|
|
36
|
-
border-radius: 8px;
|
|
37
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
38
|
-
height: fit-content;
|
|
39
|
-
}
|
|
40
|
-
.layout-controls {
|
|
41
|
-
background: white;
|
|
42
|
-
padding: 20px;
|
|
43
|
-
border-radius: 8px;
|
|
44
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
45
|
-
height: fit-content;
|
|
46
|
-
}
|
|
47
|
-
.visualization {
|
|
48
|
-
background: white;
|
|
49
|
-
border-radius: 8px;
|
|
50
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
51
|
-
padding: 20px;
|
|
52
|
-
}
|
|
53
|
-
.control-group {
|
|
54
|
-
margin-bottom: 15px;
|
|
55
|
-
}
|
|
56
|
-
label {
|
|
57
|
-
display: block;
|
|
58
|
-
margin-bottom: 5px;
|
|
59
|
-
font-weight: bold;
|
|
60
|
-
color: #333;
|
|
61
|
-
}
|
|
62
|
-
input[type="range"], input[type="number"], select {
|
|
63
|
-
width: 100%;
|
|
64
|
-
padding: 5px;
|
|
65
|
-
border: 1px solid #ddd;
|
|
66
|
-
border-radius: 4px;
|
|
67
|
-
}
|
|
68
|
-
button {
|
|
69
|
-
background: #4CAF50;
|
|
70
|
-
color: white;
|
|
71
|
-
border: none;
|
|
72
|
-
padding: 10px 15px;
|
|
73
|
-
border-radius: 4px;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
width: 100%;
|
|
76
|
-
margin: 5px 0;
|
|
77
|
-
}
|
|
78
|
-
button:hover {
|
|
79
|
-
background: #45a049;
|
|
80
|
-
}
|
|
81
|
-
#graph-svg {
|
|
82
|
-
border: 1px solid #ddd;
|
|
83
|
-
border-radius: 4px;
|
|
84
|
-
}
|
|
85
|
-
.back-link {
|
|
86
|
-
margin-bottom: 20px;
|
|
87
|
-
}
|
|
88
|
-
.back-link a {
|
|
89
|
-
color: #2c5aa0;
|
|
90
|
-
text-decoration: none;
|
|
91
|
-
}
|
|
92
|
-
.back-link a:hover {
|
|
93
|
-
text-decoration: underline;
|
|
94
|
-
}
|
|
95
|
-
</style>
|
|
96
|
-
</head>
|
|
97
|
-
<body>
|
|
98
|
-
<div class="back-link">
|
|
99
|
-
<a href="index.html">← Back to Index</a>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<h1>Circular Layout Test</h1>
|
|
103
|
-
|
|
104
|
-
<div class="container">
|
|
105
|
-
<div class="graph-controls">
|
|
106
|
-
<h3>Graph Settings</h3>
|
|
107
|
-
|
|
108
|
-
<div class="control-group">
|
|
109
|
-
<label for="num-nodes">Number of nodes:</label>
|
|
110
|
-
<input type="range" id="num-nodes" min="3" max="30" value="12">
|
|
111
|
-
<span id="num-nodes-value">12</span>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<div class="control-group">
|
|
115
|
-
<label for="graph-type">Graph type:</label>
|
|
116
|
-
<select id="graph-type">
|
|
117
|
-
<option value="cycle">Cycle</option>
|
|
118
|
-
<option value="random">Random</option>
|
|
119
|
-
<option value="complete">Complete</option>
|
|
120
|
-
<option value="wheel">Wheel</option>
|
|
121
|
-
</select>
|
|
122
|
-
</div>
|
|
123
|
-
|
|
124
|
-
<button onclick="newGraph()">New Graph</button>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<div class="visualization">
|
|
128
|
-
<svg id="graph-svg" width="800" height="600"></svg>
|
|
129
|
-
</div>
|
|
130
|
-
|
|
131
|
-
<div class="layout-controls">
|
|
132
|
-
<h3>Layout Parameters</h3>
|
|
133
|
-
|
|
134
|
-
<div class="control-group">
|
|
135
|
-
<label for="center-x">Center X:</label>
|
|
136
|
-
<input type="range" id="center-x" min="-1" max="1" step="0.1" value="0">
|
|
137
|
-
<span id="center-x-value">0.0</span>
|
|
138
|
-
</div>
|
|
139
|
-
|
|
140
|
-
<div class="control-group">
|
|
141
|
-
<label for="center-y">Center Y:</label>
|
|
142
|
-
<input type="range" id="center-y" min="-1" max="1" step="0.1" value="0">
|
|
143
|
-
<span id="center-y-value">0.0</span>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<button onclick="applyLayout()">Apply Layout</button>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
<script type="module">
|
|
151
|
-
import {
|
|
152
|
-
circularLayout,
|
|
153
|
-
completeGraph,
|
|
154
|
-
cycleGraph,
|
|
155
|
-
wheelGraph,
|
|
156
|
-
randomGraph
|
|
157
|
-
} from "./layout.js";
|
|
158
|
-
|
|
159
|
-
let currentGraph = null;
|
|
160
|
-
|
|
161
|
-
function generateGraph(type, numNodes) {
|
|
162
|
-
switch(type) {
|
|
163
|
-
case 'complete':
|
|
164
|
-
return completeGraph(numNodes);
|
|
165
|
-
case 'cycle':
|
|
166
|
-
return cycleGraph(numNodes);
|
|
167
|
-
case 'wheel':
|
|
168
|
-
return wheelGraph(numNodes);
|
|
169
|
-
case 'random':
|
|
170
|
-
default:
|
|
171
|
-
// Random graph with ~1.2 edges per node
|
|
172
|
-
const edgeProbability = Math.min(2.4 / (numNodes - 1), 1);
|
|
173
|
-
return randomGraph(numNodes, edgeProbability, Date.now());
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
function visualizeGraph(graph, positions) {
|
|
178
|
-
const svg = document.getElementById('graph-svg');
|
|
179
|
-
const svgRect = svg.getBoundingClientRect();
|
|
180
|
-
const width = svgRect.width;
|
|
181
|
-
const height = svgRect.height;
|
|
182
|
-
|
|
183
|
-
svg.innerHTML = '';
|
|
184
|
-
|
|
185
|
-
const margin = 50;
|
|
186
|
-
const scaleX = (width - 2 * margin);
|
|
187
|
-
const scaleY = (height - 2 * margin);
|
|
188
|
-
|
|
189
|
-
const nodes = graph.nodes();
|
|
190
|
-
const posValues = nodes.map(n => positions[n]);
|
|
191
|
-
const minX = Math.min(...posValues.map(p => p[0]));
|
|
192
|
-
const maxX = Math.max(...posValues.map(p => p[0]));
|
|
193
|
-
const minY = Math.min(...posValues.map(p => p[1]));
|
|
194
|
-
const maxY = Math.max(...posValues.map(p => p[1]));
|
|
195
|
-
|
|
196
|
-
const rangeX = maxX - minX || 1;
|
|
197
|
-
const rangeY = maxY - minY || 1;
|
|
198
|
-
|
|
199
|
-
// Draw edges
|
|
200
|
-
const edges = graph.edges();
|
|
201
|
-
edges.forEach(([source, target]) => {
|
|
202
|
-
const sourcePos = positions[source];
|
|
203
|
-
const targetPos = positions[target];
|
|
204
|
-
|
|
205
|
-
const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
|
|
206
|
-
const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
|
|
207
|
-
const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
|
|
208
|
-
const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
|
|
209
|
-
|
|
210
|
-
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
211
|
-
line.setAttribute('x1', x1);
|
|
212
|
-
line.setAttribute('y1', y1);
|
|
213
|
-
line.setAttribute('x2', x2);
|
|
214
|
-
line.setAttribute('y2', y2);
|
|
215
|
-
line.setAttribute('stroke', '#999');
|
|
216
|
-
line.setAttribute('stroke-width', '2');
|
|
217
|
-
svg.appendChild(line);
|
|
218
|
-
});
|
|
219
|
-
|
|
220
|
-
// Draw nodes
|
|
221
|
-
nodes.forEach(node => {
|
|
222
|
-
const pos = positions[node];
|
|
223
|
-
const x = margin + (pos[0] - minX) / rangeX * scaleX;
|
|
224
|
-
const y = margin + (pos[1] - minY) / rangeY * scaleY;
|
|
225
|
-
|
|
226
|
-
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
227
|
-
circle.setAttribute('cx', x);
|
|
228
|
-
circle.setAttribute('cy', y);
|
|
229
|
-
circle.setAttribute('r', '8');
|
|
230
|
-
circle.setAttribute('fill', '#2196F3');
|
|
231
|
-
circle.setAttribute('stroke', '#333');
|
|
232
|
-
circle.setAttribute('stroke-width', '2');
|
|
233
|
-
svg.appendChild(circle);
|
|
234
|
-
|
|
235
|
-
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
236
|
-
text.setAttribute('x', x);
|
|
237
|
-
text.setAttribute('y', y + 4);
|
|
238
|
-
text.setAttribute('text-anchor', 'middle');
|
|
239
|
-
text.setAttribute('font-size', '12');
|
|
240
|
-
text.setAttribute('fill', 'white');
|
|
241
|
-
text.textContent = node;
|
|
242
|
-
svg.appendChild(text);
|
|
243
|
-
});
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
window.newGraph = function() {
|
|
247
|
-
const numNodes = parseInt(document.getElementById('num-nodes').value);
|
|
248
|
-
const graphType = document.getElementById('graph-type').value;
|
|
249
|
-
|
|
250
|
-
currentGraph = generateGraph(graphType, numNodes);
|
|
251
|
-
|
|
252
|
-
// Just visualize with random positions initially
|
|
253
|
-
const positions = {};
|
|
254
|
-
currentGraph.nodes().forEach(node => {
|
|
255
|
-
positions[node] = [
|
|
256
|
-
(Math.random() - 0.5) * 1.5,
|
|
257
|
-
(Math.random() - 0.5) * 1.5
|
|
258
|
-
];
|
|
259
|
-
});
|
|
260
|
-
|
|
261
|
-
visualizeGraph(currentGraph, positions);
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
window.applyLayout = function() {
|
|
265
|
-
if(!currentGraph) return;
|
|
266
|
-
|
|
267
|
-
const centerX = parseFloat(document.getElementById('center-x').value);
|
|
268
|
-
const centerY = parseFloat(document.getElementById('center-y').value);
|
|
269
|
-
|
|
270
|
-
const positions = circularLayout(currentGraph, 1, [centerX, centerY], 2);
|
|
271
|
-
|
|
272
|
-
visualizeGraph(currentGraph, positions);
|
|
273
|
-
};
|
|
274
|
-
|
|
275
|
-
function setupControls() {
|
|
276
|
-
const controls = ['num-nodes', 'center-x', 'center-y'];
|
|
277
|
-
controls.forEach(id => {
|
|
278
|
-
const slider = document.getElementById(id);
|
|
279
|
-
const valueSpan = document.getElementById(id + '-value');
|
|
280
|
-
slider.oninput = function() {
|
|
281
|
-
valueSpan.textContent = this.value;
|
|
282
|
-
};
|
|
283
|
-
});
|
|
284
|
-
|
|
285
|
-
document.getElementById('graph-type').onchange = null;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
setupControls();
|
|
289
|
-
newGraph();
|
|
290
|
-
</script>
|
|
291
|
-
</body>
|
|
292
|
-
</html>
|