File size: 2,593 Bytes
b630916 | 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 78 79 80 81 82 83 84 85 86 87 | import type { PanelNav, DatasetInfo, OverviewData, ExampleDetailData, RlmIterDetail } from "../types";
import Breadcrumb from "./Breadcrumb";
import OverviewLevel from "./OverviewLevel";
import ExampleDetailLevel from "./ExampleDetailLevel";
import DatasetSelector from "./DatasetSelector";
interface PanelProps {
nav: PanelNav;
dataset: DatasetInfo | undefined;
panelLabel?: string;
datasets?: DatasetInfo[];
onNavigate: (nav: PanelNav) => void;
onGoUp: () => void;
onSwitchDataset?: (id: string) => void;
fetchOverview: (dsId: string) => Promise<OverviewData>;
fetchExampleDetail: (dsId: string, exampleIdx: number) => Promise<ExampleDetailData>;
fetchIterDetail: (
dsId: string,
exampleIdx: number,
rlmIter: number
) => Promise<RlmIterDetail>;
}
export default function Panel({
nav,
dataset,
panelLabel,
datasets,
onNavigate,
onGoUp,
onSwitchDataset,
fetchOverview,
fetchExampleDetail,
fetchIterDetail,
}: PanelProps) {
return (
<div className="flex flex-col h-full border border-gray-700 rounded-lg bg-gray-900 overflow-hidden">
{/* Panel header */}
<div className="flex items-center gap-2 px-3 py-2 border-b border-gray-700 bg-gray-800">
{nav.level > 1 && (
<button
className="text-gray-400 hover:text-gray-200 text-sm"
onClick={onGoUp}
title="Go up"
>
←
</button>
)}
{panelLabel && (
<span className="text-xs bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded">
{panelLabel}
</span>
)}
<Breadcrumb nav={nav} dataset={dataset} onNavigate={onNavigate} />
{panelLabel === "B" && datasets && onSwitchDataset && (
<div className="ml-auto">
<DatasetSelector
datasets={datasets}
currentId={nav.datasetId}
onSelect={(id) => onSwitchDataset(id)}
/>
</div>
)}
</div>
{/* Panel content */}
<div className="flex-1 overflow-y-auto">
{nav.level === 1 && (
<OverviewLevel
datasetId={nav.datasetId}
fetchOverview={fetchOverview}
onDrillDown={onNavigate}
/>
)}
{nav.level === 2 && nav.exampleIdx !== undefined && (
<ExampleDetailLevel
datasetId={nav.datasetId}
exampleIdx={nav.exampleIdx}
fetchExampleDetail={fetchExampleDetail}
fetchIterDetail={fetchIterDetail}
/>
)}
</div>
</div>
);
}
|