Merge pull request #19 from mbsantiago/fix/add-tags-to-projects

Fix: Add Tag to Project on Creation
mbsantiago · May 23, 2024 · 1324f46 · 1324f46
2 parents 610c1c6 + f99bd4d
commit 1324f46
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,14 +5,15 @@ 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,
   clipAnnotation,
   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
@@ -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
@@ -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
@@ -25,13 +25,15 @@ export default function ClipAnnotationTags({
   onRemoveTag,
   onClickTag,
   onClearTags,
+  onCreateTag,
   disabled = false,
 }: {
   clipAnnotation?: ClipAnnotation;
   tagFilter?: TagFilter;
   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
@@ -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
@@ -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
@@ -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
@@ -148,6 +148,7 @@ export default forwardRef<HTMLInputElement, TagSearchBarProps>(
                       {
                         onSuccess: (tag) => {
                           onCreate?.(tag);
+                          onSelect?.(tag);
                         },
                       },
                     );