Skip to content

Commit

Permalink
[ALS-5909] Landing Page in New UI
Browse files Browse the repository at this point in the history
  • Loading branch information
JamesPeck committed Feb 29, 2024
1 parent 34d834e commit 8082707
Show file tree
Hide file tree
Showing 15 changed files with 250 additions and 72 deletions.
14 changes: 7 additions & 7 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
},
],
};
2 changes: 1 addition & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"useTabs": false,
"singleQuote": true,
"trailingComma": "none",
"trailingComma": "all",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
Expand Down
3 changes: 2 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions pic-sure-theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
};
4 changes: 2 additions & 2 deletions playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
4 changes: 2 additions & 2 deletions postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
autoprefixer: {},
},
};
45 changes: 45 additions & 0 deletions src/lib/configuration.ts
Original file line number Diff line number Diff line change
@@ -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: [
{
Expand Down
5 changes: 5 additions & 0 deletions src/lib/models/value.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export interface Value {
title: string;
value?: string;
valueSrc?: string;
}
7 changes: 4 additions & 3 deletions src/lib/navigation.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand All @@ -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">
Expand Down
172 changes: 168 additions & 4 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,171 @@
<script lang="ts">
import Content from '$lib/component/content.svelte';
import { branding } from '$lib/configuration';
import { ProgressRadial } from '@skeletonlabs/skeleton';
import type { PageData } from './$types';
import type { Value } from '$lib/models/value';
import * as api from '$lib/api';
import { onMount } from 'svelte';
export let data: PageData;
let values: Value[];
let searchTerm = '';
onMount(async () => {
//TODO: Update to use a real value endpoint
values = await Promise.all(
branding.landing.stats.map(async (stat) => {
try {
if (!stat.valueSrc) {
return { value: stat.value, title: stat.title };
}
const value = await api.post(stat.valueSrc, '', ''); //TODO: add token
return { value, title: stat.title } as Value;
} catch (e) {
console.error(e);
return { value: 'N/A', title: stat.title };
}
}),
);
});
function search() {
console.log('searching for:', searchTerm);
}
</script>

<Content title="Home">
<p>Sample page data for the home page.</p>
</Content>
<div id="landing" class="landing">
<section id="search-section" class="flex flex-col text-center items-center search-section">
<div class="flex w-full">
<input
id="search-box"
type="search"
autocomplete="off"
class="search-box"
aria-label="Type search terms here, use enter or the search button to submit search"
title="Type search terms here, use enter or the search button to submit search"
placeholder={branding.landing.searchPlaceholder || 'Search...'}
bind:value={searchTerm}
on:keydown={(e) => e.key === 'Enter' && search()}
required
/>
<button
id="search-button"
class="btn variant-filled-primary search-button"
aria-label="Search"
title="Search"
disabled={!searchTerm}
on:click={search}
>Search</button
>
</div>
<p>
{branding.landing.description ||
'PIC-SURE can be used to search phenotypic variables and genomic variants, apply filters, build cohorts, and export participant-level data.'}
</p>
</section>
<section class="actions">
{#each branding.landing.actions as link}
<a href={link.url} target="_blank" tabindex="0">
<i class={link.icon} />
<div>{link.description}</div>
</a>
{/each}
</section>
<section class="stats">
{#if values}
{#each values as stat}
<div class="flex flex-col">
<div id="value-{stat.title}" class="flex flex-col justify-center items-center">
{stat.value}
</div>
<p>{stat.title}</p>
</div>
{/each}
{:else}
{#each branding.landing.stats as stat}
<div id="value-{stat.title}" class="flex flex-col justify-center items-center">
<ProgressRadial width="w-10" value={undefined} />
<p>{stat.title}</p>
</div>
{/each}
{/if}
</section>
</div>

<style>
#landing {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100%;
width: 100%;
padding: 2rem;
text-align: center;
}
#landing input[type='search'] {
width: 100%;
box-sizing: border-box;
margin-right: 0.5rem;
@apply input;
}
#landing #search-section p {
max-width: 50rem;
margin: 1rem 0;
color: grey;
}
#landing section#search-section {
width: 70%;
}
#landing .actions {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 2rem 0;
}
#landing .actions a {
color: rgb(var(--text-secondary-500));
text-decoration: none;
display: flex;
flex-direction: column;
text-align: center;
max-width: 12.5rem;
padding: 1rem 0.5rem;
margin: 0.3rem;
}
#landing .actions a i {
color: rgb(var(--color-primary-500));
}
#landing .actions a:hover,
#landing .actions a:active {
transform: scale(1.05);
}
#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;
}
#landing .stats .stat {
max-width: 10rem;
}
#landing .stats div {
font-size: 1.5rem;
}
#landing .stats p {
font-size: 1rem;
}
</style>
6 changes: 3 additions & 3 deletions svelte.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ const config = {
preprocess: [vitePreprocess()],

vitePlugin: {
inspector: true
inspector: true,
},
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
adapter: adapter(),
},
};
export default config;
Loading

0 comments on commit 8082707

Please sign in to comment.