correction of https://github.com/koala73/worldmonitor/issues/930

[seilorjunior]

Rendering performance optimizations:

• src/components/GlobeMap.ts: Refactored the marker rendering logic by introducing a flushScheduled flag and splitting the marker update into flushMarkers (which coalesces multiple calls using requestAnimationFrame) and flushMarkersNow (which performs the actual update), reducing redundant renders and improving frame batching. [1] [2]
• src/components/DeckGLMap.ts and src/components/GlobeMap.ts: Configured both MapLibre and Three.js renderers to request high-performance GPU usage via powerPreference: 'high-performance'. Additionally, Three.js antialiasing is disabled for better performance, especially on integrated GPUs. [1] [2]

Testing and verification:

• tests/map-perf-optimizations.test.mjs: Added new tests to verify that marker rendering in GlobeMap is properly coalesced, and that both map components are correctly requesting high-performance GPU settings and disabling antialiasing where appropriate.
  Affected areas
  Map / Globe
  News panels / RSS feeds
  AI Insights / World Brief
  Market Radar / Crypto
  Desktop app (Tauri)
  API endpoints (/api/*)
  Config / Settings
  Other:
  Checklist
  Tested on worldmonitor.app variant
  Tested on tech.worldmonitor.app variant (if applicable)
  New RSS feed domains added to api/rss-proxy.js allowlist (if adding feeds)
  No API keys or secrets committed
  TypeScript compiles without errors (npm run typecheck)
  Screenshots
  N/A — performance fix, no visual changes.

[vercel]

@seilorjunior is attempting to deploy a commit to the Elie Team on Vercel.

A member of the Team first needs to authorize it.

[koala73]

Thanks for the PR @seilorjunior! The RAF coalescing and GPU hints are solid ideas. A few things to address:

1. Unrelated CSS change — please remove

The .monitor-input-container changes in main.css (adding flexbox, removing margin-bottom) are unrelated to map performance. Please revert those or split into a separate PR.

2. antialias: false — reconsider

Disabling antialiasing on the globe will cause visible jagged edges, especially on 1080p/non-retina screens. The globe is a premium visual feature — aliased edges may cheapen the look. On HiDPI displays the difference is minimal, but on standard screens it's noticeable. Consider keeping antialias: true, or at minimum making this configurable in settings.

3. Good stuff

• flushMarkers RAF coalescing — Solid pattern. Multiple data setters calling flushMarkers() in the same frame now coalesce into one render.
• powerPreference: 'high-performance' — Safe win for both MapLibre and Three.js, hints the browser to use the discrete GPU.

4. Tests — minor concern

The tests read .ts source files as strings and regex-match for patterns like requestAnimationFrame and flushScheduled. This means renaming a variable or reformatting code will break the test without any behavioral change. They're fine as structural smoke tests, but worth noting they don't verify actual coalescing behavior.

5. Branch hygiene

The PR is committed directly to your fork's main branch. For future PRs, please create a feature branch (e.g., perf/globe-raf-coalescing) — it keeps your fork's main clean and in sync with upstream.

Please remove the CSS change and reconsider the antialiasing, then we're good to merge!

[koala73]

Closing — all three performance changes in this PR already exist on main (landed in PRs #956 and #958) with better conditional logic:

1. RAF coalescing — main uses flushTimer + flushMarkersImmediate() with pause/resume support and cleanup in destroy(). This PR's flushScheduled boolean is a simpler but less robust reimplementation that would conflict.

2. rendererConfig — main conditionally sets powerPreference: desktop ? 'high-performance' : 'default' and antialias: initialPixelRatio > 1. This PR unconditionally disables antialiasing and forces high-performance GPU for all platforms (regression for web/Retina users).

3. DeckGL canvasContextAttributes — The only net-new change, but marginal value: it only affects MapLibre's context (not deck.gl's), the flat map isn't the bottleneck, and the globe already triggers the discrete GPU on desktop.

4. CSS changes — Unrelated to the map is so laggy that is about 1fps #930 (addresses Add Monitor button #901 instead).

Thank you for looking into the performance issue! The fix has already been applied. 🙏