Skip to content

Commit 1324f46

Browse files
mbsantiagombsantiago
authored
Merge pull request #19 from mbsantiago/fix/add-tags-to-projects
 Fix: Add Tag to Project on Creation
2 parents 610c1c6 + f99bd4d commit 1324f46

File tree

12 files changed

+46
-11
lines changed

12 files changed

+46
-11
lines changed

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import { usePathname, useRouter, useSearchParams } from "next/navigation";
33
import { useCallback, useContext, useMemo } from "react";
4+
import { useMutation } from "@tanstack/react-query";
45
import toast from "react-hot-toast";
56

67
import UserContext from "@/app/(base)/context";
@@ -12,7 +13,8 @@ import { changeURLParam } from "@/utils/url";
1213

1314
import AnnotationProjectContext from "../context";
1415

15-
import type { AnnotationTask, SpectrogramParameters } from "@/types";
16+
import api from "@/app/api";
17+
import type { AnnotationTask, SpectrogramParameters, Tag } from "@/types";
1618

1719
export default function Page() {
1820
const search = useSearchParams();
@@ -40,6 +42,12 @@ export default function Page() {
4042
[setParameters],
4143
);
4244

45+
const { mutate: handleTagCreate } = useMutation({
46+
mutationFn: async (tag: Tag) => {
47+
return await api.annotationProjects.addTag(project, tag);
48+
},
49+
});
50+
4351
const onChangeTask = useCallback(
4452
(task: AnnotationTask) => {
4553
const url = changeURLParam({
@@ -89,6 +97,7 @@ export default function Page() {
8997
onCompleteTask={handleCompleteTask}
9098
onRejectTask={handleRejectTask}
9199
onVerifyTask={handleVerifyTask}
100+
onCreateTag={handleTagCreate}
92101
/>
93102
);
94103
}

‎front/src/components/Dialog.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ export default function Dialog({
1111
children,
1212
label,
1313
open = false,
14+
width = "max-w-md",
1415
...rest
1516
}: {
1617
title?: ReactNode;
1718
label: ReactNode;
1819
open?: boolean;
20+
width?: string;
1921
children: ({ close }: { close: () => void }) => ReactNode;
2022
} & Omit<ComponentProps<typeof Button>, "onClick" | "title" | "children">) {
2123
let [isOpen, setIsOpen] = useState(open);
@@ -25,11 +27,11 @@ export default function Dialog({
2527
{label}
2628
</Button>
2729
<DialogOverlay
28-
title={<div className="max-w-md">{title}</div>}
30+
title={<div>{title}</div>}
2931
isOpen={isOpen}
3032
onClose={() => setIsOpen(false)}
3133
>
32-
{({ close }) => <div className="max-w-md">{children({ close })}</div>}
34+
{({ close }) => <div className={width}>{children({ close })}</div>}
3335
</DialogOverlay>
3436
</>
3537
);

‎front/src/components/annotation/AnnotateTasks.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default function AnnotateTasks({
3232
annotationTask,
3333
currentUser,
3434
instructions,
35+
onCreateTag,
3536
onCreateSoundEventAnnotation,
3637
onUpdateSoundEventAnnotation,
3738
onAddSoundEventTag,
@@ -56,6 +57,7 @@ export default function AnnotateTasks({
5657
annotationTask?: AnnotationTask;
5758
/** The user who is annotating */
5859
currentUser: User;
60+
onCreateTag?: (tag: Tag) => void;
5961
onCreateSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
6062
onUpdateSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
6163
onAddSoundEventTag?: (annotation: SoundEventAnnotation) => void;
@@ -178,6 +180,7 @@ export default function AnnotateTasks({
178180
onParameterSave={onParameterSave}
179181
onSelectAnnotation={setSelectedAnnotation}
180182
tagFilter={tagFilter}
183+
onCreateTag={onCreateTag}
181184
onAddSoundEventTag={onAddSoundEventTag}
182185
onRemoveSoundEventTag={onRemoveSoundEventTag}
183186
onCreateSoundEventAnnotation={onCreateSoundEventAnnotation}
@@ -194,6 +197,7 @@ export default function AnnotateTasks({
194197
tagFilter={tagFilter}
195198
soundEventAnnotation={selectedAnnotation}
196199
onAddTag={onAddSoundEventTag}
200+
onCreateTag={onCreateTag}
197201
onRemoveTag={onRemoveSoundEventTag}
198202
/>
199203
)}
@@ -205,6 +209,7 @@ export default function AnnotateTasks({
205209
tags={tagPalette}
206210
tagFilter={tagFilter}
207211
onClick={addTag.mutate}
212+
onCreateTag={onCreateTag}
208213
onAddTag={handleAddTagToPalette}
209214
onRemoveTag={handleRemoveTagFromPalette}
210215
onClearTags={handleClearTagPalette}
@@ -215,6 +220,7 @@ export default function AnnotateTasks({
215220
onAddTag={addTag.mutate}
216221
onRemoveTag={removeTag.mutate}
217222
onClearTags={onClearTags}
223+
onCreateTag={onCreateTag}
218224
/>
219225
<ClipAnnotationNotes
220226
onCreateNote={addNote.mutate}

‎front/src/components/annotation/AnnotationTagPalette.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ export default function AnnotationTagPalette({
1515
tagFilter,
1616
onClick,
1717
onAddTag,
18+
onCreateTag,
1819
onRemoveTag,
1920
onClearTags,
2021
}: {
2122
tags: Tag[];
2223
tagFilter?: TagFilter;
24+
onCreateTag?: (tag: Tag) => void;
2325
onClick?: (tag: Tag) => void;
2426
onAddTag?: (tag: Tag) => void;
2527
onRemoveTag?: (tag: Tag) => void;
@@ -51,7 +53,7 @@ export default function AnnotationTagPalette({
5153
<div className="grow">
5254
<TagSearchBar
5355
onSelect={onAddTag}
54-
onCreate={onAddTag}
56+
onCreate={onCreateTag}
5557
initialFilter={tagFilter}
5658
placeholder="Add tags..."
5759
/>

‎front/src/components/annotation/SelectedSoundEventAnnotation.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import SoundEventAnnotationTags from "@/components/sound_event_annotations/Sound
55
import useSoundEventAnnotation from "@/hooks/api/useSoundEventAnnotation";
66

77
import type { TagFilter } from "@/api/tags";
8-
import type { ClipAnnotation, SoundEventAnnotation } from "@/types";
8+
import type { ClipAnnotation, SoundEventAnnotation, Tag } from "@/types";
99

1010
export default function SelectedSoundEventAnnotation({
1111
soundEventAnnotation: data,
1212
clipAnnotation,
1313
tagFilter,
1414
onAddTag,
1515
onRemoveTag,
16+
onCreateTag,
1617
}: {
1718
//* The sound event annotation to display */
1819
soundEventAnnotation: SoundEventAnnotation;
@@ -22,6 +23,7 @@ export default function SelectedSoundEventAnnotation({
2223
tagFilter?: TagFilter;
2324
onAddTag?: (annotation: SoundEventAnnotation) => void;
2425
onRemoveTag?: (annotation: SoundEventAnnotation) => void;
26+
onCreateTag?: (tag: Tag) => void;
2527
}) {
2628
const soundEventAnnotation = useSoundEventAnnotation({
2729
uuid: data.uuid,
@@ -43,6 +45,7 @@ export default function SelectedSoundEventAnnotation({
4345
soundEventAnnotation={soundEventAnnotation.data || data}
4446
onAddTag={soundEventAnnotation.addTag.mutate}
4547
onRemoveTag={soundEventAnnotation.removeTag.mutate}
48+
onCreateTag={onCreateTag}
4649
/>
4750
</div>
4851
</Card>

‎front/src/components/annotation_projects/AnnotationProjectList.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,14 @@ export default function AnnotationProjectList({
5858
<Dialog
5959
mode="text"
6060
title="Create Annotation Project"
61+
width="w-96"
6162
label={
6263
<>
6364
<AddIcon className="inline-block w-4 h-4 align-middle" /> Create
6465
</>
6566
}
6667
>
67-
{() => (
68-
<div className="w-max-prose">
69-
<AnnotationProjectCreate onCreate={onCreate} />
70-
</div>
71-
)}
68+
{() => <AnnotationProjectCreate onCreate={onCreate} />}
7269
</Dialog>
7370
</div>
7471
<div className="h-full">

‎front/src/components/clip_annotations/ClipAnnotationSpectrogram.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default function ClipAnnotationSpectrogram({
4646
onDeleteSoundEventAnnotation,
4747
onParameterSave,
4848
onSelectAnnotation,
49+
onCreateTag,
4950
}: {
5051
clipAnnotation: ClipAnnotation;
5152
parameters?: SpectrogramParameters;
@@ -66,6 +67,7 @@ export default function ClipAnnotationSpectrogram({
6667
onDeleteSoundEventAnnotation?: (annotation: SoundEventAnnotation) => void;
6768
onAddSoundEventTag?: (annotation: SoundEventAnnotation) => void;
6869
onRemoveSoundEventTag?: (annotation: SoundEventAnnotation) => void;
70+
onCreateTag?: (tag: Tag) => void;
6971
}) {
7072
const [isAnnotating, setIsAnnotating] = useState(false);
7173
const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -252,6 +254,7 @@ export default function ClipAnnotationSpectrogram({
252254
disabled={disabled}
253255
tags={annotate.tags}
254256
filter={tagFilter}
257+
onCreate={onCreateTag}
255258
>
256259
<canvas
257260
ref={canvasRef}

‎front/src/components/clip_annotations/ClipAnnotationTags.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ export default function ClipAnnotationTags({
2525
onRemoveTag,
2626
onClickTag,
2727
onClearTags,
28+
onCreateTag,
2829
disabled = false,
2930
}: {
3031
clipAnnotation?: ClipAnnotation;
3132
tagFilter?: TagFilter;
3233
onAddTag?: (tag: Tag) => void;
3334
onClickTag?: (tag: Tag) => void;
3435
onRemoveTag?: (tag: Tag) => void;
36+
onCreateTag?: (tag: Tag) => void;
3537
onClearTags?: () => void;
3638
disabled?: boolean;
3739
}) {
@@ -68,6 +70,7 @@ export default function ClipAnnotationTags({
6870
<AddTagButton
6971
variant="primary"
7072
onAdd={onAddTag}
73+
onCreate={onCreateTag}
7174
filter={tagFilter}
7275
text="Add tags"
7376
placeholder="Add tags..."

‎front/src/components/datasets/DatasetList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default function DatasetList(props: {
5555

5656
return (
5757
<div className="flex flex-col p-8 space-y-2 w-full">
58-
<div className="flex flex-row space-x-4">
58+
<div className96="flex flex-row space-x-4">
5959
<div className="flex-grow">
6060
<Search
6161
label="Search"

‎front/src/components/sound_event_annotations/SoundEventAnnotationTags.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,14 @@ export default function SoundEventAnnotationTags({
2020
onAddTag,
2121
onRemoveTag,
2222
onClickTag,
23+
onCreateTag,
2324
}: {
2425
soundEventAnnotation: SoundEventAnnotation;
2526
tagFilter?: TagFilter;
2627
onAddTag?: (tag: Tag) => void;
2728
onClickTag?: (tag: Tag) => void;
2829
onRemoveTag?: (tag: Tag) => void;
30+
onCreateTag?: (tag: Tag) => void;
2931
}) {
3032
const tags = useMemo(
3133
() => soundEventAnnotation.tags || [],
@@ -55,6 +57,7 @@ export default function SoundEventAnnotationTags({
5557
<AddTagButton
5658
variant="primary"
5759
onAdd={onAddTag}
60+
onCreate={onCreateTag}
5861
filter={tagFilter}
5962
text="Add tags"
6063
placeholder="Add tags..."

‎front/src/components/tags/AddTagButton.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ import type { HTMLProps } from "react";
1111

1212
function TagBarPopover({
1313
onClose,
14+
onCreate,
1415
onAdd,
1516
filter,
1617
...props
1718
}: {
1819
onClose?: () => void;
20+
onCreate?: (tag: TagType) => void;
1921
filter?: TagFilter;
2022
onAdd?: (tag: TagType) => void;
2123
} & Omit<HTMLProps<HTMLInputElement>, "value" | "onChange" | "onBlur">) {
@@ -26,6 +28,7 @@ function TagBarPopover({
2628
onAdd?.(tag);
2729
}}
2830
onCreate={(tag) => {
31+
onCreate?.(tag);
2932
onAdd?.(tag);
3033
}}
3134
autoFocus={true}
@@ -44,6 +47,7 @@ function TagBarPopover({
4447

4548
export default function AddTagButton({
4649
onAdd,
50+
onCreate,
4751
text = "add",
4852
variant = "secondary",
4953
filter,
@@ -52,6 +56,7 @@ export default function AddTagButton({
5256
text?: string;
5357
filter?: TagFilter;
5458
onAdd?: (tag: TagType) => void;
59+
onCreate?: (tag: TagType) => void;
5560
variant?: "primary" | "secondary" | "danger";
5661
} & Omit<HTMLProps<HTMLInputElement>, "value" | "onChange" | "onBlur">) {
5762
return (
@@ -79,6 +84,7 @@ export default function AddTagButton({
7984
<TagBarPopover
8085
onClose={close}
8186
onAdd={onAdd}
87+
onCreate={onCreate}
8288
filter={filter}
8389
{...props}
8490
/>

‎front/src/components/tags/TagSearchBar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ export default forwardRef<HTMLInputElement, TagSearchBarProps>(
148148
{
149149
onSuccess: (tag) => {
150150
onCreate?.(tag);
151+
onSelect?.(tag);
151152
},
152153
},
153154
);

0 commit comments

Comments
 (0)