koala73 / koala73/worldmonitor

perf(INP/desktop): deckgl layer-toggles header p75 11.7s — worst desktop target by two orders (#4537 Track D)

Open
#5,160 1 comment 0 reactions 0 assignees View on GitHub
area: map enhancement performance
Dominant language
TypeScript
Stars
86.6k
Forks
13.1k
Avg merge
8h 4m
Merged PRs (30d)
825

Description

## Problem
`deckgl-layer-toggles > .toggle-header` is the single worst desktop INP target by p75: **11,744ms (n=7)** in the 2026-07-09 Sentry device split — two orders of magnitude past the next offender. Small n, but 7 near-12s interactions is a real defect, not noise. Surfaced during the #4537 refresh; currently unowned.

## Where
The layer-toggles panel collapse/expand header — `src/components/DeckGLMap.ts` (and `GlobeMap.ts` mirror). Hypothesis to test FIRST: the expand/collapse triggers a synchronous deck.gl layer rebuild or a full `updateLayers()` commit in the click frame (cf. closed #4558 which chunked `updateLayers` with yieldToMain — this path may bypass that).

## Diagnose first
`node scripts/measure-dashboard-render-axis.mjs "https://www.worldmonitor.app/dashboard" --interact "selector:.deckgl-layer-toggles .toggle-header" --cpu-throttle 4 --json` at DESKTOP viewport (`--width 1365 --height 768`) — worst-event-scoped phases + symbolicated top events name the culprit (prod keeps function names).

## Acceptance
Sentry desktop `webvital:inp` bad-event rate for this selector → ~0; DebugBear desktop `inpSelector` row p75 < 500ms. Part of #4537 Track D.

Contributor guide

Open the contributing guide

Research direction

Start with src/components/DeckGLMap.ts and its GlobeMap.ts mirror, then run scripts/measure-dashboard-render-axis.mjs against the dashboard at the stated desktop viewport and interaction. Check whether expanding the layer-toggles header triggers a synchronous deck.gl rebuild or full updateLayers commit, using the symbolicated event phases to identify the culprit. Done means the Sentry bad-event rate is approximately zero and DebugBear desktop inpSelector p75 is below 500ms.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.