feat(satellites): add interactive spotlight effect for hover/select (#95)#142
Merged
krishkhinchi merged 3 commits intoJul 26, 2026
Conversation
🤖 CodeAnt AI — Review Status
|
github-actions
Bot
added
bug
codeant-ai
Bot
added
the
size:XXL
📝 WalkthroughWalkthroughEarthTwin now delegates satellite hover, selection, keyboard navigation, animated spotlight visuals, orbit highlighting, and selected-object details to reusable modules. Shared satellite types and visual constants are centralized, while globe overlays and loading states are updated. ChangesSatellite Spotlight
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant CesiumViewer
participant SpotlightManager
participant useSatelliteHover
participant useSatelliteSelection
participant useSpotlightEffect
participant SpotlightInfoCard
User->>CesiumViewer: hover or click satellite
CesiumViewer->>SpotlightManager: picked entity event
SpotlightManager->>useSatelliteHover: process mouse movement
SpotlightManager->>useSatelliteSelection: update selection
SpotlightManager->>useSpotlightEffect: provide hover or selected ID
useSpotlightEffect->>CesiumViewer: dim entities and highlight orbit
SpotlightManager->>SpotlightInfoCard: render selected satellite details
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <div className="bg-status-success/20 border border-status-success px-3 md:px-4 py-1 flex items-center gap-2"> | ||
| <MaterialIcon name="verified_user" className="text-status-success text-sm" /> | ||
| <span className="font-technical-data text-status-success text-[11px] md:text-[12px] font-bold"> | ||
| ALL CLEAR |
There was a problem hiding this comment.
When a Dashboard user tries to save or reopen a globe view, or follows an existing shared-bookmark URL, EarthTwin no longer exposes the bookmark controls, modal/sidebar integration, or shared-URL restoration call, causing all bookmark management actions to disappear and shared links to be silently ignored.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/components/EarthTwin.tsx
Line: 417
Comment:
**Bookmark workflows become unreachable**
When a Dashboard user tries to save or reopen a globe view, or follows an existing shared-bookmark URL, EarthTwin no longer exposes the bookmark controls, modal/sidebar integration, or shared-URL restoration call, causing all bookmark management actions to disappear and shared links to be silently ignored.
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
148
to
+149
| pixelSize, | ||
| color: sunlit ? colorConfig.cesium.withAlpha(0.85) : colorConfig.cesium.withAlpha(0.3), | ||
| outlineColor: sunlit ? colorConfig.cesium.withAlpha(0.4) : colorConfig.cesium.withAlpha(0.1), | ||
| color: colorConfig.cesium.withAlpha(0.85), |
There was a problem hiding this comment.
When a tracked satellite enters Earth's shadow, entity population now assigns the same fixed color and outline opacity used for illuminated satellites while globe lighting is disabled, causing shadowed objects to remain visually indistinguishable from sunlit ones.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/components/EarthTwin.tsx
Line: 148-149
Comment:
**Satellite illumination state is lost**
When a tracked satellite enters Earth's shadow, entity population now assigns the same fixed color and outline opacity used for illuminated satellites while globe lighting is disabled, causing shadowed objects to remain visually indistinguishable from sunlit ones.
How can I resolve this? If you propose a fix, please make it concise.
github-actions
Bot
added
GitHub Actions
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
frontend/src/hooks/useSpotlightEffect.ts (1)
52-130: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winNo effect cleanup on unmount or viewer swap.
The effect never returns a teardown, so on unmount (or when
viewerchanges) the orbit highlight is left in place and the refs keep state that no longer matches the new viewer. Consider clearing the highlight and resettingdimmedIdsRef/prevActiveIdRef/lastDatasetVersionRefin a cleanup keyed onviewer.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/hooks/useSpotlightEffect.ts` around lines 52 - 130, Add cleanup to the useEffect so unmounts and viewer changes call clearOrbitHighlight for the current viewer and reset dimmedIdsRef, prevActiveIdRef, and lastDatasetVersionRef. Return this teardown from the effect, keyed to the existing viewer dependency, without changing the active/hover highlight behavior.frontend/src/components/EarthTwin.tsx (1)
12-53: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winEarth-radius constant and orbital-position math are duplicated across three files.
EARTH_RADIUS/EARTH_RADIUS_KM/literal6371and the GMST/RAAN/inclination sweep are each re-implemented rather than shared, risking silent divergence if one site is ever tuned (e.g. a more precise radius, or a J2 correction) without the others.
frontend/src/components/EarthTwin.tsx#L12-L53: extractEARTH_RADIUSand the GMST/position-from-orbital-elements logic inkeplerToLatLonAltinto a shared module (e.g.frontend/src/lib/orbitalMath.ts) that both this file andOrbitHighlight.tsximport.frontend/src/components/SatelliteSpotlight/OrbitHighlight.tsx#L15-L62: replace the localEARTH_RADIUS_KMconstant and duplicated GMST/argLat/lon/lat computation with the shared helper instead of re-deriving it.frontend/src/components/SatelliteSpotlight/SpotlightInfoCard.tsx#L26-L26: import the shared Earth-radius constant instead of the inline literal6371for the altitude calculation.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/EarthTwin.tsx` around lines 12 - 53, Create a shared orbital math module exporting the Earth-radius constant and a helper for GMST and orbital-element position calculations, then update frontend/src/components/EarthTwin.tsx lines 12-53 to use it from keplerToLatLonAlt, frontend/src/components/SatelliteSpotlight/OrbitHighlight.tsx lines 15-62 to remove its local EARTH_RADIUS_KM and duplicated position math in favor of the helper, and frontend/src/components/SatelliteSpotlight/SpotlightInfoCard.tsx line 26 to import the shared radius instead of using the literal 6371.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/EarthTwin.tsx`:
- Around line 328-341: Replace the inline toLatLonAlt wrapper in EarthTwin’s
SpotlightManager props with the stable module-level keplerToLatLonAlt function
reference, preserving its existing default-argument behavior and preventing
useSatelliteSelection’s click-handler effect from re-registering on hover-driven
renders.
In `@frontend/src/components/SatelliteSpotlight/GlowEffect.tsx`:
- Around line 95-122: Update applyDim to explicitly reset point.outlineWidth to
baseline.outlineWidth alongside the other point style properties, ensuring
previously highlighted entities lose their widened outline when dimmed.
In `@frontend/src/hooks/useSatelliteSelection.ts`:
- Around line 80-98: Update the double-click handler in useSatelliteSelection
around viewer.camera.flyTo so it respects the shared prefersReducedMotion()
result used by GlowEffect.tsx: skip the animated flyTo when reduced motion is
preferred, while preserving the existing destination and duration behavior
otherwise. Extract or reuse the preference utility rather than duplicating
detection logic.
- Around line 64-78: Update the LEFT_CLICK handler in useSatelliteSelection to
focus the existing globe container after both selectSatellite and clearSelection
paths. Reuse the container element already rendered by EarthTwin with
tabIndex={0}, ensuring mouse interactions restore focus for SpotlightManager
keyboard handling without focusing the Cesium canvas.
---
Nitpick comments:
In `@frontend/src/components/EarthTwin.tsx`:
- Around line 12-53: Create a shared orbital math module exporting the
Earth-radius constant and a helper for GMST and orbital-element position
calculations, then update frontend/src/components/EarthTwin.tsx lines 12-53 to
use it from keplerToLatLonAlt,
frontend/src/components/SatelliteSpotlight/OrbitHighlight.tsx lines 15-62 to
remove its local EARTH_RADIUS_KM and duplicated position math in favor of the
helper, and frontend/src/components/SatelliteSpotlight/SpotlightInfoCard.tsx
line 26 to import the shared radius instead of using the literal 6371.
In `@frontend/src/hooks/useSpotlightEffect.ts`:
- Around line 52-130: Add cleanup to the useEffect so unmounts and viewer
changes call clearOrbitHighlight for the current viewer and reset dimmedIdsRef,
prevActiveIdRef, and lastDatasetVersionRef. Return this teardown from the
effect, keyed to the existing viewer dependency, without changing the
active/hover highlight behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d690bca5-31a3-4999-927e-3718167a6b62
📒 Files selected for processing (11)
frontend/src/components/EarthTwin.tsxfrontend/src/components/SatelliteSpotlight/GlowEffect.tsxfrontend/src/components/SatelliteSpotlight/OrbitHighlight.tsxfrontend/src/components/SatelliteSpotlight/SpotlightInfoCard.tsxfrontend/src/components/SatelliteSpotlight/SpotlightManager.tsxfrontend/src/hooks/useSatelliteHover.tsfrontend/src/hooks/useSatelliteSelection.tsfrontend/src/hooks/useSpotlightEffect.tsfrontend/src/lib/satelliteVisuals.tsfrontend/src/styles/spotlight.cssfrontend/src/types/satellite.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
Summary
Implements the Interactive Satellite Spotlight Effect requested in #95. Hovering or clicking a satellite now visually highlights it — brighter color, larger size, a smooth ~220ms transition — while dimming nearby objects so it stands out. The active satellite's orbit path is drawn with a glowing polyline, and collision-risk satellites get a stronger red highlight plus a warning badge. Clicking locks the spotlight (cleared by clicking empty space or Escape), double-clicking flies the camera to the target, and a new info card shows name, NORAD ID, orbit type, altitude, and health/risk status while selected. Arrow-key navigation, Enter/Space to select, and a visible focus ring on the globe container are included for keyboard/accessibility support, and all transitions respect
prefers-reduced-motion.The implementation follows the folder structure suggested in the issue (
components/SatelliteSpotlight/,hooks/,styles/spotlight.css) and is designed to be reusable for other object types later — swapping what populates the entity/catalog maps is enough to reuse the same spotlight system elsewhere.Highlight/dim state is diffed against the previous hover/selection, so a hover change only ever touches the previously-active and newly-active entities rather than iterating the whole dataset, keeping it performant with large catalogs.
Related Issue
Fixes #95
Type of Change
Testing Performed
tsc -bshows no new type errors compared to the unmodified baseline (31 pre-existing errors in unrelated files, unchanged). ESLint is clean on all new/modified files aside from two pre-existingsetState-in-effect patterns that already exist elsewhere in the codebase. Full manual click-through against live satellite data is still pending in my environment due to an unrelated local backend/DB setup issue — will update with screenshots once verified, or happy to have a maintainer test the branch directly in the meantime.Breaking Changes
None.
EarthTwin.tsx's existing hover/click behavior is replaced by the new spotlight system but the external interface (props, store usage) is unchanged.Checklist
CodeAnt-AI Description
Add interactive satellite spotlighting and keyboard navigation
What Changed
Impact
✅ Clearer satellite identification✅ Faster camera focus on tracked objects✅ Keyboard-accessible globe navigation✅ More visible conjunction risks💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit
Greptile Summary
Adds an interactive Cesium satellite spotlight system.
Confidence Score: 3/5
The PR is not yet safe to merge because bookmark workflows remain unreachable and shadowed satellites remain visually indistinguishable from illuminated ones.
EarthTwin still omits all bookmark integration and shared-link restoration, while entity creation and spotlight baseline restoration continue to apply fixed opacity without evaluating satellite illumination.
Files Needing Attention: frontend/src/components/EarthTwin.tsx, frontend/src/components/SatelliteSpotlight/GlowEffect.tsx
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart LR Input[Mouse or keyboard input] --> Manager[SpotlightManager] Manager --> Selection[Hover and selection hooks] Selection --> Visuals[Spotlight visual state] Visuals --> Entities[Cesium entities] Visuals --> Orbit[Orbit highlight] Selection --> Card[Satellite info card]Reviews (3): Last reviewed commit: "Merge branch 'main' into Interactive-Sat..." | Re-trigger Greptile