Merge pull request #23 from vogelbam/add-clips-table

Add clip table

Author: mbsantiago

back/src/whombat/filters/annotation_tasks.py

@@ -3,7 +3,7 @@
 from uuid import UUID
 
 from soundevent import data
-from sqlalchemy import Select
+from sqlalchemy import Select, or_
 
 from whombat import models
 from whombat.filters import base
@@ -12,6 +12,7 @@
     "AnnotationProjectFilter",
     "DatasetFilter",
     "AnnotationTaskFilter",
+    "SearchRecordingsFilter",
 ]
 
 
@@ -118,6 +119,25 @@ def filter(self, query: Select) -> Select:
         )
 
 
+class IsCompletedFilter(base.Filter):
+    """Filter for tasks if rejected."""
+
+    eq: bool | None = None
+
+    def filter(self, query: Select) -> Select:
+        """Filter the query."""
+        if self.eq is None:
+            return query
+
+        return query.where(
+            models.AnnotationTask.status_badges.any(
+                models.AnnotationStatusBadge.state
+                == data.AnnotationState.completed,
+            )
+            == self.eq,
+        )
+
+
 class IsAssignedFilter(base.Filter):
     """Filter for tasks if assigned."""
 
@@ -206,6 +226,34 @@ def filter(self, query: Select) -> Select:
         )
 
 
+class SearchRecordingsFilter(base.Filter):
+    """Filter recordings by the dataset they are in."""
+
+    search_recordings: str | None = None
+
+    def filter(self, query: Select) -> Select:
+        """Filter the query."""
+        query = (
+            query.join(
+                models.ClipAnnotation,
+                models.AnnotationTask.clip_annotation_id
+                == models.ClipAnnotation.id,
+            )
+            .join(
+                models.Clip,
+                models.ClipAnnotation.clip_id == models.Clip.id,
+            )
+            .join(
+                models.Recording,
+                models.Recording.id == models.Clip.recording_id,
+            )
+        )
+        fields = [models.Recording.path]
+
+        term = f"%{self.search_recordings}%"
+        return query.where(or_(*[field.ilike(term) for field in fields]))
+
+
 class SoundEventAnnotationTagFilter(base.Filter):
     """Filter for tasks by sound event annotation tag."""
 
@@ -258,10 +306,12 @@ def filter(self, query: Select) -> Select:
 
 
 AnnotationTaskFilter = base.combine(
+    SearchRecordingsFilter,
     assigned_to=AssignedToFilter,
     pending=PendingFilter,
     verified=IsVerifiedFilter,
     rejected=IsRejectedFilter,
+    completed=IsCompletedFilter,
     assigned=IsAssignedFilter,
     annotation_project=AnnotationProjectFilter,
     dataset=DatasetFilter,

back/src/whombat/models/annotation_task.py

@@ -100,12 +100,14 @@ class AnnotationTask(Base):
     clip: orm.Mapped[Clip] = orm.relationship(
         init=False,
         repr=False,
+        lazy="joined",
     )
     clip_annotation: orm.Mapped[ClipAnnotation] = orm.relationship(
         back_populates="annotation_task",
         cascade="all, delete-orphan",
         init=False,
         single_parent=True,
+        lazy="joined",
     )
     status_badges: orm.Mapped[list["AnnotationStatusBadge"]] = (
         orm.relationship(

back/src/whombat/schemas/annotation_tasks.py

@@ -6,6 +6,8 @@
 from soundevent.data import AnnotationState
 
 from whombat.schemas.base import BaseSchema
+from whombat.schemas.clip_annotations import ClipAnnotation
+from whombat.schemas.clips import Clip
 from whombat.schemas.users import SimpleUser
 
 __all__ = [
@@ -50,6 +52,12 @@ class AnnotationTask(BaseSchema):
     status_badges: list[AnnotationStatusBadge]
     """Status badges for the task."""
 
+    clip: Clip
+    """Clip of the task."""
+
+    clip_annotation: ClipAnnotation
+    """Clip annotation for the task."""
+
 
 class AnnotationTaskUpdate(BaseModel):
     """Schema for updating a task."""

front/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "format": "prettier --write .",
     "lint": "next lint",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src"
   },

front/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

front/src/api/annotation_tasks.ts

@@ -32,7 +32,9 @@ export const AnnotationTaskFilterSchema = z.object({
   assigned: z.boolean().optional(),
   verified: z.boolean().optional(),
   rejected: z.boolean().optional(),
+  completed: z.boolean().optional(),
   assigned_to: UserSchema.optional(),
+  search_recordings: z.string().optional(),
 });
 
 export type AnnotationTaskFilter = z.input<typeof AnnotationTaskFilterSchema>;
@@ -90,12 +92,15 @@ export function registerAnnotationTasksAPI(
         recording_tag__key: params.recording_tag?.key,
         recording_tag__value: params.recording_tag?.value,
         sound_event_annotation_tag__key: params.sound_event_annotation_tag?.key,
-        sound_event_annotation_tag__value: params.sound_event_annotation_tag?.value,
+        sound_event_annotation_tag__value:
+          params.sound_event_annotation_tag?.value,
         pending__eq: params.pending,
         assigned__eq: params.assigned,
         verified__eq: params.verified,
         rejected__eq: params.rejected,
+        completed__eq: params.completed,
         assigned_to__eq: params.assigned_to?.id,
+        search_recordings: params.search_recordings,
       },
     });
     return AnnotationTaskPageSchema.parse(response.data);

front/src/api/clip_predictions.ts

@@ -9,7 +9,7 @@ import {
   PredictionTagSchema,
   RecordingSchema,
   UserRunSchema,
-  PredictedTagFilterSchema
+  PredictedTagFilterSchema,
 } from "@/schemas";
 
 import type { ClipPrediction, Tag } from "@/types";

front/src/app/(auth)/first/page.tsx

@@ -28,13 +28,10 @@ export default function Page() {
     [router],
   );
 
-  const handleAuthenticationError = useCallback(
-    () => {
-      toast.error("This is not your first time here, is it?");
-      router.push("/login");
-    },
-    [router],
-  );
+  const handleAuthenticationError = useCallback(() => {
+    toast.error("This is not your first time here, is it?");
+    router.push("/login");
+  }, [router]);
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">

front/src/app/(base)/annotation_projects/detail/clips/page.css

@@ -0,0 +1,24 @@
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer.isResizing {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
+}

front/src/app/(base)/annotation_projects/detail/clips/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { notFound } from "next/navigation";
+import { useContext } from "react";
+
+import AnnotationProjectTaskClips from "@/components/annotation_projects/AnnotationProjectTaskClips";
+import AnnotationProject from "../context";
+
+import type { AnnotationTask } from "@/types";
+
+import "./page.css";
+
+function getAnnotationTaskLink(annotationTask: AnnotationTask): string {
+  return `detail/annotation/?annotation_task_uuid=${annotationTask.uuid}`;
+}
+
+export default function Page() {
+  const annotationProject = useContext(AnnotationProject);
+
+  if (annotationProject == null) {
+    return notFound();
+  }
+
+  return (
+    <div className="w-full">
+      <AnnotationProjectTaskClips
+        annotationProject={annotationProject}
+        getAnnotationTaskLink={getAnnotationTaskLink}
+      />
+    </div>
+  );
+}

front/src/app/(base)/annotation_projects/detail/tasks/page.tsx

@@ -23,7 +23,10 @@ export default function Page() {
 
   return (
     <Center>
-      <AnnotationProjectTasks annotationProject={project} onAddTasks={onCreateTasks} />
+      <AnnotationProjectTasks
+        annotationProject={project}
+        onAddTasks={onCreateTasks}
+      />
     </Center>
   );
 }

front/src/app/(base)/exploration/page.tsx

@@ -11,7 +11,7 @@ export default function Page() {
       <div className="flex flex-col gap-4">
         <h1 className="text-center text-5xl">Exploration Tools</h1>
         <h2 className="text-center text-3xl text-stone-500 dark:text-stone-500">
-            Utilize the provided tools to delve into your data
+          Utilize the provided tools to delve into your data
         </h2>
       </div>
       <div className="flex flex-row gap-8 w-full justify-center">

front/src/app/(base)/exploration/recordings/page.tsx

@@ -25,4 +25,3 @@ export default function Page() {
     />
   );
 }
-

front/src/app/(base)/page.tsx

@@ -8,9 +8,7 @@ export default function Page() {
     <div className="container mx-auto p-16">
       <div className="flex flex-col gap-4">
         <h1 className="text-center text-7xl">
-          <span className="text-6xl font-thin">
-            Welcome to
-          </span>
+          <span className="text-6xl font-thin">Welcome to</span>
           <br />
           <Image
             src="/whombat.svg"

front/src/components/annotation_projects/AnnotationProjectHeader.tsx

@@ -6,7 +6,13 @@ import {
 
 import Header from "@/components/Header";
 import { H1 } from "@/components/Headings";
-import { DatasetIcon, EditIcon, TagsIcon, TasksIcon } from "@/components/icons";
+import {
+  DatasetIcon,
+  EditIcon,
+  ClipsIcon,
+  TagsIcon,
+  TasksIcon,
+} from "@/components/icons";
 import Tabs from "@/components/Tabs";
 
 import type { AnnotationProject } from "@/types";
@@ -39,6 +45,17 @@ export default function AnnotationProjectHeader({
                 );
               },
             },
+            {
+              id: "clips",
+              title: "Clips",
+              isActive: selectedLayoutSegment === "clips",
+              icon: <ClipsIcon className="w-5 h-5 align-middle" />,
+              onClick: () => {
+                router.push(
+                  `/annotation_projects/detail/clips/?${params.toString()}`,
+                );
+              },
+            },
             {
               id: "annotate",
               title: "Annotate",

front/src/components/annotation_projects/AnnotationProjectTaskClips.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+
+import AnnotationTaskTable from "@/components/annotation_tasks/AnnotationTaskTable";
+
+import type { AnnotationProject, AnnotationTask } from "@/types";
+
+export default function AnnotationProjectTaskClips({
+  annotationProject,
+  getAnnotationTaskLink: getAnnotationTaskLinkFn,
+}: {
+  annotationProject: AnnotationProject;
+  getAnnotationTaskLink?: (annotationTask: AnnotationTask) => string;
+}) {
+  const getAnnotationTaskLink = useMemo(() => {
+    if (getAnnotationTaskLinkFn == null) return undefined;
+
+    return (annotationTask: AnnotationTask) => {
+      const url = getAnnotationTaskLinkFn(annotationTask);
+      return `${url}&annotation_project_uuid=${annotationProject.uuid}`;
+    };
+  }, [getAnnotationTaskLinkFn, annotationProject.uuid]);
+  const filter = useMemo(
+    () => ({ annotation_project: annotationProject }),
+    [annotationProject],
+  );
+
+  return (
+    <AnnotationTaskTable
+      filter={filter}
+      fixed={["annotation_project"]}
+      getAnnotationTaskLink={getAnnotationTaskLink}
+      // pathFormatter={pathFormatter}  TODO: if there was a dataset column, the path could be formatted as in the recordings table
+    />
+  );
+}