// filter-sidebar.jsx — FilterSidebar component const { useState: useSidebarState, useMemo: useSidebarMemo } = React; const ALL_DOMAINS = ['Artificial Intelligence', 'Semiconductors', 'Quantum Computing']; const ALL_STATUSES = ['active', 'developing', 'resolved', 'invalidated']; const STATUS_LABELS = { active: 'Active', developing: 'Developing', resolved: 'Resolved', invalidated: 'Invalidated', }; const HORIZON_OPTIONS = [ { value: null, label: 'All' }, { value: '6-12', label: '6–12 mo' }, { value: '12-18', label: '12–18 mo' }, { value: '18-24', label: '18–24 mo' }, ]; const SORT_OPTIONS = [ { value: 'recent', label: 'Most Recent' }, { value: 'confidence', label: 'Confidence ↓' }, { value: 'horizon', label: 'Horizon' }, ]; const CONFIDENCE_TOOLTIP = [ '', 'Weak signal — preliminary observation, limited supporting evidence', 'Low confidence — some evidence but significant gaps remain', 'Moderate confidence — reasonable evidence with notable uncertainties', 'Strong confidence — strong evidence, minor gaps in supporting data', 'High confidence — strong evidence across multiple independent sources', ]; // Micro-label style function SectionLabel({ children }) { return (

{children}

); } function FilterSidebar({ signals, filters, onFiltersChange, sortBy, onSortChange, hasActiveFilters, onReset }) { // Counts for domain chips (excluding domain filter itself) const domainCounts = useSidebarMemo(() => { let base = signals; if (filters.statuses.length > 0) base = base.filter(s => filters.statuses.includes(s.status)); base = base.filter(s => s.confidence >= filters.minConfidence); if (filters.horizon) base = base.filter(s => s.horizon === filters.horizon); const counts = {}; ALL_DOMAINS.forEach(d => { counts[d] = base.filter(s => s.domain === d).length; }); return counts; }, [signals, filters.statuses, filters.minConfidence, filters.horizon]); // Counts for status chips (excluding status filter) const statusCounts = useSidebarMemo(() => { let base = signals; if (filters.domains.length > 0) base = base.filter(s => filters.domains.includes(s.domain)); base = base.filter(s => s.confidence >= filters.minConfidence); if (filters.horizon) base = base.filter(s => s.horizon === filters.horizon); const counts = {}; ALL_STATUSES.forEach(st => { counts[st] = base.filter(s => s.status === st).length; }); return counts; }, [signals, filters.domains, filters.minConfidence, filters.horizon]); // Domain toggle function toggleDomain(domain) { const current = filters.domains; let next; if (domain === null) { next = []; } else { if (current.includes(domain)) { next = current.filter(d => d !== domain); } else { next = [...current, domain]; } } onFiltersChange({ ...filters, domains: next }); } // Status toggle function toggleStatus(status) { const current = filters.statuses; let next; if (status === null) { next = []; } else { if (current.includes(status)) { next = current.filter(s => s !== status); } else { next = [...current, status]; } } onFiltersChange({ ...filters, statuses: next }); } return (

{/* ── SORT ── */} Sort By

{SORT_OPTIONS.map(opt => { const active = sortBy === opt.value; return ( ); })}

{/* ── DOMAIN ── */} Domain

{/* All chip */} toggleDomain(null)} /> {ALL_DOMAINS.map(domain => ( toggleDomain(domain)} /> ))}

{/* ── STATUS ── */} Status

toggleStatus(null)} /> {ALL_STATUSES.map(st => ( toggleStatus(st)} /> ))}

{/* ── CONFIDENCE ── */} Confidence

{[ { value: 3, label: 'All' }, { value: 4, label: '4+' }, { value: 5, label: '5 only' }, ].map(opt => { const active = filters.minConfidence === opt.value; return ( ); })}

Signals below 3/5 confidence are not published — editorial standard.

{/* ── HORIZON ── */} Forecast Horizon

{HORIZON_OPTIONS.map(opt => { const active = filters.horizon === opt.value; return ( ); })}

{/* ── RESET ── */} {hasActiveFilters && (

)}

); } // ─── Sub-components ──────────────────────────────────────────────────────── function DomainChip({ label, count, active, onClick }) { return ( ); } function StatusChip({ label, statusKey, count, active, onClick }) { const dotColors = { active: 'var(--status-active)', developing: 'var(--status-developing)', resolved: 'var(--status-resolved)', invalidated: 'var(--status-invalidated)', }; return ( ); } // ─── Exports ──────────────────────────────────────────────────────────────── Object.assign(window, { FilterSidebar });