57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Suspense, useEffect, useState } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { Binary, Dna } from "lucide-react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { AlleleCallTab } from "./components/AlleleCallTab";
|
|
import { CallSetTab } from "./components/CallSetTab";
|
|
|
|
function TabFallback() {
|
|
return <Skeleton className="h-96 w-full rounded-xl" />;
|
|
}
|
|
|
|
export default function CallSetPage() {
|
|
const searchParams = useSearchParams();
|
|
const [tab, setTab] = useState("callsets");
|
|
|
|
useEffect(() => {
|
|
const requested = searchParams.get("tab");
|
|
if (requested === "allele-calls") {
|
|
setTab("allele-calls");
|
|
}
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<Tabs value={tab} onValueChange={setTab} className="flex min-h-full flex-col gap-4">
|
|
<TabsList className="w-full justify-start overflow-x-auto rounded-lg border bg-white p-1 dark:border-slate-800 dark:bg-slate-950 sm:w-fit">
|
|
<TabsTrigger value="callsets" className="gap-2">
|
|
<Binary className="h-4 w-4" />
|
|
CallSet
|
|
</TabsTrigger>
|
|
<TabsTrigger value="allele-calls" className="gap-2">
|
|
<Dna className="h-4 w-4" />
|
|
allele_call
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{tab === "callsets" ? (
|
|
<TabsContent value="callsets" className="mt-0 min-h-0 flex-1">
|
|
<Suspense fallback={<TabFallback />}>
|
|
<CallSetTab />
|
|
</Suspense>
|
|
</TabsContent>
|
|
) : null}
|
|
|
|
{tab === "allele-calls" ? (
|
|
<TabsContent value="allele-calls" className="mt-0 min-h-0 flex-1">
|
|
<Suspense fallback={<TabFallback />}>
|
|
<AlleleCallTab />
|
|
</Suspense>
|
|
</TabsContent>
|
|
) : null}
|
|
</Tabs>
|
|
);
|
|
}
|