ZHAW/BA_TTS_Annotation_Plattform
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add onboarding and calibration features to experiments, including UI updates and database schema changes

Browse Source
This commit is contained in:
averel10
2026-04-02 08:21:15 +02:00
parent 4c40e6a24d
commit 7490b59731
11 changed files with 1088 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/actions/calibration-scoring.ts
View File

@@ -2,6 +2,7 @@
import db from '@/lib/db';
import { experiment_calibration } from '@/lib/model/experiment_calibration';
import { experiment } from '@/lib/model/experiment';
import { participant } from '@/lib/model/participant';
import { eq, and } from 'drizzle-orm';
import { auth } from '@/lib/auth';
@@ -88,6 +89,22 @@ export async function isCalibrationDone(experimentId: number): Promise<boolean>
const session = await auth.api.getSession({ headers: await headers() });
if (!session) throw new Error('Nicht angemeldet');
// Check if calibration is enabled for this experiment
const exp = await db
.select()
.from(experiment)
.where(eq(experiment.id, experimentId))
.limit(1);
if (exp.length === 0) {
throw new Error('Experiment not found');
}
// If calibration is not enabled, consider it done
if (!exp[0].calibrationEnabled) {
return true;
}
// Get calibration items for this experiment
const calibrationItems = await db
.select()

16
src/app/actions/experiment.ts
View File

@@ -14,13 +14,17 @@ export async function createExperiment({
description,
datasetId,
annotationTool,
published = false
published = false,
onboardingEnabled = false,
calibrationEnabled = false
}: {
name: string;
description?: string;
datasetId: number;
annotationTool?: string;
published?: boolean;
onboardingEnabled?: boolean;
calibrationEnabled?: boolean;
}) {
const result = await requireAdmin();
if (!result.authenticated || !result.admin) {
@@ -38,6 +42,8 @@ export async function createExperiment({
datasetId,
annotationTool: annotationTool?.trim(),
published,
onboardingEnabled,
calibrationEnabled,
});
revalidatePath('/admin/experiments');
return result;
@@ -49,7 +55,7 @@ export async function createExperiment({
export async function updateExperiment(
id: number,
updates: { name?: string; description?: string, annotationTool?: string, published?: boolean }
updates: { name?: string; description?: string, annotationTool?: string, published?: boolean, onboardingEnabled?: boolean, calibrationEnabled?: boolean }
) {
const result = await requireAdmin();
if (!result.authenticated || !result.admin) {
@@ -74,6 +80,12 @@ export async function updateExperiment(
if (updates.published !== undefined) {
updateData.published = updates.published;
}
if (updates.onboardingEnabled !== undefined) {
updateData.onboardingEnabled = updates.onboardingEnabled;
}
if (updates.calibrationEnabled !== undefined) {
updateData.calibrationEnabled = updates.calibrationEnabled;
}
updateData.updatedAt = new Date();
const result = await db

17
src/app/actions/onboarding.ts
View File

@@ -2,6 +2,7 @@
import db from '@/lib/db';
import { participant } from '@/lib/model/participant';
import { experiment } from '@/lib/model/experiment';
import { eq, and } from 'drizzle-orm';
import { auth } from '@/lib/auth';
import { headers } from 'next/headers';
@@ -11,6 +12,22 @@ export async function isOnboardingDone(experimentId: number): Promise<boolean> {
if (!session) throw new Error('Nicht angemeldet');
try {
// Check if onboarding is enabled for this experiment
const exp = await db
.select()
.from(experiment)
.where(eq(experiment.id, experimentId))
.limit(1);
if (exp.length === 0) {
throw new Error('Experiment not found');
}
// If onboarding is not enabled, consider it done
if (!exp[0].onboardingEnabled) {
return true;
}
const participantRecord = await db
.select()
.from(participant)

38
src/components/CreateExperimentModal.tsx
View File

@@ -15,6 +15,8 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [selectedDatasetId, setSelectedDatasetId] = useState<number | ''>(datasetId || '');
const [onboardingEnabled, setOnboardingEnabled] = useState(false);
const [calibrationEnabled, setCalibrationEnabled] = useState(false);
const [loading, setLoading] = useState(false);
const [datasetsLoading, setDatasetsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -61,11 +63,15 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
await createExperiment({
name: name.trim(),
description: description.trim() || undefined,
datasetId: Number(selectedDatasetId)
datasetId: Number(selectedDatasetId),
onboardingEnabled,
calibrationEnabled
});
setName('');
setDescription('');
setSelectedDatasetId(datasetId || '');
setOnboardingEnabled(false);
setCalibrationEnabled(false);
setSuccess(true);
setTimeout(() => {
setSuccess(false);
@@ -86,6 +92,8 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
setName('');
setDescription('');
setSelectedDatasetId(datasetId || '');
setOnboardingEnabled(false);
setCalibrationEnabled(false);
setError(null);
setSuccess(false);
}
@@ -188,6 +196,34 @@ export default function CreateExperimentModal({ datasetId }: CreateExperimentMod
</div>
)}
<div className="flex items-center">
<input
id="onboardingEnabled"
type="checkbox"
checked={onboardingEnabled}
onChange={(e) => setOnboardingEnabled(e.target.checked)}
className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
disabled={loading}
/>
<label htmlFor="onboardingEnabled" className="ml-2 text-sm font-medium text-gray-700">
Enable Onboarding
</label>
</div>
<div className="flex items-center">
<input
id="calibrationEnabled"
type="checkbox"
checked={calibrationEnabled}
onChange={(e) => setCalibrationEnabled(e.target.checked)}
className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
disabled={loading}
/>
<label htmlFor="calibrationEnabled" className="ml-2 text-sm font-medium text-gray-700">
Enable Calibration
</label>
</div>
{error && (
<div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}

39
src/components/EditableExperimentHeader.tsx
View File

@@ -22,6 +22,8 @@ export default function EditableExperimentHeader({
const [description, setDescription] = useState(experiment.description || '');
const [annotationTool, setAnnotationTool] = useState(experiment.annotationTool || 'quality-choice');
const [published, setPublished] = useState(experiment.published || false);
const [onboardingEnabled, setOnboardingEnabled] = useState(experiment.onboardingEnabled || false);
const [calibrationEnabled, setCalibrationEnabled] = useState(experiment.calibrationEnabled || false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -39,7 +41,9 @@ export default function EditableExperimentHeader({
name: name.trim(),
description: description.trim() || undefined,
annotationTool: annotationTool,
published: published
published: published,
onboardingEnabled: onboardingEnabled,
calibrationEnabled: calibrationEnabled
});
setIsEditing(false);
} catch (err) {
@@ -54,6 +58,8 @@ export default function EditableExperimentHeader({
setAnnotationTool(experiment.annotationTool || 'quality-choice');
setPublished(experiment.published || false);
setDescription(experiment.description || '');
setOnboardingEnabled(experiment.onboardingEnabled || false);
setCalibrationEnabled(experiment.calibrationEnabled || false);
setError(null);
setIsEditing(false);
}
@@ -117,6 +123,34 @@ export default function EditableExperimentHeader({
</label>
</div>
<div className="flex items-center mb-4">
<input
id="onboardingEnabled"
type="checkbox"
checked={onboardingEnabled}
onChange={(e) => setOnboardingEnabled(e.target.checked)}
className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
disabled={loading}
/>
<label htmlFor="onboardingEnabled" className="ml-2 text-sm font-medium text-gray-700">
Enable Onboarding
</label>
</div>
<div className="flex items-center mb-4">
<input
id="calibrationEnabled"
type="checkbox"
checked={calibrationEnabled}
onChange={(e) => setCalibrationEnabled(e.target.checked)}
className="w-4 h-4 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
disabled={loading}
/>
<label htmlFor="calibrationEnabled" className="ml-2 text-sm font-medium text-gray-700">
Enable Calibration
</label>
</div>
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm">
{error}
@@ -153,6 +187,9 @@ export default function EditableExperimentHeader({
<p className="text-sm text-gray-500 mb-4">
Status: {experiment.published ? 'Published' : 'Draft'}
</p>
<p className="text-sm text-gray-500 mb-4">
Onboarding: {experiment.onboardingEnabled ? 'Enabled' : 'Disabled'} | Calibration: {experiment.calibrationEnabled ? 'Enabled' : 'Disabled'}
</p>
<p className="text-sm text-gray-500 mb-4">
Created: {new Date(experiment.createdAt).toLocaleDateString()} |
Updated: {new Date(experiment.updatedAt).toLocaleDateString()}

9
src/components/OnboardingViews/OnboardingFormView.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useState, useTransition } from 'react';
import { useEffect, useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { saveOnboardingAnswers } from '@/app/actions/onboarding';
import { DIALECT_LABELS_WITHOUT_DE } from '@/lib/dialects';
@@ -45,6 +45,13 @@ export default function OnboardingFormView({ experimentId }: OnboardingFormViewP
});
const [error, setError] = useState<string | null>(null);
useEffect(() => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
}, [currentStep]);
const handleChange = (field: keyof FormData, value: string) => {
setFormData((prev) => ({
...prev,

15
src/components/OnboardingViews/OnboardingPhase.tsx
View File

@@ -5,6 +5,13 @@ import { getOnboardingAnswers } from '@/app/actions/onboarding';
import OnboardingInfoView from './OnboardingInfoView';
import OnboardingFormView from './OnboardingFormView';
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
interface OnboardingPhaseProps {
experimentId: number;
}
@@ -49,14 +56,18 @@ export default function OnboardingPhase({ experimentId }: OnboardingPhaseProps)
// Show info page first
if (showInfoPage) {
return (
<OnboardingInfoView
onContinue={() => setShowInfoPage(false)}
onContinue={() => {
scrollToTop();
setShowInfoPage(false);
}}
hasExistingAnswers={hasExistingAnswers}
/>
);
}
// Show onboarding form page
return <OnboardingFormView experimentId={experimentId} />;
}

2
src/lib/model/experiment.ts
View File

@@ -11,6 +11,8 @@ export const experiment = sqliteTable(
published: integer('published', { mode: 'boolean' }).notNull().default(false), // 0 = draft, 1 = published
description: text('description'),
annotationTool: text('annotation_tool'),
onboardingEnabled: integer('onboarding_enabled', { mode: 'boolean' }).notNull().default(false),
calibrationEnabled: integer('calibration_enabled', { mode: 'boolean' }).notNull().default(false),
datasetId: integer('dataset_id')
.notNull()
.references(() => dataset.id),