// Header, Home (species grouped by family), Chat panel // // The Home component reads `species` from the App, which loads them // asynchronously from GET /species. Cards are grouped client-side by // genus → family-group lookup baked into api.js. (function () { const { useState, useEffect, useRef } = React; // ---------- BrandMark — custom logo image (URL configured in config.js) ---------- function BrandMark() { const src = (window.CETA_CONFIG && window.CETA_CONFIG.logoUrl) || 'logo.png'; return CetaScope; } // ---------- Header ---------- function Header({ onReset, observationsTotal, speciesTotal, apiOnline }) { return (
{apiOnline ? 'API en ligne' : 'API hors ligne'} {observationsTotal != null ? observationsTotal.toLocaleString('fr-FR') + ' observations' : '…'} {speciesTotal != null ? ` · ${speciesTotal} espèces` : ''} v0.2 — OBIS
); } // Strip accents + lowercase — used by the home search bar to match species // names regardless of diacritics. function fold(s) { return (s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, ''); } // ---------- Home (default state: species index by group) ---------- function Home({ species, loading, error, totals, onAskSpecies, onAskSuggestion, zonesCount }) { const groups = window.CETA.groups; const [search, setSearch] = useState(''); const [expanded, setExpanded] = useState(() => new Set()); const searchRef = useRef(null); function toggleGroup(id) { setExpanded(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); } function expandAll() { setExpanded(new Set(groups.map(g => g.id))); } function collapseAll() { setExpanded(new Set()); } if (loading) { return (
CetaScope · Chargement

Connexion à l'API en cours…

); } if (error) { return (
CetaScope · Erreur

Impossible de joindre l'API.

Vérifie que le backend FastAPI tourne sur {window.CETA.api.base || '(racine)'} et que cet hôte est autorisé dans la liste CORS.

{String(error)}

); } return (
CetaScope · Cartographie scientifique

Une conversation avec l'océan,
guidée par la donnée.

Interroge en français une base de plus de {(totals?.observations || 0).toLocaleString('fr-FR')} observations scientifiques de cétacés issues d'OBIS, sur {totals?.species || species.length} espèces. Le chatbot transforme ta question en carte, courbe, fiche ou classement.

{(totals?.observations || 0).toLocaleString('fr-FR')}
Observations agrégées
{totals?.species || species.length}
Espèces de cétacés
{zonesCount ?? '—'}
Zones océaniques
OBIS
Source scientifique
setSearch(e.target.value)} onKeyDown={e => { if (e.key === 'Escape') setSearch(''); }} /> {search && ( )}
Index des espèces · {species.length} au total
·
{(() => { const q = fold(search.trim()); const isSearching = q.length > 0; const matchSpecies = sp => { if (!isSearching) return true; return [sp.common_name_fr, sp.common_name_en, sp.scientific_name] .filter(Boolean) .some(f => fold(f).includes(q)); }; const groupedRows = groups.map(g => { const all = species.filter(sp => sp.group === g.id); const matched = all.filter(matchSpecies); return { ...g, all, matched }; }); const totalMatched = groupedRows.reduce((s, g) => s + g.matched.length, 0); if (isSearching && totalMatched === 0) { return (

Aucune espèce ne correspond à « {search} »

Essaie un autre nom — français, anglais ou scientifique.

); } return ( <> {groupedRows.map(g => { if (!g.all.length) return null; if (isSearching && g.matched.length === 0) return null; const open = isSearching ? true : expanded.has(g.id); const sorted = [...g.matched].sort( (a, b) => (b.observation_count || 0) - (a.observation_count || 0) ); return (
{open && (
{sorted.map(sp => ( onAskSpecies(sp)} /> ))}
)}
); })} ); })()}
); } // Hook: resolve a species photo. Priority: // 1. Curated DB url (sp.image_url) — Supabase Storage, set via upload script // 2. Wikipedia thumbnail (cached in localStorage) // 3. null → caller keeps the SVG silhouette fallback function useSpeciesImage(sp) { const dbUrl = sp?.image_url || null; const wikiPeek = !dbUrl && window.CetaImages ? window.CetaImages.peek(sp?.scientific_name) : undefined; const initial = dbUrl || (typeof wikiPeek === 'string' ? wikiPeek : null); const [url, setUrl] = useState(initial); const [loaded, setLoaded] = useState(false); useEffect(() => { // Reset loaded state when the species (and hence URL) changes setLoaded(false); if (dbUrl) { setUrl(dbUrl); return; } if (!sp || !sp.scientific_name || !window.CetaImages) { setUrl(null); return; } let cancelled = false; window.CetaImages.get(sp.scientific_name, sp.common_name_fr).then(u => { if (cancelled) return; setUrl(typeof u === 'string' ? u : null); }); return () => { cancelled = true; }; }, [sp?.scientific_name, sp?.common_name_fr, dbUrl]); return { url, loaded, onLoaded: () => setLoaded(true) }; } function SpeciesCard({ sp, onClick }) { const { url, loaded, onLoaded } = useSpeciesImage(sp); return (
{url && ( {sp.common_name_fr} { /* keep silhouette */ }} /> )}
{sp.common_name_fr}
{sp.scientific_name}
{sp.iucn} {(sp.observation_count || 0).toLocaleString('fr-FR')} obs.
); } // ---------- Chat panel ---------- function VizThumbIcon({ kind }) { const stroke = 'currentColor'; switch (kind) { case 'map': return ; case 'time_series': return ; case 'profile': return ; case 'top_species': return ; case 'choropleth': return ; case 'conservation': return ; default: return ; } } const VIZ_LABELS = { map:"Carte d'observations", choropleth:'Densité par zone', time_series:'Série temporelle', profile:'Fiche espèce', top_species:'Classement', conservation:'Historique IUCN', text:'Réponse' }; // ---------- Typing indicator (rotating thematic phrases) ---------- const TYPING_PHRASES = [ 'Plongée dans la base…', 'Triangulation au sonar…', 'Analyse du souffle…', 'Mesure de la nageoire caudale…', 'Décodage des chants…', 'Identification de l’espèce…', 'Repérage des bancs…', 'Comptage des individus…', 'Lecture du registre IUCN…', 'Croisement avec OBIS…', 'Consultation de WoRMS…', 'Échantillonnage acoustique…', 'Cartographie des routes migratoires…', 'Récupération des observations…', 'Suivi par satellite…', ]; function TypingIndicator() { const [idx, setIdx] = useState(() => Math.floor(Math.random() * TYPING_PHRASES.length)); useEffect(() => { let timeoutId; // Returns a fresh random delay between 2s and 4s, recomputed on every tick const randomDelay = () => 2000 + Math.random() * 2000; const tick = () => { setIdx(prev => (prev + 1) % TYPING_PHRASES.length); timeoutId = setTimeout(tick, randomDelay()); }; timeoutId = setTimeout(tick, randomDelay()); return () => clearTimeout(timeoutId); }, []); return ( <> {TYPING_PHRASES[idx]} ); } // Render bot text with **bold** support function FormattedText({ text }) { if (!text) return null; const parts = text.split(/(\*\*[^*]+\*\*)/g); return <>{parts.map((p, i) => p.startsWith('**') && p.endsWith('**') ? {p.slice(2, -2)} : {p} )}; } function ChatPanel({ history, onSend, suggestions, isTyping, activeMsgId, onSelectMessage, onClear, open = true, onToggle }) { const [input, setInput] = useState(''); const taRef = useRef(null); const streamRef = useRef(null); useEffect(() => { if (streamRef.current) { streamRef.current.scrollTop = streamRef.current.scrollHeight; } }, [history, isTyping]); function submit() { const v = input.trim(); if (!v) return; onSend(v); setInput(''); if (taRef.current) taRef.current.style.height = 'auto'; } function onKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } } function autoGrow(e) { e.target.style.height = 'auto'; e.target.style.height = Math.min(120, e.target.scrollHeight) + 'px'; setInput(e.target.value); } if (!open) { return (
); } return (
Assistant CetaScope
Pose ta question en français
{history.length > 0 && ( )}
{history.length === 0 && (
Pour commencer
Demande-moi des observations, le profil d'une espèce, une tendance, ou les statistiques d'une zone océanique.
{suggestions.map(s => ( ))}
)} {history.map(msg => ( {msg.role === 'user' ? (
Toi
{msg.text}
) : (
CetaScope
{msg.viz && msg.viz.type !== 'text' && (
onSelectMessage(msg.id)} >
{msg.viz.title || VIZ_LABELS[msg.viz.type]}
{VIZ_LABELS[msg.viz.type]}{msg.viz.count ? ` · ${msg.viz.count.toLocaleString('fr-FR')} pts` : ''}
)}
)} ))} {isTyping && (
CetaScope
)}
{history.length > 0 && history.length < 8 && (
{suggestions.slice(0, 3).map(s => ( ))}
)}