fix(deckgl-map): update legend visibility when layer toggles change

[fuleinist]

Summary

Fixes the Map/Globe legend so it updates immediately when layer toggles are changed.

Type of change

• Bug fix

Affected areas

• Map / Globe
• News panels / RSS feeds
• AI Insights / World Brief
• Market Radar / Crypto
• Desktop app (Tauri)
• API endpoints (/api/*)
• Config / Settings
• Other:

Bug description

The legend at the bottom of the Map/Globe was created once via createLegend() and never updated when layer toggles in the side panel changed. This caused all 5 legend items (Startup Hub, Tech HQ, Accelerator, Cloud Region, Datacenter for tech variant) to always display regardless of which layers were actually enabled.

Fix

• Added data-layer attribute to each legend item in createLegend() linking it to the corresponding layer key (e.g. startupHubs, techHQs, accelerators, cloudRegions, datacenters)
• Added updateLegend() method that shows/hides legend items based on this.state.layers visibility
• updateLegend() is called from createLegend() on init and from the layer toggle change handler on every toggle

Checklist

• Tested on tech.worldmonitor.app variant (where bug was reported)
• TypeScript compiles without errors (npm run typecheck)
• No API keys or secrets committed

---

Fixes #1967

🤖 Generated with Claude Code

[vercel]

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

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR fixes legend visibility in the Map/Globe view by adding data-layer attributes to each legend item and introducing an updateLegend() method that shows or hides items based on this.state.layers. The fix is correctly wired to the UI checkbox handler and is a real improvement over the always-visible-all-items status quo.\n\nHowever, there are two concrete defects that limit the fix's completeness:\n\n- Programmatic paths are not covered — setLayers(), enableLayer(), and toggleLayer() all mutate this.state.layers but never call updateLegend(). Any external code that changes layers programmatically (URL-state restore, panel sync, etc.) will leave the legend stale.\n- Aircraft entry in happy variant has an empty layerKey — because '' is falsy, the Aircraft legend item never gets a data-layer attribute and is therefore always visible, even when the flights layer is disabled. The same empty key is used for Breakthrough, which may be intentional (no corresponding toggle), but Aircraft very likely should map to 'flights'.\n- The PR description notes TypeScript compilation (npm run typecheck) was not verified, which is worth checking given the cast item.dataset.layer as keyof MapLayers in updateLegend().

Confidence Score: 4/5

Safe to merge for the tech variant (the reported bug), but the fix is incomplete for the happy variant and all programmatic layer-change paths.

Two P1 defects remain: setLayers/enableLayer/toggleLayer never call updateLegend(), and the Aircraft legend entry in the happy variant has an empty layerKey keeping it permanently visible. Both are straightforward one-line fixes, but they represent genuine incorrect behavior on currently reachable paths.

src/components/DeckGLMap.ts — specifically the setLayers, enableLayer, toggleLayer methods and the happy variant legend item for Aircraft.

Important Files Changed

Filename	Overview
src/components/DeckGLMap.ts	Adds updateLegend() wired to the UI checkbox toggle, but misses programmatic paths (setLayers, enableLayer, toggleLayer) and leaves the Aircraft legend entry in the happy variant permanently visible due to an empty layerKey.

Sequence Diagram

sequenceDiagram
    participant User
    participant CheckboxHandler
    participant setLayers
    participant enableLayer
    participant toggleLayer
    participant updateLegend
    participant Legend DOM

    User->>CheckboxHandler: Toggle layer checkbox
    CheckboxHandler->>updateLegend: updateLegend() ✅
    updateLegend->>Legend DOM: Show/hide .legend-item[data-layer]

    Note over setLayers,Legend DOM: Programmatic paths — legend NOT updated ❌
    setLayers->>setLayers: this.state.layers = {...layers}
    setLayers->>setLayers: this.render()
    setLayers--xLegend DOM: updateLegend() never called

    enableLayer->>enableLayer: this.state.layers[layer] = true
    enableLayer->>enableLayer: this.render()
    enableLayer--xLegend DOM: updateLegend() never called

    toggleLayer->>toggleLayer: this.state.layers[layer] = !prev
    toggleLayer->>toggleLayer: this.render()
    toggleLayer--xLegend DOM: updateLegend() never called

Loading

Comments Outside Diff (1)

1. src/components/DeckGLMap.ts, line 4666-4680 (link)

   setLayers() does not update the legend

   When layers are changed programmatically (e.g. URL-state restore, external panel sync), setLayers() updates this.state.layers and re-renders the map but never calls updateLegend(). This means the legend stays stale after any programmatic layer change — exactly the bug class this PR set out to fix, just through a different code path.

   enableLayer() (line 5370) and toggleLayer() (line 5382) have the same omission.

   enableLayer() and toggleLayer() should each call this.updateLegend() after this.render() as well.

_{Reviews (1): Last reviewed commit: "fix(deckgl-map): update legend visibilit..." | Re-trigger Greptile}