| 'use client' |
|
|
| import { useAppStore } from '@/store' |
| import { PADDING_MODES } from '@/lib/kernels' |
| import { Select, Card, CardContent, Slider, Button } from '@/components/ui' |
| import { cn } from '@/utils/helpers' |
| import { Settings, Layers, Grid } from 'lucide-react' |
|
|
| export function OverlayControls() { |
| const { settings, updateSettings, toggleOverlay, setPadding } = useAppStore() |
| const { showOverlay, padding } = settings |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <h3 className="font-medium flex items-center gap-2"> |
| <Settings className="h-4 w-4" /> |
| Visualization Overlays |
| </h3> |
| |
| <div className="grid grid-cols-2 gap-2"> |
| {Object.entries(showOverlay).map(([key, value]) => ( |
| <label key={key} className="flex items-center gap-2 cursor-pointer"> |
| <input |
| type="checkbox" |
| checked={value} |
| onChange={() => toggleOverlay(key as keyof typeof showOverlay)} |
| className="rounded border-gray-300" |
| /> |
| <span className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</span> |
| </label> |
| ))} |
| </div> |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| export function PaddingControls() { |
| const { settings, setPadding } = useAppStore() |
| const { padding } = settings |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <h3 className="font-medium flex items-center gap-2"> |
| <Grid className="h-4 w-4" /> |
| Padding Strategy |
| </h3> |
| |
| <Select |
| value={padding} |
| onChange={(e) => setPadding(e.target.value as typeof padding)} |
| options={PADDING_MODES.map((p) => ({ value: p.value, label: p.label }))} |
| placeholder="Select padding mode" |
| /> |
| |
| <div className="text-sm text-gray-500 dark:text-gray-400"> |
| {PADDING_MODES.find((p) => p.value === padding)?.description} |
| </div> |
| |
| {/* Padding visualization would go here */} |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| export function KernelInfoPanel() { |
| const { selectedKernel } = useAppStore() |
|
|
| if (!selectedKernel) { |
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 text-center text-gray-500"> |
| No kernel selected |
| </CardContent> |
| </Card> |
| ) |
| } |
|
|
| const { name, category, matrix, size, normalize, description, formula, reference } = selectedKernel |
|
|
| return ( |
| <Card className="w-full"> |
| <CardContent className="p-4 space-y-4"> |
| <div className="flex items-start justify-between gap-4"> |
| <div> |
| <h3 className="font-medium">{name}</h3> |
| <div className="flex items-center gap-2 mt-1"> |
| <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded dark:bg-blue-900/30 dark:text-blue-300"> |
| {category} |
| </span> |
| <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-800 rounded dark:bg-gray-800 dark:text-gray-300"> |
| {size}×{size} |
| </span> |
| {normalize && ( |
| <span className="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded dark:bg-green-900/30 dark:text-green-300"> |
| Normalized |
| </span> |
| )} |
| </div> |
| </div> |
| </div> |
| |
| <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p> |
| |
| {formula && ( |
| <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded font-mono text-sm"> |
| <span className="text-gray-500">Formula: </span> |
| <span>{formula}</span> |
| </div> |
| )} |
| |
| <div className="space-y-2"> |
| <h4 className="text-sm font-medium">Kernel Matrix</h4> |
| <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${size}, 1fr)` }}> |
| {matrix.map((row, i) => |
| row.map((val, j) => ( |
| <div |
| key={`${i}-${j}`} |
| className={cn( |
| 'p-2 text-center text-sm font-mono rounded', |
| val > 0 ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300' |
| )} |
| > |
| {val.toFixed(val === Math.round(val) ? 0 : 2)} |
| </div> |
| )) |
| )} |
| </div> |
| </div> |
| |
| {reference && ( |
| <a |
| href={reference} |
| target="_blank" |
| rel="noopener noreferrer" |
| className="text-sm text-blue-600 hover:underline flex items-center gap-1" |
| > |
| <Layers className="h-3 w-3" /> |
| Reference |
| </a> |
| )} |
| </CardContent> |
| </Card> |
| ) |
| } |
