diff --git a/frontend/package.json b/frontend/package.json index 72df7fa1..bc851907 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ "openapi": "npx openapi-typescript-codegen --input http://localhost:8000/openapi.json --output ./src/openapi --client fetch" }, "devDependencies": { + "@fontsource-variable/inter": "^5.0.16", "@fontsource/fira-mono": "^4.5.10", "@neoconfetti/svelte": "^1.0.0", "@sveltejs/adapter-auto": "^2.0.0", diff --git a/frontend/src/app.postcss b/frontend/src/app.postcss index 1a7b7cf3..d2b8d509 100644 --- a/frontend/src/app.postcss +++ b/frontend/src/app.postcss @@ -2,3 +2,17 @@ @tailwind base; @tailwind components; @tailwind utilities; + +:root { + --darkblue-hsl: 205, 57%, 23%; + --darkblue: hsla(var(--darkblue-hsl), 1); + + --lightblue-hsl: 198, 41%, 54%; + --lightblue: hsla(var(--lightblue-hsl), 1); + + --darkorange-hsl: 27, 77%, 55%; + --darkorange: hsla(var(--darkorange-hsl), 1); + + --lightorange-hsl: 38, 83%, 60%; + --lightorange: hsla(var(--lightorange-hsl), 1); +} diff --git a/frontend/src/lib/EntryCard.svelte b/frontend/src/lib/EntryCard.svelte new file mode 100644 index 00000000..00011d09 --- /dev/null +++ b/frontend/src/lib/EntryCard.svelte @@ -0,0 +1,12 @@ + + + +

{title}

+ + diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte index decec787..39291fc5 100644 --- a/frontend/src/lib/ListProteins.svelte +++ b/frontend/src/lib/ListProteins.svelte @@ -2,80 +2,97 @@ import { goto } from "$app/navigation"; import type { ProteinEntry } from "$lib/backend"; import { numberWithCommas } from "$lib/format"; - import { - Table, - TableBody, - TableBodyCell, - TableBodyRow, - TableHead, - TableHeadCell, - } from "flowbite-svelte"; import { Tabs, TabItem } from "flowbite-svelte"; - import { Card } from "flowbite-svelte"; + import dummy from "$lib/images/dummy.png"; export let allEntries: ProteinEntry[] | null = null; + const dummyDesc = + "scriptionDescriptionDescription DescriptionDescription Description Description"; - - - - - Protein name - Organism - Length - Mass (Da) - - - {#if allEntries} - {#each allEntries as entry} - { - goto(`/protein/${entry.name}`); - }} - > - {entry.name} - {entry.speciesName} - {entry.length} - {numberWithCommas(entry.mass)} - - {/each} - {/if} - -
- - -
- {#if allEntries} - {#each allEntries as entry} - goto(`/protein/${entry.name}`)} - > -
- {entry.name} +
+ {#if allEntries} + {#each allEntries as entry} + + +
goto(`/protein/${entry.name}`)} + title={`Name:${entry.name}\nDescription:${dummyDesc}`} + > +
+ dummy +
+
+
+ {entry.name} +
+
+ {dummyDesc} +
+
+
Organism: {entry.speciesName}
+
Method: AlphaFold2
+
Length: {entry.length}
+
+ Mass: {numberWithCommas(entry.mass)}
-
- Length: {entry.length}, Mass (Da): {numberWithCommas(entry.mass)} -
- - {/each} - {/if} -
- - +
+
+
+ {/each} + {/if} +
diff --git a/frontend/src/lib/Markdown.svelte b/frontend/src/lib/Markdown.svelte index 92929eda..d4d3b25b 100644 --- a/frontend/src/lib/Markdown.svelte +++ b/frontend/src/lib/Markdown.svelte @@ -21,4 +21,6 @@ } -{@html mdToHTML} +
+ {@html mdToHTML} +
diff --git a/frontend/src/lib/ProteinVis.svelte b/frontend/src/lib/ProteinVis.svelte index 5053dc52..26e03b2d 100644 --- a/frontend/src/lib/ProteinVis.svelte +++ b/frontend/src/lib/ProteinVis.svelte @@ -28,7 +28,7 @@ alphafoldView: true, reactive: true, sequencePanel: true, - hideControls: false, + hideControls: true, hideCanvasControls: ["animation"], }; diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte new file mode 100644 index 00000000..0d787b0d --- /dev/null +++ b/frontend/src/lib/SimilarProteins.svelte @@ -0,0 +1,88 @@ + + + + + + + + + + {#each similarProteins as protein} + + + + + + + {/each} + ... click to see more +
Source Name Desc. Prob.
+ {protein.source.toUpperCase()} + {protein.name}DEscDEscDEscDEsc DEscDEsc DEsc DEsc {protein.prob}
+ + diff --git a/frontend/src/lib/customStores.ts b/frontend/src/lib/customStores.ts new file mode 100644 index 00000000..10c37def --- /dev/null +++ b/frontend/src/lib/customStores.ts @@ -0,0 +1,3 @@ +import { writable } from "svelte/store"; + +export const searchBy = writable(""); diff --git a/frontend/src/lib/images/dummy.png b/frontend/src/lib/images/dummy.png new file mode 100644 index 00000000..dafb2040 Binary files /dev/null and b/frontend/src/lib/images/dummy.png differ diff --git a/frontend/src/lib/images/logo.svg b/frontend/src/lib/images/logo.svg index cd025d7f..3a19cfa9 100644 --- a/frontend/src/lib/images/logo.svg +++ b/frontend/src/lib/images/logo.svg @@ -1,11 +1,28 @@ - - - - + + + + + + - - + + + + + + + + + + + + + + + + + diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 31e96a5d..10a22e09 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -7,7 +7,7 @@
-
+
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 148b4855..ed7e5c99 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,19 +1,10 @@ Home -
Landing Page
- - +
Home Page!
diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte index 73f9952b..9f6354e4 100644 --- a/frontend/src/routes/Header.svelte +++ b/frontend/src/routes/Header.svelte @@ -1,70 +1,98 @@ -
+
-
+
- Search - Upload - Login + View + + Upload
+
-
- - GitHub - -
+ + Login
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte index c4bd36cd..de276f02 100644 --- a/frontend/src/routes/login/+page.svelte +++ b/frontend/src/routes/login/+page.svelte @@ -17,7 +17,7 @@ } -
+
-
+
{#if entry}
- - {entry.name} - +

+ {entry.name} +

- - Information +
+ DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription + Description Description Description Description +
+
-
Source Organism
-
- {entry.speciesName} -
- -
Method
-
AlphaFold 2
- -
Length
+ Length
{entry.length}
-
Mass (Da)
+ Mass (Da)
{numberWithCommas(entry.mass)}
- +
+ Structurally Similar Proteins + +
+ {#if entry.content} - - Article + - + {/if} {#if entry.refs} - - References + - + {/if}
-
+
@@ -100,13 +94,24 @@ >
-
+ -
+
+ Organism +
+ {entry.speciesName} +
+ Method +
AlphaFold 2
+ Date Published +
11/11/1111
+
+
{:else if !error} @@ -120,8 +125,14 @@ diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte index d2c87b71..f581a696 100644 --- a/frontend/src/routes/search/+page.svelte +++ b/frontend/src/routes/search/+page.svelte @@ -3,18 +3,16 @@ import { Backend } from "$lib/backend"; import type { ProteinEntry } from "$lib/backend"; import ListProteins from "$lib/ListProteins.svelte"; - import { Search, Button } from "flowbite-svelte"; import { page } from "$app/stores"; - import { writableUrlParams } from "$lib/format"; + import { searchBy } from "$lib/customStores"; - const nameSearch = writableUrlParams($page.url.searchParams, "name"); - let searchBy = $nameSearch; + $searchBy = $page.url.searchParams.get("name") ?? ""; let allEntries: ProteinEntry[] | null = null; onMount(async () => { // if user provided a name like /search?name=abc, parse it - if (searchBy) { - allEntries = await Backend.searchEntries(searchBy); + if ($searchBy) { + allEntries = await Backend.searchEntries($searchBy); } else { allEntries = await Backend.getAllEntries(); } @@ -26,26 +24,23 @@
- { - if (searchBy) { - allEntries = await Backend.searchEntries(searchBy); - $nameSearch = searchBy; // update url param - } else { - allEntries = await Backend.getAllEntries(); - } - }} - > - - - - + +
+ +
+ + diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css index 186cc9ec..4d566105 100644 --- a/frontend/src/routes/styles.css +++ b/frontend/src/routes/styles.css @@ -1,15 +1,13 @@ @import "@fontsource/fira-mono"; +@import "@fontsource-variable/inter"; :root { - --font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + --font-body: "Inter Variable", sans-serif; --font-mono: "Fira Mono", monospace; --color-bg-0: rgb(202, 216, 228); --color-bg-1: hsl(209, 36%, 86%); --color-bg-2: hsl(224, 44%, 95%); - --color-theme-1: #ff3e00; - --color-theme-2: #4075a6; - --color-text: rgba(0, 0, 0, 0.7); + --color-text: rgb(69, 64, 60); --column-width: 42rem; --column-margin-top: 4rem; font-family: var(--font-body); @@ -26,7 +24,7 @@ html { } @keyframes target-fade { from { - background-color: #ef562f; + background-color: var(--lightblue); } to { background-color: transparent; @@ -38,13 +36,18 @@ body { } h1 { - font-size: 1.75rem; - margin: 0; + margin-top: 5px; + font-size: 1.8rem; } h2 { + margin-top: 3px; font-size: 1.5rem; - margin: 0; +} + +h3 { + margin-top: 2px; + font-weight: bold; } p { @@ -52,7 +55,7 @@ p { } a { - color: #ef562f; + color: var(--lightblue); } a:hover { @@ -89,12 +92,6 @@ button:focus:not(:focus-visible) { outline: none; } -@media (min-width: 720px) { - h1 { - font-size: 2.4rem; - } -} - .visually-hidden { border: 0; clip: rect(0 0 0 0); diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte index c4b053a9..af95a379 100644 --- a/frontend/src/routes/upload/+page.svelte +++ b/frontend/src/routes/upload/+page.svelte @@ -27,7 +27,7 @@ $: file = files ? files[0] : undefined; // we're just concerned with one file -
+