export default()

in src/frontend/src/components/results/FaceAnnotationsResultView.tsx [23:83]
57 lines of code
4 McCabe index (conditional complexity)

export default ({
  annotations,
  onIndexSelected,
}: {
  annotations: FaceAnnotation[];
  onIndexSelected?: (index?: number) => void;
}) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  // Sort rows by confidence
  const faces = annotations.sort(
    (a, b) => b.detectionConfidence - a.detectionConfidence
  );

  return (
    <div className="flex flex-col gap-4">
      <span className="text-md font-medium">
        Face Detection detects multiple faces within an image along with the
        associated key facial attributes such as emotional state or wearing
        headwear.
      </span>

      {annotations.length === 0 ? (
        <Alert mode="info" text="No faces detected" />
      ) : (
        <table className="w-full divide-y divide-neutral-200">
          <tbody className="bg-white divide-y divide-neutral-200">
            {faces.map(({ detectionConfidence }, index) => (
              <tr
                key={index}
                className={clsx("cursor-pointer", {
                  "bg-gray-100": hoveredIndex === index,
                })}
                onMouseEnter={() => {
                  setHoveredIndex(index);
                  if (onIndexSelected) {
                    onIndexSelected(index);
                  }
                }}
                onMouseLeave={() => {
                  setHoveredIndex(null);
                  if (onIndexSelected) {
                    onIndexSelected(undefined);
                  }
                }}
              >
                <td>
                  <ConfidenceLabelRow
                    index={index}
                    label={`Face ${index + 1}`}
                    confidence={detectionConfidence}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};