From f99bd4d1d4371644b27928c480485a8eda588dba Mon Sep 17 00:00:00 2001
From: mbsantiago <santiago.mbal@gmail.com>
Date: Thu, 23 May 2024 11:38:41 +0100
Subject: [PATCH] Added onCreate callback to add tag to projects when created

---
 .../annotation_projects/detail/annotation/page.tsx    | 11 ++++++++++-
 front/src/components/Dialog.tsx                       |  6 ++++--
 front/src/components/annotation/AnnotateTasks.tsx     |  6 ++++++
 .../components/annotation/AnnotationTagPalette.tsx    |  4 +++-
 .../annotation/SelectedSoundEventAnnotation.tsx       |  5 ++++-
 .../annotation_projects/AnnotationProjectList.tsx     |  7 ++-----
 .../clip_annotations/ClipAnnotationSpectrogram.tsx    |  3 +++
 .../clip_annotations/ClipAnnotationTags.tsx           |  3 +++
 front/src/components/datasets/DatasetList.tsx         |  2 +-
 .../SoundEventAnnotationTags.tsx                      |  3 +++
 front/src/components/tags/AddTagButton.tsx            |  6 ++++++
 front/src/components/tags/TagSearchBar.tsx            |  1 +
 12 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx b/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx
index f4aab51d..35e217bc 100644
--- a/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useContext, useMemo } from "react";
+import { useMutation } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 
 import UserContext from "@/app/(base)/context";
@@ -12,7 +13,8 @@ import { changeURLParam } from "@/utils/url";
 
 import AnnotationProjectContext from "../context";
 
-import type { AnnotationTask, SpectrogramParameters } from "@/types";
+import api from "@/app/api";
+import type { AnnotationTask, SpectrogramParameters, Tag } from "@/types";
 
 export default function Page() {
   const search = useSearchParams();
@@ -40,6 +42,12 @@ export default function Page() {
     [setParameters],
   );
 
+  const { mutate: handleTagCreate } = useMutation({
+    mutationFn: async (tag: Tag) => {
+      return await api.annotationProjects.addTag(project, tag);
+    },
+  });
+
   const onChangeTask = useCallback(
     (task: AnnotationTask) => {
       const url = changeURLParam({
@@ -89,6 +97,7 @@ export default function Page() {
       onCompleteTask={handleCompleteTask}
       onRejectTask={handleRejectTask}
       onVerifyTask={handleVerifyTask}
+      onCreateTag={handleTagCreate}
     />
   );
 }
diff --git a/front/src/components/Dialog.tsx b/front/src/components/Dialog.tsx
index 26110662..614cec47 100644
--- a/front/src/components/Dialog.tsx
+++ b/front/src/components/Dialog.tsx
@@ -11,11 +11,13 @@ export default function Dialog({
   children,
   label,
   open = false,
+  width = "max-w-md",
   ...rest
 }: {
   title?: ReactNode;
   label: ReactNode;
   open?: boolean;
+  width?: string;
   children: ({ close }: { close: () => void }) => ReactNode;
 } & Omit<ComponentProps<typeof Button>, "onClick" | "title" | "children">) {
   let [isOpen, setIsOpen] = useState(open);
@@ -25,11 +27,11 @@ export default function Dialog({
         {label}
       </Button>
       <DialogOverlay
-        title={<div className="max-w-md">{title}</div>}
+        title={<div>{title}</div>}
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
       >
-        {({ close }) => <div className="max-w-md">{children({ close })}</div>}
+        {({ close }) => <div className={width}>{children({ close })}</div>}
       </DialogOverlay>
     </>
   );
diff --git a/front/src/components/annotation/AnnotateTasks.tsx b/front/src/components/annotation/AnnotateTasks.tsx
index 71651ec4..925f274f 100644
--- a/front/src/components/annotation/AnnotateTasks.tsx
+++ b/front/src/components/annotation/AnnotateTasks.tsx
@@ -32,6 +32,7 @@ export default function AnnotateTasks({
   annotationTask,
   currentUser,
   instructions,
+  onCreateTag,
   onCreateSoundEventAnnotation,
   onUpdateSoundEventAnnotation,
   onAddSoundEventTag,
@@ -56,6 +57,7 @@ export default function AnnotateTasks({
   annotationTask?: AnnotationTask;
   /** The user who is annotating */
   currentUser: User;
+  onCreateTag?: (tag: Tag) => void;
   onCreateSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
   onUpdateSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
   onAddSoundEventTag?: (annotation: SoundEventAnnotation) => void;
@@ -178,6 +180,7 @@ export default function AnnotateTasks({
                 onParameterSave={onParameterSave}
                 onSelectAnnotation={setSelectedAnnotation}
                 tagFilter={tagFilter}
+                onCreateTag={onCreateTag}
                 onAddSoundEventTag={onAddSoundEventTag}
                 onRemoveSoundEventTag={onRemoveSoundEventTag}
                 onCreateSoundEventAnnotation={onCreateSoundEventAnnotation}
@@ -194,6 +197,7 @@ export default function AnnotateTasks({
                   tagFilter={tagFilter}
                   soundEventAnnotation={selectedAnnotation}
                   onAddTag={onAddSoundEventTag}
+                  onCreateTag={onCreateTag}
                   onRemoveTag={onRemoveSoundEventTag}
                 />
               )}
@@ -205,6 +209,7 @@ export default function AnnotateTasks({
             tags={tagPalette}
             tagFilter={tagFilter}
             onClick={addTag.mutate}
+            onCreateTag={onCreateTag}
             onAddTag={handleAddTagToPalette}
             onRemoveTag={handleRemoveTagFromPalette}
             onClearTags={handleClearTagPalette}
@@ -215,6 +220,7 @@ export default function AnnotateTasks({
             onAddTag={addTag.mutate}
             onRemoveTag={removeTag.mutate}
             onClearTags={onClearTags}
+            onCreateTag={onCreateTag}
           />
           <ClipAnnotationNotes
             onCreateNote={addNote.mutate}
diff --git a/front/src/components/annotation/AnnotationTagPalette.tsx b/front/src/components/annotation/AnnotationTagPalette.tsx
index 65a231d4..6d089ea7 100644
--- a/front/src/components/annotation/AnnotationTagPalette.tsx
+++ b/front/src/components/annotation/AnnotationTagPalette.tsx
@@ -15,11 +15,13 @@ export default function AnnotationTagPalette({
   tagFilter,
   onClick,
   onAddTag,
+  onCreateTag,
   onRemoveTag,
   onClearTags,
 }: {
   tags: Tag[];
   tagFilter?: TagFilter;
+  onCreateTag?: (tag: Tag) => void;
   onClick?: (tag: Tag) => void;
   onAddTag?: (tag: Tag) => void;
   onRemoveTag?: (tag: Tag) => void;
@@ -51,7 +53,7 @@ export default function AnnotationTagPalette({
         <div className="grow">
           <TagSearchBar
             onSelect={onAddTag}
-            onCreate={onAddTag}
+            onCreate={onCreateTag}
             initialFilter={tagFilter}
             placeholder="Add tags..."
           />
diff --git a/front/src/components/annotation/SelectedSoundEventAnnotation.tsx b/front/src/components/annotation/SelectedSoundEventAnnotation.tsx
index 56ab864f..83f9042b 100644
--- a/front/src/components/annotation/SelectedSoundEventAnnotation.tsx
+++ b/front/src/components/annotation/SelectedSoundEventAnnotation.tsx
@@ -5,7 +5,7 @@ import SoundEventAnnotationTags from "@/components/sound_event_annotations/Sound
 import useSoundEventAnnotation from "@/hooks/api/useSoundEventAnnotation";
 
 import type { TagFilter } from "@/api/tags";
-import type { ClipAnnotation, SoundEventAnnotation } from "@/types";
+import type { ClipAnnotation, SoundEventAnnotation, Tag } from "@/types";
 
 export default function SelectedSoundEventAnnotation({
   soundEventAnnotation: data,
@@ -13,6 +13,7 @@ export default function SelectedSoundEventAnnotation({
   tagFilter,
   onAddTag,
   onRemoveTag,
+  onCreateTag,
 }: {
   //* The sound event annotation to display */
   soundEventAnnotation: SoundEventAnnotation;
@@ -22,6 +23,7 @@ export default function SelectedSoundEventAnnotation({
   tagFilter?: TagFilter;
   onAddTag?: (annotation: SoundEventAnnotation) => void;
   onRemoveTag?: (annotation: SoundEventAnnotation) => void;
+  onCreateTag?: (tag: Tag) => void;
 }) {
   const soundEventAnnotation = useSoundEventAnnotation({
     uuid: data.uuid,
@@ -43,6 +45,7 @@ export default function SelectedSoundEventAnnotation({
             soundEventAnnotation={soundEventAnnotation.data || data}
             onAddTag={soundEventAnnotation.addTag.mutate}
             onRemoveTag={soundEventAnnotation.removeTag.mutate}
+            onCreateTag={onCreateTag}
           />
         </div>
       </Card>
diff --git a/front/src/components/annotation_projects/AnnotationProjectList.tsx b/front/src/components/annotation_projects/AnnotationProjectList.tsx
index aef157f3..24cf3eed 100644
--- a/front/src/components/annotation_projects/AnnotationProjectList.tsx
+++ b/front/src/components/annotation_projects/AnnotationProjectList.tsx
@@ -58,17 +58,14 @@ export default function AnnotationProjectList({
           <Dialog
             mode="text"
             title="Create Annotation Project"
+            width="w-96"
             label={
               <>
                 <AddIcon className="inline-block w-4 h-4 align-middle" /> Create
               </>
             }
           >
-            {() => (
-              <div className="w-max-prose">
-                <AnnotationProjectCreate onCreate={onCreate} />
-              </div>
-            )}
+            {() => <AnnotationProjectCreate onCreate={onCreate} />}
           </Dialog>
         </div>
         <div className="h-full">
diff --git a/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx b/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx
index 3d914947..81dde5fd 100644
--- a/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx
+++ b/front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx
@@ -46,6 +46,7 @@ export default function ClipAnnotationSpectrogram({
   onDeleteSoundEventAnnotation,
   onParameterSave,
   onSelectAnnotation,
+  onCreateTag,
 }: {
   clipAnnotation: ClipAnnotation;
   parameters?: SpectrogramParameters;
@@ -66,6 +67,7 @@ export default function ClipAnnotationSpectrogram({
   onDeleteSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
   onAddSoundEventTag?: (annotation: SoundEventAnnotation) => void;
   onRemoveSoundEventTag?: (annotation: SoundEventAnnotation) => void;
+  onCreateTag?: (tag: Tag) => void;
 }) {
   const [isAnnotating, setIsAnnotating] = useState(false);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -252,6 +254,7 @@ export default function ClipAnnotationSpectrogram({
           disabled={disabled}
           tags={annotate.tags}
           filter={tagFilter}
+          onCreate={onCreateTag}
         >
           <canvas
             ref={canvasRef}
diff --git a/front/src/components/clip_annotations/ClipAnnotationTags.tsx b/front/src/components/clip_annotations/ClipAnnotationTags.tsx
index 80d41cf8..e172f3a7 100644
--- a/front/src/components/clip_annotations/ClipAnnotationTags.tsx
+++ b/front/src/components/clip_annotations/ClipAnnotationTags.tsx
@@ -25,6 +25,7 @@ export default function ClipAnnotationTags({
   onRemoveTag,
   onClickTag,
   onClearTags,
+  onCreateTag,
   disabled = false,
 }: {
   clipAnnotation?: ClipAnnotation;
@@ -32,6 +33,7 @@ export default function ClipAnnotationTags({
   onAddTag?: (tag: Tag) => void;
   onClickTag?: (tag: Tag) => void;
   onRemoveTag?: (tag: Tag) => void;
+  onCreateTag?: (tag: Tag) => void;
   onClearTags?: () => void;
   disabled?: boolean;
 }) {
@@ -68,6 +70,7 @@ export default function ClipAnnotationTags({
           <AddTagButton
             variant="primary"
             onAdd={onAddTag}
+            onCreate={onCreateTag}
             filter={tagFilter}
             text="Add tags"
             placeholder="Add tags..."
diff --git a/front/src/components/datasets/DatasetList.tsx b/front/src/components/datasets/DatasetList.tsx
index 7a0d8cd4..a816ee6a 100644
--- a/front/src/components/datasets/DatasetList.tsx
+++ b/front/src/components/datasets/DatasetList.tsx
@@ -55,7 +55,7 @@ export default function DatasetList(props: {
 
   return (
     <div className="flex flex-col p-8 space-y-2 w-full">
-      <div className="flex flex-row space-x-4">
+      <div className96="flex flex-row space-x-4">
         <div className="flex-grow">
           <Search
             label="Search"
diff --git a/front/src/components/sound_event_annotations/SoundEventAnnotationTags.tsx b/front/src/components/sound_event_annotations/SoundEventAnnotationTags.tsx
index 424b276e..99cd92e7 100644
--- a/front/src/components/sound_event_annotations/SoundEventAnnotationTags.tsx
+++ b/front/src/components/sound_event_annotations/SoundEventAnnotationTags.tsx
@@ -20,12 +20,14 @@ export default function SoundEventAnnotationTags({
   onAddTag,
   onRemoveTag,
   onClickTag,
+  onCreateTag,
 }: {
   soundEventAnnotation: SoundEventAnnotation;
   tagFilter?: TagFilter;
   onAddTag?: (tag: Tag) => void;
   onClickTag?: (tag: Tag) => void;
   onRemoveTag?: (tag: Tag) => void;
+  onCreateTag?: (tag: Tag) => void;
 }) {
   const tags = useMemo(
     () => soundEventAnnotation.tags || [],
@@ -55,6 +57,7 @@ export default function SoundEventAnnotationTags({
         <AddTagButton
           variant="primary"
           onAdd={onAddTag}
+          onCreate={onCreateTag}
           filter={tagFilter}
           text="Add tags"
           placeholder="Add tags..."
diff --git a/front/src/components/tags/AddTagButton.tsx b/front/src/components/tags/AddTagButton.tsx
index 91ef31de..8169bca7 100644
--- a/front/src/components/tags/AddTagButton.tsx
+++ b/front/src/components/tags/AddTagButton.tsx
@@ -11,11 +11,13 @@ import type { HTMLProps } from "react";
 
 function TagBarPopover({
   onClose,
+  onCreate,
   onAdd,
   filter,
   ...props
 }: {
   onClose?: () => void;
+  onCreate?: (tag: TagType) => void;
   filter?: TagFilter;
   onAdd?: (tag: TagType) => void;
 } & Omit<HTMLProps<HTMLInputElement>, "value" | "onChange" | "onBlur">) {
@@ -26,6 +28,7 @@ function TagBarPopover({
         onAdd?.(tag);
       }}
       onCreate={(tag) => {
+        onCreate?.(tag);
         onAdd?.(tag);
       }}
       autoFocus={true}
@@ -44,6 +47,7 @@ function TagBarPopover({
 
 export default function AddTagButton({
   onAdd,
+  onCreate,
   text = "add",
   variant = "secondary",
   filter,
@@ -52,6 +56,7 @@ export default function AddTagButton({
   text?: string;
   filter?: TagFilter;
   onAdd?: (tag: TagType) => void;
+  onCreate?: (tag: TagType) => void;
   variant?: "primary" | "secondary" | "danger";
 } & Omit<HTMLProps<HTMLInputElement>, "value" | "onChange" | "onBlur">) {
   return (
@@ -79,6 +84,7 @@ export default function AddTagButton({
             <TagBarPopover
               onClose={close}
               onAdd={onAdd}
+              onCreate={onCreate}
               filter={filter}
               {...props}
             />
diff --git a/front/src/components/tags/TagSearchBar.tsx b/front/src/components/tags/TagSearchBar.tsx
index 29daec5f..0703ab10 100644
--- a/front/src/components/tags/TagSearchBar.tsx
+++ b/front/src/components/tags/TagSearchBar.tsx
@@ -148,6 +148,7 @@ export default forwardRef<HTMLInputElement, TagSearchBarProps>(
                       {
                         onSuccess: (tag) => {
                           onCreate?.(tag);
+                          onSelect?.(tag);
                         },
                       },
                     );