samsam2610/experiments-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: day modal bar chart plots that session's field values per animal

Browse Source 
X-axis: animal names, Y-axis: the selected field's numeric value recorded
that specific day. Animals with empty or non-numeric values are excluded.
Each day's chart is independent — different animals, different values.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Experiments DB Dev
2026-04-23 12:24:16 -04:00
parent 7439a1a101
commit b888c1b76d
2 changed files with 32 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ExperimentCalendar.jsx
+15 -23
View File
@@ -53,29 +53,25 @@ function DayPanel({ date, animals, allStatuses, template, experimentId, selected
const fieldLabel = fieldOptions.find((f) => f.value === selectedField)?.label;
// Bar chart: session stats across ALL days, for animals with at least one valid field value
// Bar chart: this day's field value per animal (numeric only, filtered to animals present that day)
const barData = useMemo(() => {
if (!selectedField) return [];
const isBuiltin = BUILTIN_KEYS_SET.has(selectedField);
return animals
return animalsWithData
.map((animal) => {
const statuses = allStatuses.filter((s) => s.animal_id === animal.id);
const total = statuses.length;
if (total === 0) return null;
const success = statuses.filter((s) => {
const val = isBuiltin ? s[selectedField] : s.custom_fields?.[selectedField];
return val !== null && val !== undefined && String(val).trim() !== '';
}).length;
if (success === 0) return null; // skip animals with no valid field data
const status = statusByAnimal[animal.id];
if (!status) return null;
const raw = isBuiltin ? status[selectedField] : status.custom_fields?.[selectedField];
if (raw === null || raw === undefined || String(raw).trim() === '') return null;
const num = parseFloat(raw);
if (isNaN(num)) return null;
return {
name: animal.animal_name || animal.animal_id_string || animal.id.slice(0, 8),
total,
success,
failure: total - success,
value: num,
};
})
.filter(Boolean);
}, [animals, allStatuses, selectedField]);
}, [animalsWithData, statusByAnimal, selectedField]);
return (
<div className="space-y-3 max-h-[80vh] overflow-y-auto pr-1">
@@ -124,20 +120,16 @@ function DayPanel({ date, animals, allStatuses, template, experimentId, selected
{/* Bar chart: overall per-subject completeness */}
{barData.length > 0 && (
<div className="mt-4 pt-4 border-t border-gray-100">
<h4 className="text-sm font-semibold text-gray-700 mb-1">
Session statistics — {fieldLabel ?? 'selected field'}
<h4 className="text-sm font-semibold text-gray-700 mb-3">
{fieldLabel ?? 'Field'} — this session
</h4>
<p className="text-xs text-gray-400 mb-3">All sessions across the experiment</p>
<ResponsiveContainer width="100%" height={200}>
<BarChart data={barData} margin={{ top: 4, right: 16, left: 0, bottom: 4 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis dataKey="name" tick={{ fontSize: 11 }} />
<YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
<Tooltip />
<Legend wrapperStyle={{ fontSize: 11 }} />
<Bar dataKey="total" name="Total" fill="#94a3b8" />
<Bar dataKey="success" name="Success" fill="#22c55e" />
<Bar dataKey="failure" name="Failure" fill="#f87171" minPointSize={2} />
<YAxis tick={{ fontSize: 11 }} />
<Tooltip formatter={(v) => [v, fieldLabel ?? 'Value']} />
<Bar dataKey="value" name={fieldLabel ?? 'Value'} fill="#6366f1" radius={[3, 3, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>