mirror of
https://github.com/koala73/worldmonitor.git
synced 2026-04-25 17:14:57 +02:00
fix(globe): enrich tooltip content, sizing, and hide delay (#1394)
* fix(globe): enrich tooltip content, widen max-width, and extend hide delay - Widen tooltip max-width from 240px to 280px for better readability - Show event type in conflict tooltips (e.g., "Battles", "Riots") - Display flight heading as compass direction (e.g., "Heading: NE (45°)") - Replace cryptic "NP avg" with "Avg satellites visible" for GPS jamming - Extend hide delay to 6s for content-rich tooltip kinds (flightDelay, cableAdvisory, conflictZone, spaceport, economic, datacenter, imageryScene) Closes #1318 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(globe): widen rich tooltips to 300px and extend hide delay for more kinds - Selectively widen max-width to 300px for content-heavy tooltip types (flightDelay, conflictZone, cableAdvisory) matching satellite behavior - Add repairShip and aisDisruption to the extended 6s hide delay set Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test(globe): add tests for tooltip enrichment changes - 14 tests for compass heading formula covering cardinals, intercardinals, wrap-around (360°), negative headings, large values, and undefined - 7 source-level assertions verifying tooltip content (eventType in conflict, compass in flight, readable GPS label, richKinds/wideKinds sets) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test(globe): replace brittle source-slicing assertions with direct includes Removes slice/indexOf boundary-carving that broke silently when GlobeMap.ts was restructured. Replaces with src.includes() checks on the key strings each test cares about. Also fixes misleading banker's-rounding comment on the boundary test. --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Elie Habib <elie.habib@gmail.com>
This commit is contained in:
Nicolas Dos Santos
committed by
GitHub
GitHub
parent
0dae526a4b
commit
9a3f5000c2
@@ -1300,7 +1300,7 @@ export class GlobeMap {
|
||||
'font-size:11px',
|
||||
'font-family:monospace',
|
||||
'color:#d4d4d4',
|
||||
'max-width:240px',
|
||||
'max-width:280px',
|
||||
'z-index:1000',
|
||||
'pointer-events:auto',
|
||||
'line-height:1.5',
|
||||
@@ -1313,13 +1313,18 @@ export class GlobeMap {
|
||||
let html = '';
|
||||
if (d._kind === 'conflict') {
|
||||
html = `<span style="color:#ff5050;font-weight:bold;">⚔ ${esc(d.location)}</span>` +
|
||||
(d.fatalities ? `<br><span style="opacity:.7;">Casualties: ${d.fatalities}</span>` : '');
|
||||
(d.eventType ? `<br><span style="opacity:.7;">${esc(d.eventType)}</span>` : '') +
|
||||
(d.fatalities ? `<br><span style="opacity:.5;">Casualties: ${d.fatalities}</span>` : '');
|
||||
} else if (d._kind === 'hotspot') {
|
||||
const sc = ['', '#88ff44', '#ffdd00', '#ffaa00', '#ff6600', '#ff2020'][d.escalationScore] ?? '#ffaa00';
|
||||
html = `<span style="color:${sc};font-weight:bold;">🎯 ${esc(d.name)}</span>` +
|
||||
`<br><span style="opacity:.7;">Escalation: ${d.escalationScore}/5</span>`;
|
||||
} else if (d._kind === 'flight') {
|
||||
html = `<span style="font-weight:bold;">✈ ${esc(d.callsign)}</span><br><span style="opacity:.7;">${esc(d.type)}</span>`;
|
||||
const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
|
||||
const compass = dirs[Math.round(((d.heading ?? 0) % 360 + 360) % 360 / 22.5) % 16];
|
||||
html = `<span style="font-weight:bold;">✈ ${esc(d.callsign)}</span>` +
|
||||
`<br><span style="opacity:.7;">${esc(d.type)}</span>` +
|
||||
`<br><span style="opacity:.5;">Heading: ${compass} (${Math.round(d.heading ?? 0)}°)</span>`;
|
||||
} else if (d._kind === 'vessel') {
|
||||
const deployStatus = d.usniDeploymentStatus && d.usniDeploymentStatus !== 'unknown'
|
||||
? ` <span style="opacity:.6;font-size:10px;">[${esc(d.usniDeploymentStatus.toUpperCase().replace('-', ' '))}]</span>`
|
||||
@@ -1413,7 +1418,7 @@ export class GlobeMap {
|
||||
const gc = d.level === 'high' ? '#ff2020' : '#ff8800';
|
||||
html = `<span style="color:${gc};font-weight:bold;">📡 GPS Jamming</span>` +
|
||||
`<br><span style="opacity:.7;">Level: ${esc(d.level)}</span>` +
|
||||
`<br><span style="opacity:.5;">NP avg: ${d.npAvg.toFixed(2)}</span>`;
|
||||
`<br><span style="opacity:.5;">Avg satellites visible: ${d.npAvg.toFixed(1)}</span>`;
|
||||
} else if (d._kind === 'tech') {
|
||||
html = `<span style="color:#44aaff;font-weight:bold;">💻 ${esc(d.title.slice(0, 50))}</span>` +
|
||||
`<br><span style="opacity:.7;">${esc(d.country)}</span>` +
|
||||
@@ -1526,7 +1531,8 @@ export class GlobeMap {
|
||||
html = '';
|
||||
}
|
||||
el.innerHTML = `<div style="padding-right:16px;position:relative;">${closeBtn}${html}</div>`;
|
||||
if (d._kind === 'satellite') el.style.maxWidth = '300px';
|
||||
const wideKinds = new Set(['satellite', 'flightDelay', 'conflictZone', 'cableAdvisory']);
|
||||
if (wideKinds.has(d._kind)) el.style.maxWidth = '300px';
|
||||
el.querySelector('button')?.addEventListener('click', () => this.hideTooltip());
|
||||
|
||||
if (d._kind === 'webcam') {
|
||||
@@ -1642,7 +1648,8 @@ export class GlobeMap {
|
||||
|
||||
this.tooltipEl = el;
|
||||
if (this.tooltipHideTimer) clearTimeout(this.tooltipHideTimer);
|
||||
const hideDelay = d._kind === 'satellite' ? 6000 : d._kind === 'webcam' ? 8000 : d._kind === 'webcam-cluster' ? 12000 : 3500;
|
||||
const richKinds = new Set(['satellite', 'flightDelay', 'cableAdvisory', 'conflictZone', 'spaceport', 'economic', 'datacenter', 'imageryScene', 'repairShip', 'aisDisruption']);
|
||||
const hideDelay = d._kind === 'webcam' ? 8000 : d._kind === 'webcam-cluster' ? 12000 : richKinds.has(d._kind) ? 6000 : 3500;
|
||||
this.tooltipHideTimer = setTimeout(() => this.hideTooltip(), hideDelay);
|
||||
|
||||
if (d._kind === 'webcam-cluster') {
|
||||
|
||||
141
tests/globe-tooltip-enrichment.test.mjs
Normal file
141
tests/globe-tooltip-enrichment.test.mjs
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* Tests for globe tooltip enrichment (PR: fix/globe-tooltip-enrichment).
|
||||
*
|
||||
* Covers:
|
||||
* - Compass heading calculation for flight tooltips (pure math)
|
||||
* - Conflict tooltip includes eventType field
|
||||
* - GPS jamming tooltip uses human-readable label
|
||||
* - Rich tooltip kinds get extended hide delay
|
||||
* - Content-heavy tooltip kinds get wider max-width (300px)
|
||||
*/
|
||||
|
||||
import { describe, it } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const root = resolve(__dirname, '..');
|
||||
const readSrc = (relPath) => readFileSync(resolve(root, relPath), 'utf-8');
|
||||
|
||||
// ========================================================================
|
||||
// 1. Compass heading calculation (pure math, mirrors GlobeMap logic)
|
||||
// ========================================================================
|
||||
|
||||
/** Replicates the compass formula from GlobeMap.showMarkerTooltip */
|
||||
function headingToCompass(heading) {
|
||||
const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
|
||||
return dirs[Math.round(((heading ?? 0) % 360 + 360) % 360 / 22.5) % 16];
|
||||
}
|
||||
|
||||
describe('headingToCompass', () => {
|
||||
it('returns N for heading 0', () => {
|
||||
assert.equal(headingToCompass(0), 'N');
|
||||
});
|
||||
|
||||
it('returns E for heading 90', () => {
|
||||
assert.equal(headingToCompass(90), 'E');
|
||||
});
|
||||
|
||||
it('returns S for heading 180', () => {
|
||||
assert.equal(headingToCompass(180), 'S');
|
||||
});
|
||||
|
||||
it('returns W for heading 270', () => {
|
||||
assert.equal(headingToCompass(270), 'W');
|
||||
});
|
||||
|
||||
it('returns NE for heading 45', () => {
|
||||
assert.equal(headingToCompass(45), 'NE');
|
||||
});
|
||||
|
||||
it('returns SE for heading 135', () => {
|
||||
assert.equal(headingToCompass(135), 'SE');
|
||||
});
|
||||
|
||||
it('returns SW for heading 225', () => {
|
||||
assert.equal(headingToCompass(225), 'SW');
|
||||
});
|
||||
|
||||
it('returns NW for heading 315', () => {
|
||||
assert.equal(headingToCompass(315), 'NW');
|
||||
});
|
||||
|
||||
it('returns N for heading 360 (wraps around)', () => {
|
||||
assert.equal(headingToCompass(360), 'N');
|
||||
});
|
||||
|
||||
it('handles negative heading (-20 → NNW)', () => {
|
||||
// -20° = 340°, which falls in NNW sector (326.25°–348.75°)
|
||||
assert.equal(headingToCompass(-20), 'NNW');
|
||||
});
|
||||
|
||||
it('handles near-zero negative heading (-10 → N)', () => {
|
||||
// -10° = 350°, which falls in N sector (348.75°–11.25°)
|
||||
assert.equal(headingToCompass(-10), 'N');
|
||||
});
|
||||
|
||||
it('handles large heading (720 → N)', () => {
|
||||
assert.equal(headingToCompass(720), 'N');
|
||||
});
|
||||
|
||||
it('returns N for undefined/null heading', () => {
|
||||
assert.equal(headingToCompass(undefined), 'N');
|
||||
assert.equal(headingToCompass(null), 'N');
|
||||
});
|
||||
|
||||
it('handles boundary at 11.25 (exact midpoint between N and NNE)', () => {
|
||||
// Math.round(0.5) = 1 in JS, so 11.25° / 22.5 = 0.5 rounds to index 1 → NNE
|
||||
assert.equal(headingToCompass(11.25), 'NNE');
|
||||
});
|
||||
});
|
||||
|
||||
// ========================================================================
|
||||
// 2. Source-level assertions on GlobeMap.ts tooltip code
|
||||
// ========================================================================
|
||||
|
||||
describe('GlobeMap tooltip enrichment', () => {
|
||||
const src = readSrc('src/components/GlobeMap.ts');
|
||||
|
||||
it('uses 280px base max-width for all tooltips', () => {
|
||||
assert.match(src, /max-width:280px/, 'base max-width should be 280px');
|
||||
});
|
||||
|
||||
it('conflict tooltip renders eventType when available', () => {
|
||||
assert.ok(src.includes('esc(d.eventType)'), 'conflict tooltip must escape eventType');
|
||||
});
|
||||
|
||||
it('flight tooltip includes compass direction from heading', () => {
|
||||
assert.ok(src.includes('compass'), 'flight tooltip must compute compass direction');
|
||||
assert.ok(src.includes('Heading:'), 'flight tooltip must display Heading label');
|
||||
});
|
||||
|
||||
it('GPS jamming tooltip uses human-readable satellite label', () => {
|
||||
assert.ok(src.includes('Avg satellites visible'), 'gpsjam must show readable label');
|
||||
assert.ok(!src.includes('NP avg:'), 'gpsjam must not use cryptic NP avg label');
|
||||
});
|
||||
|
||||
it('extends hide delay to 6s for rich tooltip kinds', () => {
|
||||
assert.match(src, /richKinds\.has\(d\._kind\) \? 6000 : 3500/,
|
||||
'hide delay should be 6000 for rich kinds, 3500 for others');
|
||||
});
|
||||
|
||||
it('richKinds includes repairShip and aisDisruption', () => {
|
||||
const richLine = src.match(/const richKinds = new Set\(\[([^\]]+)\]\)/);
|
||||
assert.ok(richLine, 'richKinds set must exist');
|
||||
const kinds = richLine[1];
|
||||
assert.ok(kinds.includes("'repairShip'"), 'richKinds must include repairShip');
|
||||
assert.ok(kinds.includes("'aisDisruption'"), 'richKinds must include aisDisruption');
|
||||
});
|
||||
|
||||
it('widens content-heavy tooltip types to 300px', () => {
|
||||
const wideLine = src.match(/const wideKinds = new Set\(\[([^\]]+)\]\)/);
|
||||
assert.ok(wideLine, 'wideKinds set must exist');
|
||||
const kinds = wideLine[1];
|
||||
assert.ok(kinds.includes("'flightDelay'"), 'wideKinds must include flightDelay');
|
||||
assert.ok(kinds.includes("'conflictZone'"), 'wideKinds must include conflictZone');
|
||||
assert.ok(kinds.includes("'cableAdvisory'"), 'wideKinds must include cableAdvisory');
|
||||
assert.ok(kinds.includes("'satellite'"), 'wideKinds must include satellite');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user