Spaces:
Running
Running
| import { useState } from "react"; | |
| import AlgorithmControls, { DEFAULT_HYPERPARAMETERS } from "./AlgorithmControls"; | |
| import type { ComparisonEntry, ComparisonTrajectory, SettingsUi } from "./types"; | |
| export default function ComparePanel({ settings, entries, trajectories, onAdd, onRemove, onToggleVisibility, iteration, busy, ready, animating, onAction }: { | |
| settings: SettingsUi; | |
| entries: ComparisonEntry[]; | |
| trajectories: ComparisonTrajectory[]; | |
| onAdd: (settings: SettingsUi) => void; | |
| onRemove: (id: number) => void; | |
| onToggleVisibility: (id: number) => void; | |
| iteration: number; | |
| busy: boolean; | |
| ready: boolean; | |
| animating: boolean; | |
| onAction: (action: string) => void; | |
| }) { | |
| const [draft, setDraft] = useState(settings); | |
| const configured: SettingsUi = { algorithm: draft.algorithm, x0: draft.x0, y0: draft.y0, | |
| mode: settings.mode, functionExpr: settings.functionExpr, | |
| ...Object.fromEntries(Object.entries(DEFAULT_HYPERPARAMETERS[draft.algorithm]).map(([key, fallback]) => [key, draft[key as keyof SettingsUi] ?? fallback])) }; | |
| const valid = [configured.x0, ...(configured.mode === "Bivariate" ? [configured.y0] : []), | |
| ...Object.entries(configured).filter(([key]) => ["learningRate", "momentum", "beta", "beta1", "beta2", "epsilon"].includes(key)).map(([, value]) => value) | |
| ].every(value => value !== undefined && value.trim() !== "" && Number.isFinite(Number(value))); | |
| return <> | |
| <AlgorithmControls settings={configured} setSettings={setDraft} onRandomInitialPoint={() => setDraft({ ...configured, x0: (Math.random() * 2 - 1).toFixed(2), y0: (Math.random() * 2 - 1).toFixed(2) })} /> | |
| <button className="rounded border border-gray-300 bg-orange-200 px-3 py-1 disabled:opacity-50" disabled={!valid || !ready || busy || animating} onClick={() => onAdd(configured)}>Add</button> | |
| <div className="text-sm font-semibold">Selected algorithms</div> | |
| {entries.length === 0 && <p className="text-sm text-stone-500">Add algorithms to compare their trajectories on the same objective.</p>} | |
| <ul className="flex flex-col gap-2"> | |
| {entries.map((entry, index) => <li key={entry.id} className="rounded border border-stone-300 p-2 text-sm"> | |
| <div className="flex items-center gap-2"> | |
| <span className="h-3 w-3 rounded-full shrink-0" style={{ background: entry.color }} /> | |
| <span className="flex-1 font-semibold">{index + 1}. {entry.settings.algorithm}</span> | |
| <button | |
| aria-label={`${entry.visible ? "Hide" : "Show"} ${index + 1}. ${entry.settings.algorithm}`} | |
| aria-pressed={!entry.visible} | |
| onClick={() => onToggleVisibility(entry.id)} | |
| > | |
| {entry.visible ? "Hide" : "Show"} | |
| </button> | |
| <button aria-label={`Remove ${index + 1}. ${entry.settings.algorithm}`} onClick={() => onRemove(entry.id)}>Remove</button> | |
| </div> | |
| <div className="text-xs text-stone-600">{Object.entries(entry.settings).filter(([key]) => !["mode", "functionExpr", "algorithm"].includes(key) && (key !== "y0" || settings.mode === "Bivariate")).map(([key, value]) => `${key}: ${value}`).join(", ")}</div> | |
| {trajectories.find(item => item.id === entry.id)?.error && <p role="alert" className="text-red-700">Unable to compute this trajectory. Check its settings.</p>} | |
| </li>)} | |
| </ul> | |
| <div className="text-sm" role="status">Iteration {iteration}{busy ? " · Computing…" : ""}</div> | |
| <div className="flex flex-wrap gap-2"> | |
| {["Animate", "Previous", "Next", "Reset", "Pause"].map(action => <button key={action} | |
| className="rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm disabled:opacity-50" | |
| disabled={action === "Pause" ? !animating : !ready || !entries.length || busy || animating || ((action === "Previous" || action === "Reset") && iteration === 0)} | |
| onClick={() => onAction(action)}>{action}</button>)} | |
| </div> | |
| </>; | |
| } | |