frontend/src/rlm-eval/components/Panel.tsx

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"
          >
            &#8592;
          </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>
  );
}