/* ============================================================
Pantalla — Mapa con Pulso integrado
Tres layouts vía Tweak `pulsoLayout`:
• side — panel lateral derecho (resultados verticales)
• floating — tarjeta compacta flotante sobre el mapa
• bottom — barra inferior con timeline horizontal
Sin placa: las tres comparten panel KPI + lista de nodos.
============================================================ */
const MapaScreen = ({ plate, onSearch, onNavigate, pulsoLayout = "side", onRegister, onVerNodo }) => {
const [pinNode, setPinNode] = React.useState(null);
React.useEffect(() => { if (plate) setPinNode(null); }, [plate]);
const [quickQuery, setQuickQuery] = React.useState("");
const [quickError, setQuickError] = React.useState(null);
const [notFoundPlaca, setNotFoundPlaca] = React.useState("");
const [similares, setSimilares] = React.useState([]); // lecturas OCR confundibles que existen
const [detallesOpen, setDetallesOpen] = React.useState(false);
// Flash EN VIVO: cuando el auto-refresh trae una captura nueva (ts mayor) de la MISMA placa,
// anunciar "Nueva captura · [nodo]". El mapa ya re-enfoca solo vía focusNodeId.
const [liveFlash, setLiveFlash] = React.useState(null);
const liveRef = React.useRef({ placa: null, ts: 0 });
React.useEffect(() => {
if (!plate || !plate.capturas || !plate.capturas.length) { liveRef.current = { placa: null, ts: 0 }; return; }
const placa = window.SONAR_normalizePlate(plate.placa);
const last = plate.capturas[plate.capturas.length - 1];
const ts = Date.parse(last.ts) || 0;
if (liveRef.current.placa !== placa) { liveRef.current = { placa, ts }; return; } // placa nueva: baseline, sin flash
if (ts > liveRef.current.ts) {
liveRef.current = { placa, ts };
setLiveFlash({ nodo: window.SONAR_findNode(last.nodo), ts: last.ts });
}
}, [plate]);
React.useEffect(() => {
if (!liveFlash) return;
const id = setTimeout(() => setLiveFlash(null), 6000);
return () => clearTimeout(id);
}, [liveFlash]);
const nodes = window.SONAR_NODES;
// Inventario de la red (todo dato real). Las fronteras no cuentan como "red de detección".
const camaras = nodes.filter(n => n.kind === "camara");
const puestos = nodes.filter(n => n.kind === "puesto");
const fronteras = nodes.filter(n => n.kind === "frontera");
const red = nodes.filter(n => n.kind !== "frontera"); // cámaras + puestos
const activos = red.filter(n => n.status === "active").length;
const conAlerta = red.filter(n => n.status === "alert").length;
const inactivos = red.filter(n => n.status === "inactive").length;
const capturasH = red.reduce((s, n) => s + (n.activity || 0), 0);
const doQuickSearch = async (e, explicit) => {
if (e) e.preventDefault();
const q = explicit != null ? explicit : quickQuery;
if (!q || !q.trim()) return;
const norm = window.SONAR_normalizePlate(q);
setQuickError(null);
setNotFoundPlaca("");
const found = await window.SonarAPI.getPlate(q);
if (found) {
setSimilares((found.similares || []).filter(s => s.placa !== norm));
onSearch(found);
setQuickQuery("");
return;
}
// No encontrada → ofrecer lecturas confundibles (OCR) que sí existen.
const sims = await window.SonarAPI.getPlateSimilares(q);
setSimilares((sims || []).filter(s => s.placa !== norm));
setQuickError("No encontrada");
setNotFoundPlaca(norm);
};
const onPickSimilar = (placa) => { setSimilares([]); doQuickSearch(null, placa); };
// The right column changes width by layout and by plate presence.
// When the bottom strip is active with a plate, hide the right column
// entirely — the strip already surfaces the relevant info, and the map
// needs every pixel.
const rightColW = (() => {
if (!plate) return 360;
if (pulsoLayout === "side") return 440;
if (pulsoLayout === "floating") return 320;
if (pulsoLayout === "bottom") return 0;
return 360;
})();
const showRightCol = rightColW > 0;
return (
{/* ── MAP COLUMN ────────────────────────────────────── */}
{/* Top floating search + filters bar */}
onSearch(null)}
notFoundPlaca={notFoundPlaca}
onRegister={onRegister}
similares={similares}
onPickSimilar={onPickSimilar}
/>
{/* Flash EN VIVO: captura nueva de la placa abierta (auto-refresh) */}
{liveFlash && (
Nueva captura
{liveFlash.nodo ? window.SONAR_nodeCode(liveFlash.nodo) : "—"}
{liveFlash.nodo && liveFlash.nodo.nombre ? " · " + liveFlash.nodo.nombre : ""}
{" · " + window.SONAR_fmtTime(liveFlash.ts)}
)}
{/* Legend (bottom-left) — hidden when bottom strip is active to avoid stacking */}
{!(plate && pulsoLayout === "bottom") && (
)}
{/* Map */}
setPinNode(n)}
zoomBottom={plate && pulsoLayout === "bottom" ? 94 : 14}
fillToBorder={true}
focusNodeId={plate ? plate.capturas[plate.capturas.length - 1].nodo : null}
focusZoom={detallesOpen ? 1.75 : null}
focusShiftY={detallesOpen ? 320 : 0}
pinNode={pinNode}
onVerMas={onVerNodo}
onPinClose={() => setPinNode(null)}
/>
{/* Floating result card — V2 */}
{plate && pulsoLayout === "floating" && (
)}
{/* Bottom strip — V3 */}
{plate && pulsoLayout === "bottom" && (
)}
{/* ── RIGHT COLUMN ──────────────────────────────────── */}
{showRightCol && (
{plate && pulsoLayout === "side" ? (
onSearch(null)}/>
) : (
// KPI + nodes / node-detail panel (shared between no-plate AND floating layouts)
<>
)}
)}
RASTREO
{plate.placa}
{plate.marcaciones.length > 0 && (
);
}
return (
);
};
/* ─── Shared: legend ──────────────────────────────────────── */
const Legend = () => (
);
/* ─── V1 SIDE — full Pulso results in right column ────────── */
const SidePulsoPanel = ({ plate, onNavigate, onClear }) => {
const lastCap = plate.capturas[plate.capturas.length - 1];
const lastNode = window.SONAR_findNode(lastCap.nodo);
const muni = window.SONAR_MUNICIPIOS.find(m => m.id === lastNode.municipio);
const elapsed = window.SONAR_minutesAgo(lastCap.ts);
const hasAlert = plate.marcaciones.length > 0;
return (
<>
{/* Header */}
{plate.placa}
{plate.tipo}
{plate.marca} · {plate.color}
{/* Alert banner */}
{hasAlert && (
{plate.marcaciones[0].tipo}
{plate.marcaciones[0].autoridad}
{plate.marcaciones[0].motivo}
)}
{/* Last capture */}
Última captura
{lastNode.nombre} · {lastNode.alias}
{/* Timeline */}
{/* History */}
Historial cronológico
{plate.capturas.slice().reverse().map((cap, i, arr) => {
const node = window.SONAR_findNode(cap.nodo);
const isLast = i === 0;
return (
{window.SONAR_fmtTime(cap.ts)}
{window.SONAR_fmtShortDate(cap.ts)}
{node.nombre}
· {window.SONAR_nodeCode(node)}
{window.SONAR_humanAgo(cap.ts)}
);
})}
{/* Actions */}
onNavigate("rebote")}>
onNavigate("candado")}>
);
};
/* ─── V2 FLOATING — compact card overlay ──────────────────── */
const FloatingPulsoCard = ({ plate, onNavigate }) => {
const lastCap = plate.capturas[plate.capturas.length - 1];
const lastNode = window.SONAR_findNode(lastCap.nodo);
const elapsed = window.SONAR_minutesAgo(lastCap.ts);
const hasAlert = plate.marcaciones.length > 0;
return (
{/* Header strip */}
{plate.placa}
{hasAlert ? (
{plate.marcaciones[0].tipo}
) : (
RASTREO
)}
{plate.marca}
{hasAlert && (
)}
{/* Last capture */}
Última captura
{lastNode.nombre}
Hora
{window.SONAR_fmtTime(lastCap.ts)}
Hace
{window.SONAR_relAgo(lastCap.ts)}
Capturas
{plate.capturas.length}
{/* Mini timeline as dots */}
{plate.capturas.map((cap, i) => {
const isLast = i === plate.capturas.length - 1;
return (
{i < plate.capturas.length - 1 && (
)}
);
})}
{window.SONAR_fmtTime(plate.capturas[0].ts)}
{window.SONAR_fmtTime(lastCap.ts)}
{/* Actions */}
onNavigate("rebote")}>
Rebote
onNavigate("candado")}>
Candado
{!iconOnly && {label} }
);
};
/* ─── V3 BOTTOM — expandable horizontal strip ─────────────── */
/* Instantánea on-demand — componente AISLADO. Su barra de progreso simulada hace
tick cada 160ms; al estar separada, esos re-renders NO tocan el panel de detalle
(timeline, historial, etc.). Progreso 0→90% y salta a 100% al cargar la imagen. */
const PulsoSnapshot = ({ captura, lastNode, lastCap, placa }) => {
const [snapState, setSnapState] = React.useState("loading"); // loading | loaded | error
const [snapPct, setSnapPct] = React.useState(0);
const [zoomOpen, setZoomOpen] = React.useState(false);
React.useEffect(() => { setSnapState("loading"); setSnapPct(0); setZoomOpen(false); }, [captura]);
React.useEffect(() => {
if (snapState === "loaded") { setSnapPct(100); return; }
if (snapState !== "loading") return;
const id = setInterval(() => setSnapPct(p => (p >= 90 ? 90 : p + Math.max(0.6, (90 - p) * 0.05))), 160);
return () => clearInterval(id);
}, [snapState]);
return (
Instantánea
{captura && snapState !== "error" ? (
setSnapState("loaded")}
onError={() => setSnapState("error")}
style={{ width: "100%", height: "auto", display: snapState === "loaded" ? "block" : "none" }}/>
{snapState === "loading" && (
Cargando instantánea… {Math.round(snapPct)}%
)}
{snapState === "loaded" && (
<>
setZoomOpen(true)} title="Ampliar" style={{
position: "absolute", top: 8, right: 8, width: 30, height: 30, borderRadius: 7,
display: "grid", placeItems: "center", cursor: "pointer",
border: "1px solid var(--g-border-on-dark)", color: "#fff",
background: "rgba(11,18,25,0.72)", backdropFilter: "blur(6px)",
}}>
{window.SONAR_nodeCode(lastNode)} · {window.SONAR_fmtTime(lastCap.ts)}
Confianza {(lastCap.confianza * 100).toFixed(0)}%
)}
) : (
)}
{zoomOpen && (
setZoomOpen(false)} style={{
position: "fixed", inset: 0, zIndex: 2000,
background: "rgba(0,0,0,0.82)", backdropFilter: "blur(4px)",
display: "flex", alignItems: "center", justifyContent: "center", padding: 40,
}}>
e.stopPropagation()} style={{ position: "relative", maxWidth: "min(900px, 92vw)" }}>
setZoomOpen(false)} title="Cerrar" style={{
position: "absolute", top: 10, right: 10, width: 34, height: 34, borderRadius: "50%",
display: "grid", placeItems: "center", cursor: "pointer", zIndex: 1,
border: "1px solid rgba(255,255,255,0.25)", color: "#fff",
background: "rgba(11,18,25,0.78)", backdropFilter: "blur(6px)",
}}>
{placa}
{window.SONAR_nodeCode(lastNode)} · {window.SONAR_fmtTime(lastCap.ts)}
)}
);
};
/* Chip de sentido por captura: entrando (cam-in, verde) / saliendo (cam-out, naranja). */
const DirChip = ({ dir }) => {
if (dir !== "in" && dir !== "out") return null;
const inb = dir === "in";
return (
{inb ? "Entrando" : "Saliendo"}
);
};
const BottomPulsoStrip = ({ plate, onNavigate, onExpandedChange }) => {
const [expanded, setExpanded] = React.useState(false);
React.useEffect(() => { if (onExpandedChange) onExpandedChange(expanded); }, [expanded]);
const [showHist, setShowHist] = React.useState(false);
const [histPage, setHistPage] = React.useState(0);
const lastCap = plate.capturas[plate.capturas.length - 1];
const lastNode = window.SONAR_findNode(lastCap.nodo);
const muni = window.SONAR_MUNICIPIOS.find(m => m.id === lastNode.municipio);
const elapsed = window.SONAR_minutesAgo(lastCap.ts);
const hasAlert = plate.marcaciones.length > 0;
const firstCap = plate.capturas[0];
// Histórico completo = capturas recientes + historial de días previos.
const fullHistory = React.useMemo(() => {
const extra = plate.historial || [];
return [...plate.capturas, ...extra].sort((a, b) => new Date(b.ts) - new Date(a.ts));
}, [plate]);
// Municipios distintos en lo cargado (fallback). Los TOTALES reales vienen del backend (COUNT),
// porque el front solo trae las últimas ~200 capturas para que el detalle abra rápido.
const totalMunis = React.useMemo(
() => new Set(fullHistory.map(c => window.SONAR_findNode(c.nodo)?.municipio).filter(Boolean)).size,
[fullHistory]);
const totalCaps = plate.total_capturas ?? fullHistory.length;
const totalMunisN = plate.total_municipios ?? totalMunis;
const PER_PAGE = 6;
const pageCount = Math.max(1, Math.ceil(fullHistory.length / PER_PAGE));
const page = Math.min(histPage, pageCount - 1);
const pageRows = fullHistory.slice(page * PER_PAGE, page * PER_PAGE + PER_PAGE);
return (
{/* ── COMPACT ROW (always visible) ────────────────────── */}
{/* Placa block — fixed, never shrinks */}
{plate.placa}
{hasAlert ? (
{plate.marcaciones[0].tipo}
) : (
SIN ALERTA
)}
{/* Última captura — single line, inline aligned, shrinkable */}
Última captura
{lastNode.nombre} · {muni.nombre}
{window.SONAR_fmtShortDate(lastCap.ts)} · {window.SONAR_fmtTime(lastCap.ts)} · hace {window.SONAR_relAgo(lastCap.ts)}
{/* Actions — fixed, icon-only at narrow widths */}
{ setExpanded(v => !v); setShowHist(false); }}
/>
onNavigate("rebote")}
/>
onNavigate("candado")}
/>
{/* ── EXPANDED PANEL ──────────────────────────────────── */}
{expanded && (
{/* ── Header con toggle de vista ───────────────── */}
{showHist ? "Histórico cronológico" : "Línea de tiempo · recorrido confirmado"}
{showHist
? `${fullHistory.length}${totalCaps > fullHistory.length ? " de " + totalCaps : ""} registros en la red ANPR`
: `${totalCaps} capturas · ${totalMunisN} municipio${totalMunisN === 1 ? "" : "s"} · ${plate.capturas.length} en las últimas 24 h`}
{showHist && (
setShowHist(false)}>
Volver a detalles
)}
{!showHist && (
setShowHist(true)}/>
)}
{/* Instantánea del vehículo (de la última captura) */}
{/* (Instantánea movida dentro de Resumen de captura) */}
{/* ── Vista conmutable: histórico (sub) vs detalles (principal) ─ */}
{showHist ? (
{pageRows.map((cap, i) => {
const node = window.SONAR_findNode(cap.nodo);
const mn = window.SONAR_MUNICIPIOS.find(m => m.id === node.municipio);
const isLast = page === 0 && i === 0;
return (
{window.SONAR_fmtTime(cap.ts)}
{window.SONAR_fmtShortDate(cap.ts)}
{node.nombre} {mn && · {mn.nombre} }
{window.SONAR_nodeCode(node)}{node.alias ? ` · ${node.alias}` : ""} · {(cap.confianza * 100).toFixed(0)}%
{window.SONAR_humanAgo(cap.ts)}
{isLast ? (
ÚLTIMA
) :
}
);
})}
{/* Paginación tipo correo electrónico */}
{page * PER_PAGE + 1}–{Math.min((page + 1) * PER_PAGE, fullHistory.length)} de {fullHistory.length}
setHistPage(p => Math.max(0, p - 1))}
>
{page + 1} / {pageCount}
= pageCount - 1}
onClick={() => setHistPage(p => Math.min(pageCount - 1, p + 1))}
>
) : (
{/* COLUMNA 1 — Estado + Datos apilados */}
Estado del vehículo
{hasAlert ? (
<>
{plate.marcaciones[0].tipo}
{plate.marcaciones[0].motivo}
) : (
<>
SIN MARCACIONES
Sin alertas activas en SIJIN, Fiscalía ni base de hurto. Vehículo desconocido sin marcaciones.
)}
{/* Datos del vehículo */}
{/* /COLUMNA 1 */}
{/* Resumen de captura */}
Resumen de captura
{/* Datos de la captura */}
{/* Instantánea (componente AISLADO: su barra no re-renderiza el panel) */}
)}
)}
{/* Nodo compacto "Ver más" en el extremo izquierdo */}
{hasHistBtn && (
e.currentTarget.style.background = "rgba(79, 212, 255, 0.18)"}
onMouseLeave={e => e.currentTarget.style.background = "rgba(79, 212, 255, 0.1)"}
>
Ver más
)}
{caps.map((cap, i) => {
const pct = posOf(i);
const node = window.SONAR_findNode(cap.nodo);
const mn = window.SONAR_MUNICIPIOS.find(m => m.id === node.municipio);
const isLast = i === caps.length - 1;
return (
{/* Nombre del nodo — ARRIBA del punto */}
{large && (
{window.SONAR_nodeCode(node)} · {mn.nombre}
)}
{large ? (
/* Ubicación + fecha — DEBAJO del punto */
{node.alias}
{window.SONAR_fmtTime(cap.ts)} · {window.SONAR_fmtShortDate(cap.ts)}
) : (
<>
{(cap.direccion === "in" || cap.direccion === "out") && (
{window.SONAR_fmtTime(cap.ts)}
)}
);
})}
{/* NOW marker */}
);
};
/* ─── Shared helpers (Stat, KPI, LegendItem, SeccionesRed, Timeline) ── */
const Stat = ({ label, value, sub, mono }) => (
{label}
{value}
{sub &&
{sub}
}
);
const LegendItem = ({ color, label, pulse, cross }) => (
);
const KPI = ({ label, value, accent, icon }) => {
const c = accent === "green" ? "var(--g-signal-green)" :
accent === "red" ? "var(--g-signal-red-soft)" :
accent === "mute" ? "var(--g-text-mute-dark)" :
"var(--accent, var(--g-celadon))";
return (
);
};
// Panel derecho (sin placa): solo nodos ANPR y puestos de control ACTIVOS, en grilla
// compacta de códigos. Tocar un código enfoca ese nodo en el mapa (pin + burbuja).
const RedVacio = ({ texto }) => (
{texto}
);
const CodigoGrid = ({ items, onSelect, dot = "var(--g-signal-green)" }) => (
{items.length === 0 ? onSelect(n)} title={n.nombre}
style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px", borderRadius: 8,
background: "var(--g-surface-on-dark)", border: "1px solid var(--g-border-on-dark)", cursor: "pointer", fontFamily: "var(--font-sans)" }}
onMouseEnter={e => { e.currentTarget.style.borderColor = dot; }}
onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--g-border-on-dark)"; }}>
{n.codigo}
))}
);
const RedSeccion = ({ titulo, count, children }) => (
);
const SeccionesRed = ({ camaras, puestos, fronteras = [], onSelect }) => {
const camAct = camaras.filter(n => n.status === "active");
const puestosAct = puestos.filter(n => n.status === "active");
return (
Toca un código para ubicarlo en el mapa.
);
};
const Timeline = ({ plate }) => {
const caps = plate.capturas;
const t0 = new Date(caps[0].ts).getTime();
const tN = window.SONAR_NOW.getTime();
const span = Math.max(tN - t0, 60000);
return (
{caps.map((cap, i) => {
const t = new Date(cap.ts).getTime();
const pct = ((t - t0) / span) * 100;
const node = window.SONAR_findNode(cap.nodo);
const isLast = i === caps.length - 1;
return (
{window.SONAR_fmtTime(cap.ts)}
{(cap.direccion === "in" || cap.direccion === "out") && (
);
})}
{/* NOW marker */}
);
};
window.MapaScreen = MapaScreen;
