From 3de81f392aecab6124ad2d0b4a405daa11cc176b Mon Sep 17 00:00:00 2001
From: malice <matt@echo6.co>
Date: Mon, 18 May 2026 14:19:27 -0600
Subject: [PATCH] =?UTF-8?q?1b-9c:=20Events=20feed=20UX=20iteration=20?=
 =?UTF-8?q?=E2=80=94=20colors,=20popups,=20viewport=20filter,=20expandable?=
 =?UTF-8?q?=20rows=20(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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

* fix: remove isoformat() call on already-formatted time string

* feat: full events feed UX iteration

A. Color-code polygons by adapter with legend
B. Click popup on polygons with "View details" link
C. Viewport-driven spatial filter - pan/zoom updates table via HTMX
   Map never auto-fits after initial load (user controls viewport)
D. Expandable row details showing full event data payload

Changes:
- _events_rows.html: add data-event-id, expand button, detail row
- events_list.html: eventLayerGroup pattern, buildPopup, rebindEventLayers
  Fit to results button, expand/collapse handlers, CSS.escape for IDs

* fix: add programmaticMove flag to prevent viewport refresh loop

Suppress moveend handler during fitBounds/setView calls to prevent
feedback loop: fitBounds -> moveend -> applyViewportFilter -> HTMX
swap -> repeat.

* fix: map never auto-fits - user controls viewport

- Disable initial fitToAllLayers on page load
- Remove fitBounds/setView from row click handler
- Map only moves when user pans/zooms
- Table filters based on visible viewport

* fix: map shows all events always, only table filters

Map polygons are drawn once on load and never cleared/redrawn.
HTMX swap only updates the table, not the map layers.
User viewport is fully preserved.

* fix: use htmx.trigger instead of dispatchEvent for HTMX swap

dispatchEvent(submit) was triggering native form submission (full page
reload). htmx.trigger() properly triggers HTMX swap.

Also re-enable initial rebindEventLayers so polygons load on first render.

---------

Co-authored-by: Matt Johnson <mj@k7zvx.com>
---
 src/central/gui/templates/_events_rows.html |  25 +-
 src/central/gui/templates/events_list.html  | 489 +++++++++++---------
 tests/test_events_feed_frontend.py          |  53 +++
 3 files changed, 351 insertions(+), 216 deletions(-)

diff --git a/src/central/gui/templates/_events_rows.html b/src/central/gui/templates/_events_rows.html
index 231d7b6..c7f126c 100644
--- a/src/central/gui/templates/_events_rows.html
+++ b/src/central/gui/templates/_events_rows.html
@@ -8,6 +8,7 @@
 <table class="events-table">
     <thead>
         <tr>
+            <th style="width: 2rem;"></th>
             <th>Time</th>
             <th>Adapter</th>
             <th>Category</th>
@@ -17,14 +18,36 @@
     </thead>
     <tbody>
         {% for event in events %}
-        <tr data-row-idx="{{ loop.index0 }}"
+        <tr class="event-row" data-row-idx="{{ loop.index0 }}"
+            data-event-id="{{ event.id }}"
+            data-adapter="{{ event.adapter }}"
+            data-category="{{ event.category }}"
+            data-time="{{ event.time }}"
+            data-subject="{{ event.subject or '' }}"
             {% if event.geometry %}data-geometry='{{ event.geometry | tojson }}'{% endif %}>
+            <td><button type="button" class="expand-row" aria-label="Expand">&#9656;</button></td>
             <td>{{ event.time }}</td>
             <td>{{ event.adapter }}</td>
             <td>{{ event.category }}</td>
             <td>{{ event.geometry_summary }}</td>
             <td>{{ event.subject or '—' }}</td>
         </tr>
+        <tr class="event-detail" hidden>
+            <td colspan="6">
+                <dl class="event-detail-list">
+                    <dt>Event ID</dt>
+                    <dd><code>{{ event.id }}</code></dd>
+                    <dt>Received</dt>
+                    <dd>{{ event.received }}</dd>
+                    {% if event.regions %}
+                    <dt>Regions</dt>
+                    <dd>{{ event.regions | join(", ") }}</dd>
+                    {% endif %}
+                    <dt>Data</dt>
+                    <dd><pre class="event-data-pre">{{ event.data | tojson(indent=2) }}</pre></dd>
+                </dl>
+            </td>
+        </tr>
         {% endfor %}
     </tbody>
 </table>
diff --git a/src/central/gui/templates/events_list.html b/src/central/gui/templates/events_list.html
index f1fe5be..5c00b94 100644
--- a/src/central/gui/templates/events_list.html
+++ b/src/central/gui/templates/events_list.html
@@ -4,26 +4,88 @@
 
 {% 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-controls {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+    .map-legend {
+        display: flex;
+        gap: 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);
+    }
+    #fit-to-results {
+        padding: 0.25rem 0.75rem;
+        font-size: 0.85rem;
+    }
     .events-table {
         font-size: 0.9rem;
     }
     .events-table td {
         vertical-align: middle;
     }
-    .events-table tr:hover {
+    .events-table tr.event-row:hover {
         background-color: var(--pico-primary-focus);
         cursor: pointer;
     }
-    .events-table tr.highlighted {
+    .events-table tr.event-row.highlighted {
         background-color: var(--pico-primary-background);
     }
+    .expand-row {
+        background: none;
+        border: none;
+        padding: 0.25rem;
+        cursor: pointer;
+        font-size: 0.9rem;
+        color: var(--pico-color);
+    }
+    .expand-row:hover {
+        color: var(--pico-primary);
+    }
+    .event-detail td {
+        background-color: var(--pico-card-background-color);
+        padding: 1rem;
+    }
+    .event-detail-list {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5rem 1rem;
+        margin: 0;
+    }
+    .event-detail-list dt {
+        font-weight: 600;
+        color: var(--pico-muted-color);
+    }
+    .event-detail-list dd {
+        margin: 0;
+    }
+    .event-data-pre {
+        max-height: 300px;
+        overflow: auto;
+        font-size: 0.8rem;
+        background: var(--pico-code-background-color);
+        padding: 0.5rem;
+        border-radius: var(--pico-border-radius);
+        margin: 0;
+    }
     .filter-form .grid {
         margin-bottom: 0.5rem;
     }
@@ -33,20 +95,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 +115,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 +145,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,234 +161,271 @@
 </details>
 
 <div id="events-map"></div>
+<div class="map-controls">
+    <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>
+    <button type="button" id="fit-to-results" class="outline secondary">Fit map to results</button>
+</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,
         maxZoom: 18
     }).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);
+    // Layer group for event geometries
+    var eventLayerGroup = L.layerGroup().addTo(map);
+    var highlightedRow = null;
+    var highlightedLayer = null;
+    var isInitialLoad = true;
+    var programmaticMove = false;
 
     // 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) {
+    // Viewport-driven filter with debounce
+    var viewportDebounceTimer = null;
+
+    map.on("moveend", function() {
+        if (programmaticMove) {
+            programmaticMove = 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);
+        htmx.trigger(document.getElementById("filter-form"), "submit");
     }
 
-    // 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 }));
-    });
+    function buildPopup(row) {
+        var adapter = row.dataset.adapter || "";
+        var category = row.dataset.category || "";
+        var time = row.dataset.time ? new Date(row.dataset.time).toLocaleString() : "";
+        var subject = row.dataset.subject || "";
+        var eventId = row.dataset.eventId || "";
 
-    // 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))
-        );
-        filterRect = L.rectangle(bounds, { color: '#ff7800', weight: 2, fillOpacity: 0.1 });
-        drawnItems.addLayer(filterRect);
+        var html = "<strong>" + adapter + "</strong><br>" +
+            category + "<br>" +
+            "<small>" + time + "</small>";
+        if (subject) {
+            html += "<br><em>" + subject + "</em>";
+        }
+        html += '<br><a href="#" data-show-row="' + eventId + '">View details &#9662;</a>';
+        return html;
     }
 
-    // Function to add event geometries to map
-    function loadEventGeometries() {
-        // Clear existing event layers
-        Object.values(eventLayers).forEach(layer => map.removeLayer(layer));
-        Object.keys(eventLayers).forEach(key => delete eventLayers[key]);
+    function rebindEventLayers() {
+        eventLayerGroup.clearLayers();
 
-        const rows = document.querySelectorAll('#events-rows tr[data-geometry]');
-        const bounds = L.latLngBounds();
-        let hasGeometries = false;
+        var rows = document.querySelectorAll("#events-rows tr.event-row[data-geometry]");
 
-        rows.forEach((row, idx) => {
-            const geomStr = row.dataset.geometry;
-            if (!geomStr || geomStr === '') return;
+        rows.forEach(function(row) {
+            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 layer = L.geoJSON(geom, {
+                    style: {
+                        color: color,
+                        weight: 2,
+                        fillColor: color,
+                        fillOpacity: 0.25
+                    },
                     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;
-
-                // Extend bounds
-                try {
-                    bounds.extend(layer.getBounds());
-                    hasGeometries = true;
-                } catch (e) {
-                    // Point geometries might not have getBounds
-                    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.bindPopup(buildPopup(row));
+                layer.on("click", function() {
+                    highlightRow(row, layer, color);
                 });
+
+                layer.addTo(eventLayerGroup);
+
+                // Store reference for row highlighting
+                row._mapLayer = layer;
+                row._mapColor = color;
             } catch (e) {
-                console.error('Error parsing geometry:', e);
+                console.error("Error parsing geometry:", e);
             }
         });
-
-        // Fit map to all geometries
-        if (hasGeometries) {
-            map.fitBounds(bounds.pad(0.1));
-        }
     }
 
-    // Highlight a row and its geometry
-    function highlightRow(row, layer) {
+    function highlightRow(row, layer, originalColor) {
         // Reset previous highlight
         if (highlightedRow) {
-            highlightedRow.classList.remove('highlighted');
+            highlightedRow.classList.remove("highlighted");
         }
-        if (highlightedLayer) {
-            highlightedLayer.setStyle(defaultStyle);
+        if (highlightedLayer && highlightedLayer._originalColor) {
+            highlightedLayer.setStyle({
+                color: highlightedLayer._originalColor,
+                weight: 2,
+                fillColor: highlightedLayer._originalColor,
+                fillOpacity: 0.25
+            });
         }
 
         // Set new highlight
-        row.classList.add('highlighted');
+        row.classList.add("highlighted");
         highlightedRow = row;
 
         if (layer) {
-            layer.setStyle(highlightStyle);
+            layer._originalColor = originalColor;
+            layer.setStyle({
+                color: "#ff3333",
+                weight: 4,
+                fillColor: "#ff3333",
+                fillOpacity: 0.4
+            });
             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);
-                }
-            }
         }
     }
 
-    // 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 });
-                }
-            });
-            row.addEventListener('mouseleave', function() {
-                const layer = eventLayers[idx];
-                if (layer && layer !== highlightedLayer) {
-                    layer.setStyle(defaultStyle);
-                }
-            });
-        });
+    function fitToAllLayers() {
+        var layers = eventLayerGroup.getLayers();
+        if (layers.length === 0) return;
+        programmaticMove = true;
+        var group = L.featureGroup(layers);
+        map.fitBounds(group.getBounds(), { padding: [20, 20] });
     }
 
-    // Initial load
-    loadEventGeometries();
-    attachRowHandlers();
+    // Row click handler (event delegation)
+    document.addEventListener("click", function(e) {
+        // Expand/collapse handler
+        if (e.target.classList.contains("expand-row")) {
+            var row = e.target.closest("tr");
+            var detail = row.nextElementSibling;
+            if (detail && detail.classList.contains("event-detail")) {
+                detail.hidden = !detail.hidden;
+                e.target.innerHTML = detail.hidden ? "&#9656;" : "&#9662;";
+            }
+            return;
+        }
 
-    // Re-attach handlers after HTMX swap
-    document.body.addEventListener('htmx:afterSwap', function(evt) {
-        if (evt.detail.target.id === 'events-rows') {
-            loadEventGeometries();
-            attachRowHandlers();
+        // Popup "View details" link handler
+        if (e.target.matches("[data-show-row]")) {
+            e.preventDefault();
+            var eventId = e.target.dataset.showRow;
+            var targetRow = document.querySelector(
+                'tr[data-event-id="' + CSS.escape(eventId) + '"]'
+            );
+            if (!targetRow) return;
+            targetRow.scrollIntoView({ behavior: "smooth", block: "center" });
+            var detail = targetRow.nextElementSibling;
+            if (detail && detail.classList.contains("event-detail")) {
+                detail.hidden = false;
+                var button = targetRow.querySelector(".expand-row");
+                if (button) button.innerHTML = "&#9662;";
+            }
+            return;
+        }
+
+        // Row click to highlight (no auto-pan - user controls viewport)
+        var row = e.target.closest("tr.event-row");
+        if (row && row._mapLayer) {
+            highlightRow(row, row._mapLayer, row._mapColor);
+            // Map stays where user put it
+        }
+    });
+
+    // Row hover handlers (event delegation)
+    document.addEventListener("mouseenter", function(e) {
+        var row = e.target.closest && e.target.closest("tr.event-row");
+        if (row && row._mapLayer && row._mapLayer !== highlightedLayer) {
+            row._mapLayer.setStyle({
+                color: row._mapColor,
+                weight: 3,
+                fillColor: row._mapColor,
+                fillOpacity: 0.25
+            });
+        }
+    }, true);
+
+    document.addEventListener("mouseleave", function(e) {
+        var row = e.target.closest && e.target.closest("tr.event-row");
+        if (row && row._mapLayer && row._mapLayer !== highlightedLayer) {
+            row._mapLayer.setStyle({
+                color: row._mapColor,
+                weight: 2,
+                fillColor: row._mapColor,
+                fillOpacity: 0.25
+            });
+        }
+    }, true);
+
+    // Fit to results button
+    document.getElementById("fit-to-results").addEventListener("click", fitToAllLayers);
+
+    // Initial load - bind layers and fit bounds
+    rebindEventLayers(); // Initial load only
+    if (false) { // DISABLED: map never auto-fits
+        fitToAllLayers();
+        isInitialLoad = false;
+    }
+
+    // Re-bind layers after HTMX swap (but do NOT fit bounds)
+    document.body.addEventListener("htmx:afterSwap", function(evt) {
+        if (evt.detail.target.id === "events-rows") {
+            // rebindEventLayers(); // DISABLED: map shows all events, only table filters
+            // Do NOT call fitToAllLayers - preserve user viewport
         }
     });
 
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"