From 86e92f6111515ae9399febdb32c4aa4f77b83160 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sat, 8 Nov 2025 11:20:04 +0000
Subject: [PATCH] Improve protocol mappings UI with human-readable names

- Update displayProtocolMappings to show station/equipment/data type names from tag metadata
- Ensure tag metadata is loaded before displaying protocol mappings
- Update table headers to indicate Name & ID format
- Users now see descriptive names instead of raw IDs in the mappings table

Co-authored-by: openhands <openhands@all-hands.dev>
---
 src/dashboard/templates.py |  6 +++---
 static/protocol_mapping.js | 20 +++++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/dashboard/templates.py b/src/dashboard/templates.py
index 6ba230d..fe8e734 100644
--- a/src/dashboard/templates.py
+++ b/src/dashboard/templates.py
@@ -563,9 +563,9 @@ DASHBOARD_HTML = """
                                 <tr style="background: #f8f9fa;">
                                     <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">ID</th>
                                     <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Protocol</th>
-                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Station</th>
-                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Equipment</th>
-                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Data Type</th>
+                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Station (Name & ID)</th>
+                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Equipment (Name & ID)</th>
+                                    <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Data Type (Name & ID)</th>
                                     <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Protocol Address</th>
                                     <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Database Source</th>
                                     <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Actions</th>
diff --git a/static/protocol_mapping.js b/static/protocol_mapping.js
index c1da8d1..bae8ee0 100644
--- a/static/protocol_mapping.js
+++ b/static/protocol_mapping.js
@@ -111,6 +111,11 @@ function selectProtocol(protocol) {
 
 async function loadProtocolMappings() {
     try {
+        // Ensure tag metadata is loaded first
+        if (tagMetadata.stations.length === 0 || tagMetadata.dataTypes.length === 0) {
+            await loadTagMetadata();
+        }
+        
         const params = new URLSearchParams();
         if (currentProtocolFilter !== 'all') {
             params.append('protocol_type', currentProtocolFilter);
@@ -140,13 +145,22 @@ function displayProtocolMappings(mappings) {
     }
     
     mappings.forEach(mapping => {
+        // Look up human-readable names from tag metadata
+        const station = tagMetadata.stations.find(s => s.id === mapping.station_id);
+        const equipment = tagMetadata.equipment.find(e => e.id === mapping.equipment_id);
+        const dataType = tagMetadata.dataTypes.find(dt => dt.id === mapping.data_type_id);
+        
+        const stationDisplay = station ? `${station.name} (${station.id})` : (mapping.station_id || '-');
+        const equipmentDisplay = equipment ? `${equipment.name} (${equipment.id})` : (mapping.equipment_id || '-');
+        const dataTypeDisplay = dataType ? `${dataType.name} (${dataType.id})` : (mapping.data_type_id || '-');
+        
         const row = document.createElement('tr');
         row.innerHTML = `
             <td style="padding: 10px; border: 1px solid #ddd;">${mapping.id}</td>
             <td style="padding: 10px; border: 1px solid #ddd;">${mapping.protocol_type}</td>
-            <td style="padding: 10px; border: 1px solid #ddd;">${mapping.station_id || '-'}</td>
-            <td style="padding: 10px; border: 1px solid #ddd;">${mapping.equipment_id || '-'}</td>
-            <td style="padding: 10px; border: 1px solid #ddd;">${mapping.data_type_id || '-'}</td>
+            <td style="padding: 10px; border: 1px solid #ddd;">${stationDisplay}</td>
+            <td style="padding: 10px; border: 1px solid #ddd;">${equipmentDisplay}</td>
+            <td style="padding: 10px; border: 1px solid #ddd;">${dataTypeDisplay}</td>
             <td style="padding: 10px; border: 1px solid #ddd;">${mapping.protocol_address}</td>
             <td style="padding: 10px; border: 1px solid #ddd;">${mapping.db_source}</td>
             <td style="padding: 10px; border: 1px solid #ddd;">