[Feature] Make Sensor Grid sidebar items interactive: toggles / highlighters for focusing data layers

[Guardian259]

Summary

Add interactivity to the Sensor Grid sidebar panel so that clicking/tapping individual layer items acts as a toggle or highlighter. This would allow users to focus the dashboard (globe markers, map overlays, delta highlights, news ticker, etc.) on specific data layers, subsets, or ranges — filtering in or highlighting only the selected sensor/source data while temporarily hiding or de-emphasizing others.

Why This Matters

The current Sensor Grid panel provides a live overview of active data layers (with counts and status dots), but it remains mostly decorative and non-interactive. This creates an illusion of rich information without giving users direct control to drill down.

Enabling toggles/highlighters would solve a core usability problem for Crucix users (OSINT analysts, researchers, traders, etc.): the dashboard can become visually overwhelming with 27+ sources firing simultaneously. Interactive filtering lets users narrow focus to exactly what they're investigating right now — e.g., only recent conflict escalations from ACLED + Telegram feeds, or only radiation + fire detections in a specific region — without losing context or needing to reload/sweep again.

This turns the Sensor Grid from passive status display into an active control surface, improving signal-to-noise ratio, speeding up investigations, and making better use of the existing rich OSINT data in the same screen real-estate.

Scope

• Bug fix: No
• New source: No
• Dashboard/UI change: Yes
• LLM/provider change: No
• Other: No (pure frontend interactivity enhancement)

Proposed Behavior

• Each .layer-item in the Sensor Grid becomes clickable (add cursor: pointer, hover effect, active/selected state styling).
• Clicking a layer toggles it between three states (cycle or separate toggle/highlight buttons):
  1. Normal (default): layer contributes normally to globe markers, deltas, ticker, etc.
  2. Focused/Highlighted (primary action): only this layer (or group) is prominently shown — e.g., markers enlarged/glow, other layers dimmed or hidden, delta panel filtered to this source. The icons (colored .ldot indicators) and/or layer items would display an aside/anchored tooltip (positioned to point toward the hovered/focused icon) providing more detailed information, such as layer-specific stats (e.g., update frequency, last ping time, total historical count, source reliability/health, sample recent deltas, or a mini-trend summary).
  3. Hidden/Excluded (secondary toggle): layer data is temporarily suppressed from visualizations (markers removed, counts grayed out) until re-enabled.
• Multi-select support: hold Shift/Ctrl to select multiple layers → dashboard focuses on union of selected layers.
• Visual feedback: selected layers get a stronger border/glow on the .ldot, .layer-name, or whole item; add a small "Focused" badge or icon.
• Persistence: use localStorage to remember last focused layers across refreshes (optional reset button in panel header).
• Tooltips on hover/click: expand to show richer info (e.g., last update time, source health, sample recent delta, count trend).

Example flow: User is investigating maritime activity → clicks AIS vessels + OpenSky flights layers → globe zooms/highlights only those markers, ticker filters to related news, deltas show only changes in those sources.

Maintenance Impact

• No new API keys, rate limits, paid services, or external dependencies required.
• Pure client-side JavaScript change (update the layer-item rendering/template literals to add event listeners, state classes, and filtering logic).
• State management can use simple local variables or a lightweight store (no new libs needed).
• Minimal ongoing upkeep: just bug fixes if globe/map filtering logic changes in future refactors.
• Potential performance note: if hiding many layers, ensure marker redraws are efficient (Globe.gl already batches well).

Additional Context

Current (non-interactive) code snippet for reference:

<div class="g-panel">
      <div class="sec-head"><h3>Sensor Grid</h3><span class="badge">LIVE</span></div>
      ${layers.map(l=>`<div class="layer-item"><div class="layer-left"><div class="ldot ${l.dot}"></div><div><div class="layer-name">${l.name}</div><div class="layer-sub">${l.sub}</div></div></div><div class="layer-count">${l.count}</div></div>`).join('')}
    </div>