Spaces:
Running
Running
File size: 2,693 Bytes
b03f016 c682eb7 bd51d10 b03f016 bd51d10 b03f016 c682eb7 bd51d10 b03f016 c682eb7 bd51d10 b03f016 | 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 76 77 | import { lazy, Suspense } from "react";
import { useHashRoute, navigateTo } from "../hashRouter";
const ModelApp = lazy(() => import("../model/ModelApp"));
const PlanRevisionsApp = lazy(() => import("../plan_revisions/PlanRevisionsApp"));
const TrajExtApp = lazy(() => import("../traj_ext/TrajExtApp"));
const SelectedToolsApp = lazy(() => import("../selected_tools/SelectedToolsApp"));
type TabId = "model" | "plan-revisions" | "traj-ext" | "selected-tools";
const TABS: { id: TabId; label: string; activeClass: string }[] = [
{ id: "model", label: "Model Trace", activeClass: "border-blue-500 text-blue-400" },
{ id: "plan-revisions", label: "Plan Revisions", activeClass: "border-amber-500 text-amber-400" },
{ id: "traj-ext", label: "Traj Ext", activeClass: "border-emerald-500 text-emerald-400" },
{ id: "selected-tools", label: "Selected Tools", activeClass: "border-amber-400 text-amber-300" },
];
const VALID_TABS = new Set<string>(TABS.map(t => t.id));
export default function VisualizerApp() {
const route = useHashRoute();
const activeTab: TabId = VALID_TABS.has(route.tab) ? (route.tab as TabId) : "model";
return (
<div className="h-full flex flex-col">
{/* Visualizer tab bar */}
<div className="flex items-center border-b border-gray-800 bg-gray-900/50 px-2 shrink-0">
{TABS.map((tab) => (
<button
key={tab.id}
onClick={() => navigateTo({ page: "viz", tab: tab.id })}
className={`px-5 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === tab.id
? tab.activeClass
: "border-transparent text-gray-500 hover:text-gray-300"
}`}
>
{tab.label}
</button>
))}
</div>
{/* Active visualizer */}
<div className="flex-1 overflow-hidden">
<Suspense
fallback={
<div className="flex items-center justify-center h-full text-gray-500">
Loading...
</div>
}
>
{activeTab === "model" && (
<div className="theme-model h-full">
<ModelApp />
</div>
)}
{activeTab === "plan-revisions" && (
<div className="h-full">
<PlanRevisionsApp />
</div>
)}
{activeTab === "traj-ext" && (
<div className="h-full">
<TrajExtApp />
</div>
)}
{activeTab === "selected-tools" && (
<div className="h-full">
<SelectedToolsApp />
</div>
)}
</Suspense>
</div>
</div>
);
}
|