Implement object lifecycle pane (#13550)

* Object lifecycle pane

* fix thumbnails and annotation offset math

* snapshot endpoint height and format, yaml types, bugfixes

* clean up for new type

* use get_image_from_recording in recordings snapshot api

* make height optional

web/src/utils/timelineUtil.tsx

@@ -1,125 +1,5 @@
-import {
-  LuCamera,
-  LuCar,
-  LuCat,
-  LuCircle,
-  LuCircleDot,
-  LuDog,
-  LuEar,
-  LuPackage,
-  LuPersonStanding,
-  LuPlay,
-  LuPlayCircle,
-  LuTruck,
-} from "react-icons/lu";
-import { GiDeer } from "react-icons/gi";
-import { IoMdExit } from "react-icons/io";
-import {
-  MdFaceUnlock,
-  MdOutlineLocationOn,
-  MdOutlinePictureInPictureAlt,
-} from "react-icons/md";
-import { FaBicycle } from "react-icons/fa";
 import { endOfHourOrCurrentTime } from "./dateUtil";
-import { TimeRange, Timeline } from "@/types/timeline";
-
-export function getTimelineIcon(timelineItem: Timeline) {
-  switch (timelineItem.class_type) {
-    case "visible":
-      return <LuPlay className="mr-1 w-4" />;
-    case "gone":
-      return <IoMdExit className="mr-1 w-4" />;
-    case "active":
-      return <LuPlayCircle className="mr-1 w-4" />;
-    case "stationary":
-      return <LuCircle className="mr-1 w-4" />;
-    case "entered_zone":
-      return <MdOutlineLocationOn className="mr-1 w-4" />;
-    case "attribute":
-      switch (timelineItem.data.attribute) {
-        case "face":
-          return <MdFaceUnlock className="mr-1 w-4" />;
-        case "license_plate":
-          return <MdOutlinePictureInPictureAlt className="mr-1 w-4" />;
-        default:
-          return <LuTruck className="mr-1 w-4" />;
-      }
-    case "heard":
-      return <LuEar className="mr-1 w-4" />;
-    case "external":
-      return <LuCircleDot className="mr-1 w-4" />;
-  }
-}
-
-/**
- * Get icon representing detection, either label specific or generic detection icon
- * @param timelineItem timeline item
- * @returns icon for label
- */
-export function getTimelineDetectionIcon(timelineItem: Timeline) {
-  switch (timelineItem.data.label) {
-    case "bicycle":
-      return <FaBicycle className="mr-1 w-4" />;
-    case "car":
-      return <LuCar className="mr-1 w-4" />;
-    case "cat":
-      return <LuCat className="mr-1 w-4" />;
-    case "deer":
-      return <GiDeer className="mr-1 w-4" />;
-    case "dog":
-      return <LuDog className="mr-1 w-4" />;
-    case "package":
-      return <LuPackage className="mr-1 w-4" />;
-    case "person":
-      return <LuPersonStanding className="mr-1 w-4" />;
-    default:
-      return <LuCamera className="mr-1 w-4" />;
-  }
-}
-
-export function getTimelineItemDescription(timelineItem: Timeline) {
-  const label = (
-    (Array.isArray(timelineItem.data.sub_label)
-      ? timelineItem.data.sub_label[0]
-      : timelineItem.data.sub_label) || timelineItem.data.label
-  ).replaceAll("_", " ");
-
-  switch (timelineItem.class_type) {
-    case "visible":
-      return `${label} detected`;
-    case "entered_zone":
-      return `${label} entered ${timelineItem.data.zones
-        .join(" and ")
-        .replaceAll("_", " ")}`;
-    case "active":
-      return `${label} became active`;
-    case "stationary":
-      return `${label} became stationary`;
-    case "attribute": {
-      let title = "";
-      if (
-        timelineItem.data.attribute == "face" ||
-        timelineItem.data.attribute == "license_plate"
-      ) {
-        title = `${timelineItem.data.attribute.replaceAll(
-          "_",
-          " ",
-        )} detected for ${label}`;
-      } else {
-        title = `${
-          timelineItem.data.sub_label
-        } recognized as ${timelineItem.data.attribute.replaceAll("_", " ")}`;
-      }
-      return title;
-    }
-    case "gone":
-      return `${label} left`;
-    case "heard":
-      return `${label} heard`;
-    case "external":
-      return `${label} detected`;
-  }
-}
+import { TimeRange } from "@/types/timeline";
 
 /**
  *