Add organism selector for browse and submit pages (#1113)

* add organism selector * update
loculus-project · Feb 25, 2024 · 3cb7cde · 3cb7cde
1 parent 27833ec
commit 3cb7cde
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/website/src/pages/organism-selector/[redirectTo].astro b/website/src/pages/organism-selector/[redirectTo].astro
@@ -0,0 +1,45 @@
+---
+import { getConfiguredOrganisms } from '../../config';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { routes } from '../../routes';
+const redirectTo = Astro.params.redirectTo;
+
+const purposes: { [key: string]: string } = {
+    submit: 'for which you want to submit data',
+    search: 'for which you want to browse data',
+};
+
+interface Routes {
+    [key: string]: (organism: string) => string;
+}
+
+const myRoutes: Routes = {
+    submit: routes.submitPage,
+    search: routes.searchPage,
+};
+
+const purpose = purposes[redirectTo!];
+---
+
+<BaseLayout title='Home'>
+    <div class='max-w-6xl mx-auto'>
+        <p class='text-gray-700 my-4'>
+            Please select an organism {purpose}.
+        </p>
+
+        <div class='flex flex-wrap'>
+            {
+                getConfiguredOrganisms().map(({ key, displayName, image, description }) => (
+                    <a
+                        href={myRoutes[redirectTo!](key)}
+                        class='block rounded border border-gray-300 p-4 m-2 w-64 text-center hover:bg-gray-100'
+                    >
+                        {image !== undefined && <img src={image} class='h-32 mx-auto mb-4' alt={displayName} />}
+                        <h3 class='font-semibold text-gray-700'>{displayName}</h3>
+                        <p class='text-gray-700 text-sm'>{description}</p>
+                    </a>
+                ))
+            }
+        </div>
+    </div>
+</BaseLayout>
diff --git a/website/src/routes.ts b/website/src/routes.ts
@@ -72,6 +72,7 @@ export const routes = {
     },
     notFoundPage: () => `/404`,
     logout: () => '/logout',
+    organismSelectorPage: (redirectTo: string) => `/organism-selector/${redirectTo}`,
 };
 
 export type ClassOfSearchPageType = 'SEARCH' | 'MY_SEQUENCES';
@@ -177,6 +178,14 @@ export const navigationItems = {
 function topNavigationItems(organism: string | undefined) {
     if (organism === undefined) {
         return [
+            {
+                text: 'Browse',
+                path: routes.organismSelectorPage('search'),
+            },
+            {
+                text: 'Submit',
+                path: routes.organismSelectorPage('submit'),
+            },
             {
                 text: 'User',
                 path: routes.userOverviewPage(),
@@ -190,7 +199,7 @@ function topNavigationItems(organism: string | undefined) {
 
     return [
         {
-            text: 'Search',
+            text: 'Browse',
             path: routes.searchPage(organism),
         },
         {