@graphty/layout 1.2.3 → 1.2.4

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 (201) 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 +322 -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 +119 -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 +14 -1
  148. package/.env.example +0 -11
  149. package/.github/workflows/ci.yml +0 -101
  150. package/.releaserc.json +0 -22
  151. package/CHANGELOG.md +0 -52
  152. package/CLAUDE.md +0 -104
  153. package/CONTRIBUTING.md +0 -1
  154. package/DEPLOYMENT.md +0 -59
  155. package/build-examples-script.js +0 -26
  156. package/commitlint.config.js +0 -37
  157. package/examples/3d-force-directed.html +0 -611
  158. package/examples/3d-kamada-kawai.html +0 -379
  159. package/examples/3d-layout-comparison.html +0 -448
  160. package/examples/3d-spherical-layout.html +0 -319
  161. package/examples/arf-layout.html +0 -524
  162. package/examples/bfs-layout.html +0 -487
  163. package/examples/bipartite-layout.html +0 -382
  164. package/examples/circular-layout.html +0 -292
  165. package/examples/forceatlas2-layout.html +0 -588
  166. package/examples/index.html +0 -241
  167. package/examples/kamada-kawai-layout.html +0 -425
  168. package/examples/layout-helpers.js +0 -23
  169. package/examples/layout.js +0 -2304
  170. package/examples/multipartite-layout.html +0 -410
  171. package/examples/planar-layout.html +0 -388
  172. package/examples/random-layout.html +0 -328
  173. package/examples/shell-layout.html +0 -323
  174. package/examples/spectral-layout.html +0 -335
  175. package/examples/spiral-layout.html +0 -447
  176. package/examples/spring-layout.html +0 -313
  177. package/test/arf-layout.test.ts +0 -443
  178. package/test/bfs-layout.test.ts +0 -427
  179. package/test/bipartite-layout.test.ts +0 -344
  180. package/test/circular-layout.test.ts +0 -442
  181. package/test/forceatlas2-layout.test.ts +0 -405
  182. package/test/fruchterman-reingold-layout.test.ts +0 -477
  183. package/test/graph-generators.test.ts +0 -450
  184. package/test/kamada-kawai-layout.test.ts +0 -623
  185. package/test/multipartite-layout.test.ts +0 -404
  186. package/test/planar-layout.test.ts +0 -266
  187. package/test/random-layout.test.ts +0 -254
  188. package/test/rescale-layout.test.ts +0 -373
  189. package/test/shell-layout.test.ts +0 -347
  190. package/test/spectral-layout.test.ts +0 -378
  191. package/test/spiral-layout.test.ts +0 -338
  192. package/test/spring-layout.test.ts +0 -241
  193. package/test/test-utils.ts +0 -34
  194. package/test/utils-graph.test.ts +0 -155
  195. package/test/utils-index.test.ts +0 -77
  196. package/test/utils-numpy.test.ts +0 -272
  197. package/test/utils-params.test.ts +0 -99
  198. package/test/utils-random.test.ts +0 -229
  199. package/tsconfig.json +0 -16
  200. package/vite.config.js +0 -36
  201. package/vitest.config.ts +0 -30
package/examples/random-layout.html DELETED
@@ -1,328 +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>Random 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>Random 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="5" max="50" value="20">
111
- <span id="num-nodes-value">20</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="random">Random</option>
118
- <option value="complete">Complete</option>
119
- <option value="cycle">Cycle</option>
120
- <option value="star">Star</option>
121
- </select>
122
- </div>
123
-
124
- <div class="control-group">
125
- <label for="seed">Seed (for reproducibility):</label>
126
- <input type="number" id="seed" value="42">
127
- </div>
128
-
129
- <button onclick="newGraph()">New Graph</button>
130
- <button onclick="randomizeSeed()">Random Seed</button>
131
- </div>
132
-
133
- <div class="visualization">
134
- <svg id="graph-svg" width="800" height="600"></svg>
135
- </div>
136
-
137
- <div class="layout-controls">
138
- <h3>Layout Parameters</h3>
139
-
140
- <div class="control-group">
141
- <label for="center-x">Center X:</label>
142
- <input type="range" id="center-x" min="-2" max="2" step="0.1" value="0">
143
- <span id="center-x-value">0.0</span>
144
- </div>
145
-
146
- <div class="control-group">
147
- <label for="center-y">Center Y:</label>
148
- <input type="range" id="center-y" min="-2" max="2" step="0.1" value="0">
149
- <span id="center-y-value">0.0</span>
150
- </div>
151
-
152
- <button onclick="applyLayout()">Apply Layout</button>
153
- </div>
154
- </div>
155
-
156
- <script type="module">
157
- import { randomLayout } from "./layout.js";
158
-
159
- let currentGraph = null;
160
-
161
- // Generate a sample graph
162
- function generateGraph(type, numNodes) {
163
- const nodes = Array.from({length: numNodes}, (_, i) => i);
164
- const edges = [];
165
-
166
- switch(type) {
167
- case 'complete':
168
- for(let i = 0; i < numNodes; i++) {
169
- for(let j = i + 1; j < numNodes; j++) {
170
- edges.push([i, j]);
171
- }
172
- }
173
- break;
174
- case 'cycle':
175
- for(let i = 0; i < numNodes; i++) {
176
- edges.push([i, (i + 1) % numNodes]);
177
- }
178
- break;
179
- case 'star':
180
- for(let i = 1; i < numNodes; i++) {
181
- edges.push([0, i]);
182
- }
183
- break;
184
- case 'random':
185
- default:
186
- const numEdges = Math.floor(numNodes * 1.5);
187
- for(let i = 0; i < numEdges; i++) {
188
- const a = Math.floor(Math.random() * numNodes);
189
- const b = Math.floor(Math.random() * numNodes);
190
- if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
191
- edges.push([a, b]);
192
- }
193
- }
194
- break;
195
- }
196
-
197
- return { nodes: () => nodes, edges: () => edges };
198
- }
199
-
200
- // Visualize the graph
201
- function visualizeGraph(graph, positions) {
202
- const svg = document.getElementById('graph-svg');
203
- const svgRect = svg.getBoundingClientRect();
204
- const width = svgRect.width;
205
- const height = svgRect.height;
206
-
207
- // Clear SVG
208
- svg.innerHTML = '';
209
-
210
- // Scale positions to fit SVG
211
- const margin = 50;
212
- const scaleX = (width - 2 * margin);
213
- const scaleY = (height - 2 * margin);
214
-
215
- // Find position bounds
216
- const nodes = graph.nodes();
217
- const posValues = nodes.map(n => positions[n]);
218
- const minX = Math.min(...posValues.map(p => p[0]));
219
- const maxX = Math.max(...posValues.map(p => p[0]));
220
- const minY = Math.min(...posValues.map(p => p[1]));
221
- const maxY = Math.max(...posValues.map(p => p[1]));
222
-
223
- const rangeX = maxX - minX;
224
- const rangeY = maxY - minY;
225
-
226
- // Draw edges
227
- const edges = graph.edges();
228
- edges.forEach(([source, target]) => {
229
- const sourcePos = positions[source];
230
- const targetPos = positions[target];
231
-
232
- const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
233
- const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
234
- const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
235
- const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
236
-
237
- const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
238
- line.setAttribute('x1', x1);
239
- line.setAttribute('y1', y1);
240
- line.setAttribute('x2', x2);
241
- line.setAttribute('y2', y2);
242
- line.setAttribute('stroke', '#999');
243
- line.setAttribute('stroke-width', '2');
244
- svg.appendChild(line);
245
- });
246
-
247
- // Draw nodes
248
- nodes.forEach(node => {
249
- const pos = positions[node];
250
- const x = margin + (pos[0] - minX) / rangeX * scaleX;
251
- const y = margin + (pos[1] - minY) / rangeY * scaleY;
252
-
253
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
254
- circle.setAttribute('cx', x);
255
- circle.setAttribute('cy', y);
256
- circle.setAttribute('r', '8');
257
- circle.setAttribute('fill', '#4CAF50');
258
- circle.setAttribute('stroke', '#333');
259
- circle.setAttribute('stroke-width', '2');
260
- svg.appendChild(circle);
261
-
262
- // Node label
263
- const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
264
- text.setAttribute('x', x);
265
- text.setAttribute('y', y + 4);
266
- text.setAttribute('text-anchor', 'middle');
267
- text.setAttribute('font-size', '12');
268
- text.setAttribute('fill', 'white');
269
- text.textContent = node;
270
- svg.appendChild(text);
271
- });
272
- }
273
-
274
- // New Graph
275
- window.newGraph = function() {
276
- const numNodes = parseInt(document.getElementById('num-nodes').value);
277
- const graphType = document.getElementById('graph-type').value;
278
-
279
- currentGraph = generateGraph(graphType, numNodes);
280
-
281
- // Just visualize with random positions initially
282
- const positions = {};
283
- currentGraph.nodes().forEach(node => {
284
- positions[node] = [
285
- (Math.random() - 0.5) * 1.5,
286
- (Math.random() - 0.5) * 1.5
287
- ];
288
- });
289
-
290
- visualizeGraph(currentGraph, positions);
291
- };
292
-
293
- // Apply Layout
294
- window.applyLayout = function() {
295
- if(!currentGraph) return;
296
-
297
- const centerX = parseFloat(document.getElementById('center-x').value);
298
- const centerY = parseFloat(document.getElementById('center-y').value);
299
- const seed = parseInt(document.getElementById('seed').value);
300
-
301
- const positions = randomLayout(currentGraph, [centerX, centerY], 2, seed);
302
-
303
- visualizeGraph(currentGraph, positions);
304
- };
305
-
306
- // Generate random seed
307
- window.randomizeSeed = function() {
308
- document.getElementById('seed').value = Math.floor(Math.random() * 10000);
309
- };
310
-
311
- // Setup controls
312
- function setupControls() {
313
- const controls = ['num-nodes', 'center-x', 'center-y'];
314
- controls.forEach(id => {
315
- const slider = document.getElementById(id);
316
- const valueSpan = document.getElementById(id + '-value');
317
- slider.oninput = function() {
318
- valueSpan.textContent = this.value;
319
- };
320
- });
321
- }
322
-
323
- // Initialize
324
- setupControls();
325
- newGraph();
326
- </script>
327
- </body>
328
- </html>
package/examples/shell-layout.html DELETED
@@ -1,323 +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>Shell 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
- .shell-config {
96
- font-size: 0.9em;
97
- color: #666;
98
- margin-top: 10px;
99
- }
100
- </style>
101
- </head>
102
- <body>
103
- <div class="back-link">
104
- <a href="index.html">← Back to Index</a>
105
- </div>
106
-
107
- <h1>Shell Layout Test</h1>
108
-
109
- <div class="container">
110
- <div class="graph-controls">
111
- <h3>Graph Settings</h3>
112
-
113
- <div class="control-group">
114
- <label for="num-nodes">Number of nodes:</label>
115
- <input type="range" id="num-nodes" min="5" max="300" value="15">
116
- <span id="num-nodes-value">15</span>
117
- </div>
118
-
119
- <button onclick="newGraph()">New Graph</button>
120
- </div>
121
-
122
- <div class="visualization">
123
- <svg id="graph-svg" width="800" height="600"></svg>
124
- </div>
125
-
126
- <div class="layout-controls">
127
- <h3>Layout Parameters</h3>
128
-
129
- <div class="control-group">
130
- <label for="shell-pattern">Shell pattern:</label>
131
- <select id="shell-pattern">
132
- <option value="degree">By Degree (hubs in center)</option>
133
- <option value="k-core">By K-Core (density)</option>
134
- <option value="bfs">By Distance (BFS)</option>
135
- <option value="community">By Community</option>
136
- <option value="manual-center">Manual: Center + Ring</option>
137
- <option value="manual-triple">Manual: Three Rings</option>
138
- </select>
139
- </div>
140
-
141
- <button onclick="applyLayout()">Apply Layout</button>
142
- </div>
143
- </div>
144
-
145
- <script type="module">
146
- import {
147
- shellLayout,
148
- scaleFreeGraph,
149
- randomGraph
150
- } from "./layout.js";
151
- import {
152
- groupNodes,
153
- findBestRoot
154
- } from "./layout-helpers.js";
155
-
156
- let currentGraph = null;
157
-
158
- function generateGraph(numNodes) {
159
- // Use scale-free graph for interesting shell patterns
160
- if (numNodes < 50) {
161
- return scaleFreeGraph(numNodes, 2, Date.now());
162
- } else {
163
- // For larger graphs, use random graph
164
- return randomGraph(numNodes, 0.05, Date.now());
165
- }
166
- }
167
-
168
- function getShellConfiguration(pattern, graph) {
169
- const numNodes = graph.nodes().length;
170
-
171
- switch(pattern) {
172
- case 'degree':
173
- // Group by degree - hubs in center
174
- return groupNodes(graph, 'degree', Math.min(4, Math.ceil(numNodes / 10)));
175
-
176
- case 'k-core':
177
- // Group by k-core decomposition
178
- return groupNodes(graph, 'k-core');
179
-
180
- case 'bfs':
181
- // Group by distance from best root
182
- const root = findBestRoot(graph);
183
- return groupNodes(graph, 'bfs', 0, { root });
184
-
185
- case 'community':
186
- // Group by detected communities
187
- return groupNodes(graph, 'community', Math.min(5, Math.ceil(numNodes / 20)));
188
-
189
- case 'manual-center':
190
- // Manual: center node + outer ring
191
- const nodes = graph.nodes();
192
- return [[nodes[0]], nodes.slice(1)];
193
-
194
- case 'manual-triple':
195
- // Manual: three equal rings
196
- const third = Math.floor(numNodes / 3);
197
- const allNodes = graph.nodes();
198
- return [
199
- allNodes.slice(0, third),
200
- allNodes.slice(third, 2 * third),
201
- allNodes.slice(2 * third)
202
- ];
203
-
204
- default:
205
- return groupNodes(graph, 'degree', 3);
206
- }
207
- }
208
-
209
- function visualizeGraph(graph, positions) {
210
- const svg = document.getElementById('graph-svg');
211
- const svgRect = svg.getBoundingClientRect();
212
- const width = svgRect.width;
213
- const height = svgRect.height;
214
-
215
- svg.innerHTML = '';
216
-
217
- const margin = 50;
218
- const scaleX = (width - 2 * margin);
219
- const scaleY = (height - 2 * margin);
220
-
221
- const nodes = graph.nodes();
222
- const posValues = nodes.map(n => positions[n]);
223
- const minX = Math.min(...posValues.map(p => p[0]));
224
- const maxX = Math.max(...posValues.map(p => p[0]));
225
- const minY = Math.min(...posValues.map(p => p[1]));
226
- const maxY = Math.max(...posValues.map(p => p[1]));
227
-
228
- const rangeX = maxX - minX || 1;
229
- const rangeY = maxY - minY || 1;
230
-
231
- // Draw edges
232
- const edges = graph.edges();
233
- edges.forEach(([source, target]) => {
234
- const sourcePos = positions[source];
235
- const targetPos = positions[target];
236
-
237
- const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
238
- const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
239
- const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
240
- const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
241
-
242
- const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
243
- line.setAttribute('x1', x1);
244
- line.setAttribute('y1', y1);
245
- line.setAttribute('x2', x2);
246
- line.setAttribute('y2', y2);
247
- line.setAttribute('stroke', '#999');
248
- line.setAttribute('stroke-width', '2');
249
- svg.appendChild(line);
250
- });
251
-
252
- // Draw nodes
253
- nodes.forEach(node => {
254
- const pos = positions[node];
255
- const x = margin + (pos[0] - minX) / rangeX * scaleX;
256
- const y = margin + (pos[1] - minY) / rangeY * scaleY;
257
-
258
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
259
- circle.setAttribute('cx', x);
260
- circle.setAttribute('cy', y);
261
- circle.setAttribute('r', '8');
262
- circle.setAttribute('fill', '#673AB7');
263
- circle.setAttribute('stroke', '#333');
264
- circle.setAttribute('stroke-width', '2');
265
- svg.appendChild(circle);
266
-
267
- const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
268
- text.setAttribute('x', x);
269
- text.setAttribute('y', y + 4);
270
- text.setAttribute('text-anchor', 'middle');
271
- text.setAttribute('font-size', '11');
272
- text.setAttribute('fill', 'white');
273
- text.textContent = node;
274
- svg.appendChild(text);
275
- });
276
- }
277
-
278
- window.newGraph = function() {
279
- const numNodes = parseInt(document.getElementById('num-nodes').value);
280
-
281
- currentGraph = generateGraph(numNodes);
282
-
283
- // Just visualize with random positions initially
284
- const positions = {};
285
- currentGraph.nodes().forEach(node => {
286
- positions[node] = [
287
- (Math.random() - 0.5) * 1.5,
288
- (Math.random() - 0.5) * 1.5
289
- ];
290
- });
291
-
292
- visualizeGraph(currentGraph, positions);
293
- };
294
-
295
- window.applyLayout = function() {
296
- if(!currentGraph) return;
297
-
298
- const pattern = document.getElementById('shell-pattern').value;
299
-
300
- const shells = getShellConfiguration(pattern, currentGraph);
301
- const positions = shellLayout(currentGraph, shells, 1, [0, 0], 2);
302
-
303
- visualizeGraph(currentGraph, positions);
304
- };
305
-
306
- function setupControls() {
307
- const controls = ['num-nodes'];
308
- controls.forEach(id => {
309
- const slider = document.getElementById(id);
310
- const valueSpan = document.getElementById(id + '-value');
311
- slider.oninput = function() {
312
- valueSpan.textContent = this.value;
313
- };
314
- });
315
-
316
- document.getElementById('shell-pattern').onchange = null;
317
- }
318
-
319
- setupControls();
320
- newGraph();
321
- </script>
322
- </body>
323
- </html>