From ff6b318fc976980e5632fd058934c0e16af5d3df Mon Sep 17 00:00:00 2001
From: Jonathan Hanson <triplepoint@polyinfinite.net>
Date: Wed, 26 Mar 2025 03:08:44 -0700
Subject: [PATCH] style changes to the zigbee graph, without touching the
 physics (#24697)

---
 .../zha/zha-network-visualization-page.ts     | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index adf0cd4dd8..f14e8f93b7 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -235,23 +235,27 @@ export class ZHANetworkVisualizationPage extends LitElement {
         label: this._buildLabel(device),
         shape: this._getShape(device),
         mass: this._getMass(device),
+        fixed: device.device_type === "Coordinator",
         color: {
           background: device.available ? "#66FF99" : "#FF9999",
         },
       });
+
       if (device.neighbors && device.neighbors.length > 0) {
         device.neighbors.forEach((neighbor) => {
           const idx = edges.findIndex(
             (e) => device.ieee === e.to && neighbor.ieee === e.from
           );
           if (idx === -1) {
+            const edge_options = this._getEdgeOptions(parseInt(neighbor.lqi));
             edges.push({
               from: device.ieee,
               to: neighbor.ieee,
               label: neighbor.lqi + "",
-              color: this._getLQI(parseInt(neighbor.lqi)).color,
-              width: this._getLQI(parseInt(neighbor.lqi)).width,
-              length: 2000 - 4 * parseInt(neighbor.lqi),
+              color: edge_options.color,
+              width: edge_options.width,
+              length: edge_options.length,
+              physics: edge_options.physics,
               arrows: {
                 from: {
                   enabled: neighbor.relationship !== "Child",
@@ -260,16 +264,14 @@ export class ZHANetworkVisualizationPage extends LitElement {
               dashes: neighbor.relationship !== "Child",
             });
           } else {
-            edges[idx].color = this._getLQI(
-              (parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2
-            ).color;
-            edges[idx].width = this._getLQI(
-              (parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2
-            ).width;
-            edges[idx].length =
-              2000 -
-              6 * ((parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2);
-            edges[idx].label += "/" + neighbor.lqi;
+            const edge_options = this._getEdgeOptions(
+              Math.min(parseInt(edges[idx].label!), parseInt(neighbor.lqi))
+            );
+            edges[idx].label += " & " + neighbor.lqi;
+            edges[idx].color = edge_options.color;
+            edges[idx].width = edge_options.width;
+            edges[idx].length = edge_options.length;
+            edges[idx].physics = edge_options.physics;
             delete edges[idx].arrows;
             delete edges[idx].dashes;
           }
@@ -280,17 +282,30 @@ export class ZHANetworkVisualizationPage extends LitElement {
     this._network?.setData({ nodes: this._nodes, edges: edges });
   }
 
-  private _getLQI(lqi: number): EdgeOptions {
+  private _getEdgeOptions(lqi: number): EdgeOptions {
+    const length = 2000 - 4 * lqi;
     if (lqi > 192) {
-      return { color: { color: "#17ab00", highlight: "#17ab00" }, width: 4 };
+      return {
+        color: { color: "#17ab00", highlight: "#17ab00" },
+        width: lqi / 20,
+        length: length,
+        physics: false,
+      };
     }
     if (lqi > 128) {
-      return { color: { color: "#e6b402", highlight: "#e6b402" }, width: 3 };
+      return {
+        color: { color: "#e6b402", highlight: "#e6b402" },
+        width: 9,
+        length: length,
+        physics: false,
+      };
     }
-    if (lqi > 80) {
-      return { color: { color: "#fc4c4c", highlight: "#fc4c4c" }, width: 2 };
-    }
-    return { color: { color: "#bfbfbf", highlight: "#bfbfbf" }, width: 1 };
+    return {
+      color: { color: "#bfbfbf", highlight: "#bfbfbf" },
+      width: 1,
+      length: length,
+      physics: false,
+    };
   }
 
   private _getMass(device: ZHADevice): number {
@@ -418,16 +433,8 @@ export class ZHANetworkVisualizationPage extends LitElement {
 
     this._network!.setOptions(
       this._enablePhysics
-        ? {
-            physics: {
-              barnesHut: {
-                springConstant: 0,
-                avoidOverlap: 10,
-                damping: 0.09,
-              },
-            },
-          }
-        : { physics: false }
+        ? { physics: { enabled: true } }
+        : { physics: { enabled: false } }
     );
   }