@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
@@ -1,241 +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>NetworkX Layout Tests</title>
19
- <style>
20
- body {
21
- font-family: Arial, sans-serif;
22
- max-width: 1200px;
23
- margin: 0 auto;
24
- padding: 20px;
25
- background-color: #f5f5f5;
26
- }
27
- .header {
28
- text-align: center;
29
- margin-bottom: 40px;
30
- color: #333;
31
- }
32
- .layout-grid {
33
- display: grid;
34
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
35
- gap: 20px;
36
- margin-bottom: 40px;
37
- }
38
- .layout-card {
39
- background: white;
40
- border-radius: 8px;
41
- padding: 20px;
42
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
43
- transition: transform 0.2s, box-shadow 0.2s;
44
- }
45
- .layout-card:hover {
46
- transform: translateY(-2px);
47
- box-shadow: 0 4px 16px rgba(0,0,0,0.15);
48
- }
49
- .layout-title {
50
- color: #2c5aa0;
51
- margin-bottom: 10px;
52
- font-size: 1.2em;
53
- font-weight: bold;
54
- }
55
- .layout-description {
56
- color: #666;
57
- margin-bottom: 15px;
58
- line-height: 1.4;
59
- }
60
- .test-button {
61
- background: #4CAF50;
62
- color: white;
63
- border: none;
64
- padding: 10px 20px;
65
- border-radius: 4px;
66
- cursor: pointer;
67
- text-decoration: none;
68
- display: inline-block;
69
- transition: background-color 0.2s;
70
- }
71
- .test-button:hover {
72
- background: #45a049;
73
- }
74
- .footer {
75
- text-align: center;
76
- margin-top: 40px;
77
- color: #666;
78
- font-size: 0.9em;
79
- }
80
- .visualization {
81
- background: white;
82
- border-radius: 8px;
83
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
84
- padding: 20px;
85
- }
86
- .section-header {
87
- text-align: center;
88
- margin: 40px 0 20px 0;
89
- color: #333;
90
- }
91
- .section-header h2 {
92
- color: #2c5aa0;
93
- margin-bottom: 10px;
94
- }
95
- .section-header p {
96
- color: #666;
97
- margin: 0;
98
- }
99
- .layout-card.threed {
100
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
101
- color: white;
102
- }
103
- .layout-card.threed .layout-title {
104
- color: #fff;
105
- }
106
- .layout-card.threed .layout-description {
107
- color: #f0f0f0;
108
- }
109
- .layout-card.threed .test-button {
110
- background: rgba(255, 255, 255, 0.2);
111
- color: white;
112
- border: 2px solid rgba(255, 255, 255, 0.3);
113
- }
114
- .layout-card.threed .test-button:hover {
115
- background: rgba(255, 255, 255, 0.3);
116
- border-color: rgba(255, 255, 255, 0.5);
117
- }
118
- </style>
119
- </head>
120
- <body>
121
- <div class="header">
122
- <h1>NetworkX Layout Algorithm Tests</h1>
123
- <p>Interactive tests for graph layout algorithms in JavaScript</p>
124
- </div>
125
-
126
- <div class="section-header">
127
- <h2>2D Layout Algorithms</h2>
128
- <p>Classic graph layout algorithms for 2D visualization</p>
129
- </div>
130
-
131
- <div class="layout-grid">
132
- <div class="layout-card">
133
- <div class="layout-title">Random Layout</div>
134
- <div class="layout-description">Positions nodes randomly in a unit square</div>
135
- <a href="random-layout.html" class="test-button">Test Layout</a>
136
- </div>
137
-
138
- <div class="layout-card">
139
- <div class="layout-title">Circular Layout</div>
140
- <div class="layout-description">Positions nodes on a circle</div>
141
- <a href="circular-layout.html" class="test-button">Test Layout</a>
142
- </div>
143
-
144
- <div class="layout-card">
145
- <div class="layout-title">Shell Layout</div>
146
- <div class="layout-description">Positions nodes in concentric circles</div>
147
- <a href="shell-layout.html" class="test-button">Test Layout</a>
148
- </div>
149
-
150
- <div class="layout-card">
151
- <div class="layout-title">Spring Layout</div>
152
- <div class="layout-description">Force-based layout with attractive and repulsive forces (Fruchterman-Reingold)</div>
153
- <a href="spring-layout.html" class="test-button">Test Layout</a>
154
- </div>
155
-
156
- <div class="layout-card">
157
- <div class="layout-title">Spectral Layout</div>
158
- <div class="layout-description">Layout based on eigenvectors of the Laplacian matrix</div>
159
- <a href="spectral-layout.html" class="test-button">Test Layout</a>
160
- </div>
161
-
162
- <div class="layout-card">
163
- <div class="layout-title">Spiral Layout</div>
164
- <div class="layout-description">Positions nodes along a spiral</div>
165
- <a href="spiral-layout.html" class="test-button">Test Layout</a>
166
- </div>
167
-
168
- <div class="layout-card">
169
- <div class="layout-title">Bipartite Layout</div>
170
- <div class="layout-description">Layout for bipartite graphs with nodes on two lines</div>
171
- <a href="bipartite-layout.html" class="test-button">Test Layout</a>
172
- </div>
173
-
174
- <div class="layout-card">
175
- <div class="layout-title">Multipartite Layout</div>
176
- <div class="layout-description">Layout for multipartite graphs with nodes on multiple levels</div>
177
- <a href="multipartite-layout.html" class="test-button">Test Layout</a>
178
- </div>
179
-
180
- <div class="layout-card">
181
- <div class="layout-title">BFS Layout</div>
182
- <div class="layout-description">Layout based on breadth-first search algorithm</div>
183
- <a href="bfs-layout.html" class="test-button">Test Layout</a>
184
- </div>
185
-
186
- <div class="layout-card">
187
- <div class="layout-title">Planar Layout</div>
188
- <div class="layout-description">Layout without edge intersections (approximated)</div>
189
- <a href="planar-layout.html" class="test-button">Test Layout</a>
190
- </div>
191
-
192
- <div class="layout-card">
193
- <div class="layout-title">Kamada-Kawai Layout</div>
194
- <div class="layout-description">Layout based on minimizing distances between nodes</div>
195
- <a href="kamada-kawai-layout.html" class="test-button">Test Layout</a>
196
- </div>
197
-
198
- <div class="layout-card">
199
- <div class="layout-title">ForceAtlas2 Layout</div>
200
- <div class="layout-description">Advanced force-based layout algorithm</div>
201
- <a href="forceatlas2-layout.html" class="test-button">Test Layout</a>
202
- </div>
203
-
204
- <div class="layout-card">
205
- <div class="layout-title">ARF Layout</div>
206
- <div class="layout-description">Layout with customizable attractive and repulsive forces</div>
207
- <a href="arf-layout.html" class="test-button">Test Layout</a>
208
- </div>
209
- </div>
210
-
211
- <div class="section-header">
212
- <h2>3D Layout Algorithms</h2>
213
- <p>Interactive 3D visualizations with Three.js - drag to rotate, scroll to zoom</p>
214
- </div>
215
-
216
- <div class="layout-grid">
217
- <div class="layout-card threed">
218
- <div class="layout-title">3D Force-Directed Layouts</div>
219
- <div class="layout-description">Compare spring, ForceAtlas2, and ARF algorithms in immersive 3D space with interactive controls</div>
220
- <a href="3d-force-directed.html" class="test-button">Explore 3D</a>
221
- </div>
222
-
223
- <div class="layout-card threed">
224
- <div class="layout-title">3D Kamada-Kawai Layout</div>
225
- <div class="layout-description">Stress-minimization algorithm in 3D with real-time stress calculation and graph generation</div>
226
- <a href="3d-kamada-kawai.html" class="test-button">Explore 3D</a>
227
- </div>
228
-
229
- <div class="layout-card threed">
230
- <div class="layout-title">3D Spherical Layout</div>
231
- <div class="layout-description">Nodes positioned on a 3D sphere surface with auto-rotation and customizable graph types</div>
232
- <a href="3d-spherical-layout.html" class="test-button">Explore 3D</a>
233
- </div>
234
-
235
- </div>
236
-
237
- <div class="footer">
238
- <p>Ported from NetworkX Python library - Interactive tests for JavaScript</p>
239
- </div>
240
- </body>
241
- </html>
@@ -1,425 +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>Kamada-Kawai 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
- .info-box {
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
- .loading {
104
- text-align: center;
105
- color: #666;
106
- font-style: italic;
107
- }
108
- </style>
109
- </head>
110
- <body>
111
- <div class="back-link">
112
- <a href="index.html">← Back to Index</a>
113
- </div>
114
-
115
- <h1>Kamada-Kawai Layout Test</h1>
116
-
117
- <div class="container">
118
- <div class="graph-controls">
119
- <h3>Graph Settings</h3>
120
-
121
- <div class="control-group">
122
- <label for="num-nodes">Number of nodes:</label>
123
- <input type="range" id="num-nodes" min="4" max="25" value="15">
124
- <span id="num-nodes-value">15</span>
125
- </div>
126
-
127
- <div class="control-group">
128
- <label for="graph-type">Graph type:</label>
129
- <select id="graph-type">
130
- <option value="path">Path</option>
131
- <option value="cycle">Cycle</option>
132
- <option value="grid">Grid</option>
133
- <option value="random">Random</option>
134
- <option value="complete">Complete</option>
135
- </select>
136
- </div>
137
-
138
- <button onclick="newGraph()">New Graph</button>
139
- </div>
140
-
141
- <div class="visualization">
142
- <svg id="graph-svg" width="800" height="600"></svg>
143
- </div>
144
-
145
- <div class="layout-controls">
146
- <h3>Layout Parameters</h3>
147
-
148
- <div class="control-group">
149
- <label for="center-x">Center X:</label>
150
- <input type="range" id="center-x" min="-2" max="2" step="0.1" value="0">
151
- <span id="center-x-value">0.0</span>
152
- </div>
153
-
154
- <div class="control-group">
155
- <label for="center-y">Center Y:</label>
156
- <input type="range" id="center-y" min="-2" max="2" step="0.1" value="0">
157
- <span id="center-y-value">0.0</span>
158
- </div>
159
-
160
- <button onclick="applyLayout()">Apply Layout</button>
161
- <div id="loading" class="loading" style="display: none;">Computing layout...</div>
162
-
163
- <div class="info-box">
164
- <strong>Info:</strong> Kamada-Kawai layout places nodes to minimize the difference
165
- between graph-theoretic distance and geometric distance between nodes. This helps
166
- preserve the "shape" of the graph.
167
- </div>
168
- </div>
169
- </div>
170
-
171
- <script type="module">
172
- import { kamadaKawaiLayout } from "./layout.js";
173
-
174
- let currentGraph = null;
175
- let distances = null;
176
- let initialPositions = null;
177
-
178
- function generateGraph(type, numNodes) {
179
- const nodes = Array.from({length: numNodes}, (_, i) => i);
180
- const edges = [];
181
-
182
- switch(type) {
183
- case 'path':
184
- // Simple path graph
185
- for(let i = 0; i < numNodes - 1; i++) {
186
- edges.push([i, i + 1]);
187
- }
188
- break;
189
- case 'cycle':
190
- // Cycle graph
191
- for(let i = 0; i < numNodes; i++) {
192
- edges.push([i, (i + 1) % numNodes]);
193
- }
194
- break;
195
- case 'grid':
196
- // Simple grid
197
- const gridSize = Math.ceil(Math.sqrt(numNodes));
198
- for(let i = 0; i < numNodes; i++) {
199
- const row = Math.floor(i / gridSize);
200
- const col = i % gridSize;
201
-
202
- // Connect right
203
- if(col < gridSize - 1 && i + 1 < numNodes) {
204
- edges.push([i, i + 1]);
205
- }
206
-
207
- // Connect down
208
- if(row < gridSize - 1 && i + gridSize < numNodes) {
209
- edges.push([i, i + gridSize]);
210
- }
211
- }
212
- break;
213
- case 'complete':
214
- // Complete graph - every node connected to every other node
215
- for(let i = 0; i < numNodes; i++) {
216
- for(let j = i + 1; j < numNodes; j++) {
217
- edges.push([i, j]);
218
- }
219
- }
220
- break;
221
- case 'random':
222
- default:
223
- // Random connected graph
224
- // First ensure connectivity with a spanning tree
225
- for(let i = 1; i < numNodes; i++) {
226
- const j = Math.floor(Math.random() * i);
227
- edges.push([j, i]);
228
- }
229
-
230
- // Add some random edges
231
- const extraEdges = Math.floor(numNodes * 0.5);
232
- for(let i = 0; i < extraEdges; i++) {
233
- const a = Math.floor(Math.random() * numNodes);
234
- const b = Math.floor(Math.random() * numNodes);
235
- if(a !== b && !edges.some(e => (e[0] === a && e[1] === b) || (e[0] === b && e[1] === a))) {
236
- edges.push([a, b]);
237
- }
238
- }
239
- break;
240
- }
241
-
242
- return {
243
- nodes: () => nodes,
244
- edges: () => edges,
245
- // For computing all-pairs shortest path (optional)
246
- neighbors: function(node) {
247
- return edges
248
- .filter(([s, t]) => s === node || t === node)
249
- .map(([s, t]) => s === node ? t : s);
250
- }
251
- };
252
- }
253
-
254
- function visualizeGraph(graph, positions) {
255
- const svg = document.getElementById('graph-svg');
256
- const svgRect = svg.getBoundingClientRect();
257
- const width = svgRect.width;
258
- const height = svgRect.height;
259
-
260
- svg.innerHTML = '';
261
-
262
- const margin = 50;
263
- const scaleX = (width - 2 * margin);
264
- const scaleY = (height - 2 * margin);
265
-
266
- const nodes = graph.nodes();
267
- const posValues = nodes.map(n => positions[n]);
268
- const minX = Math.min(...posValues.map(p => p[0]));
269
- const maxX = Math.max(...posValues.map(p => p[0]));
270
- const minY = Math.min(...posValues.map(p => p[1]));
271
- const maxY = Math.max(...posValues.map(p => p[1]));
272
-
273
- const rangeX = maxX - minX || 1;
274
- const rangeY = maxY - minY || 1;
275
-
276
- // Draw edges
277
- const edges = graph.edges();
278
- edges.forEach(([source, target]) => {
279
- const sourcePos = positions[source];
280
- const targetPos = positions[target];
281
-
282
- const x1 = margin + (sourcePos[0] - minX) / rangeX * scaleX;
283
- const y1 = margin + (sourcePos[1] - minY) / rangeY * scaleY;
284
- const x2 = margin + (targetPos[0] - minX) / rangeX * scaleX;
285
- const y2 = margin + (targetPos[1] - minY) / rangeY * scaleY;
286
-
287
- const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
288
- line.setAttribute('x1', x1);
289
- line.setAttribute('y1', y1);
290
- line.setAttribute('x2', x2);
291
- line.setAttribute('y2', y2);
292
- line.setAttribute('stroke', '#999');
293
- line.setAttribute('stroke-width', '2');
294
- svg.appendChild(line);
295
- });
296
-
297
- // Draw nodes
298
- nodes.forEach(node => {
299
- const pos = positions[node];
300
- const x = margin + (pos[0] - minX) / rangeX * scaleX;
301
- const y = margin + (pos[1] - minY) / rangeY * scaleY;
302
-
303
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
304
- circle.setAttribute('cx', x);
305
- circle.setAttribute('cy', y);
306
- circle.setAttribute('r', '8');
307
- circle.setAttribute('fill', '#673AB7');
308
- circle.setAttribute('stroke', '#333');
309
- circle.setAttribute('stroke-width', '2');
310
- svg.appendChild(circle);
311
-
312
- const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
313
- text.setAttribute('x', x);
314
- text.setAttribute('y', y + 4);
315
- text.setAttribute('text-anchor', 'middle');
316
- text.setAttribute('font-size', '11');
317
- text.setAttribute('fill', 'white');
318
- text.textContent = node;
319
- svg.appendChild(text);
320
- });
321
- }
322
-
323
- // Compute a distance dictionary for the Kamada-Kawai algorithm
324
- function computeDistances(graph) {
325
- const nodes = graph.nodes();
326
- const dist = {};
327
-
328
- // Initialize with direct connections
329
- nodes.forEach(source => {
330
- dist[source] = {};
331
- dist[source][source] = 0;
332
-
333
- nodes.forEach(target => {
334
- if (source !== target) {
335
- dist[source][target] = Infinity;
336
- }
337
- });
338
- });
339
-
340
- // Add edges
341
- graph.edges().forEach(([source, target]) => {
342
- dist[source][target] = 1;
343
- dist[target][source] = 1;
344
- });
345
-
346
- // Floyd-Warshall algorithm for all pairs shortest paths
347
- nodes.forEach(k => {
348
- nodes.forEach(i => {
349
- nodes.forEach(j => {
350
- if (dist[i][k] + dist[k][j] < dist[i][j]) {
351
- dist[i][j] = dist[i][k] + dist[k][j];
352
- }
353
- });
354
- });
355
- });
356
-
357
- return dist;
358
- }
359
-
360
- window.newGraph = function() {
361
- const numNodes = parseInt(document.getElementById('num-nodes').value);
362
- const graphType = document.getElementById('graph-type').value;
363
-
364
- currentGraph = generateGraph(graphType, numNodes);
365
-
366
- // Compute all-pairs shortest paths for distance dictionary
367
- distances = computeDistances(currentGraph);
368
-
369
- // Get initial circular layout as starting positions
370
- initialPositions = {};
371
- const angleStep = 2 * Math.PI / numNodes;
372
- currentGraph.nodes().forEach((node, i) => {
373
- const angle = i * angleStep;
374
- initialPositions[node] = [Math.cos(angle), Math.sin(angle)];
375
- });
376
-
377
- // Just visualize with initial positions
378
- visualizeGraph(currentGraph, initialPositions);
379
- };
380
-
381
- window.applyLayout = async function() {
382
- if(!currentGraph) return;
383
-
384
- const centerX = parseFloat(document.getElementById('center-x').value);
385
- const centerY = parseFloat(document.getElementById('center-y').value);
386
-
387
- const loadingDiv = document.getElementById('loading');
388
- loadingDiv.style.display = 'block';
389
-
390
- try {
391
- // Run Kamada-Kawai layout
392
- const positions = await kamadaKawaiLayout(
393
- currentGraph,
394
- distances,
395
- initialPositions,
396
- null,
397
- 1,
398
- [centerX, centerY],
399
- 2
400
- );
401
-
402
- visualizeGraph(currentGraph, positions);
403
- } catch (error) {
404
- console.error('Error in Kamada-Kawai layout:', error);
405
- } finally {
406
- loadingDiv.style.display = 'none';
407
- }
408
- };
409
-
410
- function setupControls() {
411
- const controls = ['num-nodes', 'center-x', 'center-y'];
412
- controls.forEach(id => {
413
- const slider = document.getElementById(id);
414
- const valueSpan = document.getElementById(id + '-value');
415
- slider.oninput = function() {
416
- valueSpan.textContent = this.value;
417
- };
418
- });
419
- }
420
-
421
- setupControls();
422
- newGraph();
423
- </script>
424
- </body>
425
- </html>
@@ -1,23 +0,0 @@
1
- // Helper file to make functions available globally for button onclick handlers
2
- import { randomLayout, circularLayout, shellLayout, springLayout, fruchtermanReingoldLayout,
3
- spectralLayout, spiralLayout, bipartiteLayout, multipartiteLayout, bfsLayout,
4
- planarLayout, kamadaKawaiLayout, forceatlas2Layout, arfLayout, rescaleLayout,
5
- rescaleLayoutDict } from './layout.js';
6
-
7
- // Make layout functions available globally
8
- window.randomLayout = randomLayout;
9
- window.circularLayout = circularLayout;
10
- window.shellLayout = shellLayout;
11
- window.springLayout = springLayout;
12
- window.fruchtermanReingoldLayout = fruchtermanReingoldLayout;
13
- window.spectralLayout = spectralLayout;
14
- window.spiralLayout = spiralLayout;
15
- window.bipartiteLayout = bipartiteLayout;
16
- window.multipartiteLayout = multipartiteLayout;
17
- window.bfsLayout = bfsLayout;
18
- window.planarLayout = planarLayout;
19
- window.kamadaKawaiLayout = kamadaKawaiLayout;
20
- window.forceatlas2Layout = forceatlas2Layout;
21
- window.arfLayout = arfLayout;
22
- window.rescaleLayout = rescaleLayout;
23
- window.rescaleLayoutDict = rescaleLayoutDict;