feat: added simple statistics to backend to track progress on experiment
This commit is contained in:
averel10
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