From 8082707a0cc83174b86ce23343320183c64c0c5f Mon Sep 17 00:00:00 2001 From: James Date: Tue, 20 Feb 2024 10:01:26 -0500 Subject: [PATCH] [ALS-5909] Landing Page in New UI --- .eslintrc.cjs | 14 ++-- .prettierrc | 2 +- package-lock.json | 3 +- package.json | 3 +- pic-sure-theme.ts | 4 +- playwright.config.ts | 4 +- postcss.config.cjs | 4 +- src/lib/configuration.ts | 45 ++++++++++ src/lib/models/value.ts | 5 ++ src/lib/navigation.svelte | 7 +- src/routes/+page.svelte | 172 +++++++++++++++++++++++++++++++++++++- svelte.config.js | 6 +- tailwind.config.ts | 12 +-- tests/test.ts | 39 --------- vite.config.ts | 2 +- 15 files changed, 250 insertions(+), 72 deletions(-) create mode 100644 src/lib/models/value.ts delete mode 100644 tests/test.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7f32e64b..e5111869 100644 --- a/.eslintrc.cjs +++ b/.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', + }, + }, + ], }; diff --git a/.prettierrc b/.prettierrc index 0580f3e9..b4cde23e 100644 --- a/.prettierrc +++ b/.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" } }] diff --git a/package-lock.json b/package-lock.json index 48816c1b..758d77d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,9 +35,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" diff --git a/package.json b/package.json index c28fa6d6..20ab4d65 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/pic-sure-theme.ts b/pic-sure-theme.ts index 621222b9..c32a3174 100644 --- a/pic-sure-theme.ts +++ b/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 + }, }; diff --git a/playwright.config.ts b/playwright.config.ts index a458c6af..49812fed 100644 --- a/playwright.config.ts +++ b/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; diff --git a/postcss.config.cjs b/postcss.config.cjs index 5cbc2c7d..12a703d9 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,6 +1,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {} - } + autoprefixer: {}, + }, }; diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts index 5f354cd7..715a19fc 100644 --- a/src/lib/configuration.ts +++ b/src/lib/configuration.ts @@ -1,4 +1,49 @@ 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: [ { diff --git a/src/lib/models/value.ts b/src/lib/models/value.ts new file mode 100644 index 00000000..3a0ea9db --- /dev/null +++ b/src/lib/models/value.ts @@ -0,0 +1,5 @@ +export interface Value { + title: string; + value?: string; + valueSrc?: string; +} diff --git a/src/lib/navigation.svelte b/src/lib/navigation.svelte index a80d64a2..80650dfe 100644 --- a/src/lib/navigation.svelte +++ b/src/lib/navigation.svelte @@ -4,7 +4,6 @@ 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' }, @@ -12,7 +11,7 @@ { 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 @@ - +