feat: added simple statistics to backend to track progress on experiment
This commit is contained in:
averel10
199
src/app/actions/annotation-stats.ts
Normal file
199
src/app/actions/annotation-stats.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
'use server';
|
||||
|
||||
import db from '@/lib/db';
|
||||
import { annotation } from '@/lib/model/annotation';
|
||||
import { dataset_entry } from '@/lib/model/dataset_entry';
|
||||
import { experiment } from '@/lib/model/experiment';
|
||||
import { eq, and, count, gt, isNull } from 'drizzle-orm';
|
||||
import { requireAdmin } from '@/lib/auth';
|
||||
|
||||
export type DistributionDimension = 'dialect' | 'utteranceId' | 'model' | 'speaker';
|
||||
|
||||
export interface DistributionItem {
|
||||
label: string;
|
||||
count: number;
|
||||
entryId?: number;
|
||||
fileName?: string;
|
||||
durationMs?: number | null;
|
||||
}
|
||||
|
||||
export interface DistributionData {
|
||||
dimension: DistributionDimension;
|
||||
items: DistributionItem[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches annotation distribution data grouped by the specified dimension.
|
||||
* Includes entries with 0 annotations and sample entry information for playback.
|
||||
*/
|
||||
export async function getAnnotationDistribution(
|
||||
experimentId: number,
|
||||
dimension: DistributionDimension
|
||||
): Promise<DistributionData> {
|
||||
const result = await requireAdmin();
|
||||
if (!result.authenticated || !result.admin) {
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
try {
|
||||
// Get experiment to verify it exists and get dataset
|
||||
const exp = await db
|
||||
.select()
|
||||
.from(experiment)
|
||||
.where(eq(experiment.id, experimentId))
|
||||
.limit(1);
|
||||
|
||||
if (exp.length === 0) {
|
||||
throw new Error('Experiment not found');
|
||||
}
|
||||
|
||||
const datasetId = exp[0].datasetId;
|
||||
|
||||
// Map dimension to database field
|
||||
const dimensionFieldMap = {
|
||||
dialect: dataset_entry.dialect,
|
||||
utteranceId: dataset_entry.utteranceId,
|
||||
model: dataset_entry.modelName,
|
||||
speaker: dataset_entry.speakerId,
|
||||
};
|
||||
|
||||
const dimensionField = dimensionFieldMap[dimension];
|
||||
|
||||
// First, get all unique dimension values from dataset_entry for this dataset
|
||||
const allDimensionValues = await db
|
||||
.selectDistinct({ dimensionValue: dimensionField })
|
||||
.from(dataset_entry)
|
||||
.where(eq(dataset_entry.datasetId, datasetId));
|
||||
|
||||
// Now get annotation counts for each dimension value
|
||||
const items: DistributionItem[] = [];
|
||||
let total = 0;
|
||||
|
||||
for (const dimValueObj of allDimensionValues) {
|
||||
const dimValue = dimValueObj.dimensionValue;
|
||||
|
||||
// Count annotations for this dimension value in this experiment
|
||||
const annotationCountResult = await db
|
||||
.select({ total: count().as('total') })
|
||||
.from(annotation)
|
||||
.innerJoin(
|
||||
dataset_entry,
|
||||
eq(annotation.datasetEntryId, dataset_entry.id)
|
||||
)
|
||||
.where(
|
||||
and(
|
||||
eq(annotation.experimentId, experimentId),
|
||||
dimValue === null ? isNull(dimensionField) : eq(dimensionField, dimValue)
|
||||
)
|
||||
);
|
||||
|
||||
const annotationCount = annotationCountResult[0]?.total ? parseInt(annotationCountResult[0].total as any) : 0;
|
||||
total += annotationCount;
|
||||
|
||||
// Get a sample entry for this dimension group (any entry, even if not annotated)
|
||||
const sampleEntry = await db
|
||||
.select({
|
||||
id: dataset_entry.id,
|
||||
fileName: dataset_entry.fileName,
|
||||
durationMs: dataset_entry.durationMs,
|
||||
})
|
||||
.from(dataset_entry)
|
||||
.where(
|
||||
and(
|
||||
eq(dataset_entry.datasetId, datasetId),
|
||||
dimValue === null ? isNull(dimensionField) : eq(dimensionField, dimValue)
|
||||
)
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
items.push({
|
||||
label: dimValue || 'Unknown',
|
||||
count: annotationCount,
|
||||
entryId: sampleEntry[0]?.id,
|
||||
fileName: sampleEntry[0]?.fileName,
|
||||
durationMs: sampleEntry[0]?.durationMs,
|
||||
});
|
||||
}
|
||||
|
||||
// Sort by count descending
|
||||
items.sort((a, b) => b.count - a.count);
|
||||
|
||||
return {
|
||||
dimension,
|
||||
items,
|
||||
total,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching annotation distribution:', error);
|
||||
throw new Error('Failed to fetch annotation distribution');
|
||||
}
|
||||
}
|
||||
|
||||
export interface AnnotatedSample {
|
||||
id: number;
|
||||
fileName: string;
|
||||
durationMs: number | null;
|
||||
annotationCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all annotated samples for an experiment with their annotation counts.
|
||||
*/
|
||||
export async function getAnnotatedSamples(
|
||||
experimentId: number
|
||||
): Promise<AnnotatedSample[]> {
|
||||
const result = await requireAdmin();
|
||||
if (!result.authenticated || !result.admin) {
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
try {
|
||||
// First get the dataset for this experiment
|
||||
const expData = await db
|
||||
.select({ datasetId: experiment.datasetId })
|
||||
.from(experiment)
|
||||
.where(eq(experiment.id, experimentId))
|
||||
.limit(1);
|
||||
|
||||
if (expData.length === 0) {
|
||||
throw new Error('Experiment not found');
|
||||
}
|
||||
|
||||
const datasetId = expData[0].datasetId;
|
||||
|
||||
// Get all dataset entries that have annotations for this experiment
|
||||
// with their annotation counts
|
||||
const samples = await db
|
||||
.select({
|
||||
id: dataset_entry.id,
|
||||
fileName: dataset_entry.fileName,
|
||||
durationMs: dataset_entry.durationMs,
|
||||
annotationCount: count(annotation.id).as('annotationCount'),
|
||||
})
|
||||
.from(dataset_entry)
|
||||
.leftJoin(
|
||||
annotation,
|
||||
and(
|
||||
eq(dataset_entry.id, annotation.datasetEntryId),
|
||||
eq(annotation.experimentId, experimentId)
|
||||
)
|
||||
)
|
||||
.where(eq(dataset_entry.datasetId, datasetId))
|
||||
.groupBy(dataset_entry.id)
|
||||
.having((group) => gt(count(annotation.id), 0));
|
||||
|
||||
// Type assertion for the count
|
||||
return samples
|
||||
.map((s) => ({
|
||||
id: s.id,
|
||||
fileName: s.fileName,
|
||||
durationMs: s.durationMs,
|
||||
annotationCount: parseInt(s.annotationCount as any) || 0,
|
||||
}))
|
||||
.sort((a, b) => b.annotationCount - a.annotationCount);
|
||||
} catch (error) {
|
||||
console.error('Error fetching annotated samples:', error);
|
||||
throw new Error('Failed to fetch annotated samples');
|
||||
}
|
||||
}
|
||||
@@ -89,6 +89,36 @@ 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 participant exists for this user and experiment
|
||||
const participantRecord = await db
|
||||
.select()
|
||||
.from(participant)
|
||||
.where(
|
||||
and(
|
||||
eq(participant.experimentId, experimentId),
|
||||
eq(participant.userId, session.user.id)
|
||||
)
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
// If no participant record exists, calibration is not done
|
||||
if (participantRecord.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Use the shared validation logic
|
||||
return isParticipantCalibrationDone(experimentId, participantRecord[0]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a participant has completed calibration for an experiment.
|
||||
* This is a helper function for admin statistics that validates all calibration answers are complete.
|
||||
* Returns true if calibration is completed for this participant.
|
||||
*/
|
||||
export async function isParticipantCalibrationDone(
|
||||
experimentId: number,
|
||||
participantRecord: typeof participant.$inferSelect
|
||||
): Promise<boolean> {
|
||||
// Check if calibration is enabled for this experiment
|
||||
const exp = await db
|
||||
.select()
|
||||
@@ -116,26 +146,12 @@ export async function isCalibrationDone(experimentId: number): Promise<boolean>
|
||||
return true;
|
||||
}
|
||||
|
||||
// Check if participant exists for this user and experiment
|
||||
const participantRecord = await db
|
||||
.select()
|
||||
.from(participant)
|
||||
.where(
|
||||
and(
|
||||
eq(participant.experimentId, experimentId),
|
||||
eq(participant.userId, session.user.id)
|
||||
)
|
||||
)
|
||||
.limit(1);
|
||||
|
||||
// If no participant record exists, calibration is not done
|
||||
if (participantRecord.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if calibration answers are filled
|
||||
const calibrationAnswers = participantRecord[0].calibrationAnswers as Record<number, { dialectLabel: string; confidence: number }> | null;
|
||||
|
||||
const calibrationAnswers = participantRecord.calibrationAnswers as Record<
|
||||
number,
|
||||
{ dialectLabel: string; confidence: number }
|
||||
> | null;
|
||||
|
||||
if (!calibrationAnswers) {
|
||||
return false;
|
||||
}
|
||||
@@ -143,7 +159,7 @@ export async function isCalibrationDone(experimentId: number): Promise<boolean>
|
||||
// Verify that all calibration items have complete answers
|
||||
for (const item of calibrationItems) {
|
||||
const answer = calibrationAnswers[item.id];
|
||||
|
||||
|
||||
// Check if answer exists and has both required fields
|
||||
if (!answer || !answer.dialectLabel || !answer.confidence) {
|
||||
return false;
|
||||
|
||||
@@ -5,9 +5,11 @@ import { experiment } from '@/lib/model/experiment';
|
||||
import { experiment_calibration } from '@/lib/model/experiment_calibration';
|
||||
import { annotation } from '@/lib/model/annotation';
|
||||
import { participant } from '@/lib/model/participant';
|
||||
import { and, eq } from 'drizzle-orm';
|
||||
import { dataset_entry } from '@/lib/model/dataset_entry';
|
||||
import { and, eq, count, sql, isNotNull } from 'drizzle-orm';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { auth, requireAdmin } from '@/lib/auth';
|
||||
import { isParticipantCalibrationDone } from './calibration-scoring';
|
||||
import { headers } from 'next/headers';
|
||||
|
||||
export async function createExperiment({
|
||||
@@ -183,3 +185,108 @@ export async function clearExperimentData(id: number) {
|
||||
throw new Error('Failed to clear experiment data');
|
||||
}
|
||||
}
|
||||
|
||||
export async function getExperimentStatistics(id: number) {
|
||||
const result = await requireAdmin();
|
||||
if (!result.authenticated || !result.admin) {
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
try {
|
||||
// Get the experiment with dataset
|
||||
const exp = await db
|
||||
.select()
|
||||
.from(experiment)
|
||||
.where(eq(experiment.id, id))
|
||||
.limit(1);
|
||||
|
||||
if (!exp || exp.length === 0) {
|
||||
throw new Error('Experiment not found');
|
||||
}
|
||||
|
||||
const datasetId = exp[0].datasetId;
|
||||
|
||||
// Get all participants
|
||||
const allParticipants = await db
|
||||
.select()
|
||||
.from(participant)
|
||||
.where(eq(participant.experimentId, id));
|
||||
|
||||
// Count onboarding completion (simple check for non-null)
|
||||
const completedOnboarding = allParticipants.filter(
|
||||
(p) => p.onboardingAnswers !== null && p.onboardingAnswers !== undefined
|
||||
).length;
|
||||
|
||||
// Check calibration completion using the proper validation
|
||||
let completedCalibration = 0;
|
||||
for (const p of allParticipants) {
|
||||
if (await isParticipantCalibrationDone(id, p)) {
|
||||
completedCalibration++;
|
||||
}
|
||||
}
|
||||
|
||||
// Count total dataset entries
|
||||
const totalEntriesResult = await db
|
||||
.select({ total: count().as('total') })
|
||||
.from(dataset_entry)
|
||||
.where(eq(dataset_entry.datasetId, datasetId));
|
||||
|
||||
const totalEntries = totalEntriesResult[0]?.total || 0;
|
||||
|
||||
// Get annotation statistics
|
||||
const annotationStats = await db
|
||||
.select({
|
||||
total: count().as('total'),
|
||||
entriesWithAnnotations: count(sql`DISTINCT ${annotation.datasetEntryId}`).as('entriesWithAnnotations'),
|
||||
})
|
||||
.from(annotation)
|
||||
.where(eq(annotation.experimentId, id));
|
||||
|
||||
// Get per-entry annotation counts
|
||||
const perEntryAnnotations = await db
|
||||
.select({
|
||||
datasetEntryId: annotation.datasetEntryId,
|
||||
annotationCount: count().as('annotationCount'),
|
||||
})
|
||||
.from(annotation)
|
||||
.where(eq(annotation.experimentId, id))
|
||||
.groupBy(annotation.datasetEntryId);
|
||||
|
||||
// Calculate statistics
|
||||
const totalAnnotations = annotationStats[0]?.total || 0;
|
||||
const entriesWithAnnotations = annotationStats[0]?.entriesWithAnnotations || 0;
|
||||
const entriesWithoutAnnotations = Math.max(0, totalEntries - entriesWithAnnotations);
|
||||
const averageAnnotationsPerEntry = totalEntries > 0 ? (totalAnnotations / totalEntries).toFixed(2) : '0';
|
||||
|
||||
// Find max and min annotations per entry
|
||||
let maxAnnotationsPerEntry = 0;
|
||||
let minAnnotationsPerEntry = 0;
|
||||
if (perEntryAnnotations.length > 0) {
|
||||
const counts = perEntryAnnotations.map(p => p.annotationCount || 0);
|
||||
maxAnnotationsPerEntry = Math.max(...counts);
|
||||
minAnnotationsPerEntry = Math.min(...counts);
|
||||
}
|
||||
|
||||
return {
|
||||
participants: {
|
||||
total: allParticipants.length,
|
||||
completedOnboarding,
|
||||
completedCalibration,
|
||||
},
|
||||
entries: {
|
||||
total: totalEntries,
|
||||
},
|
||||
annotations: {
|
||||
total: totalAnnotations,
|
||||
entriesWithAnnotations,
|
||||
entriesWithoutAnnotations,
|
||||
averagePerEntry: parseFloat(averageAnnotationsPerEntry),
|
||||
maxPerEntry: maxAnnotationsPerEntry,
|
||||
minPerEntry: minAnnotationsPerEntry,
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching experiment statistics:', error);
|
||||
throw new Error('Failed to fetch experiment statistics');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import DeleteExperimentButton from '@/components/DeleteExperimentButton';
|
||||
import ClearExperimentDataButton from '@/components/ClearExperimentDataButton';
|
||||
import UploadCalibrationModal from '@/components/UploadCalibrationModal';
|
||||
import CalibrationListModal from '@/components/CalibrationListModal';
|
||||
import ExperimentStatistics from '@/components/ExperimentStatistics';
|
||||
import { requireAdmin } from '@/lib/auth';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
@@ -73,9 +74,12 @@ export default async function ExperimentPage({ params }: ExperimentPageProps) {
|
||||
<UploadCalibrationModal experimentId={experimentId} />
|
||||
<CalibrationListModal experimentId={experimentId} />
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
Statistics
|
||||
</div>
|
||||
|
||||
<ExperimentStatistics
|
||||
experimentId={experimentId}
|
||||
onboardingEnabled={exp.onboardingEnabled}
|
||||
calibrationEnabled={exp.calibrationEnabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
162
src/components/AnnotationDistribution.tsx
Normal file
162
src/components/AnnotationDistribution.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getAnnotationDistribution, DistributionDimension, DistributionData, DistributionItem, getAnnotatedSamples, AnnotatedSample } from '@/app/actions/annotation-stats';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
||||
import WaveformPlayer from './WaveformPlayer';
|
||||
|
||||
interface AnnotationDistributionProps {
|
||||
experimentId: number;
|
||||
}
|
||||
|
||||
export default function AnnotationDistribution({ experimentId }: AnnotationDistributionProps) {
|
||||
const [dimension, setDimension] = useState<DistributionDimension>('dialect');
|
||||
const [data, setData] = useState<DistributionData | null>(null);
|
||||
const [samples, setSamples] = useState<AnnotatedSample[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [samplesLoading, setSamplesLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [samplesError, setSamplesError] = useState<string | null>(null);
|
||||
|
||||
const dimensions: { value: DistributionDimension; label: string }[] = [
|
||||
{ value: 'dialect', label: 'Dialect' },
|
||||
{ value: 'utteranceId', label: 'Utterance ID' },
|
||||
{ value: 'model', label: 'Model' },
|
||||
{ value: 'speaker', label: 'Speaker' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const result = await getAnnotationDistribution(experimentId, dimension);
|
||||
setData(result);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load distribution');
|
||||
setData(null);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [experimentId, dimension]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSamples = async () => {
|
||||
try {
|
||||
setSamplesLoading(true);
|
||||
const result = await getAnnotatedSamples(experimentId);
|
||||
setSamples(result);
|
||||
setSamplesError(null);
|
||||
} catch (err) {
|
||||
setSamplesError(err instanceof Error ? err.message : 'Failed to load samples');
|
||||
setSamples([]);
|
||||
} finally {
|
||||
setSamplesLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchSamples();
|
||||
}, [experimentId]);
|
||||
|
||||
// Transform data for recharts
|
||||
const chartData = data?.items.map((item) => ({
|
||||
name: item.label,
|
||||
percentage: data.total > 0 ? ((item.count / data.total) * 100).toFixed(1) : 0,
|
||||
...item,
|
||||
})) || [];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-bold mb-4 text-gray-900">Annotation Distribution</h2>
|
||||
|
||||
{/* Dimension Selector */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Group by:
|
||||
</label>
|
||||
<select
|
||||
value={dimension}
|
||||
onChange={(e) => setDimension(e.target.value as DistributionDimension)}
|
||||
className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
{dimensions.map((d) => (
|
||||
<option key={d.value} value={d.value}>
|
||||
{d.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="text-center py-8 text-gray-600 h-[450px] flex items-center justify-center">
|
||||
Loading distribution data...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="text-center py-8 text-red-600 h-[450px] flex items-center justify-center">
|
||||
Error: {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && !loading && (
|
||||
<div className="grid grid-cols-1 gap-6 mb-8">
|
||||
{/* Chart Section */}
|
||||
<div className="lg:col-span-2 h-[450px]">
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={100}
|
||||
/>
|
||||
<YAxis
|
||||
allowDecimals={false}
|
||||
label={{ value: 'Annotation Count', angle: -90, position: 'insideLeft' }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: any, name: any) => {
|
||||
if (name === 'count') return [value, 'Count'];
|
||||
return [value, name];
|
||||
}}
|
||||
content={({ active, payload }) => {
|
||||
if (active && payload && payload.length) {
|
||||
const data = payload[0].payload;
|
||||
return (
|
||||
<div className="bg-white p-3 border border-gray-300 rounded shadow-lg">
|
||||
<p className="font-semibold text-gray-900">{data.name}</p>
|
||||
<p className="text-blue-600">Count: {data.count}</p>
|
||||
<p className="text-gray-600 text-sm">Percentage: {data.percentage}%</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="count"
|
||||
fill="#3b82f6"
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No annotations found for this distribution
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
189
src/components/ExperimentStatistics.tsx
Normal file
189
src/components/ExperimentStatistics.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getExperimentStatistics } from '@/app/actions/experiment';
|
||||
import AnnotationDistribution from './AnnotationDistribution';
|
||||
|
||||
interface ExperimentStatisticsProps {
|
||||
experimentId: number;
|
||||
onboardingEnabled: boolean;
|
||||
calibrationEnabled: boolean;
|
||||
}
|
||||
|
||||
interface Statistics {
|
||||
participants: {
|
||||
total: number;
|
||||
completedOnboarding: number;
|
||||
completedCalibration: number;
|
||||
};
|
||||
entries: {
|
||||
total: number;
|
||||
};
|
||||
annotations: {
|
||||
total: number;
|
||||
entriesWithAnnotations: number;
|
||||
entriesWithoutAnnotations: number;
|
||||
averagePerEntry: number;
|
||||
maxPerEntry: number;
|
||||
minPerEntry: number;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ExperimentStatistics({
|
||||
experimentId,
|
||||
onboardingEnabled,
|
||||
calibrationEnabled,
|
||||
}: ExperimentStatisticsProps) {
|
||||
const [statistics, setStatistics] = useState<Statistics | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStatistics = async () => {
|
||||
try {
|
||||
const stats = await getExperimentStatistics(experimentId);
|
||||
setStatistics(stats);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load statistics');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchStatistics();
|
||||
}, [experimentId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-gray-600">Loading statistics...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-red-600">Error: {error}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!statistics) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<div className="text-gray-600">No statistics available</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-bold mb-6 text-gray-900">Statistics</h2>
|
||||
|
||||
{/* Participants Section */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-800">Participants</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-blue-50 rounded p-4">
|
||||
<div className="text-sm text-gray-600 mb-1">Total Participants</div>
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{statistics.participants.total}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{onboardingEnabled && (
|
||||
<div className="bg-green-50 rounded p-4">
|
||||
<div className="text-sm text-gray-600 mb-1">Completed Onboarding</div>
|
||||
<div className="text-3xl font-bold text-green-600">
|
||||
{statistics.participants.completedOnboarding}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-2">
|
||||
{statistics.participants.total > 0
|
||||
? (
|
||||
(statistics.participants.completedOnboarding /
|
||||
statistics.participants.total) *
|
||||
100
|
||||
).toFixed(1)
|
||||
: 0}
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{calibrationEnabled && (
|
||||
<div className="bg-purple-50 rounded p-4">
|
||||
<div className="text-sm text-gray-600 mb-1">Completed Calibration</div>
|
||||
<div className="text-3xl font-bold text-purple-600">
|
||||
{statistics.participants.completedCalibration}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-2">
|
||||
{statistics.participants.total > 0
|
||||
? (
|
||||
(statistics.participants.completedCalibration /
|
||||
statistics.participants.total) *
|
||||
100
|
||||
).toFixed(1)
|
||||
: 0}
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Annotations Section */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-800">Sample Annotations</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<span className="text-gray-600">Total Samples</span>
|
||||
<span className="font-bold text-gray-900">{statistics.entries.total}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<span className="text-gray-600">Total Annotations</span>
|
||||
<span className="font-bold text-gray-900">{statistics.annotations.total}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<span className="text-gray-600">Samples with Annotations</span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{statistics.annotations.entriesWithAnnotations}
|
||||
<span className="text-sm text-gray-500 ml-2">
|
||||
({statistics.entries.total > 0
|
||||
? (
|
||||
(statistics.annotations.entriesWithAnnotations /
|
||||
statistics.entries.total) *
|
||||
100
|
||||
).toFixed(1)
|
||||
: 0}
|
||||
%)
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<span className="text-gray-600">Samples without Annotations</span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{statistics.annotations.entriesWithoutAnnotations}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center p-3 bg-gray-50 rounded">
|
||||
<span className="text-gray-600">Average Annotations per Sample</span>
|
||||
<span className="font-bold text-gray-900">
|
||||
{statistics.annotations.averagePerEntry.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Annotation Distribution Diagram */}
|
||||
<div className="mt-8 border-t pt-8">
|
||||
<AnnotationDistribution experimentId={experimentId} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user