mirror of
https://github.com/soconnor0919/hristudio.git
synced 2026-03-24 03:37:51 -04:00
Add ROS2 bridge
This commit is contained in:
346
src/app/(dashboard)/studies/[id]/trials/[trialId]/page.tsx
Normal file
346
src/app/(dashboard)/studies/[id]/trials/[trialId]/page.tsx
Normal file
@@ -0,0 +1,346 @@
|
||||
"use client";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Play, Zap, ArrowLeft, User, FlaskConical } from "lucide-react";
|
||||
import { PageHeader } from "~/components/ui/page-header";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
|
||||
import { useStudyContext } from "~/lib/study-context";
|
||||
import { useSelectedStudyDetails } from "~/hooks/useSelectedStudyDetails";
|
||||
import { api } from "~/trpc/react";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
|
||||
function TrialDetailContent() {
|
||||
const params = useParams();
|
||||
const studyId: string = typeof params.id === "string" ? params.id : "";
|
||||
const trialId: string =
|
||||
typeof params.trialId === "string" ? params.trialId : "";
|
||||
|
||||
const { setSelectedStudyId, selectedStudyId } = useStudyContext();
|
||||
const { study } = useSelectedStudyDetails();
|
||||
|
||||
// Get trial data
|
||||
const {
|
||||
data: trial,
|
||||
isLoading,
|
||||
error,
|
||||
} = api.trials.get.useQuery({ id: trialId }, { enabled: !!trialId });
|
||||
|
||||
// Set breadcrumbs
|
||||
useBreadcrumbsEffect([
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Studies", href: "/studies" },
|
||||
{ label: study?.name ?? "Study", href: `/studies/${studyId}` },
|
||||
{ label: "Trials", href: `/studies/${studyId}/trials` },
|
||||
{ label: trial?.participant.participantCode ?? "Trial" },
|
||||
]);
|
||||
|
||||
// Sync selected study (unified study-context)
|
||||
useEffect(() => {
|
||||
if (studyId && selectedStudyId !== studyId) {
|
||||
setSelectedStudyId(studyId);
|
||||
}
|
||||
}, [studyId, selectedStudyId, setSelectedStudyId]);
|
||||
|
||||
const getStatusBadgeVariant = (status: string) => {
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return "default";
|
||||
case "in_progress":
|
||||
return "secondary";
|
||||
case "scheduled":
|
||||
return "outline";
|
||||
case "failed":
|
||||
case "aborted":
|
||||
return "destructive";
|
||||
default:
|
||||
return "outline";
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-muted-foreground">Loading trial...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Trial Details"
|
||||
description="View trial information and execution data"
|
||||
icon={Play}
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<a href={`/studies/${studyId}/trials`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trials
|
||||
</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h3 className="text-destructive mb-2 text-lg font-semibold">
|
||||
Error Loading Trial
|
||||
</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{error.message || "Failed to load trial data"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!trial) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Trial Details"
|
||||
description="View trial information and execution data"
|
||||
icon={Play}
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<a href={`/studies/${studyId}/trials`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trials
|
||||
</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h3 className="mb-2 text-lg font-semibold">Trial Not Found</h3>
|
||||
<p className="text-muted-foreground">
|
||||
The requested trial could not be found.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={`Trial: ${trial.participant.participantCode}`}
|
||||
description={`${trial.experiment.name} - Session ${trial.sessionNumber}`}
|
||||
icon={Play}
|
||||
actions={
|
||||
<div className="flex gap-2">
|
||||
{trial.status === "scheduled" && (
|
||||
<Button>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Start Trial
|
||||
</Button>
|
||||
)}
|
||||
{(trial.status === "in_progress" ||
|
||||
trial.status === "scheduled") && (
|
||||
<Button asChild>
|
||||
<Link href={`/studies/${studyId}/trials/${trialId}/wizard`}>
|
||||
<Zap className="mr-2 h-4 w-4" />
|
||||
Wizard Interface
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/studies/${studyId}/trials`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trials
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
{/* Trial Overview */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
Trial Overview
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Basic information about this trial execution
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Status
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<Badge variant={getStatusBadgeVariant(trial.status)}>
|
||||
{trial.status.replace("_", " ")}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Session Number
|
||||
</label>
|
||||
<div className="mt-1 text-sm">{trial.sessionNumber}</div>
|
||||
</div>
|
||||
{trial.scheduledAt && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Scheduled
|
||||
</label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatDistanceToNow(new Date(trial.scheduledAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{trial.startedAt && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Started
|
||||
</label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatDistanceToNow(new Date(trial.startedAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{trial.completedAt && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Completed
|
||||
</label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatDistanceToNow(new Date(trial.completedAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{trial.duration && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Duration
|
||||
</label>
|
||||
<div className="mt-1 text-sm">
|
||||
{Math.round(trial.duration / 1000)}s
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{trial.notes && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Notes
|
||||
</label>
|
||||
<div className="text-muted-foreground mt-1 text-sm">
|
||||
{trial.notes}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="space-y-6">
|
||||
{/* Experiment Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<FlaskConical className="h-5 w-5" />
|
||||
Experiment
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Name
|
||||
</label>
|
||||
<div className="mt-1 text-sm">{trial.experiment.name}</div>
|
||||
</div>
|
||||
{trial.experiment.description && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Description
|
||||
</label>
|
||||
<div className="text-muted-foreground mt-1 text-sm">
|
||||
{trial.experiment.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Participant Info */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<User className="h-5 w-5" />
|
||||
Participant
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Code
|
||||
</label>
|
||||
<div className="mt-1 text-sm">
|
||||
{trial.participant.participantCode}
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
const demographics = trial.participant.demographics as Record<
|
||||
string,
|
||||
unknown
|
||||
> | null;
|
||||
return (
|
||||
demographics &&
|
||||
typeof demographics === "object" && (
|
||||
<div>
|
||||
<label className="text-muted-foreground text-sm font-medium">
|
||||
Demographics
|
||||
</label>
|
||||
<div className="text-muted-foreground mt-1 text-sm">
|
||||
{Object.keys(demographics).length} fields recorded
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})()}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TrialDetailPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-muted-foreground">Loading...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<TrialDetailContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Zap, ArrowLeft, Eye, User } from "lucide-react";
|
||||
import { PageHeader } from "~/components/ui/page-header";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
|
||||
import { useStudyContext } from "~/lib/study-context";
|
||||
import { useSelectedStudyDetails } from "~/hooks/useSelectedStudyDetails";
|
||||
import { WizardView } from "~/components/trials/views/WizardView";
|
||||
import { ObserverView } from "~/components/trials/views/ObserverView";
|
||||
import { ParticipantView } from "~/components/trials/views/ParticipantView";
|
||||
import { api } from "~/trpc/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
function WizardPageContent() {
|
||||
const params = useParams();
|
||||
const studyId: string = typeof params.id === "string" ? params.id : "";
|
||||
const trialId: string =
|
||||
typeof params.trialId === "string" ? params.trialId : "";
|
||||
|
||||
const { setSelectedStudyId, selectedStudyId } = useStudyContext();
|
||||
const { study } = useSelectedStudyDetails();
|
||||
const { data: session } = useSession();
|
||||
|
||||
// Get trial data
|
||||
const {
|
||||
data: trial,
|
||||
isLoading,
|
||||
error,
|
||||
} = api.trials.get.useQuery({ id: trialId }, { enabled: !!trialId });
|
||||
|
||||
// Set breadcrumbs
|
||||
useBreadcrumbsEffect([
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Studies", href: "/studies" },
|
||||
{ label: study?.name ?? "Study", href: `/studies/${studyId}` },
|
||||
{ label: "Trials", href: `/studies/${studyId}/trials` },
|
||||
{
|
||||
label: trial?.experiment.name ?? "Trial",
|
||||
href: `/studies/${studyId}/trials`,
|
||||
},
|
||||
{ label: "Wizard Interface" },
|
||||
]);
|
||||
|
||||
// Sync selected study (unified study-context)
|
||||
useEffect(() => {
|
||||
if (studyId && selectedStudyId !== studyId) {
|
||||
setSelectedStudyId(studyId);
|
||||
}
|
||||
}, [studyId, selectedStudyId, setSelectedStudyId]);
|
||||
|
||||
// Determine user role and view type
|
||||
const getUserRole = () => {
|
||||
if (!session?.user) return "observer";
|
||||
|
||||
// Check URL parameters for role override (for testing)
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const roleParam = urlParams.get("view");
|
||||
if (
|
||||
roleParam &&
|
||||
["wizard", "observer", "participant"].includes(roleParam)
|
||||
) {
|
||||
return roleParam;
|
||||
}
|
||||
|
||||
// Default role logic based on user
|
||||
const userRole = session.user.roles?.[0]?.role ?? "observer";
|
||||
if (userRole === "administrator" || userRole === "researcher") {
|
||||
return "wizard";
|
||||
}
|
||||
|
||||
return "observer";
|
||||
};
|
||||
|
||||
const currentRole = getUserRole();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-muted-foreground">Loading trial...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Wizard Interface"
|
||||
description="Trial execution interface for wizards"
|
||||
icon={Zap}
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<a href={`/studies/${studyId}/trials`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trials
|
||||
</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h3 className="text-destructive mb-2 text-lg font-semibold">
|
||||
Error Loading Trial
|
||||
</h3>
|
||||
<p className="text-muted-foreground">
|
||||
{error.message || "Failed to load trial data"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!trial) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="Wizard Interface"
|
||||
description="Trial execution interface for wizards"
|
||||
icon={Zap}
|
||||
actions={
|
||||
<Button asChild variant="outline">
|
||||
<a href={`/studies/${studyId}/trials`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trials
|
||||
</a>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h3 className="mb-2 text-lg font-semibold">Trial Not Found</h3>
|
||||
<p className="text-muted-foreground">
|
||||
The requested trial could not be found.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getViewTitle = (role: string) => {
|
||||
switch (role) {
|
||||
case "wizard":
|
||||
return `${trial.experiment.name} - Wizard Control`;
|
||||
case "observer":
|
||||
return `${trial.experiment.name} - Observer View`;
|
||||
case "participant":
|
||||
return `Research Session - ${trial.participant.participantCode}`;
|
||||
default:
|
||||
return `${trial.experiment.name} - Trial View`;
|
||||
}
|
||||
};
|
||||
|
||||
const getViewIcon = (role: string) => {
|
||||
switch (role) {
|
||||
case "wizard":
|
||||
return Zap;
|
||||
case "observer":
|
||||
return Eye;
|
||||
case "participant":
|
||||
return User;
|
||||
default:
|
||||
return Zap;
|
||||
}
|
||||
};
|
||||
|
||||
const renderView = () => {
|
||||
const trialData = {
|
||||
...trial,
|
||||
metadata: trial.metadata as Record<string, unknown> | null,
|
||||
participant: {
|
||||
...trial.participant,
|
||||
demographics: trial.participant.demographics as Record<
|
||||
string,
|
||||
unknown
|
||||
> | null,
|
||||
},
|
||||
};
|
||||
|
||||
switch (currentRole) {
|
||||
case "wizard":
|
||||
return <WizardView trial={trialData} />;
|
||||
case "observer":
|
||||
return <ObserverView trial={trialData} />;
|
||||
case "participant":
|
||||
return <ParticipantView trial={trialData} />;
|
||||
default:
|
||||
return <ObserverView trial={trialData} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<PageHeader
|
||||
title={getViewTitle(currentRole)}
|
||||
description={`Session ${trial.sessionNumber} • Participant ${trial.participant.participantCode}`}
|
||||
icon={getViewIcon(currentRole)}
|
||||
actions={
|
||||
currentRole !== "participant" ? (
|
||||
<Button asChild variant="outline">
|
||||
<Link href={`/studies/${studyId}/trials/${trialId}`}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to Trial
|
||||
</Link>
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="min-h-0 flex-1">{renderView()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TrialWizardPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="text-muted-foreground">Loading...</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<WizardPageContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user