description: selection.description,

      description: string | null;

          description: row.description,

  description: string | null;

  // Get filtered selections based on selected filter
  const getFilteredSelections = useCallback(() => {
    if (!state.selectedFilterId) {
      return state.selections;
    }
    return state.selections.filter((selection) =>
      selection.filters.some((filter) => filter.id === state.selectedFilterId),
    );
  }, [state.selections, state.selectedFilterId]);

          <div className="flex-1 p-4 overflow-auto">

          <div className="flex-1 p-4 overflow-y-auto max-h-[calc(100vh-8rem)]">

            {/* 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>
                                );
                              }

                              return species.callTypes.map((callType) => (
                                <tr
                                  key={`${selection.id}-${species.id}-${callType.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">{callType.name}</td>
                                  <td className="p-2">
                                    {callType.certainty
                                      ? `${callType.certainty.toFixed(1)}%`
                                      : "N/A"}
                                  </td>
                                </tr>
                              ));
                            })
                            .flat();
                        })
                        .flat()}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

[X] list selections
[ ] tidy, match format with FileTable line 587
[ ] fix floating dropdown
[ ] add distance metadata
[ ] editable selections
[ ] proximal selections

[ ] make clips