refactor: format numbers in other file

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("_", " ");
+}

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}

frontend/src/routes/protein/[proteinName]/+page.svelte

@@ -5,6 +5,7 @@
  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;
@@ -54,7 +55,7 @@ Todo: add ways to cite papers here that automatically show up in references.`;
  <Span
  underline
  decorationClass="decoration-8 decoration-primary-400 dark:decoration-primary-600"
- >{entry.name.replaceAll("_", " ")}</Span
+ >{humanReadableProteinName(entry.name)}</Span
  >
  </Heading>
  <P class="mt-4 text-lg">description of the protein here (optional)</P>
@@ -64,19 +65,27 @@ Todo: add ways to cite papers here that automatically show up in references.`;
 
  <div class="grid grid-cols-2">
  <div>Source Organism</div>
- <div>Unknown</div>
+ <div>
+ <a href="/organism/unknown">unknown organism</a>
+ </div>
 
  <div>Biological Function</div>
- <div>Unknown</div>
-
- <div>Structure From</div>
- <div>AlphaFold</div>
-
- <div>Amino Acids Length</div>
- <div>{entry.length}</div>
-
- <div>Total Mass</div>
- <div>{entry.mass}</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>
 

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