Adds navigation pages for features and taxa

.github/workflows/testAndDeploy.yml

@@ -29,7 +29,7 @@ jobs:
           flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
 
   test-frontend:
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
 
     defaults:
       run:

frontend/app/(dashboard)/data/features/[featureId]/page.tsx

@@ -0,0 +1,41 @@
+import { prisma } from "@/helpers/prisma";
+import { getBaseUrl } from "@/helpers/utils";
+import Link from "next/link";
+import { promises as fs } from "fs";
+import { parse }  from "csv-parse/sync";
+
+export default async function FeatureId({ params }: { params: { featureId: string } }) {
+	const content = await fs.readFile(`${process.cwd()}/app/exampleData.tsv`, "utf8");
+	const lines = content.split("\n");
+	const result = [];
+	const headers = lines[0].split("\t");
+
+	for (let i = 1; i < lines.length; i++) {
+		const obj = {};
+		const currentline = lines[i].split("\t");
+
+		for (let j = 0; j < headers.length; j++) {
+			//@ts-ignore
+			obj[headers[j]] = currentline[j];
+		}
+
+    	result.push(obj);
+ 	}
+	const feature = result.find((f) => f.featureid === params.featureId);
+	//const records = parse(content, { bom: true, columns: true });
+	//console.log(records)
+
+	return (
+		<div className="p-5 bg-primary rounded-xl">
+			<h1>Feature {feature.featureid}</h1>
+			<div>
+				<h2>Consensus Taxonomy:</h2>
+				<Link href={`${getBaseUrl()}/data/taxonomies/${feature.species}`}>{feature.species}</Link>
+				<h2>Taxonomies:</h2>
+				<Link href={`${getBaseUrl()}/data/taxonomies/${feature.species}`}>{feature.species}</Link>
+				<h2>Studies:</h2>
+				<Link href={`${getBaseUrl()}/data/projects/1/runs/1`}>Example Study</Link>
+			</div>
+		</div>
+	);
+}

frontend/app/(dashboard)/data/page.tsx

@@ -0,0 +1,27 @@
+import ProjectCatalogue from "@/components/ProjectCatalogue";
+import { getRemoteUrl } from "@/helpers/utils";
+import dynamic from "next/dynamic";
+const Map = dynamic(() => import("@/components/Map"), {
+	ssr: false,
+});
+
+export default async function Dashboard() {
+	// const res = await fetch(getRemoteUrl(), {
+	// 	method: "GET",
+	// 	cache: "no-store"
+	// });
+	// const data = await res.json();
+	// if (data.error) {
+	// 	return <div>Error: {data.error}</div>
+	// }
+
+	return (
+		<main className="flex flex-col z-40 m-5 gap-5">
+			<input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto bg-neutral-content" />
+			<div className="flex-grow">
+				<Map></Map>
+			</div>
+			<ProjectCatalogue></ProjectCatalogue>
+		</main>
+	);
+}

frontend/app/(dashboard)/data/projects/[project_id]/page.tsx

@@ -0,0 +1,48 @@
+import { prisma } from "@/helpers/prisma";
+import { getBaseUrl } from "@/helpers/utils";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+const Map = dynamic(() => import("@/components/Map"), {
+	ssr: false,
+});
+
+export default async function ProjectId({ params }: { params: { project_id: string } }) {
+	// const project = await prisma.study_Data.findUnique({ //SCHEMA
+	// 	where: {
+	// 		project_id: params.project_id
+	// 	}
+	// });
+	// if (!project) return <div>Failed to load project</div>;
+	let runs = [{
+		id: 1,
+		uploadedBy: "User1",
+		date_modified: "2024-09-30T14:42:24Z"
+	}]
+	runs = [...runs, ...runs, ...runs, ...runs, ...runs]
+
+	return (
+		<div className="flex flex-col z-40 m-5 gap-5">
+			<h1>Project Name</h1>
+			<div className="flex-grow">
+				<Map></Map>
+			</div>
+			<div className="p-5 bg-primary rounded-xl">
+				{/* {JSON.stringify(project/)} */}
+				<h1 className="text-3xl font-bold border-b-2 border-black mb-5">Metadata:</h1>
+				<div>Some metadata</div>
+				<h1 className="text-3xl font-bold border-b-2 border-black mb-5">Runs:</h1>
+				{runs.map((r) => (
+					<Link key={r.id} href={`${getBaseUrl()}/data/projects/${params.project_id}/runs/${r.id}`}>
+						<div className="card bg-neutral-content my-3">
+							<div className="card-body">
+								<h2 className="card-title">{r.uploadedBy}</h2>
+								<p>{r.date_modified}</p>
+								<p>Other metadata</p>
+							</div>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+}

frontend/app/(dashboard)/data/projects/[project_id]/runs/[runId]/page.tsx

@@ -0,0 +1,35 @@
+import { prisma } from "@/helpers/prisma";
+import { getBaseUrl } from "@/helpers/utils";
+import Link from "next/link";
+import { promises as fs } from "fs";
+import { parse }  from "csv-parse/sync";
+import Catalogue from "@/components/Catalogue";
+
+export default async function RunId({ params }: { params: { project_id: string, runId: string } }) {
+	const content = await fs.readFile(`${process.cwd()}/app/exampleData.tsv`, "utf8");
+	const lines = content.split("\n");
+	const result = [];
+	const headers = lines[0].split("\t");
+
+	for (let i = 1; i < lines.length; i++) {
+		const obj = {};
+		const currentline = lines[i].split("\t");
+
+		for (let j = 0; j < headers.length; j++) {
+			//@ts-ignore
+			obj[headers[j]] = currentline[j];
+		}
+
+    	result.push(obj);
+ 	}
+	//const records = parse(content, { bom: true, columns: true });
+	//console.log(records)
+
+	return (
+		<div className="p-5 bg-primary rounded-xl">
+			<Link href={`${getBaseUrl()}/data/projects/${params.project_id}`}>← Project {params.project_id}</Link>
+			<h1>Features:</h1>
+			<Catalogue data={result}></Catalogue>
+		</div>
+	);
+}

frontend/app/(dashboard)/data/taxonomies/[taxonomy]/page.tsx

@@ -0,0 +1,46 @@
+import { prisma } from "@/helpers/prisma";
+import { getBaseUrl } from "@/helpers/utils";
+import Link from "next/link";
+import { promises as fs } from "fs";
+import { parse }  from "csv-parse/sync";
+
+export default async function FeatureId({ params }: { params: { taxonomy: string } }) {
+	const content = await fs.readFile(`${process.cwd()}/app/exampleData.tsv`, "utf8");
+	const lines = content.split("\n");
+	const result = [];
+	const headers = lines[0].split("\t");
+
+	for (let i = 1; i < lines.length; i++) {
+		const obj = {};
+		const currentline = lines[i].split("\t");
+
+		for (let j = 0; j < headers.length; j++) {
+			//@ts-ignore
+			obj[headers[j]] = currentline[j];
+		}
+
+    	result.push(obj);
+ 	}
+	const features = result.filter((f) => f.species === params.taxonomy.replace("%20", " "));
+	//const records = parse(content, { bom: true, columns: true });
+	//console.log(records)
+
+	return (
+		<div className="p-5 bg-primary rounded-xl">
+			<h1>Taxonomy {params.taxonomy.replace("%20", " ")}</h1>
+			{/*<h2>{features[0]}</h2>*/}
+			<div>
+				<h2>Features:</h2>
+				{features.map((f) => (
+					<Link key={f.featureid} href={`${getBaseUrl()}/data/features/${f.featureid}`}>
+						<div className="card bg-neutral-content m-3">
+							<div className="card-body p-5">
+								{f.featureid}
+							</div>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
+}

frontend/app/(dashboard)/page.tsx

@@ -1,26 +1,60 @@
-import ProjectCatalogue from "@/components/ProjectCatalogue";
-import { getRemoteUrl } from "@/helpers/utils";
-import dynamic from "next/dynamic";
-const Map = dynamic(() => import("@/components/Map"), {
-	ssr: false,
-});
+import Image from "next/image";
 
 export default async function Dashboard() {
-	// const res = await fetch(getRemoteUrl(), {
-	// 	method: "GET",
-	// 	cache: "no-store"
-	// });
-	// const data = await res.json();
-	// if (data.error) {
-	// 	return <div>Error: {data.error}</div>
-	// }
-
 	return (
-		<main className="flex flex-col z-40 m-5 gap-5">
-			<div className="flex-grow">
-				<Map></Map>
+		<main className="flex flex-col gap-5 grow">
+			<Image src="/images/beautiful-photo-sea-waves_58702-11300.avif" alt="" className="fixed z-0 object-cover min-h-full w-full" width={1920} height={500}/>
+			<div className="z-30 mx-20 my-10">
+				<div className="carousel w-full">
+					<div id="slide1" className="carousel-item relative w-full">
+						<Image
+						src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
+						alt=""
+						width={1920} height={500}
+						className="w-full" />
+						<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+							<a href="#slide4" className="btn btn-circle">❮</a>
+							<a href="#slide2" className="btn btn-circle">❯</a>
+						</div>
+					</div>
+					<div id="slide2" className="carousel-item relative w-full">
+						<Image
+						src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
+						alt=""
+						width={1920} height={500}
+						className="w-full" />
+						<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+							<a href="#slide1" className="btn btn-circle">❮</a>
+							<a href="#slide3" className="btn btn-circle">❯</a>
+						</div>
+					</div>
+					<div id="slide3" className="carousel-item relative w-full">
+						<Image
+						src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
+						alt=""
+						width={1920} height={500}
+						className="w-full" />
+						<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+							<a href="#slide2" className="btn btn-circle">❮</a>
+							<a href="#slide4" className="btn btn-circle">❯</a>
+						</div>
+					</div>
+					<div id="slide4" className="carousel-item relative w-full">
+						<Image
+						src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
+						alt=""
+						width={1920} height={500}
+						className="w-full" />
+						<div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
+							<a href="#slide3" className="btn btn-circle">❮</a>
+							<a href="#slide1" className="btn btn-circle">❯</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="z-30 bg-base-100 px-20 grow">
+				test
 			</div>
-			{/* <ProjectCatalogue></ProjectCatalogue> */}
 		</main>
 	);
 }