Update static/js/pages/visual-route.js

static/js/pages/visual-route.js

@@ -33,14 +33,19 @@ document.addEventListener('DOMContentLoaded', function() {
             network.destroy();
             network = null;
         }
+
         fetch(graphUrl, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ ip_address: ipAddress })
         })
         .then(response => {
-            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            return response.json().then(data => {
-            return response.json();
+                if (!response.ok) {
+                    throw new Error(data.error || `HTTP error! Status: ${response.status}`);
+                }
+                return data;
+            });
         })
         .then(data => {
             loader.style.display = 'none';
@@ -56,23 +61,19 @@ document.addEventListener('DOMContentLoaded', function() {
         })
         .catch(error => {
             loader.style.display = 'none';
-            errorMessageContainer.textContent = `An unexpected error occurred: ${error.message}`;
+            errorMessageContainer.textContent = error.message;
             errorMessageContainer.style.display = 'block';
             console.error('Error:', error);
         });
     });
 
-function drawGraph(data) {
+    function drawGraph(data) {
         const pathCount = data.path_count || 1;
         const container = document.getElementById('bgprtv-mynetwork');
-    
         const baseHeight = 400; 
         const heightPerLane = 120;
-    
         const lanes = Math.ceil((pathCount - 1) / 2);
-    
         const newHeight = baseHeight + (lanes * heightPerLane);
-    
         container.style.height = `${Math.max(400, newHeight)}px`;
 
         allNodes = new vis.DataSet(data.nodes);
@@ -96,26 +97,25 @@ function drawGraph(data) {
         
         network = new vis.Network(networkContainer, {}, options);
         
-    activeCheckbox.checked = false;
+        if(activeCheckbox) activeCheckbox.checked = false;
-    allCommunitiesCheckbox.checked = true;
+        if(allCommunitiesCheckbox) allCommunitiesCheckbox.checked = true;
         filterControls.forEach(cb => { if (cb.value !== 'all' && cb.value !== 'active') cb.checked = false; });
         filterGraph();
-}
+    }
     
     function filterGraph() {
         if (!network) return;
 
-        const showOnlyActive = activeCheckbox.checked;
+        const showOnlyActive = activeCheckbox ? activeCheckbox.checked : false;
+        const showAllCommunities = allCommunitiesCheckbox ? allCommunitiesCheckbox.checked : true;
+        
         const selectedCategories = Array.from(filterControls)
             .filter(cb => cb.checked && cb.value !== 'active' && cb.value !== 'all')
             .map(cb => cb.value);
-        const showAllCommunities = allCommunitiesCheckbox.checked;
 
         const itemFilter = (item) => {
             const activeFilterPassed = !showOnlyActive || item.is_active;
-
             const categoryFilterPassed = showAllCommunities || selectedCategories.includes(item.path_category);
-            
             return item.path_category === 'global' || (activeFilterPassed && categoryFilterPassed);
         };
         
@@ -131,6 +131,7 @@ function drawGraph(data) {
         network.setData({ nodes: new vis.DataSet(filteredNodes), edges: new vis.DataSet(filteredEdges) });
     }
 
+    if(filterControls.length > 0) {
         filterControls.forEach(checkbox => {
             checkbox.addEventListener('change', function(e) {
                 const changedValue = e.target.value;
@@ -153,4 +154,5 @@ function drawGraph(data) {
                 filterGraph();
             });
         });
+    }
 });