Spaces:
Sleeping
Sleeping
File size: 2,101 Bytes
e067c2d 47bba68 e067c2d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from 'react';
import { useGridStore } from '../../store/gridStore';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Activity, Clock, HardDrive, Route } from 'lucide-react';
export const MetricsPanel: React.FC = () => {
const { searchResult, planResult } = useGridStore();
const result = searchResult || planResult;
if (!result) {
return null;
}
const metrics = [
{
label: 'Cost',
value: 'cost' in result ? result.cost : result.totalCost,
icon: Route,
},
{
label: 'Nodes',
value: 'nodesExpanded' in result ? result.nodesExpanded : result.totalNodesExpanded,
icon: Activity,
},
{
label: 'Runtime',
value: `${result.runtimeMs.toFixed(1)}ms`,
icon: Clock,
},
{
label: 'Memory',
value: `${result.memoryKb.toFixed(2)}KB`,
icon: HardDrive,
},
];
return (
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2 text-zinc-400 font-medium">
<Activity className="w-4 h-4" />
Results
</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-2">
{metrics.map((metric) => (
<div key={metric.label} className="bg-zinc-800 rounded p-2">
<div className="flex items-center gap-1.5 text-xs text-zinc-600 mb-0.5">
<metric.icon className="w-3 h-3" />
<span>{metric.label}</span>
</div>
<p className="text-sm font-mono text-zinc-300">
{metric.value}
</p>
</div>
))}
</div>
{searchResult?.plan && (
<div className="mt-3">
<div className="text-xs text-zinc-600 mb-1">Path</div>
<div className="bg-zinc-800 rounded p-2 text-xs font-mono text-zinc-400 overflow-x-auto">
{searchResult.plan || 'No path found'}
</div>
</div>
)}
</CardContent>
</Card>
);
};
export default MetricsPanel;
|