Merge pull request #1196 from skrashevich/feat-network-dot-enhancements

AlexxIT · web-flow · commit ba3485560208 · 2024-06-16T22:24:11.000+03:00
refactor(webui): enhance network visualization in network.html
diff --git a/internal/streams/dot.go b/internal/streams/dot.go
@@ -156,19 +156,20 @@ func (c *conn) host() (s string) {
 	return
 }
 
-func (c *conn) label() (s string) {
-	s = "format_name=" + c.FormatName
+func (c *conn) label() string {
+	var sb strings.Builder
+	sb.WriteString("format_name=" + c.FormatName)
 	if c.Protocol != "" {
-		s += "\nprotocol=" + c.Protocol
+		sb.WriteString("\nprotocol=" + c.Protocol)
 	}
 	if c.Source != "" {
-		s += "\nsource=" + c.Source
+		sb.WriteString("\nsource=" + c.Source)
 	}
 	if c.URL != "" {
-		s += "\nurl=" + c.URL
+		sb.WriteString("\nurl=" + c.URL)
 	}
 	if c.UserAgent != "" {
-		s += "\nuser_agent=" + c.UserAgent
+		sb.WriteString("\nuser_agent=" + c.UserAgent)
 	}
-	return
+	return sb.String()
 }
diff --git a/www/network.html b/www/network.html
@@ -18,17 +18,21 @@
             height: 100%;
             width: 100%;
         }
+
+        #network {
+            flex-grow: 1;
+        }
     </style>
 </head>
 <body>
-<script src="main.js"></script>
 <div id="network"></div>
+<script src="main.js"></script>
 <script>
     /* global vis */
-    window.addEventListener('load', async () => {
+    window.addEventListener('load', () => {
         const url = new URL('api/streams.dot' + location.search, location.href);
-        const r = await fetch(url, {cache: 'no-cache'});
-        const data = vis.parseDOTNetwork(await r.text());
+
+        const container = document.getElementById('network');
         const options = {
             edges: {
                 font: {align: 'middle'},
@@ -37,8 +41,40 @@
             nodes: {shape: 'box'},
             physics: false,
         };
-        new vis.Network(document.getElementById('network'), data, options);
+
+        let network;
+
+        async function update() {
+            try {
+                const response = await fetch(url, {cache: 'no-cache'});
+                const dotData = await response.text();
+                const data = vis.parseDOTNetwork(dotData);
+
+                if (!network) {
+                    network = new vis.Network(container, data, options);
+                    network.storePositions();
+                } else {
+                    const positions = network.getPositions();
+                    const viewPosition = network.getViewPosition();
+                    const scale = network.getScale();
+
+                    network.setData(data);
+
+                    for (const nodeId in positions) {
+                        network.moveNode(nodeId, positions[nodeId].x, positions[nodeId].y);
+                    }
+
+                    network.moveTo({position: viewPosition, scale: scale});
+                }
+            } catch (error) {
+                console.error('Error fetching or updating network data:', error);
+            }
+
+            setTimeout(update, 5000);
+        }
+
+        update();
     });
 </script>
 </body>
-</html>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -156,19 +156,20 @@ func (c *conn) host() (s string) {`
`156`	`156`	`return`
`157`	`157`	`}`
`158`	`158`
`159`		`-func (c *conn) label() (s string) {`
`160`		`- s = "format_name=" + c.FormatName`
	`159`	`+func (c *conn) label() string {`
	`160`	`+ var sb strings.Builder`
	`161`	`+ sb.WriteString("format_name=" + c.FormatName)`
`161`	`162`	`if c.Protocol != "" {`
`162`		`- s += "\nprotocol=" + c.Protocol`
	`163`	`+ sb.WriteString("\nprotocol=" + c.Protocol)`
`163`	`164`	`}`
`164`	`165`	`if c.Source != "" {`
`165`		`- s += "\nsource=" + c.Source`
	`166`	`+ sb.WriteString("\nsource=" + c.Source)`
`166`	`167`	`}`
`167`	`168`	`if c.URL != "" {`
`168`		`- s += "\nurl=" + c.URL`
	`169`	`+ sb.WriteString("\nurl=" + c.URL)`
`169`	`170`	`}`
`170`	`171`	`if c.UserAgent != "" {`
`171`		`- s += "\nuser_agent=" + c.UserAgent`
	`172`	`+ sb.WriteString("\nuser_agent=" + c.UserAgent)`
`172`	`173`	`}`
`173`		`- return`
	`174`	`+ return sb.String()`
`174`	`175`	`}`