feat: make the wiki entry look better and fix refresh_packages (#74)

* feat: add marked package * feat: render text * docs: add sanitze link * feat: style * feat: add flowbite svelte icons * refactor: format numbers in other file * fix: refresh_packages
Venom-Biochem-Lab · Nov 18, 2023 · 03ee0f4 · 03ee0f4
1 parent 2d8976c
commit 03ee0f4
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 50 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -8,7 +8,7 @@ services:
  dockerfile: Dockerfile
  volumes:
  - ./frontend:/app
- - /app/node_modules/
+ - docker_node_modules:/app/node_modules/
  ports:
  - "5173:5173"
  command: ["yarn", "dev", "--", "--host", "0.0.0.0"]
@@ -21,7 +21,7 @@ services:
  - "8000:8000"
  volumes:
  - ./backend:/app
- - /app/.venv/
+ - docker_venv:/app/.venv/
  depends_on:
  - postgres
  environment:
@@ -52,3 +52,5 @@ services:
 
 volumes:
  postgres_data:
+ docker_node_modules:
+ docker_venv:
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
  "autoprefixer": "^10.4.14",
  "flowbite": "^2.1.1",
  "flowbite-svelte": "^0.44.19",
+ "flowbite-svelte-icons": "^0.4.5",
  "openapi-typescript-codegen": "^0.25.0",
  "postcss": "^8.4.24",
  "postcss-load-config": "^4.0.1",
@@ -34,5 +35,8 @@
  "vite": "^4.4.2",
  "vitest": "^0.34.0"
  },
- "type": "module"
+ "type": "module",
+ "dependencies": {
+ "marked": "^10.0.0"
+ }
 }
diff --git a/frontend/src/lib/Markdown.svelte b/frontend/src/lib/Markdown.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ // https://marked.js.org/
+ import { marked } from "marked";
+
+ export let text = ``;
+ // they recommend also sanitizing input text https://github.com/cure53/DOMPurify
+ $: mdToHTML = marked(text);
+</script>
+
+{@html mdToHTML}
diff --git a/frontend/src/lib/ProteinVis.svelte b/frontend/src/lib/ProteinVis.svelte
@@ -4,6 +4,8 @@
  export let url =
  "http://localhost:8000/data/pdbAlphaFold/Gh_comp271_c0_seq1.pdb";
  export let format = "pdb";
+ export let width = 500;
+ export let height = 500;
 
  onMount(async () => {
  //Create plugin instance
@@ -26,7 +28,7 @@
  alphafoldView: true,
  reactive: true,
  sequencePanel: true,
- hideControls: true,
+ hideControls: false,
  hideCanvasControls: ["animation"],
  };
 
@@ -38,7 +40,7 @@
  });
 </script>
 
-<div id="myViewer" />
+<div id="myViewer" style="width: {width}px; height: {height}px;" />
 
 <style>
  /* https://embed.plnkr.co/plunk/WlRx73uuGA9EJbpn */
@@ -47,8 +49,6 @@
  }
  #myViewer {
  float: left;
- width: 500px;
- height: 500px;
  position: relative;
  }
 </style>
diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
@@ -0,0 +1,12 @@
+export function numberWithCommas(x: number, round = 0) {
+ const formatter = new Intl.NumberFormat("en-US");
+ return formatter.format(+x.toFixed(round));
+}
+
+export function formatProteinName(name: string) {
+ return name.replaceAll(" ", "_");
+}
+
+export function humanReadableProteinName(name: string) {
+ return name.replaceAll("_", " ");
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -3,6 +3,7 @@
  import { goto } from "$app/navigation";
  import { Backend } from "$lib/backend";
  import type { ProteinEntry } from "$lib/backend";
+ import { humanReadableProteinName, numberWithCommas } from "$lib/format";
  import {
  Table,
  TableBody,
@@ -35,7 +36,7 @@
  <Table>
  <TableHead>
  <TableHeadCell>Protein name</TableHeadCell>
- <TableHeadCell>Amino Acids</TableHeadCell>
+ <TableHeadCell>Length</TableHeadCell>
  <TableHeadCell>Mass (Da)</TableHeadCell>
  </TableHead>
  <TableBody tableBodyClass="divide-y">
@@ -49,11 +50,11 @@
  >
  <TableBodyCell
  ><span class="text-primary-700"
- >{entry.name.replaceAll("_", " ")}</span
+ >{humanReadableProteinName(entry.name)}</span
  ></TableBodyCell
  >
  <TableBodyCell>{entry.length}</TableBodyCell>
- <TableBodyCell>{entry.mass}</TableBodyCell>
+ <TableBodyCell>{numberWithCommas(entry.mass)}</TableBodyCell>
  </TableBodyRow>
  {/each}
  {/if}
@@ -70,10 +71,12 @@
  on:click={() => goto(`/protein/${entry.name}`)}
  >
  <div class="name text-primary-700">
- {entry.name.replaceAll("_", " ")}
+ {humanReadableProteinName(entry.name)}
  </div>
  <div class="description">
- Seq Len: {entry.length}, Mass: {entry.mass}
+ Length: {entry.length}, Mass (Da): {numberWithCommas(
+ entry.mass
+ )}
  </div>
  </Card>
  {/each}

diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -2,11 +2,30 @@
  import { onMount } from "svelte";
  import { Backend, type ProteinEntry } from "$lib/backend";
  import ProteinVis from "$lib/ProteinVis.svelte";
- import { Spinner } from "flowbite-svelte";
+ import { Button, Card, Spinner } from "flowbite-svelte";
+ import Markdown from "$lib/Markdown.svelte";
+ import { Heading, P, Span } from "flowbite-svelte";
+ import { humanReadableProteinName, numberWithCommas } from "$lib/format";
 
  export let data; // linked to +page.ts return (aka the id)
  let entry: ProteinEntry | null = null;
  let error = false;
+ // todo: request this from the user
+ let wikiEntry: string = `
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+**Bolded** versus _italic_
+and ~~strike through~~ and [links](/)
+
+You can write stuff down here about the proteins.
+
+Todo: add ways to cite papers here that automatically show up in references.`;
 
  // when this component mounts, request protein wikipedia entry from backend
  onMount(async () => {
@@ -19,30 +38,83 @@
 
  console.log("Received", entry);
  });
+
+ /**
+ * @todo there should be a better way to do this since we might change host and port when deployed
+ */
+ function pdbFileURL(name: string) {
+ return `http://localhost:8000/data/pdbAlphaFold/${name}.pdb`;
+ }
 </script>
 
-{#if entry}
- <!-- if got entry from backend, display it -->
- <h1>{entry.name.replaceAll("_", " ")}</h1>
- <br />
- <code>
- <pre>
- {JSON.stringify(entry, null, 2)}
- </pre>
- </code>
-
- <ProteinVis
- format="pdb"
- url="http://localhost:8000/data/pdbAlphaFold/{entry.name}.pdb"
- />
-{:else if !error}
- <!-- Otherwise, tell user we tell the user we are loading -->
- <h1>Loading Protein Entry <Spinner /></h1>
-{:else if error}
- <!-- if we error out, tell the user the id is shiza -->
- <h1>Error</h1>
- <p>Could not find a protein with the id <code>{data.proteinName}</code></p>
-{/if}
+<section class="flex flex-wrap gap-10">
+ {#if entry}
+ <div id="left-side">
+ <!-- TITLE AND DESCRIPTION -->
+ <Heading tag="h1">
+ <Span
+ underline
+ decorationClass="decoration-8 decoration-primary-400 dark:decoration-primary-600"
+ >{humanReadableProteinName(entry.name)}</Span
+ >
+ </Heading>
+ <P class="mt-4 text-lg">description of the protein here (optional)</P>
+
+ <Card title="Info" class="max-w-full mt-5">
+ <Heading tag="h4">Information</Heading>
+
+ <div class="grid grid-cols-2">
+ <div>Source Organism</div>
+ <div>
+ <a href="/organism/unknown">unknown organism</a>
+ </div>
+
+ <div>Biological Function</div>
+ <div>
+ <a href="/function/unknown">unknown function</a>
+ </div>
+
+ <div>Structure</div>
+ <div>
+ <a href="https://deepmind.google/technologies/alphafold/"
+ >AlphaFold</a
+ >
+ </div>
+
+ <div>Length</div>
+ <div><code>{entry.length}</code></div>
+
+ <div>Mass (Da)</div>
+ <div><code>{numberWithCommas(entry.mass)}</code></div>
+ </div>
+ </Card>
+
+ <!-- Article / Wiki entry -->
+ <Card title="Info" class="max-w-full mt-5">
+ <Heading tag="h4">Article</Heading>
+ <Markdown text={wikiEntry} />
+ </Card>
+ </div>
+ <div id="right-side">
+ <Button href={pdbFileURL(entry.name)}>Download .pdb file</Button>
+ <div class="mt-2">
+ <ProteinVis format="pdb" url={pdbFileURL(entry.name)} width={750} />
+ </div>
+ </div>
+ {:else if !error}
+ <!-- Otherwise, tell user we tell the user we are loading -->
+ <h1>Loading Protein Entry <Spinner /></h1>
+ {:else if error}
+ <!-- if we error out, tell the user the id is shiza -->
+ <h1>Error</h1>
+ <p>Could not find a protein with the id <code>{data.proteinName}</code></p>
+ {/if}
+</section>
 
 <style>
+ #left-side {
+ min-width: 100ch;
+ }
+ #right-side {
+ }
 </style>
diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
@@ -1,9 +1,9 @@
-@import '@fontsource/fira-mono';
+@import "@fontsource/fira-mono";
 
 :root {
- --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
- Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- --font-mono: 'Fira Mono', monospace;
+ --font-body: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", 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%);
@@ -20,10 +20,14 @@ body {
  margin: 0;
 }
 
-h1,
-h2,
-p {
- font-weight: 400;
+h1 {
+ font-size: 1.75rem;
+ margin: 0;
+}
+
+h2 {
+ font-size: 1.5rem;
+ margin: 0;
 }
 
 p {

diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
@@ -2,6 +2,7 @@
  import { Backend, UploadError } from "$lib/backend";
  import { Fileupload, Button, Input, Label, Helper } from "flowbite-svelte";
  import { goto } from "$app/navigation";
+ import { formatProteinName } from "$lib/format";
 
  let name: string = "";
  let files: FileList | undefined; // bind:files on the Fileupload
@@ -60,7 +61,7 @@
  console.log(uploadError);
  } else {
  // success, so we can go back!
- goto(`/protein/${name.replaceAll(" ", "_")}`);
+ goto(`/protein/${formatProteinName(name)}`);
  }
  } catch (e) {
  console.log(e);

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -761,6 +761,11 @@ fill-range@^7.0.1:
  dependencies:
  to-regex-range "^5.0.1"
 
+flowbite-svelte-icons@^0.4.5:
+ version "0.4.5"
+ resolved "https://registry.yarnpkg.com/flowbite-svelte-icons/-/flowbite-svelte-icons-0.4.5.tgz#e022d39242b91f98ad10aec0553f86a274514c06"
+ integrity sha512-IBudEfw9B4UE2gCRMhbRnyE8p7qq7DDMauy0mPVIShzjaN3yVk2AmAHia1JRe9jUC98Wn7xNk/IdJlXeQj19Iw==
+
 flowbite-svelte@^0.44.19:
  version "0.44.19"
  resolved "https://registry.yarnpkg.com/flowbite-svelte/-/flowbite-svelte-0.44.19.tgz#f39e04a118104435fbcdf80529b9ba063af5a642"
@@ -1028,6 +1033,11 @@ magic-string@^0.30.0, magic-string@^0.30.1, magic-string@^0.30.3, magic-string@^
  dependencies:
  "@jridgewell/sourcemap-codec" "^1.4.15"
 
+marked@^10.0.0:
+ version "10.0.0"
+ resolved "https://registry.yarnpkg.com/marked/-/marked-10.0.0.tgz#7fe1805bb908433d760e2de0fcc8841a2b2d745c"
+ integrity sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==
+
 mdn-data@2.0.30:
  version "2.0.30"
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"

diff --git a/run.sh b/run.sh
@@ -79,19 +79,19 @@ function install_backend() {
  docker exec -it venome-backend poetry install
 }
 
+function restart() {
+ stop
+ start
+}
+
 # on the docker container, reinstall all packages listed in local env (package.json, poetry.lock)
 function refresh_packages() {
  start
  install_frontend
- docker compose restart frontend
  install_backend
- docker compose restart backend
+ restart
 }
 
-function restart() {
- stop
- start
-}
 
 # only update dependencies and reload init sql
 function soft_restart() {