Merge pull request 'feat(map): aircraft popup enrichment and emergency/MIL styling' (#35) from osint-dashboard/t_1d9c5839-osint-map-aircraft-popup-enrichment-emer into master

Reviewed-on: #35

app/static/index.html

@@ -236,6 +236,16 @@
             filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 1px 2px rgba(0,0,0,0.8));
         }
         .hdg-glyph svg { width: 100%; height: 100%; display: block; }
+        .hdg-emerg {
+            animation: emerg-pulse 1.15s ease-in-out infinite;
+        }
+        @keyframes emerg-pulse {
+            0%, 100% { filter: drop-shadow(0 0 4px #ff5d5d); }
+            50% { filter: drop-shadow(0 0 12px #ff5d5d) drop-shadow(0 0 18px #ff5d5d); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+            .hdg-emerg, .role-badge.emergency { animation: none; }
+        }
 
         /* ── Camera marker clusters (neon green, matches the dots) ──── */
         .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
@@ -334,6 +344,7 @@
         .lp-dot.news { background: var(--magenta); box-shadow: 0 0 7px var(--magenta); border-radius: 1px; transform: rotate(45deg); }
         .lp-dot.weather { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
         .lp-dot.flights { background: #7dd3fc; box-shadow: 0 0 7px #7dd3fc; }
+        .lp-dot.mil { background: #f472b6; box-shadow: 0 0 7px #f472b6; }
         .lp-dot.vessels { background: #2dd4bf; box-shadow: 0 0 7px #2dd4bf; }
         .lp-dot.radar { background: #38bdf8; box-shadow: 0 0 7px #38bdf8; }
         .lp-dot.thermal { background: #f97316; box-shadow: 0 0 7px #f97316; }
@@ -393,6 +404,10 @@
         .role-badge.civilian { color: #7dd3fc; border: 1px solid #38bdf8; background: rgba(56,189,248,0.1); }
         .role-badge.government { color: #facc15; border: 1px solid #facc15; background: rgba(250,204,21,0.12); }
         .role-badge.firefighter { color: #fb923c; border: 1px solid #fb923c; background: rgba(251,146,60,0.12); }
+        .role-badge.emergency {
+            color: #ff5d5d; border: 1px solid #ff5d5d; background: rgba(255,93,93,0.16);
+            animation: emerg-pulse 1.4s ease-in-out infinite;
+        }
         .blip-pop { min-width: 200px; max-width: 260px; }
         .blip-pop .blip-src { font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; }
         .blip-pop .blip-time { font-size: 0.7rem; color: var(--muted); font-family: 'Share Tech Mono', monospace; margin: 0.2rem 0 0.3rem; }
@@ -893,7 +908,11 @@
                                 <label class="lp-name"><input type="checkbox" id="lp-ac-on" checked onchange="toggleAircraft()"> <span class="lp-dot flights"></span> Aircraft</label>
                                 <span class="lp-count" id="lp-ac-count">0</span>
                             </div>
-                            <div class="lp-note">Magenta = military · orange = firefighting · else altitude. Click a plane for type / squawk / operator.</div>
+                            <div class="lp-row" id="lp-ac-mil-row" hidden>
+                                <label class="lp-name"><input type="checkbox" id="lp-ac-mil-on" onchange="toggleAircraftMil()"> <span class="lp-dot mil"></span> MIL</label>
+                                <span class="lp-count" id="lp-ac-mil-count"></span>
+                            </div>
+                            <div class="lp-note">Magenta = military · orange = firefighting · red = emergency (7700/7600/7500) · else altitude. Click a plane for type / squawk / operator.</div>
                         </div>
                         <div class="lp-layer">
                             <div class="lp-row">
@@ -1919,7 +1938,7 @@ let sentinelItemId = null, sentinelBounds = null;
 let wxAlertsGroup = null, wxAlertsOn = true;
 let perimGroup = null, perimOn = true;
 let incidentsGroup = null, incidentsOn = false;
-let acGroup = null, acOn = true;
+let acGroup = null, acOn = true, acMilOn = false, acMilSupported = false;
 let trainsGroup = null, trainsOn = true;
 let vesselsGroup = null, vesselsOn = false;
 let stormsGroup = null, stormsOn = true;
@@ -1950,6 +1969,14 @@ function sendLiveViewport() {
     if (!liveWs || liveWs.readyState !== 1 || !map) return;
     liveWs.send(JSON.stringify({ type: 'viewport', bbox: currentBBox() }));
 }
+function dropLivePoint(group, id) {
+    if (!group || !group._osintById || id == null) return;
+    const key = String(id);
+    const m = group._osintById.get(key);
+    if (!m) return;
+    group.removeLayer(m);
+    group._osintById.delete(key);
+}
 function upsertLivePoint(group, p, colorFn, feed) {
     if (!map || !p || p.id == null || p.lat == null || p.lon == null) return group;
     if (!group || !map.hasLayer(group) || !group._osintById) {
@@ -1960,7 +1987,7 @@ function upsertLivePoint(group, p, colorFn, feed) {
     let m = group._osintById.get(id);
     if (m) {
         m.setLatLng([p.lat, p.lon]);
-        if (feed) m.setIcon(feedIcon(feed, col, p.heading));
+        if (feed) m.setIcon(feedIcon(feed, col, p.heading, feedPulse(feed, p)));
         else if (m.setStyle) m.setStyle({ color: col, fillColor: col });
     } else {
         m = makePointMarker(p, colorFn, feed, pointCanvas());
@@ -1976,24 +2003,48 @@ function applyLiveMarker(kind, p) {
             return sog > 0.5 ? '#2dd4bf' : '#64748b';
         }, 'vessel');
     } else if (kind === 'adsb' && acOn && map && map.getZoom() > 3 && !dvrTs) {
+        if (!acVisible(p)) {
+            dropLivePoint(acGroup, p.id);
+            return;
+        }
         acGroup = upsertLivePoint(acGroup, p, q => acColor(q), 'ac');
     } else if (kind === 'geofence_alert') {
         showGeofenceToast(p);
     } else if (kind === 'fire_aircraft') {
         firefighterHex.add(String(p.aircraft_hex || ''));
         if (acOn && p.aircraft_lat != null) {
-            acGroup = upsertLivePoint(acGroup, {
+            const row = {
                 id: p.aircraft_hex, lat: p.aircraft_lat, lon: p.aircraft_lon,
                 label: p.label || p.aircraft_hex, extra: { type: p.aircraft_type, firefighter: true, hex: p.aircraft_hex, src: 'adsb.lol' },
-            }, q => acColor(q), 'ac');
+            };
+            if (!acVisible(row)) dropLivePoint(acGroup, row.id);
+            else acGroup = upsertLivePoint(acGroup, row, q => acColor(q), 'ac');
         }
     }
 }
+const EMERG_SQUAWK = new Set(['7700', '7600', '7500']);
+function acIsEmergency(p) {
+    const extra = (p && p.extra) || {};
+    const em = String(extra.emergency || '').toLowerCase();
+    if (em && em !== 'none') return true;
+    const sq = String(extra.squawk || '').replace(/\s/g, '');
+    return EMERG_SQUAWK.has(sq);
+}
+function acVisible(p) {
+    if (!acMilOn) return true;
+    return ((p && p.extra) || {}).role === 'military';
+}
+function noteMilSupport(pts) {
+    if (acMilSupported) return;
+    if (!Array.isArray(pts) || !pts.some(q => q && q.extra && q.extra.role)) return;
+    acMilSupported = true;
+    const row = document.getElementById('lp-ac-mil-row');
+    if (row) row.hidden = false;
+}
 function acColor(p) {
     const extra = p.extra || {};
     const t = String(extra.type || '').toUpperCase();
-    const em = String(extra.emergency || '').toLowerCase();
+    if (acIsEmergency(p)) return '#ff5d5d';
-    if (em && em !== 'none') return '#ff5d5d';
     if (extra.firefighter || firefighterHex.has(String(p.id)) || FF_ICAO.has(t)) return '#fb923c';
     if (extra.role === 'military') return '#f472b6';
     return altColor(extra.alt_baro);
@@ -2822,9 +2873,13 @@ function pointPopup(p) {
     const extra = p.extra || {};
     const src = extra.src || '';
     const role = extra.firefighter ? 'firefighter' : extra.role;
-    const badge = role
+    let badge = '';
-        ? ` <span class="role-badge ${esc(role)}">${esc(String(role).toUpperCase())}</span>`
+    if (src === 'adsb.lol' && acIsEmergency(p)) {
-        : '';
+        badge += ' <span class="role-badge emergency">EMERGENCY</span>';
+    }
+    if (role) {
+        badge += ` <span class="role-badge ${esc(role)}">${esc(String(role).toUpperCase())}</span>`;
+    }
     const rows = [];
     const add = (k, v) => {
         const val = _popVal(v);
@@ -2832,10 +2887,12 @@ function pointPopup(p) {
         rows.push(`<tr><td class="k">${esc(k)}</td><td>${esc(val)}</td></tr>`);
     };
     if (src === 'adsb.lol') {
+        add('callsign', p.label);
+        add('hex', extra.hex);
+        add('registration', extra.reg);
         add('type', extra.type);
         add('aircraft', extra.desc);
         add('operator', extra.ownOp);
-        add('reg', extra.reg);
         const alt = extra.alt_baro;
         add('alt', alt != null ? `${alt} ft` : null);
         add('vs', extra.vs != null ? `${extra.vs} fpm` : null);
@@ -2844,7 +2901,6 @@ function pointPopup(p) {
         add('squawk', extra.squawk);
         add('emergency', extra.emergency);
         add('class', extra.emitter);
-        add('hex', extra.hex);
     } else if (src === 'aisstream') {
         add('kind', extra.kind);
         add('flag', extra.country);
@@ -2943,20 +2999,24 @@ function sanitizeColor(c, fallback) {
     if (/^rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*(,\s*[\d.]+\s*)?\)$/.test(s)) return s;
     return fallback;
 }
-function feedIcon(feed, color, heading) {
+function feedPulse(feed, p) {
+    return feed === 'ac' && acIsEmergency(p);
+}
+function feedIcon(feed, color, heading, pulse) {
     // Normalize heading to [0,360) integer so the cache stays bounded.
     // Missing/empty/NaN heading -> -1 sentinel -> glyph rendered upright.
     const hnum = Number(heading);
     const h = (heading === null || heading === '' || heading === undefined || !Number.isFinite(hnum))
         ? -1
         : (Math.round(hnum % 360) + 360) % 360;
-    const key = `${feed}|${color}|${h}`;
+    const key = `${feed}|${color}|${h}|${pulse ? 1 : 0}`;
     let ic = feedIconCache.get(key);
     if (!ic) {
         const rot = h >= 0 ? `transform:rotate(${h}deg);` : '';
+        const pulseCls = pulse ? ' hdg-emerg' : '';
         ic = L.divIcon({
             className: '',
-            html: `<span class="hdg-marker"><span class="hdg-glyph hdg-${feed}" style="color:${color};${rot}">${FEED_GLYPHS[feed]}</span></span>`,
+            html: `<span class="hdg-marker${pulseCls}"><span class="hdg-glyph hdg-${feed}" style="color:${color};${rot}">${FEED_GLYPHS[feed]}</span></span>`,
             iconSize: [26, 26], iconAnchor: [13, 13],
         });
         feedIconCache.set(key, ic);
@@ -2969,7 +3029,7 @@ function makePointMarker(p, colorFn, feed, renderer) {
     let m;
     if (feed) {
         const heading = Number(p.heading);
-        const icon = feedIcon(feed, col, Number.isNaN(heading) ? null : heading);
+        const icon = feedIcon(feed, col, Number.isNaN(heading) ? null : heading, feedPulse(feed, p));
         m = L.marker([p.lat, p.lon], { icon });
     } else {
         m = L.circleMarker([p.lat, p.lon], {
@@ -3016,7 +3076,7 @@ function renderPoints(existing, points, colorFn, cluster, feed) {
         if (m) {
             m.setLatLng([p.lat, p.lon]);
             m._osintP = p;
-            if (feed) m.setIcon(feedIcon(feed, col, p.heading));
+            if (feed) m.setIcon(feedIcon(feed, col, p.heading, feedPulse(feed, p)));
             else if (m.setStyle) m.setStyle({ color: col, fillColor: col });
         } else {
             const nm = makePointMarker(p, colorFn, feed, renderer);
@@ -3286,6 +3346,10 @@ async function toggleAircraft() {
     if (acOn) await loadAircraft();
     else acGroup = dropLayer(acGroup);
 }
+function toggleAircraftMil() {
+    acMilOn = document.getElementById('lp-ac-mil-on').checked;
+    if (acOn) loadAircraft();
+}
 async function loadAircraft() {
     if (!map) return;
     if (map.getZoom() <= 3) {
@@ -3297,8 +3361,17 @@ async function loadAircraft() {
         const r = await overlayFetch(`${API}/api/aircraft?bbox=${currentBBox()}${dvrQs()}`);
         const pts = await r.json();
         if (req !== overlayReq.ac) return;
-        acGroup = renderPoints(acGroup, Array.isArray(pts) ? pts : [], p => acColor(p), true, 'ac');
+        const all = Array.isArray(pts) ? pts : [];
-        document.getElementById('lp-ac-count').textContent = (pts.length || 0).toLocaleString();
+        noteMilSupport(all);
+        const shown = acMilOn ? all.filter(acVisible) : all;
+        acGroup = renderPoints(acGroup, shown, p => acColor(p), true, 'ac');
+        document.getElementById('lp-ac-count').textContent = shown.length.toLocaleString();
+        const milEl = document.getElementById('lp-ac-mil-count');
+        if (milEl) {
+            milEl.textContent = acMilOn
+                ? shown.length.toLocaleString()
+                : String(all.filter(q => ((q.extra || {}).role === 'military')).length);
+        }
         addExtraAttrib('<a href="https://www.adsb.lol/docs/open-data/api">ADSB.lol</a> ODbL');
         addExtraAttrib('<a href="https://www.planespotters.net/photo/api">Photo © planespotters.net</a>');
     } catch (e) {

tests/test_aircraft_popup_frontend.py

@@ -0,0 +1,57 @@
+"""Aircraft popup enrichment + emergency/MIL layer contract (static HTML)."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+HTML = (ROOT / "app/static/index.html").read_text()
+
+
+def _fn(name: str, nxt: str) -> str:
+    return HTML.split(f"function {name}", 1)[1].split(f"function {nxt}", 1)[0]
+
+
+def test_popup_has_required_adsb_fields_and_photo():
+    js = _fn("pointPopup", "loadPlanePhoto")
+    for field in ("callsign", "hex", "registration", "type", "alt", "gs", "squawk"):
+        assert f"add('{field}'" in js
+    assert "class=\"ps-photo\"" in js or "class='ps-photo'" in js
+    assert "wikipedia" not in js.lower()
+    assert "ceo" not in js.lower()
+
+
+def test_emergency_badge_and_squawk_codes():
+    assert "role-badge emergency" in HTML
+    assert "hdg-emerg" in HTML
+    assert "EMERG_SQUAWK" in HTML
+    assert "['7700', '7600', '7500']" in HTML
+    emerg = HTML.split("function acIsEmergency", 1)[1].split("function acVisible", 1)[0]
+    assert "EMERG_SQUAWK.has(sq)" in emerg
+    color = HTML.split("function acColor", 1)[1].split("function connectLiveWs", 1)[0]
+    assert "acIsEmergency(p)" in color
+    assert "#ff5d5d" in color
+
+
+def test_mil_toggle_hidden_until_role_flag_and_never_hits_adsb_lol():
+    assert 'id="lp-ac-mil-row"' in HTML
+    assert 'id="lp-ac-mil-on"' in HTML
+    row = HTML.split('id="lp-ac-mil-row"', 1)[1].split(">", 1)[0]
+    assert "hidden" in row
+    on = HTML.split('id="lp-ac-mil-on"', 1)[1].split(">", 1)[0]
+    assert "checked" not in on
+    load = HTML.split("async function loadAircraft", 1)[1].split("async function toggleTrains", 1)[0]
+    assert "/api/aircraft?bbox=" in load
+    assert "api.adsb.lol" not in load
+    assert "noteMilSupport" in load
+    assert "acMilOn" in load
+    note = HTML.split("function noteMilSupport", 1)[1].split("function acColor", 1)[0]
+    assert "extra.role" in note
+    assert "lp-ac-mil-row" in note
+    assert "hidden = false" in note
+
+
+def test_planespotters_lazy_photo_still_wired():
+    assert "function loadPlanePhoto" in HTML
+    assert "/api/aircraft/photo?" in HTML
+    assert "map.on('popupopen', (e) => { loadPlanePhoto(e.popup); });" in HTML