From b866ba20b4d4e0a90f9d935d78e86ee5af56d2fd Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Fri, 17 Nov 2023 22:06:38 -0800
Subject: [PATCH] refactor: format numbers in other file

---
 frontend/src/lib/format.ts                    | 12 +++++++
 frontend/src/routes/+page.svelte              | 13 +++++---
 .../routes/protein/[proteinName]/+page.svelte | 33 ++++++++++++-------
 frontend/src/routes/upload/+page.svelte       |  3 +-
 4 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/lib/format.ts

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 @@
 			<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
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.`;
 				<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>
 
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);