From 71ac5bb2644542bbf9f760127e0e79740adddb55 Mon Sep 17 00:00:00 2001
From: Simone Margaritelli <evilsocket@gmail.com>
Date: Fri, 9 Apr 2021 16:17:26 +0200
Subject: [PATCH] new: node context shows on click on the graphpage

---
 graphpage.html | 192 +++++++++++++++++++++++++++++--------------------
 1 file changed, 114 insertions(+), 78 deletions(-)
diff --git a/graphpage.html b/graphpage.html
index e2b9d505..8fe6210a 100644
--- a/graphpage.html
+++ b/graphpage.html
@@ -2,26 +2,31 @@
     <style> body {
         margin: 0;
     } </style>
+    <script src="//unpkg.com/jquery"></script>
     <script src="//unpkg.com/3d-force-graph"></script>
     <script src="//unpkg.com/three"></script>
     <script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>
     <script src="//unpkg.com/three-spritetext"></script>
 
     <style>
-        .node-label {
+        .node-div {
             font-size: 1rem;
             padding: 1px 4px;
             border-radius: 4px;
             background-color: rgba(0, 0, 0, 0.5);
             user-select: none;
         }
+
+        .node-data-div {
+            background-color: rgba(0, 0, 0, 0.9);
+        }
     </style>
 </head>
 
 <body>
 <div id="3d-graph"></div>
 
-<script>
+<script id="vars">
     const typeNodeColors = {
         'ble_server': '#0066ff',
 
@@ -44,8 +49,102 @@
         'gateway': '#006600'
     };
 
+    var targetNode = null;
+</script>
+
+<script id="functions">
+    function renderNodeHTML(node) {
+        const nodeDiv = document.createElement('div');
+        switch (node.type) {
+            case 'ssid':
+                nodeDiv.innerHTML = `<small>${node.entity}</small>`
+                break;
+
+            case 'access_point':
+                var ap = node.entity;
+                nodeDiv.innerHTML = `
+                        <center>
+                            <b>${ap.hostname}</b> (${ap.encryption})
+                            <br/>
+                            ${ap.mac}
+                            ${ap.vendor? '<br/>(' + ap.vendor + ')' : ''}
+                            ${ap.wps.length? '<br/>' + JSON.stringify(ap.wps) : ''}
+                        </center>`;
+                break;
+
+            case 'station':
+                var sta = node.entity;
+                nodeDiv.innerHTML = `
+                        <center>
+                            ${sta.mac}
+                            ${sta.vendor? '<br/>(' + sta.vendor + ')' : ''}
+                        </center>`;
+                break;
+
+            case 'ble_server':
+                var dev = node.entity;
+                nodeDiv.innerHTML = `
+                        <center>
+                            ${dev.mac}
+                            ${dev.vendor? '<br/>(' + dev.vendor + ')' : ''}
+                        </center>`;
+                break;
+
+            case 'endpoint':
+                var ip = node.entity;
+                nodeDiv.innerHTML = `
+                        <center>
+                            ${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
+                            ${ip.ipv4? ip.ipv4 + '<br/>' : ''}
+                            ${ip.ipv6? ip.ipv6 + '<br/>' : ''}
+                            <br/>
+                            ${ip.mac}
+                            ${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
+                            ${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
+                        </center>`;
+                break;
+
+            case 'gateway':
+                var ip = node.entity;
+                nodeDiv.innerHTML = `
+                        <center>
+                            ${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
+                            ${ip.ipv4? ip.ipv4 + '<br/>' : ''}
+                            ${ip.ipv6? ip.ipv6 + '<br/>' : ''}
+                            <br/>
+                            ${ip.mac}
+                            ${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
+                            ${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
+                        </center>`;
+                break;
+
+            default:
+                nodeDiv.innerHTML = `<b>${node.id}</b>`
+        }
+
+        nodeDiv.style.color = typeColors[node.type];
+        nodeDiv.className = 'node-div';
+
+        const dataDiv = document.createElement('div');
+
+        dataDiv.id = 'datadiv_' + node.id;
+        dataDiv.className = 'node-data-div';
+        dataDiv.style.visibility = 'hidden';
+        dataDiv.style.display = 'none';
+
+        dataDiv.innerHTML = '<br/><pre>' + node.type + ' ' + JSON.stringify(node.entity, null, 2) + '</pre>';
+
+        nodeDiv.appendChild(dataDiv);
+
+        return new THREE.CSS2DObject(nodeDiv);
+    }
+</script>
+
+<script id="graph">
+
     const Graph = ForceGraph3D({
-        extraRenderers: [new THREE.CSS2DRenderer()]
+        extraRenderers: [new THREE.CSS2DRenderer()],
+        controlType: 'orbit'
     })
     (document.getElementById('3d-graph'))
         .jsonUrl('bettergraph.json')
@@ -68,83 +167,20 @@
             Object.assign(sprite.position, middlePos);
         })
          */
-        .nodeThreeObject(node => {
-            const nodeEl = document.createElement('div');
-
-            switch (node.type) {
-                case 'ssid':
-                    nodeEl.innerHTML = `<small>${node.entity}</small>`
-                    break;
-
-                case 'access_point':
-                    var ap = node.entity;
-                    nodeEl.innerHTML = `
-                        <center>
-                            <b>${ap.hostname}</b> (${ap.encryption})
-                            <br/>
-                            ${ap.mac}
-                            ${ap.vendor? '<br/>(' + ap.vendor + ')' : ''}
-                            ${ap.wps.length? '<br/>' + JSON.stringify(ap.wps) : ''}
-                        </center>`;
-                    break;
-
-                case 'station':
-                    var sta = node.entity;
-                    nodeEl.innerHTML = `
-                        <center>
-                            ${sta.mac}
-                            ${sta.vendor? '<br/>(' + sta.vendor + ')' : ''}
-                        </center>`;
-                    break;
-
-                case 'ble_server':
-                    var dev = node.entity;
-                    nodeEl.innerHTML = `
-                        <center>
-                            ${dev.mac}
-                            ${dev.vendor? '<br/>(' + dev.vendor + ')' : ''}
-                        </center>`;
-                    break;
-
-                case 'endpoint':
-                    var ip = node.entity;
-                    nodeEl.innerHTML = `
-                        <center>
-                            ${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
-                            ${ip.ipv4? ip.ipv4 + '<br/>' : ''}
-                            ${ip.ipv6? ip.ipv6 + '<br/>' : ''}
-                            <br/>
-                            ${ip.mac}
-                            ${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
-                            ${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
-                        </center>`;
-                    break;
-
-                case 'gateway':
-                    var ip = node.entity;
-                    nodeEl.innerHTML = `
-                        <center>
-                            ${ip.hostname? '<b>' + ip.hostname + '</b><br/>' : ''}
-                            ${ip.ipv4? ip.ipv4 + '<br/>' : ''}
-                            ${ip.ipv6? ip.ipv6 + '<br/>' : ''}
-                            <br/>
-                            ${ip.mac}
-                            ${ip.vendor? '<br/>(' + ip.vendor + ')' : ''}
-                            ${ip.meta.values.length? '<br/>' + JSON.stringify(ip.meta.values) : ''}
-                        </center>`;
-                    break;
-
-                default:
-                    nodeEl.innerHTML = `<b>${node.id}</b>`
-            }
-
-            nodeEl.style.color = typeColors[node.type];
-            nodeEl.className = 'node-label';
-
-            return new THREE.CSS2DObject(nodeEl);
-        })
+        .nodeThreeObject(renderNodeHTML)
         .nodeThreeObjectExtend(true)
         .onNodeClick(node => {
+            if( targetNode != null ) {
+                const prev = document.getElementById('datadiv_' + targetNode.id);
+                prev.style.visibility = 'hidden';
+                prev.style.display = 'none';
+            }
+            targetNode = node;
+
+            const curr = document.getElementById('datadiv_' + targetNode.id);
+            curr.style.visibility = 'visible';
+            curr.style.display = 'block';
+
             // Aim at node from outside it
             const distance = 40;
             const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
