From fdfbdd50ba81f8440dc66d15c11971a2dcee3bd4 Mon Sep 17 00:00:00 2001
From: Pablo Revilla <pablorevilla@gmail.com>
Date: Tue, 26 Aug 2025 13:23:55 -0700
Subject: [PATCH] Fixed bug with nodegraph.html it was not able to handle some
 characters on the name_long

---
 README.md                         |   4 +-
 meshview/templates/nodegraph.html | 291 ++++++++++++------------------
 2 files changed, 117 insertions(+), 178 deletions(-)

diff --git a/README.md b/README.md
index d3d352f..5a6f103 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ The project serves as a real-time monitoring and diagnostic tool for the Meshtas
 
 Samples of currently running instances:
 
-- https://meshview.bayme.sh   (SF Bay Area)
+- https://meshview.bayme.sh (SF Bay Area)
 - https://www.svme.sh/ (Sacramento Valley)
 - https://meshview.nyme.sh/   (New York)
 - https://map.wpamesh.net/ (Western Pennsylvania)
@@ -42,7 +42,7 @@ Samples of currently running instances:
 - https://socalmesh.w4hac.com  (Southern California)
 - https://meshview.lsinfra.de (Hessen - Germany)
 - https://map.nswmesh.au/ (Sydney - Australia)
-
+- https://meshview.pvmesh.org/ (Pioneer Valley, Massachusetts)
 ---
 
 ## Installing
diff --git a/meshview/templates/nodegraph.html b/meshview/templates/nodegraph.html
index 082bd5f..bb8e93c 100644
--- a/meshview/templates/nodegraph.html
+++ b/meshview/templates/nodegraph.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block head %}
-    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
 {% endblock %}
 
 {% block css %}
@@ -11,9 +11,8 @@
     border: 1px solid #ddd;
     background-color: #f8f9fa;
     border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
-
 .search-container {
     position: absolute;
     bottom: 100px;
@@ -23,7 +22,6 @@
     flex-direction: column;
     gap: 5px;
 }
-
 .search-container input,
 .search-container select,
 .search-container button {
@@ -31,45 +29,40 @@
     border-radius: 8px;
     border: 1px solid #ccc;
 }
-
 .search-container button {
     background-color: #007bff;
     color: white;
     cursor: pointer;
 }
-
 .search-container button:hover {
     background-color: #0056b3;
 }
-
 #node-info {
     position: absolute;
     bottom: 10px;
     right: 10px;
-    background-color: rgba(255, 255, 255, 0.95);
+    background-color: rgba(255,255,255,0.95);
     padding: 12px;
     border-radius: 8px;
     border: 1px solid #ccc;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
     font-size: 14px;
     color: #333;
     width: 260px;
     max-height: 250px;
     overflow-y: auto;
 }
-
 #legend {
     position: absolute;
     bottom: 10px;
     left: 10px;
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(255,255,255,0.9);
     padding: 10px;
     border-radius: 5px;
     border: 1px solid #ccc;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     font-size: 14px;
 }
-
 .legend-box {
     display: inline-block;
     width: 12px;
@@ -83,7 +76,7 @@
 <div id="mynetwork"></div>
 
 <div class="search-container">
-    <label for="channel-select" style="color: #333;">Channel:</label>
+    <label for="channel-select" style="color:#333;">Channel:</label>
     <select id="channel-select" onchange="filterByChannel()"></select>
     <input type="text" id="node-search" placeholder="Search node...">
     <button onclick="searchNode()">Search</button>
@@ -97,182 +90,128 @@
 </div>
 
 <div id="legend">
-    <div><span class="legend-box" style="background-color: #ff5733;"></span> <span style="color: black;">Traceroute</span></div>
-    <div><span class="legend-box" style="background-color: #3388ff;"></span> <span style="color: black;">Neighbor</span></div>
+    <div><span class="legend-box" style="background-color:#ff5733;"></span> Traceroute</div>
+    <div><span class="legend-box" style="background-color:#3388ff;"></span> Neighbor</div>
 </div>
 
-<script type="text/javascript">
-    const chart = echarts.init(document.getElementById('mynetwork'));
+<script>
+const chart = echarts.init(document.getElementById('mynetwork'));
 
-    const nodes = [
-    {% for node in nodes %}
-        {
-            name: `{{ node.node_id }}`,
-            value: `{{ node.long_name | tojson }}`,
-            symbol: 'circle',
-            symbolSize: 15,
-            itemStyle: { color: '#007bff', opacity: 1},
-            label: {
-                show: true,
-                position: 'right',
-                color: '#333',
-                fontSize: 12,
-                formatter: function(params) {
-                    return params.data.value.replace(/^\"(.*)\"$/, '$1');
-                }
-            },
-            long_name: `{{ node.long_name }}`,
-            short_name: `{{ node.short_name }}`,
-            role: `{{ node.role }}`,
-            hw_model: `{{ node.hw_model }}`,
-            channel: `{{ node.channel }}`
-        }{% if not loop.last %},{% endif %}
-    {% endfor %}
-    ];
+// --- Nodes ---
+const nodes = [
+{% for node in nodes %}
+{
+    name: "{{ node.node_id }}",                // node_id as string
+    value: {{ node.long_name | tojson }},     // display label
+    symbol: 'circle',
+    symbolSize: 15,
+    itemStyle: { color:'#007bff', opacity:1 },
+    label: { show:true, position:'right', color:'#333', fontSize:12, formatter: (p)=>p.data.value },
+    long_name: {{ node.long_name | tojson }},
+    short_name: {{ node.short_name | tojson }},
+    role: {{ node.role | tojson }},
+    hw_model: {{ node.hw_model | tojson }},
+    channel: {{ node.channel | tojson }}
+}{% if not loop.last %},{% endif %}
+{% endfor %}
+];
 
-    const edges = [
-    {% for edge in edges %}
-        {
-            source: `{{ edge.from }}`,
-            target: `{{ edge.to }}`,
-            originalColor: `{{ edge.originalColor }}`,
-            lineStyle: {
-                color: '#d3d3d3',
-                width: 2,
-                opacity: 1
-            }
-        }{% if not loop.last %},{% endif %}
-    {% endfor %}
-    ];
+// --- Edges ---
+const edges = [
+{% for edge in edges %}
+{
+    source: "{{ edge.from }}",   // edge source as string
+    target: "{{ edge.to }}",     // edge target as string
+    originalColor: "{{ edge.originalColor }}"
+}{% if not loop.last %},{% endif %}
+{% endfor %}
+];
 
-    let filteredNodes = [];
-    let filteredEdges = [];
-    let selectedChannel = 'LongFast';
-    let lastSelectedNode = null;
+let filteredNodes = [];
+let filteredEdges = [];
+let selectedChannel = 'LongFast';
+let lastSelectedNode = null;
 
-    function populateChannelDropdown() {
-        const channelSelect = document.getElementById('channel-select');
-        const uniqueChannels = [...new Set(nodes.map(n => n.channel).filter(Boolean))].sort();
+function populateChannelDropdown() {
+    const sel = document.getElementById('channel-select');
+    const unique = [...new Set(nodes.map(n=>n.channel).filter(Boolean))].sort();
+    unique.forEach(ch=>{
+        const opt = document.createElement('option');
+        opt.value=ch; opt.text=ch;
+        if(ch==='LongFast') opt.selected=true;
+        sel.appendChild(opt);
+    });
+    selectedChannel = sel.value;
+    filterByChannel();
+}
 
-        for (const ch of uniqueChannels) {
-            const option = document.createElement('option');
-            option.value = ch;
-            option.text = ch;
-            if (ch === 'LongFast') option.selected = true;
-            channelSelect.appendChild(option);
-        }
-
-        selectedChannel = channelSelect.value;
-        filterByChannel();
-    }
-
-    function filterByChannel() {
-        selectedChannel = document.getElementById('channel-select').value;
-        filteredNodes = nodes.filter(n => n.channel === selectedChannel);
-        const nodeSet = new Set(filteredNodes.map(n => n.name));
-        filteredEdges = edges.filter(e => nodeSet.has(e.source) && nodeSet.has(e.target));
-        lastSelectedNode = null;
-        updateChart();
-    }
-
-    function updateChart() {
-        const updatedNodes = filteredNodes.map(node => {
-            let opacity = 1;
-            let color = '#007bff';
-            if (lastSelectedNode) {
-                const connected = filteredEdges.some(e =>
-                    (e.source === node.name && e.target === lastSelectedNode) ||
-                    (e.target === node.name && e.source === lastSelectedNode)
-                );
-                if (node.name === lastSelectedNode) {
-                    color = '#ff8c00'; // selected node orange
-                    opacity = 1;
-                } else if (connected) {
-                    opacity = 1; // keep neighbors visible
-                } else {
-                    opacity = 0.4; // dim unrelated
-                }
-            }
-            return {
-                ...node,
-                itemStyle: { color, opacity }
-            };
-        });
-
-        const updatedEdges = filteredEdges.map(edge => {
-            let opacity = .1;
-            let width = 2;
-            if (lastSelectedNode) {
-                const connected = edge.source === lastSelectedNode || edge.target === lastSelectedNode;
-                opacity = connected ? 1 : 0.05;
-                width = connected ? 2 : 1;
-            }
-            return {
-                ...edge,
-                lineStyle: {
-                    color: edge.originalColor || '#d3d3d3',
-                    width,
-                    opacity
-                }
-            };
-        });
-
-        chart.setOption({
-            series: [{
-                type: 'graph',
-                layout: 'force',
-                data: updatedNodes,
-                links: updatedEdges,
-                roam: true,
-                force: { repulsion: 200, edgeLength: [80, 120] }
-            }]
-        });
-    }
-
-    chart.on('click', function (params) {
-        if (params.dataType === 'node') {
-            updateSelectedNode(params.data.name);
-        } else {
-            // background click -> reset
-            lastSelectedNode = null;
-            updateChart();
-            document.getElementById('node-long-name').innerText = '';
-            document.getElementById('node-short-name').innerText = '';
-            document.getElementById('node-role').innerText = '';
-            document.getElementById('node-hw-model').innerText = '';
+function filterByChannel() {
+    selectedChannel = document.getElementById('channel-select').value;
+    filteredNodes = nodes.filter(n=>n.channel===selectedChannel);
+    const nodeSet = new Set(filteredNodes.map(n=>n.name));
+    filteredEdges = edges.filter(e=>nodeSet.has(e.source) && nodeSet.has(e.target));
+    lastSelectedNode=null;
+    updateChart();
+}
+
+function updateChart() {
+    const updatedNodes = filteredNodes.map(node=>{
+        let opacity=1, color='#007bff';
+        if(lastSelectedNode){
+            const connected = filteredEdges.some(e=>
+                (e.source===node.name && e.target===lastSelectedNode) ||
+                (e.target===node.name && e.source===lastSelectedNode)
+            );
+            if(node.name===lastSelectedNode){ color='#ff8c00'; opacity=1; }
+            else if(connected) opacity=1;
+            else opacity=0.4;
         }
+        return {...node, itemStyle:{color,opacity}};
     });
 
-    function updateSelectedNode(selectedNode) {
-        lastSelectedNode = selectedNode;
-        updateChart();
-
-        const nodeData = filteredNodes.find(n => n.name === selectedNode);
-        if (nodeData) {
-            document.getElementById('node-long-name').innerText = nodeData.long_name;
-            document.getElementById('node-short-name').innerText = nodeData.short_name;
-            document.getElementById('node-role').innerText = nodeData.role;
-            document.getElementById('node-hw-model').innerText = nodeData.hw_model;
+    const updatedEdges = filteredEdges.map(edge=>{
+        let opacity=0.1, width=2;
+        if(lastSelectedNode){
+            const connected = edge.source===lastSelectedNode || edge.target===lastSelectedNode;
+            opacity=connected?1:0.05; width=connected?2:1;
         }
+        return {...edge, lineStyle:{color:edge.originalColor||'#d3d3d3', width, opacity}};
+    });
+
+    chart.setOption({series:[{type:'graph', layout:'force', data:updatedNodes, links:updatedEdges, roam:true, force:{repulsion:200, edgeLength:[80,120]}}]});
+}
+
+chart.on('click', function(params){
+    if(params.dataType==='node') updateSelectedNode(params.data.name);
+    else{
+        lastSelectedNode=null; updateChart();
+        document.getElementById('node-long-name').innerText='';
+        document.getElementById('node-short-name').innerText='';
+        document.getElementById('node-role').innerText='';
+        document.getElementById('node-hw-model').innerText='';
     }
+});
 
-    function searchNode() {
-        const query = document.getElementById('node-search').value.toLowerCase().trim();
-        if (!query) return;
-
-        const found = filteredNodes.find(node =>
-            node.name.toLowerCase().includes(query) ||
-            node.long_name.toLowerCase().includes(query) ||
-            node.short_name.toLowerCase().includes(query)
-        );
-
-        if (found) {
-            updateSelectedNode(found.name);
-        } else {
-            alert("Node not found in current channel!");
-        }
+function updateSelectedNode(selNode){
+    lastSelectedNode=selNode; updateChart();
+    const n = filteredNodes.find(x=>x.name===selNode);
+    if(n){
+        document.getElementById('node-long-name').innerText=n.long_name;
+        document.getElementById('node-short-name').innerText=n.short_name;
+        document.getElementById('node-role').innerText=n.role;
+        document.getElementById('node-hw-model').innerText=n.hw_model;
     }
+}
 
-    populateChannelDropdown();
+function searchNode(){
+    const q = document.getElementById('node-search').value.toLowerCase().trim();
+    if(!q) return;
+    const found = filteredNodes.find(n=>n.name.toLowerCase().includes(q) || n.long_name.toLowerCase().includes(q) || n.short_name.toLowerCase().includes(q));
+    if(found) updateSelectedNode(found.name);
+    else alert("Node not found in current channel!");
+}
+
+populateChannelDropdown();
+window.addEventListener('resize', ()=>chart.resize());
 </script>
 {% endblock %}