Skip to content

feat: simplify dashboard controls and remove redundant metrics #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krishkhinchi merged 2 commits into from
Aug 14, 2026
+13 −79
Merged

feat: simplify dashboard controls and remove redundant metrics #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
739c470
feat: simplify dashboard controls and remove redundant metrics
Thebinary-bard Aug 12, 2026
a9eed42
fix: address dashboard toolbar review feedback
Thebinary-bard Aug 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 10 additions & 55 deletions frontend/src/components/EarthTwin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { useSpotlightEffect } from '@/hooks/useSpotlightEffect';
import { useCinematicCamera } from '@/hooks/useCinematicCamera';
import { ProceduralSpaceBackground } from '@/components/ui/ProceduralSpaceBackground';
import { keplerToLatLonAlt } from '@/utils/orbitCalc';
import { useUIStore } from '@/store/uiStore';
import { logEvent } from '@/store/logbookStore';
import { useUIStore, useActiveSector, useLayerStore, logEvent } from '@/store';
import { MaterialIcon } from './MaterialIcon';
import { useNavigate } from 'react-router-dom';
Expand Down Expand Up @@ -155,8 +153,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
const [hoveredObject, setHoveredObject] = useState<CatalogObject | null>(null);
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
const [showLegend, setShowLegend] = useState(true);
const [showDensity, setShowDensity] = useState(false);
const [showRiskOverlay, setShowRiskOverlay] = useState(false);

const [showLayerManager, setShowLayerManager] = useState(false);
const [objectCounts, setObjectCounts] = useState({
navigation: 0, weather: 0, military: 0, debris: 0, rocketBodies: 0, other: 0,
Expand Down Expand Up @@ -976,42 +973,14 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
</div>

{/* Bottom Row */}
<div className="flex flex-col sm:flex-row gap-3 sm:gap-6 items-start sm:items-end justify-between animate-[slideUp_0.5s_ease-out]">
<div className="flex gap-4 md:gap-8 flex-wrap">
{!dataLoaded && !useFallback ? (
<div className="min-w-[250px] p-4 animate-pulse bg-surface-container/80 h-12" />
) : (
<>
<div className="space-y-0.5">
<p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Objects Tracked</p>
<p className="font-headline-lg text-primary text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(0,229,255,0.4)]">
{objectCounts.total.toLocaleString()}
</p>
</div>
<div className="space-y-0.5">
<p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Debris</p>
<p className="font-headline-lg text-status-warning text-xl md:text-3xl font-bold font-technical-data drop-shadow-[0_0_8px_rgba(255,170,0,0.4)]">
{objectCounts.debris.toLocaleString()}
</p>
</div>
<div className="space-y-0.5">
<p className="font-label-caps text-[9px] md:text-[10px] text-primary/70 uppercase">Collision Risks</p>
<p className={`font-headline-lg text-xl md:text-3xl font-bold font-technical-data ${objectCounts.collisions > 0 ? 'text-status-emergency animate-pulse drop-shadow-[0_0_8px_rgba(255,59,48,0.6)]' : 'text-status-success drop-shadow-[0_0_8px_rgba(0,255,136,0.4)]'}`}>
{objectCounts.collisions}
</p>
</div>
</>
)
}
</div>

{/* Controls */}
<div className="flex gap-1.5 md:gap-2 pointer-events-auto">
<div className="flex justify-end w-full animate-[slideUp_0.5s_ease-out]">
{/* Controls — compact mission-control toolbar */}
<div className="flex flex-wrap justify-end items-center gap-1 md:gap-1.5 pointer-events-auto bg-bg-deep-space/70 backdrop-blur-xl border border-border-panel/50 p-1.5 md:p-2 rounded-sm max-w-full">
<button
type="button"
onClick={isListening ? stopListening : startListening}
disabled={!isSupported}
className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui border ${isListening
className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui border ${isListening
Comment thread
coderabbitai[bot] marked this conversation as resolved.
? 'bg-status-emergency text-white border-status-emergency animate-pulse'
: 'border-primary-container text-primary-container hover:bg-primary-container/10'
}`}
Expand Down Expand Up @@ -1049,7 +1018,7 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
<button
type="button"
onClick={() => setIsBookmarkModalOpen(true)}
className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
className="px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
aria-label="Save the current globe view as a bookmark"
>
SAVE VIEW
Expand All @@ -1058,38 +1027,24 @@ export const EarthTwin = forwardRef<EarthTwinHandle>((_props, ref) => {
<button
type="button"
onClick={() => setIsBookmarkSidebarOpen(true)}
className="px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
className="px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border border-primary-container text-primary-container hover:bg-primary-container/10"
aria-label="Open saved globe bookmarks"
>
BOOKMARKS
</button>


<button
onClick={() => setShowLegend(v => !v)}
className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
aria-pressed={showLegend}
className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLegend ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
}`}
>
LEGEND
</button>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<button
onClick={() => setShowDensity(v => !v)}
className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showDensity ? 'bg-status-warning text-bg-deep-space border-status-warning' : 'border-status-warning/50 text-status-warning hover:bg-status-warning/10'
}`}
>
DENSITY
</button>
<button
onClick={() => setShowRiskOverlay(v => !v)}
className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showRiskOverlay ? 'bg-status-emergency text-white border-status-emergency' : 'border-status-emergency/50 text-status-emergency hover:bg-status-emergency/10'
}`}
>
RISK
</button>
<button
onClick={() => setShowLayerManager(v => !v)}
aria-pressed={showLayerManager}
className={`px-2.5 md:px-4 py-2 md:py-2.5 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLayerManager ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
className={`px-2.5 md:px-3.5 py-2 font-bold text-[10px] md:text-xs transition-ui active:scale-95 cursor-pointer border ${showLayerManager ? 'bg-primary-container text-bg-deep-space border-primary-container' : 'border-primary-container text-primary-container hover:bg-primary-container/10'
}`}
>
LAYERS
Expand Down
27 changes: 3 additions & 24 deletions frontend/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,34 +63,13 @@ export const Dashboard: React.FC = () => {

const kpis = s
? [
{
title: 'Tracked Satellites',
value: s.tracked_satellites.toLocaleString(),
icon: 'satellite_alt',
gradientFrom: '#00e5ff',
gradientTo: '#0088ff',
},
{
title: 'Debris Objects',
value: s.debris_objects > 0 ? s.debris_objects.toLocaleString() : '\u2014',
icon: 'delete_sweep',
gradientFrom: '#7c3aed',
gradientTo: '#a855f7',
},
{
title: 'Active Alerts',
value: s.active_alerts_count.toLocaleString(),
icon: 'dangerous',
gradientFrom: s.active_alerts_count > 0 ? '#FF3B30' : '#8892A6',
gradientTo: s.active_alerts_count > 0 ? '#FF3B30' : '#8892A6',
},
{
title: 'Pred. Collisions',
value: s.predicted_collisions_count.toLocaleString(),
icon: 'cognition',
gradientFrom: '#FF9500',
gradientTo: '#FF3B30',
},
{
title: 'Space Weather',
value: s.space_weather_index,
Expand Down Expand Up @@ -154,12 +133,12 @@ export const Dashboard: React.FC = () => {
</section>

{/* KPI Bento Grid with Magic Cards */}
<section className="p-3 md:p-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 md:gap-3">
<section className="p-3 md:p-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-2 md:gap-3">
{summary.isLoading
? Array(6).fill(0).map((_, i) => <KPISkeleton key={i} />)
? Array(3).fill(0).map((_, i) => <KPISkeleton key={i} />)
: summary.isError
? (
<div className="col-span-6 text-center text-status-emergency font-technical-data text-sm py-4">
<div className="col-span-full lg:col-span-3 text-center text-status-emergency font-technical-data text-sm py-4">
{'\u26A0'} Failed to connect to backend \u2014 please refresh or contact support if the issue persists.
</div>
)
Expand Down
Loading