Merge pull request #147 from xnought/frontend-redesign

feat: redesigned frontend

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",

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);
+}

frontend/src/lib/EntryCard.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+ import { Card } from "flowbite-svelte";
+ export let title = "";
+</script>
+
+<Card
+ class="max-w-full mt-5"
+ style="padding-top: 15px; color: var(--color-text);"
+>
+ <h2 class="text-darkblue mb-2">{title}</h2>
+ <slot />
+</Card>

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";
 </script>
 
-<Tabs style="underline" contentClass="bg-none p-5">
- <TabItem open title="Table">
- <Table>
- <TableHead>
- <TableHeadCell>Protein name</TableHeadCell>
- <TableHeadCell>Organism</TableHeadCell>
- <TableHeadCell>Length</TableHeadCell>
- <TableHeadCell>Mass (Da)</TableHeadCell>
- </TableHead>
- <TableBody tableBodyClass="divide-y">
- {#if allEntries}
- {#each allEntries as entry}
- <TableBodyRow
- class="cursor-pointer hover:bg-gray-100"
- on:click={() => {
- goto(`/protein/${entry.name}`);
- }}
- >
- <TableBodyCell
- ><span class="text-primary-700">{entry.name}</span
- ></TableBodyCell
- >
- <TableBodyCell>{entry.speciesName}</TableBodyCell>
- <TableBodyCell>{entry.length}</TableBodyCell>
- <TableBodyCell>{numberWithCommas(entry.mass)}</TableBodyCell>
- </TableBodyRow>
- {/each}
- {/if}
- </TableBody>
- </Table>
- </TabItem>
- <TabItem title="Gallery">
- <div class="entries">
- {#if allEntries}
- {#each allEntries as entry}
- <Card
- class="hover:shadow-lg cursor-pointer"
- title="Click to see {entry.name}"
- on:click={() => goto(`/protein/${entry.name}`)}
- >
- <div class="name text-primary-700">
- {entry.name}
+<div class="prot-grid">
+ {#if allEntries}
+ {#each allEntries as entry}
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
+ <div
+ class="prot-container"
+ on:click={() => goto(`/protein/${entry.name}`)}
+ title={`Name:${entry.name}\nDescription:${dummyDesc}`}
+ >
+ <div class="prot-thumb mr-2">
+ <img class="prot-thumb" src={dummy} alt="dummy" />
+ </div>
+ <div class="prot-info">
+ <div class="prot-name">
+ {entry.name}
+ </div>
+ <div class="prot-desc">
+ {dummyDesc}
+ </div>
+ <div>
+ <div><b>Organism</b>: {entry.speciesName}</div>
+ <div><b>Method</b>: AlphaFold2</div>
+ <div><b>Length:</b> <code>{entry.length}</code></div>
+ <div>
+ <b>Mass</b>: <code>{numberWithCommas(entry.mass)}</code>
  </div>
- <div class="description">
- Length: {entry.length}, Mass (Da): {numberWithCommas(entry.mass)}
- </div>
- </Card>
- {/each}
- {/if}
- </div>
- </TabItem>
-</Tabs>
+ </div>
+ </div>
+ </div>
+ {/each}
+ {/if}
+</div>
 
 <style>
- .entries {
+ .prot-container {
+ --border-opacity: 0.3;
  display: flex;
- flex-wrap: wrap;
- gap: 20px;
+ outline: hsla(var(--darkblue-hsl), var(--border-opacity)) 1px solid;
+ border-radius: 5px;
+ width: 500px;
+ padding-left: 15px;
+ padding-bottom: 15px;
+ padding-top: 15px;
+ box-sizing: border-box;
+ transition: all 0.2s ease-in-out;
  }
- .name {
+ .prot-container:hover {
+ transform: scale(1.02);
+ --border-opacity: 0.5;
+ box-shadow: 0 1px 2px 2px #00000010;
+ cursor: pointer;
+ }
+ .prot-thumb {
+ width: 150px;
+ height: 150px;
+ }
+ .prot-name {
  font-size: 1.5em;
+ color: var(--darkblue);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ .prot-desc {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 300;
+ }
+ b {
+ font-weight: 500;
+ }
+ .prot-grid {
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ padding: 10px;
+ margin-left: 10px;
+ height: calc(100vh - 100px);
+ }
+ .prot-info {
+ width: 300px;
  }
 </style>

frontend/src/lib/Markdown.svelte

@@ -21,4 +21,6 @@
  }
 </script>
 
-{@html mdToHTML}
+<div style="color: var(--color-text);">
+ {@html mdToHTML}
+</div>

frontend/src/lib/ProteinVis.svelte

@@ -28,7 +28,7 @@
  alphafoldView: true,
  reactive: true,
  sequencePanel: true,
- hideControls: false,
+ hideControls: true,
  hideCanvasControls: ["animation"],
  };
 

frontend/src/lib/SimilarProteins.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+ import { LinkOutline } from "flowbite-svelte-icons";
+ import { onMount } from "svelte";
+
+ export let queryProteinName: string;
+
+ let similarProteins: any[] = [];
+ onMount(async () => {
+ similarProteins = await similarPDBProteins(queryProteinName);
+ });
+
+ async function similarPDBProteins(queryProteinName: string) {
+ // TODO: QUERY TO BACKEND WITH ACTUAL CALL INSTEAD OF MOCK DATA
+ const similarExternalProteins = [
+ {
+ source: "pdb",
+ link: "https://www.rcsb.org/structure/1A0S",
+ name: "1A0S",
+ prob: 0.99,
+ },
+ {
+ source: "pdb",
+ link: "https://www.rcsb.org/structure/1A0S",
+ name: "1A0S",
+ prob: 0.99,
+ },
+ {
+ source: "pdb",
+ link: "https://www.rcsb.org/structure/1A0S",
+ name: "1A0S",
+ prob: 0.99,
+ },
+ ];
+
+ return similarExternalProteins;
+ }
+</script>
+
+<table>
+ <tr>
+ <th> Source </th>
+ <th> Name </th>
+ <th> Desc. </th>
+ <th> Prob. </th>
+ </tr>
+ {#each similarProteins as protein}
+ <tr class="pdb-row">
+ <td>
+ <a href={protein.link}
+ ><LinkOutline size="sm" /> {protein.source.toUpperCase()}</a
+ >
+ </td>
+ <td>{protein.name}</td>
+ <td class="pdb-desc">DEscDEscDEscDEsc DEscDEsc DEsc DEsc </td>
+ <td>{protein.prob}</td>
+ </tr>
+ {/each}
+ <span class="text-gray-400 cursor-pointer">... click to see more</span>
+</table>
+
+<style>
+ table {
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: separate; /* Add this line */
+ border-spacing: 0 5px; /* Adjust as needed */
+ }
+ th {
+ font-weight: 500;
+ text-align: left;
+ }
+ .pdb-row {
+ background-color: hsl(var(--lightorange-hsl), 0.11);
+ }
+ .pdb-desc {
+ min-width: 70px;
+ max-width: 70px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ a {
+ color: var(--lightorange);
+ display: flex;
+ gap: 1px;
+ align-items: center;
+ }
+</style>

frontend/src/lib/customStores.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const searchBy = writable("");

frontend/src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 <div class="app">
  <Header />
 
- <main class="p-10">
+ <main>
  <slot />
  </main>
 </div>

frontend/src/routes/+page.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
  import { goto } from "$app/navigation";
  import { onMount } from "svelte";
-
- // remove once we have a landing page
- onMount(() => {
- goto("/search");
- });
 </script>
 
 <svelte:head>
  <title>Home</title>
 </svelte:head>
 
-<div>Landing Page</div>
-
-<style>
- /* put stuff here */
-</style>
+<div>Home Page!</div>