WIP Annotation Task Filter

mbsantiago · Sep 25, 2024 · 136eb8f · 136eb8f
1 parent 1567607
commit 136eb8f
Show file tree

Hide file tree

Showing 39 changed files with 449 additions and 156 deletions.
diff --git a/front/src/app/(auth)/login/page.tsx b/front/src/app/(auth)/login/page.tsx
@@ -8,7 +8,7 @@ import { z } from "zod";
 import api from "@/app/api";
 
 import { WhombatIcon } from "@/lib/components/icons";
-import { Input, InputGroup } from "@/lib/components/inputs/index";
+import { Input, Group } from "@/lib/components/inputs/index";
 import Info from "@/lib/components/ui/Info";
 import Link from "@/lib/components/ui/Link";
 
@@ -66,22 +66,22 @@ export default function LoginForm() {
       </p>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="mb-3">
-          <InputGroup
+          <Group
             label="Username"
             name="username"
             error={errors.username?.message}
           >
             <Input {...register("username")} />
-          </InputGroup>
+          </Group>
         </div>
         <div className="mb-3">
-          <InputGroup
+          <Group
             label="Password"
             name="password"
             error={errors.password?.message}
           >
             <Input type="password" {...register("password")} />
-          </InputGroup>
+          </Group>
         </div>
         <div>
           <Input type="submit" value="Sign in" />

diff --git a/front/src/app/components/annotation/AnnotationTasks.tsx b/front/src/app/components/annotation/AnnotationTasks.tsx
@@ -7,15 +7,16 @@ import useSpectrogramSettings from "@/app/hooks/settings/useSpectrogramSettings"
 import AnnotationProgress from "@/lib/components/annotation/AnnotationProgress";
 import AnnotationTaskBase from "@/lib/components/annotation/AnnotationTask";
 import AnnotationTaskStatus from "@/lib/components/annotation_tasks/AnnotationTaskStatus";
+import AnnotationTaskFilter from "@/lib/components/filters/AnnotationTaskFilter";
 
 import useAnnotateTasks from "@/lib/hooks/annotation/useAnnotateTasks";
 import useAnnotationTagPallete from "@/lib/hooks/annotation/useAnnotationTagPalette";
 
 import type { AnnotationProject, AnnotationTask } from "@/lib/types";
 
 import ClipAnnotationNotes from "../clip_annotations/ClipAnnotationNotes";
-import ClipAnnotationSpectrogram from "./AnnotationClip";
 import ClipAnnotationTags from "../clip_annotations/ClipAnnotationTags";
+import ClipAnnotationSpectrogram from "./AnnotationClip";
 import AnnotationContext from "./AnnotationContext";
 import AnnotationTagPalette from "./AnnotationTagPalette";
 
@@ -85,6 +86,13 @@ export default function AnnotateTasks({
           fixedFilterFields={["annotation_project"]}
           onSetFilterField={tasks.setFilter}
           onClearFilterField={tasks.clearFilter}
+          FilterMenu={() => (
+            <AnnotationTaskFilter
+              filter={tasks.filter}
+              onChangeField={tasks.setFilter}
+              onClearField={tasks.clearFilter}
+            />
+          )}
         />
       }
       Context={

diff --git a/front/src/lib/components/annotation/AnnotationProgress.tsx b/front/src/lib/components/annotation/AnnotationProgress.tsx
@@ -1,12 +1,12 @@
-import { useMemo } from "react";
+import { FC, useMemo } from "react";
 
 import ShortcutHelper from "@/lib/components/ShortcutHelper";
 import FilterBar from "@/lib/components/filters/FilterBar";
-import FilterMenu from "@/lib/components/filters/FilterMenu";
+import FilterButton from "@/lib/components/filters/FilterButton";
 import taskFilterDefs from "@/lib/components/filters/tasks";
-import { FilterIcon, NextIcon, PreviousIcon } from "@/lib/components/icons";
+import { NextIcon, PreviousIcon } from "@/lib/components/icons";
 import Toggle from "@/lib/components/inputs/Toggle";
-import Button, { getButtonClassName } from "@/lib/components/ui/Button";
+import Button from "@/lib/components/ui/Button";
 import Dialog from "@/lib/components/ui/Dialog";
 import KeyboardKey from "@/lib/components/ui/KeyboardKey";
 import ProgressBar from "@/lib/components/ui/ProgressBar";
@@ -31,6 +31,7 @@ export default function AnnotationProgress({
   onPrevious,
   onSetFilterField,
   onClearFilterField,
+  FilterMenu,
 }: {
   instructions: string;
   tasks: AnnotationTask[];
@@ -44,6 +45,7 @@ export default function AnnotationProgress({
   current?: number | null;
   onNext?: () => void;
   onPrevious?: () => void;
+  FilterMenu?: FC<{ close: () => void }>;
 }) {
   const {
     missing: pending,
@@ -116,23 +118,11 @@ export default function AnnotationProgress({
             }}
           />
         </div>
-        <FilterMenu
-          filterDef={taskFilterDefs}
-          onSetFilterField={onSetFilterField}
-          className={getButtonClassName({
-            variant: "info",
-            mode: "text",
-            padding: "p-1",
-          })}
-          button={
-            <>
-              <FilterIcon className="inline-block mr-1 w-5 h-5" />
-              <span className="text-sm align-middle whitespace-nowrap">
-                Filters:
-              </span>
-            </>
+        <FilterButton title="Filter Tasks">
+          {({ close }) =>
+            FilterMenu == null ? null : <FilterMenu close={close} />
           }
-        />
+        </FilterButton>
         <div className="overflow-x-auto">
           <FilterBar
             filter={filter}

diff --git a/front/src/lib/components/annotation_projects/AnnotationProjectCreate.tsx b/front/src/lib/components/annotation_projects/AnnotationProjectCreate.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 
 import {
   Input,
-  InputGroup,
+  Group,
   Submit,
   TextArea,
 } from "@/lib/components/inputs/index";
@@ -33,30 +33,30 @@ export default function CreateProject({
 
   return (
     <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
-      <InputGroup
+      <Group
         label="Name"
         name="name"
         help="Please provide a name for the Annotation Project."
         error={errors.name?.message}
       >
         <Input {...register("name")} />
-      </InputGroup>
-      <InputGroup
+      </Group>
+      <Group
         label="Description"
         name="description"
         help="Describe the purpose of the project"
         error={errors.description?.message}
       >
         <TextArea rows={6} {...register("description")} />
-      </InputGroup>
-      <InputGroup
+      </Group>
+      <Group
         label="Instructions"
         name="annotation_instructions"
         help="Write instructions for annotators."
         error={errors.annotation_instructions?.message}
       >
         <TextArea rows={10} {...register("annotation_instructions")} />
-      </InputGroup>
+      </Group>
       <Submit>Create Project</Submit>
     </form>
   );

diff --git a/front/src/lib/components/annotation_projects/AnnotationProjectImport.tsx b/front/src/lib/components/annotation_projects/AnnotationProjectImport.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { UploadIcon } from "@/lib/components/icons";
-import { Input, InputGroup, Submit } from "@/lib/components/inputs/index";
+import { Input, Group, Submit } from "@/lib/components/inputs/index";
 
 export default function AnnotationProjectImport({
   onImportAnnotationProject,
@@ -29,14 +29,14 @@ export default function AnnotationProjectImport({
 
   return (
     <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
-      <InputGroup
+      <Group
         name="annotation_project"
         label="Select a project file to import"
         help="The file must be in AOEF format"
         error={errors.annotation_project?.message}
       >
         <Input type="file" {...register("annotation_project")} required />
-      </InputGroup>
+      </Group>
       <Submit>
         <UploadIcon className="inline-block mr-2 w-6 h-6 align-middle" />
         Import

diff --git a/front/src/lib/components/annotation_projects/AnnotationProjectTasks.tsx b/front/src/lib/components/annotation_projects/AnnotationProjectTasks.tsx
@@ -136,7 +136,7 @@ function SelectRecordings({
         </p>
       </div>
       <div className="flex flex-col gap-4">
-        <inputs.InputGroup
+        <inputs.Group
           name="recording-filter"
           label="Filter recordings"
           help="Select a subset for clip extraction by applying filters."
@@ -162,8 +162,8 @@ function SelectRecordings({
               }
             />
           </div>
-        </inputs.InputGroup>
-        <inputs.InputGroup
+        </inputs.Group>
+        <inputs.Group
           name="subsample"
           label="Subsample recordings"
           help="Set a maximum for clip extraction. A random subset will be selected; all if not specified."
@@ -185,7 +185,7 @@ function SelectRecordings({
               disabled={!subsample}
             />
           </div>
-        </inputs.InputGroup>
+        </inputs.Group>
       </div>
     </ui.Card>
   );
@@ -222,16 +222,16 @@ function ExtractClips({
           Customize how to extract clips from the selected recordings.
         </p>
       </div>
-      <inputs.InputGroup
+      <inputs.Group
         name="clip"
         label="Should Clip"
         help="Enable to extract smaller clips from the recordings; disable to use the entire recording as a clip."
       >
         <inputs.Toggle isSelected={shouldClip} onChange={onToggleClip} />
-      </inputs.InputGroup>
+      </inputs.Group>
       {shouldClip && (
         <>
-          <inputs.InputGroup
+          <inputs.Group
             name="clipLength"
             label="Clip Length"
             help="Specify the duration of each clip in seconds."
@@ -243,8 +243,8 @@ function ExtractClips({
               required
               step={0.1}
             />
-          </inputs.InputGroup>
-          <inputs.InputGroup
+          </inputs.Group>
+          <inputs.Group
             name="overlap"
             label="Overlap"
             help="Define the overlap duration between clips in seconds."
@@ -255,8 +255,8 @@ function ExtractClips({
               onChange={(e) => onSetClipOverlap?.(e.target.valueAsNumber)}
               required
             />
-          </inputs.InputGroup>
-          <inputs.InputGroup
+          </inputs.Group>
+          <inputs.Group
             name="subsample"
             label="Subsample clips"
             help="Set a maximum number of clips to extract from each recording. A random subset will be selected. Leave empty to use all clips."
@@ -276,7 +276,7 @@ function ExtractClips({
                 disabled={!subsampleClip}
               />
             </div>
-          </inputs.InputGroup>
+          </inputs.Group>
         </>
       )}
     </ui.Card>

diff --git a/front/src/lib/components/datasets/DatasetCreate.tsx b/front/src/lib/components/datasets/DatasetCreate.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 
 import {
   Input,
-  InputGroup,
+  Group,
   Submit,
   TextArea,
 } from "@/lib/components/inputs/index";
@@ -38,30 +38,30 @@ export default function CreateDataset({
 
   return (
     <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
-      <InputGroup
+      <Group
         name="name"
         label="Name"
         help="Please provide a name for the dataset."
         error={errors.name?.message}
       >
         <Input {...register("name")} />
-      </InputGroup>
-      <InputGroup
+      </Group>
+      <Group
         name="description"
         label="Description"
         help="Describe the dataset."
         error={errors.description?.message}
       >
         <TextArea {...register("description")} />
-      </InputGroup>
-      <InputGroup
+      </Group>
+      <Group
         name="audio_dir"
         label="Audio Directory"
         help="Provide the path to the folder where the dataset recordings reside."
         error={errors.name?.message}
       >
         <Input {...register("audio_dir")} />
-      </InputGroup>
+      </Group>
       <div className="mb-3">
         <Submit>Create Dataset</Submit>
       </div>

diff --git a/front/src/lib/components/datasets/DatasetImport.tsx b/front/src/lib/components/datasets/DatasetImport.tsx
@@ -3,7 +3,7 @@ import { useCallback } from "react";
 import { useForm } from "react-hook-form";
 
 import { UploadIcon } from "@/lib/components/icons";
-import { Input, InputGroup, Submit } from "@/lib/components/inputs/index";
+import { Input, Group, Submit } from "@/lib/components/inputs/index";
 
 import { DatasetImportSchema } from "@/lib/schemas";
 import type { DatasetImport } from "@/lib/types";
@@ -41,7 +41,7 @@ export default function DatasetImportComponent({
       className="flex flex-col gap-4"
       onSubmit={handleSubmit(handleOnCreate)}
     >
-      <InputGroup
+      <Group
         name="dataset"
         label="Select a dataset file to import"
         help="The file must be in AOEF format"
@@ -54,8 +54,8 @@ export default function DatasetImportComponent({
           multiple={false}
           accept="application/json"
         />
-      </InputGroup>
-      <InputGroup
+      </Group>
+      <Group
         name="audio_dir"
         label="Audio directory"
         help="Folder where all the dataset recordings are stored"
@@ -66,7 +66,7 @@ export default function DatasetImportComponent({
           placeholder="Path to audio directory..."
           required
         />
-      </InputGroup>
+      </Group>
       <Submit>
         <UploadIcon className="inline-block mr-2 w-6 h-6 align-middle" />
         Import