Enhance HRIStudio with immersive experiment designer and comprehensive documentation updates

- Introduced a new immersive experiment designer using React Flow, providing a professional-grade visual flow editor for creating experiments.
- Added detailed documentation for the flow designer connections and ordering system, emphasizing its advantages and implementation details.
- Updated existing documentation to reflect the latest features and improvements, including a streamlined README and quick reference guide.
- Consolidated participant type definitions into a new file for better organization and clarity.

Features:
- Enhanced user experience with a node-based interface for experiment design.
- Comprehensive documentation supporting new features and development practices.

Breaking Changes: None - existing functionality remains intact.
This commit is contained in:
2025-08-05 00:48:36 -04:00
parent 433c1c4517
commit b1684a0c69
44 changed files with 4654 additions and 5310 deletions

View File

@@ -252,14 +252,14 @@ export default async function StudyDetailPage({
>
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
<span className="text-sm font-medium text-blue-600">
{(member.user.name || member.user.email)
{(member.user.name ?? member.user.email)
.charAt(0)
.toUpperCase()}
</span>
</div>
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-slate-900">
{member.user.name || member.user.email}
{member.user.name ?? member.user.email}
</p>
<p className="text-xs text-slate-500 capitalize">
{member.role}

View File

@@ -2,13 +2,13 @@
import { useParams } from "next/navigation";
import { Suspense, useEffect } from "react";
import { ManagementPageLayout } from "~/components/ui/page-layout";
import { ParticipantsTable } from "~/components/participants/ParticipantsTable";
import { ManagementPageLayout } from "~/components/ui/page-layout";
import { useActiveStudy } from "~/hooks/useActiveStudy";
export default function StudyParticipantsPage() {
const params = useParams();
const studyId = params.id as string;
const studyId = typeof params.id === "string" ? params.id : "";
const { setActiveStudy, activeStudy } = useActiveStudy();
// Set the active study if it doesn't match the current route
@@ -25,7 +25,7 @@ export default function StudyParticipantsPage() {
breadcrumb={[
{ label: "Dashboard", href: "/dashboard" },
{ label: "Studies", href: "/studies" },
{ label: activeStudy?.title || "Study", href: `/studies/${studyId}` },
{ label: activeStudy?.title ?? "Study", href: `/studies/${studyId}` },
{ label: "Participants" },
]}
createButton={{

View File

@@ -2,13 +2,13 @@
import { useParams } from "next/navigation";
import { Suspense, useEffect } from "react";
import { ManagementPageLayout } from "~/components/ui/page-layout";
import { TrialsTable } from "~/components/trials/TrialsTable";
import { ManagementPageLayout } from "~/components/ui/page-layout";
import { useActiveStudy } from "~/hooks/useActiveStudy";
export default function StudyTrialsPage() {
const params = useParams();
const studyId = params.id as string;
const studyId = typeof params.id === "string" ? params.id : "";
const { setActiveStudy, activeStudy } = useActiveStudy();
// Set the active study if it doesn't match the current route
@@ -25,7 +25,7 @@ export default function StudyTrialsPage() {
breadcrumb={[
{ label: "Dashboard", href: "/dashboard" },
{ label: "Studies", href: "/studies" },
{ label: activeStudy?.title || "Study", href: `/studies/${studyId}` },
{ label: activeStudy?.title ?? "Study", href: `/studies/${studyId}` },
{ label: "Trials" },
]}
createButton={{