From 482b53404d61d9c82725758e8c1f7f8e0fb26f63 Mon Sep 17 00:00:00 2001
From: Matt Johnson <mj@k7zvx.com>
Date: Mon, 18 May 2026 17:31:36 +0000
Subject: [PATCH] feat: events feed UX iteration - colors, popups, viewport
 filter

A. Color-code polygons by adapter (NWS amber, FIRMS red, USGS violet)
B. Click popup on polygons showing time + adapter + category + subject
C. Map viewport drives spatial filter - pan/zoom updates table via HTMX
D. Add legend showing adapter color mapping
E. Remove draw-bbox control, region inputs now hidden (auto-managed)

Template changes:
- _events_rows.html: add data-adapter, data-category, data-time, data-subject
- events_list.html: ADAPTER_COLORS mapping, bindPopup, moveend handler

Test: verify template renders adapter/category/subject for JS consumption
---
 src/central/gui/templates/_events_rows.html |   4 +
 src/central/gui/templates/events_list.html  | 397 ++++++++++----------
 tests/test_events_feed_frontend.py          |  53 +++
 3 files changed, 256 insertions(+), 198 deletions(-)

diff --git a/src/central/gui/templates/_events_rows.html b/src/central/gui/templates/_events_rows.html
index 231d7b6..5d67093 100644
--- a/src/central/gui/templates/_events_rows.html
+++ b/src/central/gui/templates/_events_rows.html
@@ -18,6 +18,10 @@
     <tbody>
         {% for event in events %}
         <tr data-row-idx="{{ loop.index0 }}"
+            data-adapter="{{ event.adapter }}"
+            data-category="{{ event.category }}"
+            data-time="{{ event.time.isoformat() }}"
+            data-subject="{{ event.subject or '' }}"
             {% if event.geometry %}data-geometry='{{ event.geometry | tojson }}'{% endif %}>
             <td>{{ event.time }}</td>
             <td>{{ event.adapter }}</td>
diff --git a/src/central/gui/templates/events_list.html b/src/central/gui/templates/events_list.html
index f1fe5be..86b5a50 100644
--- a/src/central/gui/templates/events_list.html
+++ b/src/central/gui/templates/events_list.html
@@ -4,13 +4,29 @@
 
 {% block head %}
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
 <style>
     #events-map {
         height: 400px;
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
         border-radius: var(--pico-border-radius);
     }
+    .map-legend {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1rem;
+        font-size: 0.85rem;
+    }
+    .map-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+    .map-legend-swatch {
+        width: 16px;
+        height: 16px;
+        border-radius: 3px;
+        border: 1px solid rgba(0,0,0,0.2);
+    }
     .events-table {
         font-size: 0.9rem;
     }
@@ -33,20 +49,6 @@
     .filter-form input, .filter-form select {
         margin-bottom: 0.5rem;
     }
-    .region-inputs {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 0.5rem;
-    }
-    .region-inputs input {
-        font-size: 0.85rem;
-    }
-    .region-controls {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        margin-bottom: 0.5rem;
-    }
     .pagination-info {
         margin-top: 1rem;
         display: flex;
@@ -67,7 +69,7 @@
 
 <details open>
     <summary>Filters</summary>
-    <form class="filter-form" action="/events" method="get"
+    <form id="filter-form" class="filter-form" action="/events" method="get"
           hx-get="/events/rows" hx-target="#events-rows" hx-push-url="true">
 
         <div class="grid">
@@ -97,37 +99,11 @@
             </div>
         </div>
 
-        <div>
-            <label>Region (draw on map or enter coordinates)</label>
-            <div class="region-controls">
-                <button type="button" id="clear-region-btn" class="outline secondary" style="width: auto; padding: 0.25rem 0.75rem;">
-                    Clear Region
-                </button>
-                <small>Draw a rectangle on the map to filter by region</small>
-            </div>
-            <div class="region-inputs">
-                <div>
-                    <label for="region_north">N</label>
-                    <input type="number" id="region_north" name="region_north" step="0.0001" min="-90" max="90" readonly
-                           value="{{ filter_values.region_north }}">
-                </div>
-                <div>
-                    <label for="region_south">S</label>
-                    <input type="number" id="region_south" name="region_south" step="0.0001" min="-90" max="90" readonly
-                           value="{{ filter_values.region_south }}">
-                </div>
-                <div>
-                    <label for="region_east">E</label>
-                    <input type="number" id="region_east" name="region_east" step="0.0001" min="-180" max="180" readonly
-                           value="{{ filter_values.region_east }}">
-                </div>
-                <div>
-                    <label for="region_west">W</label>
-                    <input type="number" id="region_west" name="region_west" step="0.0001" min="-180" max="180" readonly
-                           value="{{ filter_values.region_west }}">
-                </div>
-            </div>
-        </div>
+        <!-- Hidden region inputs (managed by map viewport) -->
+        <input type="hidden" id="region_north" name="region_north" value="{{ filter_values.region_north }}">
+        <input type="hidden" id="region_south" name="region_south" value="{{ filter_values.region_south }}">
+        <input type="hidden" id="region_east" name="region_east" value="{{ filter_values.region_east }}">
+        <input type="hidden" id="region_west" name="region_west" value="{{ filter_values.region_west }}">
 
         <input type="hidden" name="limit" value="{{ filter_values.limit }}">
 
@@ -139,20 +115,44 @@
 </details>
 
 <div id="events-map"></div>
+<div class="map-legend">
+    <div class="map-legend-item">
+        <div class="map-legend-swatch" style="background-color: #f59e0b;"></div>
+        <span>NWS (Weather)</span>
+    </div>
+    <div class="map-legend-item">
+        <div class="map-legend-swatch" style="background-color: #dc2626;"></div>
+        <span>FIRMS (Fire)</span>
+    </div>
+    <div class="map-legend-item">
+        <div class="map-legend-swatch" style="background-color: #7c3aed;"></div>
+        <span>USGS (Quake)</span>
+    </div>
+</div>
 
 <div id="events-rows">
     {% include "_events_rows.html" %}
 </div>
 
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
 <script>
 (function() {
-    const tileUrl = {{ tile_url | tojson }};
-    const tileAttr = {{ tile_attribution | tojson }};
+    var tileUrl = {{ tile_url | tojson }};
+    var tileAttr = {{ tile_attribution | tojson }};
+
+    // Adapter color mapping
+    var ADAPTER_COLORS = {
+        "nws":        "#f59e0b",
+        "firms":      "#dc2626",
+        "usgs_quake": "#7c3aed"
+    };
+
+    function getAdapterColor(adapter) {
+        return ADAPTER_COLORS[adapter] || "#3388ff";
+    }
 
     // Initialize map
-    const map = L.map('events-map').setView([39, -98], 4);
+    var map = L.map("events-map").setView([39, -98], 4);
 
     L.tileLayer(tileUrl, {
         attribution: tileAttr,
@@ -160,217 +160,218 @@
     }).addTo(map);
 
     // Layer groups for event geometries
-    const eventLayers = {};
-    let highlightedRow = null;
-    let highlightedLayer = null;
-
-    // Styles
-    const defaultStyle = {
-        color: '#3388ff',
-        weight: 2,
-        fillOpacity: 0.2
-    };
-    const highlightStyle = {
-        color: '#ff3333',
-        weight: 4,
-        fillOpacity: 0.4
-    };
-
-    // Region filter rectangle
-    let filterRect = null;
-    const drawnItems = new L.FeatureGroup();
-    map.addLayer(drawnItems);
-
-    // Draw control for region filter
-    const drawControl = new L.Control.Draw({
-        draw: {
-            rectangle: { shapeOptions: { color: '#ff7800', weight: 2, fillOpacity: 0.1 } },
-            polyline: false,
-            polygon: false,
-            circle: false,
-            marker: false,
-            circlemarker: false
-        },
-        edit: {
-            featureGroup: drawnItems,
-            edit: false,
-            remove: false
-        }
-    });
-    map.addControl(drawControl);
+    var eventLayers = {};
+    var highlightedRow = null;
+    var highlightedLayer = null;
 
     // Region input elements
-    const northInput = document.getElementById('region_north');
-    const southInput = document.getElementById('region_south');
-    const eastInput = document.getElementById('region_east');
-    const westInput = document.getElementById('region_west');
+    var northInput = document.getElementById("region_north");
+    var southInput = document.getElementById("region_south");
+    var eastInput = document.getElementById("region_east");
+    var westInput = document.getElementById("region_west");
 
-    // Update inputs from rectangle
-    function updateRegionInputs(bounds) {
+    // Flag to distinguish programmatic vs user map moves
+    var programmaticMove = false;
+    var viewportDebounceTimer = null;
+    var isInitialLoad = true;
+
+    // Viewport-driven filter
+    map.on("moveend", function() {
+        if (programmaticMove) {
+            programmaticMove = false;
+            return;
+        }
+        if (isInitialLoad) {
+            isInitialLoad = false;
+            return;
+        }
+        if (viewportDebounceTimer) clearTimeout(viewportDebounceTimer);
+        viewportDebounceTimer = setTimeout(applyViewportFilter, 400);
+    });
+
+    function applyViewportFilter() {
+        var bounds = map.getBounds();
         northInput.value = bounds.getNorth().toFixed(4);
         southInput.value = bounds.getSouth().toFixed(4);
         eastInput.value = bounds.getEast().toFixed(4);
         westInput.value = bounds.getWest().toFixed(4);
-    }
-
-    // Handle new rectangle drawn
-    map.on(L.Draw.Event.CREATED, function(e) {
-        drawnItems.clearLayers();
-        filterRect = e.layer;
-        filterRect.setStyle({ color: '#ff7800', weight: 2, fillOpacity: 0.1 });
-        drawnItems.addLayer(filterRect);
-        updateRegionInputs(filterRect.getBounds());
-        // Auto-submit the form via HTMX
-        document.querySelector('.filter-form').dispatchEvent(new Event('submit', { bubbles: true }));
-    });
-
-    // Clear region button
-    document.getElementById('clear-region-btn').addEventListener('click', function() {
-        drawnItems.clearLayers();
-        filterRect = null;
-        northInput.value = '';
-        southInput.value = '';
-        eastInput.value = '';
-        westInput.value = '';
-        // Auto-submit to refresh
-        document.querySelector('.filter-form').dispatchEvent(new Event('submit', { bubbles: true }));
-    });
-
-    // If region values exist, show the filter rectangle
-    if (northInput.value && southInput.value && eastInput.value && westInput.value) {
-        const bounds = L.latLngBounds(
-            L.latLng(parseFloat(southInput.value), parseFloat(westInput.value)),
-            L.latLng(parseFloat(northInput.value), parseFloat(eastInput.value))
+        document.getElementById("filter-form").dispatchEvent(
+            new Event("submit", { bubbles: true })
         );
-        filterRect = L.rectangle(bounds, { color: '#ff7800', weight: 2, fillOpacity: 0.1 });
-        drawnItems.addLayer(filterRect);
     }
 
-    // Function to add event geometries to map
-    function loadEventGeometries() {
+    function loadEventGeometries(fitBounds) {
         // Clear existing event layers
-        Object.values(eventLayers).forEach(layer => map.removeLayer(layer));
-        Object.keys(eventLayers).forEach(key => delete eventLayers[key]);
+        for (var key in eventLayers) {
+            map.removeLayer(eventLayers[key].layer);
+            delete eventLayers[key];
+        }
 
-        const rows = document.querySelectorAll('#events-rows tr[data-geometry]');
-        const bounds = L.latLngBounds();
-        let hasGeometries = false;
+        var rows = document.querySelectorAll("#events-rows tr[data-geometry]");
+        var bounds = L.latLngBounds();
+        var hasGeometries = false;
 
-        rows.forEach((row, idx) => {
-            const geomStr = row.dataset.geometry;
-            if (!geomStr || geomStr === '') return;
+        rows.forEach(function(row, idx) {
+            var geomStr = row.dataset.geometry;
+            if (!geomStr || geomStr === "") return;
 
             try {
-                const geom = JSON.parse(geomStr);
+                var geom = JSON.parse(geomStr);
                 if (!geom) return;
 
-                const layer = L.geoJSON(geom, {
-                    style: defaultStyle,
+                var adapter = row.dataset.adapter || "";
+                var color = getAdapterColor(adapter);
+
+                var style = {
+                    color: color,
+                    weight: 2,
+                    fillColor: color,
+                    fillOpacity: 0.25
+                };
+
+                var layer = L.geoJSON(geom, {
+                    style: style,
                     pointToLayer: function(feature, latlng) {
                         return L.circleMarker(latlng, {
                             radius: 8,
-                            ...defaultStyle
+                            color: color,
+                            weight: 2,
+                            fillColor: color,
+                            fillOpacity: 0.25
                         });
                     }
                 });
 
-                layer.addTo(map);
-                eventLayers[idx] = layer;
+                // Bind popup with event details
+                var time = row.dataset.time ? new Date(row.dataset.time).toLocaleString() : "";
+                var category = row.dataset.category || "";
+                var subject = row.dataset.subject || "";
+                var popupContent = "<strong>" + adapter + "</strong><br>" +
+                    category + "<br>" +
+                    "<small>" + time + "</small>";
+                if (subject) {
+                    popupContent += "<br><em>" + subject + "</em>";
+                }
+                layer.bindPopup(popupContent);
+
+                layer.addTo(map);
+                eventLayers[idx] = { layer: layer, color: color };
 
-                // Extend bounds
                 try {
                     bounds.extend(layer.getBounds());
                     hasGeometries = true;
                 } catch (e) {
-                    // Point geometries might not have getBounds
-                    if (geom.type === 'Point' && geom.coordinates) {
+                    if (geom.type === "Point" && geom.coordinates) {
                         bounds.extend(L.latLng(geom.coordinates[1], geom.coordinates[0]));
                         hasGeometries = true;
                     }
                 }
 
-                // Click on geometry highlights row
-                layer.on('click', function() {
-                    highlightRow(row, layer);
+                layer.on("click", function(e) {
+                    highlightRow(row, eventLayers[idx]);
+                    L.DomEvent.stopPropagation(e);
                 });
             } catch (e) {
-                console.error('Error parsing geometry:', e);
+                console.error("Error parsing geometry:", e);
             }
         });
 
-        // Fit map to all geometries
-        if (hasGeometries) {
+        if (hasGeometries && fitBounds) {
+            programmaticMove = true;
             map.fitBounds(bounds.pad(0.1));
         }
     }
 
-    // Highlight a row and its geometry
-    function highlightRow(row, layer) {
-        // Reset previous highlight
+    function highlightRow(row, entry) {
         if (highlightedRow) {
-            highlightedRow.classList.remove('highlighted');
+            highlightedRow.classList.remove("highlighted");
         }
         if (highlightedLayer) {
-            highlightedLayer.setStyle(defaultStyle);
-        }
-
-        // Set new highlight
-        row.classList.add('highlighted');
-        highlightedRow = row;
-
-        if (layer) {
-            layer.setStyle(highlightStyle);
-            highlightedLayer = layer;
-            // Pan to geometry
-            try {
-                map.fitBounds(layer.getBounds().pad(0.2));
-            } catch (e) {
-                // For points
-                const geom = JSON.parse(row.dataset.geometry);
-                if (geom && geom.type === 'Point' && geom.coordinates) {
-                    map.setView([geom.coordinates[1], geom.coordinates[0]], 10);
+            for (var key in eventLayers) {
+                if (eventLayers[key].layer === highlightedLayer) {
+                    highlightedLayer.setStyle({
+                        color: eventLayers[key].color,
+                        weight: 2,
+                        fillColor: eventLayers[key].color,
+                        fillOpacity: 0.25
+                    });
+                    break;
                 }
             }
         }
+
+        row.classList.add("highlighted");
+        highlightedRow = row;
+
+        if (entry && entry.layer) {
+            entry.layer.setStyle({
+                color: "#ff3333",
+                weight: 4,
+                fillColor: "#ff3333",
+                fillOpacity: 0.4
+            });
+            highlightedLayer = entry.layer;
+        }
     }
 
-    // Row hover/click handlers
     function attachRowHandlers() {
-        const rows = document.querySelectorAll('#events-rows tr[data-row-idx]');
-        rows.forEach(row => {
-            const idx = parseInt(row.dataset.rowIdx);
-            row.addEventListener('click', function() {
-                const layer = eventLayers[idx];
-                highlightRow(row, layer);
-            });
-            row.addEventListener('mouseenter', function() {
-                const layer = eventLayers[idx];
-                if (layer && layer !== highlightedLayer) {
-                    layer.setStyle({ ...defaultStyle, weight: 3 });
+        var rows = document.querySelectorAll("#events-rows tr[data-row-idx]");
+        rows.forEach(function(row) {
+            var idx = parseInt(row.dataset.rowIdx);
+            row.addEventListener("click", function() {
+                var entry = eventLayers[idx];
+                if (entry) {
+                    highlightRow(row, entry);
+                    try {
+                        programmaticMove = true;
+                        map.fitBounds(entry.layer.getBounds().pad(0.2));
+                    } catch (e) {
+                        var geomStr = row.dataset.geometry;
+                        if (geomStr) {
+                            var geom = JSON.parse(geomStr);
+                            if (geom && geom.type === "Point" && geom.coordinates) {
+                                programmaticMove = true;
+                                map.setView([geom.coordinates[1], geom.coordinates[0]], 10);
+                            }
+                        }
+                    }
                 }
             });
-            row.addEventListener('mouseleave', function() {
-                const layer = eventLayers[idx];
-                if (layer && layer !== highlightedLayer) {
-                    layer.setStyle(defaultStyle);
+            row.addEventListener("mouseenter", function() {
+                var entry = eventLayers[idx];
+                if (entry && entry.layer !== highlightedLayer) {
+                    entry.layer.setStyle({
+                        color: entry.color,
+                        weight: 3,
+                        fillColor: entry.color,
+                        fillOpacity: 0.25
+                    });
+                }
+            });
+            row.addEventListener("mouseleave", function() {
+                var entry = eventLayers[idx];
+                if (entry && entry.layer !== highlightedLayer) {
+                    entry.layer.setStyle({
+                        color: entry.color,
+                        weight: 2,
+                        fillColor: entry.color,
+                        fillOpacity: 0.25
+                    });
                 }
             });
         });
     }
 
-    // Initial load
-    loadEventGeometries();
+    loadEventGeometries(true);
     attachRowHandlers();
 
-    // Re-attach handlers after HTMX swap
-    document.body.addEventListener('htmx:afterSwap', function(evt) {
-        if (evt.detail.target.id === 'events-rows') {
-            loadEventGeometries();
+    document.body.addEventListener("htmx:afterSwap", function(evt) {
+        if (evt.detail.target.id === "events-rows") {
+            loadEventGeometries(true);
             attachRowHandlers();
         }
     });
 
-    // Fix map rendering after container shows
     setTimeout(function() { map.invalidateSize(); }, 100);
 })();
 </script>
diff --git a/tests/test_events_feed_frontend.py b/tests/test_events_feed_frontend.py
index 305b660..2ec1700 100644
--- a/tests/test_events_feed_frontend.py
+++ b/tests/test_events_feed_frontend.py
@@ -631,3 +631,56 @@ class TestErrorSemantics:
         assert context["filter_error"] is not None
         assert "limit" in context["filter_error"].lower()
         assert context["events"] == []
+
+
+class TestEventRowDataAttributes:
+    """Test that _events_rows.html renders required data attributes."""
+
+    @pytest.mark.asyncio
+    async def test_row_renders_data_adapter_attribute(self):
+        """Event rows include data-adapter attribute for color coding."""
+        mock_request = MagicMock()
+        mock_request.state.operator = MagicMock(id=1, username="admin")
+        mock_request.state.csrf_token = "test_csrf"
+        mock_request.query_params = {}
+
+        mock_events = [
+            {
+                "id": "test1",
+                "time": datetime(2026, 5, 17, 12, 0, tzinfo=timezone.utc),
+                "received": datetime(2026, 5, 17, 12, 0, tzinfo=timezone.utc),
+                "adapter": "usgs_quake",
+                "category": "quake.event",
+                "subject": "M4.2 Earthquake",
+                "geometry": None,
+                "data": {},
+                "regions": [],
+            },
+        ]
+
+        mock_conn = AsyncMock()
+        mock_conn.fetch.return_value = mock_events
+        mock_conn.fetchrow.return_value = {
+            "map_tile_url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+            "map_attribution": "OpenStreetMap",
+        }
+
+        mock_pool = MagicMock()
+        mock_pool.acquire.return_value.__aenter__ = AsyncMock(return_value=mock_conn)
+        mock_pool.acquire.return_value.__aexit__ = AsyncMock(return_value=None)
+
+        mock_templates = MagicMock()
+        mock_templates.TemplateResponse.return_value = MagicMock(status_code=200)
+
+        with patch("central.gui.routes._get_templates", return_value=mock_templates):
+            with patch("central.gui.routes.get_pool", return_value=mock_pool):
+                result = await events_list(mock_request)
+
+        assert result.status_code == 200
+        mock_templates.TemplateResponse.assert_called_once()
+        context = mock_templates.TemplateResponse.call_args.kwargs.get("context")
+        # The template receives events with adapter field for data-adapter attribute
+        assert len(context["events"]) == 1
+        assert context["events"][0]["adapter"] == "usgs_quake"
+        assert context["events"][0]["category"] == "quake.event"
+        assert context["events"][0]["subject"] == "M4.2 Earthquake"