FE: network tree mobile screens work #1209

Signed-off-by: jokob-sk <jokob.sk@gmail.com>

docs/SYNOLOGY_GUIDE.md

@@ -32,31 +32,31 @@ The folders you are creating below will contain the configuration and the databa
 - Paste in the following template:
 
 
-```yaml
+  ```yaml
-services:
+  services:
-  netalertx:
+    netalertx:
-    container_name: netalertx
+      container_name: netalertx
-    # use the below line if you want to test the latest dev image
+      # use the below line if you want to test the latest dev image
-    # image: "ghcr.io/jokob-sk/netalertx-dev:latest"
+      # image: "ghcr.io/jokob-sk/netalertx-dev:latest"
-    image: "ghcr.io/jokob-sk/netalertx:latest"
+      image: "ghcr.io/jokob-sk/netalertx:latest"
-    network_mode: "host"
+      network_mode: "host"
-    restart: unless-stopped
+      restart: unless-stopped
-    cap_drop:       # Drop all capabilities for enhanced security
+      cap_drop:       # Drop all capabilities for enhanced security
-      - ALL
+        - ALL
-    cap_add:        # Re-add necessary capabilities
+      cap_add:        # Re-add necessary capabilities
-      - NET_RAW
+        - NET_RAW
-      - NET_ADMIN
+        - NET_ADMIN
-      - NET_BIND_SERVICE
+        - NET_BIND_SERVICE
-    volumes:
+      volumes:
-      - /app_storage/netalertx:/data
+        - /app_storage/netalertx:/data
-      # to sync with system time
+        # to sync with system time
-      - /etc/localtime:/etc/localtime:ro
+        - /etc/localtime:/etc/localtime:ro
-    tmpfs:
+      tmpfs:
-      # All writable runtime state resides under /tmp; comment out to persist logs between restarts
+        # All writable runtime state resides under /tmp; comment out to persist logs between restarts
-      - "/tmp:uid=20211,gid=20211,mode=1700,rw,noexec,nosuid,nodev,async,noatime,nodiratime"
+        - "/tmp:uid=20211,gid=20211,mode=1700,rw,noexec,nosuid,nodev,async,noatime,nodiratime"
-    environment:
+      environment:
-      - PORT=20211
+        - PORT=20211
-```
+  ```
 
   ![Project settings](./img/SYNOLOGY/07_Create_project.png)
 
@@ -64,10 +64,10 @@ services:
 
   - This is only an example, your paths will differ.
 
-```yaml
+  ```yaml
-volumes:
+  volumes:
-      - /volume1/app_storage/netalertx:/data
+        - /volume1/app_storage/netalertx:/data
-```
+  ```
 
   ![Adjusting docker-compose](./img/SYNOLOGY/08_Adjust_docker_compose_volumes.png)
 

front/css/app.css

@@ -1825,10 +1825,21 @@ input[readonly] {
 #networkTree
 {
     margin-left: 16px;
-    /* border: solid;
-    border-color:#606060;     */
     position: relative;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
 }
+
+#networkTree .node-inner {
+    font-size: clamp(12px, 1rem, 18px);
+}
+
+#networkTree .netNodeText strong,
+#networkTree .spanNetworkTree {
+    font-size: inherit;
+}
+
 #networkTree .netIcon
 {
     width: 25px;

front/network.php

@@ -445,8 +445,11 @@
       $('#showOfflineNumber').text(`(${offlineCount})`);
     }
 
-    // Now apply UI filter based on toggles
+    // Now apply UI filter based on toggles (always keep root)
     const filteredDevices = allDevices.filter(device => {
+      const isRoot = (device.devMac || '').toLowerCase() === 'internet';
+
+      if (isRoot) return true;
       if (!showArchived && parseInt(device.devIsArchived) === 1) return false;
       if (!showOffline && parseInt(device.devPresentLastScan) === 0) return false;
       return true;
@@ -569,6 +572,11 @@ function getChildren(node, list, path, visited = [])
 // ---------------------------------------------------------------------------
 function getHierarchy()
 {
+  // reset counters before rebuilding the hierarchy
+  leafNodesCount = 0;
+  visibleNodesCount = 0;
+  parentNodesCount = 0;
+
   let internetNode = null;
 
   for(i in deviceListGlobal)
@@ -709,18 +717,23 @@ function initTree(myHierarchy)
     // calculate the drawing area based on the tree width and available screen size
     let baseFontSize = parseFloat($('html').css('font-size'));
     let treeAreaHeight = ($(window).height() - 155); ;
+    let minNodeWidth = 60 // min safe node width not breaking the tree
 
     // calculate the font size of the leaf nodes to fit everything into the tree area
     leafNodesCount == 0 ? 1 : leafNodesCount;
 
     emSize = pxToEm((treeAreaHeight/(leafNodesCount)).toFixed(2));
 
-    let screenWidthEm = pxToEm($('.networkTable').width()-15);
+    // let screenWidthEm = pxToEm($('.networkTable').width()-15);
+    let minTreeWidthPx = parentNodesCount * minNodeWidth;
+    let actualWidthPx = $('.networkTable').width() - 15;
 
-    // init the drawing area size
+    let finalWidthPx = Math.max(actualWidthPx, minTreeWidthPx);
-    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`)
 
-    // handle canvas and node size if only a few nodes
+    // override original value
+    let screenWidthEm = pxToEm(finalWidthPx);
+
+        // handle canvas and node size if only a few nodes
     emSize > 1 ? emSize = 1 : emSize = emSize;
 
     let nodeHeightPx = emToPx(emSize*1);
@@ -728,6 +741,12 @@ function initTree(myHierarchy)
 
     // handle if only a few nodes
     nodeWidthPx > 160 ? nodeWidthPx = 160 : nodeWidthPx = nodeWidthPx;
+    if (nodeWidthPx < minNodeWidth) nodeWidthPx = minNodeWidth;  // minimum safe width
+
+    console.log("Calculated nodeWidthPx =", nodeWidthPx, "emSize =", emSize , " screenWidthEm:", screenWidthEm, " emToPx(screenWidthEm):" , emToPx(screenWidthEm));
+
+    // init the drawing area size
+    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${emToPx(screenWidthEm)}px`)
 
     console.log(Treeviz);