Function BoundingBoxOverlay

src/BoundingBoxOverlay.tsx:7–142

()

import { useEffect, useRef } from "react";

export function BoundingBoxOverlay() {
  const [response] = useAtom(responseAtom);
  const [activeHoverBox, setActiverHoverBox] = useAtom(activerHoverBoxAtom);
  const bbWrapperRef = useRef<HTMLDivElement | null>(null);

  const boxes = parseBoundingBoxes(response);

  // remove duplicates
  const seen = new Set();
  const uniqueBoxes = boxes.filter((box) => {
    const key = box.text + box.numbers.join(",");
    if (seen.has(key)) {
      return false;
    }
    seen.add(key);
    return true;
  });

  const formatted: {
    name: string;
    coords: { x: number; y: number; width: number; height: number };
  }[] = uniqueBoxes.map((box) => {
    const coords = box.numbers;
    return {
      name: box.text,
      // convert from ["y_min", "x_min", "y_max", "x_max"];
      // convert from 1000x1000 space to percentage
      coords: {
        x: coords[1] / 1000,
        y: coords[0] / 1000,
        width: coords[3] / 1000 - coords[1] / 1000,
        height: coords[2] / 1000 - coords[0] / 1000,
      },
    };
  });

  useEffect(() => {
    // Not the most efficient way to do this but it works
    const handleMouseMove = (e: MouseEvent) => {
      const x = e.clientX;
      const y = e.clientY;
      const wrapperPosition = bbWrapperRef.current?.getBoundingClientRect();
      if (
        bbWrapperRef.current &&
        wrapperPosition &&
        x > wrapperPosition.left &&
        x < wrapperPosition.right &&
        y > wrapperPosition.top &&
        y < wrapperPosition.bottom
      ) {
        const rawBoxes = document.querySelectorAll(".bb");
        const positions = [...rawBoxes].map((box: Element) => {
          const rect = (box as HTMLElement).getBoundingClientRect();
          return {
            left: rect.left,
            right: rect.right,
            top: rect.top,
            bottom: rect.bottom,