-0078D4?style=for-the-badge&logo=windows&logoColor=white){kind=icon}
- Global Situation
+ ${SITE_VARIANT === 'tech' ? t('panels.techMap') : t('panels.map')}
+
+
${panel.enabled ? '✓' : ''}
- ${panel.name}
+ ${this.getLocalizedPanelName(key, panel.name)}
+
+ `;
+ })();
+
+ container.innerHTML = panelHtml + findingsHtml;
+
container.querySelectorAll('.panel-toggle-item').forEach((item) => {
item.addEventListener('click', () => {
const panelKey = (item as HTMLElement).dataset.panel!;
+
+ if (panelKey === 'intel-findings') {
+ if (!this.findingsBadge) return;
+ this.findingsBadge.setEnabled(!this.findingsBadge.isEnabled());
+ this.renderPanelToggles();
+ return;
+ }
+
const config = this.panelSettings[panelKey];
+ console.log('[Panel Toggle] Clicked:', panelKey, 'Current enabled:', config?.enabled);
if (config) {
config.enabled = !config.enabled;
+ console.log('[Panel Toggle] New enabled:', config.enabled);
saveToStorage(STORAGE_KEYS.panels, this.panelSettings);
this.renderPanelToggles();
this.applyPanelSettings();
+ console.log('[Panel Toggle] After apply - config.enabled:', this.panelSettings[panelKey]?.enabled);
+ }
+ });
+ });
+ }
+
+ private getLocalizedPanelName(panelKey: string, fallback: string): string {
+ if (panelKey === 'runtime-config') {
+ return t('modals.runtimeConfig.title');
+ }
+ const key = panelKey.replace(/-([a-z])/g, (_match, group: string) => group.toUpperCase());
+ const lookup = `panels.${key}`;
+ const localized = t(lookup);
+ return localized === lookup ? fallback : localized;
+ }
+
+ private getAllSourceNames(): string[] {
+ const sources = new Set${findingsEnabled ? '✓' : ''}
+ Intelligence Findings
+
+
+ `;
+ }).join('');
+
+ container.querySelectorAll('.source-toggle-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const sourceName = (item as HTMLElement).dataset.source!;
+ if (this.disabledSources.has(sourceName)) {
+ this.disabledSources.delete(sourceName);
+ } else {
+ this.disabledSources.add(sourceName);
}
+ saveToStorage(STORAGE_KEYS.disabledFeeds, Array.from(this.disabledSources));
+ this.renderSourceToggles(filter);
});
});
+
+ // Update counter
+ const enabledCount = allSources.length - this.disabledSources.size;
+ const counterEl = document.getElementById('sourcesCounter');
+ if (counterEl) {
+ counterEl.textContent = t('header.sourcesEnabled', { enabled: String(enabledCount), total: String(allSources.length) });
+ }
+ }
+
+ private setupSourcesModal(): void {
+ document.getElementById('sourcesBtn')?.addEventListener('click', () => {
+ document.getElementById('sourcesModal')?.classList.add('active');
+ // Clear search and show all sources on open
+ const searchInput = document.getElementById('sourcesSearch') as HTMLInputElement | null;
+ if (searchInput) searchInput.value = '';
+ this.renderSourceToggles();
+ });
+
+ document.getElementById('sourcesModalClose')?.addEventListener('click', () => {
+ document.getElementById('sourcesModal')?.classList.remove('active');
+ });
+
+ document.getElementById('sourcesModal')?.addEventListener('click', (e) => {
+ if ((e.target as HTMLElement)?.classList?.contains('modal-overlay')) {
+ document.getElementById('sourcesModal')?.classList.remove('active');
+ }
+ });
+
+ document.getElementById('sourcesSearch')?.addEventListener('input', (e) => {
+ const filter = (e.target as HTMLInputElement).value;
+ this.renderSourceToggles(filter);
+ });
+
+ document.getElementById('sourcesSelectAll')?.addEventListener('click', () => {
+ this.disabledSources.clear();
+ saveToStorage(STORAGE_KEYS.disabledFeeds, []);
+ const filter = (document.getElementById('sourcesSearch') as HTMLInputElement)?.value || '';
+ this.renderSourceToggles(filter);
+ });
+
+ document.getElementById('sourcesSelectNone')?.addEventListener('click', () => {
+ const allSources = this.getAllSourceNames();
+ this.disabledSources = new Set(allSources);
+ saveToStorage(STORAGE_KEYS.disabledFeeds, allSources);
+ const filter = (document.getElementById('sourcesSearch') as HTMLInputElement)?.value || '';
+ this.renderSourceToggles(filter);
+ });
}
private applyPanelSettings(): void {
@@ -942,49 +2900,314 @@ export class App {
});
}
- private updateTime(): void {
- const now = new Date();
- const el = document.getElementById('timeDisplay');
- if (el) {
- el.textContent = now.toUTCString().split(' ')[4] + ' UTC';
+ private updateHeaderThemeIcon(): void {
+ const btn = document.getElementById('headerThemeToggle');
+ if (!btn) return;
+ const isDark = getCurrentTheme() === 'dark';
+ btn.innerHTML = isDark
+ ? ''
+ : '';
+ }
+
+ private async loadAllData(): Promise${isEnabled ? '✓' : ''}
+ ${escaped}
+
+
+ `;
+ }
+
+ private bindShareButtons(): void {
+ if (!this.onShareStory) return;
+ this.content.querySelectorAll('.cii-share-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const el = e.currentTarget as HTMLElement;
+ const code = el.dataset.code || '';
+ const name = el.dataset.name || '';
+ if (code && name) this.onShareStory!(code, name);
+ });
+ });
+ }
+
+ public async refresh(forceLocal = false): Promise
+ ${emoji}
+ ${escapeHtml(country.name)}
+ ${country.score}
+ ${trend}
+
+
+
+
+ U:${country.components.unrest}
+ C:${country.components.conflict}
+ S:${country.components.security}
+ I:${country.components.information}
+
+ No instability signals detected
';
+ return;
+ }
+
+ const html = withData.map(s => this.renderCountry(s)).join('');
+ this.content.innerHTML = `${html}
`;
+ this.bindShareButtons();
+ } catch (error) {
+ console.error('[CIIPanel] Refresh error:', error);
+ this.showError(t('common.failedCII'));
+ }
+ }
+
+ public getScores(): CountryScore[] {
+ return this.scores;
+ }
+}
diff --git a/src/components/CascadePanel.ts b/src/components/CascadePanel.ts
new file mode 100644
index 000000000..46f21bd1e
--- /dev/null
+++ b/src/components/CascadePanel.ts
@@ -0,0 +1,270 @@
+import { Panel } from './Panel';
+import { escapeHtml } from '@/utils/sanitize';
+import { t } from '@/services/i18n';
+import { getCSSColor } from '@/utils';
+import {
+ buildDependencyGraph,
+ calculateCascade,
+ getGraphStats,
+ clearGraphCache,
+ type DependencyGraph,
+} from '@/services/infrastructure-cascade';
+import type { CascadeResult, CascadeImpactLevel, InfrastructureNode } from '@/types';
+
+type NodeFilter = 'all' | 'cable' | 'pipeline' | 'port' | 'chokepoint';
+
+export class CascadePanel extends Panel {
+ private graph: DependencyGraph | null = null;
+ private selectedNode: string | null = null;
+ private cascadeResult: CascadeResult | null = null;
+ private filter: NodeFilter = 'cable';
+ private onSelectCallback: ((nodeId: string | null) => void) | null = null;
+
+ constructor() {
+ super({
+ id: 'cascade',
+ title: t('panels.cascade'),
+ showCount: true,
+ trackActivity: true,
+ infoTooltip: t('components.cascade.infoTooltip'),
+ });
+ this.init();
+ }
+
+ private async init(): Promise
+
+ `;
+ }
+
+ private renderCascadeResult(): string {
+ if (!this.cascadeResult) return '';
+
+ const { source, countriesAffected, redundancies } = this.cascadeResult;
+
+ const countriesHtml = countriesAffected.length > 0
+ ? countriesAffected.map(c => `
+ ${filterButtons}
+
+
+
+ ${this.getImpactEmoji(c.impactLevel)}
+ ${escapeHtml(c.countryName)}
+ ${t(`components.cascade.impactLevels.${c.impactLevel}`)}
+ ${c.affectedCapacity > 0 ? `${t('components.cascade.capacityPercent', { percent: String(Math.round(c.affectedCapacity * 100)) })}` : ''}
+
+ `).join('')
+ : `${t('components.cascade.noCountryImpacts')}
`;
+
+ const redundanciesHtml = redundancies && redundancies.length > 0
+ ? `
+
+
+ `
+ : '';
+
+ return `
+ ${t('components.cascade.alternativeRoutes')}
+ ${redundancies.map(r => `
+
+ ${escapeHtml(r.name)}
+ ${Math.round(r.capacityShare * 100)}%
+
+ `).join('')}
+
+
+ `;
+ }
+
+ private render(): void {
+ if (!this.graph) {
+ this.showLoading();
+ return;
+ }
+
+ const stats = getGraphStats();
+ const statsHtml = `
+
+ ${this.getNodeTypeEmoji(source.type)}
+ ${escapeHtml(source.name)}
+ ${t(`components.cascade.filterType.${source.type}`)}
+
+
+
+ ${redundanciesHtml}
+ ${t('components.cascade.countriesAffected', { count: String(countriesAffected.length) })}
+ ${countriesHtml}
+
+ 🔌 ${stats.cables}
+ 🛢️ ${stats.pipelines}
+ ⚓ ${stats.ports}
+ 🌊 ${stats.chokepoints}
+ 🏳️ ${stats.countries}
+ 📊 ${stats.edges} ${t('components.cascade.links')}
+
+ `;
+
+ this.content.innerHTML = `
+
+ ${statsHtml}
+ ${this.renderSelector()}
+ ${this.cascadeResult ? this.renderCascadeResult() : `
+ `;
+
+ this.attachEventListeners();
+ }
+
+ private attachEventListeners(): void {
+ const filterBtns = this.content.querySelectorAll('.cascade-filter-btn');
+ filterBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ this.filter = btn.getAttribute('data-filter') as NodeFilter;
+ this.selectedNode = null;
+ this.cascadeResult = null;
+ this.render();
+ });
+ });
+
+ const select = this.content.querySelector('.cascade-select') as HTMLSelectElement;
+ if (select) {
+ select.addEventListener('change', () => {
+ this.selectedNode = select.value || null;
+ this.cascadeResult = null;
+ if (this.onSelectCallback) {
+ this.onSelectCallback(this.selectedNode);
+ }
+ this.render();
+ });
+ }
+
+ const analyzeBtn = this.content.querySelector('.cascade-analyze-btn');
+ if (analyzeBtn) {
+ analyzeBtn.addEventListener('click', () => this.runAnalysis());
+ }
+ }
+
+ private runAnalysis(): void {
+ if (!this.selectedNode) return;
+
+ this.cascadeResult = calculateCascade(this.selectedNode);
+ this.render();
+
+ if (this.onSelectCallback) {
+ this.onSelectCallback(this.selectedNode);
+ }
+ }
+
+ public selectNode(nodeId: string): void {
+ this.selectedNode = nodeId;
+ const nodeType = nodeId.split(':')[0] as NodeFilter;
+ if (['cable', 'pipeline', 'port', 'chokepoint'].includes(nodeType)) {
+ this.filter = nodeType;
+ }
+ this.runAnalysis();
+ }
+
+ public onSelect(callback: (nodeId: string | null) => void): void {
+ this.onSelectCallback = callback;
+ }
+
+ public getSelectedNode(): string | null {
+ return this.selectedNode;
+ }
+
+ public getCascadeResult(): CascadeResult | null {
+ return this.cascadeResult;
+ }
+
+ public refresh(): void {
+ clearGraphCache();
+ this.graph = null;
+ this.cascadeResult = null;
+ this.init();
+ }
+}
diff --git a/src/components/ClimateAnomalyPanel.ts b/src/components/ClimateAnomalyPanel.ts
new file mode 100644
index 000000000..68721e263
--- /dev/null
+++ b/src/components/ClimateAnomalyPanel.ts
@@ -0,0 +1,104 @@
+import { Panel } from './Panel';
+import { escapeHtml } from '@/utils/sanitize';
+import type { ClimateAnomaly } from '@/types';
+import { getSeverityIcon, formatDelta } from '@/services/climate';
+import { t } from '@/services/i18n';
+
+export class ClimateAnomalyPanel extends Panel {
+ private anomalies: ClimateAnomaly[] = [];
+ private onZoneClick?: (lat: number, lon: number) => void;
+
+ constructor() {
+ super({
+ id: 'climate',
+ title: t('panels.climate'),
+ showCount: true,
+ trackActivity: true,
+ infoTooltip: t('components.climate.infoTooltip'),
+ });
+ this.showLoading(t('common.loadingClimateData'));
+ }
+
+ public setZoneClickHandler(handler: (lat: number, lon: number) => void): void {
+ this.onZoneClick = handler;
+ }
+
+ public setAnomalies(anomalies: ClimateAnomaly[]): void {
+ this.anomalies = anomalies;
+ this.setCount(anomalies.length);
+ this.renderContent();
+ }
+
+ private renderContent(): void {
+ if (this.anomalies.length === 0) {
+ this.setContent(`${t('components.cascade.selectInfrastructureHint')}
`}
+ ${t('components.climate.noAnomalies')}
`);
+ return;
+ }
+
+ const sorted = [...this.anomalies].sort((a, b) => {
+ const severityOrder = { extreme: 0, moderate: 1, normal: 2 };
+ return (severityOrder[a.severity] || 2) - (severityOrder[b.severity] || 2);
+ });
+
+ const rows = sorted.map(a => {
+ const icon = getSeverityIcon(a);
+ const tempClass = a.tempDelta > 0 ? 'climate-warm' : 'climate-cold';
+ const precipClass = a.precipDelta > 0 ? 'climate-wet' : 'climate-dry';
+ const sevClass = `severity-${a.severity}`;
+ const rowClass = a.severity === 'extreme' ? ' climate-extreme-row' : '';
+
+ return `
+
+
+
+
+
+ `);
+
+ this.content.querySelectorAll('.climate-row').forEach(el => {
+ el.addEventListener('click', () => {
+ const lat = Number((el as HTMLElement).dataset.lat);
+ const lon = Number((el as HTMLElement).dataset.lon);
+ if (Number.isFinite(lat) && Number.isFinite(lon)) this.onZoneClick?.(lat, lon);
+ });
+ });
+ }
+}
diff --git a/src/components/CommunityWidget.ts b/src/components/CommunityWidget.ts
new file mode 100644
index 000000000..ff2fb3528
--- /dev/null
+++ b/src/components/CommunityWidget.ts
@@ -0,0 +1,35 @@
+import { t } from '@/services/i18n';
+
+const DISMISSED_KEY = 'wm-community-dismissed';
+const DISCUSSION_URL = 'https://github.com/koala73/worldmonitor/discussions/94';
+
+export function mountCommunityWidget(): void {
+ if (localStorage.getItem(DISMISSED_KEY) === 'true') return;
+ if (document.querySelector('.community-widget')) return;
+
+ const widget = document.createElement('div');
+ widget.className = 'community-widget';
+ widget.innerHTML = `
+ | ${t('components.climate.zone')} | +${t('components.climate.temp')} | +${t('components.climate.precip')} | +${t('components.climate.severityLabel')} | +
|---|
+
+ ${t('components.community.joinDiscussion')}
+ ${t('components.community.openDiscussion')}
+
+
+
+ `;
+
+ const dismiss = () => {
+ widget.classList.add('cw-hiding');
+ setTimeout(() => widget.remove(), 300);
+ };
+
+ widget.querySelector('.cw-close')!.addEventListener('click', dismiss);
+
+ widget.querySelector('.cw-dismiss')!.addEventListener('click', () => {
+ localStorage.setItem(DISMISSED_KEY, 'true');
+ dismiss();
+ });
+
+ document.body.appendChild(widget);
+}
diff --git a/src/components/CountryBriefPage.ts b/src/components/CountryBriefPage.ts
new file mode 100644
index 000000000..c76be8875
--- /dev/null
+++ b/src/components/CountryBriefPage.ts
@@ -0,0 +1,625 @@
+import { escapeHtml, sanitizeUrl } from '@/utils/sanitize';
+import { t } from '@/services/i18n';
+import { getCSSColor } from '@/utils';
+import type { CountryScore } from '@/services/country-instability';
+import type { PredictionMarket, NewsItem } from '@/types';
+import type { AssetType } from '@/types';
+import type { CountryBriefSignals } from '@/App';
+import type { StockIndexData } from '@/components/CountryIntelModal';
+import { getNearbyInfrastructure, haversineDistanceKm } from '@/services/related-assets';
+import { PORTS } from '@/config/ports';
+import type { Port } from '@/config/ports';
+import { exportCountryBriefJSON, exportCountryBriefCSV } from '@/utils/export';
+import type { CountryBriefExport } from '@/utils/export';
+
+type BriefAssetType = AssetType | 'port';
+
+interface CountryIntelData {
+ brief: string;
+ country: string;
+ code: string;
+ cached?: boolean;
+ generatedAt?: string;
+ error?: string;
+ skipped?: boolean;
+ reason?: string;
+ fallback?: boolean;
+}
+
+export class CountryBriefPage {
+ private static BRIEF_BOUNDS: Record
+
+
`;
+ }
+
+ private componentBars(components: CountryScore['components']): string {
+ const items = [
+ { label: t('modals.countryBrief.components.unrest'), value: components.unrest, icon: '📢' },
+ { label: t('modals.countryBrief.components.conflict'), value: components.conflict, icon: '⚔' },
+ { label: t('modals.countryBrief.components.security'), value: components.security, icon: '🛡️' },
+ { label: t('modals.countryBrief.components.information'), value: components.information, icon: '📡' },
+ ];
+ return items.map(({ label, value, icon }) => {
+ const pct = Math.min(100, Math.max(0, value));
+ const color = pct >= 70 ? getCSSColor('--semantic-critical') : pct >= 50 ? getCSSColor('--semantic-high') : pct >= 30 ? getCSSColor('--semantic-elevated') : getCSSColor('--semantic-normal');
+ return `
+ ${score}
+ / 100
+
+
+ ${label}
+
+ ${Math.round(value)}
+
`;
+ }).join('');
+ }
+
+ private signalChips(signals: CountryBriefSignals): string {
+ const chips: string[] = [];
+ if (signals.protests > 0) chips.push(`📢 ${signals.protests} ${t('modals.countryBrief.signals.protests')}`);
+ if (signals.militaryFlights > 0) chips.push(`✈️ ${signals.militaryFlights} ${t('modals.countryBrief.signals.militaryAir')}`);
+ if (signals.militaryVessels > 0) chips.push(`⚓ ${signals.militaryVessels} ${t('modals.countryBrief.signals.militarySea')}`);
+ if (signals.outages > 0) chips.push(`🌐 ${signals.outages} ${t('modals.countryBrief.signals.outages')}`);
+ if (signals.earthquakes > 0) chips.push(`🌍 ${signals.earthquakes} ${t('modals.countryBrief.signals.earthquakes')}`);
+ if (signals.displacementOutflow > 0) {
+ const fmt = signals.displacementOutflow >= 1_000_000
+ ? `${(signals.displacementOutflow / 1_000_000).toFixed(1)}M`
+ : `${(signals.displacementOutflow / 1000).toFixed(0)}K`;
+ chips.push(`🌊 ${fmt} ${t('modals.countryBrief.signals.displaced')}`);
+ }
+ if (signals.climateStress > 0) chips.push(`🌡️ ${t('modals.countryBrief.signals.climate')}`);
+ if (signals.conflictEvents > 0) chips.push(`⚔️ ${signals.conflictEvents} ${t('modals.countryBrief.signals.conflictEvents')}`);
+ chips.push(`📈 ${t('modals.countryBrief.loadingIndex')}`);
+ return chips.join('');
+ }
+
+ public setShareStoryHandler(handler: (code: string, name: string) => void): void {
+ this.onShareStory = handler;
+ }
+
+ public setExportImageHandler(handler: (code: string, name: string) => void): void {
+ this.onExportImage = handler;
+ }
+
+ public showLoading(): void {
+ this.currentCode = '__loading__';
+ this.overlay.innerHTML = `
+
+
`;
+ this.overlay.querySelector('.cb-close')?.addEventListener('click', () => this.hide());
+ this.overlay.classList.add('active');
+ }
+
+ public show(country: string, code: string, score: CountryScore | null, signals: CountryBriefSignals): void {
+ this.currentCode = code;
+ this.currentName = country;
+ this.currentScore = score;
+ this.currentSignals = signals;
+ this.currentBrief = null;
+ this.currentHeadlines = [];
+ this.currentHeadlineCount = 0;
+ const flag = this.countryFlag(code);
+
+ const tierBadge = !signals.isTier1
+ ? `${t('modals.countryBrief.limitedCoverage')}`
+ : '';
+
+ this.overlay.innerHTML = `
+
+
+
+ 🌍
+ ${t('modals.countryBrief.identifying')}
+
+
+
+
+
+
+
+
+
+ ${t('modals.countryBrief.locating')}
+
+
+
`;
+
+ this.overlay.querySelector('.cb-close')?.addEventListener('click', () => this.hide());
+ this.overlay.querySelector('.cb-share-btn')?.addEventListener('click', () => {
+ if (this.onShareStory && this.currentCode && this.currentName) {
+ this.onShareStory(this.currentCode, this.currentName);
+ }
+ });
+ this.overlay.querySelector('.cb-print-btn')?.addEventListener('click', () => {
+ window.print();
+ });
+
+ const exportBtn = this.overlay.querySelector('.cb-export-btn');
+ const exportMenu = this.overlay.querySelector('.cb-export-menu');
+ exportBtn?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ exportMenu?.classList.toggle('hidden');
+ });
+ this.overlay.querySelectorAll('.cb-export-option').forEach(opt => {
+ opt.addEventListener('click', () => {
+ const format = (opt as HTMLElement).dataset.format;
+ if (format === 'image') {
+ if (this.onExportImage && this.currentCode && this.currentName) {
+ this.onExportImage(this.currentCode, this.currentName);
+ }
+ } else {
+ this.exportBrief(format as 'json' | 'csv');
+ }
+ exportMenu?.classList.add('hidden');
+ });
+ });
+ // Remove previous overlay-level listeners to prevent accumulation
+ if (this.boundExportMenuClose) this.overlay.removeEventListener('click', this.boundExportMenuClose);
+ if (this.boundCitationClick) this.overlay.removeEventListener('click', this.boundCitationClick);
+
+ this.boundExportMenuClose = () => exportMenu?.classList.add('hidden');
+ this.overlay.addEventListener('click', this.boundExportMenuClose);
+
+ this.boundCitationClick = (e: Event) => {
+ const target = e.target as HTMLElement;
+ if (target.classList.contains('cb-citation')) {
+ e.preventDefault();
+ const href = target.getAttribute('href');
+ if (href) {
+ const el = this.overlay.querySelector(href);
+ el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ el?.classList.add('cb-news-highlight');
+ setTimeout(() => el?.classList.remove('cb-news-highlight'), 2000);
+ }
+ }
+ };
+ this.overlay.addEventListener('click', this.boundCitationClick);
+
+ this.overlay.classList.add('active');
+ }
+
+ public updateBrief(data: CountryIntelData): void {
+ if (data.code !== this.currentCode) return;
+ const section = this.overlay.querySelector('.cb-brief-content');
+ if (!section) return;
+
+ if (data.error || data.skipped || !data.brief) {
+ const msg = data.error || data.reason || t('modals.countryBrief.briefUnavailable');
+ section.innerHTML = `
+
+
+ ${flag}
+ ${escapeHtml(country)}
+ ${score ? this.levelBadge(score.level) : ''}
+ ${score ? this.trendIndicator(score.trend) : ''}
+ ${tierBadge}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${score ? `
+
+ ` : signals.isTier1 ? '' : `
+
+ `}
+
+
+
+
+
+
+
+ ${t('modals.countryBrief.instabilityIndex')}
+
+ ${this.scoreRing(score.score, score.level)}
+
+
+ ${this.componentBars(score.components)}
+
+ ${t('modals.countryBrief.instabilityIndex')}
+
+
+ ${t('modals.countryBrief.notTracked', { country: escapeHtml(country) })}
+
+ ${t('modals.countryBrief.intelBrief')}
+
+
+
+
+
+
+
+ ${t('modals.countryBrief.generatingBrief')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${t('modals.countryBrief.activeSignals')}
+
+ ${this.signalChips(signals)}
+
+ ${t('modals.countryBrief.timeline')}
+ +${t('modals.countryBrief.predictionMarkets')}
+
+ ${t('modals.countryBrief.loadingMarkets')}
+
+ ${escapeHtml(msg)}
`;
+ return;
+ }
+
+ this.currentBrief = data.brief;
+ const formatted = this.formatBrief(data.brief, this.currentHeadlineCount);
+ section.innerHTML = `
+ ${formatted}
+ `;
+ }
+
+ public updateMarkets(markets: PredictionMarket[]): void {
+ const section = this.overlay.querySelector('.cb-markets-content');
+ if (!section) return;
+
+ if (markets.length === 0) {
+ section.innerHTML = `${t('modals.countryBrief.noMarkets')}`;
+ return;
+ }
+
+ section.innerHTML = markets.slice(0, 3).map(m => {
+ const pct = Math.round(m.yesPrice);
+ const noPct = 100 - pct;
+ const vol = m.volume ? `$${(m.volume / 1000).toFixed(0)}k vol` : '';
+ const safeUrl = sanitizeUrl(m.url || '');
+ const link = safeUrl ? ` ↗` : '';
+ return `
+
+
`;
+ }).join('');
+ }
+
+ public updateStock(data: StockIndexData): void {
+ const el = this.overlay.querySelector('.stock-loading');
+ if (!el) return;
+
+ if (!data.available) {
+ el.remove();
+ return;
+ }
+
+ const pct = parseFloat(data.weekChangePercent);
+ const sign = pct >= 0 ? '+' : '';
+ const cls = pct >= 0 ? 'stock-up' : 'stock-down';
+ const arrow = pct >= 0 ? '📈' : '📉';
+ el.className = `signal-chip stock ${cls}`;
+ el.innerHTML = `${arrow} ${escapeHtml(data.indexName)}: ${sign}${data.weekChangePercent}% (1W)`;
+ }
+
+ public updateNews(headlines: NewsItem[]): void {
+ const section = this.overlay.querySelector('.cb-news-section') as HTMLElement | null;
+ const content = this.overlay.querySelector('.cb-news-content');
+ if (!section || !content || headlines.length === 0) return;
+
+ const items = headlines.slice(0, 8);
+ this.currentHeadlineCount = items.length;
+ this.currentHeadlines = items;
+ section.style.display = '';
+
+ content.innerHTML = items.map((item, i) => {
+ const safeUrl = sanitizeUrl(item.link);
+ const threatColor = item.threat?.level === 'critical' ? getCSSColor('--threat-critical')
+ : item.threat?.level === 'high' ? getCSSColor('--threat-high')
+ : item.threat?.level === 'medium' ? getCSSColor('--threat-medium')
+ : getCSSColor('--threat-info');
+ const timeAgo = this.timeAgo(item.pubDate);
+ const cardBody = `
+
+ ${escapeHtml(m.title.slice(0, 100))}${link}
+
+ ${vol ? `${vol}
` : ''}
+
+
`;
+ if (safeUrl) {
+ return `${cardBody}`;
+ }
+ return `${escapeHtml(item.title)}
+
+ ${cardBody}
`;
+ }).join('');
+ }
+
+
+ public updateInfrastructure(countryCode: string): void {
+ const bounds = CountryBriefPage.BRIEF_BOUNDS[countryCode];
+ if (!bounds) return;
+
+ const centroidLat = (bounds.n + bounds.s) / 2;
+ const centroidLon = (bounds.e + bounds.w) / 2;
+
+ const assets = getNearbyInfrastructure(centroidLat, centroidLon, ['pipeline', 'cable', 'datacenter', 'base', 'nuclear']);
+
+ const nearbyPorts = PORTS
+ .map((p: Port) => ({ port: p, dist: haversineDistanceKm(centroidLat, centroidLon, p.lat, p.lon) }))
+ .filter(({ dist }) => dist <= 600)
+ .sort((a, b) => a.dist - b.dist)
+ .slice(0, 5);
+
+ const grouped = new Map`;
+ html += `
`;
+ }
+
+ content.innerHTML = html;
+ section.style.display = '';
+ }
+
+ public getTimelineMount(): HTMLElement | null {
+ return this.overlay.querySelector('.cb-timeline-mount');
+ }
+
+ public getCode(): string | null {
+ return this.currentCode;
+ }
+
+ public getName(): string | null {
+ return this.currentName;
+ }
+
+ private timeAgo(date: Date): string {
+ const ms = Date.now() - new Date(date).getTime();
+ const hours = Math.floor(ms / 3600000);
+ if (hours < 1) return t('modals.countryBrief.timeAgo.m', { count: Math.floor(ms / 60000) });
+ if (hours < 24) return t('modals.countryBrief.timeAgo.h', { count: hours });
+ return t('modals.countryBrief.timeAgo.d', { count: Math.floor(hours / 24) });
+ }
+
+ private formatBrief(text: string, headlineCount = 0): string {
+ let html = escapeHtml(text)
+ .replace(/\*\*(.*?)\*\*/g, '$1')
+ .replace(/\n\n/g, '${icon} ${label}
`;
+ for (const item of items) {
+ html += `${escapeHtml(item.name)}${Math.round(item.distanceKm)} km
`;
+ }
+ html += `')
+ .replace(/\n/g, '
')
+ .replace(/^/, '
') + .replace(/$/, '
'); + + if (headlineCount > 0) { + html = html.replace(/\[(\d{1,2})\]/g, (_match, numStr) => { + const n = parseInt(numStr, 10); + if (n >= 1 && n <= headlineCount) { + return `[${n}]`; + } + return `[${numStr}]`; + }); + } + + return html; + } + + private exportBrief(format: 'json' | 'csv'): void { + if (!this.currentCode || !this.currentName) return; + const data: CountryBriefExport = { + country: this.currentName, + code: this.currentCode, + generatedAt: new Date().toISOString(), + }; + if (this.currentScore) { + data.score = this.currentScore.score; + data.level = this.currentScore.level; + data.trend = this.currentScore.trend; + data.components = this.currentScore.components; + } + if (this.currentSignals) { + data.signals = { + protests: this.currentSignals.protests, + militaryFlights: this.currentSignals.militaryFlights, + militaryVessels: this.currentSignals.militaryVessels, + outages: this.currentSignals.outages, + earthquakes: this.currentSignals.earthquakes, + displacementOutflow: this.currentSignals.displacementOutflow, + climateStress: this.currentSignals.climateStress, + conflictEvents: this.currentSignals.conflictEvents, + }; + } + if (this.currentBrief) data.brief = this.currentBrief; + if (this.currentHeadlines.length > 0) { + data.headlines = this.currentHeadlines.map(h => ({ + title: h.title, + source: h.source, + link: h.link, + pubDate: h.pubDate ? new Date(h.pubDate).toISOString() : undefined, + })); + } + if (format === 'json') exportCountryBriefJSON(data); + else exportCountryBriefCSV(data); + } + + public hide(): void { + this.overlay.classList.remove('active'); + this.currentCode = null; + this.currentName = null; + this.onCloseCallback?.(); + } + + public onClose(cb: () => void): void { + this.onCloseCallback = cb; + } + + public isVisible(): boolean { + return this.overlay.classList.contains('active'); + } +} diff --git a/src/components/CountryIntelModal.ts b/src/components/CountryIntelModal.ts new file mode 100644 index 000000000..b538b7629 --- /dev/null +++ b/src/components/CountryIntelModal.ts @@ -0,0 +1,283 @@ +/** + * CountryIntelModal - Shows AI-generated intelligence brief when user clicks a country + */ +import { escapeHtml } from '@/utils/sanitize'; +import { t } from '@/services/i18n'; +import { sanitizeUrl } from '@/utils/sanitize'; +import { getCSSColor } from '@/utils'; +import type { CountryScore } from '@/services/country-instability'; +import type { PredictionMarket } from '@/types'; + +interface CountryIntelData { + brief: string; + country: string; + code: string; + cached?: boolean; + generatedAt?: string; + error?: string; +} + +export interface StockIndexData { + available: boolean; + code: string; + symbol: string; + indexName: string; + price: string; + weekChangePercent: string; + currency: string; + cached?: boolean; +} + +interface ActiveSignals { + protests: number; + militaryFlights: number; + militaryVessels: number; + outages: number; + earthquakes: number; +} + +export class CountryIntelModal { + private overlay: HTMLElement; + private contentEl: HTMLElement; + private headerEl: HTMLElement; + private onCloseCallback?: () => void; + private onShareStory?: (code: string, name: string) => void; + private currentCode: string | null = null; + private currentName: string | null = null; + + constructor() { + this.overlay = document.createElement('div'); + this.overlay.className = 'country-intel-overlay'; + this.overlay.innerHTML = ` +
+
+ `;
+ document.body.appendChild(this.overlay);
+
+ this.headerEl = this.overlay.querySelector('.country-intel-title')!;
+ this.contentEl = this.overlay.querySelector('.country-intel-content')!;
+
+ this.overlay.querySelector('.country-intel-close')?.addEventListener('click', () => this.hide());
+ this.overlay.addEventListener('click', (e) => {
+ if ((e.target as HTMLElement).classList.contains('country-intel-overlay')) this.hide();
+ });
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && this.overlay.classList.contains('active')) this.hide();
+ });
+ }
+
+ private countryFlag(code: string): string {
+ try {
+ return code
+ .toUpperCase()
+ .split('')
+ .map((c) => String.fromCodePoint(0x1f1e6 + c.charCodeAt(0) - 65))
+ .join('');
+ } catch {
+ return '🌍';
+ }
+ }
+
+ private levelBadge(level: string): string {
+ const varMap: Record
+
+
+
+
+
+
+ `;
+ this.overlay.classList.add('active');
+ }
+
+ public show(country: string, code: string, score: CountryScore | null, signals?: ActiveSignals): void {
+ this.currentCode = code;
+ this.currentName = country;
+ const flag = this.countryFlag(code);
+ let html = '';
+ this.overlay.classList.add('active');
+
+ this.headerEl.innerHTML = `
+ ${flag}
+ ${escapeHtml(country)}
+ ${score ? this.levelBadge(score.level) : ''}
+
+ `;
+
+ if (score) {
+ html += `
+
+
+
+ ${t('modals.countryIntel.locating')}
+
+
+
+ `;
+ }
+
+ const chips: string[] = [];
+ if (signals) {
+ if (signals.protests > 0) chips.push(`📢 ${signals.protests} ${t('modals.countryIntel.protests')}`);
+ if (signals.militaryFlights > 0) chips.push(`✈️ ${signals.militaryFlights} ${t('modals.countryIntel.militaryAircraft')}`);
+ if (signals.militaryVessels > 0) chips.push(`⚓ ${signals.militaryVessels} ${t('modals.countryIntel.militaryVessels')}`);
+ if (signals.outages > 0) chips.push(`🌐 ${signals.outages} ${t('modals.countryIntel.outages')}`);
+ if (signals.earthquakes > 0) chips.push(`🌍 ${signals.earthquakes} ${t('modals.countryIntel.earthquakes')}`);
+ }
+ chips.push(`📈 ${t('modals.countryIntel.loadingIndex')}`);
+ html += `${t('modals.countryIntel.instabilityIndex')} ${this.scoreBar(score.score)}
+
+ 📢 ${score.components.unrest.toFixed(0)}
+ ⚔ ${score.components.conflict.toFixed(0)}
+ 🛡️ ${score.components.security.toFixed(0)}
+ 📡 ${score.components.information.toFixed(0)}
+ ${score.trend === 'rising' ? '↗' : score.trend === 'falling' ? '↘' : '→'} ${score.trend}
+
+ ${chips.join('')}
`;
+
+ html += `${t('modals.countryIntel.loadingMarkets')}
`;
+
+ html += `
+
+
+ `;
+
+ this.contentEl.innerHTML = html;
+
+ const shareBtn = this.headerEl.querySelector('.country-intel-share-btn');
+ shareBtn?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ if (this.currentCode && this.currentName && this.onShareStory) {
+ this.onShareStory(this.currentCode, this.currentName);
+ }
+ });
+ }
+
+ public updateBrief(data: CountryIntelData & { skipped?: boolean; reason?: string; fallback?: boolean }): void {
+ if (this.currentCode !== data.code && this.currentCode !== '__loading__') return;
+
+ // If modal closed, don't update
+ if (!this.isVisible()) return;
+
+ if (data.error || data.skipped || !data.brief) {
+ const msg = data.error || data.reason || t('modals.countryIntel.unavailable');
+ const briefSection = this.contentEl.querySelector('.intel-brief-section');
+ if (briefSection) {
+ briefSection.innerHTML = `
+
+
+
+
+ ${t('modals.countryIntel.generatingBrief')}
+
+ ${escapeHtml(msg)}
`;
+ }
+ return;
+ }
+
+ const briefSection = this.contentEl.querySelector('.intel-brief-section');
+ if (!briefSection) return;
+
+ const formatted = this.formatBrief(data.brief);
+ briefSection.innerHTML = `
+ ${formatted}
+
+ `;
+ }
+
+ public updateMarkets(markets: PredictionMarket[]): void {
+ const section = this.contentEl.querySelector('.country-markets-section');
+ if (!section) return;
+
+ if (markets.length === 0) {
+ section.innerHTML = `${t('modals.countryIntel.noMarkets')}`;
+ return;
+ }
+
+ const items = markets.map(market => {
+ const href = sanitizeUrl(market.url || '#') || '#';
+ return `
+
+
+ = {
+ protest: '#ffaa00',
+ conflict: '#ff4444',
+ natural: '#b478ff',
+ military: '#64b4ff',
+};
+
+const SEVERITY_RADIUS: Record = {
+ low: 4,
+ medium: 5,
+ high: 7,
+ critical: 9,
+};
+
+const MARGIN = { top: 20, right: 20, bottom: 30, left: 80 };
+const HEIGHT = 200;
+const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;
+
+export class CountryTimeline {
+ private container: HTMLElement;
+ private svg: d3.Selection | null = null;
+ private tooltip: HTMLDivElement | null = null;
+ private resizeObserver: ResizeObserver | null = null;
+ private currentEvents: TimelineEvent[] = [];
+
+ constructor(container: HTMLElement) {
+ this.container = container;
+ this.createTooltip();
+ this.resizeObserver = new ResizeObserver(() => {
+ if (this.currentEvents.length > 0) this.render(this.currentEvents);
+ });
+ this.resizeObserver.observe(this.container);
+
+ window.addEventListener('theme-changed', () => {
+ // Re-create tooltip with new theme colors
+ if (this.tooltip) {
+ this.tooltip.remove();
+ this.tooltip = null;
+ }
+ this.createTooltip();
+ // Re-render chart with new colors
+ if (this.currentEvents.length > 0) this.render(this.currentEvents);
+ });
+ }
+
+ private createTooltip(): void {
+ this.tooltip = document.createElement('div');
+ Object.assign(this.tooltip.style, {
+ position: 'absolute',
+ pointerEvents: 'none',
+ background: getCSSColor('--bg'),
+ border: `1px solid ${getCSSColor('--border')}`,
+ borderRadius: '6px',
+ padding: '6px 10px',
+ fontSize: '12px',
+ color: getCSSColor('--text'),
+ zIndex: '9999',
+ display: 'none',
+ whiteSpace: 'nowrap',
+ boxShadow: `0 2px 8px ${getCSSColor('--shadow-color')}`,
+ });
+ this.container.style.position = 'relative';
+ this.container.appendChild(this.tooltip);
+ }
+
+ render(events: TimelineEvent[]): void {
+ this.currentEvents = events;
+ if (this.svg) this.svg.remove();
+
+ const width = this.container.clientWidth;
+ if (width <= 0) return;
+
+ const innerW = width - MARGIN.left - MARGIN.right;
+ const innerH = HEIGHT - MARGIN.top - MARGIN.bottom;
+
+ this.svg = d3
+ .select(this.container)
+ .append('svg')
+ .attr('width', width)
+ .attr('height', HEIGHT)
+ .attr('style', 'display:block;');
+
+ const g = this.svg
+ .append('g')
+ .attr('transform', `translate(${MARGIN.left},${MARGIN.top})`);
+
+ const now = Date.now();
+ const xScale = d3
+ .scaleTime()
+ .domain([new Date(now - SEVEN_DAYS_MS), new Date(now)])
+ .range([0, innerW]);
+
+ const yScale = d3
+ .scaleBand()
+ .domain(LANES)
+ .range([0, innerH])
+ .padding(0.2);
+
+ this.drawGrid(g, xScale, innerH);
+ this.drawAxes(g, xScale, yScale, innerH);
+ this.drawNowMarker(g, xScale, new Date(now), innerH);
+ this.drawEmptyLaneLabels(g, events, yScale, innerW);
+ this.drawEvents(g, events, xScale, yScale);
+ }
+
+ private drawGrid(
+ g: d3.Selection,
+ xScale: d3.ScaleTime,
+ innerH: number,
+ ): void {
+ const ticks = xScale.ticks(6);
+ g.selectAll('.grid-line')
+ .data(ticks)
+ .join('line')
+ .attr('x1', (d) => xScale(d))
+ .attr('x2', (d) => xScale(d))
+ .attr('y1', 0)
+ .attr('y2', innerH)
+ .attr('stroke', getCSSColor('--border-subtle'))
+ .attr('stroke-width', 1);
+ }
+
+ private drawAxes(
+ g: d3.Selection,
+ xScale: d3.ScaleTime,
+ yScale: d3.ScaleBand,
+ innerH: number,
+ ): void {
+ const xAxis = d3
+ .axisBottom(xScale)
+ .ticks(6)
+ .tickFormat(d3.timeFormat('%b %d') as (d: Date | d3.NumberValue, i: number) => string);
+
+ const xAxisG = g
+ .append('g')
+ .attr('transform', `translate(0,${innerH})`)
+ .call(xAxis);
+
+ xAxisG.selectAll('text').attr('fill', getCSSColor('--text-dim')).attr('font-size', '10px');
+ xAxisG.selectAll('line').attr('stroke', getCSSColor('--border'));
+ xAxisG.select('.domain').attr('stroke', getCSSColor('--border'));
+
+ const laneLabels: Record = {
+ protest: 'Protest',
+ conflict: 'Conflict',
+ natural: 'Natural',
+ military: 'Military',
+ };
+
+ g.selectAll('.lane-label')
+ .data(LANES)
+ .join('text')
+ .attr('x', -10)
+ .attr('y', (d) => (yScale(d) ?? 0) + yScale.bandwidth() / 2)
+ .attr('text-anchor', 'end')
+ .attr('dominant-baseline', 'central')
+ .attr('fill', (d: TimelineEvent['lane']) => LANE_COLORS[d])
+ .attr('font-size', '11px')
+ .attr('font-weight', '500')
+ .text((d: TimelineEvent['lane']) => laneLabels[d] || d);
+ }
+
+ private drawNowMarker(
+ g: d3.Selection,
+ xScale: d3.ScaleTime,
+ now: Date,
+ innerH: number,
+ ): void {
+ const x = xScale(now);
+ g.append('line')
+ .attr('x1', x)
+ .attr('x2', x)
+ .attr('y1', 0)
+ .attr('y2', innerH)
+ .attr('stroke', getCSSColor('--text'))
+ .attr('stroke-width', 1)
+ .attr('stroke-dasharray', '4,3')
+ .attr('opacity', 0.6);
+
+ g.append('text')
+ .attr('x', x)
+ .attr('y', -6)
+ .attr('text-anchor', 'middle')
+ .attr('fill', getCSSColor('--text-muted'))
+ .attr('font-size', '9px')
+ .text(t('components.countryTimeline.now'));
+ }
+
+ private drawEmptyLaneLabels(
+ g: d3.Selection,
+ events: TimelineEvent[],
+ yScale: d3.ScaleBand,
+ innerW: number,
+ ): void {
+ const populatedLanes = new Set(events.map((e) => e.lane));
+ const emptyLanes = LANES.filter((l) => !populatedLanes.has(l));
+
+ g.selectAll('.empty-label')
+ .data(emptyLanes)
+ .join('text')
+ .attr('x', innerW / 2)
+ .attr('y', (d) => (yScale(d) ?? 0) + yScale.bandwidth() / 2)
+ .attr('text-anchor', 'middle')
+ .attr('dominant-baseline', 'central')
+ .attr('fill', getCSSColor('--text-ghost'))
+ .attr('font-size', '10px')
+ .attr('font-style', 'italic')
+ .text(t('components.countryTimeline.noEventsIn7Days'));
+ }
+
+ private drawEvents(
+ g: d3.Selection,
+ events: TimelineEvent[],
+ xScale: d3.ScaleTime,
+ yScale: d3.ScaleBand,
+ ): void {
+ const tooltip = this.tooltip!;
+ const container = this.container;
+ const fmt = d3.timeFormat('%b %d, %H:%M');
+
+ g.selectAll('.event-circle')
+ .data(events)
+ .join('circle')
+ .attr('cx', (d) => xScale(new Date(d.timestamp)))
+ .attr('cy', (d) => (yScale(d.lane) ?? 0) + yScale.bandwidth() / 2)
+ .attr('r', (d) => SEVERITY_RADIUS[d.severity ?? 'medium'] ?? 5)
+ .attr('fill', (d) => LANE_COLORS[d.lane])
+ .attr('opacity', 0.85)
+ .attr('cursor', 'pointer')
+ .attr('stroke', getCSSColor('--shadow-color'))
+ .attr('stroke-width', 0.5)
+ .on('mouseenter', function (event: MouseEvent, d: TimelineEvent) {
+ d3.select(this).attr('opacity', 1).attr('stroke', getCSSColor('--text')).attr('stroke-width', 1.5);
+ const dateStr = fmt(new Date(d.timestamp));
+ tooltip.innerHTML = `${escapeHtml(d.label)}
${escapeHtml(dateStr)}`; + tooltip.style.display = 'block'; + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left + 12; + const y = event.clientY - rect.top - 10; + tooltip.style.left = `${x}px`; + tooltip.style.top = `${y}px`; + }) + .on('mousemove', function (event: MouseEvent) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left + 12; + const y = event.clientY - rect.top - 10; + tooltip.style.left = `${x}px`; + tooltip.style.top = `${y}px`; + }) + .on('mouseleave', function () { + d3.select(this).attr('opacity', 0.85).attr('stroke', getCSSColor('--shadow-color')).attr('stroke-width', 0.5); + tooltip.style.display = 'none'; + }); + } + + destroy(): void { + if (this.resizeObserver) { + this.resizeObserver.disconnect(); + this.resizeObserver = null; + } + if (this.svg) { + this.svg.remove(); + this.svg = null; + } + if (this.tooltip) { + this.tooltip.remove(); + this.tooltip = null; + } + this.currentEvents = []; + } +} diff --git a/src/components/DeckGLMap.ts b/src/components/DeckGLMap.ts new file mode 100644 index 000000000..f6d2bdeac --- /dev/null +++ b/src/components/DeckGLMap.ts @@ -0,0 +1,3852 @@ +/** + * DeckGLMap - WebGL-accelerated map visualization for desktop + * Uses deck.gl for high-performance rendering of large datasets + * Mobile devices gracefully degrade to the D3/SVG-based Map component + */ +import { MapboxOverlay } from '@deck.gl/mapbox'; +import type { Layer, LayersList, PickingInfo } from '@deck.gl/core'; +import { GeoJsonLayer, ScatterplotLayer, PathLayer, IconLayer, TextLayer } from '@deck.gl/layers'; +import maplibregl from 'maplibre-gl'; +import Supercluster from 'supercluster'; +import type { + MapLayers, + Hotspot, + NewsItem, + Earthquake, + InternetOutage, + RelatedAsset, + AssetType, + AisDisruptionEvent, + AisDensityZone, + CableAdvisory, + RepairShip, + SocialUnrestEvent, + AIDataCenter, + AirportDelayAlert, + MilitaryFlight, + MilitaryVessel, + MilitaryFlightCluster, + MilitaryVesselCluster, + NaturalEvent, + UcdpGeoEvent, + DisplacementFlow, + ClimateAnomaly, + MapProtestCluster, + MapTechHQCluster, + MapTechEventCluster, + MapDatacenterCluster, + CyberThreat, +} from '@/types'; +import { ArcLayer } from '@deck.gl/layers'; +import { HeatmapLayer } from '@deck.gl/aggregation-layers'; +import type { WeatherAlert } from '@/services/weather'; +import { escapeHtml } from '@/utils/sanitize'; +import { t } from '@/services/i18n'; +import { debounce, rafSchedule, getCurrentTheme } from '@/utils/index'; +import { + INTEL_HOTSPOTS, + CONFLICT_ZONES, + MILITARY_BASES, + UNDERSEA_CABLES, + NUCLEAR_FACILITIES, + GAMMA_IRRADIATORS, + PIPELINES, + PIPELINE_COLORS, + STRATEGIC_WATERWAYS, + ECONOMIC_CENTERS, + AI_DATA_CENTERS, + SITE_VARIANT, + STARTUP_HUBS, + ACCELERATORS, + TECH_HQS, + CLOUD_REGIONS, + PORTS, + SPACEPORTS, + APT_GROUPS, + CRITICAL_MINERALS, + STOCK_EXCHANGES, + FINANCIAL_CENTERS, + CENTRAL_BANKS, + COMMODITY_HUBS, + GULF_INVESTMENTS, +} from '@/config'; +import type { GulfInvestment } from '@/types'; +import { MapPopup, type PopupType } from './MapPopup'; +import { + updateHotspotEscalation, + getHotspotEscalation, + setMilitaryData, + setCIIGetter, + setGeoAlertGetter, +} from '@/services/hotspot-escalation'; +import { getCountryScore } from '@/services/country-instability'; +import { getAlertsNearLocation } from '@/services/geo-convergence'; +import { getCountriesGeoJson, getCountryAtCoordinates } from '@/services/country-geometry'; + +export type TimeRange = '1h' | '6h' | '24h' | '48h' | '7d' | 'all'; +export type DeckMapView = 'global' | 'america' | 'mena' | 'eu' | 'asia' | 'latam' | 'africa' | 'oceania'; +type MapInteractionMode = 'flat' | '3d'; + +export interface CountryClickPayload { + lat: number; + lon: number; + code?: string; + name?: string; +} + +interface DeckMapState { + zoom: number; + pan: { x: number; y: number }; + view: DeckMapView; + layers: MapLayers; + timeRange: TimeRange; +} + +interface HotspotWithBreaking extends Hotspot { + hasBreaking?: boolean; +} + +interface TechEventMarker { + id: string; + title: string; + location: string; + lat: number; + lng: number; + country: string; + startDate: string; + endDate: string; + url: string | null; + daysUntil: number; +} + +// View presets with longitude, latitude, zoom +const VIEW_PRESETS: Record = {
+ global: { longitude: 0, latitude: 20, zoom: 1.5 },
+ america: { longitude: -95, latitude: 38, zoom: 3 },
+ mena: { longitude: 45, latitude: 28, zoom: 3.5 },
+ eu: { longitude: 15, latitude: 50, zoom: 3.5 },
+ asia: { longitude: 105, latitude: 35, zoom: 3 },
+ latam: { longitude: -60, latitude: -15, zoom: 3 },
+ africa: { longitude: 20, latitude: 5, zoom: 3 },
+ oceania: { longitude: 135, latitude: -25, zoom: 3.5 },
+};
+
+const MAP_INTERACTION_MODE: MapInteractionMode =
+ import.meta.env.VITE_MAP_INTERACTION_MODE === 'flat' ? 'flat' : '3d';
+
+// Theme-aware basemap vector style URLs (English labels, no local scripts)
+const DARK_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+const LIGHT_STYLE = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+
+// Zoom thresholds for layer visibility and labels (matches old Map.ts)
+// Zoom-dependent layer visibility and labels
+const LAYER_ZOOM_THRESHOLDS: Partial> = {
+ bases: { minZoom: 3, showLabels: 5 },
+ nuclear: { minZoom: 3 },
+ conflicts: { minZoom: 1, showLabels: 3 },
+ economic: { minZoom: 3 },
+ natural: { minZoom: 1, showLabels: 2 },
+ datacenters: { minZoom: 5 },
+ irradiators: { minZoom: 4 },
+ spaceports: { minZoom: 3 },
+ gulfInvestments: { minZoom: 2, showLabels: 5 },
+};
+// Export for external use
+export { LAYER_ZOOM_THRESHOLDS };
+
+// Theme-aware overlay color function — refreshed each buildLayers() call
+function getOverlayColors() {
+ const isLight = getCurrentTheme() === 'light';
+ return {
+ // Threat dots: IDENTICAL in both modes (user locked decision)
+ hotspotHigh: [255, 68, 68, 200] as [number, number, number, number],
+ hotspotElevated: [255, 165, 0, 200] as [number, number, number, number],
+ hotspotLow: [255, 255, 0, 180] as [number, number, number, number],
+
+ // Conflict zone fills: more transparent in light mode
+ conflict: isLight
+ ? [255, 0, 0, 60] as [number, number, number, number]
+ : [255, 0, 0, 100] as [number, number, number, number],
+
+ // Infrastructure/category markers: darker variants in light mode for map readability
+ base: [0, 150, 255, 200] as [number, number, number, number],
+ nuclear: isLight
+ ? [180, 120, 0, 220] as [number, number, number, number]
+ : [255, 215, 0, 200] as [number, number, number, number],
+ datacenter: isLight
+ ? [13, 148, 136, 200] as [number, number, number, number]
+ : [0, 255, 200, 180] as [number, number, number, number],
+ cable: [0, 200, 255, 150] as [number, number, number, number],
+ cableHighlight: [255, 100, 100, 200] as [number, number, number, number],
+ earthquake: [255, 100, 50, 200] as [number, number, number, number],
+ vesselMilitary: [255, 100, 100, 220] as [number, number, number, number],
+ flightMilitary: [255, 50, 50, 220] as [number, number, number, number],
+ protest: [255, 150, 0, 200] as [number, number, number, number],
+ outage: [255, 50, 50, 180] as [number, number, number, number],
+ weather: [100, 150, 255, 180] as [number, number, number, number],
+ startupHub: isLight
+ ? [22, 163, 74, 220] as [number, number, number, number]
+ : [0, 255, 150, 200] as [number, number, number, number],
+ techHQ: [100, 200, 255, 200] as [number, number, number, number],
+ accelerator: isLight
+ ? [180, 120, 0, 220] as [number, number, number, number]
+ : [255, 200, 0, 200] as [number, number, number, number],
+ cloudRegion: [150, 100, 255, 180] as [number, number, number, number],
+ stockExchange: isLight
+ ? [20, 120, 200, 220] as [number, number, number, number]
+ : [80, 200, 255, 210] as [number, number, number, number],
+ financialCenter: isLight
+ ? [0, 150, 110, 215] as [number, number, number, number]
+ : [0, 220, 150, 200] as [number, number, number, number],
+ centralBank: isLight
+ ? [180, 120, 0, 220] as [number, number, number, number]
+ : [255, 210, 80, 210] as [number, number, number, number],
+ commodityHub: isLight
+ ? [190, 95, 40, 220] as [number, number, number, number]
+ : [255, 150, 80, 200] as [number, number, number, number],
+ gulfInvestmentSA: [0, 168, 107, 220] as [number, number, number, number],
+ gulfInvestmentUAE: [255, 0, 100, 220] as [number, number, number, number],
+ ucdpStateBased: [255, 50, 50, 200] as [number, number, number, number],
+ ucdpNonState: [255, 165, 0, 200] as [number, number, number, number],
+ ucdpOneSided: [255, 255, 0, 200] as [number, number, number, number],
+ };
+}
+// Initialize and refresh on every buildLayers() call
+let COLORS = getOverlayColors();
+
+// SVG icons as data URLs for different marker shapes
+const MARKER_ICONS = {
+ // Square - for datacenters
+ square: 'data:image/svg+xml;base64,' + btoa(``),
+ // Diamond - for hotspots
+ diamond: 'data:image/svg+xml;base64,' + btoa(``),
+ // Triangle up - for military bases
+ triangleUp: 'data:image/svg+xml;base64,' + btoa(``),
+ // Hexagon - for nuclear
+ hexagon: 'data:image/svg+xml;base64,' + btoa(``),
+ // Circle - fallback
+ circle: 'data:image/svg+xml;base64,' + btoa(``),
+ // Star - for special markers
+ star: 'data:image/svg+xml;base64,' + btoa(``),
+};
+
+export class DeckGLMap {
+ private static readonly MAX_CLUSTER_LEAVES = 200;
+
+ private container: HTMLElement;
+ private deckOverlay: MapboxOverlay | null = null;
+ private maplibreMap: maplibregl.Map | null = null;
+ private state: DeckMapState;
+ private popup: MapPopup;
+
+ // Data stores
+ private hotspots: HotspotWithBreaking[];
+ private earthquakes: Earthquake[] = [];
+ private weatherAlerts: WeatherAlert[] = [];
+ private outages: InternetOutage[] = [];
+ private cyberThreats: CyberThreat[] = [];
+ private aisDisruptions: AisDisruptionEvent[] = [];
+ private aisDensity: AisDensityZone[] = [];
+ private cableAdvisories: CableAdvisory[] = [];
+ private repairShips: RepairShip[] = [];
+ private protests: SocialUnrestEvent[] = [];
+ private militaryFlights: MilitaryFlight[] = [];
+ private militaryFlightClusters: MilitaryFlightCluster[] = [];
+ private militaryVessels: MilitaryVessel[] = [];
+ private militaryVesselClusters: MilitaryVesselCluster[] = [];
+ private naturalEvents: NaturalEvent[] = [];
+ private firmsFireData: Array<{ lat: number; lon: number; brightness: number; frp: number; confidence: number; region: string; acq_date: string; daynight: string }> = [];
+ private techEvents: TechEventMarker[] = [];
+ private flightDelays: AirportDelayAlert[] = [];
+ private news: NewsItem[] = [];
+ private newsLocations: Array<{ lat: number; lon: number; title: string; threatLevel: string; timestamp?: Date }> = [];
+ private newsLocationFirstSeen = new Map();
+ private ucdpEvents: UcdpGeoEvent[] = [];
+ private displacementFlows: DisplacementFlow[] = [];
+ private climateAnomalies: ClimateAnomaly[] = [];
+
+ // Country highlight state
+ private countryGeoJsonLoaded = false;
+ private countryHoverSetup = false;
+ private highlightedCountryCode: string | null = null;
+
+ // Callbacks
+ private onHotspotClick?: (hotspot: Hotspot) => void;
+ private onTimeRangeChange?: (range: TimeRange) => void;
+ private onCountryClick?: (country: CountryClickPayload) => void;
+ private onLayerChange?: (layer: keyof MapLayers, enabled: boolean) => void;
+ private onStateChange?: (state: DeckMapState) => void;
+
+ // Highlighted assets
+ private highlightedAssets: Record> = {
+ pipeline: new Set(),
+ cable: new Set(),
+ datacenter: new Set(),
+ base: new Set(),
+ nuclear: new Set(),
+ };
+
+ private renderScheduled = false;
+ private renderPaused = false;
+ private renderPending = false;
+ private webglLost = false;
+ private resizeObserver: ResizeObserver | null = null;
+
+ private layerCache: Map = new Map();
+ private lastZoomThreshold = 0;
+ private protestSC: Supercluster | null = null;
+ private techHQSC: Supercluster | null = null;
+ private techEventSC: Supercluster | null = null;
+ private datacenterSC: Supercluster | null = null;
+ private protestClusters: MapProtestCluster[] = [];
+ private techHQClusters: MapTechHQCluster[] = [];
+ private techEventClusters: MapTechEventCluster[] = [];
+ private datacenterClusters: MapDatacenterCluster[] = [];
+ private lastSCZoom = -1;
+ private lastSCBoundsKey = '';
+ private lastSCMask = '';
+ private protestSuperclusterSource: SocialUnrestEvent[] = [];
+ private newsPulseIntervalId: ReturnType | null = null;
+ private readonly startupTime = Date.now();
+ private lastCableHighlightSignature = '';
+ private lastPipelineHighlightSignature = '';
+ private debouncedRebuildLayers: () => void;
+ private rafUpdateLayers: () => void;
+ private moveTimeoutId: ReturnType | null = null;
+
+ constructor(container: HTMLElement, initialState: DeckMapState) {
+ this.container = container;
+ this.state = initialState;
+ this.hotspots = [...INTEL_HOTSPOTS];
+
+ this.rebuildTechHQSupercluster();
+ this.rebuildDatacenterSupercluster();
+
+ this.debouncedRebuildLayers = debounce(() => {
+ if (this.renderPaused || this.webglLost) return;
+ this.maplibreMap?.resize();
+ this.deckOverlay?.setProps({ layers: this.buildLayers() });
+ }, 150);
+ this.rafUpdateLayers = rafSchedule(() => {
+ if (this.renderPaused || this.webglLost) return;
+ this.deckOverlay?.setProps({ layers: this.buildLayers() });
+ });
+
+ this.setupDOM();
+ this.popup = new MapPopup(container);
+
+ window.addEventListener('theme-changed', (e: Event) => {
+ const theme = (e as CustomEvent).detail?.theme as 'dark' | 'light';
+ if (theme) {
+ this.switchBasemap(theme);
+ this.render(); // Rebuilds Deck.GL layers with new theme-aware colors
+ }
+ });
+
+ this.initMapLibre();
+
+ this.maplibreMap?.on('load', () => {
+ this.initDeck();
+ this.loadCountryBoundaries();
+ this.render();
+ });
+
+ this.setupResizeObserver();
+
+ this.createControls();
+ this.createTimeSlider();
+ this.createLayerToggles();
+ this.createLegend();
+ }
+
+ private setupDOM(): void {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'deckgl-map-wrapper';
+ wrapper.id = 'deckglMapWrapper';
+ wrapper.style.cssText = 'position: relative; width: 100%; height: 100%; overflow: hidden;';
+
+ // MapLibre container - deck.gl renders directly into MapLibre via MapboxOverlay
+ const mapContainer = document.createElement('div');
+ mapContainer.id = 'deckgl-basemap';
+ mapContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;';
+ wrapper.appendChild(mapContainer);
+
+ this.container.appendChild(wrapper);
+ }
+
+ private initMapLibre(): void {
+ const preset = VIEW_PRESETS[this.state.view];
+ const initialTheme = getCurrentTheme();
+
+ this.maplibreMap = new maplibregl.Map({
+ container: 'deckgl-basemap',
+ style: initialTheme === 'light' ? LIGHT_STYLE : DARK_STYLE,
+ center: [preset.longitude, preset.latitude],
+ zoom: preset.zoom,
+ renderWorldCopies: false,
+ attributionControl: false,
+ interactive: true,
+ ...(MAP_INTERACTION_MODE === 'flat'
+ ? {
+ maxPitch: 0,
+ pitchWithRotate: false,
+ dragRotate: false,
+ touchPitch: false,
+ }
+ : {}),
+ });
+
+ const canvas = this.maplibreMap.getCanvas();
+ canvas.addEventListener('webglcontextlost', (e) => {
+ e.preventDefault();
+ this.webglLost = true;
+ console.warn('[DeckGLMap] WebGL context lost — will restore when browser recovers');
+ });
+ canvas.addEventListener('webglcontextrestored', () => {
+ this.webglLost = false;
+ console.info('[DeckGLMap] WebGL context restored');
+ this.maplibreMap?.triggerRepaint();
+ });
+ }
+
+ private initDeck(): void {
+ if (!this.maplibreMap) return;
+
+ this.deckOverlay = new MapboxOverlay({
+ interleaved: true,
+ layers: this.buildLayers(),
+ getTooltip: (info: PickingInfo) => this.getTooltip(info),
+ onClick: (info: PickingInfo) => this.handleClick(info),
+ pickingRadius: 10,
+ useDevicePixels: window.devicePixelRatio > 2 ? 2 : true,
+ onError: (error: Error) => console.warn('[DeckGLMap] Render error (non-fatal):', error.message),
+ });
+
+ this.maplibreMap.addControl(this.deckOverlay as unknown as maplibregl.IControl);
+
+ this.maplibreMap.on('movestart', () => {
+ if (this.moveTimeoutId) {
+ clearTimeout(this.moveTimeoutId);
+ this.moveTimeoutId = null;
+ }
+ });
+
+ this.maplibreMap.on('moveend', () => {
+ this.lastSCZoom = -1;
+ this.rafUpdateLayers();
+ });
+
+ this.maplibreMap.on('move', () => {
+ if (this.moveTimeoutId) clearTimeout(this.moveTimeoutId);
+ this.moveTimeoutId = setTimeout(() => {
+ this.lastSCZoom = -1;
+ this.rafUpdateLayers();
+ }, 100);
+ });
+
+ this.maplibreMap.on('zoom', () => {
+ if (this.moveTimeoutId) clearTimeout(this.moveTimeoutId);
+ this.moveTimeoutId = setTimeout(() => {
+ this.lastSCZoom = -1;
+ this.rafUpdateLayers();
+ }, 100);
+ });
+
+ this.maplibreMap.on('zoomend', () => {
+ const currentZoom = Math.floor(this.maplibreMap?.getZoom() || 2);
+ const thresholdCrossed = Math.abs(currentZoom - this.lastZoomThreshold) >= 1;
+ if (thresholdCrossed) {
+ this.lastZoomThreshold = currentZoom;
+ this.debouncedRebuildLayers();
+ }
+ });
+ }
+
+ private setupResizeObserver(): void {
+ this.resizeObserver = new ResizeObserver(() => {
+ if (this.maplibreMap) {
+ this.maplibreMap.resize();
+ }
+ });
+ this.resizeObserver.observe(this.container);
+ }
+
+
+ private getSetSignature(set: Set): string {
+ return [...set].sort().join('|');
+ }
+
+ private hasRecentNews(now = Date.now()): boolean {
+ for (const ts of this.newsLocationFirstSeen.values()) {
+ if (now - ts < 30_000) return true;
+ }
+ return false;
+ }
+
+ private getTimeRangeMs(range: TimeRange = this.state.timeRange): number {
+ const ranges: Record = {
+ '1h': 60 * 60 * 1000,
+ '6h': 6 * 60 * 60 * 1000,
+ '24h': 24 * 60 * 60 * 1000,
+ '48h': 48 * 60 * 60 * 1000,
+ '7d': 7 * 24 * 60 * 60 * 1000,
+ 'all': Infinity,
+ };
+ return ranges[range];
+ }
+
+ private parseTime(value: Date | string | number | undefined | null): number | null {
+ if (value == null) return null;
+ const ts = value instanceof Date ? value.getTime() : new Date(value).getTime();
+ return Number.isFinite(ts) ? ts : null;
+ }
+
+ private filterByTime(
+ items: T[],
+ getTime: (item: T) => Date | string | number | undefined | null
+ ): T[] {
+ if (this.state.timeRange === 'all') return items;
+ const cutoff = Date.now() - this.getTimeRangeMs();
+ return items.filter((item) => {
+ const ts = this.parseTime(getTime(item));
+ return ts == null ? true : ts >= cutoff;
+ });
+ }
+
+ private getFilteredProtests(): SocialUnrestEvent[] {
+ return this.filterByTime(this.protests, (event) => event.time);
+ }
+
+ private filterMilitaryFlightClustersByTime(clusters: MilitaryFlightCluster[]): MilitaryFlightCluster[] {
+ return clusters
+ .map((cluster) => {
+ const flights = this.filterByTime(cluster.flights ?? [], (flight) => flight.lastSeen);
+ if (flights.length === 0) return null;
+ return {
+ ...cluster,
+ flights,
+ flightCount: flights.length,
+ };
+ })
+ .filter((cluster): cluster is MilitaryFlightCluster => cluster !== null);
+ }
+
+ private filterMilitaryVesselClustersByTime(clusters: MilitaryVesselCluster[]): MilitaryVesselCluster[] {
+ return clusters
+ .map((cluster) => {
+ const vessels = this.filterByTime(cluster.vessels ?? [], (vessel) => vessel.lastAisUpdate);
+ if (vessels.length === 0) return null;
+ return {
+ ...cluster,
+ vessels,
+ vesselCount: vessels.length,
+ };
+ })
+ .filter((cluster): cluster is MilitaryVesselCluster => cluster !== null);
+ }
+
+ private rebuildProtestSupercluster(source: SocialUnrestEvent[] = this.getFilteredProtests()): void {
+ this.protestSuperclusterSource = source;
+ const points = source.map((p, i) => ({
+ type: 'Feature' as const,
+ geometry: { type: 'Point' as const, coordinates: [p.lon, p.lat] as [number, number] },
+ properties: {
+ index: i,
+ country: p.country,
+ severity: p.severity,
+ eventType: p.eventType,
+ validated: Boolean(p.validated),
+ fatalities: Number.isFinite(p.fatalities) ? Number(p.fatalities) : 0,
+ },
+ }));
+ this.protestSC = new Supercluster({
+ radius: 60,
+ maxZoom: 14,
+ map: (props: Record) => ({
+ index: Number(props.index ?? 0),
+ country: String(props.country ?? ''),
+ maxSeverityRank: props.severity === 'high' ? 2 : props.severity === 'medium' ? 1 : 0,
+ riotCount: props.eventType === 'riot' ? 1 : 0,
+ highSeverityCount: props.severity === 'high' ? 1 : 0,
+ verifiedCount: props.validated ? 1 : 0,
+ totalFatalities: Number(props.fatalities ?? 0) || 0,
+ }),
+ reduce: (acc: Record, props: Record) => {
+ acc.maxSeverityRank = Math.max(Number(acc.maxSeverityRank ?? 0), Number(props.maxSeverityRank ?? 0));
+ acc.riotCount = Number(acc.riotCount ?? 0) + Number(props.riotCount ?? 0);
+ acc.highSeverityCount = Number(acc.highSeverityCount ?? 0) + Number(props.highSeverityCount ?? 0);
+ acc.verifiedCount = Number(acc.verifiedCount ?? 0) + Number(props.verifiedCount ?? 0);
+ acc.totalFatalities = Number(acc.totalFatalities ?? 0) + Number(props.totalFatalities ?? 0);
+ if (!acc.country && props.country) acc.country = props.country;
+ },
+ });
+ this.protestSC.load(points);
+ this.lastSCZoom = -1;
+ }
+
+ private rebuildTechHQSupercluster(): void {
+ const points = TECH_HQS.map((h, i) => ({
+ type: 'Feature' as const,
+ geometry: { type: 'Point' as const, coordinates: [h.lon, h.lat] as [number, number] },
+ properties: {
+ index: i,
+ city: h.city,
+ country: h.country,
+ type: h.type,
+ },
+ }));
+ this.techHQSC = new Supercluster({
+ radius: 50,
+ maxZoom: 14,
+ map: (props: Record) => ({
+ index: Number(props.index ?? 0),
+ city: String(props.city ?? ''),
+ country: String(props.country ?? ''),
+ faangCount: props.type === 'faang' ? 1 : 0,
+ unicornCount: props.type === 'unicorn' ? 1 : 0,
+ publicCount: props.type === 'public' ? 1 : 0,
+ }),
+ reduce: (acc: Record, props: Record) => {
+ acc.faangCount = Number(acc.faangCount ?? 0) + Number(props.faangCount ?? 0);
+ acc.unicornCount = Number(acc.unicornCount ?? 0) + Number(props.unicornCount ?? 0);
+ acc.publicCount = Number(acc.publicCount ?? 0) + Number(props.publicCount ?? 0);
+ if (!acc.city && props.city) acc.city = props.city;
+ if (!acc.country && props.country) acc.country = props.country;
+ },
+ });
+ this.techHQSC.load(points);
+ this.lastSCZoom = -1;
+ }
+
+ private rebuildTechEventSupercluster(): void {
+ const points = this.techEvents.map((e, i) => ({
+ type: 'Feature' as const,
+ geometry: { type: 'Point' as const, coordinates: [e.lng, e.lat] as [number, number] },
+ properties: {
+ index: i,
+ location: e.location,
+ country: e.country,
+ daysUntil: e.daysUntil,
+ },
+ }));
+ this.techEventSC = new Supercluster({
+ radius: 50,
+ maxZoom: 14,
+ map: (props: Record) => {
+ const daysUntil = Number(props.daysUntil ?? Number.MAX_SAFE_INTEGER);
+ return {
+ index: Number(props.index ?? 0),
+ location: String(props.location ?? ''),
+ country: String(props.country ?? ''),
+ soonestDaysUntil: Number.isFinite(daysUntil) ? daysUntil : Number.MAX_SAFE_INTEGER,
+ soonCount: Number.isFinite(daysUntil) && daysUntil <= 14 ? 1 : 0,
+ };
+ },
+ reduce: (acc: Record, props: Record) => {
+ acc.soonestDaysUntil = Math.min(
+ Number(acc.soonestDaysUntil ?? Number.MAX_SAFE_INTEGER),
+ Number(props.soonestDaysUntil ?? Number.MAX_SAFE_INTEGER),
+ );
+ acc.soonCount = Number(acc.soonCount ?? 0) + Number(props.soonCount ?? 0);
+ if (!acc.location && props.location) acc.location = props.location;
+ if (!acc.country && props.country) acc.country = props.country;
+ },
+ });
+ this.techEventSC.load(points);
+ this.lastSCZoom = -1;
+ }
+
+ private rebuildDatacenterSupercluster(): void {
+ const activeDCs = AI_DATA_CENTERS.filter(dc => dc.status !== 'decommissioned');
+ const points = activeDCs.map((dc, i) => ({
+ type: 'Feature' as const,
+ geometry: { type: 'Point' as const, coordinates: [dc.lon, dc.lat] as [number, number] },
+ properties: {
+ index: i,
+ country: dc.country,
+ chipCount: dc.chipCount,
+ powerMW: dc.powerMW ?? 0,
+ status: dc.status,
+ },
+ }));
+ this.datacenterSC = new Supercluster({
+ radius: 70,
+ maxZoom: 14,
+ map: (props: Record) => ({
+ index: Number(props.index ?? 0),
+ country: String(props.country ?? ''),
+ totalChips: Number(props.chipCount ?? 0) || 0,
+ totalPowerMW: Number(props.powerMW ?? 0) || 0,
+ existingCount: props.status === 'existing' ? 1 : 0,
+ plannedCount: props.status === 'planned' ? 1 : 0,
+ }),
+ reduce: (acc: Record, props: Record) => {
+ acc.totalChips = Number(acc.totalChips ?? 0) + Number(props.totalChips ?? 0);
+ acc.totalPowerMW = Number(acc.totalPowerMW ?? 0) + Number(props.totalPowerMW ?? 0);
+ acc.existingCount = Number(acc.existingCount ?? 0) + Number(props.existingCount ?? 0);
+ acc.plannedCount = Number(acc.plannedCount ?? 0) + Number(props.plannedCount ?? 0);
+ if (!acc.country && props.country) acc.country = props.country;
+ },
+ });
+ this.datacenterSC.load(points);
+ this.lastSCZoom = -1;
+ }
+
+ private updateClusterData(): void {
+ const zoom = Math.floor(this.maplibreMap?.getZoom() ?? 2);
+ const bounds = this.maplibreMap?.getBounds();
+ if (!bounds) return;
+ const bbox: [number, number, number, number] = [
+ bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth(),
+ ];
+ const boundsKey = `${bbox[0].toFixed(4)}:${bbox[1].toFixed(4)}:${bbox[2].toFixed(4)}:${bbox[3].toFixed(4)}`;
+ const layers = this.state.layers;
+ const useProtests = layers.protests && this.protestSuperclusterSource.length > 0;
+ const useTechHQ = SITE_VARIANT === 'tech' && layers.techHQs;
+ const useTechEvents = SITE_VARIANT === 'tech' && layers.techEvents && this.techEvents.length > 0;
+ const useDatacenterClusters = layers.datacenters && zoom < 5;
+ const layerMask = `${Number(useProtests)}${Number(useTechHQ)}${Number(useTechEvents)}${Number(useDatacenterClusters)}`;
+ if (zoom === this.lastSCZoom && boundsKey === this.lastSCBoundsKey && layerMask === this.lastSCMask) return;
+ this.lastSCZoom = zoom;
+ this.lastSCBoundsKey = boundsKey;
+ this.lastSCMask = layerMask;
+
+ if (useProtests && this.protestSC) {
+ this.protestClusters = this.protestSC.getClusters(bbox, zoom).map(f => {
+ const coords = f.geometry.coordinates as [number, number];
+ if (f.properties.cluster) {
+ const props = f.properties as Record;
+ const leaves = this.protestSC!.getLeaves(f.properties.cluster_id!, DeckGLMap.MAX_CLUSTER_LEAVES);
+ const items = leaves.map(l => this.protestSuperclusterSource[l.properties.index]).filter((x): x is SocialUnrestEvent => !!x);
+ const maxSeverityRank = Number(props.maxSeverityRank ?? 0);
+ const maxSev = maxSeverityRank >= 2 ? 'high' : maxSeverityRank === 1 ? 'medium' : 'low';
+ const riotCount = Number(props.riotCount ?? 0);
+ const highSeverityCount = Number(props.highSeverityCount ?? 0);
+ const verifiedCount = Number(props.verifiedCount ?? 0);
+ const totalFatalities = Number(props.totalFatalities ?? 0);
+ const clusterCount = Number(f.properties.point_count ?? items.length);
+ const latestRiotEventTimeMs = items.reduce((max, it) => {
+ if (it.eventType !== 'riot' || it.sourceType === 'gdelt') return max;
+ const ts = it.time.getTime();
+ return Number.isFinite(ts) ? Math.max(max, ts) : max;
+ }, 0);
+ return {
+ id: `pc-${f.properties.cluster_id}`,
+ lat: coords[1], lon: coords[0],
+ count: clusterCount,
+ items,
+ country: String(props.country ?? items[0]?.country ?? ''),
+ maxSeverity: maxSev as 'low' | 'medium' | 'high',
+ hasRiot: riotCount > 0,
+ latestRiotEventTimeMs: latestRiotEventTimeMs || undefined,
+ totalFatalities,
+ riotCount,
+ highSeverityCount,
+ verifiedCount,
+ sampled: items.length < clusterCount,
+ };
+ }
+ const item = this.protestSuperclusterSource[f.properties.index]!;
+ return {
+ id: `pp-${f.properties.index}`, lat: item.lat, lon: item.lon,
+ count: 1, items: [item], country: item.country,
+ maxSeverity: item.severity, hasRiot: item.eventType === 'riot',
+ latestRiotEventTimeMs:
+ item.eventType === 'riot' && item.sourceType !== 'gdelt' && Number.isFinite(item.time.getTime())
+ ? item.time.getTime()
+ : undefined,
+ totalFatalities: item.fatalities ?? 0,
+ riotCount: item.eventType === 'riot' ? 1 : 0,
+ highSeverityCount: item.severity === 'high' ? 1 : 0,
+ verifiedCount: item.validated ? 1 : 0,
+ sampled: false,
+ };
+ });
+ } else {
+ this.protestClusters = [];
+ }
+
+ if (useTechHQ && this.techHQSC) {
+ this.techHQClusters = this.techHQSC.getClusters(bbox, zoom).map(f => {
+ const coords = f.geometry.coordinates as [number, number];
+ if (f.properties.cluster) {
+ const props = f.properties as Record;
+ const leaves = this.techHQSC!.getLeaves(f.properties.cluster_id!, DeckGLMap.MAX_CLUSTER_LEAVES);
+ const items = leaves.map(l => TECH_HQS[l.properties.index]).filter(Boolean) as typeof TECH_HQS;
+ const faangCount = Number(props.faangCount ?? 0);
+ const unicornCount = Number(props.unicornCount ?? 0);
+ const publicCount = Number(props.publicCount ?? 0);
+ const clusterCount = Number(f.properties.point_count ?? items.length);
+ const primaryType = faangCount >= unicornCount && faangCount >= publicCount
+ ? 'faang'
+ : unicornCount >= publicCount
+ ? 'unicorn'
+ : 'public';
+ return {
+ id: `hc-${f.properties.cluster_id}`,
+ lat: coords[1], lon: coords[0],
+ count: clusterCount,
+ items,
+ city: String(props.city ?? items[0]?.city ?? ''),
+ country: String(props.country ?? items[0]?.country ?? ''),
+ primaryType,
+ faangCount,
+ unicornCount,
+ publicCount,
+ sampled: items.length < clusterCount,
+ };
+ }
+ const item = TECH_HQS[f.properties.index]!;
+ return {
+ id: `hp-${f.properties.index}`, lat: item.lat, lon: item.lon,
+ count: 1, items: [item], city: item.city, country: item.country,
+ primaryType: item.type,
+ faangCount: item.type === 'faang' ? 1 : 0,
+ unicornCount: item.type === 'unicorn' ? 1 : 0,
+ publicCount: item.type === 'public' ? 1 : 0,
+ sampled: false,
+ };
+ });
+ } else {
+ this.techHQClusters = [];
+ }
+
+ if (useTechEvents && this.techEventSC) {
+ this.techEventClusters = this.techEventSC.getClusters(bbox, zoom).map(f => {
+ const coords = f.geometry.coordinates as [number, number];
+ if (f.properties.cluster) {
+ const props = f.properties as Record;
+ const leaves = this.techEventSC!.getLeaves(f.properties.cluster_id!, DeckGLMap.MAX_CLUSTER_LEAVES);
+ const items = leaves.map(l => this.techEvents[l.properties.index]).filter((x): x is TechEventMarker => !!x);
+ const clusterCount = Number(f.properties.point_count ?? items.length);
+ const soonestDaysUntil = Number(props.soonestDaysUntil ?? Number.MAX_SAFE_INTEGER);
+ const soonCount = Number(props.soonCount ?? 0);
+ return {
+ id: `ec-${f.properties.cluster_id}`,
+ lat: coords[1], lon: coords[0],
+ count: clusterCount,
+ items,
+ location: String(props.location ?? items[0]?.location ?? ''),
+ country: String(props.country ?? items[0]?.country ?? ''),
+ soonestDaysUntil: Number.isFinite(soonestDaysUntil) ? soonestDaysUntil : Number.MAX_SAFE_INTEGER,
+ soonCount,
+ sampled: items.length < clusterCount,
+ };
+ }
+ const item = this.techEvents[f.properties.index]!;
+ return {
+ id: `ep-${f.properties.index}`, lat: item.lat, lon: item.lng,
+ count: 1, items: [item], location: item.location, country: item.country,
+ soonestDaysUntil: item.daysUntil,
+ soonCount: item.daysUntil <= 14 ? 1 : 0,
+ sampled: false,
+ };
+ });
+ } else {
+ this.techEventClusters = [];
+ }
+
+ if (useDatacenterClusters && this.datacenterSC) {
+ const activeDCs = AI_DATA_CENTERS.filter(dc => dc.status !== 'decommissioned');
+ this.datacenterClusters = this.datacenterSC.getClusters(bbox, zoom).map(f => {
+ const coords = f.geometry.coordinates as [number, number];
+ if (f.properties.cluster) {
+ const props = f.properties as Record;
+ const leaves = this.datacenterSC!.getLeaves(f.properties.cluster_id!, DeckGLMap.MAX_CLUSTER_LEAVES);
+ const items = leaves.map(l => activeDCs[l.properties.index]).filter((x): x is AIDataCenter => !!x);
+ const clusterCount = Number(f.properties.point_count ?? items.length);
+ const existingCount = Number(props.existingCount ?? 0);
+ const plannedCount = Number(props.plannedCount ?? 0);
+ const totalChips = Number(props.totalChips ?? 0);
+ const totalPowerMW = Number(props.totalPowerMW ?? 0);
+ return {
+ id: `dc-${f.properties.cluster_id}`,
+ lat: coords[1], lon: coords[0],
+ count: clusterCount,
+ items,
+ region: String(props.country ?? items[0]?.country ?? ''),
+ country: String(props.country ?? items[0]?.country ?? ''),
+ totalChips,
+ totalPowerMW,
+ majorityExisting: existingCount >= Math.max(1, clusterCount / 2),
+ existingCount,
+ plannedCount,
+ sampled: items.length < clusterCount,
+ };
+ }
+ const item = activeDCs[f.properties.index]!;
+ return {
+ id: `dp-${f.properties.index}`, lat: item.lat, lon: item.lon,
+ count: 1, items: [item], region: item.country, country: item.country,
+ totalChips: item.chipCount, totalPowerMW: item.powerMW ?? 0,
+ majorityExisting: item.status === 'existing',
+ existingCount: item.status === 'existing' ? 1 : 0,
+ plannedCount: item.status === 'planned' ? 1 : 0,
+ sampled: false,
+ };
+ });
+ } else {
+ this.datacenterClusters = [];
+ }
+ }
+
+
+
+
+ private isLayerVisible(layerKey: keyof MapLayers): boolean {
+ const threshold = LAYER_ZOOM_THRESHOLDS[layerKey];
+ if (!threshold) return true;
+ const zoom = this.maplibreMap?.getZoom() || 2;
+ return zoom >= threshold.minZoom;
+ }
+
+ private buildLayers(): LayersList {
+ const startTime = performance.now();
+ // Refresh theme-aware overlay colors on each rebuild
+ COLORS = getOverlayColors();
+ const layers: (Layer | null | false)[] = [];
+ const { layers: mapLayers } = this.state;
+ const filteredEarthquakes = this.filterByTime(this.earthquakes, (eq) => eq.time);
+ const filteredNaturalEvents = this.filterByTime(this.naturalEvents, (event) => event.date);
+ const filteredWeatherAlerts = this.filterByTime(this.weatherAlerts, (alert) => alert.onset);
+ const filteredOutages = this.filterByTime(this.outages, (outage) => outage.pubDate);
+ const filteredCableAdvisories = this.filterByTime(this.cableAdvisories, (advisory) => advisory.reported);
+ const filteredFlightDelays = this.filterByTime(this.flightDelays, (delay) => delay.updatedAt);
+ const filteredMilitaryFlights = this.filterByTime(this.militaryFlights, (flight) => flight.lastSeen);
+ const filteredMilitaryVessels = this.filterByTime(this.militaryVessels, (vessel) => vessel.lastAisUpdate);
+ const filteredMilitaryFlightClusters = this.filterMilitaryFlightClustersByTime(this.militaryFlightClusters);
+ const filteredMilitaryVesselClusters = this.filterMilitaryVesselClustersByTime(this.militaryVesselClusters);
+ const filteredUcdpEvents = this.filterByTime(this.ucdpEvents, (event) => event.date_start);
+
+ // Undersea cables layer
+ if (mapLayers.cables) {
+ layers.push(this.createCablesLayer());
+ }
+
+ // Pipelines layer
+ if (mapLayers.pipelines) {
+ layers.push(this.createPipelinesLayer());
+ }
+
+ // Conflict zones layer
+ if (mapLayers.conflicts) {
+ layers.push(this.createConflictZonesLayer());
+ }
+
+ // Military bases layer — hidden at low zoom (E: progressive disclosure) + ghost
+ if (mapLayers.bases && this.isLayerVisible('bases')) {
+ layers.push(this.createBasesLayer());
+ layers.push(this.createGhostLayer('bases-layer', MILITARY_BASES, d => [d.lon, d.lat], { radiusMinPixels: 12 }));
+ }
+
+ // Nuclear facilities layer — hidden at low zoom + ghost
+ if (mapLayers.nuclear && this.isLayerVisible('nuclear')) {
+ layers.push(this.createNuclearLayer());
+ layers.push(this.createGhostLayer('nuclear-layer', NUCLEAR_FACILITIES.filter(f => f.status !== 'decommissioned'), d => [d.lon, d.lat], { radiusMinPixels: 12 }));
+ }
+
+ // Gamma irradiators layer — hidden at low zoom
+ if (mapLayers.irradiators && this.isLayerVisible('irradiators')) {
+ layers.push(this.createIrradiatorsLayer());
+ }
+
+ // Spaceports layer — hidden at low zoom
+ if (mapLayers.spaceports && this.isLayerVisible('spaceports')) {
+ layers.push(this.createSpaceportsLayer());
+ }
+
+ // Hotspots layer (all hotspots including high/breaking, with pulse + ghost)
+ if (mapLayers.hotspots) {
+ layers.push(...this.createHotspotsLayers());
+ }
+
+ // Datacenters layer - SQUARE icons at zoom >= 5, cluster dots at zoom < 5
+ const currentZoom = this.maplibreMap?.getZoom() || 2;
+ if (mapLayers.datacenters) {
+ if (currentZoom >= 5) {
+ layers.push(this.createDatacentersLayer());
+ } else {
+ layers.push(...this.createDatacenterClusterLayers());
+ }
+ }
+
+ // Earthquakes layer + ghost for easier picking
+ if (mapLayers.natural && filteredEarthquakes.length > 0) {
+ layers.push(this.createEarthquakesLayer(filteredEarthquakes));
+ layers.push(this.createGhostLayer('earthquakes-layer', filteredEarthquakes, d => [d.lon, d.lat], { radiusMinPixels: 12 }));
+ }
+
+ // Natural events layer
+ if (mapLayers.natural && filteredNaturalEvents.length > 0) {
+ layers.push(this.createNaturalEventsLayer(filteredNaturalEvents));
+ }
+
+ // Satellite fires layer (NASA FIRMS)
+ if (mapLayers.fires && this.firmsFireData.length > 0) {
+ layers.push(this.createFiresLayer());
+ }
+
+ // Weather alerts layer
+ if (mapLayers.weather && filteredWeatherAlerts.length > 0) {
+ layers.push(this.createWeatherLayer(filteredWeatherAlerts));
+ }
+
+ // Internet outages layer + ghost for easier picking
+ if (mapLayers.outages && filteredOutages.length > 0) {
+ layers.push(this.createOutagesLayer(filteredOutages));
+ layers.push(this.createGhostLayer('outages-layer', filteredOutages, d => [d.lon, d.lat], { radiusMinPixels: 12 }));
+ }
+
+ // Cyber threat IOC layer
+ if (mapLayers.cyberThreats && this.cyberThreats.length > 0) {
+ layers.push(this.createCyberThreatsLayer());
+ layers.push(this.createGhostLayer('cyber-threats-layer', this.cyberThreats, d => [d.lon, d.lat], { radiusMinPixels: 12 }));
+ }
+
+ // AIS density layer
+ if (mapLayers.ais && this.aisDensity.length > 0) {
+ layers.push(this.createAisDensityLayer());
+ }
+
+ // AIS disruptions layer (spoofing/jamming)
+ if (mapLayers.ais && this.aisDisruptions.length > 0) {
+ layers.push(this.createAisDisruptionsLayer());
+ }
+
+ // Strategic ports layer (shown with AIS)
+ if (mapLayers.ais) {
+ layers.push(this.createPortsLayer());
+ }
+
+ // Cable advisories layer (shown with cables)
+ if (mapLayers.cables && filteredCableAdvisories.length > 0) {
+ layers.push(this.createCableAdvisoriesLayer(filteredCableAdvisories));
+ }
+
+ // Repair ships layer (shown with cables)
+ if (mapLayers.cables && this.repairShips.length > 0) {
+ layers.push(this.createRepairShipsLayer());
+ }
+
+ // Flight delays layer
+ if (mapLayers.flights && filteredFlightDelays.length > 0) {
+ layers.push(this.createFlightDelaysLayer(filteredFlightDelays));
+ }
+
+ // Protests layer (Supercluster-based deck.gl layers)
+ if (mapLayers.protests && this.protests.length > 0) {
+ layers.push(...this.createProtestClusterLayers());
+ }
+
+ // Military vessels layer
+ if (mapLayers.military && filteredMilitaryVessels.length > 0) {
+ layers.push(this.createMilitaryVesselsLayer(filteredMilitaryVessels));
+ }
+
+ // Military vessel clusters layer
+ if (mapLayers.military && filteredMilitaryVesselClusters.length > 0) {
+ layers.push(this.createMilitaryVesselClustersLayer(filteredMilitaryVesselClusters));
+ }
+
+ // Military flights layer
+ if (mapLayers.military && filteredMilitaryFlights.length > 0) {
+ layers.push(this.createMilitaryFlightsLayer(filteredMilitaryFlights));
+ }
+
+ // Military flight clusters layer
+ if (mapLayers.military && filteredMilitaryFlightClusters.length > 0) {
+ layers.push(this.createMilitaryFlightClustersLayer(filteredMilitaryFlightClusters));
+ }
+
+ // Strategic waterways layer
+ if (mapLayers.waterways) {
+ layers.push(this.createWaterwaysLayer());
+ }
+
+ // Economic centers layer — hidden at low zoom
+ if (mapLayers.economic && this.isLayerVisible('economic')) {
+ layers.push(this.createEconomicCentersLayer());
+ }
+
+ // Finance variant layers
+ if (mapLayers.stockExchanges) {
+ layers.push(this.createStockExchangesLayer());
+ }
+ if (mapLayers.financialCenters) {
+ layers.push(this.createFinancialCentersLayer());
+ }
+ if (mapLayers.centralBanks) {
+ layers.push(this.createCentralBanksLayer());
+ }
+ if (mapLayers.commodityHubs) {
+ layers.push(this.createCommodityHubsLayer());
+ }
+
+ // Critical minerals layer
+ if (mapLayers.minerals) {
+ layers.push(this.createMineralsLayer());
+ }
+
+ // APT Groups layer (geopolitical variant only - always shown, no toggle)
+ if (SITE_VARIANT !== 'tech') {
+ layers.push(this.createAPTGroupsLayer());
+ }
+
+ // UCDP georeferenced events layer
+ if (mapLayers.ucdpEvents && filteredUcdpEvents.length > 0) {
+ layers.push(this.createUcdpEventsLayer(filteredUcdpEvents));
+ }
+
+ // Displacement flows arc layer
+ if (mapLayers.displacement && this.displacementFlows.length > 0) {
+ layers.push(this.createDisplacementArcsLayer());
+ }
+
+ // Climate anomalies heatmap layer
+ if (mapLayers.climate && this.climateAnomalies.length > 0) {
+ layers.push(this.createClimateHeatmapLayer());
+ }
+
+ // Tech variant layers (Supercluster-based deck.gl layers for HQs and events)
+ if (SITE_VARIANT === 'tech') {
+ if (mapLayers.startupHubs) {
+ layers.push(this.createStartupHubsLayer());
+ }
+ if (mapLayers.techHQs) {
+ layers.push(...this.createTechHQClusterLayers());
+ }
+ if (mapLayers.accelerators) {
+ layers.push(this.createAcceleratorsLayer());
+ }
+ if (mapLayers.cloudRegions) {
+ layers.push(this.createCloudRegionsLayer());
+ }
+ if (mapLayers.techEvents && this.techEvents.length > 0) {
+ layers.push(...this.createTechEventClusterLayers());
+ }
+ }
+
+ // Gulf FDI investments layer
+ if (mapLayers.gulfInvestments) {
+ layers.push(this.createGulfInvestmentsLayer());
+ }
+
+ // News geo-locations (always shown if data exists)
+ if (this.newsLocations.length > 0) {
+ layers.push(...this.createNewsLocationsLayer());
+ }
+
+ const result = layers.filter(Boolean) as LayersList;
+ const elapsed = performance.now() - startTime;
+ if (import.meta.env.DEV && elapsed > 16) {
+ console.warn(`[DeckGLMap] buildLayers took ${elapsed.toFixed(2)}ms (>16ms budget), ${result.length} layers`);
+ }
+ return result;
+ }
+
+ // Layer creation methods
+ private createCablesLayer(): PathLayer {
+ const highlightedCables = this.highlightedAssets.cable;
+ const cacheKey = 'cables-layer';
+ const cached = this.layerCache.get(cacheKey) as PathLayer | undefined;
+ const highlightSignature = this.getSetSignature(highlightedCables);
+ if (cached && highlightSignature === this.lastCableHighlightSignature) return cached;
+
+ const layer = new PathLayer({
+ id: cacheKey,
+ data: UNDERSEA_CABLES,
+ getPath: (d) => d.points,
+ getColor: (d) =>
+ highlightedCables.has(d.id) ? COLORS.cableHighlight : COLORS.cable,
+ getWidth: (d) => highlightedCables.has(d.id) ? 3 : 1,
+ widthMinPixels: 1,
+ widthMaxPixels: 5,
+ pickable: true,
+ updateTriggers: { highlighted: highlightSignature },
+ });
+
+ this.lastCableHighlightSignature = highlightSignature;
+ this.layerCache.set(cacheKey, layer);
+ return layer;
+ }
+
+ private createPipelinesLayer(): PathLayer {
+ const highlightedPipelines = this.highlightedAssets.pipeline;
+ const cacheKey = 'pipelines-layer';
+ const cached = this.layerCache.get(cacheKey) as PathLayer | undefined;
+ const highlightSignature = this.getSetSignature(highlightedPipelines);
+ if (cached && highlightSignature === this.lastPipelineHighlightSignature) return cached;
+
+ const layer = new PathLayer({
+ id: cacheKey,
+ data: PIPELINES,
+ getPath: (d) => d.points,
+ getColor: (d) => {
+ if (highlightedPipelines.has(d.id)) {
+ return [255, 100, 100, 200] as [number, number, number, number];
+ }
+ const colorKey = d.type as keyof typeof PIPELINE_COLORS;
+ const hex = PIPELINE_COLORS[colorKey] || '#666666';
+ return this.hexToRgba(hex, 150);
+ },
+ getWidth: (d) => highlightedPipelines.has(d.id) ? 3 : 1.5,
+ widthMinPixels: 1,
+ widthMaxPixels: 4,
+ pickable: true,
+ updateTriggers: { highlighted: highlightSignature },
+ });
+
+ this.lastPipelineHighlightSignature = highlightSignature;
+ this.layerCache.set(cacheKey, layer);
+ return layer;
+ }
+
+ private createConflictZonesLayer(): GeoJsonLayer {
+ const cacheKey = 'conflict-zones-layer';
+
+ const geojsonData = {
+ type: 'FeatureCollection' as const,
+ features: CONFLICT_ZONES.map(zone => ({
+ type: 'Feature' as const,
+ properties: { id: zone.id, name: zone.name, intensity: zone.intensity },
+ geometry: {
+ type: 'Polygon' as const,
+ coordinates: [zone.coords],
+ },
+ })),
+ };
+
+ const layer = new GeoJsonLayer({
+ id: cacheKey,
+ data: geojsonData,
+ filled: true,
+ stroked: true,
+ getFillColor: () => COLORS.conflict,
+ getLineColor: () => getCurrentTheme() === 'light'
+ ? [255, 0, 0, 120] as [number, number, number, number]
+ : [255, 0, 0, 180] as [number, number, number, number],
+ getLineWidth: 2,
+ lineWidthMinPixels: 1,
+ pickable: true,
+ });
+ return layer;
+ }
+
+ private createBasesLayer(): IconLayer {
+ const highlightedBases = this.highlightedAssets.base;
+
+ // Base colors by operator type - semi-transparent for layering
+ // F: Fade in bases as you zoom — subtle at zoom 3, full at zoom 5+
+ const zoom = this.maplibreMap?.getZoom() || 3;
+ const alphaScale = Math.min(1, (zoom - 2.5) / 2.5); // 0.2 at zoom 3, 1.0 at zoom 5
+ const a = Math.round(160 * Math.max(0.3, alphaScale));
+
+ const getBaseColor = (type: string): [number, number, number, number] => {
+ switch (type) {
+ case 'us-nato': return [68, 136, 255, a];
+ case 'russia': return [255, 68, 68, a];
+ case 'china': return [255, 136, 68, a];
+ case 'uk': return [68, 170, 255, a];
+ case 'france': return [0, 85, 164, a];
+ case 'india': return [255, 153, 51, a];
+ case 'japan': return [188, 0, 45, a];
+ default: return [136, 136, 136, a];
+ }
+ };
+
+ // Military bases: TRIANGLE icons - color by operator, semi-transparent
+ return new IconLayer({
+ id: 'bases-layer',
+ data: MILITARY_BASES,
+ getPosition: (d) => [d.lon, d.lat],
+ getIcon: () => 'triangleUp',
+ iconAtlas: MARKER_ICONS.triangleUp,
+ iconMapping: { triangleUp: { x: 0, y: 0, width: 32, height: 32, mask: true } },
+ getSize: (d) => highlightedBases.has(d.id) ? 16 : 11,
+ getColor: (d) => {
+ if (highlightedBases.has(d.id)) {
+ return [255, 100, 100, 220] as [number, number, number, number];
+ }
+ return getBaseColor(d.type);
+ },
+ sizeScale: 1,
+ sizeMinPixels: 6,
+ sizeMaxPixels: 16,
+ pickable: true,
+ });
+ }
+
+ private createNuclearLayer(): IconLayer {
+ const highlightedNuclear = this.highlightedAssets.nuclear;
+ const data = NUCLEAR_FACILITIES.filter(f => f.status !== 'decommissioned');
+
+ // Nuclear: HEXAGON icons - yellow/orange color, semi-transparent
+ return new IconLayer({
+ id: 'nuclear-layer',
+ data,
+ getPosition: (d) => [d.lon, d.lat],
+ getIcon: () => 'hexagon',
+ iconAtlas: MARKER_ICONS.hexagon,
+ iconMapping: { hexagon: { x: 0, y: 0, width: 32, height: 32, mask: true } },
+ getSize: (d) => highlightedNuclear.has(d.id) ? 15 : 11,
+ getColor: (d) => {
+ if (highlightedNuclear.has(d.id)) {
+ return [255, 100, 100, 220] as [number, number, number, number];
+ }
+ if (d.status === 'contested') {
+ return [255, 50, 50, 200] as [number, number, number, number];
+ }
+ return [255, 220, 0, 200] as [number, number, number, number]; // Semi-transparent yellow
+ },
+ sizeScale: 1,
+ sizeMinPixels: 6,
+ sizeMaxPixels: 15,
+ pickable: true,
+ });
+ }
+
+ private createIrradiatorsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'irradiators-layer',
+ data: GAMMA_IRRADIATORS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 6000,
+ getFillColor: [255, 100, 255, 180] as [number, number, number, number], // Magenta
+ radiusMinPixels: 4,
+ radiusMaxPixels: 10,
+ pickable: true,
+ });
+ }
+
+ private createSpaceportsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'spaceports-layer',
+ data: SPACEPORTS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 10000,
+ getFillColor: [200, 100, 255, 200] as [number, number, number, number], // Purple
+ radiusMinPixels: 5,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createPortsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'ports-layer',
+ data: PORTS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 6000,
+ getFillColor: (d) => {
+ // Color by port type (matching old Map.ts icons)
+ switch (d.type) {
+ case 'naval': return [100, 150, 255, 200] as [number, number, number, number]; // Blue - ⚓
+ case 'oil': return [255, 140, 0, 200] as [number, number, number, number]; // Orange - 🛢️
+ case 'lng': return [255, 200, 50, 200] as [number, number, number, number]; // Yellow - 🛢️
+ case 'container': return [0, 200, 255, 180] as [number, number, number, number]; // Cyan - 🏭
+ case 'mixed': return [150, 200, 150, 180] as [number, number, number, number]; // Green
+ case 'bulk': return [180, 150, 120, 180] as [number, number, number, number]; // Brown
+ default: return [0, 200, 255, 160] as [number, number, number, number];
+ }
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 10,
+ pickable: true,
+ });
+ }
+
+ private createFlightDelaysLayer(delays: AirportDelayAlert[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'flight-delays-layer',
+ data: delays,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => {
+ if (d.severity === 'GDP') return 15000; // Ground Delay Program
+ if (d.severity === 'GS') return 12000; // Ground Stop
+ return 8000;
+ },
+ getFillColor: (d) => {
+ if (d.severity === 'GS') return [255, 50, 50, 200] as [number, number, number, number]; // Red for ground stops
+ if (d.severity === 'GDP') return [255, 150, 0, 200] as [number, number, number, number]; // Orange for delays
+ return [255, 200, 100, 180] as [number, number, number, number]; // Yellow
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 15,
+ pickable: true,
+ });
+ }
+
+ private createGhostLayer(id: string, data: T[], getPosition: (d: T) => [number, number], opts: { radiusMinPixels?: number } = {}): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: `${id}-ghost`,
+ data,
+ getPosition,
+ getRadius: 1,
+ radiusMinPixels: opts.radiusMinPixels ?? 12,
+ getFillColor: [0, 0, 0, 0],
+ pickable: true,
+ });
+ }
+
+
+ private createDatacentersLayer(): IconLayer {
+ const highlightedDC = this.highlightedAssets.datacenter;
+ const data = AI_DATA_CENTERS.filter(dc => dc.status !== 'decommissioned');
+
+ // Datacenters: SQUARE icons - purple color, semi-transparent for layering
+ return new IconLayer({
+ id: 'datacenters-layer',
+ data,
+ getPosition: (d) => [d.lon, d.lat],
+ getIcon: () => 'square',
+ iconAtlas: MARKER_ICONS.square,
+ iconMapping: { square: { x: 0, y: 0, width: 32, height: 32, mask: true } },
+ getSize: (d) => highlightedDC.has(d.id) ? 14 : 10,
+ getColor: (d) => {
+ if (highlightedDC.has(d.id)) {
+ return [255, 100, 100, 200] as [number, number, number, number];
+ }
+ if (d.status === 'planned') {
+ return [136, 68, 255, 100] as [number, number, number, number]; // Transparent for planned
+ }
+ return [136, 68, 255, 140] as [number, number, number, number]; // ~55% opacity
+ },
+ sizeScale: 1,
+ sizeMinPixels: 6,
+ sizeMaxPixels: 14,
+ pickable: true,
+ });
+ }
+
+ private createEarthquakesLayer(earthquakes: Earthquake[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'earthquakes-layer',
+ data: earthquakes,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => Math.pow(2, d.magnitude) * 1000,
+ getFillColor: (d) => {
+ const mag = d.magnitude;
+ if (mag >= 6) return [255, 0, 0, 200] as [number, number, number, number];
+ if (mag >= 5) return [255, 100, 0, 200] as [number, number, number, number];
+ return COLORS.earthquake;
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 30,
+ pickable: true,
+ });
+ }
+
+ private createNaturalEventsLayer(events: NaturalEvent[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'natural-events-layer',
+ data: events,
+ getPosition: (d: NaturalEvent) => [d.lon, d.lat],
+ getRadius: (d: NaturalEvent) => d.title.startsWith('🔴') ? 20000 : d.title.startsWith('🟠') ? 15000 : 8000,
+ getFillColor: (d: NaturalEvent) => {
+ if (d.title.startsWith('🔴')) return [255, 0, 0, 220] as [number, number, number, number];
+ if (d.title.startsWith('🟠')) return [255, 140, 0, 200] as [number, number, number, number];
+ return [255, 150, 50, 180] as [number, number, number, number];
+ },
+ radiusMinPixels: 5,
+ radiusMaxPixels: 18,
+ pickable: true,
+ });
+ }
+
+ private createFiresLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'fires-layer',
+ data: this.firmsFireData,
+ getPosition: (d: (typeof this.firmsFireData)[0]) => [d.lon, d.lat],
+ getRadius: (d: (typeof this.firmsFireData)[0]) => Math.min(d.frp * 200, 30000) || 5000,
+ getFillColor: (d: (typeof this.firmsFireData)[0]) => {
+ if (d.brightness > 400) return [255, 30, 0, 220] as [number, number, number, number];
+ if (d.brightness > 350) return [255, 140, 0, 200] as [number, number, number, number];
+ return [255, 220, 50, 180] as [number, number, number, number];
+ },
+ radiusMinPixels: 3,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createWeatherLayer(alerts: WeatherAlert[]): ScatterplotLayer {
+ // Filter weather alerts that have centroid coordinates
+ const alertsWithCoords = alerts.filter(a => a.centroid && a.centroid.length === 2);
+
+ return new ScatterplotLayer({
+ id: 'weather-layer',
+ data: alertsWithCoords,
+ getPosition: (d) => d.centroid as [number, number], // centroid is [lon, lat]
+ getRadius: 25000,
+ getFillColor: (d) => {
+ if (d.severity === 'Extreme') return [255, 0, 0, 200] as [number, number, number, number];
+ if (d.severity === 'Severe') return [255, 100, 0, 180] as [number, number, number, number];
+ if (d.severity === 'Moderate') return [255, 170, 0, 160] as [number, number, number, number];
+ return COLORS.weather;
+ },
+ radiusMinPixels: 8,
+ radiusMaxPixels: 20,
+ pickable: true,
+ });
+ }
+
+ private createOutagesLayer(outages: InternetOutage[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'outages-layer',
+ data: outages,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 20000,
+ getFillColor: COLORS.outage,
+ radiusMinPixels: 6,
+ radiusMaxPixels: 18,
+ pickable: true,
+ });
+ }
+
+ private createCyberThreatsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'cyber-threats-layer',
+ data: this.cyberThreats,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => {
+ switch (d.severity) {
+ case 'critical': return 22000;
+ case 'high': return 17000;
+ case 'medium': return 13000;
+ default: return 9000;
+ }
+ },
+ getFillColor: (d) => {
+ switch (d.severity) {
+ case 'critical': return [255, 61, 0, 225] as [number, number, number, number];
+ case 'high': return [255, 102, 0, 205] as [number, number, number, number];
+ case 'medium': return [255, 176, 0, 185] as [number, number, number, number];
+ default: return [255, 235, 59, 170] as [number, number, number, number];
+ }
+ },
+ radiusMinPixels: 6,
+ radiusMaxPixels: 18,
+ pickable: true,
+ stroked: true,
+ getLineColor: [255, 255, 255, 160] as [number, number, number, number],
+ lineWidthMinPixels: 1,
+ });
+ }
+
+ private createAisDensityLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'ais-density-layer',
+ data: this.aisDensity,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => 4000 + d.intensity * 8000,
+ getFillColor: (d) => {
+ const intensity = Math.min(Math.max(d.intensity, 0.15), 1);
+ const isCongested = (d.deltaPct || 0) >= 15;
+ const alpha = Math.round(40 + intensity * 160);
+ // Orange for congested areas, cyan for normal traffic
+ if (isCongested) {
+ return [255, 183, 3, alpha] as [number, number, number, number]; // #ffb703
+ }
+ return [0, 209, 255, alpha] as [number, number, number, number]; // #00d1ff
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createAisDisruptionsLayer(): ScatterplotLayer {
+ // AIS spoofing/jamming events
+ return new ScatterplotLayer({
+ id: 'ais-disruptions-layer',
+ data: this.aisDisruptions,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 12000,
+ getFillColor: (d) => {
+ // Color by severity/type
+ if (d.severity === 'high' || d.type === 'spoofing') {
+ return [255, 50, 50, 220] as [number, number, number, number]; // Red
+ }
+ if (d.severity === 'medium') {
+ return [255, 150, 0, 200] as [number, number, number, number]; // Orange
+ }
+ return [255, 200, 100, 180] as [number, number, number, number]; // Yellow
+ },
+ radiusMinPixels: 6,
+ radiusMaxPixels: 14,
+ pickable: true,
+ stroked: true,
+ getLineColor: [255, 255, 255, 150] as [number, number, number, number],
+ lineWidthMinPixels: 1,
+ });
+ }
+
+ private createCableAdvisoriesLayer(advisories: CableAdvisory[]): ScatterplotLayer {
+ // Cable fault/maintenance advisories
+ return new ScatterplotLayer({
+ id: 'cable-advisories-layer',
+ data: advisories,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 10000,
+ getFillColor: (d) => {
+ if (d.severity === 'fault') {
+ return [255, 50, 50, 220] as [number, number, number, number]; // Red for faults
+ }
+ return [255, 200, 0, 200] as [number, number, number, number]; // Yellow for maintenance
+ },
+ radiusMinPixels: 5,
+ radiusMaxPixels: 12,
+ pickable: true,
+ stroked: true,
+ getLineColor: [0, 200, 255, 200] as [number, number, number, number], // Cyan outline (cable color)
+ lineWidthMinPixels: 2,
+ });
+ }
+
+ private createRepairShipsLayer(): ScatterplotLayer {
+ // Cable repair ships
+ return new ScatterplotLayer({
+ id: 'repair-ships-layer',
+ data: this.repairShips,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 8000,
+ getFillColor: [0, 255, 200, 200] as [number, number, number, number], // Teal
+ radiusMinPixels: 4,
+ radiusMaxPixels: 10,
+ pickable: true,
+ });
+ }
+
+ private createMilitaryVesselsLayer(vessels: MilitaryVessel[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'military-vessels-layer',
+ data: vessels,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 6000,
+ getFillColor: COLORS.vesselMilitary,
+ radiusMinPixels: 4,
+ radiusMaxPixels: 10,
+ pickable: true,
+ });
+ }
+
+ private createMilitaryVesselClustersLayer(clusters: MilitaryVesselCluster[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'military-vessel-clusters-layer',
+ data: clusters,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => 15000 + (d.vesselCount || 1) * 3000,
+ getFillColor: (d) => {
+ // Vessel types: 'exercise' | 'deployment' | 'transit' | 'unknown'
+ const activity = d.activityType || 'unknown';
+ if (activity === 'exercise' || activity === 'deployment') return [255, 100, 100, 200] as [number, number, number, number];
+ if (activity === 'transit') return [255, 180, 100, 180] as [number, number, number, number];
+ return [200, 150, 150, 160] as [number, number, number, number];
+ },
+ radiusMinPixels: 8,
+ radiusMaxPixels: 25,
+ pickable: true,
+ });
+ }
+
+ private createMilitaryFlightsLayer(flights: MilitaryFlight[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'military-flights-layer',
+ data: flights,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 8000,
+ getFillColor: COLORS.flightMilitary,
+ radiusMinPixels: 4,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createMilitaryFlightClustersLayer(clusters: MilitaryFlightCluster[]): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'military-flight-clusters-layer',
+ data: clusters,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => 15000 + (d.flightCount || 1) * 3000,
+ getFillColor: (d) => {
+ const activity = d.activityType || 'unknown';
+ if (activity === 'exercise' || activity === 'patrol') return [100, 150, 255, 200] as [number, number, number, number];
+ if (activity === 'transport') return [255, 200, 100, 180] as [number, number, number, number];
+ return [150, 150, 200, 160] as [number, number, number, number];
+ },
+ radiusMinPixels: 8,
+ radiusMaxPixels: 25,
+ pickable: true,
+ });
+ }
+
+ private createWaterwaysLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'waterways-layer',
+ data: STRATEGIC_WATERWAYS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 10000,
+ getFillColor: [100, 150, 255, 180] as [number, number, number, number],
+ radiusMinPixels: 5,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createEconomicCentersLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'economic-centers-layer',
+ data: ECONOMIC_CENTERS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 8000,
+ getFillColor: [255, 215, 0, 180] as [number, number, number, number],
+ radiusMinPixels: 4,
+ radiusMaxPixels: 10,
+ pickable: true,
+ });
+ }
+
+ private createStockExchangesLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'stock-exchanges-layer',
+ data: STOCK_EXCHANGES,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => d.tier === 'mega' ? 18000 : d.tier === 'major' ? 14000 : 11000,
+ getFillColor: (d) => {
+ if (d.tier === 'mega') return [255, 215, 80, 220] as [number, number, number, number];
+ if (d.tier === 'major') return COLORS.stockExchange;
+ return [140, 210, 255, 190] as [number, number, number, number];
+ },
+ radiusMinPixels: 5,
+ radiusMaxPixels: 14,
+ pickable: true,
+ });
+ }
+
+ private createFinancialCentersLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'financial-centers-layer',
+ data: FINANCIAL_CENTERS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => d.type === 'global' ? 17000 : d.type === 'regional' ? 13000 : 10000,
+ getFillColor: (d) => {
+ if (d.type === 'global') return COLORS.financialCenter;
+ if (d.type === 'regional') return [0, 190, 130, 185] as [number, number, number, number];
+ return [0, 150, 110, 165] as [number, number, number, number];
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createCentralBanksLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'central-banks-layer',
+ data: CENTRAL_BANKS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => d.type === 'major' ? 15000 : d.type === 'supranational' ? 17000 : 12000,
+ getFillColor: (d) => {
+ if (d.type === 'major') return COLORS.centralBank;
+ if (d.type === 'supranational') return [255, 235, 140, 220] as [number, number, number, number];
+ return [235, 180, 80, 185] as [number, number, number, number];
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createCommodityHubsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'commodity-hubs-layer',
+ data: COMMODITY_HUBS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => d.type === 'exchange' ? 14000 : d.type === 'port' ? 12000 : 10000,
+ getFillColor: (d) => {
+ if (d.type === 'exchange') return COLORS.commodityHub;
+ if (d.type === 'port') return [80, 170, 255, 190] as [number, number, number, number];
+ return [255, 110, 80, 185] as [number, number, number, number];
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: 11,
+ pickable: true,
+ });
+ }
+
+ private createAPTGroupsLayer(): ScatterplotLayer {
+ // APT Groups - cyber threat actor markers (geopolitical variant only)
+ // Made subtle to avoid visual clutter - small orange dots
+ return new ScatterplotLayer({
+ id: 'apt-groups-layer',
+ data: APT_GROUPS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 6000,
+ getFillColor: [255, 140, 0, 140] as [number, number, number, number], // Subtle orange
+ radiusMinPixels: 4,
+ radiusMaxPixels: 8,
+ pickable: true,
+ stroked: false, // No outline - cleaner look
+ });
+ }
+
+ private createMineralsLayer(): ScatterplotLayer {
+ // Critical minerals projects
+ return new ScatterplotLayer({
+ id: 'minerals-layer',
+ data: CRITICAL_MINERALS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 8000,
+ getFillColor: (d) => {
+ // Color by mineral type
+ switch (d.mineral) {
+ case 'Lithium': return [0, 200, 255, 200] as [number, number, number, number]; // Cyan
+ case 'Cobalt': return [100, 100, 255, 200] as [number, number, number, number]; // Blue
+ case 'Rare Earths': return [255, 100, 200, 200] as [number, number, number, number]; // Pink
+ case 'Nickel': return [100, 255, 100, 200] as [number, number, number, number]; // Green
+ default: return [200, 200, 200, 200] as [number, number, number, number]; // Gray
+ }
+ },
+ radiusMinPixels: 5,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ // Tech variant layers
+ private createStartupHubsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'startup-hubs-layer',
+ data: STARTUP_HUBS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 10000,
+ getFillColor: COLORS.startupHub,
+ radiusMinPixels: 5,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createAcceleratorsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'accelerators-layer',
+ data: ACCELERATORS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 6000,
+ getFillColor: COLORS.accelerator,
+ radiusMinPixels: 3,
+ radiusMaxPixels: 8,
+ pickable: true,
+ });
+ }
+
+ private createCloudRegionsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'cloud-regions-layer',
+ data: CLOUD_REGIONS,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 12000,
+ getFillColor: COLORS.cloudRegion,
+ radiusMinPixels: 4,
+ radiusMaxPixels: 12,
+ pickable: true,
+ });
+ }
+
+ private createProtestClusterLayers(): Layer[] {
+ this.updateClusterData();
+ const layers: Layer[] = [];
+
+ layers.push(new ScatterplotLayer({
+ id: 'protest-clusters-layer',
+ data: this.protestClusters,
+ getPosition: d => [d.lon, d.lat],
+ getRadius: d => 15000 + d.count * 2000,
+ radiusMinPixels: 6,
+ radiusMaxPixels: 22,
+ getFillColor: d => {
+ if (d.hasRiot) return [220, 40, 40, 200] as [number, number, number, number];
+ if (d.maxSeverity === 'high') return [255, 80, 60, 180] as [number, number, number, number];
+ if (d.maxSeverity === 'medium') return [255, 160, 40, 160] as [number, number, number, number];
+ return [255, 220, 80, 140] as [number, number, number, number];
+ },
+ pickable: true,
+ updateTriggers: { getRadius: this.lastSCZoom, getFillColor: this.lastSCZoom },
+ }));
+
+ layers.push(this.createGhostLayer('protest-clusters-layer', this.protestClusters, d => [d.lon, d.lat], { radiusMinPixels: 14 }));
+
+ const multiClusters = this.protestClusters.filter(c => c.count > 1);
+ if (multiClusters.length > 0) {
+ layers.push(new TextLayer({
+ id: 'protest-clusters-badge',
+ data: multiClusters,
+ getText: d => String(d.count),
+ getPosition: d => [d.lon, d.lat],
+ background: true,
+ getBackgroundColor: [0, 0, 0, 180],
+ backgroundPadding: [4, 2, 4, 2],
+ getColor: [255, 255, 255, 255],
+ getSize: 12,
+ getPixelOffset: [0, -14],
+ pickable: false,
+ fontFamily: 'system-ui, sans-serif',
+ fontWeight: 700,
+ }));
+ }
+
+ const pulseClusters = this.protestClusters.filter(c => c.maxSeverity === 'high' || c.hasRiot);
+ if (pulseClusters.length > 0) {
+ const pulse = 1.0 + 0.8 * (0.5 + 0.5 * Math.sin((this.pulseTime || Date.now()) / 400));
+ layers.push(new ScatterplotLayer({
+ id: 'protest-clusters-pulse',
+ data: pulseClusters,
+ getPosition: d => [d.lon, d.lat],
+ getRadius: d => 15000 + d.count * 2000,
+ radiusScale: pulse,
+ radiusMinPixels: 8,
+ radiusMaxPixels: 30,
+ stroked: true,
+ filled: false,
+ getLineColor: d => d.hasRiot ? [220, 40, 40, 120] as [number, number, number, number] : [255, 80, 60, 100] as [number, number, number, number],
+ lineWidthMinPixels: 1.5,
+ pickable: false,
+ updateTriggers: { radiusScale: this.pulseTime },
+ }));
+ }
+
+ return layers;
+ }
+
+ private createTechHQClusterLayers(): Layer[] {
+ this.updateClusterData();
+ const layers: Layer[] = [];
+ const zoom = this.maplibreMap?.getZoom() || 2;
+
+ layers.push(new ScatterplotLayer({
+ id: 'tech-hq-clusters-layer',
+ data: this.techHQClusters,
+ getPosition: d => [d.lon, d.lat],
+ getRadius: d => 10000 + d.count * 1500,
+ radiusMinPixels: 5,
+ radiusMaxPixels: 18,
+ getFillColor: d => {
+ if (d.primaryType === 'faang') return [0, 220, 120, 200] as [number, number, number, number];
+ if (d.primaryType === 'unicorn') return [255, 100, 200, 180] as [number, number, number, number];
+ return [80, 160, 255, 180] as [number, number, number, number];
+ },
+ pickable: true,
+ updateTriggers: { getRadius: this.lastSCZoom },
+ }));
+
+ layers.push(this.createGhostLayer('tech-hq-clusters-layer', this.techHQClusters, d => [d.lon, d.lat], { radiusMinPixels: 14 }));
+
+ const multiClusters = this.techHQClusters.filter(c => c.count > 1);
+ if (multiClusters.length > 0) {
+ layers.push(new TextLayer({
+ id: 'tech-hq-clusters-badge',
+ data: multiClusters,
+ getText: d => String(d.count),
+ getPosition: d => [d.lon, d.lat],
+ background: true,
+ getBackgroundColor: [0, 0, 0, 180],
+ backgroundPadding: [4, 2, 4, 2],
+ getColor: [255, 255, 255, 255],
+ getSize: 12,
+ getPixelOffset: [0, -14],
+ pickable: false,
+ fontFamily: 'system-ui, sans-serif',
+ fontWeight: 700,
+ }));
+ }
+
+ if (zoom >= 3) {
+ const singles = this.techHQClusters.filter(c => c.count === 1);
+ if (singles.length > 0) {
+ layers.push(new TextLayer({
+ id: 'tech-hq-clusters-label',
+ data: singles,
+ getText: d => d.items[0]?.company ?? '',
+ getPosition: d => [d.lon, d.lat],
+ getSize: 11,
+ getColor: [220, 220, 220, 200],
+ getPixelOffset: [0, 12],
+ pickable: false,
+ fontFamily: 'system-ui, sans-serif',
+ }));
+ }
+ }
+
+ return layers;
+ }
+
+ private createTechEventClusterLayers(): Layer[] {
+ this.updateClusterData();
+ const layers: Layer[] = [];
+
+ layers.push(new ScatterplotLayer({
+ id: 'tech-event-clusters-layer',
+ data: this.techEventClusters,
+ getPosition: d => [d.lon, d.lat],
+ getRadius: d => 10000 + d.count * 1500,
+ radiusMinPixels: 5,
+ radiusMaxPixels: 18,
+ getFillColor: d => {
+ if (d.soonestDaysUntil <= 14) return [255, 220, 50, 200] as [number, number, number, number];
+ return [80, 140, 255, 180] as [number, number, number, number];
+ },
+ pickable: true,
+ updateTriggers: { getRadius: this.lastSCZoom },
+ }));
+
+ layers.push(this.createGhostLayer('tech-event-clusters-layer', this.techEventClusters, d => [d.lon, d.lat], { radiusMinPixels: 14 }));
+
+ const multiClusters = this.techEventClusters.filter(c => c.count > 1);
+ if (multiClusters.length > 0) {
+ layers.push(new TextLayer({
+ id: 'tech-event-clusters-badge',
+ data: multiClusters,
+ getText: d => String(d.count),
+ getPosition: d => [d.lon, d.lat],
+ background: true,
+ getBackgroundColor: [0, 0, 0, 180],
+ backgroundPadding: [4, 2, 4, 2],
+ getColor: [255, 255, 255, 255],
+ getSize: 12,
+ getPixelOffset: [0, -14],
+ pickable: false,
+ fontFamily: 'system-ui, sans-serif',
+ fontWeight: 700,
+ }));
+ }
+
+ return layers;
+ }
+
+ private createDatacenterClusterLayers(): Layer[] {
+ this.updateClusterData();
+ const layers: Layer[] = [];
+
+ layers.push(new ScatterplotLayer({
+ id: 'datacenter-clusters-layer',
+ data: this.datacenterClusters,
+ getPosition: d => [d.lon, d.lat],
+ getRadius: d => 15000 + d.count * 2000,
+ radiusMinPixels: 6,
+ radiusMaxPixels: 20,
+ getFillColor: d => {
+ if (d.majorityExisting) return [160, 80, 255, 180] as [number, number, number, number];
+ return [80, 160, 255, 180] as [number, number, number, number];
+ },
+ pickable: true,
+ updateTriggers: { getRadius: this.lastSCZoom },
+ }));
+
+ layers.push(this.createGhostLayer('datacenter-clusters-layer', this.datacenterClusters, d => [d.lon, d.lat], { radiusMinPixels: 14 }));
+
+ const multiClusters = this.datacenterClusters.filter(c => c.count > 1);
+ if (multiClusters.length > 0) {
+ layers.push(new TextLayer({
+ id: 'datacenter-clusters-badge',
+ data: multiClusters,
+ getText: d => String(d.count),
+ getPosition: d => [d.lon, d.lat],
+ background: true,
+ getBackgroundColor: [0, 0, 0, 180],
+ backgroundPadding: [4, 2, 4, 2],
+ getColor: [255, 255, 255, 255],
+ getSize: 12,
+ getPixelOffset: [0, -14],
+ pickable: false,
+ fontFamily: 'system-ui, sans-serif',
+ fontWeight: 700,
+ }));
+ }
+
+ return layers;
+ }
+
+ private createHotspotsLayers(): Layer[] {
+ const zoom = this.maplibreMap?.getZoom() || 2;
+ const zoomScale = Math.min(1, (zoom - 1) / 3);
+ const maxPx = 6 + Math.round(14 * zoomScale);
+ const baseOpacity = zoom < 2.5 ? 0.5 : zoom < 4 ? 0.7 : 1.0;
+ const layers: Layer[] = [];
+
+ layers.push(new ScatterplotLayer({
+ id: 'hotspots-layer',
+ data: this.hotspots,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => {
+ const score = d.escalationScore || 1;
+ return 10000 + score * 5000;
+ },
+ getFillColor: (d) => {
+ const score = d.escalationScore || 1;
+ const a = Math.round((score >= 4 ? 200 : score >= 2 ? 200 : 180) * baseOpacity);
+ if (score >= 4) return [255, 68, 68, a] as [number, number, number, number];
+ if (score >= 2) return [255, 165, 0, a] as [number, number, number, number];
+ return [255, 255, 0, a] as [number, number, number, number];
+ },
+ radiusMinPixels: 4,
+ radiusMaxPixels: maxPx,
+ pickable: true,
+ stroked: true,
+ getLineColor: (d) =>
+ d.hasBreaking ? [255, 255, 255, 255] as [number, number, number, number] : [0, 0, 0, 0] as [number, number, number, number],
+ lineWidthMinPixels: 2,
+ }));
+
+ layers.push(this.createGhostLayer('hotspots-layer', this.hotspots, d => [d.lon, d.lat], { radiusMinPixels: 14 }));
+
+ const highHotspots = this.hotspots.filter(h => h.level === 'high' || h.hasBreaking);
+ if (highHotspots.length > 0) {
+ const pulse = 1.0 + 0.8 * (0.5 + 0.5 * Math.sin((this.pulseTime || Date.now()) / 400));
+ layers.push(new ScatterplotLayer({
+ id: 'hotspots-pulse',
+ data: highHotspots,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: (d) => {
+ const score = d.escalationScore || 1;
+ return 10000 + score * 5000;
+ },
+ radiusScale: pulse,
+ radiusMinPixels: 6,
+ radiusMaxPixels: 30,
+ stroked: true,
+ filled: false,
+ getLineColor: (d) => {
+ const a = Math.round(120 * baseOpacity);
+ return d.hasBreaking ? [255, 50, 50, a] as [number, number, number, number] : [255, 165, 0, a] as [number, number, number, number];
+ },
+ lineWidthMinPixels: 1.5,
+ pickable: false,
+ updateTriggers: { radiusScale: this.pulseTime },
+ }));
+
+ }
+
+ return layers;
+ }
+
+ private createGulfInvestmentsLayer(): ScatterplotLayer {
+ return new ScatterplotLayer({
+ id: 'gulf-investments-layer',
+ data: GULF_INVESTMENTS,
+ getPosition: (d: GulfInvestment) => [d.lon, d.lat],
+ getRadius: (d: GulfInvestment) => {
+ if (!d.investmentUSD) return 20000;
+ if (d.investmentUSD >= 50000) return 70000;
+ if (d.investmentUSD >= 10000) return 55000;
+ if (d.investmentUSD >= 1000) return 40000;
+ return 25000;
+ },
+ getFillColor: (d: GulfInvestment) =>
+ d.investingCountry === 'SA' ? COLORS.gulfInvestmentSA : COLORS.gulfInvestmentUAE,
+ getLineColor: [255, 255, 255, 80] as [number, number, number, number],
+ lineWidthMinPixels: 1,
+ radiusMinPixels: 5,
+ radiusMaxPixels: 28,
+ pickable: true,
+ });
+ }
+
+ private pulseTime = 0;
+
+ private canPulse(now = Date.now()): boolean {
+ return now - this.startupTime > 60_000;
+ }
+
+ private hasRecentRiot(now = Date.now(), windowMs = 2 * 60 * 60 * 1000): boolean {
+ const hasRecentClusterRiot = this.protestClusters.some(c =>
+ c.hasRiot && c.latestRiotEventTimeMs != null && (now - c.latestRiotEventTimeMs) < windowMs
+ );
+ if (hasRecentClusterRiot) return true;
+
+ // Fallback to raw protests because syncPulseAnimation can run before cluster data refreshes.
+ return this.protests.some((p) => {
+ if (p.eventType !== 'riot' || p.sourceType === 'gdelt') return false;
+ const ts = p.time.getTime();
+ return Number.isFinite(ts) && (now - ts) < windowMs;
+ });
+ }
+
+ private needsPulseAnimation(now = Date.now()): boolean {
+ return this.hasRecentNews(now)
+ || this.hasRecentRiot(now)
+ || this.hotspots.some(h => h.hasBreaking);
+ }
+
+ private syncPulseAnimation(now = Date.now()): void {
+ if (this.renderPaused) {
+ if (this.newsPulseIntervalId !== null) this.stopPulseAnimation();
+ return;
+ }
+ const shouldPulse = this.canPulse(now) && this.needsPulseAnimation(now);
+ if (shouldPulse && this.newsPulseIntervalId === null) {
+ this.startPulseAnimation();
+ } else if (!shouldPulse && this.newsPulseIntervalId !== null) {
+ this.stopPulseAnimation();
+ }
+ }
+
+ private startPulseAnimation(): void {
+ if (this.newsPulseIntervalId !== null) return;
+ const PULSE_UPDATE_INTERVAL_MS = 500;
+
+ this.newsPulseIntervalId = setInterval(() => {
+ const now = Date.now();
+ if (!this.needsPulseAnimation(now)) {
+ this.pulseTime = now;
+ this.stopPulseAnimation();
+ this.rafUpdateLayers();
+ return;
+ }
+ this.pulseTime = now;
+ this.rafUpdateLayers();
+ }, PULSE_UPDATE_INTERVAL_MS);
+ }
+
+ private stopPulseAnimation(): void {
+ if (this.newsPulseIntervalId !== null) {
+ clearInterval(this.newsPulseIntervalId);
+ this.newsPulseIntervalId = null;
+ }
+ }
+
+ private createNewsLocationsLayer(): ScatterplotLayer[] {
+ const zoom = this.maplibreMap?.getZoom() || 2;
+ const alphaScale = zoom < 2.5 ? 0.4 : zoom < 4 ? 0.7 : 1.0;
+ const filteredNewsLocations = this.filterByTime(this.newsLocations, (location) => location.timestamp);
+ const THREAT_RGB: Record = {
+ critical: [239, 68, 68],
+ high: [249, 115, 22],
+ medium: [234, 179, 8],
+ low: [34, 197, 94],
+ info: [59, 130, 246],
+ };
+ const THREAT_ALPHA: Record = {
+ critical: 220,
+ high: 190,
+ medium: 160,
+ low: 120,
+ info: 80,
+ };
+
+ const now = this.pulseTime || Date.now();
+ const PULSE_DURATION = 30_000;
+
+ const layers: ScatterplotLayer[] = [
+ new ScatterplotLayer({
+ id: 'news-locations-layer',
+ data: filteredNewsLocations,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 18000,
+ getFillColor: (d) => {
+ const rgb = THREAT_RGB[d.threatLevel] || [59, 130, 246];
+ const a = Math.round((THREAT_ALPHA[d.threatLevel] || 120) * alphaScale);
+ return [...rgb, a] as [number, number, number, number];
+ },
+ radiusMinPixels: 3,
+ radiusMaxPixels: 12,
+ pickable: true,
+ }),
+ ];
+
+ const recentNews = filteredNewsLocations.filter(d => {
+ const firstSeen = this.newsLocationFirstSeen.get(d.title);
+ return firstSeen && (now - firstSeen) < PULSE_DURATION;
+ });
+
+ if (recentNews.length > 0) {
+ const pulse = 1.0 + 1.5 * (0.5 + 0.5 * Math.sin(now / 318));
+
+ layers.push(new ScatterplotLayer({
+ id: 'news-pulse-layer',
+ data: recentNews,
+ getPosition: (d) => [d.lon, d.lat],
+ getRadius: 18000,
+ radiusScale: pulse,
+ radiusMinPixels: 6,
+ radiusMaxPixels: 30,
+ pickable: false,
+ stroked: true,
+ filled: false,
+ getLineColor: (d) => {
+ const rgb = THREAT_RGB[d.threatLevel] || [59, 130, 246];
+ const firstSeen = this.newsLocationFirstSeen.get(d.title) || now;
+ const age = now - firstSeen;
+ const fadeOut = Math.max(0, 1 - age / PULSE_DURATION);
+ const a = Math.round(150 * fadeOut * alphaScale);
+ return [...rgb, a] as [number, number, number, number];
+ },
+ lineWidthMinPixels: 1.5,
+ updateTriggers: { pulseTime: now },
+ }));
+ }
+
+ return layers;
+ }
+
+ private getTooltip(info: PickingInfo): { html: string } | null {
+ if (!info.object) return null;
+
+ const rawLayerId = info.layer?.id || '';
+ const layerId = rawLayerId.endsWith('-ghost') ? rawLayerId.slice(0, -6) : rawLayerId;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const obj = info.object as any;
+ const text = (value: unknown): string => escapeHtml(String(value ?? ''));
+
+ switch (layerId) {
+ case 'hotspots-layer':
+ return { html: `
${text(areaDesc.slice(0, 50))}${areaDesc.length > 50 ? '...' : ''}` : ''; + return { html: `
${text(String(inv.stakePercent))}% ${t('components.deckgl.tooltip.stake')}` : ''; + return { + html: ` = {
+ 'conflict-zones-layer': 'conflict',
+ 'bases-layer': 'base',
+ 'nuclear-layer': 'nuclear',
+ 'irradiators-layer': 'irradiator',
+ 'datacenters-layer': 'datacenter',
+ 'cables-layer': 'cable',
+ 'pipelines-layer': 'pipeline',
+ 'earthquakes-layer': 'earthquake',
+ 'weather-layer': 'weather',
+ 'outages-layer': 'outage',
+ 'cyber-threats-layer': 'cyberThreat',
+ 'protests-layer': 'protest',
+ 'military-flights-layer': 'militaryFlight',
+ 'military-vessels-layer': 'militaryVessel',
+ 'military-vessel-clusters-layer': 'militaryVesselCluster',
+ 'military-flight-clusters-layer': 'militaryFlightCluster',
+ 'natural-events-layer': 'natEvent',
+ 'waterways-layer': 'waterway',
+ 'economic-centers-layer': 'economic',
+ 'stock-exchanges-layer': 'stockExchange',
+ 'financial-centers-layer': 'financialCenter',
+ 'central-banks-layer': 'centralBank',
+ 'commodity-hubs-layer': 'commodityHub',
+ 'spaceports-layer': 'spaceport',
+ 'ports-layer': 'port',
+ 'flight-delays-layer': 'flight',
+ 'startup-hubs-layer': 'startupHub',
+ 'tech-hqs-layer': 'techHQ',
+ 'accelerators-layer': 'accelerator',
+ 'cloud-regions-layer': 'cloudRegion',
+ 'tech-events-layer': 'techEvent',
+ 'apt-groups-layer': 'apt',
+ 'minerals-layer': 'mineral',
+ 'ais-disruptions-layer': 'ais',
+ 'cable-advisories-layer': 'cable-advisory',
+ 'repair-ships-layer': 'repair-ship',
+ };
+
+ const popupType = layerToPopupType[layerId];
+ if (!popupType) return;
+
+ // For GeoJSON layers, the data is in properties
+ let data = info.object;
+ if (layerId === 'conflict-zones-layer' && info.object.properties) {
+ // Find the full conflict zone data from config
+ const conflictId = info.object.properties.id;
+ const fullConflict = CONFLICT_ZONES.find(c => c.id === conflictId);
+ if (fullConflict) data = fullConflict;
+ }
+
+ // Get click coordinates relative to container
+ const x = info.x ?? 0;
+ const y = info.y ?? 0;
+
+ this.popup.show({
+ type: popupType,
+ data: data,
+ x,
+ y,
+ });
+ }
+
+ // Utility methods
+ private hexToRgba(hex: string, alpha: number): [number, number, number, number] {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ if (result && result[1] && result[2] && result[3]) {
+ return [
+ parseInt(result[1], 16),
+ parseInt(result[2], 16),
+ parseInt(result[3], 16),
+ alpha,
+ ];
+ }
+ return [100, 100, 100, alpha];
+ }
+
+ // UI Creation methods
+ private createControls(): void {
+ const controls = document.createElement('div');
+ controls.className = 'map-controls deckgl-controls';
+ controls.innerHTML = `
+ {
+ return new ScatterplotLayer({
+ id: 'ucdp-events-layer',
+ data: events,
+ getPosition: (d) => [d.longitude, d.latitude],
+ getRadius: (d) => Math.max(4000, Math.sqrt(d.deaths_best || 1) * 3000),
+ getFillColor: (d) => {
+ switch (d.type_of_violence) {
+ case 'state-based': return COLORS.ucdpStateBased;
+ case 'non-state': return COLORS.ucdpNonState;
+ case 'one-sided': return COLORS.ucdpOneSided;
+ default: return COLORS.ucdpStateBased;
+ }
+ },
+ radiusMinPixels: 3,
+ radiusMaxPixels: 20,
+ pickable: false,
+ });
+ }
+
+ private createDisplacementArcsLayer(): ArcLayer {
+ const withCoords = this.displacementFlows.filter(f => f.originLat != null && f.asylumLat != null);
+ const top50 = withCoords.slice(0, 50);
+ const maxCount = Math.max(1, ...top50.map(f => f.refugees));
+ return new ArcLayer({
+ id: 'displacement-arcs-layer',
+ data: top50,
+ getSourcePosition: (d) => [d.originLon!, d.originLat!],
+ getTargetPosition: (d) => [d.asylumLon!, d.asylumLat!],
+ getSourceColor: getCurrentTheme() === 'light' ? [50, 80, 180, 220] : [100, 150, 255, 180],
+ getTargetColor: getCurrentTheme() === 'light' ? [20, 150, 100, 220] : [100, 255, 200, 180],
+ getWidth: (d) => Math.max(1, (d.refugees / maxCount) * 8),
+ widthMinPixels: 1,
+ widthMaxPixels: 8,
+ pickable: false,
+ });
+ }
+
+ private createClimateHeatmapLayer(): HeatmapLayer {
+ return new HeatmapLayer({
+ id: 'climate-heatmap-layer',
+ data: this.climateAnomalies,
+ getPosition: (d) => [d.lon, d.lat],
+ getWeight: (d) => Math.abs(d.tempDelta) + Math.abs(d.precipDelta) * 0.1,
+ radiusPixels: 40,
+ intensity: 0.6,
+ threshold: 0.15,
+ opacity: 0.45,
+ colorRange: [
+ [68, 136, 255],
+ [100, 200, 255],
+ [255, 255, 100],
+ [255, 200, 50],
+ [255, 100, 50],
+ [255, 50, 50],
+ ],
+ pickable: false,
+ });
+ }
+
+ // Data setters - all use render() for debouncing
+ public setEarthquakes(earthquakes: Earthquake[]): void {
+ this.earthquakes = earthquakes;
+ this.render();
+ }
+
+ public setWeatherAlerts(alerts: WeatherAlert[]): void {
+ this.weatherAlerts = alerts;
+ const withCentroid = alerts.filter(a => a.centroid && a.centroid.length === 2).length;
+ console.log(`[DeckGLMap] Weather alerts: ${alerts.length} total, ${withCentroid} with coordinates`);
+ this.render();
+ }
+
+ public setOutages(outages: InternetOutage[]): void {
+ this.outages = outages;
+ this.render();
+ }
+
+ public setCyberThreats(threats: CyberThreat[]): void {
+ this.cyberThreats = threats;
+ this.render();
+ }
+
+ public setAisData(disruptions: AisDisruptionEvent[], density: AisDensityZone[]): void {
+ this.aisDisruptions = disruptions;
+ this.aisDensity = density;
+ this.render();
+ }
+
+ public setCableActivity(advisories: CableAdvisory[], repairShips: RepairShip[]): void {
+ this.cableAdvisories = advisories;
+ this.repairShips = repairShips;
+ this.render();
+ }
+
+ public setProtests(events: SocialUnrestEvent[]): void {
+ this.protests = events;
+ this.rebuildProtestSupercluster();
+ this.render();
+ this.syncPulseAnimation();
+ }
+
+ public setFlightDelays(delays: AirportDelayAlert[]): void {
+ this.flightDelays = delays;
+ this.render();
+ }
+
+ public setMilitaryFlights(flights: MilitaryFlight[], clusters: MilitaryFlightCluster[] = []): void {
+ this.militaryFlights = flights;
+ this.militaryFlightClusters = clusters;
+ this.render();
+ }
+
+ public setMilitaryVessels(vessels: MilitaryVessel[], clusters: MilitaryVesselCluster[] = []): void {
+ this.militaryVessels = vessels;
+ this.militaryVesselClusters = clusters;
+ this.render();
+ }
+
+ public setNaturalEvents(events: NaturalEvent[]): void {
+ this.naturalEvents = events;
+ this.render();
+ }
+
+ public setFires(fires: Array<{ lat: number; lon: number; brightness: number; frp: number; confidence: number; region: string; acq_date: string; daynight: string }>): void {
+ this.firmsFireData = fires;
+ this.render();
+ }
+
+ public setTechEvents(events: TechEventMarker[]): void {
+ this.techEvents = events;
+ this.rebuildTechEventSupercluster();
+ this.render();
+ }
+
+ public setUcdpEvents(events: UcdpGeoEvent[]): void {
+ this.ucdpEvents = events;
+ this.render();
+ }
+
+ public setDisplacementFlows(flows: DisplacementFlow[]): void {
+ this.displacementFlows = flows;
+ this.render();
+ }
+
+ public setClimateAnomalies(anomalies: ClimateAnomaly[]): void {
+ this.climateAnomalies = anomalies;
+ this.render();
+ }
+
+ public setNewsLocations(data: Array<{ lat: number; lon: number; title: string; threatLevel: string; timestamp?: Date }>): void {
+ const now = Date.now();
+ for (const d of data) {
+ if (!this.newsLocationFirstSeen.has(d.title)) {
+ this.newsLocationFirstSeen.set(d.title, now);
+ }
+ }
+ for (const [key, ts] of this.newsLocationFirstSeen) {
+ if (now - ts > 60_000) this.newsLocationFirstSeen.delete(key);
+ }
+ this.newsLocations = data;
+ this.render();
+
+ this.syncPulseAnimation(now);
+ }
+
+ public updateHotspotActivity(news: NewsItem[]): void {
+ this.news = news; // Store for related news lookup
+
+ // Update hotspot "breaking" indicators based on recent news
+ const breakingKeywords = new Set();
+ const recentNews = news.filter(n =>
+ Date.now() - n.pubDate.getTime() < 2 * 60 * 60 * 1000 // Last 2 hours
+ );
+
+ // Count matches per hotspot for escalation tracking
+ const matchCounts = new Map();
+
+ recentNews.forEach(item => {
+ this.hotspots.forEach(hotspot => {
+ if (hotspot.keywords.some(kw =>
+ item.title.toLowerCase().includes(kw.toLowerCase())
+ )) {
+ breakingKeywords.add(hotspot.id);
+ matchCounts.set(hotspot.id, (matchCounts.get(hotspot.id) || 0) + 1);
+ }
+ });
+ });
+
+ this.hotspots.forEach(h => {
+ h.hasBreaking = breakingKeywords.has(h.id);
+ const matchCount = matchCounts.get(h.id) || 0;
+ // Calculate a simple velocity metric (matches per hour normalized)
+ const velocity = matchCount > 0 ? matchCount / 2 : 0; // 2 hour window
+ updateHotspotEscalation(h.id, matchCount, h.hasBreaking || false, velocity);
+ });
+
+ this.render();
+ this.syncPulseAnimation();
+ }
+
+ /** Get news items related to a hotspot by keyword matching */
+ private getRelatedNews(hotspot: Hotspot): NewsItem[] {
+ // High-priority conflict keywords that indicate the news is really about another topic
+ const conflictTopics = ['gaza', 'ukraine', 'russia', 'israel', 'iran', 'china', 'taiwan', 'korea', 'syria'];
+
+ return this.news
+ .map((item) => {
+ const titleLower = item.title.toLowerCase();
+ const matchedKeywords = hotspot.keywords.filter((kw) => titleLower.includes(kw.toLowerCase()));
+
+ if (matchedKeywords.length === 0) return null;
+
+ // Check if this news mentions other hotspot conflict topics
+ const conflictMatches = conflictTopics.filter(t =>
+ titleLower.includes(t) && !hotspot.keywords.some(k => k.toLowerCase().includes(t))
+ );
+
+ // If article mentions a major conflict topic that isn't this hotspot, deprioritize heavily
+ if (conflictMatches.length > 0) {
+ // Only include if it ALSO has a strong local keyword (city name, agency)
+ const strongLocalMatch = matchedKeywords.some(kw =>
+ kw.toLowerCase() === hotspot.name.toLowerCase() ||
+ hotspot.agencies?.some(a => titleLower.includes(a.toLowerCase()))
+ );
+ if (!strongLocalMatch) return null;
+ }
+
+ // Score: more keyword matches = more relevant
+ const score = matchedKeywords.length;
+ return { item, score };
+ })
+ .filter((x): x is { item: NewsItem; score: number } => x !== null)
+ .sort((a, b) => b.score - a.score)
+ .slice(0, 5)
+ .map(x => x.item);
+ }
+
+ public updateMilitaryForEscalation(flights: MilitaryFlight[], vessels: MilitaryVessel[]): void {
+ setMilitaryData(flights, vessels);
+ }
+
+ public getHotspotDynamicScore(hotspotId: string) {
+ return getHotspotEscalation(hotspotId);
+ }
+
+ /** Get military flight clusters for rendering/analysis */
+ public getMilitaryFlightClusters(): MilitaryFlightCluster[] {
+ return this.militaryFlightClusters;
+ }
+
+ /** Get military vessel clusters for rendering/analysis */
+ public getMilitaryVesselClusters(): MilitaryVesselCluster[] {
+ return this.militaryVesselClusters;
+ }
+
+ public highlightAssets(assets: RelatedAsset[] | null): void {
+ // Clear previous highlights
+ Object.values(this.highlightedAssets).forEach(set => set.clear());
+
+ if (assets) {
+ assets.forEach(asset => {
+ this.highlightedAssets[asset.type].add(asset.id);
+ });
+ }
+
+ this.render(); // Debounced
+ }
+
+ public setOnHotspotClick(callback: (hotspot: Hotspot) => void): void {
+ this.onHotspotClick = callback;
+ }
+
+ public setOnTimeRangeChange(callback: (range: TimeRange) => void): void {
+ this.onTimeRangeChange = callback;
+ }
+
+ public setOnLayerChange(callback: (layer: keyof MapLayers, enabled: boolean) => void): void {
+ this.onLayerChange = callback;
+ }
+
+ public setOnStateChange(callback: (state: DeckMapState) => void): void {
+ this.onStateChange = callback;
+ }
+
+ public getHotspotLevels(): Record {
+ const levels: Record = {};
+ this.hotspots.forEach(h => {
+ levels[h.name] = h.level || 'low';
+ });
+ return levels;
+ }
+
+ public setHotspotLevels(levels: Record): void {
+ this.hotspots.forEach(h => {
+ if (levels[h.name]) {
+ h.level = levels[h.name] as 'low' | 'elevated' | 'high';
+ }
+ });
+ this.render(); // Debounced
+ }
+
+ public initEscalationGetters(): void {
+ setCIIGetter(getCountryScore);
+ setGeoAlertGetter(getAlertsNearLocation);
+ }
+
+ // UI visibility methods
+ public hideLayerToggle(layer: keyof MapLayers): void {
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${layer}"]`);
+ if (toggle) (toggle as HTMLElement).style.display = 'none';
+ }
+
+ public setLayerLoading(layer: keyof MapLayers, loading: boolean): void {
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${layer}"]`);
+ if (toggle) toggle.classList.toggle('loading', loading);
+ }
+
+ public setLayerReady(layer: keyof MapLayers, hasData: boolean): void {
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${layer}"]`);
+ if (!toggle) return;
+
+ toggle.classList.remove('loading');
+ // Match old Map.ts behavior: set 'active' only when layer enabled AND has data
+ if (this.state.layers[layer] && hasData) {
+ toggle.classList.add('active');
+ } else {
+ toggle.classList.remove('active');
+ }
+ }
+
+ public flashAssets(assetType: AssetType, ids: string[]): void {
+ // Temporarily highlight assets
+ ids.forEach(id => this.highlightedAssets[assetType].add(id));
+ this.render();
+
+ setTimeout(() => {
+ ids.forEach(id => this.highlightedAssets[assetType].delete(id));
+ this.render();
+ }, 3000);
+ }
+
+ // Enable layer programmatically
+ public enableLayer(layer: keyof MapLayers): void {
+ if (!this.state.layers[layer]) {
+ this.state.layers[layer] = true;
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${layer}"] input`) as HTMLInputElement;
+ if (toggle) toggle.checked = true;
+ this.render();
+ this.onLayerChange?.(layer, true);
+ }
+ }
+
+ // Toggle layer on/off programmatically
+ public toggleLayer(layer: keyof MapLayers): void {
+ console.log(`[DeckGLMap.toggleLayer] ${layer}: ${this.state.layers[layer]} -> ${!this.state.layers[layer]}`);
+ this.state.layers[layer] = !this.state.layers[layer];
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${layer}"] input`) as HTMLInputElement;
+ if (toggle) toggle.checked = this.state.layers[layer];
+ this.render();
+ this.onLayerChange?.(layer, this.state.layers[layer]);
+ }
+
+ // Get center coordinates for programmatic popup positioning
+ private getContainerCenter(): { x: number; y: number } {
+ const rect = this.container.getBoundingClientRect();
+ return { x: rect.width / 2, y: rect.height / 2 };
+ }
+
+ // Project lat/lon to screen coordinates without moving the map
+ private projectToScreen(lat: number, lon: number): { x: number; y: number } | null {
+ if (!this.maplibreMap) return null;
+ const point = this.maplibreMap.project([lon, lat]);
+ return { x: point.x, y: point.y };
+ }
+
+ // Trigger click methods - show popup at item location without moving the map
+ public triggerHotspotClick(id: string): void {
+ const hotspot = this.hotspots.find(h => h.id === id);
+ if (!hotspot) return;
+
+ // Get screen position for popup
+ const screenPos = this.projectToScreen(hotspot.lat, hotspot.lon);
+ const { x, y } = screenPos || this.getContainerCenter();
+
+ // Get related news and show popup
+ const relatedNews = this.getRelatedNews(hotspot);
+ this.popup.show({
+ type: 'hotspot',
+ data: hotspot,
+ relatedNews,
+ x,
+ y,
+ });
+ this.popup.loadHotspotGdeltContext(hotspot);
+ this.onHotspotClick?.(hotspot);
+ }
+
+ public triggerConflictClick(id: string): void {
+ const conflict = CONFLICT_ZONES.find(c => c.id === id);
+ if (conflict) {
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = this.projectToScreen(conflict.center[1], conflict.center[0]);
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'conflict', data: conflict, x, y });
+ }
+ }
+
+ public triggerBaseClick(id: string): void {
+ const base = MILITARY_BASES.find(b => b.id === id);
+ if (base) {
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = this.projectToScreen(base.lat, base.lon);
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'base', data: base, x, y });
+ }
+ }
+
+ public triggerPipelineClick(id: string): void {
+ const pipeline = PIPELINES.find(p => p.id === id);
+ if (pipeline && pipeline.points.length > 0) {
+ const midIdx = Math.floor(pipeline.points.length / 2);
+ const midPoint = pipeline.points[midIdx];
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = midPoint ? this.projectToScreen(midPoint[1], midPoint[0]) : null;
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'pipeline', data: pipeline, x, y });
+ }
+ }
+
+ public triggerCableClick(id: string): void {
+ const cable = UNDERSEA_CABLES.find(c => c.id === id);
+ if (cable && cable.points.length > 0) {
+ const midIdx = Math.floor(cable.points.length / 2);
+ const midPoint = cable.points[midIdx];
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = midPoint ? this.projectToScreen(midPoint[1], midPoint[0]) : null;
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'cable', data: cable, x, y });
+ }
+ }
+
+ public triggerDatacenterClick(id: string): void {
+ const dc = AI_DATA_CENTERS.find(d => d.id === id);
+ if (dc) {
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = this.projectToScreen(dc.lat, dc.lon);
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'datacenter', data: dc, x, y });
+ }
+ }
+
+ public triggerNuclearClick(id: string): void {
+ const facility = NUCLEAR_FACILITIES.find(n => n.id === id);
+ if (facility) {
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = this.projectToScreen(facility.lat, facility.lon);
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'nuclear', data: facility, x, y });
+ }
+ }
+
+ public triggerIrradiatorClick(id: string): void {
+ const irradiator = GAMMA_IRRADIATORS.find(i => i.id === id);
+ if (irradiator) {
+ // Don't pan - show popup at projected screen position or center
+ const screenPos = this.projectToScreen(irradiator.lat, irradiator.lon);
+ const { x, y } = screenPos || this.getContainerCenter();
+ this.popup.show({ type: 'irradiator', data: irradiator, x, y });
+ }
+ }
+
+ public flashLocation(lat: number, lon: number, durationMs = 2000): void {
+ // Don't pan - project coordinates to screen position
+ const screenPos = this.projectToScreen(lat, lon);
+ if (!screenPos) return;
+
+ // Flash effect by temporarily adding a highlight at the location
+ const flashMarker = document.createElement('div');
+ flashMarker.className = 'flash-location-marker';
+ flashMarker.style.cssText = `
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.5);
+ border: 2px solid #fff;
+ animation: flash-pulse 0.5s ease-out infinite;
+ pointer-events: none;
+ z-index: 1000;
+ left: ${screenPos.x}px;
+ top: ${screenPos.y}px;
+ transform: translate(-50%, -50%);
+ `;
+
+ // Add animation keyframes if not present
+ if (!document.getElementById('flash-animation-styles')) {
+ const style = document.createElement('style');
+ style.id = 'flash-animation-styles';
+ style.textContent = `
+ @keyframes flash-pulse {
+ 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+ 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
+ }
+ `;
+ document.head.appendChild(style);
+ }
+
+ const wrapper = this.container.querySelector('.deckgl-map-wrapper');
+ if (wrapper) {
+ wrapper.appendChild(flashMarker);
+ setTimeout(() => flashMarker.remove(), durationMs);
+ }
+ }
+
+ // --- Country click + highlight ---
+
+ public setOnCountryClick(cb: (country: CountryClickPayload) => void): void {
+ this.onCountryClick = cb;
+ }
+
+ private resolveCountryFromCoordinate(lon: number, lat: number): { code: string; name: string } | null {
+ const fromGeometry = getCountryAtCoordinates(lat, lon);
+ if (fromGeometry) return fromGeometry;
+ if (!this.maplibreMap || !this.countryGeoJsonLoaded) return null;
+ try {
+ const point = this.maplibreMap.project([lon, lat]);
+ const features = this.maplibreMap.queryRenderedFeatures(point, { layers: ['country-interactive'] });
+ const properties = (features?.[0]?.properties ?? {}) as Record;
+ const code = typeof properties['ISO3166-1-Alpha-2'] === 'string'
+ ? properties['ISO3166-1-Alpha-2'].trim().toUpperCase()
+ : '';
+ const name = typeof properties.name === 'string'
+ ? properties.name.trim()
+ : '';
+ if (!code || !name) return null;
+ return { code, name };
+ } catch {
+ return null;
+ }
+ }
+
+ private loadCountryBoundaries(): void {
+ if (!this.maplibreMap || this.countryGeoJsonLoaded) return;
+ this.countryGeoJsonLoaded = true;
+
+ getCountriesGeoJson()
+ .then((geojson) => {
+ if (!this.maplibreMap || !geojson) return;
+ this.maplibreMap.addSource('country-boundaries', {
+ type: 'geojson',
+ data: geojson,
+ });
+ this.maplibreMap.addLayer({
+ id: 'country-interactive',
+ type: 'fill',
+ source: 'country-boundaries',
+ paint: {
+ 'fill-color': '#3b82f6',
+ 'fill-opacity': 0,
+ },
+ });
+ this.maplibreMap.addLayer({
+ id: 'country-hover-fill',
+ type: 'fill',
+ source: 'country-boundaries',
+ paint: {
+ 'fill-color': '#3b82f6',
+ 'fill-opacity': 0.06,
+ },
+ filter: ['==', ['get', 'name'], ''],
+ });
+ this.maplibreMap.addLayer({
+ id: 'country-highlight-fill',
+ type: 'fill',
+ source: 'country-boundaries',
+ paint: {
+ 'fill-color': '#3b82f6',
+ 'fill-opacity': 0.12,
+ },
+ filter: ['==', ['get', 'ISO3166-1-Alpha-2'], ''],
+ });
+ this.maplibreMap.addLayer({
+ id: 'country-highlight-border',
+ type: 'line',
+ source: 'country-boundaries',
+ paint: {
+ 'line-color': '#3b82f6',
+ 'line-width': 1.5,
+ 'line-opacity': 0.5,
+ },
+ filter: ['==', ['get', 'ISO3166-1-Alpha-2'], ''],
+ });
+
+ if (!this.countryHoverSetup) this.setupCountryHover();
+ this.updateCountryLayerPaint(getCurrentTheme());
+ if (this.highlightedCountryCode) this.highlightCountry(this.highlightedCountryCode);
+ console.log('[DeckGLMap] Country boundaries loaded');
+ })
+ .catch((err) => console.warn('[DeckGLMap] Failed to load country boundaries:', err));
+ }
+
+ private setupCountryHover(): void {
+ if (!this.maplibreMap || this.countryHoverSetup) return;
+ this.countryHoverSetup = true;
+ const map = this.maplibreMap;
+ let hoveredName: string | null = null;
+
+ map.on('mousemove', (e) => {
+ if (!this.onCountryClick) return;
+ const features = map.queryRenderedFeatures(e.point, { layers: ['country-interactive'] });
+ const name = features?.[0]?.properties?.name as string | undefined;
+
+ if (name && name !== hoveredName) {
+ hoveredName = name;
+ map.setFilter('country-hover-fill', ['==', ['get', 'name'], name]);
+ map.getCanvas().style.cursor = 'pointer';
+ } else if (!name && hoveredName) {
+ hoveredName = null;
+ map.setFilter('country-hover-fill', ['==', ['get', 'name'], '']);
+ map.getCanvas().style.cursor = '';
+ }
+ });
+
+ map.on('mouseout', () => {
+ if (hoveredName) {
+ hoveredName = null;
+ map.setFilter('country-hover-fill', ['==', ['get', 'name'], '']);
+ map.getCanvas().style.cursor = '';
+ }
+ });
+ }
+
+ public highlightCountry(code: string): void {
+ this.highlightedCountryCode = code;
+ if (!this.maplibreMap || !this.countryGeoJsonLoaded) return;
+ const filter: maplibregl.FilterSpecification = ['==', ['get', 'ISO3166-1-Alpha-2'], code];
+ try {
+ this.maplibreMap.setFilter('country-highlight-fill', filter);
+ this.maplibreMap.setFilter('country-highlight-border', filter);
+ } catch { /* layer not ready yet */ }
+ }
+
+ public clearCountryHighlight(): void {
+ this.highlightedCountryCode = null;
+ if (!this.maplibreMap) return;
+ const noMatch: maplibregl.FilterSpecification = ['==', ['get', 'ISO3166-1-Alpha-2'], ''];
+ try {
+ this.maplibreMap.setFilter('country-highlight-fill', noMatch);
+ this.maplibreMap.setFilter('country-highlight-border', noMatch);
+ } catch { /* layer not ready */ }
+ }
+
+ private switchBasemap(theme: 'dark' | 'light'): void {
+ if (!this.maplibreMap) return;
+ this.maplibreMap.setStyle(theme === 'light' ? LIGHT_STYLE : DARK_STYLE);
+ // setStyle() replaces all sources/layers — reset guard so country layers are re-added
+ this.countryGeoJsonLoaded = false;
+ this.maplibreMap.once('style.load', () => {
+ this.loadCountryBoundaries();
+ });
+ }
+
+ private updateCountryLayerPaint(theme: 'dark' | 'light'): void {
+ if (!this.maplibreMap || !this.countryGeoJsonLoaded) return;
+ const hoverOpacity = theme === 'light' ? 0.10 : 0.06;
+ const highlightOpacity = theme === 'light' ? 0.18 : 0.12;
+ try {
+ this.maplibreMap.setPaintProperty('country-hover-fill', 'fill-opacity', hoverOpacity);
+ this.maplibreMap.setPaintProperty('country-highlight-fill', 'fill-opacity', highlightOpacity);
+ } catch { /* layers may not be ready */ }
+ }
+
+ public destroy(): void {
+ if (this.moveTimeoutId) {
+ clearTimeout(this.moveTimeoutId);
+ this.moveTimeoutId = null;
+ }
+
+ this.stopPulseAnimation();
+
+ if (this.resizeObserver) {
+ this.resizeObserver.disconnect();
+ this.resizeObserver = null;
+ }
+
+ this.layerCache.clear();
+
+ this.deckOverlay?.finalize();
+ this.maplibreMap?.remove();
+
+ this.container.innerHTML = '';
+ }
+}
diff --git a/src/components/DisplacementPanel.ts b/src/components/DisplacementPanel.ts
new file mode 100644
index 000000000..fc35f2de5
--- /dev/null
+++ b/src/components/DisplacementPanel.ts
@@ -0,0 +1,165 @@
+import { Panel } from './Panel';
+import { escapeHtml } from '@/utils/sanitize';
+import type { UnhcrSummary, CountryDisplacement } from '@/types';
+import { formatPopulation } from '@/services/unhcr';
+import { t } from '@/services/i18n';
+
+type DisplacementTab = 'origins' | 'hosts';
+
+export class DisplacementPanel extends Panel {
+ private data: UnhcrSummary | null = null;
+ private activeTab: DisplacementTab = 'origins';
+ private onCountryClick?: (lat: number, lon: number) => void;
+
+ constructor() {
+ super({
+ id: 'displacement',
+ title: t('panels.displacement'),
+ showCount: true,
+ trackActivity: true,
+ infoTooltip: t('components.displacement.infoTooltip'),
+ });
+ this.showLoading(t('common.loadingDisplacement'));
+ }
+
+ public setCountryClickHandler(handler: (lat: number, lon: number) => void): void {
+ this.onCountryClick = handler;
+ }
+
+ public setData(data: UnhcrSummary): void {
+ this.data = data;
+ this.setCount(data.countries.length);
+ this.renderContent();
+ }
+
+ private renderContent(): void {
+ if (!this.data) return;
+
+ const g = this.data.globalTotals;
+
+ const stats = [
+ { label: t('components.displacement.refugees'), value: formatPopulation(g.refugees), cls: 'disp-stat-refugees' },
+ { label: t('components.displacement.asylumSeekers'), value: formatPopulation(g.asylumSeekers), cls: 'disp-stat-asylum' },
+ { label: t('components.displacement.idps'), value: formatPopulation(g.idps), cls: 'disp-stat-idps' },
+ { label: t('components.displacement.total'), value: formatPopulation(g.total), cls: 'disp-stat-total' },
+ ];
+
+ const statsHtml = stats.map(s =>
+ `
+ ${escapeHtml(c.name)}
+ ${badgeHtml}
+ ${formatPopulation(count)}
+ `;
+ }).join('');
+
+ tableHtml = `
+
+
+
`;
+ }
+
+ this.setContent(`
+ | null = null;
+
+ constructor() {
+ super({ id: 'etf-flows', title: t('panels.etfFlows'), showCount: false });
+ void this.fetchData();
+ this.refreshInterval = setInterval(() => this.fetchData(), 3 * 60000);
+ }
+
+ public destroy(): void {
+ if (this.refreshInterval) {
+ clearInterval(this.refreshInterval);
+ this.refreshInterval = null;
+ }
+ }
+
+ private async fetchData(): Promise {
+ try {
+ const res = await fetch('/api/etf-flows');
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ this.data = await res.json();
+ this.error = null;
+ } catch (err) {
+ this.error = err instanceof Error ? err.message : 'Failed to fetch';
+ } finally {
+ this.loading = false;
+ this.renderPanel();
+ }
+ }
+
+ private isUpstreamUnavailable(): boolean {
+ return this.data?.unavailable === true;
+ }
+
+ private renderPanel(): void {
+ if (this.loading) {
+ this.showLoading(t('common.loadingEtfData'));
+ return;
+ }
+
+ if (this.error || !this.data) {
+ this.showError(this.error || t('common.noDataShort'));
+ return;
+ }
+
+ if (this.isUpstreamUnavailable()) {
+ this.showError(t('common.upstreamUnavailable'));
+ return;
+ }
+
+ const d = this.data;
+ if (!d.etfs.length) {
+ this.setContent('
+ ${escapeHtml(etf.ticker)}
+ ${escapeHtml(etf.issuer)}
+ ${etf.direction === 'inflow' ? '+' : etf.direction === 'outflow' ? '-' : ''}$${formatVolume(Math.abs(etf.estFlow))}
+ ${formatVolume(etf.volume)}
+ ${etf.priceChange > 0 ? '+' : ''}${etf.priceChange.toFixed(2)}%
+
+ `).join('');
+
+ const html = `
+
Polymarket
+ ${escapeHtml(market.title)}
+ ${(market.yesPrice * 100).toFixed(1)}%
+
+ `;
+ }).join('');
+
+ section.innerHTML = `📊 ${t('modals.countryIntel.predictionMarkets')}
${items}`;
+ }
+
+ public updateStock(data: StockIndexData): void {
+ const el = this.contentEl.querySelector('.stock-loading');
+ if (!el) return;
+
+ if (!data.available) {
+ el.remove();
+ return;
+ }
+
+ const pct = parseFloat(data.weekChangePercent);
+ const sign = pct >= 0 ? '+' : '';
+ const cls = pct >= 0 ? 'stock-up' : 'stock-down';
+ const arrow = pct >= 0 ? '📈' : '📉';
+ el.className = `signal-chip stock ${cls}`;
+ el.innerHTML = `${arrow} ${escapeHtml(data.indexName)}: ${sign}${data.weekChangePercent}% (1W)`;
+ }
+
+ private formatBrief(text: string): string {
+ return escapeHtml(text)
+ .replace(/\*\*(.*?)\*\*/g, '$1')
+ .replace(/\n\n/g, '')
+ .replace(/\n/g, '
')
+ .replace(/^/, '
') + .replace(/$/, '
'); + } + + public hide(): void { + this.overlay.classList.remove('active'); + this.currentCode = null; + this.onCloseCallback?.(); + } + + public onClose(cb: () => void): void { + this.onCloseCallback = cb; + } + + public isVisible(): boolean { + return this.overlay.classList.contains('active'); + } +} diff --git a/src/components/CountryTimeline.ts b/src/components/CountryTimeline.ts new file mode 100644 index 000000000..e4d6a3ca7 --- /dev/null +++ b/src/components/CountryTimeline.ts @@ -0,0 +1,285 @@ +import * as d3 from 'd3'; +import { escapeHtml } from '@/utils/sanitize'; +import { getCSSColor } from '@/utils'; +import { t } from '@/services/i18n'; + +export interface TimelineEvent { + timestamp: number; + lane: 'protest' | 'conflict' | 'natural' | 'military'; + label: string; + severity?: 'low' | 'medium' | 'high' | 'critical'; +} + +const LANES: TimelineEvent['lane'][] = ['protest', 'conflict', 'natural', 'military']; + +const LANE_COLORS: Record${escapeHtml(dateStr)}`; + tooltip.style.display = 'block'; + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left + 12; + const y = event.clientY - rect.top - 10; + tooltip.style.left = `${x}px`; + tooltip.style.top = `${y}px`; + }) + .on('mousemove', function (event: MouseEvent) { + const rect = container.getBoundingClientRect(); + const x = event.clientX - rect.left + 12; + const y = event.clientY - rect.top - 10; + tooltip.style.left = `${x}px`; + tooltip.style.top = `${y}px`; + }) + .on('mouseleave', function () { + d3.select(this).attr('opacity', 0.85).attr('stroke', getCSSColor('--shadow-color')).attr('stroke-width', 0.5); + tooltip.style.display = 'none'; + }); + } + + destroy(): void { + if (this.resizeObserver) { + this.resizeObserver.disconnect(); + this.resizeObserver = null; + } + if (this.svg) { + this.svg.remove(); + this.svg = null; + } + if (this.tooltip) { + this.tooltip.remove(); + this.tooltip = null; + } + this.currentEvents = []; + } +} diff --git a/src/components/DeckGLMap.ts b/src/components/DeckGLMap.ts new file mode 100644 index 000000000..f6d2bdeac --- /dev/null +++ b/src/components/DeckGLMap.ts @@ -0,0 +1,3852 @@ +/** + * DeckGLMap - WebGL-accelerated map visualization for desktop + * Uses deck.gl for high-performance rendering of large datasets + * Mobile devices gracefully degrade to the D3/SVG-based Map component + */ +import { MapboxOverlay } from '@deck.gl/mapbox'; +import type { Layer, LayersList, PickingInfo } from '@deck.gl/core'; +import { GeoJsonLayer, ScatterplotLayer, PathLayer, IconLayer, TextLayer } from '@deck.gl/layers'; +import maplibregl from 'maplibre-gl'; +import Supercluster from 'supercluster'; +import type { + MapLayers, + Hotspot, + NewsItem, + Earthquake, + InternetOutage, + RelatedAsset, + AssetType, + AisDisruptionEvent, + AisDensityZone, + CableAdvisory, + RepairShip, + SocialUnrestEvent, + AIDataCenter, + AirportDelayAlert, + MilitaryFlight, + MilitaryVessel, + MilitaryFlightCluster, + MilitaryVesselCluster, + NaturalEvent, + UcdpGeoEvent, + DisplacementFlow, + ClimateAnomaly, + MapProtestCluster, + MapTechHQCluster, + MapTechEventCluster, + MapDatacenterCluster, + CyberThreat, +} from '@/types'; +import { ArcLayer } from '@deck.gl/layers'; +import { HeatmapLayer } from '@deck.gl/aggregation-layers'; +import type { WeatherAlert } from '@/services/weather'; +import { escapeHtml } from '@/utils/sanitize'; +import { t } from '@/services/i18n'; +import { debounce, rafSchedule, getCurrentTheme } from '@/utils/index'; +import { + INTEL_HOTSPOTS, + CONFLICT_ZONES, + MILITARY_BASES, + UNDERSEA_CABLES, + NUCLEAR_FACILITIES, + GAMMA_IRRADIATORS, + PIPELINES, + PIPELINE_COLORS, + STRATEGIC_WATERWAYS, + ECONOMIC_CENTERS, + AI_DATA_CENTERS, + SITE_VARIANT, + STARTUP_HUBS, + ACCELERATORS, + TECH_HQS, + CLOUD_REGIONS, + PORTS, + SPACEPORTS, + APT_GROUPS, + CRITICAL_MINERALS, + STOCK_EXCHANGES, + FINANCIAL_CENTERS, + CENTRAL_BANKS, + COMMODITY_HUBS, + GULF_INVESTMENTS, +} from '@/config'; +import type { GulfInvestment } from '@/types'; +import { MapPopup, type PopupType } from './MapPopup'; +import { + updateHotspotEscalation, + getHotspotEscalation, + setMilitaryData, + setCIIGetter, + setGeoAlertGetter, +} from '@/services/hotspot-escalation'; +import { getCountryScore } from '@/services/country-instability'; +import { getAlertsNearLocation } from '@/services/geo-convergence'; +import { getCountriesGeoJson, getCountryAtCoordinates } from '@/services/country-geometry'; + +export type TimeRange = '1h' | '6h' | '24h' | '48h' | '7d' | 'all'; +export type DeckMapView = 'global' | 'america' | 'mena' | 'eu' | 'asia' | 'latam' | 'africa' | 'oceania'; +type MapInteractionMode = 'flat' | '3d'; + +export interface CountryClickPayload { + lat: number; + lon: number; + code?: string; + name?: string; +} + +interface DeckMapState { + zoom: number; + pan: { x: number; y: number }; + view: DeckMapView; + layers: MapLayers; + timeRange: TimeRange; +} + +interface HotspotWithBreaking extends Hotspot { + hasBreaking?: boolean; +} + +interface TechEventMarker { + id: string; + title: string; + location: string; + lat: number; + lng: number; + country: string; + startDate: string; + endDate: string; + url: string | null; + daysUntil: number; +} + +// View presets with longitude, latitude, zoom +const VIEW_PRESETS: Record
${text(obj.name)}
${text(obj.subtext)}
` };
+ case 'earthquakes-layer':
+ return { html: `${text(obj.subtext)}
M${(obj.magnitude || 0).toFixed(1)} ${t('components.deckgl.tooltip.earthquake')}
${text(obj.place)}
` };
+ case 'military-vessels-layer':
+ return { html: `${text(obj.place)}
${text(obj.name)}
${text(obj.operatorCountry)}
` };
+ case 'military-flights-layer':
+ return { html: `${text(obj.operatorCountry)}
${text(obj.callsign || obj.registration || t('components.deckgl.tooltip.militaryAircraft'))}
${text(obj.type)}
` };
+ case 'military-vessel-clusters-layer':
+ return { html: `${text(obj.type)}
${text(obj.name || t('components.deckgl.tooltip.vesselCluster'))}
${obj.vesselCount || 0} ${t('components.deckgl.tooltip.vessels')}
${text(obj.activityType)}
` };
+ case 'military-flight-clusters-layer':
+ return { html: `${obj.vesselCount || 0} ${t('components.deckgl.tooltip.vessels')}
${text(obj.activityType)}
${text(obj.name || t('components.deckgl.tooltip.flightCluster'))}
${obj.flightCount || 0} ${t('components.deckgl.tooltip.aircraft')}
${text(obj.activityType)}
` };
+ case 'protests-layer':
+ return { html: `${obj.flightCount || 0} ${t('components.deckgl.tooltip.aircraft')}
${text(obj.activityType)}
${text(obj.title)}
${text(obj.country)}
` };
+ case 'protest-clusters-layer':
+ if (obj.count === 1) {
+ const item = obj.items?.[0];
+ return { html: `${text(obj.country)}
${text(item?.title || t('components.deckgl.tooltip.protest'))}
${text(item?.city || item?.country || '')}
` };
+ }
+ return { html: `${text(item?.city || item?.country || '')}
${t('components.deckgl.tooltip.protestsCount', { count: String(obj.count) })}
${text(obj.country)}
` };
+ case 'tech-hq-clusters-layer':
+ if (obj.count === 1) {
+ const hq = obj.items?.[0];
+ return { html: `${text(obj.country)}
${text(hq?.company || '')}
${text(hq?.city || '')}
` };
+ }
+ return { html: `${text(hq?.city || '')}
${t('components.deckgl.tooltip.techHQsCount', { count: String(obj.count) })}
${text(obj.city)}
` };
+ case 'tech-event-clusters-layer':
+ if (obj.count === 1) {
+ const ev = obj.items?.[0];
+ return { html: `${text(obj.city)}
${text(ev?.title || '')}
${text(ev?.location || '')}
` };
+ }
+ return { html: `${text(ev?.location || '')}
${t('components.deckgl.tooltip.techEventsCount', { count: String(obj.count) })}
${text(obj.location)}
` };
+ case 'datacenter-clusters-layer':
+ if (obj.count === 1) {
+ const dc = obj.items?.[0];
+ return { html: `${text(obj.location)}
${text(dc?.name || '')}
${text(dc?.owner || '')}
` };
+ }
+ return { html: `${text(dc?.owner || '')}
${t('components.deckgl.tooltip.dataCentersCount', { count: String(obj.count) })}
${text(obj.country)}
` };
+ case 'bases-layer':
+ return { html: `${text(obj.country)}
${text(obj.name)}
${text(obj.country)}
` };
+ case 'nuclear-layer':
+ return { html: `${text(obj.country)}
${text(obj.name)}
${text(obj.type)}
` };
+ case 'datacenters-layer':
+ return { html: `${text(obj.type)}
${text(obj.name)}
${text(obj.owner)}
` };
+ case 'cables-layer':
+ return { html: `${text(obj.owner)}
${text(obj.name)}
${t('components.deckgl.tooltip.underseaCable')}
` };
+ case 'pipelines-layer': {
+ const pipelineType = String(obj.type || '').toLowerCase();
+ const pipelineTypeLabel = pipelineType === 'oil'
+ ? t('popups.pipeline.types.oil')
+ : pipelineType === 'gas'
+ ? t('popups.pipeline.types.gas')
+ : pipelineType === 'products'
+ ? t('popups.pipeline.types.products')
+ : `${text(obj.type)} ${t('components.deckgl.tooltip.pipeline')}`;
+ return { html: `${t('components.deckgl.tooltip.underseaCable')}
${text(obj.name)}
${pipelineTypeLabel}
` };
+ }
+ case 'conflict-zones-layer': {
+ const props = obj.properties || obj;
+ return { html: `${pipelineTypeLabel}
${text(props.name)}
${t('components.deckgl.tooltip.conflictZone')}
` };
+ }
+ case 'natural-events-layer':
+ return { html: `${t('components.deckgl.tooltip.conflictZone')}
${text(obj.title)}
${text(obj.category || t('components.deckgl.tooltip.naturalEvent'))}
` };
+ case 'ais-density-layer':
+ return { html: `${text(obj.category || t('components.deckgl.tooltip.naturalEvent'))}
${t('components.deckgl.layers.shipTraffic')}
${t('popups.intensity')}: ${text(obj.intensity)}
` };
+ case 'waterways-layer':
+ return { html: `${t('popups.intensity')}: ${text(obj.intensity)}
${text(obj.name)}
${t('components.deckgl.layers.strategicWaterways')}
` };
+ case 'economic-centers-layer':
+ return { html: `${t('components.deckgl.layers.strategicWaterways')}
${text(obj.name)}
${text(obj.country)}
` };
+ case 'stock-exchanges-layer':
+ return { html: `${text(obj.country)}
${text(obj.shortName)}
${text(obj.city)}, ${text(obj.country)}
` };
+ case 'financial-centers-layer':
+ return { html: `${text(obj.city)}, ${text(obj.country)}
${text(obj.name)}
${text(obj.type)} ${t('components.deckgl.tooltip.financialCenter')}
` };
+ case 'central-banks-layer':
+ return { html: `${text(obj.type)} ${t('components.deckgl.tooltip.financialCenter')}
${text(obj.shortName)}
${text(obj.city)}, ${text(obj.country)}
` };
+ case 'commodity-hubs-layer':
+ return { html: `${text(obj.city)}, ${text(obj.country)}
${text(obj.name)}
${text(obj.type)} · ${text(obj.city)}
` };
+ case 'startup-hubs-layer':
+ return { html: `${text(obj.type)} · ${text(obj.city)}
${text(obj.city)}
${text(obj.country)}
` };
+ case 'tech-hqs-layer':
+ return { html: `${text(obj.country)}
${text(obj.company)}
${text(obj.city)}
` };
+ case 'accelerators-layer':
+ return { html: `${text(obj.city)}
${text(obj.name)}
${text(obj.city)}
` };
+ case 'cloud-regions-layer':
+ return { html: `${text(obj.city)}
${text(obj.provider)}
${text(obj.region)}
` };
+ case 'tech-events-layer':
+ return { html: `${text(obj.region)}
${text(obj.title)}
${text(obj.location)}
` };
+ case 'irradiators-layer':
+ return { html: `${text(obj.location)}
${text(obj.name)}
${text(obj.type || t('components.deckgl.layers.gammaIrradiators'))}
` };
+ case 'spaceports-layer':
+ return { html: `${text(obj.type || t('components.deckgl.layers.gammaIrradiators'))}
${text(obj.name)}
${text(obj.country || t('components.deckgl.layers.spaceports'))}
` };
+ case 'ports-layer': {
+ const typeIcon = obj.type === 'naval' ? '⚓' : obj.type === 'oil' || obj.type === 'lng' ? '🛢️' : '🏭';
+ return { html: `${text(obj.country || t('components.deckgl.layers.spaceports'))}
${typeIcon} ${text(obj.name)}
${text(obj.type || t('components.deckgl.tooltip.port'))} - ${text(obj.country)}
` };
+ }
+ case 'flight-delays-layer':
+ return { html: `${text(obj.type || t('components.deckgl.tooltip.port'))} - ${text(obj.country)}
${text(obj.airport)}
${text(obj.severity)}: ${text(obj.reason)}
` };
+ case 'apt-groups-layer':
+ return { html: `${text(obj.severity)}: ${text(obj.reason)}
${text(obj.name)}
${text(obj.aka)}
${t('popups.sponsor')}: ${text(obj.sponsor)}
` };
+ case 'minerals-layer':
+ return { html: `${text(obj.aka)}
${t('popups.sponsor')}: ${text(obj.sponsor)}
${text(obj.name)}
${text(obj.mineral)} - ${text(obj.country)}
${text(obj.operator)}
` };
+ case 'ais-disruptions-layer':
+ return { html: `${text(obj.mineral)} - ${text(obj.country)}
${text(obj.operator)}
AIS ${text(obj.type || t('components.deckgl.tooltip.disruption'))}
${text(obj.severity)} ${t('popups.severity')}
${text(obj.description)}
` };
+ case 'cable-advisories-layer': {
+ const cableName = UNDERSEA_CABLES.find(c => c.id === obj.cableId)?.name || obj.cableId;
+ return { html: `${text(obj.severity)} ${t('popups.severity')}
${text(obj.description)}
${text(cableName)}
${text(obj.severity || t('components.deckgl.tooltip.advisory'))}
${text(obj.description)}
` };
+ }
+ case 'repair-ships-layer':
+ return { html: `${text(obj.severity || t('components.deckgl.tooltip.advisory'))}
${text(obj.description)}
${text(obj.name || t('components.deckgl.tooltip.repairShip'))}
${text(obj.status)}
` };
+ case 'weather-layer': {
+ const areaDesc = typeof obj.areaDesc === 'string' ? obj.areaDesc : '';
+ const area = areaDesc ? `${text(obj.status)}
${text(areaDesc.slice(0, 50))}${areaDesc.length > 50 ? '...' : ''}` : ''; + return { html: `
${text(obj.event || t('components.deckgl.layers.weatherAlerts'))}
${text(obj.severity)}${area}
` };
+ }
+ case 'outages-layer':
+ return { html: `${text(obj.severity)}${area}
${text(obj.asn || t('components.deckgl.tooltip.internetOutage'))}
${text(obj.country)}
` };
+ case 'cyber-threats-layer':
+ return { html: `${text(obj.country)}
${t('popups.cyberThreat.title')}
${text(obj.severity || t('components.deckgl.tooltip.medium'))} · ${text(obj.country || t('popups.unknown'))}
` };
+ case 'news-locations-layer':
+ return { html: `${text(obj.severity || t('components.deckgl.tooltip.medium'))} · ${text(obj.country || t('popups.unknown'))}
📰 ${t('components.deckgl.tooltip.news')}
${text(obj.title?.slice(0, 80) || '')}
` };
+ case 'gulf-investments-layer': {
+ const inv = obj as GulfInvestment;
+ const flag = inv.investingCountry === 'SA' ? '🇸🇦' : '🇦🇪';
+ const usd = inv.investmentUSD != null
+ ? (inv.investmentUSD >= 1000 ? `$${(inv.investmentUSD / 1000).toFixed(1)}B` : `$${inv.investmentUSD}M`)
+ : t('components.deckgl.tooltip.undisclosed');
+ const stake = inv.stakePercent != null ? `${text(obj.title?.slice(0, 80) || '')}
${text(String(inv.stakePercent))}% ${t('components.deckgl.tooltip.stake')}` : ''; + return { + html: `
+ ${flag} ${text(inv.assetName)}
+ ${text(inv.investingEntity)}
+ ${text(inv.targetCountry)} · ${text(inv.sector)}
+ ${usd}${stake}
+ ${text(inv.status)} +
`,
+ };
+ }
+ default:
+ return null;
+ }
+ }
+
+ private handleClick(info: PickingInfo): void {
+ if (!info.object) {
+ // Empty map click → country detection
+ if (info.coordinate && this.onCountryClick) {
+ const [lon, lat] = info.coordinate as [number, number];
+ const country = this.resolveCountryFromCoordinate(lon, lat);
+ this.onCountryClick({
+ lat,
+ lon,
+ ...(country ? { code: country.code, name: country.name } : {}),
+ });
+ }
+ return;
+ }
+
+ const rawClickLayerId = info.layer?.id || '';
+ const layerId = rawClickLayerId.endsWith('-ghost') ? rawClickLayerId.slice(0, -6) : rawClickLayerId;
+
+ // Hotspots show popup with related news
+ if (layerId === 'hotspots-layer') {
+ const hotspot = info.object as Hotspot;
+ const relatedNews = this.getRelatedNews(hotspot);
+ this.popup.show({
+ type: 'hotspot',
+ data: hotspot,
+ relatedNews,
+ x: info.x,
+ y: info.y,
+ });
+ this.popup.loadHotspotGdeltContext(hotspot);
+ this.onHotspotClick?.(hotspot);
+ return;
+ }
+
+ // Handle cluster layers with single/multi logic
+ if (layerId === 'protest-clusters-layer') {
+ const cluster = info.object as MapProtestCluster;
+ if (cluster.count === 1 && cluster.items[0]) {
+ this.popup.show({ type: 'protest', data: cluster.items[0], x: info.x, y: info.y });
+ } else {
+ this.popup.show({
+ type: 'protestCluster',
+ data: {
+ items: cluster.items,
+ country: cluster.country,
+ count: cluster.count,
+ riotCount: cluster.riotCount,
+ highSeverityCount: cluster.highSeverityCount,
+ verifiedCount: cluster.verifiedCount,
+ totalFatalities: cluster.totalFatalities,
+ sampled: cluster.sampled,
+ },
+ x: info.x,
+ y: info.y,
+ });
+ }
+ return;
+ }
+ if (layerId === 'tech-hq-clusters-layer') {
+ const cluster = info.object as MapTechHQCluster;
+ if (cluster.count === 1 && cluster.items[0]) {
+ this.popup.show({ type: 'techHQ', data: cluster.items[0], x: info.x, y: info.y });
+ } else {
+ this.popup.show({
+ type: 'techHQCluster',
+ data: {
+ items: cluster.items,
+ city: cluster.city,
+ country: cluster.country,
+ count: cluster.count,
+ faangCount: cluster.faangCount,
+ unicornCount: cluster.unicornCount,
+ publicCount: cluster.publicCount,
+ sampled: cluster.sampled,
+ },
+ x: info.x,
+ y: info.y,
+ });
+ }
+ return;
+ }
+ if (layerId === 'tech-event-clusters-layer') {
+ const cluster = info.object as MapTechEventCluster;
+ if (cluster.count === 1 && cluster.items[0]) {
+ this.popup.show({ type: 'techEvent', data: cluster.items[0], x: info.x, y: info.y });
+ } else {
+ this.popup.show({
+ type: 'techEventCluster',
+ data: {
+ items: cluster.items,
+ location: cluster.location,
+ country: cluster.country,
+ count: cluster.count,
+ soonCount: cluster.soonCount,
+ sampled: cluster.sampled,
+ },
+ x: info.x,
+ y: info.y,
+ });
+ }
+ return;
+ }
+ if (layerId === 'datacenter-clusters-layer') {
+ const cluster = info.object as MapDatacenterCluster;
+ if (cluster.count === 1 && cluster.items[0]) {
+ this.popup.show({ type: 'datacenter', data: cluster.items[0], x: info.x, y: info.y });
+ } else {
+ this.popup.show({
+ type: 'datacenterCluster',
+ data: {
+ items: cluster.items,
+ region: cluster.region || cluster.country,
+ country: cluster.country,
+ count: cluster.count,
+ totalChips: cluster.totalChips,
+ totalPowerMW: cluster.totalPowerMW,
+ existingCount: cluster.existingCount,
+ plannedCount: cluster.plannedCount,
+ sampled: cluster.sampled,
+ },
+ x: info.x,
+ y: info.y,
+ });
+ }
+ return;
+ }
+
+ // Map layer IDs to popup types
+ const layerToPopupType: Record+ ${text(inv.investingEntity)}
+ ${text(inv.targetCountry)} · ${text(inv.sector)}
+ ${usd}${stake}
+ ${text(inv.status)} +
+
+
+
+
+
+
+
+ `;
+
+ this.container.appendChild(controls);
+
+ // Bind events - use event delegation for reliability
+ controls.addEventListener('click', (e) => {
+ const target = e.target as HTMLElement;
+ if (target.classList.contains('zoom-in')) this.zoomIn();
+ else if (target.classList.contains('zoom-out')) this.zoomOut();
+ else if (target.classList.contains('zoom-reset')) this.resetView();
+ });
+
+ const viewSelect = controls.querySelector('.view-select') as HTMLSelectElement;
+ viewSelect.value = this.state.view;
+ viewSelect.addEventListener('change', () => {
+ this.setView(viewSelect.value as DeckMapView);
+ });
+ }
+
+ private createTimeSlider(): void {
+ const slider = document.createElement('div');
+ slider.className = 'time-slider deckgl-time-slider';
+ slider.innerHTML = `
+
+ `;
+
+ this.container.appendChild(slider);
+
+ slider.querySelectorAll('.time-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const range = (btn as HTMLElement).dataset.range as TimeRange;
+ this.setTimeRange(range);
+ });
+ });
+ }
+
+ private updateTimeSliderButtons(): void {
+ const slider = this.container.querySelector('.deckgl-time-slider');
+ if (!slider) return;
+ slider.querySelectorAll('.time-btn').forEach((btn) => {
+ const range = (btn as HTMLElement).dataset.range as TimeRange | undefined;
+ btn.classList.toggle('active', range === this.state.timeRange);
+ });
+ }
+
+ private createLayerToggles(): void {
+ const toggles = document.createElement('div');
+ toggles.className = 'layer-toggles deckgl-layer-toggles';
+
+ const layerConfig = SITE_VARIANT === 'tech'
+ ? [
+ { key: 'startupHubs', label: t('components.deckgl.layers.startupHubs'), icon: '🚀' },
+ { key: 'techHQs', label: t('components.deckgl.layers.techHQs'), icon: '🏢' },
+ { key: 'accelerators', label: t('components.deckgl.layers.accelerators'), icon: '⚡' },
+ { key: 'cloudRegions', label: t('components.deckgl.layers.cloudRegions'), icon: '☁' },
+ { key: 'datacenters', label: t('components.deckgl.layers.aiDataCenters'), icon: '🖥' },
+ { key: 'cables', label: t('components.deckgl.layers.underseaCables'), icon: '🔌' },
+ { key: 'outages', label: t('components.deckgl.layers.internetOutages'), icon: '📡' },
+ { key: 'cyberThreats', label: t('components.deckgl.layers.cyberThreats'), icon: '🛡' },
+ { key: 'techEvents', label: t('components.deckgl.layers.techEvents'), icon: '📅' },
+ { key: 'natural', label: t('components.deckgl.layers.naturalEvents'), icon: '🌋' },
+ { key: 'fires', label: t('components.deckgl.layers.fires'), icon: '🔥' },
+ ]
+ : SITE_VARIANT === 'finance'
+ ? [
+ { key: 'stockExchanges', label: t('components.deckgl.layers.stockExchanges'), icon: '🏛' },
+ { key: 'financialCenters', label: t('components.deckgl.layers.financialCenters'), icon: '💰' },
+ { key: 'centralBanks', label: t('components.deckgl.layers.centralBanks'), icon: '🏦' },
+ { key: 'commodityHubs', label: t('components.deckgl.layers.commodityHubs'), icon: '📦' },
+ { key: 'gulfInvestments', label: t('components.deckgl.layers.gulfInvestments'), icon: '🌐' },
+ { key: 'cables', label: t('components.deckgl.layers.underseaCables'), icon: '🔌' },
+ { key: 'pipelines', label: t('components.deckgl.layers.pipelines'), icon: '🛢' },
+ { key: 'outages', label: t('components.deckgl.layers.internetOutages'), icon: '📡' },
+ { key: 'weather', label: t('components.deckgl.layers.weatherAlerts'), icon: '⛈' },
+ { key: 'economic', label: t('components.deckgl.layers.economicCenters'), icon: '💰' },
+ { key: 'waterways', label: t('components.deckgl.layers.strategicWaterways'), icon: '⚓' },
+ { key: 'natural', label: t('components.deckgl.layers.naturalEvents'), icon: '🌋' },
+ { key: 'cyberThreats', label: t('components.deckgl.layers.cyberThreats'), icon: '🛡' },
+ ]
+ : [
+ { key: 'hotspots', label: t('components.deckgl.layers.intelHotspots'), icon: '🎯' },
+ { key: 'conflicts', label: t('components.deckgl.layers.conflictZones'), icon: '⚔' },
+ { key: 'bases', label: t('components.deckgl.layers.militaryBases'), icon: '🏛' },
+ { key: 'nuclear', label: t('components.deckgl.layers.nuclearSites'), icon: '☢' },
+ { key: 'irradiators', label: t('components.deckgl.layers.gammaIrradiators'), icon: '⚠' },
+ { key: 'spaceports', label: t('components.deckgl.layers.spaceports'), icon: '🚀' },
+ { key: 'cables', label: t('components.deckgl.layers.underseaCables'), icon: '🔌' },
+ { key: 'pipelines', label: t('components.deckgl.layers.pipelines'), icon: '🛢' },
+ { key: 'datacenters', label: t('components.deckgl.layers.aiDataCenters'), icon: '🖥' },
+ { key: 'military', label: t('components.deckgl.layers.militaryActivity'), icon: '✈' },
+ { key: 'ais', label: t('components.deckgl.layers.shipTraffic'), icon: '🚢' },
+ { key: 'flights', label: t('components.deckgl.layers.flightDelays'), icon: '✈' },
+ { key: 'protests', label: t('components.deckgl.layers.protests'), icon: '📢' },
+ { key: 'ucdpEvents', label: t('components.deckgl.layers.ucdpEvents'), icon: '⚔' },
+ { key: 'displacement', label: t('components.deckgl.layers.displacementFlows'), icon: '👥' },
+ { key: 'climate', label: t('components.deckgl.layers.climateAnomalies'), icon: '🌫' },
+ { key: 'weather', label: t('components.deckgl.layers.weatherAlerts'), icon: '⛈' },
+ { key: 'outages', label: t('components.deckgl.layers.internetOutages'), icon: '📡' },
+ { key: 'cyberThreats', label: t('components.deckgl.layers.cyberThreats'), icon: '🛡' },
+ { key: 'natural', label: t('components.deckgl.layers.naturalEvents'), icon: '🌋' },
+ { key: 'fires', label: t('components.deckgl.layers.fires'), icon: '🔥' },
+ { key: 'waterways', label: t('components.deckgl.layers.strategicWaterways'), icon: '⚓' },
+ { key: 'economic', label: t('components.deckgl.layers.economicCenters'), icon: '💰' },
+ { key: 'minerals', label: t('components.deckgl.layers.criticalMinerals'), icon: '💎' },
+ ];
+
+ toggles.innerHTML = `
+
+ ${t('components.deckgl.layersTitle')}
+
+
+
+
+ ${layerConfig.map(({ key, label, icon }) => `
+
+ `).join('')}
+
+ `;
+
+ this.container.appendChild(toggles);
+
+ // Bind toggle events
+ toggles.querySelectorAll('.layer-toggle input').forEach(input => {
+ input.addEventListener('change', () => {
+ const layer = (input as HTMLInputElement).closest('.layer-toggle')?.getAttribute('data-layer') as keyof MapLayers;
+ if (layer) {
+ this.state.layers[layer] = (input as HTMLInputElement).checked;
+ this.render();
+ this.onLayerChange?.(layer, (input as HTMLInputElement).checked);
+ }
+ });
+ });
+
+ // Help button
+ const helpBtn = toggles.querySelector('.layer-help-btn');
+ helpBtn?.addEventListener('click', () => this.showLayerHelp());
+
+ // Collapse toggle
+ const collapseBtn = toggles.querySelector('.toggle-collapse');
+ const toggleList = toggles.querySelector('.toggle-list');
+
+ // Manual scroll: intercept wheel, prevent map zoom, scroll the list ourselves
+ if (toggleList) {
+ toggles.addEventListener('wheel', (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ toggleList.scrollTop += e.deltaY;
+ }, { passive: false });
+ toggles.addEventListener('touchmove', (e) => e.stopPropagation(), { passive: false });
+ }
+ collapseBtn?.addEventListener('click', () => {
+ toggleList?.classList.toggle('collapsed');
+ if (collapseBtn) collapseBtn.innerHTML = toggleList?.classList.contains('collapsed') ? '▶' : '▼';
+ });
+ }
+
+ /** Show layer help popup explaining each layer */
+ private showLayerHelp(): void {
+ const existing = this.container.querySelector('.layer-help-popup');
+ if (existing) {
+ existing.remove();
+ return;
+ }
+
+ const popup = document.createElement('div');
+ popup.className = 'layer-help-popup';
+
+ const label = (layerKey: string): string => t(`components.deckgl.layers.${layerKey}`).toUpperCase();
+ const staticLabel = (labelKey: string): string => t(`components.deckgl.layerHelp.labels.${labelKey}`).toUpperCase();
+ const helpItem = (layerLabel: string, descriptionKey: string): string =>
+ `${layerLabel} ${t(`components.deckgl.layerHelp.descriptions.${descriptionKey}`)}
`;
+ const helpSection = (titleKey: string, items: string[], noteKey?: string): string => `
+
+
+ `;
+ const helpHeader = `
+ ${t(`components.deckgl.layerHelp.sections.${titleKey}`)}
+ ${items.join('')}
+ ${noteKey ? `${t(`components.deckgl.layerHelp.notes.${noteKey}`)}
` : ''}
+
+ ${t('components.deckgl.layerHelp.title')}
+
+
+ `;
+
+ const techHelpContent = `
+ ${helpHeader}
+
+ ${helpSection('techEcosystem', [
+ helpItem(label('startupHubs'), 'techStartupHubs'),
+ helpItem(label('cloudRegions'), 'techCloudRegions'),
+ helpItem(label('techHQs'), 'techHQs'),
+ helpItem(label('accelerators'), 'techAccelerators'),
+ ])}
+ ${helpSection('infrastructure', [
+ helpItem(label('underseaCables'), 'infraCables'),
+ helpItem(label('aiDataCenters'), 'infraDatacenters'),
+ helpItem(label('internetOutages'), 'infraOutages'),
+ ])}
+ ${helpSection('naturalEconomic', [
+ helpItem(label('naturalEvents'), 'naturalEventsTech'),
+ helpItem(label('weatherAlerts'), 'weatherAlerts'),
+ helpItem(label('economicCenters'), 'economicCenters'),
+ helpItem(staticLabel('countries'), 'countriesOverlay'),
+ ])}
+
+ `;
+
+ const financeHelpContent = `
+ ${helpHeader}
+
+ ${helpSection('financeCore', [
+ helpItem(label('stockExchanges'), 'financeExchanges'),
+ helpItem(label('financialCenters'), 'financeCenters'),
+ helpItem(label('centralBanks'), 'financeCentralBanks'),
+ helpItem(label('commodityHubs'), 'financeCommodityHubs'),
+ ])}
+ ${helpSection('infrastructureRisk', [
+ helpItem(label('underseaCables'), 'financeCables'),
+ helpItem(label('pipelines'), 'financePipelines'),
+ helpItem(label('internetOutages'), 'financeOutages'),
+ helpItem(label('cyberThreats'), 'financeCyberThreats'),
+ ])}
+ ${helpSection('macroContext', [
+ helpItem(label('economicCenters'), 'economicCenters'),
+ helpItem(label('strategicWaterways'), 'macroWaterways'),
+ helpItem(label('weatherAlerts'), 'weatherAlertsMarket'),
+ helpItem(label('naturalEvents'), 'naturalEventsMacro'),
+ ])}
+
+ `;
+
+ const fullHelpContent = `
+ ${helpHeader}
+
+ ${helpSection('timeFilter', [
+ helpItem(staticLabel('timeRecent'), 'timeRecent'),
+ helpItem(staticLabel('timeExtended'), 'timeExtended'),
+ ], 'timeAffects')}
+ ${helpSection('geopolitical', [
+ helpItem(label('conflictZones'), 'geoConflicts'),
+ helpItem(label('intelHotspots'), 'geoHotspots'),
+ helpItem(staticLabel('sanctions'), 'geoSanctions'),
+ helpItem(label('protests'), 'geoProtests'),
+ ])}
+ ${helpSection('militaryStrategic', [
+ helpItem(label('militaryBases'), 'militaryBases'),
+ helpItem(label('nuclearSites'), 'militaryNuclear'),
+ helpItem(label('gammaIrradiators'), 'militaryIrradiators'),
+ helpItem(label('militaryActivity'), 'militaryActivity'),
+ ])}
+ ${helpSection('infrastructure', [
+ helpItem(label('underseaCables'), 'infraCablesFull'),
+ helpItem(label('pipelines'), 'infraPipelinesFull'),
+ helpItem(label('internetOutages'), 'infraOutages'),
+ helpItem(label('aiDataCenters'), 'infraDatacentersFull'),
+ ])}
+ ${helpSection('transport', [
+ helpItem(staticLabel('shipping'), 'transportShipping'),
+ helpItem(label('flightDelays'), 'transportDelays'),
+ ])}
+ ${helpSection('naturalEconomic', [
+ helpItem(label('naturalEvents'), 'naturalEventsFull'),
+ helpItem(label('weatherAlerts'), 'weatherAlerts'),
+ helpItem(label('economicCenters'), 'economicCenters'),
+ ])}
+ ${helpSection('labels', [
+ helpItem(staticLabel('countries'), 'countriesOverlay'),
+ helpItem(label('strategicWaterways'), 'waterwaysLabels'),
+ ])}
+
+ `;
+
+ popup.innerHTML = SITE_VARIANT === 'tech'
+ ? techHelpContent
+ : SITE_VARIANT === 'finance'
+ ? financeHelpContent
+ : fullHelpContent;
+
+ popup.querySelector('.layer-help-close')?.addEventListener('click', () => popup.remove());
+
+ // Prevent scroll events from propagating to map
+ const content = popup.querySelector('.layer-help-content');
+ if (content) {
+ content.addEventListener('wheel', (e) => e.stopPropagation(), { passive: false });
+ content.addEventListener('touchmove', (e) => e.stopPropagation(), { passive: false });
+ }
+
+ // Close on click outside
+ setTimeout(() => {
+ const closeHandler = (e: MouseEvent) => {
+ if (!popup.contains(e.target as Node)) {
+ popup.remove();
+ document.removeEventListener('click', closeHandler);
+ }
+ };
+ document.addEventListener('click', closeHandler);
+ }, 100);
+
+ this.container.appendChild(popup);
+ }
+
+ private createLegend(): void {
+ const legend = document.createElement('div');
+ legend.className = 'map-legend deckgl-legend';
+
+ // SVG shapes for different marker types
+ const shapes = {
+ circle: (color: string) => ``,
+ triangle: (color: string) => ``,
+ square: (color: string) => ``,
+ hexagon: (color: string) => ``,
+ };
+
+ const isLight = getCurrentTheme() === 'light';
+ const legendItems = SITE_VARIANT === 'tech'
+ ? [
+ { shape: shapes.circle(isLight ? 'rgb(22, 163, 74)' : 'rgb(0, 255, 150)'), label: t('components.deckgl.legend.startupHub') },
+ { shape: shapes.circle('rgb(100, 200, 255)'), label: t('components.deckgl.legend.techHQ') },
+ { shape: shapes.circle(isLight ? 'rgb(180, 120, 0)' : 'rgb(255, 200, 0)'), label: t('components.deckgl.legend.accelerator') },
+ { shape: shapes.circle('rgb(150, 100, 255)'), label: t('components.deckgl.legend.cloudRegion') },
+ { shape: shapes.square('rgb(136, 68, 255)'), label: t('components.deckgl.legend.datacenter') },
+ ]
+ : SITE_VARIANT === 'finance'
+ ? [
+ { shape: shapes.circle('rgb(255, 215, 80)'), label: t('components.deckgl.legend.stockExchange') },
+ { shape: shapes.circle('rgb(0, 220, 150)'), label: t('components.deckgl.legend.financialCenter') },
+ { shape: shapes.hexagon('rgb(255, 210, 80)'), label: t('components.deckgl.legend.centralBank') },
+ { shape: shapes.square('rgb(255, 150, 80)'), label: t('components.deckgl.legend.commodityHub') },
+ { shape: shapes.triangle('rgb(80, 170, 255)'), label: t('components.deckgl.legend.waterway') },
+ ]
+ : [
+ { shape: shapes.circle('rgb(255, 68, 68)'), label: t('components.deckgl.legend.highAlert') },
+ { shape: shapes.circle('rgb(255, 165, 0)'), label: t('components.deckgl.legend.elevated') },
+ { shape: shapes.circle(isLight ? 'rgb(180, 120, 0)' : 'rgb(255, 255, 0)'), label: t('components.deckgl.legend.monitoring') },
+ { shape: shapes.triangle('rgb(68, 136, 255)'), label: t('components.deckgl.legend.base') },
+ { shape: shapes.hexagon(isLight ? 'rgb(180, 120, 0)' : 'rgb(255, 220, 0)'), label: t('components.deckgl.legend.nuclear') },
+ { shape: shapes.square('rgb(136, 68, 255)'), label: t('components.deckgl.legend.datacenter') },
+ ];
+
+ legend.innerHTML = `
+ ${t('components.deckgl.legend.title')}
+ ${legendItems.map(({ shape, label }) => `${shape}${label}`).join('')}
+ `;
+
+ this.container.appendChild(legend);
+ }
+
+ // Public API methods (matching MapComponent interface)
+ public render(): void {
+ if (this.renderPaused) {
+ this.renderPending = true;
+ return;
+ }
+ if (this.renderScheduled) return;
+ this.renderScheduled = true;
+
+ requestAnimationFrame(() => {
+ this.renderScheduled = false;
+ this.updateLayers();
+ });
+ }
+
+ public setRenderPaused(paused: boolean): void {
+ if (this.renderPaused === paused) return;
+ this.renderPaused = paused;
+ if (paused) {
+ this.stopPulseAnimation();
+ return;
+ }
+
+ this.syncPulseAnimation();
+ if (!paused && this.renderPending) {
+ this.renderPending = false;
+ this.render();
+ }
+ }
+
+ private updateLayers(): void {
+ if (this.renderPaused || this.webglLost) return;
+ const startTime = performance.now();
+ if (this.deckOverlay) {
+ this.deckOverlay.setProps({ layers: this.buildLayers() });
+ }
+ const elapsed = performance.now() - startTime;
+ if (import.meta.env.DEV && elapsed > 16) {
+ console.warn(`[DeckGLMap] updateLayers took ${elapsed.toFixed(2)}ms (>16ms budget)`);
+ }
+ }
+
+ public setView(view: DeckMapView): void {
+ this.state.view = view;
+ const preset = VIEW_PRESETS[view];
+
+ if (this.maplibreMap) {
+ this.maplibreMap.flyTo({
+ center: [preset.longitude, preset.latitude],
+ zoom: preset.zoom,
+ duration: 1000,
+ });
+ }
+
+ const viewSelect = this.container.querySelector('.view-select') as HTMLSelectElement;
+ if (viewSelect) viewSelect.value = view;
+
+ this.onStateChange?.(this.state);
+ }
+
+ public setZoom(zoom: number): void {
+ this.state.zoom = zoom;
+ if (this.maplibreMap) {
+ this.maplibreMap.setZoom(zoom);
+ }
+ }
+
+ public setCenter(lat: number, lon: number, zoom?: number): void {
+ if (this.maplibreMap) {
+ this.maplibreMap.flyTo({
+ center: [lon, lat],
+ ...(zoom != null && { zoom }),
+ duration: 500,
+ });
+ }
+ }
+
+ public getCenter(): { lat: number; lon: number } | null {
+ if (this.maplibreMap) {
+ const center = this.maplibreMap.getCenter();
+ return { lat: center.lat, lon: center.lng };
+ }
+ return null;
+ }
+
+ public setTimeRange(range: TimeRange): void {
+ this.state.timeRange = range;
+ this.rebuildProtestSupercluster();
+ this.onTimeRangeChange?.(range);
+ this.updateTimeSliderButtons();
+ this.render(); // Debounced
+ }
+
+ public getTimeRange(): TimeRange {
+ return this.state.timeRange;
+ }
+
+ public setLayers(layers: MapLayers): void {
+ this.state.layers = layers;
+ this.render(); // Debounced
+
+ // Update toggle checkboxes
+ Object.entries(layers).forEach(([key, value]) => {
+ const toggle = this.container.querySelector(`.layer-toggle[data-layer="${key}"] input`) as HTMLInputElement;
+ if (toggle) toggle.checked = value;
+ });
+ }
+
+ public getState(): DeckMapState {
+ return { ...this.state };
+ }
+
+ // Zoom controls - public for external access
+ public zoomIn(): void {
+ if (this.maplibreMap) {
+ this.maplibreMap.zoomIn();
+ }
+ }
+
+ public zoomOut(): void {
+ if (this.maplibreMap) {
+ this.maplibreMap.zoomOut();
+ }
+ }
+
+ private resetView(): void {
+ this.setView('global');
+ }
+
+ private createUcdpEventsLayer(events: UcdpGeoEvent[]): ScatterplotLayer
+ ${s.value}
+ ${s.label}
+
`
+ ).join('');
+
+ const tabsHtml = `
+
+
+
+
+ `;
+
+ let countries: CountryDisplacement[];
+ if (this.activeTab === 'origins') {
+ countries = [...this.data.countries]
+ .filter(c => c.refugees + c.asylumSeekers > 0)
+ .sort((a, b) => (b.refugees + b.asylumSeekers) - (a.refugees + a.asylumSeekers));
+ } else {
+ countries = [...this.data.countries]
+ .filter(c => (c.hostTotal || 0) > 0)
+ .sort((a, b) => (b.hostTotal || 0) - (a.hostTotal || 0));
+ }
+
+ const displayed = countries.slice(0, 30);
+ let tableHtml: string;
+
+ if (displayed.length === 0) {
+ tableHtml = `${t('common.noDataShort')}
`;
+ } else {
+ const rows = displayed.map(c => {
+ const hostTotal = c.hostTotal || 0;
+ const count = this.activeTab === 'origins' ? c.refugees + c.asylumSeekers : hostTotal;
+ const total = this.activeTab === 'origins' ? c.totalDisplaced : hostTotal;
+ const badgeCls = total >= 1_000_000 ? 'disp-crisis'
+ : total >= 500_000 ? 'disp-high'
+ : total >= 100_000 ? 'disp-elevated'
+ : '';
+ const badgeLabel = total >= 1_000_000 ? t('components.displacement.badges.crisis')
+ : total >= 500_000 ? t('components.displacement.badges.high')
+ : total >= 100_000 ? t('components.displacement.badges.elevated')
+ : '';
+ const badgeHtml = badgeLabel
+ ? `${badgeLabel}`
+ : '';
+
+ return `| ${t('components.displacement.country')} | +${t('components.displacement.status')} | +${t('components.displacement.count')} | +
|---|
+
+
+ `);
+
+ this.content.querySelectorAll('.disp-tab').forEach(btn => {
+ btn.addEventListener('click', () => {
+ this.activeTab = (btn as HTMLElement).dataset.tab as DisplacementTab;
+ this.renderContent();
+ });
+ });
+
+ this.content.querySelectorAll('.disp-row').forEach(el => {
+ el.addEventListener('click', () => {
+ const lat = Number((el as HTMLElement).dataset.lat);
+ const lon = Number((el as HTMLElement).dataset.lon);
+ if (Number.isFinite(lat) && Number.isFinite(lon)) this.onCountryClick?.(lat, lon);
+ });
+ });
+ }
+}
diff --git a/src/components/DownloadBanner.ts b/src/components/DownloadBanner.ts
new file mode 100644
index 000000000..442bcb0ec
--- /dev/null
+++ b/src/components/DownloadBanner.ts
@@ -0,0 +1,188 @@
+import { isDesktopRuntime } from '@/services/runtime';
+import { t } from '@/services/i18n';
+import { isMobileDevice } from '@/utils';
+
+const STORAGE_KEY = 'wm-download-banner-dismissed';
+const SHOW_DELAY_MS = 12_000;
+let bannerScheduled = false;
+
+export function maybeShowDownloadBanner(): void {
+ if (bannerScheduled) return;
+ if (isDesktopRuntime()) return;
+ if (isMobileDevice()) return;
+ if (localStorage.getItem(STORAGE_KEY)) return;
+
+ bannerScheduled = true;
+ setTimeout(() => {
+ if (localStorage.getItem(STORAGE_KEY)) return;
+ const panel = buildPanel();
+ document.body.appendChild(panel);
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => panel.classList.add('wm-dl-show'));
+ });
+ }, SHOW_DELAY_MS);
+}
+
+function dismiss(panel: HTMLElement): void {
+ localStorage.setItem(STORAGE_KEY, '1');
+ panel.classList.remove('wm-dl-show');
+ panel.addEventListener('transitionend', () => panel.remove(), { once: true });
+}
+
+type Platform = 'macos-arm64' | 'macos-x64' | 'macos' | 'windows' | 'linux' | 'unknown';
+
+function detectPlatform(): Platform {
+ const ua = navigator.userAgent;
+ if (/Windows/i.test(ua)) return 'windows';
+ if (/Linux/i.test(ua) && !/Android/i.test(ua)) return 'linux';
+ if (/Mac/i.test(ua)) {
+ // WebGL renderer can reveal Apple Silicon vs Intel GPU
+ try {
+ const c = document.createElement('canvas');
+ const gl = c.getContext('webgl') as WebGLRenderingContext | null;
+ if (gl) {
+ const dbg = gl.getExtension('WEBGL_debug_renderer_info');
+ if (dbg) {
+ const renderer = gl.getParameter(dbg.UNMASKED_RENDERER_WEBGL);
+ if (/Apple M/i.test(renderer)) return 'macos-arm64';
+ if (/Intel/i.test(renderer)) return 'macos-x64';
+ }
+ }
+ } catch { /* ignore */ }
+ // Can't determine architecture — show both Mac options
+ return 'macos';
+ }
+ return 'unknown';
+}
+
+interface DlButton { cls: string; href: string; label: string }
+
+function allButtons(): DlButton[] {
+ return [
+ { cls: 'mac', href: '/api/download?platform=macos-arm64', label: `\uF8FF ${t('modals.downloadBanner.macSilicon')}` },
+ { cls: 'mac', href: '/api/download?platform=macos-x64', label: `\uF8FF ${t('modals.downloadBanner.macIntel')}` },
+ { cls: 'win', href: '/api/download?platform=windows-exe', label: `\u229E ${t('modals.downloadBanner.windows')}` },
+ { cls: 'linux', href: '/api/download?platform=linux-appimage', label: `\u{1F427} ${t('modals.downloadBanner.linux')}` },
+ ];
+}
+
+function buttonsForPlatform(p: Platform): DlButton[] {
+ const buttons = allButtons();
+ switch (p) {
+ case 'macos-arm64': return buttons.filter(b => b.href.includes('macos-arm64'));
+ case 'macos-x64': return buttons.filter(b => b.href.includes('macos-x64'));
+ case 'macos': return buttons.filter(b => b.cls === 'mac');
+ case 'windows': return buttons.filter(b => b.cls === 'win');
+ case 'linux': return buttons.filter(b => b.cls === 'linux');
+ default: return buttons;
+ }
+}
+
+function renderButtons(container: HTMLElement, buttons: DlButton[], panel: HTMLElement): void {
+ container.innerHTML = buttons
+ .map(b => `${b.label}`)
+ .join('');
+ container.querySelectorAll('.wm-dl-btn').forEach(btn =>
+ btn.addEventListener('click', () => dismiss(panel))
+ );
+}
+
+function buildPanel(): HTMLElement {
+ const platform = detectPlatform();
+ const primaryButtons = buttonsForPlatform(platform);
+ const buttons = allButtons();
+ const showToggle = platform !== 'unknown' && primaryButtons.length < buttons.length;
+
+ const el = document.createElement('div');
+ el.className = 'wm-dl-panel';
+ el.innerHTML = `
+
+ ${statsHtml}
+ ${tabsHtml}
+ ${tableHtml}
+
+
+ \u{1F5A5} ${t('modals.downloadBanner.title')}
+
+ ${t('modals.downloadBanner.description')}
+
+ ${showToggle ? `` : ''}
+ `;
+
+ const btnsContainer = el.querySelector('.wm-dl-btns') as HTMLElement;
+ renderButtons(btnsContainer, primaryButtons, el);
+
+ el.querySelector('.wm-dl-close')!.addEventListener('click', () => dismiss(el));
+
+ const toggle = el.querySelector('.wm-dl-toggle');
+ if (toggle) {
+ let showingAll = false;
+ toggle.addEventListener('click', () => {
+ showingAll = !showingAll;
+ renderButtons(btnsContainer, showingAll ? buttons : primaryButtons, el);
+ toggle.textContent = showingAll
+ ? t('modals.downloadBanner.showLess')
+ : t('modals.downloadBanner.showAllPlatforms');
+ });
+ }
+
+ return el;
+}
diff --git a/src/components/ETFFlowsPanel.ts b/src/components/ETFFlowsPanel.ts
new file mode 100644
index 000000000..54304f348
--- /dev/null
+++ b/src/components/ETFFlowsPanel.ts
@@ -0,0 +1,161 @@
+import { Panel } from './Panel';
+import { t } from '@/services/i18n';
+import { escapeHtml } from '@/utils/sanitize';
+
+interface ETFData {
+ ticker: string;
+ issuer: string;
+ price: number;
+ priceChange: number;
+ volume: number;
+ avgVolume: number;
+ volumeRatio: number;
+ direction: 'inflow' | 'outflow' | 'neutral';
+ estFlow: number;
+}
+
+interface ETFFlowsResult {
+ timestamp: string;
+ summary: {
+ etfCount: number;
+ totalVolume: number;
+ totalEstFlow: number;
+ netDirection: string;
+ inflowCount: number;
+ outflowCount: number;
+ };
+ etfs: ETFData[];
+ unavailable?: boolean;
+}
+
+function formatVolume(v: number): string {
+ if (Math.abs(v) >= 1e9) return `${(v / 1e9).toFixed(1)}B`;
+ if (Math.abs(v) >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
+ if (Math.abs(v) >= 1e3) return `${(v / 1e3).toFixed(0)}K`;
+ return v.toLocaleString();
+}
+
+function flowClass(direction: string): string {
+ if (direction === 'inflow') return 'flow-inflow';
+ if (direction === 'outflow') return 'flow-outflow';
+ return 'flow-neutral';
+}
+
+function changeClass(val: number): string {
+ if (val > 0.1) return 'change-positive';
+ if (val < -0.1) return 'change-negative';
+ return 'change-neutral';
+}
+
+export class ETFFlowsPanel extends Panel {
+ private data: ETFFlowsResult | null = null;
+ private loading = true;
+ private error: string | null = null;
+ private refreshInterval: ReturnTypeETF data temporarily unavailable
');
+ return;
+ }
+
+ const s = d.summary;
+ const dirClass = s.netDirection.includes('INFLOW') ? 'flow-inflow' : s.netDirection.includes('OUTFLOW') ? 'flow-outflow' : 'flow-neutral';
+
+ const rows = d.etfs.map(etf => `
+
+
+ `;
+
+ this.setContent(html);
+ }
+}
diff --git a/src/components/EconomicPanel.ts b/src/components/EconomicPanel.ts
index 43bff0ea5..6f032029e 100644
--- a/src/components/EconomicPanel.ts
+++ b/src/components/EconomicPanel.ts
@@ -1,57 +1,127 @@
+import { Panel } from './Panel';
import type { FredSeries } from '@/services/fred';
+import { t } from '@/services/i18n';
+import type { OilAnalytics } from '@/services/oil-analytics';
+import type { SpendingSummary } from '@/services/usa-spending';
import { getChangeClass, formatChange } from '@/services/fred';
+import { formatOilValue, getTrendIndicator, getTrendColor } from '@/services/oil-analytics';
+import { formatAwardAmount, getAwardTypeIcon } from '@/services/usa-spending';
+import { escapeHtml } from '@/utils/sanitize';
-export class EconomicPanel {
- private container: HTMLElement;
- private data: FredSeries[] = [];
- private isLoading = true;
+type TabId = 'indicators' | 'oil' | 'spending';
+
+export class EconomicPanel extends Panel {
+ private fredData: FredSeries[] = [];
+ private oilData: OilAnalytics | null = null;
+ private spendingData: SpendingSummary | null = null;
private lastUpdate: Date | null = null;
+ private activeTab: TabId = 'indicators';
- constructor(container: HTMLElement) {
- this.container = container;
- this.render();
+ constructor() {
+ super({ id: 'economic', title: t('panels.economic') });
}
public update(data: FredSeries[]): void {
- this.data = data;
- this.isLoading = false;
+ this.fredData = data;
this.lastUpdate = new Date();
this.render();
}
- public setLoading(loading: boolean): void {
- this.isLoading = loading;
+ public updateOil(data: OilAnalytics): void {
+ this.oilData = data;
this.render();
}
+ public updateSpending(data: SpendingSummary): void {
+ this.spendingData = data;
+ this.render();
+ }
+
+ public setLoading(loading: boolean): void {
+ if (loading) {
+ this.showLoading();
+ }
+ }
+
private render(): void {
- if (this.isLoading) {
- this.container.innerHTML = `
-
+
+
+ Net Flow
+ ${escapeHtml(s.netDirection)}
+
+
+ Est. Flow
+ $${formatVolume(Math.abs(s.totalEstFlow))}
+
+
+ Total Vol
+ ${formatVolume(s.totalVolume)}
+
+
+ ETFs
+ ${s.inflowCount}↑ ${s.outflowCount}↓
+
+
+
+
+
+
+ | Ticker | +Issuer | +Est. Flow | +Volume | +Change | +
|---|
-
- `;
- return;
+ const hasOil = this.oilData && (this.oilData.wtiPrice || this.oilData.brentPrice);
+ const hasSpending = this.spendingData && this.spendingData.awards.length > 0;
+
+ // Build tabs HTML
+ const tabsHtml = `
+
- ECONOMIC INDICATORS
- FRED
-
- Loading economic data...
-
+
+ ${hasOil ? `
+
+ ` : ''}
+ ${hasSpending ? `
+
+ ` : ''}
+
+ `;
+
+ let contentHtml = '';
+
+ switch (this.activeTab) {
+ case 'indicators':
+ contentHtml = this.renderIndicators();
+ break;
+ case 'oil':
+ contentHtml = this.renderOil();
+ break;
+ case 'spending':
+ contentHtml = this.renderSpending();
+ break;
}
- if (this.data.length === 0) {
- this.container.innerHTML = `
-
-
- `;
- return;
+ const updateTime = this.lastUpdate
+ ? this.lastUpdate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+ : '';
+
+ this.setContent(`
+ ${tabsHtml}
+
- ECONOMIC INDICATORS
- FRED
-
- No data available
-
+ ${contentHtml}
+
+
+ `);
+
+ // Bind tab click events
+ this.content.querySelectorAll('.economic-tab').forEach(tab => {
+ tab.addEventListener('click', (e) => {
+ const tabId = (e.target as HTMLElement).dataset.tab as TabId;
+ if (tabId) {
+ this.activeTab = tabId;
+ this.render();
+ }
+ });
+ });
+ }
+
+ private getSourceLabel(): string {
+ switch (this.activeTab) {
+ case 'indicators': return 'FRED';
+ case 'oil': return 'EIA';
+ case 'spending': return 'USASpending.gov';
+ }
+ }
+
+ private renderIndicators(): string {
+ if (this.fredData.length === 0) {
+ return `${t('components.economic.noIndicatorData')}
`;
}
- const indicatorsHtml = this.data.map(series => {
+ return `
+
+ ${this.fredData.map(series => {
const changeClass = getChangeClass(series.change);
const changeStr = formatChange(series.change, series.unit);
const arrow = series.change !== null
@@ -59,38 +129,92 @@ export class EconomicPanel {
: '';
return `
-
+ `;
+ }
- const updateTime = this.lastUpdate
- ? this.lastUpdate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
- : '';
+ private renderOil(): string {
+ if (!this.oilData) {
+ return `
-
- `;
- }).join('');
+
- ${series.name}
- ${series.id}
-
-
- ${series.value !== null ? series.value : 'N/A'}${series.unit}
- ${arrow} ${changeStr}
-
- ${series.date}
-
+
+ `;
+ }).join('')}
+
+ ${escapeHtml(series.name)}
+ ${escapeHtml(series.id)}
+
+
+ ${escapeHtml(String(series.value !== null ? series.value : 'N/A'))}${escapeHtml(series.unit)}
+ ${escapeHtml(arrow)} ${escapeHtml(changeStr)}
+
+ ${escapeHtml(series.date)}
+ ${t('components.economic.noOilDataRetry')}
`;
+ }
- this.container.innerHTML = `
-
- ();
+ private tabsEl: HTMLElement | null = null;
+ private autoTranslateRunId = 0;
+
+ constructor() {
+ super({
+ id: 'gdelt-intel',
+ title: t('panels.gdeltIntel'),
+ showCount: true,
+ trackActivity: true,
+ infoTooltip: t('components.gdeltIntel.infoTooltip'),
+ });
+ this.createTabs();
+ this.loadActiveTopic();
+ }
+
+ private createTabs(): void {
+ this.tabsEl = document.createElement('div');
+ this.tabsEl.className = 'gdelt-intel-tabs';
+
+ getIntelTopics().forEach(topic => {
+ const tab = document.createElement('button');
+ tab.className = `gdelt-intel-tab ${topic.id === this.activeTopic.id ? 'active' : ''}`;
+ tab.dataset.topicId = topic.id;
+ tab.title = topic.description;
+ tab.innerHTML = `${escapeHtml(topic.name)}`;
+
+ tab.addEventListener('click', () => this.selectTopic(topic));
+ this.tabsEl!.appendChild(tab);
+ });
+
+ this.element.insertBefore(this.tabsEl, this.content);
+ }
+
+ private selectTopic(topic: IntelTopic): void {
+ if (topic.id === this.activeTopic.id) return;
+
+ this.activeTopic = topic;
+
+ this.tabsEl?.querySelectorAll('.gdelt-intel-tab').forEach(tab => {
+ tab.classList.toggle('active', (tab as HTMLElement).dataset.topicId === topic.id);
+ });
+
+ const cached = this.topicData.get(topic.id);
+ if (cached && Date.now() - cached.fetchedAt.getTime() < 5 * 60 * 1000) {
+ this.renderArticles(cached.articles);
+ } else {
+ this.loadActiveTopic();
+ }
+ }
+
+ private async loadActiveTopic(): Promise {
+ this.showLoading();
+
+ try {
+ const data = await fetchTopicIntelligence(this.activeTopic);
+ this.topicData.set(this.activeTopic.id, data);
+ this.renderArticles(data.articles);
+ this.setCount(data.articles.length);
+ } catch (error) {
+ console.error('[GdeltIntelPanel] Load error:', error);
+ this.showError(t('common.failedIntelFeed'));
+ }
+ }
+
+ private renderArticles(articles: GdeltArticle[]): void {
+ if (articles.length === 0) {
+ this.content.innerHTML = `('.gdelt-translate-btn');
+ buttons.forEach((button) => {
+ if (button.dataset.boundClick === '1') return;
+ button.dataset.boundClick = '1';
+ button.addEventListener('click', (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ const text = button.dataset.text;
+ if (text) void this.handleTranslate(button, text);
+ });
+ });
+ }
+
+ private async handleTranslate(button: HTMLElement, text: string): Promise {
+ const currentLang = getCurrentLanguage();
+ if (currentLang === 'en') return;
+
+ const articleEl = button.closest('.gdelt-intel-article');
+ const titleEl = articleEl?.querySelector('.article-title') as HTMLElement | null;
+ if (!titleEl) return;
+
+ const originalText = (titleEl.dataset.original || titleEl.textContent || text).trim();
+ if (!originalText) return;
+ button.innerHTML = '...';
+ button.style.pointerEvents = 'none';
+
+ try {
+ const translated = await translateTextCached(originalText, currentLang);
+ if (!translated) {
+ button.innerHTML = '文';
+ return;
+ }
+
+ titleEl.textContent = translated;
+ titleEl.dataset.original = originalText;
+ titleEl.dataset.translatedLang = currentLang;
+ button.dataset.text = originalText;
+ button.innerHTML = '✓';
+ button.classList.add('translated');
+ button.title = (currentLang === 'vi' ? 'Bản gốc: ' : 'Original: ') + originalText;
+ } catch (error) {
+ console.error('[GdeltIntelPanel] Translation failed:', error);
+ button.innerHTML = '文';
+ } finally {
+ button.style.pointerEvents = 'auto';
+ }
+ }
+
+ private queueAutoTranslateArticles(): void {
+ const lang = getCurrentLanguage();
+ if (lang === 'en') return;
+
+ const runId = ++this.autoTranslateRunId;
+ window.setTimeout(() => {
+ if (runId !== this.autoTranslateRunId) return;
+ void this.autoTranslateVisibleArticles(lang);
+ }, 0);
+ }
+
+ private async autoTranslateVisibleArticles(lang: string): Promise {
+ const titleEls = Array.from(this.content.querySelectorAll('.gdelt-intel-article .article-title'));
+ if (titleEls.length === 0) return;
+
+ await Promise.allSettled(titleEls.map(async (titleEl) => {
+ if (titleEl.dataset.translatedLang === lang) return;
+
+ const sourceText = (titleEl.dataset.original || titleEl.textContent || '').trim();
+ if (!sourceText) return;
+
+ const translated = await translateTextCached(sourceText, lang);
+ if (!translated) return;
+
+ titleEl.dataset.original = sourceText;
+ titleEl.dataset.translatedLang = lang;
+ titleEl.textContent = translated;
+
+ const button = titleEl.closest('.gdelt-intel-article')?.querySelector('.gdelt-translate-btn');
+ if (!button) return;
+ button.dataset.text = sourceText;
+ button.innerHTML = '✓';
+ button.classList.add('translated');
+ button.title = (lang === 'vi' ? 'Bản gốc: ' : 'Original: ') + sourceText;
+ }));
+ }
+
+ public async refresh(): Promise {
+ await this.loadActiveTopic();
+ }
+
+ public async refreshAll(): Promise {
+ this.topicData.clear();
+ await this.loadActiveTopic();
+ }
+}
diff --git a/src/components/GeoHubsPanel.ts b/src/components/GeoHubsPanel.ts
new file mode 100644
index 000000000..0bc28772c
--- /dev/null
+++ b/src/components/GeoHubsPanel.ts
@@ -0,0 +1,123 @@
+import { Panel } from './Panel';
+import type { GeoHubActivity } from '@/services/geo-activity';
+import { escapeHtml, sanitizeUrl } from '@/utils/sanitize';
+import { t } from '@/services/i18n';
+import { getCSSColor } from '@/utils';
+
+const COUNTRY_FLAGS: Record = {
+ 'USA': '🇺🇸', 'Russia': '🇷🇺', 'China': '🇨🇳', 'UK': '🇬🇧', 'Belgium': '🇧🇪',
+ 'Israel': '🇮🇱', 'Iran': '🇮🇷', 'Ukraine': '🇺🇦', 'Taiwan': '🇹🇼', 'Japan': '🇯🇵',
+ 'South Korea': '🇰🇷', 'North Korea': '🇰🇵', 'India': '🇮🇳', 'Saudi Arabia': '🇸🇦',
+ 'Turkey': '🇹🇷', 'France': '🇫🇷', 'Germany': '🇩🇪', 'Egypt': '🇪🇬', 'Pakistan': '🇵🇰',
+ 'Palestine': '🇵🇸', 'Yemen': '🇾🇪', 'Syria': '🇸🇾', 'Lebanon': '🇱🇧',
+ 'Sudan': '🇸🇩', 'Ethiopia': '🇪🇹', 'Myanmar': '🇲🇲', 'Austria': '🇦🇹',
+ 'International': '🌐',
+};
+
+const TYPE_ICONS: Record = {
+ capital: '🏛️',
+ conflict: '⚔️',
+ strategic: '⚓',
+ organization: '🏢',
+};
+
+const TYPE_LABELS: Record = {
+ capital: 'Capital',
+ conflict: 'Conflict Zone',
+ strategic: 'Strategic',
+ organization: 'Organization',
+};
+
+export class GeoHubsPanel extends Panel {
+ private activities: GeoHubActivity[] = [];
+ private onHubClick?: (hub: GeoHubActivity) => void;
+
+ constructor() {
+ super({
+ id: 'geo-hubs',
+ title: t('panels.geoHubs'),
+ showCount: true,
+ infoTooltip: t('components.geoHubs.infoTooltip', {
+ highColor: getCSSColor('--semantic-critical'),
+ elevatedColor: getCSSColor('--semantic-high'),
+ lowColor: getCSSColor('--text-dim'),
+ }),
+ });
+ }
+
+ public setOnHubClick(handler: (hub: GeoHubActivity) => void): void {
+ this.onHubClick = handler;
+ }
+
+ public setActivities(activities: GeoHubActivity[]): void {
+ this.activities = activities.slice(0, 10);
+ this.setCount(this.activities.length);
+ this.render();
+ }
+
+ private getFlag(country: string): string {
+ return COUNTRY_FLAGS[country] || '🌐';
+ }
+
+ private getTypeIcon(type: string): string {
+ return TYPE_ICONS[type] || '📍';
+ }
+
+ private getTypeLabel(type: string): string {
+ return TYPE_LABELS[type] || type;
+ }
+
+ private render(): void {
+ if (this.activities.length === 0) {
+ this.showError(t('common.noActiveGeoHubs'));
+ return;
+ }
+
+ const html = this.activities.map((hub, index) => {
+ const trendIcon = hub.trend === 'rising' ? '↑' : hub.trend === 'falling' ? '↓' : '';
+ const breakingTag = hub.hasBreaking ? 'ALERT' : '';
+ const topStory = hub.topStories[0];
+
+ return `
+ ('.geo-hub-item');
+ items.forEach((item) => {
+ item.addEventListener('click', () => {
+ const hubId = item.dataset.hubId;
+ const hub = this.activities.find(a => a.hubId === hubId);
+ if (hub && this.onHubClick) {
+ this.onHubClick(hub);
+ }
+ });
+ });
+ }
+}
diff --git a/src/components/InsightsPanel.ts b/src/components/InsightsPanel.ts
new file mode 100644
index 000000000..18ca18b75
--- /dev/null
+++ b/src/components/InsightsPanel.ts
@@ -0,0 +1,633 @@
+import { Panel } from './Panel';
+import { mlWorker } from '@/services/ml-worker';
+import { generateSummary } from '@/services/summarization';
+import { parallelAnalysis, type AnalyzedHeadline } from '@/services/parallel-analysis';
+import { signalAggregator, logSignalSummary, type RegionalConvergence } from '@/services/signal-aggregator';
+import { focalPointDetector } from '@/services/focal-point-detector';
+import { ingestNewsForCII } from '@/services/country-instability';
+import { getTheaterPostureSummaries } from '@/services/military-surge';
+import { isMobileDevice } from '@/utils';
+import { escapeHtml, sanitizeUrl } from '@/utils/sanitize';
+import { SITE_VARIANT } from '@/config';
+import { getPersistentCache, setPersistentCache } from '@/services/persistent-cache';
+import { t } from '@/services/i18n';
+import type { ClusteredEvent, FocalPoint, MilitaryFlight } from '@/types';
+
+export class InsightsPanel extends Panel {
+ private isHidden = false;
+ private lastBriefUpdate = 0;
+ private cachedBrief: string | null = null;
+ private lastMissedStories: AnalyzedHeadline[] = [];
+ private lastConvergenceZones: RegionalConvergence[] = [];
+ private lastFocalPoints: FocalPoint[] = [];
+ private lastMilitaryFlights: MilitaryFlight[] = [];
+ private static readonly BRIEF_COOLDOWN_MS = 120000; // 2 min cooldown (API has limits)
+ private static readonly BRIEF_CACHE_KEY = 'summary:world-brief';
+
+ constructor() {
+ super({
+ id: 'insights',
+ title: t('panels.insights'),
+ showCount: false,
+ infoTooltip: t('components.insights.infoTooltip'),
+ });
+
+ if (isMobileDevice()) {
+ this.hide();
+ this.isHidden = true;
+ }
+ }
+
+ public setMilitaryFlights(flights: MilitaryFlight[]): void {
+ this.lastMilitaryFlights = flights;
+ }
+
+ private getTheaterPostureContext(): string {
+ if (this.lastMilitaryFlights.length === 0) {
+ return '';
+ }
+
+ const postures = getTheaterPostureSummaries(this.lastMilitaryFlights);
+ const significant = postures.filter(
+ (p) => p.postureLevel === 'critical' || p.postureLevel === 'elevated' || p.strikeCapable
+ );
+
+ if (significant.length === 0) {
+ return '';
+ }
+
+ const lines = significant.map((p) => {
+ const parts: string[] = [];
+ parts.push(`${p.theaterName}: ${p.totalAircraft} aircraft`);
+ parts.push(`(${p.postureLevel.toUpperCase()})`);
+ if (p.strikeCapable) parts.push('STRIKE CAPABLE');
+ parts.push(`- ${p.summary}`);
+ if (p.targetNation) parts.push(`Focus: ${p.targetNation}`);
+ return parts.join(' ');
+ });
+
+ return `\n\nCRITICAL MILITARY POSTURE:\n${lines.join('\n')}`;
+ }
+
+
+ private async loadBriefFromCache(): Promise {
+ if (this.cachedBrief) return false;
+ const entry = await getPersistentCache<{ summary: string }>(InsightsPanel.BRIEF_CACHE_KEY);
+ if (!entry?.data?.summary) return false;
+ this.cachedBrief = entry.data.summary;
+ this.lastBriefUpdate = entry.updatedAt;
+ return true;
+ }
+ // High-priority military/conflict keywords (huge boost)
+ private static readonly MILITARY_KEYWORDS = [
+ 'war', 'armada', 'invasion', 'airstrike', 'strike', 'missile', 'troops',
+ 'deployed', 'offensive', 'artillery', 'bomb', 'combat', 'fleet', 'warship',
+ 'carrier', 'navy', 'airforce', 'deployment', 'mobilization', 'attack',
+ ];
+
+ // Violence/casualty keywords (huge boost - human cost stories)
+ private static readonly VIOLENCE_KEYWORDS = [
+ 'killed', 'dead', 'death', 'shot', 'blood', 'massacre', 'slaughter',
+ 'fatalities', 'casualties', 'wounded', 'injured', 'murdered', 'execution',
+ 'crackdown', 'violent', 'clashes', 'gunfire', 'shooting',
+ ];
+
+ // Civil unrest keywords (high boost)
+ private static readonly UNREST_KEYWORDS = [
+ 'protest', 'protests', 'uprising', 'revolt', 'revolution', 'riot', 'riots',
+ 'demonstration', 'unrest', 'dissent', 'rebellion', 'insurgent', 'overthrow',
+ 'coup', 'martial law', 'curfew', 'shutdown', 'blackout',
+ ];
+
+ // Geopolitical flashpoints (major boost)
+ private static readonly FLASHPOINT_KEYWORDS = [
+ 'iran', 'tehran', 'russia', 'moscow', 'china', 'beijing', 'taiwan', 'ukraine', 'kyiv',
+ 'north korea', 'pyongyang', 'israel', 'gaza', 'west bank', 'syria', 'damascus',
+ 'yemen', 'hezbollah', 'hamas', 'kremlin', 'pentagon', 'nato', 'wagner',
+ ];
+
+ // Crisis keywords (moderate boost)
+ private static readonly CRISIS_KEYWORDS = [
+ 'crisis', 'emergency', 'catastrophe', 'disaster', 'collapse', 'humanitarian',
+ 'sanctions', 'ultimatum', 'threat', 'retaliation', 'escalation', 'tensions',
+ 'breaking', 'urgent', 'developing', 'exclusive',
+ ];
+
+ // Business/tech context that should REDUCE score (demote business news with military words)
+ private static readonly DEMOTE_KEYWORDS = [
+ 'ceo', 'earnings', 'stock', 'startup', 'data center', 'datacenter', 'revenue',
+ 'quarterly', 'profit', 'investor', 'ipo', 'funding', 'valuation',
+ ];
+
+ private getImportanceScore(cluster: ClusteredEvent): number {
+ let score = 0;
+ const titleLower = cluster.primaryTitle.toLowerCase();
+
+ // Source confirmation (base signal)
+ score += cluster.sourceCount * 10;
+
+ // Violence/casualty keywords: highest priority (+100 base, +25 per match)
+ // "Pools of blood" type stories should always surface
+ const violenceMatches = InsightsPanel.VIOLENCE_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (violenceMatches.length > 0) {
+ score += 100 + (violenceMatches.length * 25);
+ }
+
+ // Military keywords: highest priority (+80 base, +20 per match)
+ const militaryMatches = InsightsPanel.MILITARY_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (militaryMatches.length > 0) {
+ score += 80 + (militaryMatches.length * 20);
+ }
+
+ // Civil unrest: high priority (+70 base, +18 per match)
+ const unrestMatches = InsightsPanel.UNREST_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (unrestMatches.length > 0) {
+ score += 70 + (unrestMatches.length * 18);
+ }
+
+ // Flashpoint keywords: high priority (+60 base, +15 per match)
+ const flashpointMatches = InsightsPanel.FLASHPOINT_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (flashpointMatches.length > 0) {
+ score += 60 + (flashpointMatches.length * 15);
+ }
+
+ // COMBO BONUS: Violence/unrest + flashpoint location = critical story
+ // e.g., "Iran protests" + "blood" = huge boost
+ if ((violenceMatches.length > 0 || unrestMatches.length > 0) && flashpointMatches.length > 0) {
+ score *= 1.5; // 50% bonus for flashpoint unrest
+ }
+
+ // Crisis keywords: moderate priority (+30 base, +10 per match)
+ const crisisMatches = InsightsPanel.CRISIS_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (crisisMatches.length > 0) {
+ score += 30 + (crisisMatches.length * 10);
+ }
+
+ // Demote business/tech news that happens to contain military words
+ const demoteMatches = InsightsPanel.DEMOTE_KEYWORDS.filter(kw => titleLower.includes(kw));
+ if (demoteMatches.length > 0) {
+ score *= 0.3; // Heavy penalty for business context
+ }
+
+ // Velocity multiplier
+ const velMultiplier: Record = {
+ 'viral': 3,
+ 'spike': 2.5,
+ 'elevated': 1.5,
+ 'normal': 1
+ };
+ score *= velMultiplier[cluster.velocity?.level ?? 'normal'] ?? 1;
+
+ // Alert bonus
+ if (cluster.isAlert) score += 50;
+
+ // Recency bonus (decay over 12 hours)
+ const ageMs = Date.now() - cluster.firstSeen.getTime();
+ const ageHours = ageMs / 3600000;
+ const recencyMultiplier = Math.max(0.5, 1 - (ageHours / 12));
+ score *= recencyMultiplier;
+
+ return score;
+ }
+
+ private selectTopStories(clusters: ClusteredEvent[], maxCount: number): ClusteredEvent[] {
+ // Score ALL clusters first - high-scoring stories override source requirements
+ const allScored = clusters
+ .map(c => ({ cluster: c, score: this.getImportanceScore(c) }));
+
+ // Filter: require at least 2 sources OR alert OR elevated velocity OR high score
+ // High score (>100) means critical keywords were matched - don't require multi-source
+ const candidates = allScored.filter(({ cluster: c, score }) =>
+ c.sourceCount >= 2 ||
+ c.isAlert ||
+ (c.velocity && c.velocity.level !== 'normal') ||
+ score > 100 // Critical stories bypass source requirement
+ );
+
+ // Sort by score
+ const scored = candidates.sort((a, b) => b.score - a.score);
+
+ // Select with source diversity (max 3 from same primary source)
+ const selected: ClusteredEvent[] = [];
+ const sourceCount = new Map();
+ const MAX_PER_SOURCE = 3;
+
+ for (const { cluster } of scored) {
+ const source = cluster.primarySource;
+ const count = sourceCount.get(source) || 0;
+
+ if (count < MAX_PER_SOURCE) {
+ selected.push(cluster);
+ sourceCount.set(source, count + 1);
+ }
+
+ if (selected.length >= maxCount) break;
+ }
+
+ return selected;
+ }
+
+ private setProgress(step: number, total: number, message: string): void {
+ const percent = Math.round((step / total) * 100);
+ this.setContent(`
+ {
+ if (this.isHidden) return;
+
+ if (clusters.length === 0) {
+ this.setDataBadge('unavailable');
+ this.setContent(';
+ let focalSummary: ReturnType;
+
+ if (SITE_VARIANT === 'full') {
+ signalSummary = signalAggregator.getSummary();
+ this.lastConvergenceZones = signalSummary.convergenceZones;
+ if (signalSummary.totalSignals > 0) {
+ logSignalSummary();
+ }
+
+ // Run focal point detection (correlates news entities with map signals)
+ focalSummary = focalPointDetector.analyze(clusters, signalSummary);
+ this.lastFocalPoints = focalSummary.focalPoints;
+ if (focalSummary.focalPoints.length > 0) {
+ focalPointDetector.logSummary();
+ // Ingest news for CII BEFORE signaling (so CII has data when it calculates)
+ ingestNewsForCII(clusters);
+ // Signal CII to refresh now that focal points AND news data are available
+ window.dispatchEvent(new CustomEvent('focal-points-ready'));
+ }
+ } else {
+ // Tech variant: no geopolitical signals, just summarize tech news
+ signalSummary = {
+ timestamp: new Date(),
+ totalSignals: 0,
+ byType: {} as Record,
+ convergenceZones: [],
+ topCountries: [],
+ aiContext: '',
+ };
+ focalSummary = {
+ focalPoints: [],
+ aiContext: '',
+ timestamp: new Date(),
+ topCountries: [],
+ topCompanies: [],
+ };
+ this.lastConvergenceZones = [];
+ this.lastFocalPoints = [];
+ }
+
+ if (importantClusters.length === 0) {
+ this.setContent(' = {
+ internet_outage: '🌐',
+ military_flight: '✈️',
+ military_vessel: '🚢',
+ protest: '🪧',
+ ais_disruption: '⚓',
+ };
+
+ const icons = zone.signalTypes.map(t => signalIcons[t] || '📍').join('');
+
+ return `
+ = {
+ internet_outage: '🌐',
+ military_flight: '✈️',
+ military_vessel: '⚓',
+ protest: '📢',
+ ais_disruption: '🚢',
+ };
+
+ const focalPointsHtml = correlatedFPs.map(fp => {
+ const urgencyClass = fp.urgency;
+ const icons = fp.signalTypes.map(t => signalIcons[t] || '').join(' ');
+ const topHeadline = fp.topHeadlines[0];
+ const headlineText = topHeadline?.title?.slice(0, 60) || '';
+ const headlineUrl = sanitizeUrl(topHeadline?.url || '');
+
+ return `
+ | null = null;
+ private lastFindingCount = 0;
+ private onSignalClick: ((signal: CorrelationSignal) => void) | null = null;
+ private onAlertClick: ((alert: UnifiedAlert) => void) | null = null;
+ private findings: UnifiedFinding[] = [];
+ private boundCloseDropdown = () => this.closeDropdown();
+ private audio: HTMLAudioElement | null = null;
+ private audioEnabled = true;
+ private enabled: boolean;
+ private contextMenu: HTMLElement | null = null;
+
+ constructor() {
+ this.enabled = IntelligenceFindingsBadge.getStoredEnabledState();
+
+ this.badge = document.createElement('button');
+ this.badge.className = 'intel-findings-badge';
+ this.badge.title = t('components.intelligenceFindings.badgeTitle');
+ this.badge.innerHTML = '0';
+
+ this.dropdown = document.createElement('div');
+ this.dropdown.className = 'intel-findings-dropdown';
+
+ this.badge.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggleDropdown();
+ });
+
+ this.badge.addEventListener('contextmenu', (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.showContextMenu(e.clientX, e.clientY);
+ });
+
+ // Event delegation for finding items and "more" link
+ this.dropdown.addEventListener('click', (e) => {
+ const target = e.target as HTMLElement;
+
+ // Handle "more findings" click - show all in modal
+ if (target.closest('.findings-more')) {
+ e.stopPropagation();
+ this.showAllFindings();
+ this.closeDropdown();
+ return;
+ }
+
+ // Handle individual finding click
+ const item = target.closest('.finding-item');
+ if (!item) return;
+ e.stopPropagation();
+ const id = item.getAttribute('data-finding-id');
+ const finding = this.findings.find(f => f.id === id);
+ if (!finding) return;
+
+ if (finding.source === 'signal' && this.onSignalClick) {
+ this.onSignalClick(finding.original as CorrelationSignal);
+ } else if (finding.source === 'alert' && this.onAlertClick) {
+ this.onAlertClick(finding.original as UnifiedAlert);
+ }
+ this.closeDropdown();
+ });
+
+ if (this.enabled) {
+ document.addEventListener('click', this.boundCloseDropdown);
+ this.mount();
+ this.initAudio();
+ this.update();
+ this.startRefresh();
+ }
+ }
+
+ private initAudio(): void {
+ this.audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2teleQYjfKapmWswEjCJvuPQfSoXZZ+3qqBJESSP0unGaxMJVYiytrFeLhR6p8znrFUXRW+bs7V3Qx1hn8Xjp1cYPnegprhkMCFmoLi1k0sZTYGlqqlUIA==');
+ this.audio.volume = 0.3;
+ }
+
+ private playSound(): void {
+ if (this.audioEnabled && this.audio) {
+ this.audio.currentTime = 0;
+ this.audio.play().catch(() => {});
+ }
+ }
+
+ public setOnSignalClick(handler: (signal: CorrelationSignal) => void): void {
+ this.onSignalClick = handler;
+ }
+
+ public setOnAlertClick(handler: (alert: UnifiedAlert) => void): void {
+ this.onAlertClick = handler;
+ }
+
+ public static getStoredEnabledState(): boolean {
+ return localStorage.getItem(STORAGE_KEY) !== 'hidden';
+ }
+
+ public isEnabled(): boolean {
+ return this.enabled;
+ }
+
+ public setEnabled(enabled: boolean): void {
+ if (this.enabled === enabled) return;
+ this.enabled = enabled;
+
+ if (enabled) {
+ localStorage.removeItem(STORAGE_KEY);
+ document.addEventListener('click', this.boundCloseDropdown);
+ this.mount();
+ this.initAudio();
+ this.update();
+ this.startRefresh();
+ } else {
+ localStorage.setItem(STORAGE_KEY, 'hidden');
+ document.removeEventListener('click', this.boundCloseDropdown);
+ if (this.refreshInterval) {
+ clearInterval(this.refreshInterval);
+ this.refreshInterval = null;
+ }
+ this.closeDropdown();
+ this.dismissContextMenu();
+ this.badge.remove();
+ }
+ }
+
+ private showContextMenu(x: number, y: number): void {
+ this.dismissContextMenu();
+
+ const menu = document.createElement('div');
+ menu.className = 'intel-findings-context-menu';
+ menu.style.left = `${x}px`;
+ menu.style.top = `${y}px`;
+ menu.innerHTML = '';
+
+ menu.querySelector('.context-menu-item')!.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.setEnabled(false);
+ this.dismissContextMenu();
+ });
+
+ const dismiss = () => this.dismissContextMenu();
+ document.addEventListener('click', dismiss, { once: true });
+
+ this.contextMenu = menu;
+ document.body.appendChild(menu);
+ }
+
+ private dismissContextMenu(): void {
+ if (this.contextMenu) {
+ this.contextMenu.remove();
+ this.contextMenu = null;
+ }
+ }
+
+ private mount(): void {
+ const headerRight = document.querySelector('.header-right');
+ if (headerRight) {
+ this.badge.appendChild(this.dropdown);
+ headerRight.insertBefore(this.badge, headerRight.firstChild);
+ }
+ }
+
+ private startRefresh(): void {
+ this.refreshInterval = setInterval(() => this.update(), REFRESH_INTERVAL_MS);
+ }
+
+ public update(): void {
+ this.findings = this.mergeFindings();
+ const count = this.findings.length;
+
+ const countEl = this.badge.querySelector('.findings-count');
+ if (countEl) {
+ countEl.textContent = String(count);
+ }
+
+ // Pulse animation and sound when new findings arrive
+ if (count > this.lastFindingCount && this.lastFindingCount > 0) {
+ this.badge.classList.add('pulse');
+ setTimeout(() => this.badge.classList.remove('pulse'), 1000);
+ this.playSound();
+ }
+ this.lastFindingCount = count;
+
+ // Update badge status based on priority
+ const hasCritical = this.findings.some(f => f.priority === 'critical');
+ const hasHigh = this.findings.some(f => f.priority === 'high' || f.confidence >= 0.7);
+
+ this.badge.classList.remove('status-none', 'status-low', 'status-high');
+ if (count === 0) {
+ this.badge.classList.add('status-none');
+ this.badge.title = t('components.intelligenceFindings.none');
+ } else if (hasCritical || hasHigh) {
+ this.badge.classList.add('status-high');
+ this.badge.title = t('components.intelligenceFindings.reviewRecommended', { count: String(count) });
+ } else if (count <= LOW_COUNT_THRESHOLD) {
+ this.badge.classList.add('status-low');
+ this.badge.title = t('components.intelligenceFindings.count', { count: String(count) });
+ } else {
+ this.badge.classList.add('status-high');
+ this.badge.title = t('components.intelligenceFindings.reviewRecommended', { count: String(count) });
+ }
+
+ this.renderDropdown();
+ }
+
+ private mergeFindings(): UnifiedFinding[] {
+ const signals = getRecentSignals();
+ const alerts = getRecentAlerts(ALERT_HOURS);
+
+ const signalFindings: UnifiedFinding[] = signals.map(s => ({
+ id: `signal-${s.id}`,
+ source: 'signal' as FindingSource,
+ type: s.type,
+ title: s.title,
+ description: s.description,
+ confidence: s.confidence,
+ priority: s.confidence >= 0.7 ? 'high' as const : s.confidence >= 0.5 ? 'medium' as const : 'low' as const,
+ timestamp: s.timestamp,
+ original: s,
+ }));
+
+ const alertFindings: UnifiedFinding[] = alerts.map(a => ({
+ id: `alert-${a.id}`,
+ source: 'alert' as FindingSource,
+ type: a.type,
+ title: a.title,
+ description: a.summary,
+ confidence: this.priorityToConfidence(a.priority),
+ priority: a.priority,
+ timestamp: a.timestamp,
+ original: a,
+ }));
+
+ // Merge and sort by timestamp (newest first), then by priority
+ return [...signalFindings, ...alertFindings].sort((a, b) => {
+ const timeDiff = b.timestamp.getTime() - a.timestamp.getTime();
+ if (Math.abs(timeDiff) < SORT_TIME_TOLERANCE_MS) {
+ return this.priorityScore(b.priority) - this.priorityScore(a.priority);
+ }
+ return timeDiff;
+ });
+ }
+
+ private priorityToConfidence(priority: string): number {
+ const map: Record = { critical: 95, high: 80, medium: 60, low: 40 };
+ return map[priority] ?? 50;
+ }
+
+ private priorityScore(priority: string): number {
+ const map: Record = { critical: 4, high: 3, medium: 2, low: 1 };
+ return map[priority] ?? 0;
+ }
+
+ private renderDropdown(): void {
+ if (this.findings.length === 0) {
+ this.dropdown.innerHTML = `
+ = {
+ // Correlation signals
+ breaking_surge: '🔥',
+ silent_divergence: '🔇',
+ flow_price_divergence: '📊',
+ explained_market_move: '💡',
+ prediction_leads_news: '🔮',
+ geo_convergence: '🌍',
+ hotspot_escalation: '⚠️',
+ news_leads_markets: '📰',
+ velocity_spike: '📈',
+ keyword_spike: '📊',
+ convergence: '🔀',
+ triangulation: '🔺',
+ flow_drop: '⬇️',
+ sector_cascade: '🌊',
+ // Unified alerts
+ cii_spike: '🔴',
+ cascade: '⚡',
+ composite: '🔗',
+ };
+ return icons[type] || '📌';
+ }
+
+ private formatTimeAgo(date: Date): string {
+ const ms = Date.now() - date.getTime();
+ if (ms < 60000) return t('components.intelligenceFindings.time.justNow');
+ if (ms < 3600000) return t('components.intelligenceFindings.time.minutesAgo', { count: String(Math.floor(ms / 60000)) });
+ if (ms < 86400000) return t('components.intelligenceFindings.time.hoursAgo', { count: String(Math.floor(ms / 3600000)) });
+ return t('components.intelligenceFindings.time.daysAgo', { count: String(Math.floor(ms / 86400000)) });
+ }
+
+ private toggleDropdown(): void {
+ this.isOpen = !this.isOpen;
+ this.dropdown.classList.toggle('open', this.isOpen);
+ this.badge.classList.toggle('active', this.isOpen);
+ if (this.isOpen) {
+ this.update();
+ }
+ }
+
+ private closeDropdown(): void {
+ this.isOpen = false;
+ this.dropdown.classList.remove('open');
+ this.badge.classList.remove('active');
+ }
+
+ private showAllFindings(): void {
+ // Create modal overlay
+ const overlay = document.createElement('div');
+ overlay.className = 'findings-modal-overlay';
+
+ const findingsHtml = this.findings.map(finding => {
+ const timeAgo = this.formatTimeAgo(finding.timestamp);
+ const icon = this.getTypeIcon(finding.type);
+ const insight = this.getInsight(finding);
+
+ return `
+ = {
+ ports: 'Ports',
+ pipelines: 'Pipelines',
+ energy: 'Energy',
+ datacenters: 'Data Centers',
+ airports: 'Airports',
+ railways: 'Railways',
+ telecoms: 'Telecoms',
+ water: 'Water',
+ logistics: 'Logistics',
+ mining: 'Mining',
+ 'real-estate': 'Real Estate',
+ manufacturing: 'Manufacturing',
+};
+
+const STATUS_COLORS: Record = {
+ 'operational': '#22c55e',
+ 'under-construction': '#f59e0b',
+ 'announced': '#60a5fa',
+ 'rumoured': '#a78bfa',
+ 'cancelled': '#ef4444',
+ 'divested': '#6b7280',
+};
+
+const FLAG: Record = {
+ SA: '🇸🇦',
+ UAE: '🇦🇪',
+};
+
+function formatUSD(usd?: number): string {
+ if (usd === undefined) return 'Undisclosed';
+ if (usd >= 100000) return `$${(usd / 1000).toFixed(0)}B`;
+ if (usd >= 1000) return `$${(usd / 1000).toFixed(1)}B`;
+ return `$${usd.toLocaleString()}M`;
+}
+
+export class InvestmentsPanel extends Panel {
+ private filters: InvestmentFilters = {
+ investingCountry: 'ALL',
+ sector: 'ALL',
+ entity: 'ALL',
+ status: 'ALL',
+ search: '',
+ };
+ private sortKey: keyof GulfInvestment = 'assetName';
+ private sortAsc = true;
+ private onInvestmentClick?: (inv: GulfInvestment) => void;
+
+ constructor(onInvestmentClick?: (inv: GulfInvestment) => void) {
+ super({
+ id: 'gcc-investments',
+ title: t('panels.gccInvestments'),
+ showCount: true,
+ infoTooltip: t('components.investments.infoTooltip'),
+ });
+ this.onInvestmentClick = onInvestmentClick;
+ this.render();
+ }
+
+ private getFiltered(): GulfInvestment[] {
+ const { investingCountry, sector, entity, status, search } = this.filters;
+ const q = search.toLowerCase();
+
+ return GULF_INVESTMENTS
+ .filter(inv => {
+ if (investingCountry !== 'ALL' && inv.investingCountry !== investingCountry) return false;
+ if (sector !== 'ALL' && inv.sector !== sector) return false;
+ if (entity !== 'ALL' && inv.investingEntity !== entity) return false;
+ if (status !== 'ALL' && inv.status !== status) return false;
+ if (q && !inv.assetName.toLowerCase().includes(q)
+ && !inv.targetCountry.toLowerCase().includes(q)
+ && !inv.description.toLowerCase().includes(q)
+ && !inv.investingEntity.toLowerCase().includes(q)) return false;
+ return true;
+ })
+ .sort((a, b) => {
+ const key = this.sortKey;
+ const av = a[key] ?? '';
+ const bv = b[key] ?? '';
+ const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+ return this.sortAsc ? cmp : -cmp;
+ });
+ }
+
+ private render(): void {
+ const filtered = this.getFiltered();
+
+ // Build unique entity list for dropdown
+ const entities = Array.from(new Set(GULF_INVESTMENTS.map(i => i.investingEntity))).sort();
+ const sectors = Array.from(new Set(GULF_INVESTMENTS.map(i => i.sector))).sort();
+
+ const sortArrow = (key: keyof GulfInvestment) =>
+ this.sortKey === key ? (this.sortAsc ? ' ↑' : ' ↓') : '';
+
+ const rows = filtered.map(inv => {
+ const statusColor = STATUS_COLORS[inv.status] || '#6b7280';
+ const flag = FLAG[inv.investingCountry] || '';
+ const sector = SECTOR_LABELS[inv.sector] || inv.sector;
+ return `
+
+
+ ${flag}
+ ${escapeHtml(inv.assetName)}
+
+ ${escapeHtml(inv.targetCountry)}
+ ${escapeHtml(sector)}
+ ${escapeHtml(inv.status)}
+ ${escapeHtml(formatUSD(inv.investmentUSD))}
+ ${inv.yearAnnounced ?? inv.yearOperational ?? '—'}
+ `;
+ }).join('');
+
+ const html = `
+
+ ('.fdi-search');
+ searchEl?.addEventListener('input', () => {
+ this.filters.search = searchEl.value;
+ this.render();
+ });
+
+ // Filter dropdowns
+ content.querySelectorAll('.fdi-filter').forEach(sel => {
+ sel.addEventListener('change', () => {
+ const key = sel.dataset.filter as keyof InvestmentFilters;
+ (this.filters as unknown as Record)[key] = sel.value;
+ this.render();
+ });
+ });
+
+ // Sort headers
+ content.querySelectorAll('.fdi-sort').forEach(th => {
+ th.addEventListener('click', () => {
+ const key = th.dataset.sort as keyof GulfInvestment;
+ if (this.sortKey === key) {
+ this.sortAsc = !this.sortAsc;
+ } else {
+ this.sortKey = key;
+ this.sortAsc = true;
+ }
+ this.render();
+ });
+ });
+
+ // Row click → fly to map
+ content.querySelectorAll('.fdi-row').forEach(row => {
+ row.addEventListener('click', () => {
+ const inv = GULF_INVESTMENTS.find(i => i.id === row.dataset.id);
+ if (inv && this.onInvestmentClick) {
+ this.onInvestmentClick(inv);
+ }
+ });
+ });
+ }
+}
diff --git a/src/components/LanguageSelector.ts b/src/components/LanguageSelector.ts
new file mode 100644
index 000000000..24d5c9da9
--- /dev/null
+++ b/src/components/LanguageSelector.ts
@@ -0,0 +1,107 @@
+import { LANGUAGES, changeLanguage, getCurrentLanguage } from '../services/i18n';
+
+export class LanguageSelector {
+ private element: HTMLElement;
+ private isOpen = false;
+ private currentLang: string;
+
+ constructor() {
+ this.currentLang = getCurrentLanguage();
+ this.element = document.createElement('div');
+ this.element.className = 'custom-lang-selector';
+ this.render();
+ this.setupEventListeners();
+ }
+
+ public getElement(): HTMLElement {
+ return this.element;
+ }
+
+ private getFlagUrl(langCode: string): string {
+ const map: Record = {
+ en: 'gb',
+ vi: 'vn',
+ ar: 'sa',
+ zh: 'cn',
+ fr: 'fr',
+ de: 'de',
+ es: 'es',
+ it: 'it',
+ pl: 'pl',
+ pt: 'pt',
+ nl: 'nl',
+ sv: 'se',
+ ru: 'ru',
+ ja: 'jp'
+ };
+ const countryCode = map[langCode] || langCode;
+ return `https://flagcdn.com/24x18/${countryCode}.png`;
+ }
+
+ private render(): void {
+ const currentLangObj = LANGUAGES.find(l => l.code === this.currentLang) || LANGUAGES[0];
+
+ this.element.innerHTML = `
+
+
+ `;
+ }
+
+ private setupEventListeners(): void {
+ const btn = this.element.querySelector('.lang-selector-btn');
+ const dropdown = this.element.querySelector('.lang-dropdown');
+
+ if (!btn || !dropdown) return;
+
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggle();
+ });
+
+ this.element.querySelectorAll('.lang-option').forEach(option => {
+ option.addEventListener('click', (e) => {
+ const code = (e.currentTarget as HTMLElement).dataset.code;
+ if (code && code !== this.currentLang) {
+ changeLanguage(code);
+ }
+ this.close();
+ });
+ });
+
+ document.addEventListener('click', (e) => {
+ if (!this.element.contains(e.target as Node)) {
+ this.close();
+ }
+ });
+ }
+
+ private toggle(): void {
+ this.isOpen = !this.isOpen;
+ const dropdown = this.element.querySelector('.lang-dropdown');
+ if (this.isOpen) {
+ dropdown?.classList.remove('hidden');
+ this.element.classList.add('open');
+ } else {
+ dropdown?.classList.add('hidden');
+ this.element.classList.remove('open');
+ }
+ }
+
+ private close(): void {
+ this.isOpen = false;
+ const dropdown = this.element.querySelector('.lang-dropdown');
+ dropdown?.classList.add('hidden');
+ this.element.classList.remove('open');
+ }
+}
diff --git a/src/components/LiveNewsPanel.ts b/src/components/LiveNewsPanel.ts
new file mode 100644
index 000000000..c0c321a41
--- /dev/null
+++ b/src/components/LiveNewsPanel.ts
@@ -0,0 +1,702 @@
+import { Panel } from './Panel';
+import { fetchLiveVideoId } from '@/services/live-news';
+import { isDesktopRuntime, getRemoteApiBaseUrl } from '@/services/runtime';
+import { t } from '../services/i18n';
+
+// YouTube IFrame Player API types
+type YouTubePlayer = {
+ mute(): void;
+ unMute(): void;
+ playVideo(): void;
+ pauseVideo(): void;
+ loadVideoById(videoId: string): void;
+ cueVideoById(videoId: string): void;
+ getIframe?(): HTMLIFrameElement;
+ destroy(): void;
+};
+
+type YouTubePlayerConstructor = new (
+ elementId: string | HTMLElement,
+ options: {
+ videoId: string;
+ host?: string;
+ playerVars: Record;
+ events: {
+ onReady: () => void;
+ onError?: (event: { data: number }) => void;
+ };
+ },
+) => YouTubePlayer;
+
+type YouTubeNamespace = {
+ Player: YouTubePlayerConstructor;
+};
+
+declare global {
+ interface Window {
+ YT?: YouTubeNamespace;
+ onYouTubeIframeAPIReady?: () => void;
+ }
+}
+
+interface LiveChannel {
+ id: string;
+ name: string;
+ handle: string; // YouTube channel handle (e.g., @bloomberg)
+ fallbackVideoId?: string; // Fallback if no live stream detected
+ videoId?: string; // Dynamically fetched live video ID
+ isLive?: boolean;
+ useFallbackOnly?: boolean; // Skip auto-detection, always use fallback
+}
+
+const SITE_VARIANT = import.meta.env.VITE_VARIANT || 'full';
+
+// Full variant: World news channels (24/7 live streams)
+const FULL_LIVE_CHANNELS: LiveChannel[] = [
+ { id: 'bloomberg', name: 'Bloomberg', handle: '@Bloomberg', fallbackVideoId: 'iEpJwprxDdk' },
+ { id: 'sky', name: 'SkyNews', handle: '@SkyNews', fallbackVideoId: 'YDvsBbKfLPA' },
+ { id: 'euronews', name: 'Euronews', handle: '@euabortnews', fallbackVideoId: 'pykpO5kQJ98' },
+ { id: 'dw', name: 'DW', handle: '@DWNews', fallbackVideoId: 'LuKwFajn37U' },
+ { id: 'cnbc', name: 'CNBC', handle: '@CNBC', fallbackVideoId: '9NyxcX3rhQs' },
+ { id: 'france24', name: 'France24', handle: '@FRANCE24English', fallbackVideoId: 'Ap-UM1O9RBU' },
+ { id: 'alarabiya', name: 'AlArabiya', handle: '@AlArabiya', fallbackVideoId: 'n7eQejkXbnM', useFallbackOnly: true },
+ { id: 'aljazeera', name: 'AlJazeera', handle: '@AlJazeeraEnglish', fallbackVideoId: 'gCNeDWCI0vo', useFallbackOnly: true },
+];
+
+// Tech variant: Tech & business channels
+const TECH_LIVE_CHANNELS: LiveChannel[] = [
+ { id: 'bloomberg', name: 'Bloomberg', handle: '@Bloomberg', fallbackVideoId: 'iEpJwprxDdk' },
+ { id: 'yahoo', name: 'Yahoo Finance', handle: '@YahooFinance', fallbackVideoId: 'KQp-e_XQnDE' },
+ { id: 'cnbc', name: 'CNBC', handle: '@CNBC', fallbackVideoId: '9NyxcX3rhQs' },
+ { id: 'nasa', name: 'NASA TV', handle: '@NASA', fallbackVideoId: 'fO9e9jnhYK8', useFallbackOnly: true },
+];
+
+const LIVE_CHANNELS = SITE_VARIANT === 'tech' ? TECH_LIVE_CHANNELS : FULL_LIVE_CHANNELS;
+
+export class LiveNewsPanel extends Panel {
+ private static apiPromise: Promise | null = null;
+ private activeChannel: LiveChannel = LIVE_CHANNELS[0]!;
+ private channelSwitcher: HTMLElement | null = null;
+ private isMuted = true;
+ private isPlaying = true;
+ private wasPlayingBeforeIdle = true;
+ private muteBtn: HTMLButtonElement | null = null;
+ private liveBtn: HTMLButtonElement | null = null;
+ private idleTimeout: ReturnType | null = null;
+ private readonly IDLE_PAUSE_MS = 5 * 60 * 1000; // 5 minutes
+ private boundVisibilityHandler!: () => void;
+ private boundIdleResetHandler!: () => void;
+
+ // YouTube Player API state
+ private player: YouTubePlayer | null = null;
+ private playerContainer: HTMLDivElement | null = null;
+ private playerElement: HTMLDivElement | null = null;
+ private playerElementId: string;
+ private isPlayerReady = false;
+ private currentVideoId: string | null = null;
+ private readonly youtubeOrigin: string | null;
+ private forceFallbackVideoForNextInit = false;
+
+ // Desktop fallback: embed via cloud bridge page to avoid YouTube 153.
+ // Starts false — try native JS API first; switches to true on Error 153.
+ private useDesktopEmbedProxy = false;
+ private desktopEmbedIframe: HTMLIFrameElement | null = null;
+ private desktopEmbedRenderToken = 0;
+ private boundMessageHandler!: (e: MessageEvent) => void;
+
+ constructor() {
+ super({ id: 'live-news', title: t('panels.liveNews') });
+ this.youtubeOrigin = LiveNewsPanel.resolveYouTubeOrigin();
+ this.playerElementId = `live-news-player-${Date.now()}`;
+ this.element.classList.add('panel-wide');
+ this.createLiveButton();
+ this.createMuteButton();
+ this.createChannelSwitcher();
+ this.setupBridgeMessageListener();
+ this.renderPlayer();
+ this.setupIdleDetection();
+ }
+
+ private get embedOrigin(): string {
+ try { return new URL(getRemoteApiBaseUrl()).origin; } catch { return 'https://worldmonitor.app'; }
+ }
+
+ private setupBridgeMessageListener(): void {
+ this.boundMessageHandler = (e: MessageEvent) => {
+ if (e.source !== this.desktopEmbedIframe?.contentWindow) return;
+ const expected = this.embedOrigin;
+ if (e.origin !== expected && e.origin !== 'http://127.0.0.1:46123') return;
+ const msg = e.data;
+ if (!msg || typeof msg !== 'object' || !msg.type) return;
+ if (msg.type === 'yt-ready') {
+ this.isPlayerReady = true;
+ this.syncDesktopEmbedState();
+ } else if (msg.type === 'yt-error') {
+ const code = Number(msg.code ?? 0);
+ if (code === 153 && this.activeChannel.fallbackVideoId &&
+ this.activeChannel.videoId !== this.activeChannel.fallbackVideoId) {
+ this.activeChannel.videoId = this.activeChannel.fallbackVideoId;
+ this.renderDesktopEmbed(true);
+ } else {
+ this.showEmbedError(this.activeChannel, code);
+ }
+ }
+ };
+ window.addEventListener('message', this.boundMessageHandler);
+ }
+
+ private static resolveYouTubeOrigin(): string | null {
+ const fallbackOrigin = SITE_VARIANT === 'tech'
+ ? 'https://worldmonitor.app'
+ : 'https://worldmonitor.app';
+
+ try {
+ const { protocol, origin, host } = window.location;
+ if (protocol === 'http:' || protocol === 'https:') {
+ // Desktop webviews commonly run from tauri.localhost which can trigger
+ // YouTube embed restrictions. Use canonical public origin instead.
+ if (host === 'tauri.localhost' || host.endsWith('.tauri.localhost')) {
+ return fallbackOrigin;
+ }
+ return origin;
+ }
+ if (protocol === 'tauri:' || protocol === 'asset:') {
+ return fallbackOrigin;
+ }
+ } catch {
+ // Ignore invalid location values.
+ }
+ return fallbackOrigin;
+ }
+
+ private setupIdleDetection(): void {
+ // Suspend idle timer when hidden, resume when visible
+ this.boundVisibilityHandler = () => {
+ if (document.hidden) {
+ // Suspend idle timer so background playback isn't killed
+ if (this.idleTimeout) clearTimeout(this.idleTimeout);
+ } else {
+ this.resumeFromIdle();
+ this.boundIdleResetHandler();
+ }
+ };
+ document.addEventListener('visibilitychange', this.boundVisibilityHandler);
+
+ // Track user activity to detect idle (pauses after 5 min inactivity)
+ this.boundIdleResetHandler = () => {
+ if (this.idleTimeout) clearTimeout(this.idleTimeout);
+ this.idleTimeout = setTimeout(() => this.pauseForIdle(), this.IDLE_PAUSE_MS);
+ };
+
+ ['mousedown', 'keydown', 'scroll', 'touchstart'].forEach(event => {
+ document.addEventListener(event, this.boundIdleResetHandler, { passive: true });
+ });
+
+ // Start the idle timer
+ this.boundIdleResetHandler();
+ }
+
+ private pauseForIdle(): void {
+ if (this.isPlaying) {
+ this.wasPlayingBeforeIdle = true;
+ this.isPlaying = false;
+ this.updateLiveIndicator();
+ }
+ this.destroyPlayer();
+ }
+
+ private destroyPlayer(): void {
+ if (this.player) {
+ this.player.destroy();
+ this.player = null;
+ }
+
+ this.desktopEmbedIframe = null;
+ this.desktopEmbedRenderToken += 1;
+ this.isPlayerReady = false;
+ this.currentVideoId = null;
+
+ // Clear the container to remove player/iframe
+ if (this.playerContainer) {
+ this.playerContainer.innerHTML = '';
+
+ if (!this.useDesktopEmbedProxy) {
+ // Recreate player element for JS API mode
+ this.playerElement = document.createElement('div');
+ this.playerElement.id = this.playerElementId;
+ this.playerContainer.appendChild(this.playerElement);
+ } else {
+ this.playerElement = null;
+ }
+ }
+ }
+
+ private resumeFromIdle(): void {
+ if (this.wasPlayingBeforeIdle && !this.isPlaying) {
+ this.isPlaying = true;
+ this.updateLiveIndicator();
+ void this.initializePlayer();
+ }
+ }
+
+ private createLiveButton(): void {
+ this.liveBtn = document.createElement('button');
+ this.liveBtn.className = 'live-indicator-btn';
+ this.liveBtn.title = 'Toggle playback';
+ this.updateLiveIndicator();
+ this.liveBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.togglePlayback();
+ });
+
+ const header = this.element.querySelector('.panel-header');
+ header?.appendChild(this.liveBtn);
+ }
+
+ private updateLiveIndicator(): void {
+ if (!this.liveBtn) return;
+ this.liveBtn.innerHTML = this.isPlaying
+ ? 'Live'
+ : 'Paused';
+ this.liveBtn.classList.toggle('paused', !this.isPlaying);
+ }
+
+ private togglePlayback(): void {
+ this.isPlaying = !this.isPlaying;
+ this.wasPlayingBeforeIdle = this.isPlaying;
+ this.updateLiveIndicator();
+ this.syncPlayerState();
+ }
+
+ private createMuteButton(): void {
+ this.muteBtn = document.createElement('button');
+ this.muteBtn.className = 'live-mute-btn';
+ this.muteBtn.title = 'Toggle sound';
+ this.updateMuteIcon();
+ this.muteBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggleMute();
+ });
+
+ const header = this.element.querySelector('.panel-header');
+ header?.appendChild(this.muteBtn);
+ }
+
+ private updateMuteIcon(): void {
+ if (!this.muteBtn) return;
+ this.muteBtn.innerHTML = this.isMuted
+ ? ''
+ : '';
+ this.muteBtn.classList.toggle('unmuted', !this.isMuted);
+ }
+
+ private toggleMute(): void {
+ this.isMuted = !this.isMuted;
+ this.updateMuteIcon();
+ this.syncPlayerState();
+ }
+
+ private createChannelSwitcher(): void {
+ this.channelSwitcher = document.createElement('div');
+ this.channelSwitcher.className = 'live-news-switcher';
+
+ LIVE_CHANNELS.forEach(channel => {
+ const btn = document.createElement('button');
+ btn.className = `live-channel-btn ${channel.id === this.activeChannel.id ? 'active' : ''}`;
+ btn.dataset.channelId = channel.id;
+ btn.textContent = channel.name;
+ btn.addEventListener('click', () => this.switchChannel(channel));
+ this.channelSwitcher!.appendChild(btn);
+ });
+
+ this.element.insertBefore(this.channelSwitcher, this.content);
+ }
+
+ private async resolveChannelVideo(channel: LiveChannel, forceFallback = false): Promise {
+ const useFallbackVideo = channel.useFallbackOnly || forceFallback;
+ const liveVideoId = useFallbackVideo ? null : await fetchLiveVideoId(channel.handle);
+ channel.videoId = liveVideoId || channel.fallbackVideoId;
+ channel.isLive = !!liveVideoId;
+ }
+
+ private async switchChannel(channel: LiveChannel): Promise {
+ if (channel.id === this.activeChannel.id) return;
+
+ this.activeChannel = channel;
+
+ this.channelSwitcher?.querySelectorAll('.live-channel-btn').forEach(btn => {
+ const btnEl = btn as HTMLElement;
+ btnEl.classList.toggle('active', btnEl.dataset.channelId === channel.id);
+ if (btnEl.dataset.channelId === channel.id) {
+ btnEl.classList.add('loading');
+ }
+ });
+
+ await this.resolveChannelVideo(channel);
+
+ this.channelSwitcher?.querySelectorAll('.live-channel-btn').forEach(btn => {
+ const btnEl = btn as HTMLElement;
+ btnEl.classList.remove('loading');
+ if (btnEl.dataset.channelId === channel.id && !channel.videoId) {
+ btnEl.classList.add('offline');
+ }
+ });
+
+ if (!channel.videoId) {
+ this.showOfflineMessage(channel);
+ return;
+ }
+
+ if (this.useDesktopEmbedProxy) {
+ this.renderDesktopEmbed(true);
+ return;
+ }
+
+ if (!this.player) {
+ this.ensurePlayerContainer();
+ void this.initializePlayer();
+ return;
+ }
+
+ this.syncPlayerState();
+ }
+
+ private showOfflineMessage(channel: LiveChannel): void {
+ this.content.innerHTML = `
+ ): void {
+ if (!this.desktopEmbedIframe?.contentWindow) return;
+ this.desktopEmbedIframe.contentWindow.postMessage(msg, this.embedOrigin);
+ }
+
+ private syncDesktopEmbedState(): void {
+ this.postToEmbed({ type: this.isPlaying ? 'play' : 'pause' });
+ this.postToEmbed({ type: this.isMuted ? 'mute' : 'unmute' });
+ }
+
+ private renderDesktopEmbed(force = false): void {
+ if (!this.useDesktopEmbedProxy) return;
+ void this.renderDesktopEmbedAsync(force);
+ }
+
+ private async renderDesktopEmbedAsync(force = false): Promise {
+ const videoId = this.activeChannel.videoId;
+ if (!videoId) {
+ this.showOfflineMessage(this.activeChannel);
+ return;
+ }
+
+ // Only recreate iframe when video ID changes (not for play/mute toggling).
+ if (!force && this.currentVideoId === videoId && this.desktopEmbedIframe) {
+ this.syncDesktopEmbedState();
+ return;
+ }
+
+ const renderToken = ++this.desktopEmbedRenderToken;
+ this.currentVideoId = videoId;
+ this.isPlayerReady = true;
+
+ // Always recreate if container was removed from DOM (e.g. showEmbedError replaced content).
+ if (!this.playerContainer || !this.playerContainer.parentElement) {
+ this.ensurePlayerContainer();
+ }
+
+ if (!this.playerContainer) {
+ return;
+ }
+
+ this.playerContainer.innerHTML = '';
+
+ // Always use cloud URL for iframe embeds — the local sidecar requires
+ // an Authorization header that iframe src requests cannot carry.
+ const remoteBase = getRemoteApiBaseUrl();
+ const embedUrl = `${remoteBase}${this.buildDesktopEmbedPath(videoId)}`;
+
+ if (renderToken !== this.desktopEmbedRenderToken) {
+ return;
+ }
+
+ const iframe = document.createElement('iframe');
+ iframe.className = 'live-news-embed-frame';
+ iframe.src = embedUrl;
+ iframe.title = `${this.activeChannel.name} live feed`;
+ iframe.style.width = '100%';
+ iframe.style.height = '100%';
+ iframe.style.border = '0';
+ iframe.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+ iframe.allowFullscreen = true;
+ iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+ iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-presentation');
+ iframe.setAttribute('loading', 'eager');
+
+ this.playerContainer.appendChild(iframe);
+ this.desktopEmbedIframe = iframe;
+ }
+
+ private static loadYouTubeApi(): Promise {
+ if (LiveNewsPanel.apiPromise) return LiveNewsPanel.apiPromise;
+
+ LiveNewsPanel.apiPromise = new Promise((resolve) => {
+ if (window.YT?.Player) {
+ resolve();
+ return;
+ }
+
+ const existingScript = document.querySelector(
+ 'script[data-youtube-iframe-api="true"]',
+ );
+
+ if (existingScript) {
+ if (window.YT?.Player) {
+ resolve();
+ return;
+ }
+ const previousReady = window.onYouTubeIframeAPIReady;
+ window.onYouTubeIframeAPIReady = () => {
+ previousReady?.();
+ resolve();
+ };
+ return;
+ }
+
+ const previousReady = window.onYouTubeIframeAPIReady;
+ window.onYouTubeIframeAPIReady = () => {
+ previousReady?.();
+ resolve();
+ };
+
+ const script = document.createElement('script');
+ script.src = 'https://www.youtube.com/iframe_api';
+ script.async = true;
+ script.dataset.youtubeIframeApi = 'true';
+ script.onerror = () => {
+ console.warn('[LiveNews] YouTube IFrame API failed to load (ad blocker or network issue)');
+ LiveNewsPanel.apiPromise = null;
+ script.remove();
+ resolve();
+ };
+ document.head.appendChild(script);
+ });
+
+ return LiveNewsPanel.apiPromise;
+ }
+
+ private async initializePlayer(): Promise {
+ if (!this.useDesktopEmbedProxy && this.player) return;
+
+ const useFallbackVideo = this.activeChannel.useFallbackOnly || this.forceFallbackVideoForNextInit;
+ this.forceFallbackVideoForNextInit = false;
+ await this.resolveChannelVideo(this.activeChannel, useFallbackVideo);
+
+ if (!this.activeChannel.videoId) {
+ this.showOfflineMessage(this.activeChannel);
+ return;
+ }
+
+ if (this.useDesktopEmbedProxy) {
+ this.renderDesktopEmbed(true);
+ return;
+ }
+
+ await LiveNewsPanel.loadYouTubeApi();
+ if (this.player || !this.playerElement || !window.YT?.Player) return;
+
+ this.player = new window.YT!.Player(this.playerElement, {
+ host: 'https://www.youtube-nocookie.com',
+ videoId: this.activeChannel.videoId,
+ playerVars: {
+ autoplay: this.isPlaying ? 1 : 0,
+ mute: this.isMuted ? 1 : 0,
+ rel: 0,
+ playsinline: 1,
+ enablejsapi: 1,
+ ...(this.youtubeOrigin
+ ? {
+ origin: this.youtubeOrigin,
+ widget_referrer: this.youtubeOrigin,
+ }
+ : {}),
+ },
+ events: {
+ onReady: () => {
+ this.isPlayerReady = true;
+ this.currentVideoId = this.activeChannel.videoId || null;
+ const iframe = this.player?.getIframe?.();
+ if (iframe) iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+ this.syncPlayerState();
+ },
+ onError: (event) => {
+ const errorCode = Number(event?.data ?? 0);
+
+ // Retry once with known fallback stream.
+ if (
+ errorCode === 153 &&
+ this.activeChannel.fallbackVideoId &&
+ this.activeChannel.videoId !== this.activeChannel.fallbackVideoId
+ ) {
+ this.destroyPlayer();
+ this.forceFallbackVideoForNextInit = true;
+ this.ensurePlayerContainer();
+ void this.initializePlayer();
+ return;
+ }
+
+ // Desktop-specific last resort: switch to cloud bridge embed.
+ if (errorCode === 153 && isDesktopRuntime()) {
+ this.useDesktopEmbedProxy = true;
+ this.destroyPlayer();
+ this.ensurePlayerContainer();
+ this.renderDesktopEmbed(true);
+ return;
+ }
+
+ this.destroyPlayer();
+ this.showEmbedError(this.activeChannel, errorCode);
+ },
+ },
+ });
+ }
+
+ private syncPlayerState(): void {
+ if (this.useDesktopEmbedProxy) {
+ const videoId = this.activeChannel.videoId;
+ if (videoId && this.currentVideoId !== videoId) {
+ this.renderDesktopEmbed(true);
+ } else {
+ this.syncDesktopEmbedState();
+ }
+ return;
+ }
+
+ if (!this.player || !this.isPlayerReady) return;
+
+ const videoId = this.activeChannel.videoId;
+ if (!videoId) return;
+
+ // Handle channel switch
+ const isNewVideo = this.currentVideoId !== videoId;
+ if (isNewVideo) {
+ this.currentVideoId = videoId;
+ if (!this.playerElement || !document.getElementById(this.playerElementId)) {
+ this.ensurePlayerContainer();
+ void this.initializePlayer();
+ return;
+ }
+ if (this.isPlaying) {
+ this.player.loadVideoById(videoId);
+ } else {
+ this.player.cueVideoById(videoId);
+ }
+ }
+
+ if (this.isMuted) {
+ this.player.mute?.();
+ } else {
+ this.player.unMute?.();
+ }
+
+ if (this.isPlaying) {
+ if (isNewVideo) {
+ // WKWebView loses user gesture context after await.
+ // Pause then play after a delay — mimics the manual workaround.
+ this.player.pauseVideo();
+ setTimeout(() => {
+ if (this.player && this.isPlaying) {
+ this.player.mute?.();
+ this.player.playVideo?.();
+ // Restore mute state after play starts
+ if (!this.isMuted) {
+ setTimeout(() => { this.player?.unMute?.(); }, 500);
+ }
+ }
+ }, 800);
+ } else {
+ this.player.playVideo?.();
+ }
+ } else {
+ this.player.pauseVideo?.();
+ }
+ }
+
+ public refresh(): void {
+ this.syncPlayerState();
+ }
+
+ public destroy(): void {
+ if (this.idleTimeout) {
+ clearTimeout(this.idleTimeout);
+ this.idleTimeout = null;
+ }
+
+ document.removeEventListener('visibilitychange', this.boundVisibilityHandler);
+ window.removeEventListener('message', this.boundMessageHandler);
+ ['mousedown', 'keydown', 'scroll', 'touchstart'].forEach(event => {
+ document.removeEventListener(event, this.boundIdleResetHandler);
+ });
+
+ if (this.player) {
+ this.player.destroy();
+ this.player = null;
+ }
+ this.desktopEmbedIframe = null;
+ this.isPlayerReady = false;
+ this.playerContainer = null;
+ this.playerElement = null;
+
+ super.destroy();
+ }
+}
diff --git a/src/components/LiveWebcamsPanel.ts b/src/components/LiveWebcamsPanel.ts
new file mode 100644
index 000000000..8e3fde4c1
--- /dev/null
+++ b/src/components/LiveWebcamsPanel.ts
@@ -0,0 +1,340 @@
+import { Panel } from './Panel';
+import { isDesktopRuntime, getRemoteApiBaseUrl } from '@/services/runtime';
+import { t } from '../services/i18n';
+
+type WebcamRegion = 'middle-east' | 'europe' | 'asia' | 'americas';
+
+interface WebcamFeed {
+ id: string;
+ city: string;
+ country: string;
+ region: WebcamRegion;
+ channelHandle: string;
+ fallbackVideoId: string;
+}
+
+// Verified YouTube live stream IDs — validated Feb 2026 via title cross-check.
+// IDs may rotate; update when stale.
+const WEBCAM_FEEDS: WebcamFeed[] = [
+ // Middle East — Jerusalem & Tehran adjacent (conflict hotspots)
+ { id: 'jerusalem', city: 'Jerusalem', country: 'Israel', region: 'middle-east', channelHandle: '@TheWesternWall', fallbackVideoId: 'UyduhBUpO7Q' },
+ { id: 'tehran', city: 'Tehran', country: 'Iran', region: 'middle-east', channelHandle: '@IranHDCams', fallbackVideoId: '-zGuR1qVKrU' },
+ { id: 'tel-aviv', city: 'Tel Aviv', country: 'Israel', region: 'middle-east', channelHandle: '@IsraelLiveCam', fallbackVideoId: '-VLcYT5QBrY' },
+ { id: 'mecca', city: 'Mecca', country: 'Saudi Arabia', region: 'middle-east', channelHandle: '@MakkahLive', fallbackVideoId: 'DEcpmPUbkDQ' },
+ // Europe
+ { id: 'kyiv', city: 'Kyiv', country: 'Ukraine', region: 'europe', channelHandle: '@DWNews', fallbackVideoId: '-Q7FuPINDjA' },
+ { id: 'odessa', city: 'Odessa', country: 'Ukraine', region: 'europe', channelHandle: '@UkraineLiveCam', fallbackVideoId: 'e2gC37ILQmk' },
+ { id: 'paris', city: 'Paris', country: 'France', region: 'europe', channelHandle: '@PalaisIena', fallbackVideoId: 'OzYp4NRZlwQ' },
+ { id: 'st-petersburg', city: 'St. Petersburg', country: 'Russia', region: 'europe', channelHandle: '@SPBLiveCam', fallbackVideoId: 'CjtIYbmVfck' },
+ { id: 'london', city: 'London', country: 'UK', region: 'europe', channelHandle: '@EarthCam', fallbackVideoId: 'Lxqcg1qt0XU' },
+ // Americas
+ { id: 'washington', city: 'Washington DC', country: 'USA', region: 'americas', channelHandle: '@AxisCommunications', fallbackVideoId: '1wV9lLe14aU' },
+ { id: 'new-york', city: 'New York', country: 'USA', region: 'americas', channelHandle: '@EarthCam', fallbackVideoId: '4qyZLflp-sI' },
+ { id: 'los-angeles', city: 'Los Angeles', country: 'USA', region: 'americas', channelHandle: '@VeniceVHotel', fallbackVideoId: 'EO_1LWqsCNE' },
+ { id: 'miami', city: 'Miami', country: 'USA', region: 'americas', channelHandle: '@FloridaLiveCams', fallbackVideoId: '5YCajRjvWCg' },
+ // Asia-Pacific — Taipei first (strait hotspot), then Shanghai, Tokyo, Seoul
+ { id: 'taipei', city: 'Taipei', country: 'Taiwan', region: 'asia', channelHandle: '@JackyWuTaipei', fallbackVideoId: 'z_fY1pj1VBw' },
+ { id: 'shanghai', city: 'Shanghai', country: 'China', region: 'asia', channelHandle: '@SkylineWebcams', fallbackVideoId: '76EwqI5XZIc' },
+ { id: 'tokyo', city: 'Tokyo', country: 'Japan', region: 'asia', channelHandle: '@TokyoLiveCam4K', fallbackVideoId: '4pu9sF5Qssw' },
+ { id: 'seoul', city: 'Seoul', country: 'South Korea', region: 'asia', channelHandle: '@UNvillage_live', fallbackVideoId: '-JhoMGoAfFc' },
+ { id: 'sydney', city: 'Sydney', country: 'Australia', region: 'asia', channelHandle: '@WebcamSydney', fallbackVideoId: '7pcL-0Wo77U' },
+];
+
+const MAX_GRID_CELLS = 4;
+
+type ViewMode = 'grid' | 'single';
+type RegionFilter = 'all' | WebcamRegion;
+
+export class LiveWebcamsPanel extends Panel {
+ private viewMode: ViewMode = 'grid';
+ private regionFilter: RegionFilter = 'all';
+ private activeFeed: WebcamFeed = WEBCAM_FEEDS[0]!;
+ private toolbar: HTMLElement | null = null;
+ private iframes: HTMLIFrameElement[] = [];
+ private observer: IntersectionObserver | null = null;
+ private isVisible = false;
+ private idleTimeout: ReturnType | null = null;
+ private boundIdleResetHandler!: () => void;
+ private boundVisibilityHandler!: () => void;
+ private readonly IDLE_PAUSE_MS = 5 * 60 * 1000;
+ private isIdle = false;
+
+ constructor() {
+ super({ id: 'live-webcams', title: t('panels.liveWebcams') });
+ this.element.classList.add('panel-wide');
+ this.createToolbar();
+ this.setupIntersectionObserver();
+ this.setupIdleDetection();
+ this.render();
+ }
+
+ private get filteredFeeds(): WebcamFeed[] {
+ if (this.regionFilter === 'all') return WEBCAM_FEEDS;
+ return WEBCAM_FEEDS.filter(f => f.region === this.regionFilter);
+ }
+
+ private static readonly ALL_GRID_IDS = ['jerusalem', 'tehran', 'kyiv', 'washington'];
+
+ private get gridFeeds(): WebcamFeed[] {
+ if (this.regionFilter === 'all') {
+ return LiveWebcamsPanel.ALL_GRID_IDS
+ .map(id => WEBCAM_FEEDS.find(f => f.id === id)!)
+ .filter(Boolean);
+ }
+ return this.filteredFeeds.slice(0, MAX_GRID_CELLS);
+ }
+
+ private createToolbar(): void {
+ this.toolbar = document.createElement('div');
+ this.toolbar.className = 'webcam-toolbar';
+
+ const regionGroup = document.createElement('div');
+ regionGroup.className = 'webcam-toolbar-group';
+
+ const regions: { key: RegionFilter; label: string }[] = [
+ { key: 'all', label: 'ALL' },
+ { key: 'middle-east', label: 'MIDEAST' },
+ { key: 'europe', label: 'EUROPE' },
+ { key: 'americas', label: 'AMERICAS' },
+ { key: 'asia', label: 'ASIA' },
+ ];
+
+ regions.forEach(({ key, label }) => {
+ const btn = document.createElement('button');
+ btn.className = `webcam-region-btn${key === this.regionFilter ? ' active' : ''}`;
+ btn.dataset.region = key;
+ btn.textContent = label;
+ btn.addEventListener('click', () => this.setRegionFilter(key));
+ regionGroup.appendChild(btn);
+ });
+
+ const viewGroup = document.createElement('div');
+ viewGroup.className = 'webcam-toolbar-group';
+
+ const gridBtn = document.createElement('button');
+ gridBtn.className = `webcam-view-btn${this.viewMode === 'grid' ? ' active' : ''}`;
+ gridBtn.dataset.mode = 'grid';
+ gridBtn.innerHTML = '';
+ gridBtn.title = 'Grid view';
+ gridBtn.addEventListener('click', () => this.setViewMode('grid'));
+
+ const singleBtn = document.createElement('button');
+ singleBtn.className = `webcam-view-btn${this.viewMode === 'single' ? ' active' : ''}`;
+ singleBtn.dataset.mode = 'single';
+ singleBtn.innerHTML = '';
+ singleBtn.title = 'Single view';
+ singleBtn.addEventListener('click', () => this.setViewMode('single'));
+
+ viewGroup.appendChild(gridBtn);
+ viewGroup.appendChild(singleBtn);
+
+ this.toolbar.appendChild(regionGroup);
+ this.toolbar.appendChild(viewGroup);
+ this.element.insertBefore(this.toolbar, this.content);
+ }
+
+ private setRegionFilter(filter: RegionFilter): void {
+ if (filter === this.regionFilter) return;
+ this.regionFilter = filter;
+ this.toolbar?.querySelectorAll('.webcam-region-btn').forEach(btn => {
+ (btn as HTMLElement).classList.toggle('active', (btn as HTMLElement).dataset.region === filter);
+ });
+ const feeds = this.filteredFeeds;
+ if (feeds.length > 0 && !feeds.includes(this.activeFeed)) {
+ this.activeFeed = feeds[0]!;
+ }
+ this.render();
+ }
+
+ private setViewMode(mode: ViewMode): void {
+ if (mode === this.viewMode) return;
+ this.viewMode = mode;
+ this.toolbar?.querySelectorAll('.webcam-view-btn').forEach(btn => {
+ (btn as HTMLElement).classList.toggle('active', (btn as HTMLElement).dataset.mode === mode);
+ });
+ this.render();
+ }
+
+ private buildEmbedUrl(videoId: string): string {
+ if (isDesktopRuntime()) {
+ const remoteBase = getRemoteApiBaseUrl();
+ const params = new URLSearchParams({
+ videoId,
+ autoplay: '1',
+ mute: '1',
+ });
+ return `${remoteBase}/api/youtube/embed?${params.toString()}`;
+ }
+ return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0&modestbranding=1&playsinline=1&rel=0`;
+ }
+
+ private createIframe(feed: WebcamFeed): HTMLIFrameElement {
+ const iframe = document.createElement('iframe');
+ iframe.className = 'webcam-iframe';
+ iframe.src = this.buildEmbedUrl(feed.fallbackVideoId);
+ iframe.title = `${feed.city} live webcam`;
+ iframe.allow = 'autoplay; encrypted-media; picture-in-picture';
+ iframe.allowFullscreen = true;
+ iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+ iframe.setAttribute('loading', 'lazy');
+ iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-presentation');
+ return iframe;
+ }
+
+ private render(): void {
+ this.destroyIframes();
+
+ if (!this.isVisible || this.isIdle) {
+ this.content.innerHTML = ' | null = null;
+
+ constructor() {
+ super({ id: 'macro-signals', title: t('panels.macroSignals'), showCount: false });
+ void this.fetchData();
+ this.refreshInterval = setInterval(() => this.fetchData(), 3 * 60000);
+ }
+
+ public destroy(): void {
+ if (this.refreshInterval) {
+ clearInterval(this.refreshInterval);
+ this.refreshInterval = null;
+ }
+ }
+
+ private async fetchData(): Promise {
+ try {
+ const res = await fetch('/api/macro-signals');
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ this.data = await res.json();
+ this.error = null;
+ } catch (err) {
+ this.error = err instanceof Error ? err.message : 'Failed to fetch';
+ } finally {
+ this.loading = false;
+ this.renderPanel();
+ }
+ }
+
+ private renderPanel(): void {
+ if (this.loading) {
+ this.showLoading(t('common.computingSignals'));
+ return;
+ }
+
+ if (this.error || !this.data) {
+ this.showError(this.error || t('common.noDataShort'));
+ return;
+ }
+
+ if (this.data.unavailable) {
+ this.showError(t('common.upstreamUnavailable'));
+ return;
+ }
+
+ const d = this.data;
+ const s = d.signals;
+
+ const verdictClass = d.verdict === 'BUY' ? 'verdict-buy' : d.verdict === 'CASH' ? 'verdict-cash' : 'verdict-unknown';
+
+ const html = `
+
> = {
bases: { minZoom: 3, showLabels: 5 },
- nuclear: { minZoom: 2, showLabels: 4 },
+ nuclear: { minZoom: 2 },
conflicts: { minZoom: 1, showLabels: 3 },
- economic: { minZoom: 2, showLabels: 4 },
- earthquakes: { minZoom: 1, showLabels: 2 },
+ economic: { minZoom: 2 },
+ natural: { minZoom: 1, showLabels: 2 },
};
private container: HTMLElement;
private svg: d3.Selection;
private wrapper: HTMLElement;
private overlays: HTMLElement;
+ private clusterCanvas: HTMLCanvasElement;
+ private clusterGl: WebGLRenderingContext | null = null;
private state: MapState;
private worldData: WorldTopology | null = null;
- private usData: USTopology | null = null;
+ private countryFeatures: Feature[] | null = null;
+ private baseLayerGroup: d3.Selection | null = null;
+ private dynamicLayerGroup: d3.Selection | null = null;
+ private baseRendered = false;
+ private baseWidth = 0;
+ private baseHeight = 0;
private hotspots: HotspotWithBreaking[];
private earthquakes: Earthquake[] = [];
private weatherAlerts: WeatherAlert[] = [];
@@ -77,7 +120,19 @@ export class MapComponent {
private cableAdvisories: CableAdvisory[] = [];
private repairShips: RepairShip[] = [];
private protests: SocialUnrestEvent[] = [];
+ private flightDelays: AirportDelayAlert[] = [];
+ private militaryFlights: MilitaryFlight[] = [];
+ private militaryFlightClusters: MilitaryFlightCluster[] = [];
+ private militaryVessels: MilitaryVessel[] = [];
+ private militaryVesselClusters: MilitaryVesselCluster[] = [];
+ private naturalEvents: NaturalEvent[] = [];
+ private firmsFireData: Array<{ lat: number; lon: number; brightness: number; frp: number; confidence: number; region: string; acq_date: string; daynight: string }> = [];
+ private techEvents: TechEventMarker[] = [];
+ private techActivities: TechHubActivity[] = [];
+ private geoActivities: GeoHubActivity[] = [];
private news: NewsItem[] = [];
+ private onTechHubClick?: (hub: TechHubActivity) => void;
+ private onGeoHubClick?: (hub: GeoHubActivity) => void;
private popup: MapPopup;
private onHotspotClick?: (hotspot: Hotspot) => void;
private onTimeRangeChange?: (range: TimeRange) => void;
@@ -91,6 +146,11 @@ export class MapComponent {
base: new Set(),
nuclear: new Set(),
};
+ private boundVisibilityHandler!: () => void;
+ private renderScheduled = false;
+ private lastRenderTime = 0;
+ private readonly MIN_RENDER_INTERVAL_MS = 100;
+ private healthCheckIntervalId: ReturnType | null = null;
constructor(container: HTMLElement, initialState: MapState) {
this.container = container;
@@ -106,6 +166,11 @@ export class MapComponent {
svgElement.id = 'mapSvg';
this.wrapper.appendChild(svgElement);
+ this.clusterCanvas = document.createElement('canvas');
+ this.clusterCanvas.className = 'map-cluster-canvas';
+ this.clusterCanvas.id = 'mapClusterCanvas';
+ this.wrapper.appendChild(this.clusterCanvas);
+
// Overlays inside wrapper so they transform together on zoom/pan
this.overlays = document.createElement('div');
this.overlays.id = 'mapOverlays';
@@ -116,13 +181,54 @@ export class MapComponent {
container.appendChild(this.createTimeSlider());
container.appendChild(this.createLayerToggles());
container.appendChild(this.createLegend());
- container.appendChild(this.createTimestamp());
+ this.healthCheckIntervalId = setInterval(() => this.runHealthCheck(), 30000);
this.svg = d3.select(svgElement);
+ this.baseLayerGroup = this.svg.append('g').attr('class', 'map-base');
+ this.dynamicLayerGroup = this.svg.append('g').attr('class', 'map-dynamic');
this.popup = new MapPopup(container);
+ this.initClusterRenderer();
this.setupZoomHandlers();
this.loadMapData();
+ this.setupResizeObserver();
+
+ window.addEventListener('theme-changed', () => {
+ this.baseRendered = false;
+ this.render();
+ });
+ }
+
+ private setupResizeObserver(): void {
+ let lastWidth = 0;
+ let lastHeight = 0;
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width, height } = entry.contentRect;
+ if (width > 0 && height > 0 && (width !== lastWidth || height !== lastHeight)) {
+ lastWidth = width;
+ lastHeight = height;
+ requestAnimationFrame(() => this.render());
+ }
+ }
+ });
+ resizeObserver.observe(this.container);
+
+ // Re-render when page becomes visible again (after browser throttling)
+ this.boundVisibilityHandler = () => {
+ if (!document.hidden) {
+ requestAnimationFrame(() => this.render());
+ }
+ };
+ document.addEventListener('visibilitychange', this.boundVisibilityHandler);
+ }
+
+ public destroy(): void {
+ document.removeEventListener('visibilitychange', this.boundVisibilityHandler);
+ if (this.healthCheckIntervalId) {
+ clearInterval(this.healthCheckIntervalId);
+ this.healthCheckIntervalId = null;
+ }
}
private createControls(): HTMLElement {
@@ -227,23 +333,230 @@ export class MapComponent {
toggles.className = 'layer-toggles';
toggles.id = 'layerToggles';
- const layers: (keyof MapLayers)[] = ['conflicts', 'bases', 'cables', 'pipelines', 'hotspots', 'ais', 'earthquakes', 'weather', 'nuclear', 'irradiators', 'outages', 'datacenters', 'sanctions', 'economic', 'countries', 'waterways', 'protests'];
- const layerLabels: Partial
- ECONOMIC INDICATORS
- FRED • ${updateTime}
-
-
- ${indicatorsHtml}
-
+ const metrics = [
+ this.oilData.wtiPrice,
+ this.oilData.brentPrice,
+ this.oilData.usProduction,
+ this.oilData.usInventory,
+ ].filter(Boolean);
+
+ if (metrics.length === 0) {
+ return `${t('components.economic.noOilMetrics')}
`;
+ }
+
+ return `
+
+ ${metrics.map(metric => {
+ if (!metric) return '';
+ const trendIcon = getTrendIndicator(metric.trend);
+ const trendColor = getTrendColor(metric.trend, metric.name.includes('Production'));
+
+ return `
+
`;
}
- public getElement(): HTMLElement {
- return this.container;
+ private renderSpending(): string {
+ if (!this.spendingData || this.spendingData.awards.length === 0) {
+ return `
+
+ `;
+ }).join('')}
+ ${escapeHtml(metric.name)}
+
+
+ ${escapeHtml(formatOilValue(metric.current, metric.unit))} ${escapeHtml(metric.unit)}
+
+ ${escapeHtml(trendIcon)} ${escapeHtml(String(metric.changePct > 0 ? '+' : ''))}${escapeHtml(String(metric.changePct))}%
+
+
+ ${t('components.economic.vsPreviousWeek')}
+ ${t('components.economic.noSpending')}
`;
+ }
+
+ const { awards, totalAmount, periodStart, periodEnd } = this.spendingData;
+
+ return `
+
+
+
+ ${escapeHtml(formatAwardAmount(totalAmount))} ${t('components.economic.in')} ${escapeHtml(String(awards.length))} ${t('components.economic.awards')}
+ ${escapeHtml(periodStart)} – ${escapeHtml(periodEnd)}
+
+
+ ${awards.slice(0, 8).map(award => `
+
+ `;
}
}
diff --git a/src/components/GdeltIntelPanel.ts b/src/components/GdeltIntelPanel.ts
new file mode 100644
index 000000000..a0ba6706a
--- /dev/null
+++ b/src/components/GdeltIntelPanel.ts
@@ -0,0 +1,210 @@
+import { Panel } from './Panel';
+import { escapeHtml, sanitizeUrl } from '@/utils/sanitize';
+import { t, getCurrentLanguage } from '@/services/i18n';
+import { translateTextCached } from '@/services';
+import {
+ getIntelTopics,
+ fetchTopicIntelligence,
+ formatArticleDate,
+ extractDomain,
+ type GdeltArticle,
+ type IntelTopic,
+ type TopicIntelligence,
+} from '@/services/gdelt-intel';
+
+export class GdeltIntelPanel extends Panel {
+ private activeTopic: IntelTopic = getIntelTopics()[0]!;
+ private topicData = new Map
+
+ `).join('')}
+
+
+ ${escapeHtml(formatAwardAmount(award.amount))}
+
+ ${escapeHtml(award.recipientName)}
+ ${escapeHtml(award.agency)}
+ ${award.description ? `${escapeHtml(award.description.slice(0, 100))}${award.description.length > 100 ? '...' : ''}
` : ''}
+ ${t('components.gdelt.empty')}
`;
+ return;
+ }
+
+ const html = articles.map(article => this.renderArticle(article)).join('');
+ this.content.innerHTML = `${html}
`;
+ this.bindTranslateEvents();
+ this.queueAutoTranslateArticles();
+ }
+
+ private renderArticle(article: GdeltArticle): string {
+ const domain = article.source || extractDomain(article.url);
+ const timeAgo = formatArticleDate(article.date);
+ const toneClass = article.tone ? (article.tone < -2 ? 'tone-negative' : article.tone > 2 ? 'tone-positive' : '') : '';
+ const currentLang = getCurrentLanguage();
+ const showTranslate = currentLang !== 'en';
+ const translateTitle = currentLang === 'vi' ? 'Dịch' : 'Translate';
+
+ return `
+
+
+ ${escapeHtml(domain)}
+
+ ${escapeHtml(timeAgo)}
+ ${showTranslate ? `` : ''}
+
+
+ ${escapeHtml(article.title)}
+
+ `;
+ }
+
+ private bindTranslateEvents(): void {
+ const buttons = this.content.querySelectorAll
+
+ ${topStory ? `
+
+ ${escapeHtml(topStory.title.length > 80 ? topStory.title.slice(0, 77) + '...' : topStory.title)}
+
+ ` : ''}
+ `;
+ }).join('');
+
+ this.setContent(html);
+ this.bindEvents();
+ }
+
+ private bindEvents(): void {
+ const items = this.content.querySelectorAll${index + 1}
+
+
+
+
+ ${escapeHtml(hub.name)}
+ ${this.getFlag(hub.country)}
+ ${breakingTag}
+
+
+ ${Math.round(hub.score)}
+
+
+
+ `);
+ }
+
+ public async updateInsights(clusters: ClusteredEvent[]): Promise
+ Step ${step}/${total}
+
+
+ Waiting for news data...
');
+ return;
+ }
+
+ const totalSteps = 4;
+
+ try {
+ // Step 1: Filter and rank stories by composite importance score
+ this.setProgress(1, totalSteps, 'Ranking important stories...');
+
+ const importantClusters = this.selectTopStories(clusters, 8);
+
+ // Run parallel multi-perspective analysis in background (logs to console)
+ // This analyzes ALL clusters, not just the keyword-filtered ones
+ const parallelPromise = parallelAnalysis.analyzeHeadlines(clusters).then(report => {
+ this.lastMissedStories = report.missedByKeywords;
+ const suggestions = parallelAnalysis.getSuggestedImprovements();
+ if (suggestions.length > 0) {
+ console.log('%c💡 Improvement Suggestions:', 'color: #f59e0b; font-weight: bold');
+ suggestions.forEach(s => console.log(` • ${s}`));
+ }
+ }).catch(err => {
+ console.warn('[ParallelAnalysis] Error:', err);
+ });
+
+ // Get geographic signal correlations (geopolitical variant only)
+ // Tech variant focuses on tech news, not military/protest signals
+ let signalSummary: ReturnTypeNo breaking or multi-source stories yet
');
+ return;
+ }
+
+ const titles = importantClusters.map(c => c.primaryTitle);
+
+ // Step 2: Analyze sentiment (browser-based, fast)
+ this.setProgress(2, totalSteps, 'Analyzing sentiment...');
+ let sentiments: Array<{ label: string; score: number }> | null = null;
+
+ if (mlWorker.isAvailable) {
+ sentiments = await mlWorker.classifySentiment(titles).catch(() => null);
+ }
+
+ // Step 3: Generate World Brief (with cooldown)
+ const loadedFromPersistentCache = await this.loadBriefFromCache();
+ let worldBrief = this.cachedBrief;
+ const now = Date.now();
+
+ let usedCachedBrief = loadedFromPersistentCache;
+ if (!worldBrief || now - this.lastBriefUpdate > InsightsPanel.BRIEF_COOLDOWN_MS) {
+ this.setProgress(3, totalSteps, 'Generating world brief...');
+
+ // Pass focal point context + theater posture to AI for correlation-aware summarization
+ // Tech variant: no geopolitical context, just tech news summarization
+ const theaterContext = SITE_VARIANT === 'full' ? this.getTheaterPostureContext() : '';
+ const geoContext = SITE_VARIANT === 'full'
+ ? (focalSummary.aiContext || signalSummary.aiContext) + theaterContext
+ : '';
+ const result = await generateSummary(titles, (_step, _total, msg) => {
+ // Show sub-progress for summarization
+ this.setProgress(3, totalSteps, `Generating brief: ${msg}`);
+ }, geoContext);
+
+ if (result) {
+ worldBrief = result.summary;
+ this.cachedBrief = worldBrief;
+ this.lastBriefUpdate = now;
+ usedCachedBrief = false;
+ void setPersistentCache(InsightsPanel.BRIEF_CACHE_KEY, { summary: worldBrief });
+ console.log(`[InsightsPanel] Brief generated${result.cached ? ' (cached)' : ''}${geoContext ? ' (with geo context)' : ''}`);
+ }
+ } else {
+ usedCachedBrief = true;
+ this.setProgress(3, totalSteps, 'Using cached brief...');
+ }
+
+ this.setDataBadge(worldBrief ? (usedCachedBrief ? 'cached' : 'live') : 'unavailable');
+
+ // Step 4: Wait for parallel analysis to complete
+ this.setProgress(4, totalSteps, 'Multi-perspective analysis...');
+ await parallelPromise;
+
+ this.renderInsights(importantClusters, sentiments, worldBrief);
+ } catch (error) {
+ console.error('[InsightsPanel] Error:', error);
+ this.setContent('Analysis failed - retrying...
');
+ }
+ }
+
+ private renderInsights(
+ clusters: ClusteredEvent[],
+ sentiments: Array<{ label: string; score: number }> | null,
+ worldBrief: string | null
+ ): void {
+ const briefHtml = worldBrief ? this.renderWorldBrief(worldBrief) : '';
+ const focalPointsHtml = this.renderFocalPoints();
+ const convergenceHtml = this.renderConvergenceZones();
+ const sentimentOverview = this.renderSentimentOverview(sentiments);
+ const breakingHtml = this.renderBreakingStories(clusters, sentiments);
+ const statsHtml = this.renderStats(clusters);
+ const missedHtml = this.renderMissedStories();
+
+ this.setContent(`
+ ${briefHtml}
+ ${focalPointsHtml}
+ ${convergenceHtml}
+ ${sentimentOverview}
+ ${statsHtml}
+
+
+ ${missedHtml}
+ `);
+ }
+
+ private renderWorldBrief(brief: string): string {
+ return `
+ BREAKING & CONFIRMED
+ ${breakingHtml}
+
+
+ `;
+ }
+
+ private renderBreakingStories(
+ clusters: ClusteredEvent[],
+ sentiments: Array<{ label: string; score: number }> | null
+ ): string {
+ return clusters.map((cluster, i) => {
+ const sentiment = sentiments?.[i];
+ const sentimentClass = sentiment?.label === 'negative' ? 'negative' :
+ sentiment?.label === 'positive' ? 'positive' : 'neutral';
+
+ const badges: string[] = [];
+
+ if (cluster.sourceCount >= 3) {
+ badges.push(`✓ ${cluster.sourceCount} sources`);
+ } else if (cluster.sourceCount >= 2) {
+ badges.push(`${cluster.sourceCount} sources`);
+ }
+
+ if (cluster.velocity && cluster.velocity.level !== 'normal') {
+ const velIcon = cluster.velocity.trend === 'rising' ? '↑' : '';
+ badges.push(`${velIcon}+${cluster.velocity.sourcesPerHour}/hr`);
+ }
+
+ if (cluster.isAlert) {
+ badges.push('⚠ ALERT');
+ }
+
+ return `
+ ${SITE_VARIANT === 'tech' ? '🚀 TECH BRIEF' : '🌍 WORLD BRIEF'}
+ ${escapeHtml(brief)}
+
+
+ `;
+ }).join('');
+ }
+
+ private renderSentimentOverview(sentiments: Array<{ label: string; score: number }> | null): string {
+ if (!sentiments || sentiments.length === 0) {
+ return '';
+ }
+
+ const negative = sentiments.filter(s => s.label === 'negative').length;
+ const positive = sentiments.filter(s => s.label === 'positive').length;
+ const neutral = sentiments.length - negative - positive;
+
+ const total = sentiments.length;
+ const negPct = Math.round((negative / total) * 100);
+ const neuPct = Math.round((neutral / total) * 100);
+ const posPct = 100 - negPct - neuPct;
+
+ let toneLabel = 'Mixed';
+ let toneClass = 'neutral';
+ if (negative > positive + neutral) {
+ toneLabel = 'Negative';
+ toneClass = 'negative';
+ } else if (positive > negative + neutral) {
+ toneLabel = 'Positive';
+ toneClass = 'positive';
+ }
+
+ return `
+
+ `;
+ }
+
+ private renderStats(clusters: ClusteredEvent[]): string {
+ const multiSource = clusters.filter(c => c.sourceCount >= 2).length;
+ const fastMoving = clusters.filter(c => c.velocity && c.velocity.level !== 'normal').length;
+ const alerts = clusters.filter(c => c.isAlert).length;
+
+ return `
+
+
+ ${escapeHtml(cluster.primaryTitle.slice(0, 100))}${cluster.primaryTitle.length > 100 ? '...' : ''}
+
+ ${badges.length > 0 ? `${badges.join('')}
` : ''}
+
+
+ `;
+ }
+
+ private renderMissedStories(): string {
+ if (this.lastMissedStories.length === 0) {
+ return '';
+ }
+
+ const storiesHtml = this.lastMissedStories.slice(0, 3).map(story => {
+ const topPerspective = story.perspectives
+ .filter(p => p.name !== 'keywords')
+ .sort((a, b) => b.score - a.score)[0];
+
+ const perspectiveName = topPerspective?.name ?? 'ml';
+ const perspectiveScore = topPerspective?.score ?? 0;
+
+ return `
+
+ ${multiSource}
+ Multi-source
+
+
+ ${fastMoving}
+ Fast-moving
+
+ ${alerts > 0 ? `
+
+ ${alerts}
+ Alerts
+
+ ` : ''}
+
+
+ `;
+ }).join('');
+
+ return `
+
+
+ ${escapeHtml(story.title.slice(0, 80))}${story.title.length > 80 ? '...' : ''}
+
+
+ 🔬 ${perspectiveName}: ${(perspectiveScore * 100).toFixed(0)}%
+
+
+
+ `;
+ }
+
+ private renderConvergenceZones(): string {
+ if (this.lastConvergenceZones.length === 0) {
+ return '';
+ }
+
+ const zonesHtml = this.lastConvergenceZones.slice(0, 3).map(zone => {
+ const signalIcons: Record🎯 ML DETECTED
+ ${storiesHtml}
+
+
+ `;
+ }).join('');
+
+ return `
+ ${icons} ${escapeHtml(zone.region)}
+ ${escapeHtml(zone.description)}
+ ${zone.signalTypes.length} signal types • ${zone.totalSignals} events
+
+
+ `;
+ }
+
+ private renderFocalPoints(): string {
+ // Only show focal points that have both news AND signals (true correlations)
+ const correlatedFPs = this.lastFocalPoints.filter(
+ fp => fp.newsMentions > 0 && fp.signalCount > 0
+ ).slice(0, 5);
+
+ if (correlatedFPs.length === 0) {
+ return '';
+ }
+
+ const signalIcons: Record📍 GEOGRAPHIC CONVERGENCE
+ ${zonesHtml}
+
+
+ `;
+ }).join('');
+
+ return `
+
+ ${escapeHtml(fp.displayName)}
+ ${fp.urgency.toUpperCase()}
+
+ ${icons}
+
+ ${fp.newsMentions} news • ${fp.signalCount} signals
+
+ ${headlineText && headlineUrl ? `"${escapeHtml(headlineText)}..."` : ''}
+
+
+ `;
+ }
+}
diff --git a/src/components/IntelligenceGapBadge.ts b/src/components/IntelligenceGapBadge.ts
new file mode 100644
index 000000000..0a700246a
--- /dev/null
+++ b/src/components/IntelligenceGapBadge.ts
@@ -0,0 +1,489 @@
+import { getRecentSignals, type CorrelationSignal } from '@/services/correlation';
+import { getRecentAlerts, type UnifiedAlert } from '@/services/cross-module-integration';
+import { t } from '@/services/i18n';
+import { getSignalContext } from '@/utils/analysis-constants';
+import { escapeHtml } from '@/utils/sanitize';
+
+const LOW_COUNT_THRESHOLD = 3;
+const MAX_VISIBLE_FINDINGS = 10;
+const SORT_TIME_TOLERANCE_MS = 60000;
+const REFRESH_INTERVAL_MS = 10000;
+const ALERT_HOURS = 6;
+const STORAGE_KEY = 'worldmonitor-intel-findings';
+
+type FindingSource = 'signal' | 'alert';
+
+interface UnifiedFinding {
+ id: string;
+ source: FindingSource;
+ type: string;
+ title: string;
+ description: string;
+ confidence: number;
+ priority: 'critical' | 'high' | 'medium' | 'low';
+ timestamp: Date;
+ original: CorrelationSignal | UnifiedAlert;
+}
+
+export class IntelligenceFindingsBadge {
+ private badge: HTMLElement;
+ private dropdown: HTMLElement;
+ private isOpen = false;
+ private refreshInterval: ReturnType🎯 FOCAL POINTS
+ ${focalPointsHtml}
+
+ ${t('components.intelligenceFindings.title')}
+ ${t('components.intelligenceFindings.monitoring')}
+
+
+
+ `;
+ return;
+ }
+
+ const criticalCount = this.findings.filter(f => f.priority === 'critical').length;
+ const highCount = this.findings.filter(f => f.priority === 'high' || f.confidence >= 70).length;
+
+ let statusClass = 'moderate';
+ let statusText = t('components.intelligenceFindings.detected', { count: String(this.findings.length) });
+ if (criticalCount > 0) {
+ statusClass = 'critical';
+ statusText = t('components.intelligenceFindings.critical', { count: String(criticalCount) });
+ } else if (highCount > 0) {
+ statusClass = 'high';
+ statusText = t('components.intelligenceFindings.highPriority', { count: String(highCount) });
+ }
+
+ const findingsHtml = this.findings.slice(0, MAX_VISIBLE_FINDINGS).map(finding => {
+ const timeAgo = this.formatTimeAgo(finding.timestamp);
+ const icon = this.getTypeIcon(finding.type);
+ const priorityClass = finding.priority;
+ const insight = this.getInsight(finding);
+
+ return `
+
+
+ ${t('components.intelligenceFindings.scanning')}
+
+
+
+ `;
+ }).join('');
+
+ const moreCount = this.findings.length - MAX_VISIBLE_FINDINGS;
+ this.dropdown.innerHTML = `
+
+ ${icon} ${escapeHtml(finding.title)}
+ ${t(`components.intelligenceFindings.priority.${finding.priority}`)}
+
+ ${escapeHtml(finding.description)}
+
+
+ ${t('components.intelligenceFindings.title')}
+ ${statusText}
+
+
+
+ `;
+ }
+
+ private getInsight(finding: UnifiedFinding): string {
+ if (finding.source === 'signal') {
+ const context = getSignalContext((finding.original as CorrelationSignal).type);
+ return context.actionableInsight.split('.')[0] || '';
+ }
+ // For alerts, provide actionable insight based on type and severity
+ const alert = finding.original as UnifiedAlert;
+ if (alert.type === 'cii_spike') {
+ const cii = alert.components.ciiChange;
+ if (cii && cii.change >= 30) return t('components.intelligenceFindings.insights.criticalDestabilization');
+ if (cii && cii.change >= 20) return t('components.intelligenceFindings.insights.significantShift');
+ return t('components.intelligenceFindings.insights.developingSituation');
+ }
+ if (alert.type === 'convergence') return t('components.intelligenceFindings.insights.convergence');
+ if (alert.type === 'cascade') return t('components.intelligenceFindings.insights.cascade');
+ return t('components.intelligenceFindings.insights.review');
+ }
+
+ private getTypeIcon(type: string): string {
+ const icons: Record
+ ${findingsHtml}
+
+ ${moreCount > 0 ? `${t('components.intelligenceFindings.more', { count: String(moreCount) })}
` : ''}
+
+
+ `;
+ }).join('');
+
+ overlay.innerHTML = `
+
+ ${icon} ${escapeHtml(finding.title)}
+ ${t(`components.intelligenceFindings.priority.${finding.priority}`)}
+
+ ${escapeHtml(finding.description)}
+
+
+
+ `;
+
+ // Add click handlers
+ overlay.querySelector('.findings-modal-close')?.addEventListener('click', () => overlay.remove());
+ overlay.addEventListener('click', (e) => {
+ if ((e.target as HTMLElement).classList.contains('findings-modal-overlay')) {
+ overlay.remove();
+ }
+ });
+
+ // Handle clicking individual items
+ overlay.querySelectorAll('.findings-modal-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const id = item.getAttribute('data-finding-id');
+ const finding = this.findings.find(f => f.id === id);
+ if (!finding) return;
+
+ if (finding.source === 'signal' && this.onSignalClick) {
+ this.onSignalClick(finding.original as CorrelationSignal);
+ overlay.remove();
+ } else if (finding.source === 'alert' && this.onAlertClick) {
+ this.onAlertClick(finding.original as UnifiedAlert);
+ overlay.remove();
+ }
+ });
+ });
+
+ document.body.appendChild(overlay);
+ }
+
+ public destroy(): void {
+ if (this.refreshInterval) {
+ clearInterval(this.refreshInterval);
+ }
+ document.removeEventListener('click', this.boundCloseDropdown);
+ this.badge.remove();
+ }
+}
+
+// Re-export with old name for backwards compatibility
+export { IntelligenceFindingsBadge as IntelligenceGapBadge };
diff --git a/src/components/InvestmentsPanel.ts b/src/components/InvestmentsPanel.ts
new file mode 100644
index 000000000..1342efcbe
--- /dev/null
+++ b/src/components/InvestmentsPanel.ts
@@ -0,0 +1,229 @@
+import { Panel } from './Panel';
+import { GULF_INVESTMENTS } from '@/config/gulf-fdi';
+import type {
+ GulfInvestment,
+ GulfInvestmentSector,
+ GulfInvestorCountry,
+ GulfInvestingEntity,
+ GulfInvestmentStatus,
+} from '@/types';
+import { escapeHtml } from '@/utils/sanitize';
+import { t } from '@/services/i18n';
+
+interface InvestmentFilters {
+ investingCountry: GulfInvestorCountry | 'ALL';
+ sector: GulfInvestmentSector | 'ALL';
+ entity: GulfInvestingEntity | 'ALL';
+ status: GulfInvestmentStatus | 'ALL';
+ search: string;
+}
+
+const SECTOR_LABELS: Record
+ 🎯 ${t('components.intelligenceFindings.all', { count: String(this.findings.length) })}
+
+
+
+ ${escapeHtml(inv.investingEntity)}
+
+
+
+
+
`;
+
+ this.setContent(html);
+ if (this.countEl) this.countEl.textContent = String(filtered.length);
+
+ this.attachListeners();
+ }
+
+ private attachListeners(): void {
+ const content = this.content;
+
+ // Search input
+ const searchEl = content.querySelector| Asset${sortArrow('assetName')} | +Country${sortArrow('targetCountry')} | +Sector${sortArrow('sector')} | +Status${sortArrow('status')} | +Investment${sortArrow('investmentUSD')} | +Year${sortArrow('yearAnnounced')} | +
|---|---|---|---|---|---|
| No investments match filters | |||||
+
+
+ `;
+ }
+
+ private showEmbedError(channel: LiveChannel, errorCode: number): void {
+ const watchUrl = channel.videoId
+ ? `https://www.youtube.com/watch?v=${encodeURIComponent(channel.videoId)}`
+ : `https://www.youtube.com/${channel.handle}`;
+
+ this.content.innerHTML = `
+ ${channel.name} is not currently live
+
+
+
+
+ `;
+ }
+
+ private renderPlayer(): void {
+ this.ensurePlayerContainer();
+ void this.initializePlayer();
+ }
+
+ private ensurePlayerContainer(): void {
+ this.content.innerHTML = '';
+ this.playerContainer = document.createElement('div');
+ this.playerContainer.className = 'live-news-player';
+
+ if (!this.useDesktopEmbedProxy) {
+ this.playerElement = document.createElement('div');
+ this.playerElement.id = this.playerElementId;
+ this.playerContainer.appendChild(this.playerElement);
+ } else {
+ this.playerElement = null;
+ }
+
+ this.content.appendChild(this.playerContainer);
+ }
+
+ private buildDesktopEmbedPath(videoId: string, origin?: string): string {
+ const params = new URLSearchParams({
+ videoId,
+ autoplay: this.isPlaying ? '1' : '0',
+ mute: this.isMuted ? '1' : '0',
+ });
+ if (origin) params.set('origin', origin);
+ return `/api/youtube/embed?${params.toString()}`;
+ }
+
+
+
+ private postToEmbed(msg: Record${channel.name} cannot be embedded in this app (YouTube ${errorCode})
+ Open on YouTube
+ Webcams paused
';
+ return;
+ }
+
+ if (this.viewMode === 'grid') {
+ this.renderGrid();
+ } else {
+ this.renderSingle();
+ }
+ }
+
+ private renderGrid(): void {
+ this.content.innerHTML = '';
+ this.content.className = 'panel-content webcam-content';
+
+ const grid = document.createElement('div');
+ grid.className = 'webcam-grid';
+
+ this.gridFeeds.forEach(feed => {
+ const cell = document.createElement('div');
+ cell.className = 'webcam-cell';
+ cell.addEventListener('click', () => {
+ this.activeFeed = feed;
+ this.setViewMode('single');
+ });
+
+ const label = document.createElement('div');
+ label.className = 'webcam-cell-label';
+ label.innerHTML = `${feed.city.toUpperCase()}`;
+
+ const iframe = this.createIframe(feed);
+ cell.appendChild(iframe);
+ cell.appendChild(label);
+ grid.appendChild(cell);
+ this.iframes.push(iframe);
+ });
+
+ this.content.appendChild(grid);
+ }
+
+ private renderSingle(): void {
+ this.content.innerHTML = '';
+ this.content.className = 'panel-content webcam-content';
+
+ const wrapper = document.createElement('div');
+ wrapper.className = 'webcam-single';
+
+ const iframe = this.createIframe(this.activeFeed);
+ wrapper.appendChild(iframe);
+ this.iframes.push(iframe);
+
+ const switcher = document.createElement('div');
+ switcher.className = 'webcam-switcher';
+
+ const backBtn = document.createElement('button');
+ backBtn.className = 'webcam-feed-btn webcam-back-btn';
+ backBtn.innerHTML = ' Grid';
+ backBtn.addEventListener('click', () => this.setViewMode('grid'));
+ switcher.appendChild(backBtn);
+
+ this.filteredFeeds.forEach(feed => {
+ const btn = document.createElement('button');
+ btn.className = `webcam-feed-btn${feed.id === this.activeFeed.id ? ' active' : ''}`;
+ btn.textContent = feed.city;
+ btn.addEventListener('click', () => {
+ this.activeFeed = feed;
+ this.render();
+ });
+ switcher.appendChild(btn);
+ });
+
+ this.content.appendChild(wrapper);
+ this.content.appendChild(switcher);
+ }
+
+ private destroyIframes(): void {
+ this.iframes.forEach(iframe => {
+ iframe.src = 'about:blank';
+ iframe.remove();
+ });
+ this.iframes = [];
+ }
+
+ private setupIntersectionObserver(): void {
+ this.observer = new IntersectionObserver(
+ (entries) => {
+ const wasVisible = this.isVisible;
+ this.isVisible = entries.some(e => e.isIntersecting);
+ if (this.isVisible && !wasVisible && !this.isIdle) {
+ this.render();
+ } else if (!this.isVisible && wasVisible) {
+ this.destroyIframes();
+ }
+ },
+ { threshold: 0.1 }
+ );
+ this.observer.observe(this.element);
+ }
+
+ private setupIdleDetection(): void {
+ this.boundVisibilityHandler = () => {
+ if (document.hidden) {
+ if (this.idleTimeout) clearTimeout(this.idleTimeout);
+ } else {
+ if (this.isIdle) {
+ this.isIdle = false;
+ if (this.isVisible) this.render();
+ }
+ this.boundIdleResetHandler();
+ }
+ };
+ document.addEventListener('visibilitychange', this.boundVisibilityHandler);
+
+ this.boundIdleResetHandler = () => {
+ if (this.idleTimeout) clearTimeout(this.idleTimeout);
+ if (this.isIdle) {
+ this.isIdle = false;
+ if (this.isVisible) this.render();
+ }
+ this.idleTimeout = setTimeout(() => {
+ this.isIdle = true;
+ this.destroyIframes();
+ this.content.innerHTML = 'Webcams paused — move mouse to resume
';
+ }, this.IDLE_PAUSE_MS);
+ };
+
+ ['mousedown', 'keydown', 'scroll', 'touchstart'].forEach(event => {
+ document.addEventListener(event, this.boundIdleResetHandler, { passive: true });
+ });
+
+ this.boundIdleResetHandler();
+ }
+
+ public refresh(): void {
+ if (this.isVisible && !this.isIdle) {
+ this.render();
+ }
+ }
+
+ public destroy(): void {
+ if (this.idleTimeout) {
+ clearTimeout(this.idleTimeout);
+ this.idleTimeout = null;
+ }
+ document.removeEventListener('visibilitychange', this.boundVisibilityHandler);
+ ['mousedown', 'keydown', 'scroll', 'touchstart'].forEach(event => {
+ document.removeEventListener(event, this.boundIdleResetHandler);
+ });
+ this.observer?.disconnect();
+ this.destroyIframes();
+ super.destroy();
+ }
+}
diff --git a/src/components/MacroSignalsPanel.ts b/src/components/MacroSignalsPanel.ts
new file mode 100644
index 000000000..90fb0f6a2
--- /dev/null
+++ b/src/components/MacroSignalsPanel.ts
@@ -0,0 +1,177 @@
+import { Panel } from './Panel';
+import { escapeHtml } from '@/utils/sanitize';
+import { t } from '@/services/i18n';
+
+interface MacroSignalData {
+ timestamp: string;
+ verdict: string;
+ bullishCount: number;
+ totalCount: number;
+ signals: {
+ liquidity: { status: string; value: number | null; sparkline: number[] };
+ flowStructure: { status: string; btcReturn5: number | null; qqqReturn5: number | null };
+ macroRegime: { status: string; qqqRoc20: number | null; xlpRoc20: number | null };
+ technicalTrend: { status: string; btcPrice: number | null; sma50: number | null; sma200: number | null; vwap30d: number | null; mayerMultiple: number | null; sparkline: number[] };
+ hashRate: { status: string; change30d: number | null };
+ miningCost: { status: string };
+ fearGreed: { status: string; value: number | null; history: Array<{ value: number; date: string }> };
+ };
+ meta: { qqqSparkline: number[] };
+ unavailable?: boolean;
+}
+
+function sparklineSvg(data: number[], width = 80, height = 24, color = '#4fc3f7'): string {
+ if (!data || data.length < 2) return '';
+ const min = Math.min(...data);
+ const max = Math.max(...data);
+ const range = max - min || 1;
+ const points = data.map((v, i) => {
+ const x = (i / (data.length - 1)) * width;
+ const y = height - ((v - min) / range) * (height - 2) - 1;
+ return `${x.toFixed(1)},${y.toFixed(1)}`;
+ }).join(' ');
+ return ``;
+}
+
+function donutGaugeSvg(value: number | null, size = 48): string {
+ if (value === null) return 'N/A';
+ const v = Math.max(0, Math.min(100, value));
+ const r = (size - 6) / 2;
+ const circumference = 2 * Math.PI * r;
+ const offset = circumference - (v / 100) * circumference;
+ let color = '#f44336';
+ if (v >= 75) color = '#4caf50';
+ else if (v >= 50) color = '#ff9800';
+ else if (v >= 25) color = '#ff5722';
+ return ``;
+}
+
+function statusBadgeClass(status: string): string {
+ const s = status.toUpperCase();
+ if (['BULLISH', 'RISK-ON', 'GROWING', 'PROFITABLE', 'ALIGNED', 'NORMAL', 'EXTREME GREED', 'GREED'].includes(s)) return 'badge-bullish';
+ if (['BEARISH', 'DEFENSIVE', 'DECLINING', 'SQUEEZE', 'PASSIVE GAP', 'EXTREME FEAR', 'FEAR'].includes(s)) return 'badge-bearish';
+ return 'badge-neutral';
+}
+
+function formatNum(v: number | null, suffix = '%'): string {
+ if (v === null) return 'N/A';
+ const sign = v > 0 ? '+' : '';
+ return `${sign}${v.toFixed(1)}${suffix}`;
+}
+
+export class MacroSignalsPanel extends Panel {
+ private data: MacroSignalData | null = null;
+ private loading = true;
+ private error: string | null = null;
+
+ private refreshInterval: ReturnType
+
+ `;
+
+ this.setContent(html);
+ }
+
+ private renderSignalCard(name: string, status: string, value: string, sparkline: string, detail: string, link: string | null): string {
+ const badgeClass = statusBadgeClass(status);
+ return `
+
+ Overall
+ ${escapeHtml(d.verdict)}
+ ${d.bullishCount}/${d.totalCount} bullish
+
+
+ ${this.renderSignalCard('Liquidity', s.liquidity.status, formatNum(s.liquidity.value), sparklineSvg(s.liquidity.sparkline, 60, 20, '#4fc3f7'), 'JPY 30d ROC', 'https://www.tradingview.com/symbols/JPYUSD/')}
+ ${this.renderSignalCard('Flow', s.flowStructure.status, `BTC ${formatNum(s.flowStructure.btcReturn5)} / QQQ ${formatNum(s.flowStructure.qqqReturn5)}`, '', '5d returns', null)}
+ ${this.renderSignalCard('Regime', s.macroRegime.status, `QQQ ${formatNum(s.macroRegime.qqqRoc20)} / XLP ${formatNum(s.macroRegime.xlpRoc20)}`, sparklineSvg(d.meta.qqqSparkline, 60, 20, '#ab47bc'), '20d ROC', 'https://www.tradingview.com/symbols/QQQ/')}
+ ${this.renderSignalCard('BTC Trend', s.technicalTrend.status, `$${s.technicalTrend.btcPrice?.toLocaleString() ?? 'N/A'}`, sparklineSvg(s.technicalTrend.sparkline, 60, 20, '#ff9800'), `SMA50: $${s.technicalTrend.sma50?.toLocaleString() ?? '-'} | VWAP: $${s.technicalTrend.vwap30d?.toLocaleString() ?? '-'} | Mayer: ${s.technicalTrend.mayerMultiple ?? '-'}`, 'https://www.tradingview.com/symbols/BTCUSD/')}
+ ${this.renderSignalCard('Hash Rate', s.hashRate.status, formatNum(s.hashRate.change30d), '', '30d change', 'https://mempool.space/mining')}
+ ${this.renderSignalCard('Mining', s.miningCost.status, '', '', 'Hashprice model', null)}
+ ${this.renderFearGreedCard(s.fearGreed)}
+
+
+
+
+ `;
+ }
+
+ private renderFearGreedCard(fg: MacroSignalData['signals']['fearGreed']): string {
+ const badgeClass = statusBadgeClass(fg.status);
+ return `
+
+ ${sparkline ? `
+ ${detail ? `${sparkline}
` : ''}
+ ${value ? `${value}` : ''}
+ ${escapeHtml(detail)}
` : ''}
+
+
+ `;
+ }
+}
diff --git a/src/components/Map.ts b/src/components/Map.ts
index 7b29fad6e..3001dba2e 100644
--- a/src/components/Map.ts
+++ b/src/components/Map.ts
@@ -1,7 +1,13 @@
import * as d3 from 'd3';
import * as topojson from 'topojson-client';
+import { escapeHtml } from '@/utils/sanitize';
+import { getCSSColor } from '@/utils';
import type { Topology, GeometryCollection } from 'topojson-specification';
-import type { MapLayers, Hotspot, NewsItem, Earthquake, InternetOutage, RelatedAsset, AssetType, AisDisruptionEvent, AisDensityZone, CableAdvisory, RepairShip, SocialUnrestEvent } from '@/types';
+import type { Feature, Geometry } from 'geojson';
+import type { MapLayers, Hotspot, NewsItem, Earthquake, InternetOutage, RelatedAsset, AssetType, AisDisruptionEvent, AisDensityZone, CableAdvisory, RepairShip, SocialUnrestEvent, AirportDelayAlert, MilitaryFlight, MilitaryVessel, MilitaryFlightCluster, MilitaryVesselCluster, NaturalEvent, CyberThreat } from '@/types';
+import type { TechHubActivity } from '@/services/tech-activity';
+import type { GeoHubActivity } from '@/services/geo-activity';
+import { getNaturalEventIcon } from '@/services/eonet';
import type { WeatherAlert } from '@/services/weather';
import { getSeverityColor } from '@/services/weather';
import {
@@ -17,14 +23,37 @@ import {
SANCTIONED_COUNTRIES,
STRATEGIC_WATERWAYS,
APT_GROUPS,
- COUNTRY_LABELS,
ECONOMIC_CENTERS,
AI_DATA_CENTERS,
+ PORTS,
+ SPACEPORTS,
+ CRITICAL_MINERALS,
+ SITE_VARIANT,
+ // Tech variant data
+ STARTUP_HUBS,
+ ACCELERATORS,
+ TECH_HQS,
+ CLOUD_REGIONS,
+ // Finance variant data
+ STOCK_EXCHANGES,
+ FINANCIAL_CENTERS,
+ CENTRAL_BANKS,
+ COMMODITY_HUBS,
} from '@/config';
import { MapPopup } from './MapPopup';
+import {
+ updateHotspotEscalation,
+ getHotspotEscalation,
+ setMilitaryData,
+ setCIIGetter,
+ setGeoAlertGetter,
+} from '@/services/hotspot-escalation';
+import { getCountryScore } from '@/services/country-instability';
+import { getAlertsNearLocation } from '@/services/geo-convergence';
+import { t } from '@/services/i18n';
export type TimeRange = '1h' | '6h' | '24h' | '48h' | '7d' | 'all';
-export type MapView = 'global' | 'us' | 'mena';
+export type MapView = 'global' | 'america' | 'mena' | 'eu' | 'asia' | 'latam' | 'africa' | 'oceania';
interface MapState {
zoom: number;
@@ -38,15 +67,22 @@ interface HotspotWithBreaking extends Hotspot {
hasBreaking?: boolean;
}
-interface WorldTopology extends Topology {
- objects: {
- countries: GeometryCollection;
- };
+interface TechEventMarker {
+ id: string;
+ title: string;
+ location: string;
+ lat: number;
+ lng: number;
+ country: string;
+ startDate: string;
+ endDate: string;
+ url: string | null;
+ daysUntil: number;
}
-interface USTopology extends Topology {
+interface WorldTopology extends Topology {
objects: {
- states: GeometryCollection;
+ countries: GeometryCollection;
};
}
@@ -55,19 +91,26 @@ export class MapComponent {
Record
+ Fear & Greed
+ ${escapeHtml(fg.status)}
+
+
+ ${donutGaugeSvg(fg.value)}
+
+
+ alternative.me
+
+