mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-24 05:43:58 +00:00
814f595995
Major additions: - Complete Next.js studio application with 1600+ components - Docker support (Dockerfile.combined, docker-compose.yml) - GCP deployment documentation and benchmarks - SQL benchmark scripts for performance testing - Sentry integration for monitoring - Comprehensive test suite and mocks Studio features: - Dashboard and admin interfaces - Data visualization components - Authentication and user management - API integration with RuVector backend - Static data and public assets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
import { cn } from 'ui'
|
|
|
|
interface QueryCostsProps {
|
|
currentCost?: number
|
|
improvedCost?: number
|
|
improvement?: number
|
|
className?: string
|
|
}
|
|
|
|
export const QueryCosts = ({
|
|
currentCost,
|
|
improvedCost,
|
|
improvement,
|
|
className,
|
|
}: QueryCostsProps) => {
|
|
if (!currentCost) return null
|
|
|
|
return (
|
|
<div className={cn('flex flex-col gap-y-4', className)}>
|
|
<h3 className="text-sm">Query costs</h3>
|
|
<div className="flex flex-col gap-y-2 rounded bg-surface-100 px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-foreground-light">Total cost of query</p>
|
|
<div className="flex flex-col items-end gap-y-1">
|
|
<div className="flex items-center gap-x-4">
|
|
<p className="text-sm text-foreground-light">Currently:</p>
|
|
<p className="font-mono text-sm">
|
|
{typeof currentCost === 'number' && !isNaN(currentCost) && isFinite(currentCost)
|
|
? currentCost.toFixed(2)
|
|
: 'N/A'}
|
|
</p>
|
|
</div>
|
|
{improvedCost &&
|
|
typeof improvedCost === 'number' &&
|
|
!isNaN(improvedCost) &&
|
|
isFinite(improvedCost) && (
|
|
<div className="flex items-center gap-x-4">
|
|
<p className="text-sm text-foreground-light">With index:</p>
|
|
<div className="flex items-center gap-x-2">
|
|
<p className="font-mono text-sm">{improvedCost.toFixed(2)}</p>
|
|
{improvement &&
|
|
typeof improvement === 'number' &&
|
|
!isNaN(improvement) &&
|
|
isFinite(improvement) && (
|
|
<p className="text-sm text-brand">↓ {improvement.toFixed(1)}%</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button className="text-sm text-brand hover:text-brand-600 transition">View more</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|