diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
new file mode 100644
index 00000000..981b7429
--- /dev/null
+++ 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
index 711fbda0..b38254ba 100644
--- 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 @@
Protein name
- Amino Acids
+ Length
Mass (Da)
@@ -49,11 +50,11 @@
>
{entry.name.replaceAll("_", " ")}{humanReadableProteinName(entry.name)}
{entry.length}
- {entry.mass}
+ {numberWithCommas(entry.mass)}
{/each}
{/if}
@@ -70,10 +71,12 @@
on:click={() => goto(`/protein/${entry.name}`)}
>
- {entry.name.replaceAll("_", " ")}
+ {humanReadableProteinName(entry.name)}
- Seq Len: {entry.length}, Mass: {entry.mass}
+ Length: {entry.length}, Mass (Da): {numberWithCommas(
+ entry.mass
+ )}
{/each}
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index f6a3a2ec..c01dc798 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/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.`;
{entry.name.replaceAll("_", " ")}{humanReadableProteinName(entry.name)}
description of the protein here (optional)
@@ -64,19 +65,27 @@ Todo: add ways to cite papers here that automatically show up in references.`;
Source Organism
-
Unknown
+
Biological Function
-
Unknown
-
-
Structure From
-
AlphaFold
-
-
Amino Acids Length
-
{entry.length}
-
-
Total Mass
-
{entry.mass}
+
+
+
Structure
+
+
+
Length
+
{entry.length}
+
+
Mass (Da)
+
{numberWithCommas(entry.mass)}
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 6dc5bf30..c7255511 100644
--- 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);