[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

@@ -38,7 +38,7 @@
     "svelte-check": "^3.6.0",
     "tailwindcss": "3.3.6",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.3.3",
     "vite": "^5.0.3",
     "vite-plugin-tailwind-purgecss": "0.2.0",
     "vitest": "^1.0.0"
@@ -47,6 +47,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
     "@fortawesome/fontawesome-free": "^6.5.1",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "svelte-eslint-parser": "^0.33.1"
   }
 }

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/lib/api.ts

@@ -0,0 +1,60 @@
+import { error, type NumericRange } from '@sveltejs/kit';
+import { branding } from '$lib/configuration';
+
+const base = branding.baseUrl;
+
+async function send({
+  method,
+  path,
+  token,
+  data,
+}: {
+  method: string;
+  path: string;
+  token: string;
+  data?: any; //TODO: Change this
+}) {
+  const opts: { method: string; headers: { [key: string]: string }; body?: string } = {
+    method,
+    headers: {},
+  };
+
+  if (data) {
+    opts.headers['Content-Type'] = 'application/json';
+    opts.body = JSON.stringify(data);
+  }
+
+  if (token) {
+    opts.headers['Authorization'] = `Token ${token}`;
+  }
+
+  console.debug('fetching', `${base}${path}`, opts);
+  const res = await fetch(`${base}${path}`, opts);
+  if (res.ok || res.status === 422) {
+    const text = await res.text();
+    console.log('text', text);
+    try {
+      return JSON.parse(text);
+    } catch (e) {
+      return text; //TODO: Change this
+    }
+  }
+
+  throw error(res.status as NumericRange<400, 599>, await res.text());
+}
+
+export function get(path: string, token: string) {
+  return send({ method: 'GET', path, token });
+}
+
+export function del(path: string, token: string) {
+  return send({ method: 'DELETE', path, token });
+}
+
+export function post(path: string, token: string, data: any) {
+  return send({ method: 'POST', path, token, data });
+}
+
+export function put(path: string, token: string, data: any) {
+  return send({ method: 'PUT', path, token, data });
+}

src/lib/configuration.ts

@@ -1,30 +1,75 @@
 export const branding = {
+  baseUrl: 'https://nhanes-dev.hms.harvard.edu/',
+  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: 'Explore data, apply filters, and build cohorts',
+        icon: 'fa-solid fa-magnifying-glass fa-5x',
+        url: '/dataset',
+      },
+      {
+        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: [
       {
         title: 'User Guide',
         description: 'Complete user manual for seamless navigation and utilization.',
         icon: 'fa-solid fa-book fa-5x',
-        url: '/help/dummy?title=' + encodeURI('User Guide')
+        url: '/help/dummy?title=' + encodeURI('User Guide'),
       },
       {
         title: 'Video Library',
         description: "Example 'how-to' video demonstrations.",
         icon: 'fa-solid fa-tv fa-5x',
-        url: '/help/dummy?title=' + encodeURI('Video Library')
+        url: '/help/dummy?title=' + encodeURI('Video Library'),
       },
       {
         title: 'Request Assistance',
         description: 'Need help? Submit a service desk ticket, we are here to help!',
         icon: 'fa-solid fa-hands-holding-circle fa-5x',
-        url: '/help/dummy?title=' + encodeURI('Request Assistance')
+        url: '/help/dummy?title=' + encodeURI('Request Assistance'),
       },
       {
         title: 'PIC-Sure Website',
         description: 'Check out the PIC-Sure website for information.',
         icon: 'fa-solid fa-circle-info fa-5x',
-        url: '/help/dummy?title=' + encodeURI('PIC-Sure Website')
-      }
-    ]
-  }
+        url: '/help/dummy?title=' + encodeURI('PIC-Sure Website'),
+      },
+    ],
+  },
 };

src/lib/models/value.ts

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

src/lib/navigation.svelte

@@ -4,15 +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: '/admin/super', text: 'Super Admin' },
-    { path: '/#', id: 'logout', text: 'Logout' }
+    { path: '/#', id: 'logout', text: 'Logout' },
   ];
 
   function getId({ path, id }: { path: string; id?: string; text: string }) {
@@ -22,7 +21,9 @@
 
 <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">

src/routes/+layout.svelte

@@ -3,17 +3,20 @@
   import Navigation from '$lib/navigation.svelte';
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
+  import { initializeStores, Toast } from '@skeletonlabs/skeleton';
+  initializeStores();
   // // Floating UI for Popups
   // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
   // import { storePopup } from '@skeletonlabs/skeleton';
   // storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 </script>
 
+<Toast />
 <AppShell>
   <svelte:fragment slot="header">
     <Navigation />
+    <hr class="!border-t-2" />
   </svelte:fragment>
-  <hr class="!border-t-2" />
   <!-- (sidebarLeft) -->
   <!-- (sidebarRight) -->
   <!-- (pageHeader) -->