UI and fixing focus

Yesterday I got the air quality points breathing and glowing. Today I made them clickable. Because a cloud of pulsing dots is only half the story if you cannot actually ask the question: “what is that city and how bad is the air right now?“I built a proper detail card that slides into the HUD when you select something on the globe. It is a reusable component, so the same card can show earthquake data, ISS telemetry, or AQI readings, just with different labels and values. The styling is an accent stripe on the left that matches the point’s colour, monospace numbers, and a close button that dismisses it.

The picking logic is the fiddly part. I am using a raycast from the pointer position against the globe and its visible points. But I do not want to pick a point that is hidden behind the planet, so I filter to only the nearest visible point on the front hemisphere. The selection prioritises the closest point to the camera, which means you can click on a cluster and it picks the one you actually meant. Once selected, the camera does a smooth fly‑to. I added an easing function so the globe rotates and zooms in just enough to frame the point, but not so close that you lose context. During that transition, the controls lock so you do not accidentally spin the globe halfway through the animation. Unlock happens when the camera settles, and the detail card appears with all the live data fields populated. The card itself has dynamic key/value rows. For an earthquake you get magnitude, depth, time and location. For a city you get AQI, PM2.5, NO2, and the timestamp of the reading. I also wired up the select and clear callbacks so you can click away or hit close and the card vanishes, the focus resets, and the controls become responsive again.