New optional layouts

filipsPL · filipsPL · commit 9068fcc3ede5 · 2025-01-31T19:09:09.000+01:00
diff --git a/README.md b/README.md
@@ -62,6 +62,7 @@ Set of tools for processing, storing, and visualizing data from Meshtastic mesh
   - **Traceroute** - showing nodes from traceroute requests 🆕
   - **Physical sender** - showing `sender` and `to` of messages passed through the network *(prototype)*
   - **Neighbors** - showing connections reported by nodes as `neighbors` *(early prototype)*
+- Three layouts: Cose-Bilkent, Circle, and Concentric
 
 ### 4. Auxiliary script to dump and copy data (`cron-task.sh`)
 - to be run from cron
diff --git a/webpage/index.html b/webpage/index.html
@@ -31,7 +31,7 @@
 </head>
 
 <body>
-    <strong>Map of mesh node connections.</strong> Updated: <span id="whenupdated"></span>
+    <strong>Map of mesh node connections.</strong> Updated: <span id="whenupdated"></span> | <A href="https://github.com/filipsPL/meshtastic-network-visualization/">GitHub</A>
     <div class="controls">
         <select id="fileSelect">
             <option value="data/cytoscape_traceroutes_1h.json">🚇  Traceroutes :: 1 hour</option>
@@ -50,12 +50,20 @@
             <option value="data/cytoscape_neighbors_3h.json">🔗 Neighbors :: 3 hours</option>
             <option value="data/cytoscape_neighbors_24h.json">🔗 Neighbors :: 24 hours</option>
         </select>
+        
+        <select id="layoutSelect">
+            <option value="cose-bilkent">Cose-Bilkent Layout</option>
+            <option value="circle">Circle Layout</option>
+            <option value="concentric">Concentric Layout</option>
+        </select>
     </div>
     <div id="cy"></div>
     <script>
         let cy; // Define cy in global scope
+        let currentFilename; // Store the current filename
 
         function loadData(filename) {
+            currentFilename = filename; // Store the current filename
             fetch(filename)
                 .then(response => {
                     if (!response.ok) {
@@ -95,6 +103,42 @@
                         cy.destroy();
                     }
 
+                    // Determine layout based on dropdown selection
+                    const layoutType = document.getElementById('layoutSelect').value;
+                    let layoutConfig;
+                    switch(layoutType) {
+                        case 'cose-bilkent':
+                            layoutConfig = {
+                                name: "cose-bilkent",
+                                animate: false,
+                                idealEdgeLength: 100,
+                                randomize: true,
+                                nodeRepulsion: 7000,
+                                edgeElasticity: 0.45,
+                                nestingFactor: 10.1,
+                                numIter: 30000,
+                                gravity: 0.25,
+                                tile: true
+                            };
+                            break;
+                        case 'concentric':
+                            layoutConfig = {
+                                name: 'concentric',
+                                minNodeSpacing: 50,
+                                concentric: function(node) {
+                                    return node.data('connections');
+                                },
+                                levelWidth: function() {
+                                    return 2;
+                                }
+                            };
+                            break;
+                        default:
+                            layoutConfig = {
+                                name: 'circle'
+                            };
+                    }
+
                     // Initialize Cytoscape.js
                     cy = cytoscape({
                         container: document.getElementById('cy'),
@@ -114,9 +158,7 @@
                                     'background-color': 'mapData(connections, 1, 10, #d2dbfa, #003aff)',
                                     'shape': 'round-rectangle'
                                 }
-
                             },
-
                             {
                                 selector: 'node[role=2]',
                                 style: {
@@ -144,7 +186,6 @@
                                     'content': (ele) => `[RPT] ${ele.data('label')}`
                                 }
                             },
-
                             {
                                 selector: 'edge',
                                 style: {
@@ -159,18 +200,7 @@
                                 }
                             }
                         ],
-                        layout: {
-                            name: "cose-bilkent",
-                            animate: false,
-                            idealEdgeLength: 100,
-                            randomize: true,
-                            nodeRepulsion: 7000,
-                            edgeElasticity: 0.45,
-                            nestingFactor: 10.1,
-                            numIter: 30000,
-                            gravity: 0.25,
-                            tile: true
-                        }
+                        layout: layoutConfig
                     });
                 })
                 .catch(error => {
@@ -193,11 +223,19 @@
                 });
         }
 
-        // Add event listener for dropdown changes
+        // Add event listener for data file dropdown changes
         document.getElementById('fileSelect').addEventListener('change', function () {
             loadData(this.value);
         });
 
+        // Add event listener for layout dropdown changes
+        document.getElementById('layoutSelect').addEventListener('change', function () {
+            // Reload the current data with the new layout
+            if (currentFilename) {
+                loadData(currentFilename);
+            }
+        });
+
         // Load initial data
         loadData(document.getElementById('fileSelect').value);
     </script>
