@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.
Files changed (203) hide show
  1. package/dist/src/algorithms/index.d.ts +5 -0
  2. package/dist/src/algorithms/index.js +6 -0
  3. package/dist/src/algorithms/index.js.map +1 -0
  4. package/dist/src/algorithms/optimization/index.d.ts +7 -0
  5. package/dist/src/algorithms/optimization/index.js +7 -0
  6. package/dist/src/algorithms/optimization/index.js.map +1 -0
  7. package/dist/src/algorithms/optimization/kamada-kawai-solver.d.ts +32 -0
  8. package/dist/src/algorithms/optimization/kamada-kawai-solver.js +176 -0
  9. package/dist/src/algorithms/optimization/kamada-kawai-solver.js.map +1 -0
  10. package/dist/src/algorithms/optimization/lbfgs.d.ts +13 -0
  11. package/dist/src/algorithms/optimization/lbfgs.js +56 -0
  12. package/dist/src/algorithms/optimization/lbfgs.js.map +1 -0
  13. package/dist/src/algorithms/optimization/line-search.d.ts +15 -0
  14. package/dist/src/algorithms/optimization/line-search.js +37 -0
  15. package/dist/src/algorithms/optimization/line-search.js.map +1 -0
  16. package/dist/src/algorithms/optimization/types.d.ts +5 -0
  17. package/dist/src/algorithms/optimization/types.js +5 -0
  18. package/dist/src/algorithms/optimization/types.js.map +1 -0
  19. package/dist/src/algorithms/planarity/check.d.ts +17 -0
  20. package/dist/src/algorithms/planarity/check.js +30 -0
  21. package/dist/src/algorithms/planarity/check.js.map +1 -0
  22. package/dist/src/algorithms/planarity/embedding.d.ts +29 -0
  23. package/dist/src/algorithms/planarity/embedding.js +179 -0
  24. package/dist/src/algorithms/planarity/embedding.js.map +1 -0
  25. package/dist/src/algorithms/planarity/index.d.ts +7 -0
  26. package/dist/src/algorithms/planarity/index.js +8 -0
  27. package/dist/src/algorithms/planarity/index.js.map +1 -0
  28. package/dist/src/algorithms/planarity/lr-test.d.ts +15 -0
  29. package/dist/src/algorithms/planarity/lr-test.js +54 -0
  30. package/dist/src/algorithms/planarity/lr-test.js.map +1 -0
  31. package/dist/src/algorithms/planarity/special-graphs.d.ts +28 -0
  32. package/dist/src/algorithms/planarity/special-graphs.js +108 -0
  33. package/dist/src/algorithms/planarity/special-graphs.js.map +1 -0
  34. package/dist/src/generators/basic.d.ts +28 -0
  35. package/dist/src/generators/basic.js +79 -0
  36. package/dist/src/generators/basic.js.map +1 -0
  37. package/dist/src/generators/bipartite.d.ts +16 -0
  38. package/dist/src/generators/bipartite.js +40 -0
  39. package/dist/src/generators/bipartite.js.map +1 -0
  40. package/dist/src/generators/grid.d.ts +11 -0
  41. package/dist/src/generators/grid.js +37 -0
  42. package/dist/src/generators/grid.js.map +1 -0
  43. package/dist/src/generators/index.d.ts +8 -0
  44. package/dist/src/generators/index.js +9 -0
  45. package/dist/src/generators/index.js.map +1 -0
  46. package/dist/src/generators/random.d.ts +12 -0
  47. package/dist/src/generators/random.js +34 -0
  48. package/dist/src/generators/random.js.map +1 -0
  49. package/dist/src/generators/scale-free.d.ts +12 -0
  50. package/dist/src/generators/scale-free.js +62 -0
  51. package/dist/src/generators/scale-free.js.map +1 -0
  52. package/dist/src/index.d.ts +10 -0
  53. package/dist/src/index.js +15 -0
  54. package/dist/src/index.js.map +1 -0
  55. package/dist/src/layouts/basic/index.d.ts +4 -0
  56. package/dist/src/layouts/basic/index.js +5 -0
  57. package/dist/src/layouts/basic/index.js.map +1 -0
  58. package/dist/src/layouts/basic/random.d.ts +14 -0
  59. package/dist/src/layouts/basic/random.js +27 -0
  60. package/dist/src/layouts/basic/random.js.map +1 -0
  61. package/dist/src/layouts/force-directed/arf.d.ts +13 -0
  62. package/dist/src/layouts/force-directed/arf.js +103 -0
  63. package/dist/src/layouts/force-directed/arf.js.map +1 -0
  64. package/dist/src/layouts/force-directed/forceatlas2.d.ts +22 -0
  65. package/dist/src/layouts/force-directed/forceatlas2.js +340 -0
  66. package/dist/src/layouts/force-directed/forceatlas2.js.map +1 -0
  67. package/dist/src/layouts/force-directed/fruchterman-reingold.d.ts +19 -0
  68. package/dist/src/layouts/force-directed/fruchterman-reingold.js +131 -0
  69. package/dist/src/layouts/force-directed/fruchterman-reingold.js.map +1 -0
  70. package/dist/src/layouts/force-directed/index.d.ts +8 -0
  71. package/dist/src/layouts/force-directed/index.js +9 -0
  72. package/dist/src/layouts/force-directed/index.js.map +1 -0
  73. package/dist/src/layouts/force-directed/kamada-kawai.d.ts +15 -0
  74. package/dist/src/layouts/force-directed/kamada-kawai.js +87 -0
  75. package/dist/src/layouts/force-directed/kamada-kawai.js.map +1 -0
  76. package/dist/src/layouts/force-directed/spring.d.ts +19 -0
  77. package/dist/src/layouts/force-directed/spring.js +23 -0
  78. package/dist/src/layouts/force-directed/spring.js.map +1 -0
  79. package/dist/src/layouts/geometric/circular.d.ts +14 -0
  80. package/dist/src/layouts/geometric/circular.js +67 -0
  81. package/dist/src/layouts/geometric/circular.js.map +1 -0
  82. package/dist/src/layouts/geometric/index.d.ts +6 -0
  83. package/dist/src/layouts/geometric/index.js +7 -0
  84. package/dist/src/layouts/geometric/index.js.map +1 -0
  85. package/dist/src/layouts/geometric/shell.d.ts +15 -0
  86. package/dist/src/layouts/geometric/shell.js +67 -0
  87. package/dist/src/layouts/geometric/shell.js.map +1 -0
  88. package/dist/src/layouts/geometric/spiral.d.ts +16 -0
  89. package/dist/src/layouts/geometric/spiral.js +73 -0
  90. package/dist/src/layouts/geometric/spiral.js.map +1 -0
  91. package/dist/src/layouts/hierarchical/bfs.d.ts +12 -0
  92. package/dist/src/layouts/hierarchical/bfs.js +62 -0
  93. package/dist/src/layouts/hierarchical/bfs.js.map +1 -0
  94. package/dist/src/layouts/hierarchical/bipartite.d.ts +16 -0
  95. package/dist/src/layouts/hierarchical/bipartite.js +72 -0
  96. package/dist/src/layouts/hierarchical/bipartite.js.map +1 -0
  97. package/dist/src/layouts/hierarchical/index.d.ts +6 -0
  98. package/dist/src/layouts/hierarchical/index.js +7 -0
  99. package/dist/src/layouts/hierarchical/index.js.map +1 -0
  100. package/dist/src/layouts/hierarchical/multipartite.d.ts +12 -0
  101. package/dist/src/layouts/hierarchical/multipartite.js +73 -0
  102. package/dist/src/layouts/hierarchical/multipartite.js.map +1 -0
  103. package/dist/src/layouts/index.d.ts +8 -0
  104. package/dist/src/layouts/index.js +9 -0
  105. package/dist/src/layouts/index.js.map +1 -0
  106. package/dist/src/layouts/specialized/index.d.ts +5 -0
  107. package/dist/src/layouts/specialized/index.js +6 -0
  108. package/dist/src/layouts/specialized/index.js.map +1 -0
  109. package/dist/src/layouts/specialized/planar.d.ts +14 -0
  110. package/dist/src/layouts/specialized/planar.js +47 -0
  111. package/dist/src/layouts/specialized/planar.js.map +1 -0
  112. package/dist/src/layouts/specialized/spectral.d.ts +14 -0
  113. package/dist/src/layouts/specialized/spectral.js +106 -0
  114. package/dist/src/layouts/specialized/spectral.js.map +1 -0
  115. package/dist/src/types/embedding.d.ts +9 -0
  116. package/dist/src/types/embedding.js +5 -0
  117. package/dist/src/types/embedding.js.map +1 -0
  118. package/dist/src/types/graph.d.ts +10 -0
  119. package/dist/src/types/graph.js +5 -0
  120. package/dist/src/types/graph.js.map +1 -0
  121. package/dist/src/types/index.d.ts +6 -0
  122. package/dist/src/types/index.js +7 -0
  123. package/dist/src/types/index.js.map +1 -0
  124. package/dist/src/types/layout.d.ts +6 -0
  125. package/dist/src/types/layout.js +5 -0
  126. package/dist/src/types/layout.js.map +1 -0
  127. package/dist/src/utils/graph.d.ts +34 -0
  128. package/dist/src/utils/graph.js +69 -0
  129. package/dist/src/utils/graph.js.map +1 -0
  130. package/dist/src/utils/index.d.ts +8 -0
  131. package/dist/src/utils/index.js +9 -0
  132. package/dist/src/utils/index.js.map +1 -0
  133. package/dist/src/utils/numpy.d.ts +17 -0
  134. package/dist/src/utils/numpy.js +101 -0
  135. package/dist/src/utils/numpy.js.map +1 -0
  136. package/dist/src/utils/params.d.ts +17 -0
  137. package/dist/src/utils/params.js +22 -0
  138. package/dist/src/utils/params.js.map +1 -0
  139. package/dist/src/utils/random.d.ts +14 -0
  140. package/dist/src/utils/random.js +42 -0
  141. package/dist/src/utils/random.js.map +1 -0
  142. package/dist/src/utils/rescale.d.ts +21 -0
  143. package/dist/src/utils/rescale.js +194 -0
  144. package/dist/src/utils/rescale.js.map +1 -0
  145. package/dist/vitest.config.js +1 -1
  146. package/dist/vitest.config.js.map +1 -1
  147. package/package.json +19 -4
  148. package/src/layouts/force-directed/forceatlas2.ts +23 -4
  149. package/src/utils/rescale.ts +90 -15
  150. package/.env.example +0 -11
  151. package/.github/workflows/ci.yml +0 -101
  152. package/.releaserc.json +0 -22
  153. package/CHANGELOG.md +0 -52
  154. package/CLAUDE.md +0 -104
  155. package/CONTRIBUTING.md +0 -1
  156. package/DEPLOYMENT.md +0 -59
  157. package/build-examples-script.js +0 -26
  158. package/commitlint.config.js +0 -37
  159. package/examples/3d-force-directed.html +0 -611
  160. package/examples/3d-kamada-kawai.html +0 -379
  161. package/examples/3d-layout-comparison.html +0 -448
  162. package/examples/3d-spherical-layout.html +0 -319
  163. package/examples/arf-layout.html +0 -524
  164. package/examples/bfs-layout.html +0 -487
  165. package/examples/bipartite-layout.html +0 -382
  166. package/examples/circular-layout.html +0 -292
  167. package/examples/forceatlas2-layout.html +0 -588
  168. package/examples/index.html +0 -241
  169. package/examples/kamada-kawai-layout.html +0 -425
  170. package/examples/layout-helpers.js +0 -23
  171. package/examples/layout.js +0 -2304
  172. package/examples/multipartite-layout.html +0 -410
  173. package/examples/planar-layout.html +0 -388
  174. package/examples/random-layout.html +0 -328
  175. package/examples/shell-layout.html +0 -323
  176. package/examples/spectral-layout.html +0 -335
  177. package/examples/spiral-layout.html +0 -447
  178. package/examples/spring-layout.html +0 -313
  179. package/test/arf-layout.test.ts +0 -443
  180. package/test/bfs-layout.test.ts +0 -427
  181. package/test/bipartite-layout.test.ts +0 -344
  182. package/test/circular-layout.test.ts +0 -442
  183. package/test/forceatlas2-layout.test.ts +0 -405
  184. package/test/fruchterman-reingold-layout.test.ts +0 -477
  185. package/test/graph-generators.test.ts +0 -450
  186. package/test/kamada-kawai-layout.test.ts +0 -623
  187. package/test/multipartite-layout.test.ts +0 -404
  188. package/test/planar-layout.test.ts +0 -266
  189. package/test/random-layout.test.ts +0 -254
  190. package/test/rescale-layout.test.ts +0 -373
  191. package/test/shell-layout.test.ts +0 -347
  192. package/test/spectral-layout.test.ts +0 -378
  193. package/test/spiral-layout.test.ts +0 -338
  194. package/test/spring-layout.test.ts +0 -241
  195. package/test/test-utils.ts +0 -34
  196. package/test/utils-graph.test.ts +0 -155
  197. package/test/utils-index.test.ts +0 -77
  198. package/test/utils-numpy.test.ts +0 -272
  199. package/test/utils-params.test.ts +0 -99
  200. package/test/utils-random.test.ts +0 -229
  201. package/tsconfig.json +0 -16
  202. package/vite.config.js +0 -36
  203. package/vitest.config.ts +0 -30
package/examples/multipartite-layout.html DELETED
@@ -1,410 +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>Multipartite 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
- .layers-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>Multipartite 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="num-layers">Number of layers:</label>
118
- <input type="range" id="num-layers" min="2" max="5" value="3">
119
- <span id="num-layers-value">3</span>
120
- </div>
121
-
122
- <div class="control-group">
123
- <label for="nodes-per-layer">Nodes per layer:</label>
124
- <input type="range" id="nodes-per-layer" min="2" max="8" value="4">
125
- <span id="nodes-per-layer-value">4</span>
126
- </div>
127
-
128
- <div class="control-group">
129
- <label for="graph-type">Graph type:</label>
130
- <select id="graph-type">
131
- <option value="scale-free">Scale-Free (automatic layers)</option>
132
- <option value="tree">Tree-like</option>
133
- <option value="custom-layers">Custom Layers</option>
134
- </select>
135
- </div>
136
-
137
- <button onclick="newGraph()">New Graph</button>
138
- </div>
139
-
140
- <div class="visualization">
141
- <svg id="graph-svg" width="800" height="600"></svg>
142
- </div>
143
-
144
- <div class="layout-controls">
145
- <h3>Layout Parameters</h3>
146
-
147
- <div class="control-group">
148
- <label for="alignment">Alignment:</label>
149
- <select id="alignment">
150
- <option value="vertical">Vertical</option>
151
- <option value="horizontal">Horizontal</option>
152
- </select>
153
- </div>
154
-
155
- <div class="control-group">
156
- <label for="layer-method">Layer assignment:</label>
157
- <select id="layer-method">
158
- <option value="bfs">BFS (distance-based)</option>
159
- <option value="degree">Degree-based</option>
160
- <option value="community">Community-based</option>
161
- </select>
162
- </div>
163
-
164
- <button onclick="applyLayout()">Apply Layout</button>
165
- <div id="layers-info" class="layers-info"></div>
166
- </div>
167
- </div>
168
-
169
- <script type="module">
170
- import {
171
- multipartiteLayout,
172
- scaleFreeGraph,
173
- starGraph,
174
- randomGraph
175
- } from "./layout.js";
176
-
177
- import {
178
- groupNodes,
179
- findBestRoot
180
- } from "./layout-helpers.js";
181
-
182
- let currentGraph = null;
183
- let currentLayers = null;
184
-
185
- function generateGraph(type, numLayers, nodesPerLayer) {
186
- const totalNodes = numLayers * nodesPerLayer;
187
-
188
- switch(type) {
189
- case 'scale-free':
190
- // Generate scale-free network
191
- return scaleFreeGraph(totalNodes, 2, Date.now());
192
-
193
- case 'tree':
194
- // Generate tree-like structure
195
- return starGraph(totalNodes);
196
-
197
- case 'custom-layers':
198
- default:
199
- // Generate custom layered graph
200
- const nodes = [];
201
- const edges = [];
202
-
203
- // Create nodes
204
- for (let layer = 0; layer < numLayers; layer++) {
205
- for (let node = 0; node < nodesPerLayer; node++) {
206
- nodes.push(`L${layer}N${node}`);
207
- }
208
- }
209
-
210
- // Connect adjacent layers
211
- for (let layer = 0; layer < numLayers - 1; layer++) {
212
- for (let n1 = 0; n1 < nodesPerLayer; n1++) {
213
- for (let n2 = 0; n2 < nodesPerLayer; n2++) {
214
- if (Math.random() < 0.3) {
215
- edges.push([
216
- `L${layer}N${n1}`,
217
- `L${layer + 1}N${n2}`
218
- ]);
219
- }
220
- }
221
- }
222
- }
223
-
224
- return { nodes: () => nodes, edges: () => edges };
225
- }
226
- }
227
-
228
- function visualizeGraph(graph, positions) {
229
- const svg = document.getElementById('graph-svg');
230
- const svgRect = svg.getBoundingClientRect();
231
- const width = svgRect.width;
232
- const height = svgRect.height;
233
-
234
- svg.innerHTML = '';
235
-
236
- const margin = 50;
237
- const scaleX = (width - 2 * margin);
238
- const scaleY = (height - 2 * margin);
239
-
240
- const nodes = graph.nodes();
241
- const posValues = nodes.map(n => positions[n]);
242
- const minX = Math.min(...posValues.map(p => p[0]));
243
- const maxX = Math.max(...posValues.map(p => p[0]));
244
- const minY = Math.min(...posValues.map(p => p[1]));
245
- const maxY = Math.max(...posValues.map(p => p[1]));
246
-
247
- const rangeX = maxX - minX || 1;
248
- const rangeY = maxY - minY || 1;
249
-
250
- // Draw layer guidelines
251
- const layerColors = ['#F44336', '#9C27B0', '#3F51B5', '#009688', '#FF9800'];
252
- if (currentLayers) {
253
- currentLayers.forEach((layerNodes, layerIdx) => {
254
- const layerPositions = layerNodes.map(node => positions[node]);
255
-
256
- if (layerPositions.length > 1) {
257
- // Find layer bounds
258
- const layerMinX = Math.min(...layerPositions.map(p => p[0]));
259
- const layerMaxX = Math.max(...layerPositions.map(p => p[0]));
260
- const layerMinY = Math.min(...layerPositions.map(p => p[1]));
261
- const layerMaxY = Math.max(...layerPositions.map(p => p[1]));
262
-
263
- // Draw layer rectangle
264
- const x1 = margin + (layerMinX - minX) / rangeX * scaleX - 20;
265
- const y1 = margin + (layerMinY - minY) / rangeY * scaleY - 20;
266
- const x2 = margin + (layerMaxX - minX) / rangeX * scaleX + 20;
267
- const y2 = margin + (layerMaxY - minY) / rangeY * scaleY + 20;
268
-
269
- const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
270
- rect.setAttribute('x', x1);
271
- rect.setAttribute('y', y1);
272
- rect.setAttribute('width', x2 - x1);
273
- rect.setAttribute('height', y2 - y1);
274
- rect.setAttribute('fill', layerColors[layerIdx % layerColors.length]);
275
- rect.setAttribute('fill-opacity', '0.1');
276
- rect.setAttribute('stroke', layerColors[layerIdx % layerColors.length]);
277
- rect.setAttribute('stroke-width', '1');
278
- rect.setAttribute('stroke-dasharray', '5,5');
279
- svg.appendChild(rect);
280
- }
281
- });
282
- }
283
-
284
- // Draw edges
285
- const edges = graph.edges();
286
- edges.forEach(([source, target]) => {
287
- const sourcePos = positions[source];
288
- const targetPos = positions[target];
289
-
290
- const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
291
- const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
292
- const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
293
- const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
294
-
295
- const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
296
- line.setAttribute('x1', x1);
297
- line.setAttribute('y1', y1);
298
- line.setAttribute('x2', x2);
299
- line.setAttribute('y2', y2);
300
- line.setAttribute('stroke', '#999');
301
- line.setAttribute('stroke-width', '2');
302
- svg.appendChild(line);
303
- });
304
-
305
- // Draw nodes
306
- nodes.forEach(node => {
307
- const pos = positions[node];
308
- const x = margin + (pos[0] - minX) / rangeX * scaleX;
309
- const y = margin + (pos[1] - minY) / rangeY * scaleY;
310
-
311
- // Determine color based on layer
312
- let nodeColor = '#666';
313
- if (currentLayers) {
314
- currentLayers.forEach((layerNodes, layerIdx) => {
315
- if (layerNodes.includes(node)) {
316
- nodeColor = layerColors[layerIdx % layerColors.length];
317
- }
318
- });
319
- }
320
-
321
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
322
- circle.setAttribute('cx', x);
323
- circle.setAttribute('cy', y);
324
- circle.setAttribute('r', '8');
325
- circle.setAttribute('fill', nodeColor);
326
- circle.setAttribute('stroke', '#333');
327
- circle.setAttribute('stroke-width', '2');
328
- svg.appendChild(circle);
329
-
330
- const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
331
- text.setAttribute('x', x);
332
- text.setAttribute('y', y + 4);
333
- text.setAttribute('text-anchor', 'middle');
334
- text.setAttribute('font-size', '9');
335
- text.setAttribute('fill', 'white');
336
- text.textContent = String(node).replace(/L\d+N/, '') || String(node);
337
- svg.appendChild(text);
338
- });
339
- }
340
-
341
- window.newGraph = function() {
342
- const numLayers = parseInt(document.getElementById('num-layers').value);
343
- const nodesPerLayer = parseInt(document.getElementById('nodes-per-layer').value);
344
- const graphType = document.getElementById('graph-type').value;
345
-
346
- currentGraph = generateGraph(graphType, numLayers, nodesPerLayer);
347
-
348
- // Just visualize with random positions initially
349
- const positions = {};
350
- currentGraph.nodes().forEach(node => {
351
- positions[node] = [
352
- (Math.random() - 0.5) * 1.5,
353
- (Math.random() - 0.5) * 1.5
354
- ];
355
- });
356
-
357
- // Generate layers for multipartite layout
358
- const layerMethod = document.getElementById('layer-method').value;
359
-
360
- if (layerMethod === 'bfs') {
361
- const root = findBestRoot(currentGraph);
362
- currentLayers = groupNodes(currentGraph, 'bfs', 0, { root });
363
- } else if (layerMethod === 'degree') {
364
- currentLayers = groupNodes(currentGraph, 'degree', numLayers);
365
- } else {
366
- // community-based
367
- currentLayers = groupNodes(currentGraph, 'community', numLayers);
368
- }
369
-
370
- visualizeGraph(currentGraph, positions);
371
-
372
- // Update layer info
373
- const infoDiv = document.getElementById('layers-info');
374
- const layerInfo = currentLayers ? currentLayers.map((nodes, idx) =>
375
- `Layer ${idx}: ${nodes.length} nodes`
376
- ).join('<br>') : 'No layers generated';
377
-
378
- infoDiv.innerHTML = `
379
- <strong>Structure:</strong><br>
380
- ${layerInfo}<br>
381
- <strong>Total edges:</strong> ${currentGraph.edges().length}
382
- `;
383
- };
384
-
385
- window.applyLayout = function() {
386
- if(!currentGraph || !currentLayers) return;
387
-
388
- const alignment = document.getElementById('alignment').value;
389
-
390
- const positions = multipartiteLayout(currentGraph, currentLayers, alignment, 1, [0, 0]);
391
-
392
- visualizeGraph(currentGraph, positions);
393
- };
394
-
395
- function setupControls() {
396
- const controls = ['num-layers', 'nodes-per-layer'];
397
- controls.forEach(id => {
398
- const slider = document.getElementById(id);
399
- const valueSpan = document.getElementById(id + '-value');
400
- slider.oninput = function() {
401
- valueSpan.textContent = this.value;
402
- };
403
- });
404
- }
405
-
406
- setupControls();
407
- newGraph();
408
- </script>
409
- </body>
410
- </html>