feat: add dedicated Space Weather dashboard#120
Conversation
🤖 CodeAnt AI — Review Status
Updated in place by CodeAnt AI · last 5 reviews |
📝 WalkthroughWalkthroughAdds a static Space Weather dashboard with metric cards, solar activity, CME, and satellite impact sections. Registers it at ChangesSpace Weather Dashboard
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant MainLayout
participant App
participant SpaceWeather
participant MetricCard
User->>MainLayout: Selects Space Weather
MainLayout->>App: Navigates to /dashboard/space-weather
App->>SpaceWeather: Renders dashboard
SpaceWeather->>MetricCard: Supplies metric properties
MetricCard-->>SpaceWeather: Renders metric card
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
| const metrics = [ | ||
| { | ||
| title: "KP Index", | ||
| value: "5.2", | ||
| status: "Moderate", | ||
| footer: "+0.4 from last hour", |
There was a problem hiding this comment.
Static Values Presented As Live
Every visit displays the same KP index and other fixed conditions even though the page calls itself live and the existing useWeatherStatus() hook provides current data. Users therefore receive stale operational information without any loading or failure signal when conditions change or the weather service is unavailable.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/pages/SpaceWeather.tsx
Line: 2-7
Comment:
**Static Values Presented As Live**
Every visit displays the same KP index and other fixed conditions even though the page calls itself live and the existing `useWeatherStatus()` hook provides current data. Users therefore receive stale operational information without any loading or failure signal when conditions change or the weather service is unavailable.
How can I resolve this? If you propose a fix, please make it concise.| <span className="mt-4 inline-block rounded-full bg-green-500/15 px-3 py-1 text-xs font-semibold text-green-400"> | ||
| {status} | ||
| </span> |
There was a problem hiding this comment.
The badge is always green, so Moderate and Active conditions look the same as nominal or safe states. A user scanning the dashboard can therefore interpret an active geomagnetic storm as healthy; the color must vary with the metric severity.
Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/components/space-weather/MetricCard.tsx
Line: 30-32
Comment:
**Warnings Render As Safe**
The badge is always green, so `Moderate` and `Active` conditions look the same as nominal or safe states. A user scanning the dashboard can therefore interpret an active geomagnetic storm as healthy; the color must vary with the metric severity.
How can I resolve this? If you propose a fix, please make it concise.There was a problem hiding this comment.
Pull request overview
Adds a new Space Weather dashboard route and UI so users can access a dedicated view for space-weather-related metrics directly from the main dashboard navigation.
Changes:
- Introduced a new
/dashboard/space-weatherpage with metric cards and multiple themed sections (Solar Activity, CMEs, Satellite Impact). - Added a Space Weather sidebar navigation item in the main dashboard layout.
- Registered the new route in the app router.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/pages/SpaceWeather.tsx | New Space Weather dashboard page UI and metric/section layout. |
| frontend/src/components/space-weather/MetricCard.tsx | New reusable metric card component for the Space Weather page. |
| frontend/src/components/layouts/MainLayout.tsx | Adds Space Weather to the sidebar navigation. |
| frontend/src/App.tsx | Adds the Space Weather route under /dashboard. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const SpaceWeather = () => { | ||
| return ( | ||
| <div className="p-6 space-y-8"> |
| <h1 className="text-4xl font-bold text-white"> | ||
| Live Space Weather Dashboard | ||
| </h1> | ||
|
|
||
| <p className="mt-2 text-gray-400 max-w-3xl"> | ||
| Monitor real-time solar activity and its impact on satellites, | ||
| communication systems, and Earth's space environment. | ||
| </p> |
| icon: "🌍", | ||
| }, | ||
| { | ||
| title: "Solar Wind", |
| <Route path="space-traffic" element={<SpaceTraffic />} /> | ||
| <Route path="space-weather" element={<SpaceWeather />} /> | ||
| <Route path="satellites" element={<Satellites />} /> |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/space-weather/MetricCard.tsx`:
- Around line 30-32: Update the status pill in MetricCard to use status-specific
styling instead of always applying the green classes. Add or reuse a
status-to-severity mapping so statuses such as Moderate and Active render with
appropriate visual states while preserving the displayed status text.
In `@frontend/src/pages/SpaceWeather.tsx`:
- Around line 11-12: Update the solar-wind metric configuration and MetricCard
usage to pass the numeric value as “520” and provide “km/s” through a separate
optional unit prop. Ensure MetricCard renders the unit on its own smaller line
while preserving existing cards that do not specify a unit.
- Around line 2-38: Update the SpaceWeather page’s metrics and dashboard
labeling so it no longer claims live or real-time data while values remain
hardcoded: label the experience as static/demo data and remove or revise
live-data copy. Alternatively, replace the hardcoded metrics array with
telemetry-backed data including freshness, loading, and error states.
🪄 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: 85fc468b-568e-4aef-97f4-f90bbc710499
📒 Files selected for processing (4)
frontend/src/App.tsxfrontend/src/components/layouts/MainLayout.tsxfrontend/src/components/space-weather/MetricCard.tsxfrontend/src/pages/SpaceWeather.tsx
| <span className="mt-4 inline-block rounded-full bg-green-500/15 px-3 py-1 text-xs font-semibold text-green-400"> | ||
| {status} | ||
| </span> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Render status-specific colors.
The pill is always styled as green, so statuses such as Moderate and Active appear successful/safe. Add a status-to-style mapping or pass an explicit severity variant so the visual state matches the status text.
🤖 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/space-weather/MetricCard.tsx` around lines 30 - 32,
Update the status pill in MetricCard to use status-specific styling instead of
always applying the green classes. Add or reuse a status-to-severity mapping so
statuses such as Moderate and Active render with appropriate visual states while
preserving the displayed status text.
| const metrics = [ | ||
| { | ||
| title: "KP Index", | ||
| value: "5.2", | ||
| status: "Moderate", | ||
| footer: "+0.4 from last hour", | ||
| icon: "🌍", | ||
| }, | ||
| { | ||
| title: "Solar Wind", | ||
| value: "520 km/s", | ||
| status: "Normal", | ||
| footer: "Updated 2 min ago", | ||
| icon: "💨", | ||
| }, | ||
| { | ||
| title: "Geomagnetic Storm", | ||
| value: "G2", | ||
| status: "Active", | ||
| footer: "NOAA Scale", | ||
| icon: "🛰️", | ||
| }, | ||
| { | ||
| title: "Radiation Alert", | ||
| value: "Low", | ||
| status: "Safe", | ||
| footer: "Operational", | ||
| icon: "☢️", | ||
| }, | ||
| { | ||
| title: "Solar Flares", | ||
| value: "M1.2", | ||
| status: "Moderate", | ||
| footer: "Last detected 5 min ago", | ||
| icon: "☀️", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== File list ==\n'
git ls-files 'frontend/src/pages/SpaceWeather.tsx' 'frontend/src/components/*' | sed -n '1,120p'
printf '\n== Search live/real-time copy and data fetching in SpaceWeather page ==\n'
rg -n -A3 -B3 -i 'live|real-?time|refresh|fetch\(|axios|useEffect|setInterval|Updated|minutes?|hours?|telemetry|NOAA|space weather' frontend/src/pages/SpaceWeather.tsx frontend/src/components 2>/dev/null || true
printf '\n== Outline SpaceWeather.tsx ==\n'
ast-grep outline frontend/src/pages/SpaceWeather.tsx --view expanded 2>/dev/null || true
printf '\n== Read SpaceWeather.tsx ==\n'
cat -n frontend/src/pages/SpaceWeather.tsx | sed -n '1,220p'Repository: 7-Blocks/Kepler
Length of output: 28474
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "START"
sed -n '1,220p' frontend/src/pages/SpaceWeather.tsx
echo "END"Repository: 7-Blocks/Kepler
Length of output: 4712
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== Outline MetricCard ==\n'
ast-grep outline frontend/src/components/space-weather/MetricCard.tsx --view expanded 2>/dev/null || true
printf '\n== Read MetricCard ==\n'
cat -n frontend/src/components/space-weather/MetricCard.tsx | sed -n '1,220p'Repository: 7-Blocks/Kepler
Length of output: 1541
Remove the live-data claim or wire in telemetry.
SpaceWeather.tsx is still driven by hardcoded metrics and status text, so the “Live Space Weather Dashboard” / “real-time” copy is misleading. Either connect it to a live source with freshness/loading/error handling, or label it as static/demo data.
🤖 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/pages/SpaceWeather.tsx` around lines 2 - 38, Update the
SpaceWeather page’s metrics and dashboard labeling so it no longer claims live
or real-time data while values remain hardcoded: label the experience as
static/demo data and remove or revise live-data copy. Alternatively, replace the
hardcoded metrics array with telemetry-backed data including freshness, loading,
and error states.
| title: "Solar Wind", | ||
| value: "520 km/s", |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the solar-wind unit separate from the numeric value.
MetricCard renders value as one large heading, so "520 km/s" makes the unit as large as the number and does not match the required 520 plus a smaller km/s line. Add an optional unit prop instead of embedding it in value.
🤖 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/pages/SpaceWeather.tsx` around lines 11 - 12, Update the
solar-wind metric configuration and MetricCard usage to pass the numeric value
as “520” and provide “km/s” through a separate optional unit prop. Ensure
MetricCard renders the unit on its own smaller line while preserving existing
cards that do not specify a unit.
| <Route path="/dashboard" element={<MainLayout />}> | ||
| <Route index element={<Dashboard />} /> | ||
| <Route path="space-traffic" element={<SpaceTraffic />} /> | ||
| <Route path="space-weather" element={<SpaceWeather />} /> |
There was a problem hiding this comment.
Suggestion: The new dashboard route is only reachable under /dashboard/space-weather, but every other dashboard module also keeps a legacy top-level redirect. Without adding the matching /space-weather redirect, users following the existing URL pattern will hit the 404 page for this new module. [api mismatch]
Severity Level: Major ⚠️
- ❌ Direct /space-weather URL returns 404 not dashboard.
- ⚠️ Legacy bookmarks to /space-weather break unexpectedly.
- ⚠️ Route behavior inconsistent with other dashboard modules.Steps of Reproduction ✅
1. Start the frontend app so `App` from `frontend/src/App.tsx:21-66` is mounted by
`frontend/src/main.tsx:1` (per provided code graph).
2. Observe that the main dashboard routes are nested under `/dashboard` in
`frontend/src/App.tsx:40-49`, including `space-traffic`, `satellites`, `debris`,
`collision-center`, `ai-agents`, `mission-planner`, and `settings`.
3. Note the legacy top-level redirects defined at `frontend/src/App.tsx:52-59`, where
`/space-traffic`, `/satellites`, `/debris`, `/collision-center`, `/ai-agents`,
`/mission-planner`, and `/settings` all `Navigate` to their `/dashboard/...` counterparts.
4. Navigate in a browser to `/space-weather`: there is no matching top-level `<Route
path="/space-weather" ...>` (only the nested `<Route path="space-weather" ...>` at
`frontend/src/App.tsx:43`), so React Router falls through to the catch-all `*` route at
`frontend/src/App.tsx:61-62` and renders `NotFound` instead of redirecting to
`/dashboard/space-weather` as users would expect from the established legacy pattern.(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/App.tsx
**Line:** 43:43
**Comment:**
*Api Mismatch: The new dashboard route is only reachable under `/dashboard/space-weather`, but every other dashboard module also keeps a legacy top-level redirect. Without adding the matching `/space-weather` redirect, users following the existing URL pattern will hit the 404 page for this new module.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| <span className="mt-4 inline-block rounded-full bg-green-500/15 px-3 py-1 text-xs font-semibold text-green-400"> | ||
| {status} | ||
| </span> |
There was a problem hiding this comment.
Suggestion: The status badge color is hardcoded to green for all states, so warning/active values are rendered as safe and can mislead operators; make the badge styling conditional on severity/status instead of fixed success colors. [incorrect condition logic]
Severity Level: Major ⚠️
- ⚠️ All metric statuses appear healthy regardless of severity.
- ⚠️ Operators may misjudge geomagnetic storm seriousness.
- ⚠️ UI lacks visual distinction for warning or alert states.Steps of Reproduction ✅
1. In `frontend/src/pages/SpaceWeather.tsx:2-38`, note the `metrics` array defines varied
`status` values such as `"Moderate"`, `"Normal"`, `"Active"`, and `"Safe"`, representing
different severities of space weather conditions.
2. Observe that `SpaceWeather` renders these metrics via `metrics.map` at
`frontend/src/pages/SpaceWeather.tsx:56-66`, passing the `status` field directly into the
`MetricCard` component as the `status` prop.
3. Open `frontend/src/components/space-weather/MetricCard.tsx:1-41` and see that the
`status` text is rendered inside a `<span>` at lines `30-32` with hardcoded Tailwind
classes `bg-green-500/15` and `text-green-400`, which are success/healthy colors,
regardless of the `status` value provided.
4. Run the app, navigate to `/dashboard/space-weather` (route registered at
`frontend/src/App.tsx:40-44`), and observe that all status badges (including potentially
concerning values like `"Active"` storms) are displayed with the same green "healthy"
styling, demonstrating there is no conditional logic to distinguish warning or critical
states visually.(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/space-weather/MetricCard.tsx
**Line:** 30:32
**Comment:**
*Incorrect Condition Logic: The status badge color is hardcoded to green for all states, so warning/active values are rendered as safe and can mislead operators; make the badge styling conditional on severity/status instead of fixed success colors.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| const metrics = [ | ||
| { | ||
| title: "KP Index", | ||
| value: "5.2", | ||
| status: "Moderate", | ||
| footer: "+0.4 from last hour", | ||
| icon: "🌍", | ||
| }, | ||
| { | ||
| title: "Solar Wind", | ||
| value: "520 km/s", | ||
| status: "Normal", | ||
| footer: "Updated 2 min ago", | ||
| icon: "💨", | ||
| }, | ||
| { | ||
| title: "Geomagnetic Storm", | ||
| value: "G2", | ||
| status: "Active", | ||
| footer: "NOAA Scale", | ||
| icon: "🛰️", | ||
| }, | ||
| { | ||
| title: "Radiation Alert", | ||
| value: "Low", | ||
| status: "Safe", | ||
| footer: "Operational", | ||
| icon: "☢️", | ||
| }, | ||
| { | ||
| title: "Solar Flares", | ||
| value: "M1.2", | ||
| status: "Moderate", | ||
| footer: "Last detected 5 min ago", | ||
| icon: "☀️", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
Suggestion: This page is presented as “live” and “real-time” but the metric values are hardcoded constants, so the dashboard never updates and quickly becomes stale; wire these values to live data or periodic refresh logic. [incomplete implementation]
Severity Level: Major ⚠️
- ⚠️ Live space weather page shows permanently static values.
- ⚠️ Users may trust outdated KP index readings.
- ⚠️ Real-time monitoring expectations unmet for operators.Steps of Reproduction ✅
1. Open `frontend/src/pages/SpaceWeather.tsx:45-52` and observe the copy: the H1 is `"Live
Space Weather Dashboard"` and the paragraph promises to "Monitor real-time solar
activity", implying live, updating telemetry.
2. Inspect the `metrics` constant at `frontend/src/pages/SpaceWeather.tsx:2-38`, which
contains hardcoded values such as `"KP Index" = "5.2"`, `"Solar Wind" = "520 km/s"`, and
footers like `"Updated 2 min ago"` and `"Last detected 5 min ago"`, all defined as static
string literals.
3. Notice that the `SpaceWeather` component uses `metrics.map` at
`frontend/src/pages/SpaceWeather.tsx:56-66` to render `MetricCard`s and does not define
any React state, data fetching hooks, or timers—there are no calls to APIs, websockets, or
interval-based update logic anywhere in this file.
4. Run the app and navigate to `/dashboard/space-weather` (route registered at
`frontend/src/App.tsx:40-44`); observe that the metric values and their "Updated X min
ago" labels never change over time or between sessions unless the code itself is modified
and redeployed, confirming that a page marketed as “live” and “real-time” is currently
backed by static, non-refreshing data.(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/pages/SpaceWeather.tsx
**Line:** 2:38
**Comment:**
*Incomplete Implementation: This page is presented as “live” and “real-time” but the metric values are hardcoded constants, so the dashboard never updates and quickly becomes stale; wire these values to live data or periodic refresh logic.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fixThere was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (2)
frontend/src/pages/SpaceWeather.tsx:7
- The page is labeled as “Live Space Weather Dashboard”, but the top-level metrics are hard-coded strings (KP index, solar wind, storm level, etc.). The codebase already exposes live space-weather data via
useWeatherStatus()/api.getWeatherStatus()(e.g.,WeatherStatus.kp_index,overall_severity, event counts). This should be wired up so the dashboard reflects current conditions and shows loading/error states instead of static “Updated … ago” text.
const metrics = [
{
title: "KP Index",
value: "5.2",
status: "Moderate",
footer: "+0.4 from last hour",
frontend/src/App.tsx:94
- A legacy redirect is added for every other dashboard subpage (e.g.
/space-traffic->/dashboard/space-traffic), but this new page does not add the analogous/space-weatherredirect. For consistency (and to avoid a 404 if users navigate directly), add a legacy redirect route for Space Weather as well.
<Route path="space-traffic" element={<SpaceTraffic />} />
<Route path="space-weather" element={<SpaceWeather />} />
<Route path="satellites" element={<Satellites />} />
| return ( | ||
| <div className="min-h-[260px] rounded-xl border border-cyan-500/20 bg-slate-900 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-cyan-400 hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]"> <div className="flex items-center justify-between"> | ||
| <p className="text-sm uppercase tracking-wider text-gray-400"> | ||
| {title} | ||
| </p> | ||
|
|
||
| <span className="text-3xl"> | ||
| {icon} | ||
| </span> | ||
| </div> | ||
| <h2 className="mt-5 text-5xl font-extrabold tracking-tight text-cyan-400"> | ||
| {value} | ||
| </h2> | ||
|
|
||
| <span className="mt-4 inline-block rounded-full bg-green-500/15 px-3 py-1 text-xs font-semibold text-green-400"> | ||
| {status} | ||
| </span> | ||
|
|
||
| <p className="mt-5 text-sm text-gray-500"> | ||
| {footer} | ||
| </p> | ||
| </div> | ||
| ); |
| <Route path="/dashboard" element={<MainLayout />}> | ||
| <Route index element={<Dashboard />} /> | ||
| <Route path="space-traffic" element={<SpaceTraffic />} /> | ||
| <Route path="space-weather" element={<SpaceWeather />} /> |
|
Thank you for the review and for merging my PR! I really appreciate it. Looking forward to contributing more. 😊 |
User description
Description
This PR adds a dedicated Space Weather Dashboard to visualize key space weather conditions.
Changes
/dashboard/space-weatherpage.Related Issue
Fixes #111
Checklist
Screenshots / Screen Recordings
Breaking Changes
None.
ECSoC26 Submission
ECSoC26-L1– BeginnerECSoC26-L2– IntermediateECSoC26-L3– AdvancedCodeAnt-AI Description
Add a dedicated Space Weather dashboard
What Changed
Impact
✅ Faster access to space weather data✅ Easier monitoring of satellite and communication risk✅ Clearer dashboard navigation💡 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
This PR adds a dedicated Space Weather dashboard. The main changes are:
/dashboard/space-weatherroute and sidebar item.Confidence Score: 5/5
No additional blocking issue qualifies for this follow-up review.
Important Files Changed
Reviews (2): Last reviewed commit: "Merge branch 'main' into feature/space-w..." | Re-trigger Greptile