docs and refactor

docs/NETWORK_TREE.md

@@ -51,6 +51,8 @@ Let’s walk through setting up a device named `raspberrypi` to act as a network
 - Optionally assign a **Parent Node** (where this device connects to) and the **Relationship type** of the connection.  
   The `nic` relationship type can affect parent notifications — see the setting description and [Notifications documentation](./NOTIFICATIONS.md) for more.
 
+![Device details](./img/NETWORK_TREE/Network_Device_Details_Parent.png)  
+
 > [!NOTE]  
 > Only certain device types can act as network nodes:  
 > `AP`, `Firewall`, `Gateway`, `Hypervisor`, `PLC`, `Powerline`, `Router`, `Switch`, `USB LAN Adapter`, `USB WIFI Adapter`, `WLAN`  
@@ -60,7 +62,7 @@ Let’s walk through setting up a device named `raspberrypi` to act as a network
 
 ---
 
-### 2. Confirm It Appears as a Network Node
+### 2. Confirm The Device Appears as a Network Node
 
 You can confirm that `raspberrypi` now acts as a network device in two places:
 
@@ -83,7 +85,7 @@ You can confirm that `raspberrypi` now acts as a network device in two places:
 
 ![Assigned nodes](./img/NETWORK_TREE/Network_Assigned_Nodes.png)
 
-- Relationship lines may vary in color based on the selected Relationship type. These are editable on the device details page where you assign a parent node.
+- Relationship lines may vary in color based on the selected Relationship type. These are editable on the device details page where you can also assign a parent node.
 
 ![Hover detail](./img/NETWORK_TREE/Network_tree_setup_hover.png)
 

front/css/app.css

@@ -1671,7 +1671,7 @@ input[readonly] {
 /* AdminLTE overrides */
 #networkTree .box
 {
-    /* border-top:1px; */
+    border-width:1px;
     border-top-color:grey;
     padding:0px;
     margin:0px;
@@ -1707,6 +1707,7 @@ input[readonly] {
     opacity: 0.3;
     display: initial;    
     float: left;
+    width: 1em;
 }
 
 #networkTree
@@ -1791,6 +1792,14 @@ input[readonly] {
     box-shadow: var(--color-gray) 0px 0px 10px;
 }
 
+#networkTree .network-hw-icon
+{
+    position: absolute;
+    margin-left: -0.4em;
+    opacity: 0.3;
+    margin-top: 0.1em;
+}
+
 #networkTree .highlightedNode
 {
     /* border: solid; */
@@ -1821,6 +1830,11 @@ input[readonly] {
     /* margin-left: 0.2em; */
 }
 
+.networkTable
+{
+    padding-bottom: 1px;
+}
+
 .networkNodeTabHeaders .icon i
 {
     padding-top: 8px !important;

front/network.php

@@ -668,7 +668,7 @@ function initTree(myHierarchy)
 
       (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
 
-      portHtml = (port == "" || port == 0 || port == 'None' ) ? "" : port;
+      portHtml = (port == "" || port == 0 || port == 'None' ) ? " &nbsp " : port;
       
       // Build HTML for individual nodes in the network diagram        
       deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  
@@ -688,7 +688,7 @@ function initTree(myHierarchy)
       // generate +/- icon if node has children nodes
       collapseExpandHtml = nodeData.data.hasChildren ? 
                     `<div class="netCollapse" 
-                          style="font-size:${nodeHeightPx/2}px;top:${nodeHeightPx/4}px" 
+                          style="font-size:${nodeHeightPx/2}px;top:${Math.floor(nodeHeightPx / 4)}px" 
                           data-mytreepath="${nodeData.data.path}" 
                           data-mytreemac="${nodeData.data.mac}">
                       <i class="fa fa-${collapseExpandIcon} pointer"></i>
@@ -701,6 +701,10 @@ function initTree(myHierarchy)
       cssNodeType = nodeData.data.devIsNetworkNodeDynamic  ? 
                     " node-network-device " : " node-standard-device ";
 
+      networkHardwareIcon = nodeData.data.devIsNetworkNodeDynamic ? `<span class="network-hw-icon">
+                                <i class="fa-solid fa-hard-drive"></i>
+                            </span>` : "";
+
       const badgeConf = getStatusBadgeParts(nodeData.data.presentLastScan, nodeData.data.alertDown, nodeData.data.mac, statusText = '')
 
       return result = `<div 
@@ -725,6 +729,7 @@ function initTree(myHierarchy)
                           <div class="netNodeText">
                             <strong><span>${devicePort}  <span class="${badgeConf.cssText}">${deviceIcon}</span></span>
                               <span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
+                              ${networkHardwareIcon}
                             </strong>                            
                           </div>                          
                         </div>
@@ -743,11 +748,9 @@ function initTree(myHierarchy)
     idKey: "mac",
     hasFlatData: false,
     relationnalField: "children",
-    linkWidth: (nodeData) => 3,
+    linkWidth: (nodeData) => 2,
     linkColor: (nodeData) => {  
-
       relConf = getRelationshipConf(nodeData.data.relType)  
-
       return relConf.color;
     }
     // onNodeClick: (nodeData) => handleNodeClick(nodeData),
@@ -798,8 +801,6 @@ function initTab()
   
 }
 
-
-
 // ---------------------------------------------------------------------------
 function initSelectedNodeHighlighting()
 { 

front/pluginsCore.php

@@ -4,12 +4,6 @@
   require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
 ?>
 
-<!-- ----------------------------------------------------------------------- -->
-
-<!-- ----------------------------------------------------------------------- -->
- 
-
-
 <!-- Main content ---------------------------------------------------------- -->
 <section class="content">
   <div class="plugin-filters hidden" >
@@ -29,38 +23,56 @@
   
 </section>
 
-
-
 <script>
 
-// -----------------------------------------------------------------------------
+// Global variable to track the last MAC we initialized with
-// Initializes fields based on current MAC
+let lastMac = null;
-function initFields() {   
+let keepUpdating = true;
 
-  var urlParams = new URLSearchParams(window.location.search);
+function initMacFilter() {
-  mac = urlParams.get ('mac');  
+  // Parse the MAC parameter from the URL (e.g., ?mac=00:11:22:33:44:55)
+  const urlParams = new URLSearchParams(window.location.search);
+  const mac = urlParams.get('mac');
 
-  // if the current mac has changed, reinitialize the data
+  // Set the MAC in the input field
-  if(mac != undefined && $("#txtMacFilter").val() != mac)
+  $("#txtMacFilter").val(mac);
-  {    
-    
-    $("#txtMacFilter").val(mac);    
-
-    getData();
-  } 
 
+  return mac;  
 }
 
 // -----------------------------------------------------------------------------
-// Checking if current MAC has changed and triggering an updated if needed
+// Initializes the fields if the MAC in the URL is different or not yet set
+function initFields() {
+
+  // Get current value from the readonly text field
+  const currentVal = initMacFilter();
+
+  // If a MAC exists in the URL and it's either:
+  //  - the first time running (field shows default "--"), or
+  //  - different from what's already displayed
+  if (currentVal != "--" && currentVal !== lastMac) {
+
+
+    // Update the lastMac so we don't reload unnecessarily
+    lastMac = currentVal;
+
+    // Trigger data loading based on new MAC
+    getData();
+  } else if((currentVal === "--" || currentVal == null  ) && keepUpdating)
+  {
+    $("#txtMacFilter").val("--"); // need to set this as filters are using this later on
+    keepUpdating = false; // stop updates
+    getData();
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Recurring function to monitor the URL and reinitialize if needed
 function updater() {
+  initFields();
 
-  initFields()
+  // Run updater again after 500 milliseconds
-
+  setTimeout(updater, 500);
-  // loop
-  setTimeout(function() {
-    updater();
-  }, 500);   
 }
 
 // -----------------------------------------------------------------------------
@@ -243,6 +255,8 @@ pluginHistory = []
 
 function getData(){ 
   
+  console.log("Plugins getData called");  
+
   // Show the loading spinner while generating 
   showSpinner();
 
@@ -539,7 +553,12 @@ function deleteListed(plugPrefix, dbTable) {
 
 // show spinning icon
 showSpinner()
-getData()
+// Start updater on page load
-updater()
+$(document).ready(function () {
+  setTimeout(() => {
+    updater();  
+  }, 100);
+  
+});
 
 </script>