[ALS-5909] Landing Page in New UI

.eslintrc.cjs

@@ -5,27 +5,27 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:svelte/recommended',
-    'prettier'
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
-    extraFileExtensions: ['.svelte']
+    extraFileExtensions: ['.svelte'],
   },
   env: {
     browser: true,
     es2017: true,
-    node: true
+    node: true,
   },
   overrides: [
     {
       files: ['*.svelte'],
       parser: 'svelte-eslint-parser',
       parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
-  ]
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
 };

.prettierrc

@@ -1,7 +1,7 @@
 {
   "useTabs": false,
   "singleQuote": true,
-  "trailingComma": "none",
+  "trailingComma": "all",
   "printWidth": 100,
   "plugins": ["prettier-plugin-svelte"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]

package.json

@@ -16,7 +16,7 @@
     "playwright": "playwright test --ui"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.42.0",
     "@skeletonlabs/skeleton": "2.6.0",
     "@skeletonlabs/tw-plugin": "0.3.0",
     "@sveltejs/adapter-auto": "^3.0.0",
@@ -37,9 +37,10 @@
     "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "svelte-eslint-parser": "^0.33.1",
     "tailwindcss": "3.3.6",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-tailwind-purgecss": "0.2.0",
     "vitest": "^1.0.0"

pic-sure-theme.ts

@@ -96,6 +96,6 @@ export const picSureTheme: CustomThemeConfig = {
     '--color-surface-600': '167 167 167', // #a7a7a7
     '--color-surface-700': '140 140 140', // #8c8c8c
     '--color-surface-800': '112 112 112', // #707070
-    '--color-surface-900': '91 91 91' // #5b5b5b
-  }
+    '--color-surface-900': '91 91 91', // #5b5b5b
+  },
 };

playwright.config.ts

@@ -3,11 +3,11 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   webServer: {
     command: 'npm run build && npm run preview',
-    port: 4173
+    port: 4173,
   },
   testDir: 'tests',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-  reporter: [['list'], ['html']]
+  reporter: [['list'], ['html']],
 };
 
 export default config;

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };

src/app.postcss

@@ -139,6 +139,24 @@ nav#page-navigation a:active {
   color: rgb(var(--theme-font-color-base));
 }
 
+#landing input[type='search'] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-right: 0.5rem;
+  @apply input;
+}
+
+#landing .stats {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 70%;
+  margin: 2rem 0;
+  padding: 2rem;
+  @apply card variant-filled-primary;
+}
+
 .subtitle {
   font-size: 2rem;
 }

src/lib/component/navigation.svelte

@@ -4,14 +4,14 @@
   import logo from '$lib/assets/app-logo.png';
 
   const routes = [
-    { path: '/', id: 'home', text: 'Home' },
     { path: '/explorer', text: 'Query Builder' },
     { path: '/users', text: 'Users' },
     { path: '/api', text: 'API' },
     { path: '/dataset', text: 'Dataset Management' },
     { path: '/help', text: 'Help' },
     { path: '/admin', text: 'Admin' },
-    { path: '/#', id: 'logout', text: 'Logout' }
+    { path: '/admin/super', text: 'Super Admin' },
+    { path: '/#', id: 'logout', text: 'Logout' },
   ];
 
   function getId({ path, id }: { path: string; id?: string; text: string }) {
@@ -21,18 +21,18 @@
 
 <AppBar padding="p-0">
   <svelte:fragment slot="lead">
-    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
+    <a href="/" aria-current="page"
+      ><img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" /></a
+    >
   </svelte:fragment>
   <svelte:fragment slot="trail">
     <nav id="page-navigation">
       {#each routes as route}
         <a
           id={getId(route)}
           href={route.path}
-          aria-current={$page.url.pathname === route.path ? 'page' : undefined}
+          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
         >
-          {route.text}
-        </a>
       {/each}
     </nav>
   </svelte:fragment>

src/lib/configuration.ts

@@ -1,4 +1,48 @@
 export const branding = {
+  landing: {
+    searchPlaceholder: 'Search terms or variables of interest…',
+    description:
+      'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.',
+    actions: [
+      {
+        description: 'Explore data, apply filters, and build cohorts',
+        icon: 'fa-solid fa-magnifying-glass fa-5x',
+        url: '/explorer',
+      },
+      {
+        description: 'Manage Previously Saved Datasets',
+        icon: 'fa-solid fa-table-list fa-5x',
+        url: '/dataset',
+      },
+      {
+        description: 'Take a tour of the PIC-SURE API',
+        icon: 'fa-solid fa-route fa-5x',
+        url: '/explorer?tour=true',
+      },
+      {
+        description: 'Learn more about PIC‑SURE',
+        icon: 'fa-solid fa-circle-question fa-5x',
+        url: 'https://pic-sure.org/about',
+      },
+    ],
+    stats: [
+      {
+        title: 'Data Sources',
+        value: '10',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Variables',
+        value: '1,000,000',
+        valueSrc: undefined,
+      },
+      {
+        title: 'Participants with Genomic Data',
+        value: '1,000',
+        valueSrc: undefined,
+      },
+    ],
+  },
   help: {
     links: [
       {

src/lib/models/value.ts

@@ -0,0 +1,5 @@
+export interface Value {
+  title: string;
+  value?: string;
+  valueSrc?: string;
+}