{/* Selections Table */}
<div className="mt-6 border-t pt-4">
{state.selectionsLoading && (
<div className="text-center py-8 text-muted-foreground">
Loading selections...
</div>
)}
{state.selectionsError && (
<div className="text-center py-8 text-red-500">
Error: {state.selectionsError}
</div>
)}
{!state.selectionsLoading &&
!state.selectionsError &&
state.selections.length === 0 && (
<div className="text-center py-8 text-muted-foreground">
No selections found for this file.
</div>
)}
{state.selections.length > 0 && (
<div className="overflow-x-auto">
<table className="w-full text-sm border-collapse">
<thead>
<tr className="border-b">
<th className="text-left p-2">Start (s)</th>
<th className="text-left p-2">End (s)</th>
<th className="text-left p-2">Freq (Hz)</th>
<th className="text-left p-2">Description</th>
<th className="text-left p-2">Species</th>
<th className="text-left p-2">Species Certainty</th>
<th className="text-left p-2">Call Type</th>
<th className="text-left p-2">Call Type Certainty</th>
</tr>
</thead>
<tbody>
{getFilteredSelections()
.map((selection) => {
const filterData = state.selectedFilterId
? selection.filters.find(
(f) => f.id === state.selectedFilterId,
)
: selection.filters[0];
if (
!filterData ||
!filterData.species ||
!filterData.species.length
) {
return (
<tr key={selection.id} className="border-b">
<td className="p-2">
{selection.startTime.toFixed(3)}
</td>
<td className="p-2">
{selection.endTime.toFixed(3)}
</td>
<td className="p-2">
{selection.freqLow && selection.freqHigh
? `${selection.freqLow.toFixed(0)} - ${selection.freqHigh.toFixed(0)}`
: "N/A"}
</td>
<td className="p-2">
{selection.description || "-"}
</td>
<td className="p-2">No species detected</td>
<td className="p-2">-</td>
<td className="p-2">-</td>
<td className="p-2">-</td>
</tr>
);
}
return filterData.species
.map((species) => {
if (species.callTypes.length === 0) {
return (
<tr
key={`${selection.id}-${species.id}`}
className="border-b"
>
<td className="p-2">
{selection.startTime.toFixed(3)}
</td>
<td className="p-2">
{selection.endTime.toFixed(3)}
</td>
<td className="p-2">
{selection.freqLow && selection.freqHigh
? `${selection.freqLow.toFixed(0)} - ${selection.freqHigh.toFixed(0)}`
: "N/A"}
</td>
<td className="p-2">
{selection.description || "-"}
</td>
<td className="p-2">{species.name}</td>
<td className="p-2">
{species.certainty
? `${species.certainty.toFixed(1)}%`
: "N/A"}
</td>
<td className="p-2">-</td>
<td className="p-2">-</td>
</tr>
);
}