diff --git a/front/src/app/(base)/about/page.tsx b/front/src/app/(base)/about/page.tsx
index 71cbb540..b6a8c81a 100644
--- a/front/src/app/(base)/about/page.tsx
+++ b/front/src/app/(base)/about/page.tsx
@@ -1,6 +1,7 @@
"use client";
-import Hero from "@/components/Hero";
-import { WhombatIcon } from "@/components/icons";
+
+import { WhombatIcon } from "@/lib/components/icons";
+import Hero from "@/lib/components/ui/Hero";
export default function Page() {
return (
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 35e217bc..293afd96 100644
--- a/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/annotation/page.tsx
@@ -1,103 +1,30 @@
"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";
-import AnnotateTasks from "@/components/annotation/AnnotateTasks";
-import Loading from "@/components/Loading";
-import useAnnotationTask from "@/hooks/api/useAnnotationTask";
-import useStore from "@/store";
-import { changeURLParam } from "@/utils/url";
+import { useSearchParams } from "next/navigation";
+import { useContext } from "react";
-import AnnotationProjectContext from "../context";
+import AnnotateTasks from "@/app/components/annotation/AnnotationTasks";
-import api from "@/app/api";
-import type { AnnotationTask, SpectrogramParameters, Tag } from "@/types";
+import useAnnotationTask from "@/app/hooks/api/useAnnotationTask";
-export default function Page() {
- const search = useSearchParams();
- const pathname = usePathname();
- const router = useRouter();
-
- const project = useContext(AnnotationProjectContext);
- const user = useContext(UserContext);
+import Loading from "@/lib/components/ui/Loading";
- const annotationTaskUUID = search.get("annotation_task_uuid");
+import AnnotationProjectContext from "../../../../contexts/annotationProject";
- const annotationTask = useAnnotationTask({
- uuid: annotationTaskUUID || "",
- enabled: !!annotationTaskUUID,
- });
-
- const parameters = useStore((state) => state.spectrogramSettings);
- const setParameters = useStore((state) => state.setSpectrogramSettings);
+export default function Page() {
+ const project = useContext(AnnotationProjectContext);
- const onParameterSave = useCallback(
- (parameters: SpectrogramParameters) => {
- toast.success("Spectrogram settings saved.");
- setParameters(parameters);
- },
- [setParameters],
- );
+ const searchParams = useSearchParams();
+ const taskUUID = searchParams.get("annotation_task_uuid");
- const { mutate: handleTagCreate } = useMutation({
- mutationFn: async (tag: Tag) => {
- return await api.annotationProjects.addTag(project, tag);
- },
+ const { data: task, isLoading } = useAnnotationTask({
+ uuid: taskUUID ?? "",
+ enabled: taskUUID != null,
});
- const onChangeTask = useCallback(
- (task: AnnotationTask) => {
- const url = changeURLParam({
- pathname,
- search,
- param: "annotation_task_uuid",
- value: task.uuid,
- });
- router.push(url);
- },
- [router, pathname, search],
- );
-
- const handleCompleteTask = useCallback(() => {
- toast.success("Task marked as complete.");
- }, []);
-
- const handleRejectTask = useCallback(() => {
- toast.error("Task marked for review.");
- }, []);
-
- const handleVerifyTask = useCallback(() => {
- toast.success("Task verified.");
- }, []);
-
- const filter = useMemo(
- () => ({
- annotation_project: project,
- }),
- [project],
- );
-
- if (annotationTask.isLoading && !annotationTask.data) {
+ if (isLoading && taskUUID != null) {
return
;
}
- return (
-
- );
+ return
;
}
diff --git a/front/src/app/(base)/annotation_projects/detail/clips/page.tsx b/front/src/app/(base)/annotation_projects/detail/clips/page.tsx
index 23755b95..1e9bcf8a 100644
--- a/front/src/app/(base)/annotation_projects/detail/clips/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/clips/page.tsx
@@ -1,12 +1,13 @@
"use client";
+
import { notFound } from "next/navigation";
import { useContext } from "react";
-import AnnotationProjectTaskClips from "@/components/annotation_projects/AnnotationProjectTaskClips";
-import AnnotationProject from "../context";
+import AnnotationProjectTaskClips from "@/lib/components/annotation_projects/AnnotationProjectTaskClips";
-import type { AnnotationTask } from "@/types";
+import type { AnnotationTask } from "@/lib/types";
+import AnnotationProject from "../../../../contexts/annotationProject";
import "./page.css";
function getAnnotationTaskLink(annotationTask: AnnotationTask): string {
diff --git a/front/src/app/(base)/annotation_projects/detail/layout.tsx b/front/src/app/(base)/annotation_projects/detail/layout.tsx
index d7a0197b..82d41a73 100644
--- a/front/src/app/(base)/annotation_projects/detail/layout.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/layout.tsx
@@ -1,13 +1,16 @@
"use client";
+
import { useRouter, useSearchParams } from "next/navigation";
import { type ReactNode } from "react";
import { toast } from "react-hot-toast";
+import ProjectHeader from "@/app/components/annotation_projects/AnnotationProjectHeader";
+
+import useAnnotationProject from "@/app/hooks/api/useAnnotationProject";
+
import Loading from "@/app/loading";
-import ProjectHeader from "@/components/annotation_projects/AnnotationProjectHeader";
-import useAnnotationProject from "@/hooks/api/useAnnotationProject";
-import AnnotationProjectContext from "./context";
+import AnnotationProjectContext from "../../../contexts/annotationProject";
export default function Layout({ children }: { children: ReactNode }) {
const params = useSearchParams();
diff --git a/front/src/app/(base)/annotation_projects/detail/page.tsx b/front/src/app/(base)/annotation_projects/detail/page.tsx
index bc1270a2..7e7864d2 100644
--- a/front/src/app/(base)/annotation_projects/detail/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/page.tsx
@@ -1,37 +1,25 @@
"use client";
+
import { useRouter } from "next/navigation";
import { useCallback, useContext } from "react";
-import toast from "react-hot-toast";
-
-import AnnotationProjectDetail from "@/components/annotation_projects/AnnotationProjectDetail";
-import AnnotationProjectContext from "./context";
+import AnnotationProjectDetail from "@/app/components/annotation_projects/AnnotationProjectDetail";
-import type { AnnotationProject } from "@/types";
+import AnnotationProjectContext from "../../../contexts/annotationProject";
export default function Page() {
const annotationProject = useContext(AnnotationProjectContext);
const router = useRouter();
- const onDelete = useCallback(
- (project: Promise
) => {
- toast.promise(project, {
- loading: "Deleting project... Please wait",
- success: "Project deleted!",
- error: "Failed to delete project",
- });
-
- project.then(() => {
- router.push("/annotation_projects");
- });
- },
+ const handleDeleteAnnotationProject = useCallback(
+ () => router.push("/annotation_projects"),
[router],
);
return (
);
}
diff --git a/front/src/app/(base)/annotation_projects/detail/tags/page.tsx b/front/src/app/(base)/annotation_projects/detail/tags/page.tsx
index 1f85305c..aedcd404 100644
--- a/front/src/app/(base)/annotation_projects/detail/tags/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/tags/page.tsx
@@ -1,11 +1,13 @@
"use client";
+
import { notFound } from "next/navigation";
import { useContext } from "react";
-import ProjectTags from "@/components/annotation_projects/AnnotationProjectTags";
-import Center from "@/components/layouts/Center";
+import ProjectTags from "@/app/components/annotation_projects/AnnotationProjectTags";
+
+import Center from "@/lib/components/layouts/Center";
-import AnnotationProjectContext from "../context";
+import AnnotationProjectContext from "../../../../contexts/annotationProject";
export default function Page() {
const project = useContext(AnnotationProjectContext);
diff --git a/front/src/app/(base)/annotation_projects/detail/tasks/page.tsx b/front/src/app/(base)/annotation_projects/detail/tasks/page.tsx
index a02e101a..3ebae094 100644
--- a/front/src/app/(base)/annotation_projects/detail/tasks/page.tsx
+++ b/front/src/app/(base)/annotation_projects/detail/tasks/page.tsx
@@ -1,12 +1,14 @@
"use client";
+
import { notFound, useRouter } from "next/navigation";
import { useCallback, useContext } from "react";
import toast from "react-hot-toast";
-import AnnotationProjectTasks from "@/components/annotation_projects/AnnotationProjectTasks";
-import Center from "@/components/layouts/Center";
+import AnnotationProjectTasks from "@/app/components/annotation_projects/AnnotationProjectTasks";
+
+import AnnotationProjectContext from "@/app/contexts/annotationProject";
-import AnnotationProjectContext from "../context";
+import Center from "@/lib/components/layouts/Center";
export default function Page() {
const project = useContext(AnnotationProjectContext);
diff --git a/front/src/app/(base)/annotation_projects/import/page.tsx b/front/src/app/(base)/annotation_projects/import/page.tsx
deleted file mode 100644
index 3c48f4cc..00000000
--- a/front/src/app/(base)/annotation_projects/import/page.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { useMutation } from "@tanstack/react-query";
-import { AxiosError } from "axios";
-import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
-
-import api from "@/app/api";
-import Hero from "@/components/Hero";
-import { UploadIcon } from "@/components/icons";
-import { Input, InputGroup, Submit } from "@/components/inputs/index";
-
-export default function Page() {
- const router = useRouter();
- const {
- register,
- handleSubmit,
- setError,
- formState: { errors },
- } = useForm({
- mode: "onChange",
- });
-
- const { mutateAsync: importAnnotationProject } = useMutation({
- mutationFn: api.annotationProjects.import,
- onError: (error: AxiosError) => {
- if (error.response?.status === 422) {
- // @ts-ignore
- error.response.data.detail.forEach((error: any) => {
- setError(error.loc[1], { message: error.msg });
- });
- }
- },
- onSuccess: (data) => {
- router.push(
- `/annotation_projects/detail/?annotation_project_uuid=${data.uuid}`,
- );
- },
- });
-
- // @ts-ignore
- const onSubmit = async (data) => {
- const formData = new FormData();
- const file = data.annotation_project[0];
- formData.append("annotation_project", file);
-
- return await toast.promise(importAnnotationProject(formData), {
- loading:
- "Importing annotation project. Please wait, it can take some time...",
- success: "Annotation project imported successfully!",
- error: "Failed to import annotation project.",
- });
- };
-
- return (
- <>
-
-
-
-
-
- );
-}
diff --git a/front/src/app/(base)/annotation_projects/page.tsx b/front/src/app/(base)/annotation_projects/page.tsx
index e69cc27e..53175eda 100644
--- a/front/src/app/(base)/annotation_projects/page.tsx
+++ b/front/src/app/(base)/annotation_projects/page.tsx
@@ -1,29 +1,22 @@
"use client";
+
import { useRouter } from "next/navigation";
import { useCallback } from "react";
-import toast from "react-hot-toast";
-import AnnotationProjectList from "@/components/annotation_projects/AnnotationProjectList";
-import Hero from "@/components/Hero";
+import AnnotationProjectList from "@/app/components/annotation_projects/AnnotationProjectList";
+
+import Hero from "@/lib/components/ui/Hero";
-import type { AnnotationProject } from "@/types";
+import type { AnnotationProject } from "@/lib/types";
export default function AnnotationProjects() {
const router = useRouter();
- const onCreate = useCallback(
- async (project: Promise) => {
- toast.promise(project, {
- loading: "Creating project...",
- success: "Project created!",
- error: "Failed to create project",
- });
-
- project.then((data) => {
- router.push(
- `/annotation_projects/detail/?annotation_project_uuid=${data.uuid}`,
- );
- });
+ const handleClickAnnotationProject = useCallback(
+ (project: AnnotationProject) => {
+ router.push(
+ `/annotation_projects/detail/?annotation_project_uuid=${project.uuid}`,
+ );
},
[router],
);
@@ -31,7 +24,10 @@ export default function AnnotationProjects() {
return (
<>
-
+
);
}
diff --git a/front/src/app/(base)/contact/page.tsx b/front/src/app/(base)/contact/page.tsx
index 752c3788..6de8d2fe 100644
--- a/front/src/app/(base)/contact/page.tsx
+++ b/front/src/app/(base)/contact/page.tsx
@@ -1,6 +1,7 @@
"use client";
-import Hero from "@/components/Hero";
-import Link from "@/components/Link";
+
+import Hero from "@/lib/components/ui/Hero";
+import Link from "@/lib/components/ui/Link";
export default function Page() {
return (
diff --git a/front/src/app/(base)/datasets/detail/context.ts b/front/src/app/(base)/datasets/detail/context.ts
index c987703a..30a1f434 100644
--- a/front/src/app/(base)/datasets/detail/context.ts
+++ b/front/src/app/(base)/datasets/detail/context.ts
@@ -1,6 +1,6 @@
import { createContext } from "react";
-import type { Dataset } from "@/types";
+import type { Dataset } from "@/lib/types";
const DatasetContext = createContext(null);
diff --git a/front/src/app/(base)/datasets/detail/layout.tsx b/front/src/app/(base)/datasets/detail/layout.tsx
index ce1367f4..7bf9073d 100644
--- a/front/src/app/(base)/datasets/detail/layout.tsx
+++ b/front/src/app/(base)/datasets/detail/layout.tsx
@@ -1,4 +1,5 @@
"use client";
+
/**
* Layout component for rendering the structure of a dataset detail page.
*
@@ -11,11 +12,12 @@ import { notFound, useRouter, useSearchParams } from "next/navigation";
import { type ReactNode } from "react";
import toast from "react-hot-toast";
+import useDataset from "@/app/hooks/api/useDataset";
+
import Loading from "@/app/loading";
-import useDataset from "@/hooks/api/useDataset";
+import DatasetTabs from "../../../components/datasets/DatasetTabs";
import DatasetContext from "./context";
-import DatasetNavHeader from "./nav";
export default function Layout({ children }: { children: ReactNode }) {
const router = useRouter();
@@ -26,7 +28,7 @@ export default function Layout({ children }: { children: ReactNode }) {
const dataset = useDataset({
uuid: uuid,
- onDelete: () => {
+ onDeleteDataset: () => {
toast.success("Dataset deleted");
router.push("/datasets/");
},
@@ -47,7 +49,7 @@ export default function Layout({ children }: { children: ReactNode }) {
return (
-
+
{children}
);
diff --git a/front/src/app/(base)/datasets/detail/nav.tsx b/front/src/app/(base)/datasets/detail/nav.tsx
deleted file mode 100644
index 1a3950ed..00000000
--- a/front/src/app/(base)/datasets/detail/nav.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
- useRouter,
- useSearchParams,
- useSelectedLayoutSegment,
-} from "next/navigation";
-
-import Header from "@/components/Header";
-import { H1 } from "@/components/Headings";
-import { DatasetIcon, RecordingsIcon } from "@/components/icons";
-import Tabs from "@/components/Tabs";
-
-import type { Dataset } from "@/types";
-
-/**
- * Navigation header component for the dataset pages.
- *
- * This component includes the dataset name as the main heading (H1) and a set
- * of tabs for navigating between different sections of the dataset (e.g.,
- * Overview, Recordings).
- *
- * @component
- * @param {Object} props - The component properties.
- * @param {Dataset} props.dataset - The dataset object to display information from.
- */
-export default function DatasetNavHeader({ dataset }: { dataset: Dataset }) {
- const router = useRouter();
- const params = useSearchParams();
- const selectedLayoutSegment = useSelectedLayoutSegment();
-
- return (
-
-
-
{dataset.name}
- ,
- onClick: () => {
- router.push(`/datasets/detail/?${params.toString()}`);
- },
- },
- {
- id: "recordings",
- title: "Recordings",
- icon: ,
- isActive: selectedLayoutSegment === "recordings",
- onClick: () => {
- router.push(
- `/datasets/detail/recordings/?${params.toString()}`,
- );
- },
- },
- // {
- // id: "sound_events",
- // title: "Sound Events",
- // icon: ,
- // isActive: selectedLayoutSegment === "sound_events",
- // onClick: () => {
- // router.push(
- // `/datasets/detail/sound_events/?${params.toString()}`,
- // );
- // },
- // },
- // {
- // id: "notes",
- // icon: ,
- // title: "Notes",
- // isActive: selectedLayoutSegment === "notes",
- // onClick: () => {
- // router.push(`/datasets/detail/notes/?${params.toString()}`);
- // },
- // },
- ]}
- />
-
-
- );
-}
diff --git a/front/src/app/(base)/datasets/detail/page.tsx b/front/src/app/(base)/datasets/detail/page.tsx
index b85b3970..0c6801fb 100644
--- a/front/src/app/(base)/datasets/detail/page.tsx
+++ b/front/src/app/(base)/datasets/detail/page.tsx
@@ -1,17 +1,25 @@
"use client";
-import { notFound } from "next/navigation";
-import { useContext } from "react";
-import DatasetDetail from "@/components/datasets/DatasetDetail";
+import { notFound, useRouter } from "next/navigation";
+import { useCallback, useContext } from "react";
+
+import DatasetDetail from "@/app/components/datasets/DatasetDetail";
import DatasetContext from "./context";
-export default function DatasetHome() {
+export default function Page() {
+ const router = useRouter();
const dataset = useContext(DatasetContext);
+ const handleDeleteDataset = useCallback(() => {
+ router.push("/datasets");
+ }, [router]);
+
if (dataset == null) {
return notFound();
}
- return ;
+ return (
+
+ );
}
diff --git a/front/src/app/(base)/datasets/detail/recordings/detail/page.tsx b/front/src/app/(base)/datasets/detail/recordings/detail/page.tsx
index 4ca92c16..c65d1b50 100644
--- a/front/src/app/(base)/datasets/detail/recordings/detail/page.tsx
+++ b/front/src/app/(base)/datasets/detail/recordings/detail/page.tsx
@@ -1,79 +1,30 @@
"use client";
-import { notFound, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useContext } from "react";
-import toast from "react-hot-toast";
-import UserContext from "@/app/(base)/context";
-import Loading from "@/app/loading";
-import RecordingDetail from "@/components/recordings/RecordingDetail";
-import useRecording from "@/hooks/api/useRecording";
-import useStore from "@/store";
-
-import type { SpectrogramParameters } from "@/types";
-import type { AxiosError } from "axios";
-
-export default function Page() {
- const user = useContext(UserContext);
- const router = useRouter();
- const searchParams = useSearchParams();
- const recordingUUID = searchParams.get("recording_uuid");
- const datasetUUID = searchParams.get("dataset_uuid");
- const parameters = useStore((state) => state.spectrogramSettings);
- const setParameters = useStore((state) => state.setSpectrogramSettings);
+import { notFound, useSearchParams } from "next/navigation";
- const returnToRecordings = useCallback(() => {
- if (datasetUUID == null) router.push("/datasets/");
- router.push(`/datasets/detail/recordings/?dataset_uuid=${datasetUUID}`);
- }, [router, datasetUUID]);
+import RecordingDetail from "@/app/components/recordings/RecordingDetail";
- const handleError = useCallback(
- (error: AxiosError) => {
- if (error.response?.status === 404) {
- toast.error("Recording not found");
- returnToRecordings();
- }
- },
- [returnToRecordings],
- );
+import useRecording from "@/app/hooks/api/useRecording";
- const onParametersSave = useCallback(
- (parameters: SpectrogramParameters) => {
- toast.success("Parameters saved");
- setParameters(parameters);
- },
- [setParameters],
- );
+import Error from "@/app/error";
+import Loading from "@/app/loading";
- const onDelete = useCallback(() => {
- toast.success("Recording deleted");
- returnToRecordings();
- }, [returnToRecordings]);
+export default function Page() {
+ const searchParams = useSearchParams();
+ const recordingUUID = searchParams.get("recording_uuid") ?? "recording_uuid";
+ const recording = useRecording({ uuid: recordingUUID });
if (recordingUUID == null) {
notFound();
}
- const recording = useRecording({
- uuid: recordingUUID,
- onError: handleError,
- });
-
if (recording.isLoading) {
return ;
}
if (recording.isError || recording.data == null) {
- // @ts-ignore
- return handleError(recording.error);
+ return ;
}
- return (
-
- );
+ return ;
}
diff --git a/front/src/app/(base)/datasets/detail/recordings/page.tsx b/front/src/app/(base)/datasets/detail/recordings/page.tsx
index 166358c2..3f5a2a33 100644
--- a/front/src/app/(base)/datasets/detail/recordings/page.tsx
+++ b/front/src/app/(base)/datasets/detail/recordings/page.tsx
@@ -1,20 +1,13 @@
"use client";
+
import { notFound } from "next/navigation";
import { useContext } from "react";
-import DatasetRecordings from "@/components/datasets/DatasetRecordings";
-import { DatasetRecordingsNav } from "@/components/datasets/DatasetRecordingsNav";
+import DatasetRecordings from "@/app/components/datasets/DatasetRecordings";
+import DatasetRecordingSummary from "@/app/components/datasets/DatasetRecordingsSummary";
import DatasetContext from "../context";
-import type { Recording } from "@/types";
-
-import "./page.css";
-
-function getRecordingLink(recording: Recording): string {
- return `detail/?recording_uuid=${recording.uuid}`;
-}
-
export default function Page() {
const dataset = useContext(DatasetContext);
@@ -24,11 +17,8 @@ export default function Page() {
return (
-
-
+
+
);
}
diff --git a/front/src/app/(base)/datasets/page.tsx b/front/src/app/(base)/datasets/page.tsx
index 422c6774..5dc117ad 100644
--- a/front/src/app/(base)/datasets/page.tsx
+++ b/front/src/app/(base)/datasets/page.tsx
@@ -1,4 +1,5 @@
"use client";
+
/**
* Page module for displaying the list of datasets.
*
@@ -10,27 +11,19 @@
*/
import { useRouter } from "next/navigation";
import { useCallback } from "react";
-import toast from "react-hot-toast";
-import DatasetList from "@/components/datasets/DatasetList";
-import Hero from "@/components/Hero";
+import DatasetList from "@/app/components/datasets/DatasetList";
+
+import Hero from "@/lib/components/ui/Hero";
-import type { Dataset } from "@/types";
+import type { Dataset } from "@/lib/types";
export default function Page() {
const router = useRouter();
- const handleCreate = useCallback(
- (dataset: Promise) => {
- toast.promise(dataset, {
- loading: "Creating dataset. Please wait as this may take a while...",
- success: "Dataset created.",
- error: "Failed to create dataset.",
- });
-
- dataset.then((data) => {
- router.push(`/datasets/detail/?dataset_uuid=${data.uuid}`);
- });
+ const goToDatasetDetail = useCallback(
+ (dataset: Dataset) => {
+ router.push(`/datasets/detail/?dataset_uuid=${dataset.uuid}`);
},
[router],
);
@@ -38,7 +31,10 @@ export default function Page() {
return (
<>
-
+
);
}
diff --git a/front/src/app/(base)/evaluation/detail/components/EvaluationSetTabs.tsx b/front/src/app/(base)/evaluation/detail/components/EvaluationSetTabs.tsx
new file mode 100644
index 00000000..86cf4a0f
--- /dev/null
+++ b/front/src/app/(base)/evaluation/detail/components/EvaluationSetTabs.tsx
@@ -0,0 +1,85 @@
+import {
+ useRouter,
+ useSearchParams,
+ useSelectedLayoutSegment,
+} from "next/navigation";
+
+import {
+ ModelIcon,
+ SettingsIcon,
+ TagsIcon,
+ TasksIcon,
+ UserIcon,
+} from "@/lib/components/icons";
+import SectionTabs from "@/lib/components/navigation/SectionTabs";
+import Tab from "@/lib/components/ui/Tab";
+
+import type { EvaluationSet } from "@/lib/types";
+
+export default function EvaluationSetTabs({
+ evaluationSet,
+}: {
+ evaluationSet: EvaluationSet;
+}) {
+ const router = useRouter();
+ const params = useSearchParams();
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+
+ return (
+
+ router.push(`/evaluation/detail/?${params.toString()}`)
+ }
+ >
+
+ Overview
+ ,
+
+ router.push(`/evaluation/detail/tasks/?${params.toString()}`)
+ }
+ >
+
+ Examples
+ ,
+
+ router.push(`/evaluation/detail/model_runs/?${params.toString()}`)
+ }
+ >
+
+ Model Runs
+ ,
+
+ router.push(`/evaluation/detail/user_runs/?${params.toString()}`)
+ }
+ >
+
+ User Sessions
+ ,
+
+ router.push(`/evaluation/detail/tags/?${params.toString()}`)
+ }
+ >
+
+ Tags
+ ,
+ ]}
+ />
+ );
+}
diff --git a/front/src/app/(base)/evaluation/detail/context.ts b/front/src/app/(base)/evaluation/detail/context.ts
index 217c6228..d095ff83 100644
--- a/front/src/app/(base)/evaluation/detail/context.ts
+++ b/front/src/app/(base)/evaluation/detail/context.ts
@@ -1,6 +1,6 @@
import { createContext } from "react";
-import type { EvaluationSet } from "@/types";
+import type { EvaluationSet } from "@/lib/types";
const EvaluationSetContext = createContext({
name: "",
@@ -8,7 +8,7 @@ const EvaluationSetContext = createContext({
tags: [],
uuid: "",
created_on: new Date(),
- task: "sound_event_detection",
+ task: "Sound Event Detection",
});
export default EvaluationSetContext;
diff --git a/front/src/app/(base)/evaluation/detail/layout.tsx b/front/src/app/(base)/evaluation/detail/layout.tsx
index ab5d188c..e375f592 100644
--- a/front/src/app/(base)/evaluation/detail/layout.tsx
+++ b/front/src/app/(base)/evaluation/detail/layout.tsx
@@ -1,11 +1,13 @@
"use client";
+
import { useRouter, useSearchParams } from "next/navigation";
import { type ReactNode } from "react";
import { toast } from "react-hot-toast";
+import useEvaluationSet from "@/app/hooks/api/useEvaluationSet";
+
+import EvaluationSetTabs from "@/app/(base)/evaluation/detail/components/EvaluationSetTabs";
import Loading from "@/app/loading";
-import EvaluationSetHeader from "@/components/evaluation_sets/EvaluationSetHeader";
-import useEvaluationSet from "@/hooks/api/useEvaluationSet";
import EvaluationSetContext from "./context";
@@ -20,7 +22,8 @@ export default function Layout({ children }: { children: ReactNode }) {
isError,
data: evaluationSet,
} = useEvaluationSet({
- uuid: uuid || undefined,
+ uuid: uuid ?? "",
+ enabled: uuid != null,
});
if (uuid == null) {
@@ -40,7 +43,7 @@ export default function Layout({ children }: { children: ReactNode }) {
return (
-
+
{children}
);
diff --git a/front/src/app/(base)/evaluation/detail/model_run/page.tsx b/front/src/app/(base)/evaluation/detail/model_run/page.tsx
index a0ad411d..42928823 100644
--- a/front/src/app/(base)/evaluation/detail/model_run/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/model_run/page.tsx
@@ -1,15 +1,21 @@
"use client";
+
+import type { AxiosError } from "axios";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useContext } from "react";
import toast from "react-hot-toast";
-import Loading from "@/components/Loading";
-import ModelRunDetail from "@/components/model_runs/ModelRunDetail";
-import useModelRun from "@/hooks/api/useModelRun";
-import EvaluationSetContext from "../context";
+import ModelRunActions from "@/app/components/model_runs/ModelRunActions";
+import ModelRunEvaluation from "@/app/components/model_runs/ModelRunEvaluations";
+import ModelRunUpdate from "@/app/components/model_runs/ModelRunUpdate";
+import ModelRunExplorer from "@/app/components/model_runs/ModelRunExplorer";
-import type { AxiosError } from "axios";
-import type { ModelRun, Evaluation } from "@/types";
+import useModelRun from "@/app/hooks/api/useModelRun";
+
+import DetailLayout from "@/lib/components/layouts/Detail";
+import Loading from "@/lib/components/ui/Loading";
+
+import EvaluationSetContext from "../context";
export default function Page() {
const router = useRouter();
@@ -35,32 +41,14 @@ export default function Page() {
[returnToModelRuns],
);
- const onDelete = useCallback(
- (modelRun: Promise) => {
- toast.promise(modelRun, {
- loading: "Deleting model run...",
- success: "Model run deleted",
- error: "Failed to delete model run",
- });
-
- modelRun.then(() => {
- returnToModelRuns();
- });
- },
- [returnToModelRuns],
- );
-
- const handleEvaluate = useCallback((promise: Promise) => {
- toast.promise(promise, {
- loading: "Evaluating the model run. Please wait...",
- success: "Model run evaluated!",
- error: "Failed to evaluate the model run.",
- });
- }, []);
+ const handleEvaluate = useCallback(() => {
+ router.refresh();
+ }, [router]);
const modelRun = useModelRun({
- uuid: modelRunUUID || undefined,
+ uuid: modelRunUUID ?? "",
onError: handleError,
+ enabled: modelRunUUID != null,
});
if (modelRun.isLoading) return ;
@@ -70,11 +58,27 @@ export default function Page() {
}
return (
- }
+ Actions={
+
+ }
+ MainContent={
+
+
+
+
+ }
/>
);
}
diff --git a/front/src/app/(base)/evaluation/detail/model_runs/page.tsx b/front/src/app/(base)/evaluation/detail/model_runs/page.tsx
index 93ab7679..f09e5fe6 100644
--- a/front/src/app/(base)/evaluation/detail/model_runs/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/model_runs/page.tsx
@@ -1,42 +1,126 @@
"use client";
+
import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useContext } from "react";
-import toast from "react-hot-toast";
+import { useCallback, useContext, useMemo } from "react";
-import EvaluationSetModelRuns from "@/components/evaluation_sets/EvaluationSetModelRuns";
+import Pagination from "@/app/components/Pagination";
+import ModelRunImport from "@/app/components/model_runs/ModelRunImport";
-import EvaluationSetContext from "../context";
+import useModelRuns from "@/app/hooks/api/useModelRuns";
+
+import {
+ AddIcon,
+ ModelIcon,
+ UploadIcon,
+ WarningIcon,
+} from "@/lib/components/icons";
+import Search from "@/lib/components/inputs/Search";
+import ListLayout from "@/lib/components/layouts/List";
+import ModelRun from "@/lib/components/model_runs/ModelRun";
+import { Dialog, Empty } from "@/lib/components/ui";
+
+import type * as types from "@/lib/types";
-import type { ModelRun } from "@/types";
+import EvaluationSetContext from "../context";
export default function Page() {
const router = useRouter();
const params = useSearchParams();
const evaluationSet = useContext(EvaluationSetContext);
+ const initialFilter: types.ModelRunFilter = useMemo(
+ () => ({
+ evaluation_set: evaluationSet,
+ }),
+ [evaluationSet],
+ );
+
+ const { items, isLoading, filter, pagination } = useModelRuns({
+ filter: initialFilter,
+ fixed: ["evaluation_set"],
+ });
+
const isImport = params.get("import") === "true";
const handleCreate = useCallback(
- (promise: Promise) => {
- toast.promise(promise, {
- loading: "Creating the model run. Please wait...",
- success: "Model run Created!",
- error: "Failed to create the model run.)",
- });
- promise.then((data) => {
- router.push(
- `/evaluation/detail/model_run/?model_run_uuid=${data.uuid}&evaluation_set_uuid=${evaluationSet.uuid}`,
- );
- });
+ (data: types.ModelRun) => {
+ router.push(
+ `/evaluation/detail/model_run/?model_run_uuid=${data.uuid}&evaluation_set_uuid=${evaluationSet.uuid}`,
+ );
+ },
+ [router, evaluationSet.uuid],
+ );
+
+ const handleClickModelRun = useCallback(
+ (modelRun: types.ModelRun) => {
+ router.push(
+ `/evaluation/detail/model_run/?model_run_uuid=${modelRun.uuid}&evaluation_set_uuid=${evaluationSet.uuid}`,
+ );
},
[router, evaluationSet.uuid],
);
return (
- (
+ handleClickModelRun(modelRun)}
+ />
+ ))}
+ isEmpty={items.length === 0}
+ Search={
+ filter.set("search", value as string)}
+ onSubmit={() => filter.submit()}
+ icon={}
+ />
+ }
+ Actions={[
+ ,
+ ]}
+ Pagination={}
+ Empty={}
/>
);
}
+
+function NoModelRuns() {
+ return (
+
+
+ No model runs found.
+
+ To create a model run click on the{" "}
+
+
+ Import{" "}
+ {" "}
+ button above.
+
+
+ );
+}
diff --git a/front/src/app/(base)/evaluation/detail/page.tsx b/front/src/app/(base)/evaluation/detail/page.tsx
index 0f9412c5..e28c9d83 100644
--- a/front/src/app/(base)/evaluation/detail/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/page.tsx
@@ -1,34 +1,55 @@
"use client";
+
import { useRouter } from "next/navigation";
import { useCallback, useContext } from "react";
import toast from "react-hot-toast";
-import EvaluationSetDetail from "@/components/evaluation_sets/EvaluationSetDetail";
+import * as evaluation_sets from "@/app/components/evaluation_sets";
-import EvaluationSetContext from "./context";
+import * as layouts from "@/lib/components/layouts";
+import * as ui from "@/lib/components/ui";
-import type { EvaluationSet } from "@/types";
+import EvaluationSetContext from "./context";
export default function Page() {
const router = useRouter();
const evaluationSet = useContext(EvaluationSetContext);
- const handleDelete = useCallback(
- (data: Promise) => {
- toast.promise(data, {
- loading: "Deleting evaluation set...",
- success: "Evaluation set deleted",
- error: "Failed to delete evaluation set",
- });
- data.then(() => router.push("/evaluation/"));
- },
- [router],
- );
+ const handleDelete = useCallback(() => {
+ router.push("/evaluation/");
+ }, [router]);
return (
-
+ }
+ SideBar={
+ toast.success("Evaluation Set updated successfully.")}
+ />
+ }
+ MainContent={
+
+ }
/>
);
}
diff --git a/front/src/app/(base)/evaluation/detail/tags/page.tsx b/front/src/app/(base)/evaluation/detail/tags/page.tsx
index 3704adee..84361e1e 100644
--- a/front/src/app/(base)/evaluation/detail/tags/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/tags/page.tsx
@@ -1,14 +1,15 @@
"use client";
+
import { useContext } from "react";
-import EvaluationSetTags from "@/components/evaluation_sets/EvaluationSetTags";
-import Center from "@/components/layouts/Center";
+import EvaluationSetTags from "@/app/components/evaluation_sets/EvaluationSetTags";
+
+import Center from "@/lib/components/layouts/Center";
import EvaluationSetContext from "../context";
export default function Page() {
const evaluationSet = useContext(EvaluationSetContext);
-
return (
diff --git a/front/src/app/(base)/evaluation/detail/tasks/page.tsx b/front/src/app/(base)/evaluation/detail/tasks/page.tsx
index 32346195..02d2be9e 100644
--- a/front/src/app/(base)/evaluation/detail/tasks/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/tasks/page.tsx
@@ -1,10 +1,11 @@
"use client";
+
import { useRouter } from "next/navigation";
import { useCallback, useContext } from "react";
import toast from "react-hot-toast";
-import EvaluationSetExamples from "@/components/evaluation_sets/EvaluationSetExamples";
-import Center from "@/components/layouts/Center";
+import EvaluationSetExamples from "@/lib/components/evaluation_sets/EvaluationSetExamples";
+import Center from "@/lib/components/layouts/Center";
import EvaluationSetContext from "../context";
diff --git a/front/src/app/(base)/evaluation/detail/user_runs/page.tsx b/front/src/app/(base)/evaluation/detail/user_runs/page.tsx
index a89b6cbd..0d7e40e8 100644
--- a/front/src/app/(base)/evaluation/detail/user_runs/page.tsx
+++ b/front/src/app/(base)/evaluation/detail/user_runs/page.tsx
@@ -1,5 +1,6 @@
"use client";
-import Empty from "@/components/Empty";
+
+import Empty from "@/lib/components/ui/Empty";
export default function Page() {
return (
diff --git a/front/src/app/(base)/evaluation/page.tsx b/front/src/app/(base)/evaluation/page.tsx
index 22422936..6aa31fc3 100644
--- a/front/src/app/(base)/evaluation/page.tsx
+++ b/front/src/app/(base)/evaluation/page.tsx
@@ -1,28 +1,20 @@
"use client";
+
import { useRouter } from "next/navigation";
import { useCallback } from "react";
-import toast from "react-hot-toast";
-import EvaluationSetList from "@/components/evaluation_sets/EvaluationSetList";
-import Hero from "@/components/Hero";
+import EvaluationSetList from "@/app/components/evaluation_sets/EvaluationSetList";
+
+import Hero from "@/lib/components/ui/Hero";
-import type { EvaluationSet } from "@/types";
+import type { EvaluationSet } from "@/lib/types";
export default function Page() {
const router = useRouter();
- const handleCreate = useCallback(
- (evaluationSet: Promise
) => {
- toast.promise(evaluationSet, {
- loading:
- "Creating evaluation set... This can take a while when importing a large file.",
- success: "Evaluation set created!",
- error: "Failed to create evaluation set.",
- });
-
- evaluationSet.then((data) =>
- router.push(`/evaluation/detail/?evaluation_set_uuid=${data.uuid}`),
- );
+ const handleCreateOrClick = useCallback(
+ (data: EvaluationSet) => {
+ router.push(`/evaluation/detail/?evaluation_set_uuid=${data.uuid}`);
},
[router],
);
@@ -30,7 +22,10 @@ export default function Page() {
return (
<>
-
+
);
}
diff --git a/front/src/app/(base)/exploration/clips/gallery/page.tsx b/front/src/app/(base)/exploration/clips/gallery/page.tsx
new file mode 100644
index 00000000..c0ad5fe2
--- /dev/null
+++ b/front/src/app/(base)/exploration/clips/gallery/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Pagination from "@/app/components/Pagination";
+import ClipAnnotationSpectrogram from "@/app/components/clip_annotations/ClipAnnotationSpectrogram";
+
+import useClipAnnotations from "@/app/hooks/api/useClipAnnotations";
+
+import ExplorationLayout from "@/lib/components/layouts/Exploration";
+import GalleryLayout from "@/lib/components/layouts/Gallery";
+import ListCounts from "@/lib/components/lists/ListCounts";
+
+export default function Page() {
+ const { items, total, pagination, isLoading } = useClipAnnotations({
+ pageSize: 10,
+ });
+
+ return (
+ }
+ Counts={
+
+ }
+ >
+
+ {(clipAnnotation) => (
+
+ )}
+
+
+ );
+}
diff --git a/front/src/app/(base)/exploration/clips/layout.tsx b/front/src/app/(base)/exploration/clips/layout.tsx
new file mode 100644
index 00000000..ad4f1c7e
--- /dev/null
+++ b/front/src/app/(base)/exploration/clips/layout.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import ClipExplorationTabs from "@/app/(base)/exploration/components/ClipExplorationTabs";
+
+export default function Layout({ children }: { children: ReactNode }) {
+ return (
+ <>
+
+
+ Explore all annotated clips. Use the filtering options to select a
+ subset, and choose the view you wish to use to explore the clips.
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/front/src/app/(base)/exploration/clips/list/page.tsx b/front/src/app/(base)/exploration/clips/list/page.tsx
new file mode 100644
index 00000000..067c0d44
--- /dev/null
+++ b/front/src/app/(base)/exploration/clips/list/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Pagination from "@/app/components/Pagination";
+import ClipAnnotationSpectrogram from "@/app/components/clip_annotations/ClipAnnotationSpectrogram";
+
+import useClipAnnotations from "@/app/hooks/api/useClipAnnotations";
+
+import ExplorationLayout from "@/lib/components/layouts/Exploration";
+import StackedListLayout from "@/lib/components/layouts/StackedList";
+import ListCounts from "@/lib/components/lists/ListCounts";
+
+export default function Page() {
+ const { items, total, pagination, isLoading } = useClipAnnotations({
+ pageSize: 10,
+ });
+
+ return (
+ }
+ Counts={
+
+ }
+ >
+
+ {(clipAnnotation) => (
+
+ )}
+
+
+ );
+}
diff --git a/front/src/app/(base)/exploration/clips/page.tsx b/front/src/app/(base)/exploration/clips/page.tsx
deleted file mode 100644
index 8180ce44..00000000
--- a/front/src/app/(base)/exploration/clips/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-import { useCallback } from "react";
-import toast from "react-hot-toast";
-import useStore from "@/store";
-
-import ClipAnnotationExplorer from "@/components/clip_annotations/ClipAnnotationExplore";
-
-import type { SpectrogramParameters } from "@/types";
-
-export default function Page() {
- const parameters = useStore((state) => state.spectrogramSettings);
- const setParameters = useStore((state) => state.setSpectrogramSettings);
-
- const onParameterSave = useCallback(
- (parameters: SpectrogramParameters) => {
- toast.success("Spectrogram settings saved.");
- setParameters(parameters);
- },
- [setParameters],
- );
- return (
-
- );
-}
diff --git a/front/src/app/(base)/exploration/components/ClipExplorationTabs.tsx b/front/src/app/(base)/exploration/components/ClipExplorationTabs.tsx
new file mode 100644
index 00000000..3703860f
--- /dev/null
+++ b/front/src/app/(base)/exploration/components/ClipExplorationTabs.tsx
@@ -0,0 +1,43 @@
+import {
+ useRouter,
+ useSearchParams,
+ useSelectedLayoutSegment,
+} from "next/navigation";
+
+import * as icons from "@/lib/components/icons";
+import SectionTabs from "@/lib/components/navigation/SectionTabs";
+import Tab from "@/lib/components/ui/Tab";
+
+export default function ExplorationTabs() {
+ const router = useRouter();
+ const params = useSearchParams();
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+
+ return (
+ {
+ router.push(`/exploration/clips/gallery/?${params.toString()}`);
+ }}
+ >
+ )
+
+ Gallery
+ ,
+ {
+ router.push(`/exploration/clips/list/?${params.toString()}`);
+ }}
+ >
+
+ List
+ ,
+ ]}
+ />
+ );
+}
diff --git a/front/src/app/(base)/exploration/components/ExplorationTabs.tsx b/front/src/app/(base)/exploration/components/ExplorationTabs.tsx
new file mode 100644
index 00000000..deb5df50
--- /dev/null
+++ b/front/src/app/(base)/exploration/components/ExplorationTabs.tsx
@@ -0,0 +1,72 @@
+import {
+ useRouter,
+ useSearchParams,
+ useSelectedLayoutSegment,
+} from "next/navigation";
+
+import {
+ ClipsIcon,
+ HomeIcon,
+ RecordingIcon,
+ SoundEventIcon,
+} from "@/lib/components/icons";
+import SectionTabs from "@/lib/components/navigation/SectionTabs";
+import Tab from "@/lib/components/ui/Tab";
+
+export default function ExplorationTabs() {
+ const router = useRouter();
+ const params = useSearchParams();
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+
+ return (
+ {
+ router.push(`/exploration/?${params.toString()}`);
+ }}
+ >
+
+ Home
+ ,
+ {
+ router.push(
+ `/exploration/recordings/gallery/?${params.toString()}`,
+ );
+ }}
+ >
+
+ Recordings
+ ,
+ {
+ router.push(`/exploration/clips/gallery/?${params.toString()}`);
+ }}
+ >
+
+ Clips
+ ,
+ {
+ router.push(
+ `/exploration/sound_events/gallery/?${params.toString()}`,
+ );
+ }}
+ >
+
+ Sound Events
+ ,
+ ]}
+ />
+ );
+}
diff --git a/front/src/app/(base)/exploration/components/RecordingExplorationTabs.tsx b/front/src/app/(base)/exploration/components/RecordingExplorationTabs.tsx
new file mode 100644
index 00000000..c523d009
--- /dev/null
+++ b/front/src/app/(base)/exploration/components/RecordingExplorationTabs.tsx
@@ -0,0 +1,43 @@
+import {
+ useRouter,
+ useSearchParams,
+ useSelectedLayoutSegment,
+} from "next/navigation";
+
+import * as icons from "@/lib/components/icons";
+import SectionTabs from "@/lib/components/navigation/SectionTabs";
+import Tab from "@/lib/components/ui/Tab";
+
+export default function ExplorationTabs() {
+ const router = useRouter();
+ const params = useSearchParams();
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+
+ return (
+ {
+ router.push(`/exploration/recordings/list/?${params.toString()}`);
+ }}
+ >
+ )
+
+ List
+ ,
+ {
+ router.push(`/exploration/recordings/map/?${params.toString()}`);
+ }}
+ >
+
+ Map
+ ,
+ ]}
+ />
+ );
+}
diff --git a/front/src/app/(base)/exploration/components/SoundEventExplorationTabs.tsx b/front/src/app/(base)/exploration/components/SoundEventExplorationTabs.tsx
new file mode 100644
index 00000000..1c530e47
--- /dev/null
+++ b/front/src/app/(base)/exploration/components/SoundEventExplorationTabs.tsx
@@ -0,0 +1,57 @@
+import {
+ useRouter,
+ useSearchParams,
+ useSelectedLayoutSegment,
+} from "next/navigation";
+
+import * as icons from "@/lib/components/icons";
+import SectionTabs from "@/lib/components/navigation/SectionTabs";
+import Tab from "@/lib/components/ui/Tab";
+
+export default function ExplorationTabs() {
+ const router = useRouter();
+ const params = useSearchParams();
+ const selectedLayoutSegment = useSelectedLayoutSegment();
+
+ return (
+ {
+ router.push(
+ `/exploration/sound_events/gallery/?${params.toString()}`,
+ );
+ }}
+ >
+ )
+
+ Gallery
+ ,
+ {
+ router.push(`/exploration/sound_events/list/?${params.toString()}`);
+ }}
+ >
+
+ List
+ ,
+ {
+ router.push(
+ `/exploration/sound_events/scatterplot/?${params.toString()}`,
+ );
+ }}
+ >
+
+ Scatterplot
+ ,
+ ]}
+ />
+ );
+}
diff --git a/front/src/app/(base)/exploration/layout.tsx b/front/src/app/(base)/exploration/layout.tsx
index 09e8ead2..7ee342c1 100644
--- a/front/src/app/(base)/exploration/layout.tsx
+++ b/front/src/app/(base)/exploration/layout.tsx
@@ -1,12 +1,13 @@
"use client";
+
import { type ReactNode } from "react";
-import ExplorationHeader from "@/components/exploration/Header";
+import ExplorationTabs from "@/app/(base)/exploration/components/ExplorationTabs";
export default function Layout({ children }: { children: ReactNode }) {
return (
<>
-
+
{children}
);
diff --git a/front/src/app/(base)/exploration/page.tsx b/front/src/app/(base)/exploration/page.tsx
index ea9874a1..4c6eec89 100644
--- a/front/src/app/(base)/exploration/page.tsx
+++ b/front/src/app/(base)/exploration/page.tsx
@@ -1,57 +1,41 @@
"use client";
-import Link from "next/link";
-import Button from "@/components/Button";
-import Card from "@/components/Card";
-import { H3 } from "@/components/Headings";
+import { useRouter } from "next/navigation";
+
+import ExplorationCard from "@/lib/components/exploration/ExplorationCard";
+import SectionLandingLayout from "@/lib/components/layouts/SectionLanding";
export default function Page() {
+ const router = useRouter();
return (
-
-
-
Exploration Tools
-
- Utilize the provided tools to delve into your data
-
-
-
-
- Recordings
-
- Explore the recordings, sort by metadata, discover recording
- locations on a map
-
-
-
-
-
-
-
-
- Clips
-
- Discover annotated clips, view them in a gallery, and listen to them
-
-
-
-
-
-
-
-
- Sound Events
-
- Search and view annotated sound events. Visualize them in a
- scatterplot for easy reference or create a gallery for quick
- comparisons.
-
-
-
-
-
-
-
-
-
Exploration Tools
+
+ Utilize the provided tools to delve into your data
+
+
+ }
+ Cards={
+ <>
+ router.push("/exploration/recordings/list/")}
+ />
+ router.push("/exploration/clips/gallery/")}
+ />
+ router.push("/exploration/sound_events/gallery/")}
+ />
+
+ }
+ />
);
}
diff --git a/front/src/app/(base)/exploration/recordings/layout.tsx b/front/src/app/(base)/exploration/recordings/layout.tsx
new file mode 100644
index 00000000..1d25ac52
--- /dev/null
+++ b/front/src/app/(base)/exploration/recordings/layout.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { type ReactNode } from "react";
+
+import RecordingExplorationTabs from "@/app/(base)/exploration/components/RecordingExplorationTabs";
+
+export default function Layout({ children }: { children: ReactNode }) {
+ return (
+ <>
+
+
+ Explore all recordings. Use the filtering options to select a subset,
+ and choose the view you wish to use to explore the recordings.
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/front/src/app/(base)/exploration/recordings/list/page.tsx b/front/src/app/(base)/exploration/recordings/list/page.tsx
new file mode 100644
index 00000000..003bb393
--- /dev/null
+++ b/front/src/app/(base)/exploration/recordings/list/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import Pagination from "@/app/components/Pagination";
+import RecordingSpectrogram from "@/app/components/recordings/RecordingSpectrogram";
+
+import useRecordings from "@/app/hooks/api/useRecordings";
+
+import RecordingGallery from "@/lib/components/exploration/RecordingGallery";
+import FilterBar from "@/lib/components/filters/FilterBar";
+import FilterMenu from "@/lib/components/filters/FilterMenu";
+import recordingFilterDefs from "@/lib/components/filters/recordings";
+import ExplorationLayout from "@/lib/components/layouts/Exploration";
+import ListCounts from "@/lib/components/lists/ListCounts";
+
+export default function Page() {
+ const {
+ items: recordings,
+ total,
+ filter,
+ pagination,
+ isLoading,
+ } = useRecordings({
+ pageSize: 10,
+ });
+
+ return (
+
+
+
+
+ }
+ Pagination={
+