From 6f5cf83a56c47b63a90465bc8c7b4f230c5deb1b Mon Sep 17 00:00:00 2001
From: Will Bradley <will@zyphon.com>
Date: Tue, 2 Dec 2025 15:38:55 -0800
Subject: [PATCH] show removed and properties properly

---
 web/app.js | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/app.js b/web/app.js
index 941c812..199571d 100644
--- a/web/app.js
+++ b/web/app.js
@@ -93,7 +93,7 @@ function diffStyle(feature) {
         };
     }
 
-    const isRemoved = feature.properties && feature.properties.removed === true;
+    const isRemoved = feature.properties && (feature.properties.removed === true || feature.properties.removed === 'True');
     return {
         color: isRemoved ? '#dc3545' : '#28a745',
         weight: 3,
@@ -191,21 +191,24 @@ function selectFeature(feature, layer, e) {
 
     // Create popup near the clicked location
     const props = feature.properties || {};
-    const isRemoved = props.removed === true;
+    const isRemoved = props.removed === true || props.removed === 'True';
     const isAccepted = acceptedFeatures.has(feature);
     const isRejected = rejectedFeatures.has(feature);
 
-    let html = '<div style="font-size: 12px;">';
-    html += `<div><strong>Status:</strong> ${isRemoved ? 'Removed' : 'Added/Modified'}</div>`;
+    let html = '<div style="font-size: 12px; max-height: 400px; overflow-y: auto;">';
+    html += `<div style="margin-bottom: 8px;"><strong>Status:</strong> ${isRemoved ? 'Removed' : 'Added/Modified'}</div>`;
 
-    if (props.name) {
-        html += `<div><strong>Name:</strong> ${props.name}</div>`;
-    }
-    if (props.highway) {
-        html += `<div><strong>Highway:</strong> ${props.highway}</div>`;
-    }
-    if (props.service) {
-        html += `<div><strong>Service:</strong> ${props.service}</div>`;
+    // Display all non-null properties
+    const displayProps = Object.entries(props)
+        .filter(([key, value]) => value !== null && value !== undefined && key !== 'removed')
+        .sort(([a], [b]) => a.localeCompare(b));
+
+    if (displayProps.length > 0) {
+        html += '<div style="font-size: 11px;">';
+        for (const [key, value] of displayProps) {
+            html += `<div style="margin: 2px 0;"><strong>${key}:</strong> ${value}</div>`;
+        }
+        html += '</div>';
     }
 
     if (isAccepted) {