From a6ee20a83695c4dc5acd2abd081d5eb1ba38d3ea Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 20:51:47 -0800
Subject: [PATCH 01/19] feat: add bibtex parser

---
 frontend/package.json                         |  1 +
 .../routes/protein/[proteinName]/+page.svelte | 24 ++++++++++++++++++-
 frontend/yarn.lock                            |  5 ++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 6ef311e6..72df7fa1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"bibtex": "^0.9.0",
 		"marked": "^10.0.0"
 	}
 }
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index 9e86727a..5ad4e0ca 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -8,6 +8,18 @@
 	import { humanReadableProteinName, numberWithCommas } from "$lib/format";
 	import { goto } from "$app/navigation";
 
+	import { parseBibFile, normalizeFieldValue } from "bibtex";
+
+	const testBib = String.raw`@article{bertucci2022dendromap,
+  title={{\textbf{\large\texttt{DendroMap}}: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps}},
+  author={\textbf{Bertucci}, \textbf{Donald} and Hamid, Md Montaser and Anand, Yashwanthi and Ruangrotsakun, Anita and Tabatabai, Delyar and Perez, Melissa and Kahng, Minsuk},
+  journal={IEEE Transactions on Visualization and Computer Graphics},
+  year={2022},
+  publisher={IEEE},
+  doi={10.1109/TVCG.2022.3209425}
+}`;
+
+	const bib = parseBibFile(testBib);
 	export let data; // linked to +page.ts return (aka the id)
 	let entry: ProteinEntry | null = null;
 	let error = false;
@@ -93,7 +105,17 @@
 				{#if entry.content !== null}
 					<Markdown text={entry.content} />
 				{:else}
-					No article added
+					No article, edit to add one
+				{/if}
+			</Card>
+
+			<!-- References -->
+			<Card title="References" class="max-w-full mt-5">
+				<Heading tag="h4">References</Heading>
+				{#if bib.entries_raw.length > 0}
+					References
+				{:else}
+					No references, edit to add some
 				{/if}
 			</Card>
 		</div>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index d0365960..60385c12 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -477,6 +477,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+bibtex@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/bibtex/-/bibtex-0.9.0.tgz#62126692c8cc897e6d3824dc5948b0bce13b050e"
+  integrity sha512-2YsG89+ZtFD04Dd+KDDUxjtEdiQMW4lbGsXzs5sa+nCpmOrauyChkOAdbLegVSAH2JKEfgu7SFESIVRKQCfD9Q==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"

From a8a73963d653f2708a73ec0a12b62849c9d9516e Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 21:35:20 -0800
Subject: [PATCH 02/19] feat: successfully parse the bibtex and display it

---
 .../routes/protein/[proteinName]/+page.svelte | 63 +++++++++++++++++--
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index 5ad4e0ca..c1600f36 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -8,18 +8,28 @@
 	import { humanReadableProteinName, numberWithCommas } from "$lib/format";
 	import { goto } from "$app/navigation";
 
-	import { parseBibFile, normalizeFieldValue } from "bibtex";
+	import { parseBibFile, normalizeFieldValue, BibEntry } from "bibtex";
 
 	const testBib = String.raw`@article{bertucci2022dendromap,
-  title={{\textbf{\large\texttt{DendroMap}}: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps}},
-  author={\textbf{Bertucci}, \textbf{Donald} and Hamid, Md Montaser and Anand, Yashwanthi and Ruangrotsakun, Anita and Tabatabai, Delyar and Perez, Melissa and Kahng, Minsuk},
+  title={DendroMap: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps},
+  author={Bertucci, Donald and Hamid, Md Montaser and Anand, Yashwanthi and Ruangrotsakun, Anita and Tabatabai, Delyar and Perez, Melissa and Kahng, Minsuk},
   journal={IEEE Transactions on Visualization and Computer Graphics},
   year={2022},
   publisher={IEEE},
-  doi={10.1109/TVCG.2022.3209425}
+  doi={10.1109/TVCG.2022.3209425}}
+
+  @misc{silverthorne_2020,
+       title={A guide to rust programming language},
+       url={https://about.gitlab.com/blog/2020/07/21/rust-programming-language/},
+       journal={GitLab},
+       author={Silverthorne, Valerie},
+       year={2020},
+       month={Jul}
 }`;
 
 	const bib = parseBibFile(testBib);
+	console.log(bib.entries_raw);
+
 	export let data; // linked to +page.ts return (aka the id)
 	let entry: ProteinEntry | null = null;
 	let error = false;
@@ -42,6 +52,21 @@
 	function pdbFileURL(name: string) {
 		return `http://localhost:8000/data/pdbAlphaFold/${name}.pdb`;
 	}
+
+	/**
+	 * @returns string of authors
+	 */
+	function parseAuthors(entry: BibEntry) {
+		const authors = entry.getFieldAsString("author") as string;
+		const parsed = authors.split(" and ").map((author) =>
+			author
+				.split(",")
+				.map((d) => d.trim())
+				.reverse()
+				.join(" ")
+		);
+		return new Intl.ListFormat("en").format(parsed);
+	}
 </script>
 
 <section class="flex flex-wrap gap-10">
@@ -110,10 +135,36 @@
 			</Card>
 
 			<!-- References -->
-			<Card title="References" class="max-w-full mt-5">
+			<Card title="References" class="max-w-full mt-5 overflow-wrap">
 				<Heading tag="h4">References</Heading>
 				{#if bib.entries_raw.length > 0}
-					References
+					{#each bib.entries_raw as entry, i}
+						<div class="flex gap-2 mt-2">
+							<div class="w-5">
+								[{i + 1}]
+							</div>
+							<div>
+								{#if entry.getFieldAsString("url")}
+									<a href={`${entry.getFieldAsString("url")}`}>
+										<b>
+											{entry.getFieldAsString("title")}
+										</b>
+									</a>
+								{:else}
+									<b>
+										{entry.getFieldAsString("title")}
+									</b>
+								{/if}
+								<p>{parseAuthors(entry)}</p>
+								{#if entry.getFieldAsString("journal")}
+									<i>
+										{entry.getFieldAsString("journal")}
+										{entry.getFieldAsString("year")}
+									</i>
+								{/if}
+							</div>
+						</div>
+					{/each}
 				{:else}
 					No references, edit to add some
 				{/if}

From a9240c52cb6d1d84dc83aed02d83b4364a630116 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 21:45:27 -0800
Subject: [PATCH 03/19] refac: move the references to separate component

---
 frontend/src/lib/References.svelte            | 55 +++++++++++++++++++
 .../routes/protein/[proteinName]/+page.svelte | 54 +-----------------
 2 files changed, 58 insertions(+), 51 deletions(-)
 create mode 100644 frontend/src/lib/References.svelte

diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
new file mode 100644
index 00000000..ece21ac8
--- /dev/null
+++ b/frontend/src/lib/References.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	/* Put stuff here */
+	import { parseBibFile, type BibEntry } from "bibtex";
+
+	export let bibtex = String.raw``;
+	$: bib = parseBibFile(bibtex);
+
+	/**
+	 * @returns string of authors
+	 */
+	function parseAuthors(entry: BibEntry) {
+		const authors = entry.getFieldAsString("author") as string;
+		const parsed = authors.split(" and ").map((author) =>
+			author
+				.split(",")
+				.map((d) => d.trim())
+				.reverse()
+				.join(" ")
+		);
+		return new Intl.ListFormat("en").format(parsed);
+	}
+</script>
+
+{#if bib.entries_raw.length > 0}
+	{#each bib.entries_raw as entry, i}
+		<div class="flex gap-2 mt-2">
+			<div class="w-5">
+				[{i + 1}]
+			</div>
+			<div>
+				<div style="font-size: 17px;">
+					{#if entry.getFieldAsString("url")}
+						<a href={`${entry.getFieldAsString("url")}`}>
+							<b>
+								{entry.getFieldAsString("title")}
+							</b>
+						</a>
+					{:else}
+						<b>
+							{entry.getFieldAsString("title")}
+						</b>
+					{/if}
+				</div>
+
+				<p>{parseAuthors(entry)}</p>
+				{#if entry.getFieldAsString("journal")}
+					<i>
+						{entry.getFieldAsString("journal")}
+						{entry.getFieldAsString("year")}
+					</i>
+				{/if}
+			</div>
+		</div>
+	{/each}
+{/if}
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index c1600f36..0dd9e31a 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -7,8 +7,7 @@
 	import { Heading, P, Span } from "flowbite-svelte";
 	import { humanReadableProteinName, numberWithCommas } from "$lib/format";
 	import { goto } from "$app/navigation";
-
-	import { parseBibFile, normalizeFieldValue, BibEntry } from "bibtex";
+	import References from "$lib/References.svelte";
 
 	const testBib = String.raw`@article{bertucci2022dendromap,
   title={DendroMap: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps},
@@ -27,9 +26,6 @@
        month={Jul}
 }`;
 
-	const bib = parseBibFile(testBib);
-	console.log(bib.entries_raw);
-
 	export let data; // linked to +page.ts return (aka the id)
 	let entry: ProteinEntry | null = null;
 	let error = false;
@@ -52,21 +48,6 @@
 	function pdbFileURL(name: string) {
 		return `http://localhost:8000/data/pdbAlphaFold/${name}.pdb`;
 	}
-
-	/**
-	 * @returns string of authors
-	 */
-	function parseAuthors(entry: BibEntry) {
-		const authors = entry.getFieldAsString("author") as string;
-		const parsed = authors.split(" and ").map((author) =>
-			author
-				.split(",")
-				.map((d) => d.trim())
-				.reverse()
-				.join(" ")
-		);
-		return new Intl.ListFormat("en").format(parsed);
-	}
 </script>
 
 <section class="flex flex-wrap gap-10">
@@ -137,37 +118,7 @@
 			<!-- References -->
 			<Card title="References" class="max-w-full mt-5 overflow-wrap">
 				<Heading tag="h4">References</Heading>
-				{#if bib.entries_raw.length > 0}
-					{#each bib.entries_raw as entry, i}
-						<div class="flex gap-2 mt-2">
-							<div class="w-5">
-								[{i + 1}]
-							</div>
-							<div>
-								{#if entry.getFieldAsString("url")}
-									<a href={`${entry.getFieldAsString("url")}`}>
-										<b>
-											{entry.getFieldAsString("title")}
-										</b>
-									</a>
-								{:else}
-									<b>
-										{entry.getFieldAsString("title")}
-									</b>
-								{/if}
-								<p>{parseAuthors(entry)}</p>
-								{#if entry.getFieldAsString("journal")}
-									<i>
-										{entry.getFieldAsString("journal")}
-										{entry.getFieldAsString("year")}
-									</i>
-								{/if}
-							</div>
-						</div>
-					{/each}
-				{:else}
-					No references, edit to add some
-				{/if}
+				<References bibtex={testBib} />
 			</Card>
 		</div>
 		<div id="right-side">
@@ -189,6 +140,7 @@
 <style>
 	#left-side {
 		min-width: 100ch;
+		max-width: 100ch;
 	}
 	#right-side {
 	}

From 4dd994389df19b3e018e8b71a8d54ac096d206ea Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 21:50:55 -0800
Subject: [PATCH 04/19] Add tabs for the preview

---
 frontend/src/routes/upload/+page.svelte | 37 ++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 732ad69d..4f96ba68 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -7,6 +7,8 @@
 		Label,
 		Helper,
 		Textarea,
+		Tabs,
+		TabItem,
 	} from "flowbite-svelte";
 	import { goto } from "$app/navigation";
 	import { formatProteinName } from "$lib/format";
@@ -15,6 +17,7 @@
 	let content: string = "";
 	let files: FileList | undefined; // bind:files on the Fileupload
 	let uploadError: UploadError | undefined;
+	let refs = "";
 	$: file = files ? files[0] : undefined; // we're just concerned with one file
 	$: console.log(content);
 
@@ -51,14 +54,34 @@
 				>
 			{/if}
 		</div>
+
 		<div>
-			<Label for="content" class="block mb-2">Protein Article</Label>
-			<Textarea
-				id="content"
-				placeholder="Enter markdown..."
-				rows={10}
-				bind:value={content}
-			/>
+			<Tabs contentClass="bg-none p-5">
+				<TabItem title="article content" open>
+					<div>
+						<Label for="content" class="block mb-2"
+							>Protein Article (Markdown)</Label
+						>
+						<Textarea
+							id="content"
+							placeholder="Enter markdown..."
+							rows={10}
+							bind:value={content}
+						/>
+					</div>
+
+					<div>
+						<Label for="refs" class="block mb-2">References (BibTeX)</Label>
+						<Textarea
+							id="refs"
+							placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
+							rows={10}
+							bind:value={refs}
+						/>
+					</div>
+				</TabItem>
+				<TabItem title="preview">...</TabItem>
+			</Tabs>
 		</div>
 		<div>
 			<Fileupload class="w-100" bind:files />

From cb47f08a4134601b8cb5d37f2061e05fdaecd546 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 22:04:06 -0800
Subject: [PATCH 05/19] feat: preview

---
 frontend/src/routes/upload/+page.svelte | 34 ++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 4f96ba68..4148e467 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -9,9 +9,12 @@
 		Textarea,
 		Tabs,
 		TabItem,
+		Card,
+		Heading,
 	} from "flowbite-svelte";
 	import { goto } from "$app/navigation";
 	import { formatProteinName } from "$lib/format";
+	import Markdown from "$lib/Markdown.svelte";
 
 	let name: string = "";
 	let content: string = "";
@@ -55,8 +58,11 @@
 			{/if}
 		</div>
 
-		<div>
-			<Tabs contentClass="bg-none p-5">
+		<Card
+			class="max-w-full"
+			style="height: 600px; overflow-y: scroll; padding: 0;"
+		>
+			<Tabs contentClass="bg-none p-5" style="underline">
 				<TabItem title="article content" open>
 					<div>
 						<Label for="content" class="block mb-2"
@@ -65,24 +71,38 @@
 						<Textarea
 							id="content"
 							placeholder="Enter markdown..."
-							rows={10}
+							rows={12}
 							bind:value={content}
 						/>
 					</div>
 
-					<div>
+					<div class="mt-3">
 						<Label for="refs" class="block mb-2">References (BibTeX)</Label>
 						<Textarea
 							id="refs"
 							placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
-							rows={10}
+							rows={4}
 							bind:value={refs}
 						/>
 					</div>
 				</TabItem>
-				<TabItem title="preview">...</TabItem>
+				<TabItem title="preview">
+					{#if content.length > 0}
+						<Card class="max-w-full">
+							<Heading tag="h4">Article</Heading>
+							<Markdown text={content} />
+						</Card>
+
+						<Card class="max-w-full mt-5">
+							<Heading tag="h4">References</Heading>
+						</Card>
+					{:else}
+						No content to render/preview
+					{/if}
+				</TabItem>
 			</Tabs>
-		</div>
+		</Card>
+
 		<div>
 			<Fileupload class="w-100" bind:files />
 		</div>

From 542a8bb3d72184e888dddde9b36cac15a94f5629 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 22:12:55 -0800
Subject: [PATCH 06/19] fix: add error if parse doesn't work

---
 frontend/src/lib/References.svelte      | 21 +++++++++++++++++----
 frontend/src/routes/upload/+page.svelte |  4 +++-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
index ece21ac8..f4907f9b 100644
--- a/frontend/src/lib/References.svelte
+++ b/frontend/src/lib/References.svelte
@@ -1,15 +1,26 @@
 <script lang="ts">
 	/* Put stuff here */
-	import { parseBibFile, type BibEntry } from "bibtex";
+	import { parseBibFile, type BibEntry, BibFilePresenter } from "bibtex";
 
 	export let bibtex = String.raw``;
-	$: bib = parseBibFile(bibtex);
+	let bib: BibFilePresenter;
+	$: {
+		try {
+			bib = parseBibFile(bibtex);
+		} catch (e) {
+			console.log("error in syntax");
+		}
+	}
 
 	/**
 	 * @returns string of authors
 	 */
 	function parseAuthors(entry: BibEntry) {
-		const authors = entry.getFieldAsString("author") as string;
+		const authors = entry.getFieldAsString("author");
+		// if a number or not found, error in parsing, so do nothing
+		if (!authors || typeof authors === "number")
+			return "[error in parsing authors]";
+
 		const parsed = authors.split(" and ").map((author) =>
 			author
 				.split(",")
@@ -21,7 +32,7 @@
 	}
 </script>
 
-{#if bib.entries_raw.length > 0}
+{#if bib}
 	{#each bib.entries_raw as entry, i}
 		<div class="flex gap-2 mt-2">
 			<div class="w-5">
@@ -52,4 +63,6 @@
 			</div>
 		</div>
 	{/each}
+{:else}
+	<span class="text-red-700 font-bold"> BibTeX Syntax Error </span>
 {/if}
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 4148e467..40695a5e 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -15,6 +15,7 @@
 	import { goto } from "$app/navigation";
 	import { formatProteinName } from "$lib/format";
 	import Markdown from "$lib/Markdown.svelte";
+	import References from "$lib/References.svelte";
 
 	let name: string = "";
 	let content: string = "";
@@ -87,7 +88,7 @@
 					</div>
 				</TabItem>
 				<TabItem title="preview">
-					{#if content.length > 0}
+					{#if content.length > 0 || refs.length > 0}
 						<Card class="max-w-full">
 							<Heading tag="h4">Article</Heading>
 							<Markdown text={content} />
@@ -95,6 +96,7 @@
 
 						<Card class="max-w-full mt-5">
 							<Heading tag="h4">References</Heading>
+							<References bibtex={String.raw`${refs}`} />
 						</Card>
 					{:else}
 						No content to render/preview

From 2d696c58d5379d794b084c968a1b46ed7419020b Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 22:36:55 -0800
Subject: [PATCH 07/19] feat: replace cite with link

---
 frontend/src/lib/Markdown.svelte        | 16 +++++++++++++++-
 frontend/src/lib/References.svelte      |  6 +++---
 frontend/src/routes/upload/+page.svelte |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/Markdown.svelte b/frontend/src/lib/Markdown.svelte
index d2bdeae0..92929eda 100644
--- a/frontend/src/lib/Markdown.svelte
+++ b/frontend/src/lib/Markdown.svelte
@@ -4,7 +4,21 @@
 
 	export let text = ``;
 	// they recommend also sanitizing input text https://github.com/cure53/DOMPurify
-	$: mdToHTML = marked(text);
+
+	$: mdToHTML = marked(replaceCite(text));
+
+	/**
+	 * @todo this is a hacky way to do this, but it works for now
+	 * Instead use the builtin extensions https://marked.js.org/using_pro#extensions
+	 */
+	function replaceCite(str: string) {
+		// replace \cite{} with <a href="#ref-1">[1]</a>
+		const newStr = str.replaceAll(/\\cite{(.+?)}/g, (match, p1) => {
+			console.log(match, p1);
+			return `[<a href="#${p1}">${p1}</a>]`;
+		});
+		return newStr;
+	}
 </script>
 
 {@html mdToHTML}
diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
index f4907f9b..2b1c80cb 100644
--- a/frontend/src/lib/References.svelte
+++ b/frontend/src/lib/References.svelte
@@ -34,9 +34,9 @@
 
 {#if bib}
 	{#each bib.entries_raw as entry, i}
-		<div class="flex gap-2 mt-2">
-			<div class="w-5">
-				[{i + 1}]
+		<div class="mt-2" id={`#${entry._id}`}>
+			<div style="font-size: 12px;">
+				[{entry._id}]
 			</div>
 			<div>
 				<div style="font-size: 17px;">
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 40695a5e..f5cc2084 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -61,7 +61,7 @@
 
 		<Card
 			class="max-w-full"
-			style="height: 600px; overflow-y: scroll; padding: 0;"
+			style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
 		>
 			<Tabs contentClass="bg-none p-5" style="underline">
 				<TabItem title="article content" open>

From 422a082817da289e99087718b2989e8628e6c9fd Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Mon, 27 Nov 2023 22:53:25 -0800
Subject: [PATCH 08/19] feat: style references

---
 frontend/src/lib/References.svelte | 8 ++++----
 frontend/src/routes/styles.css     | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
index 2b1c80cb..43186619 100644
--- a/frontend/src/lib/References.svelte
+++ b/frontend/src/lib/References.svelte
@@ -34,11 +34,11 @@
 
 {#if bib}
 	{#each bib.entries_raw as entry, i}
-		<div class="mt-2" id={`#${entry._id}`}>
-			<div style="font-size: 12px;">
-				[{entry._id}]
+		<div class={i > 0 ? "mt-5" : ""} id={`#${entry._id}`}>
+			<div class="bg-gray-100">
+				[<span style="font-size: 15px;">{entry._id}</span>]
 			</div>
-			<div>
+			<div class="border-l-2 border-gray-400 pl-2">
 				<div style="font-size: 17px;">
 					{#if entry.getFieldAsString("url")}
 						<a href={`${entry.getFieldAsString("url")}`}>
diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 5fc31fe8..771fd6d9 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -35,8 +35,7 @@ p {
 }
 
 a {
-	color: var(--color-theme-1);
-	text-decoration: none;
+	color: #ef562f;
 }
 
 a:hover {

From 42c6c3d94bdf1015b3649d8731527872337c838b Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:07:41 -0800
Subject: [PATCH 09/19] feat: move edit button and change download to dropdown

---
 .../routes/edit/[proteinName]/+page.svelte    |  9 +++++
 .../routes/protein/[proteinName]/+page.svelte | 36 ++++++++++---------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/routes/edit/[proteinName]/+page.svelte b/frontend/src/routes/edit/[proteinName]/+page.svelte
index 76683ccf..988ecb54 100644
--- a/frontend/src/routes/edit/[proteinName]/+page.svelte
+++ b/frontend/src/routes/edit/[proteinName]/+page.svelte
@@ -101,6 +101,15 @@
 					>Cancel</Button
 				>
 			</div>
+			<div>
+				<Button
+					color="red"
+					on:click={async () => {
+						await Backend.deleteProteinEntry(data.proteinName);
+						goto("/");
+					}}>Delete Protein Entry</Button
+				>
+			</div>
 		</div>
 	{/if}
 </section>
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index 0dd9e31a..22bd7b52 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -2,12 +2,19 @@
 	import { onMount } from "svelte";
 	import { Backend, type ProteinEntry } from "$lib/backend";
 	import ProteinVis from "$lib/ProteinVis.svelte";
-	import { Button, Card, Spinner } from "flowbite-svelte";
+	import {
+		Button,
+		Card,
+		Dropdown,
+		DropdownItem,
+		Spinner,
+	} from "flowbite-svelte";
 	import Markdown from "$lib/Markdown.svelte";
 	import { Heading, P, Span } from "flowbite-svelte";
 	import { humanReadableProteinName, numberWithCommas } from "$lib/format";
 	import { goto } from "$app/navigation";
 	import References from "$lib/References.svelte";
+	import { ChevronDownSolid, PenOutline } from "flowbite-svelte-icons";
 
 	const testBib = String.raw`@article{bertucci2022dendromap,
   title={DendroMap: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps},
@@ -60,21 +67,7 @@
 					decorationClass="decoration-8 decoration-primary-400 dark:decoration-primary-600"
 					>{humanReadableProteinName(entry.name)}</Span
 				>
-				<Button
-					outline
-					on:click={async () => {
-						await Backend.deleteProteinEntry(data.proteinName);
-						goto("/");
-					}}>Delete Protein</Button
-				>
-				<Button
-					outline
-					on:click={async () => {
-						goto(`/edit/${entry?.name}`);
-					}}>Edit Protein</Button
-				>
 			</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>
@@ -122,7 +115,18 @@
 			</Card>
 		</div>
 		<div id="right-side">
-			<Button href={pdbFileURL(entry.name)}>Download .pdb file</Button>
+			<div class="flex gap-2">
+				<Button>Download <ChevronDownSolid size="xs" class="ml-2" /></Button>
+				<Dropdown>
+					<DropdownItem href={pdbFileURL(entry.name)}>PDB</DropdownItem>
+				</Dropdown>
+				<Button
+					on:click={async () => {
+						goto(`/edit/${entry?.name}`);
+					}}><PenOutline class="mr-2" size="sm" />Edit Entry</Button
+				>
+			</div>
+
 			<div class="mt-2">
 				<ProteinVis format="pdb" url={pdbFileURL(entry.name)} width={750} />
 			</div>

From 8340d8686a7470082940c20ded7934c4092ca35d Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:17:13 -0800
Subject: [PATCH 10/19] feat: display the references too

---
 backend/init.sql                              | 12 ++++--
 backend/src/api_types.py                      |  1 +
 backend/src/server.py                         | 11 ++++--
 .../routes/protein/[proteinName]/+page.svelte | 39 ++++++-------------
 4 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/backend/init.sql b/backend/init.sql
index edc4816d..37a79610 100644
--- a/backend/init.sql
+++ b/backend/init.sql
@@ -18,7 +18,8 @@ CREATE TABLE proteins (
     name text NOT NULL UNIQUE PRIMARY KEY, -- user specified name of the protein (TODO: consider having a string limit)
     length integer, -- length of amino acid sequence
     mass numeric, -- mass in amu/daltons
-    content bytea -- stored markdown for the protein article (TODO: consider having a limit to how big this can be)
+    content bytea, -- stored markdown for the protein article (TODO: consider having a limit to how big this can be)
+    refs bytea -- bibtex references mentioned in the content/article
 );
 
 /*
@@ -45,24 +46,27 @@ CREATE TABLE species (
 /*
  * Inserts example proteins into proteins table
  */
-INSERT INTO proteins (name, length, mass, content) VALUES (
+INSERT INTO proteins (name, length, mass, content, refs) VALUES (
     'Gh_comp271_c0_seq1', 
     0,
     0.0,
+    null,
     null
 );
 
-INSERT INTO proteins (name, length, mass, content) VALUES (
+INSERT INTO proteins (name, length, mass, content, refs) VALUES (
     'Lb17_comp535_c2_seq1', 
     0,
     0.0,
+    null,
     null
 );
 
-INSERT INTO proteins (name, length, mass, content) VALUES (
+INSERT INTO proteins (name, length, mass, content, refs) VALUES (
     'Lh14_comp2336_c0_seq1', 
     0,
     0.0,
+    null,
     null
 );
 
diff --git a/backend/src/api_types.py b/backend/src/api_types.py
index 5bd469ed..be266043 100644
--- a/backend/src/api_types.py
+++ b/backend/src/api_types.py
@@ -28,6 +28,7 @@ class ProteinEntry(CamelModel):
     length: int
     mass: float
     content: str | None = None
+    refs: str | None = None
 
 
 class AllEntries(CamelModel):
diff --git a/backend/src/server.py b/backend/src/server.py
index fc74b0b2..3542d9d5 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -43,7 +43,7 @@ def get_protein_entry(protein_name: str):
     with Database() as db:
         try:
             entry_sql = db.execute_return(
-                """SELECT name, length, mass, content FROM proteins
+                """SELECT name, length, mass, content, refs FROM proteins
                     WHERE name = %s""",
                 [protein_name],
             )
@@ -53,13 +53,16 @@ def get_protein_entry(protein_name: str):
             if entry_sql is not None and len(entry_sql) != 0:
                 # return the only entry
                 only_returned_entry = entry_sql[0]
-                name, length, mass, content = only_returned_entry
-                # if bytes are present, decode them into a string
+                name, length, mass, content, refs = only_returned_entry
+
+                # if byte arrays are present, decode them into a string
                 if content is not None:
                     content = bytea_to_str(content)
+                if refs is not None:
+                    refs = bytea_to_str(refs)
 
                 return ProteinEntry(
-                    name=name, length=length, mass=mass, content=content
+                    name=name, length=length, mass=mass, content=content, refs=refs
                 )
 
         except Exception as e:
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index 22bd7b52..730f7058 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -16,23 +16,6 @@
 	import References from "$lib/References.svelte";
 	import { ChevronDownSolid, PenOutline } from "flowbite-svelte-icons";
 
-	const testBib = String.raw`@article{bertucci2022dendromap,
-  title={DendroMap: Visual Exploration of Large-Scale Image Datasets for Machine Learning with Treemaps},
-  author={Bertucci, Donald and Hamid, Md Montaser and Anand, Yashwanthi and Ruangrotsakun, Anita and Tabatabai, Delyar and Perez, Melissa and Kahng, Minsuk},
-  journal={IEEE Transactions on Visualization and Computer Graphics},
-  year={2022},
-  publisher={IEEE},
-  doi={10.1109/TVCG.2022.3209425}}
-
-  @misc{silverthorne_2020,
-       title={A guide to rust programming language},
-       url={https://about.gitlab.com/blog/2020/07/21/rust-programming-language/},
-       journal={GitLab},
-       author={Silverthorne, Valerie},
-       year={2020},
-       month={Jul}
-}`;
-
 	export let data; // linked to +page.ts return (aka the id)
 	let entry: ProteinEntry | null = null;
 	let error = false;
@@ -99,20 +82,20 @@
 			</Card>
 
 			<!-- Article / Wiki entry -->
-			<Card title="Info" class="max-w-full mt-5">
-				<Heading tag="h4">Article</Heading>
-				{#if entry.content !== null}
+			{#if entry.content}
+				<Card title="Info" class="max-w-full mt-5">
+					<Heading tag="h4">Article</Heading>
 					<Markdown text={entry.content} />
-				{:else}
-					No article, edit to add one
-				{/if}
-			</Card>
+				</Card>
+			{/if}
 
 			<!-- References -->
-			<Card title="References" class="max-w-full mt-5 overflow-wrap">
-				<Heading tag="h4">References</Heading>
-				<References bibtex={testBib} />
-			</Card>
+			{#if entry.refs}
+				<Card title="References" class="max-w-full mt-5 overflow-wrap">
+					<Heading tag="h4">References</Heading>
+					<References bibtex={entry.refs} />
+				</Card>
+			{/if}
 		</div>
 		<div id="right-side">
 			<div class="flex gap-2">

From c825666ad9cf3007100210a7968ff21edc0d7395 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:17:23 -0800
Subject: [PATCH 11/19] sh run.sh gen_api

---
 frontend/src/openapi/models/ProteinEntry.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/openapi/models/ProteinEntry.ts b/frontend/src/openapi/models/ProteinEntry.ts
index 6f42077b..d18fd865 100644
--- a/frontend/src/openapi/models/ProteinEntry.ts
+++ b/frontend/src/openapi/models/ProteinEntry.ts
@@ -8,5 +8,6 @@ export type ProteinEntry = {
     length: number;
     mass: number;
     content?: (string | null);
+    refs?: (string | null);
 };
 

From e917e6ae0518da1c6fb7f167e6174e95f33cfffe Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:25:52 -0800
Subject: [PATCH 12/19] feat: upload page add refs

---
 backend/src/api_types.py                | 1 +
 backend/src/server.py                   | 3 ++-
 frontend/src/routes/upload/+page.svelte | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/backend/src/api_types.py b/backend/src/api_types.py
index be266043..9032a573 100644
--- a/backend/src/api_types.py
+++ b/backend/src/api_types.py
@@ -38,6 +38,7 @@ class AllEntries(CamelModel):
 class UploadBody(CamelModel):
     name: str
     content: str  # markdown content from user
+    refs: str  # references used in content (bibtex form)
     pdb_file_base64: str
 
 
diff --git a/backend/src/server.py b/backend/src/server.py
index 3542d9d5..a1e0a488 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -110,12 +110,13 @@ def upload_protein_entry(body: UploadBody):
         # save to db
         with Database() as db:
             db.execute(
-                """INSERT INTO proteins (name, length, mass, content) VALUES (%s, %s, %s, %s);""",
+                """INSERT INTO proteins (name, length, mass, content, refs) VALUES (%s, %s, %s, %s, %s);""",
                 [
                     pdb.name,
                     pdb.num_amino_acids,
                     pdb.mass_daltons,
                     str_to_bytea(body.content),
+                    str_to_bytea(body.refs),
                 ],
             )
     except Exception:
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index f5cc2084..1c8ea2e6 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -119,6 +119,7 @@
 							name,
 							pdbFileBase64: base64Encoding,
 							content,
+							refs,
 						});
 						if (err) {
 							uploadError = err;

From fac83b19a0f377d185022ae4865e44cf8bc956c2 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:25:59 -0800
Subject: [PATCH 13/19] sh run.sh gen_api

---
 frontend/src/openapi/models/UploadBody.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/openapi/models/UploadBody.ts b/frontend/src/openapi/models/UploadBody.ts
index 1ec03121..67b433df 100644
--- a/frontend/src/openapi/models/UploadBody.ts
+++ b/frontend/src/openapi/models/UploadBody.ts
@@ -6,6 +6,7 @@
 export type UploadBody = {
     name: string;
     content: string;
+    refs: string;
     pdbFileBase64: string;
 };
 

From f4875fe6b419c386eed92c46206684f4502a78a2 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:47:32 -0800
Subject: [PATCH 14/19] feat: add edit functions to refs

---
 backend/src/api_types.py                      |  1 +
 backend/src/server.py                         | 24 ++++++++++----
 .../routes/edit/[proteinName]/+page.svelte    | 33 ++++++++++++-------
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/backend/src/api_types.py b/backend/src/api_types.py
index 9032a573..1f5e1f40 100644
--- a/backend/src/api_types.py
+++ b/backend/src/api_types.py
@@ -57,3 +57,4 @@ class EditBody(CamelModel):
     old_name: str  # so we can identify the exact row we need to change
     new_name: str
     new_content: str | None = None
+    new_refs: str | None = None
diff --git a/backend/src/server.py b/backend/src/server.py
index a1e0a488..bc23fbcb 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -137,21 +137,33 @@ def edit_protein_entry(body: EditBody):
             os.rename(pdb_file_name(body.old_name), pdb_file_name(body.new_name))
 
         with Database() as db:
-            # if we have content/markdown, then update it, otherwise just update the name
-            if body.new_content is not None:
+            if body.new_name != body.old_name:
                 db.execute(
-                    """UPDATE proteins SET name = %s, content = %s WHERE name = %s""",
+                    """UPDATE proteins SET name = %s WHERE name = %s""",
                     [
                         body.new_name,
+                        body.old_name,
+                    ],
+                )
+
+            if body.new_content is not None:
+                db.execute(
+                    """UPDATE proteins SET content = %s WHERE name = %s""",
+                    [
                         str_to_bytea(body.new_content),
                         body.old_name,
                     ],
                 )
-            else:
+
+            if body.new_refs is not None:
                 db.execute(
-                    """UPDATE proteins SET name = %s WHERE name = %s""",
-                    [body.new_name, body.old_name],
+                    """UPDATE proteins SET refs = %s WHERE name = %s""",
+                    [
+                        str_to_bytea(body.new_refs),
+                        body.old_name,
+                    ],
                 )
+
     except Exception:
         return UploadError.WRITE_ERROR
 
diff --git a/frontend/src/routes/edit/[proteinName]/+page.svelte b/frontend/src/routes/edit/[proteinName]/+page.svelte
index 988ecb54..a9aa8993 100644
--- a/frontend/src/routes/edit/[proteinName]/+page.svelte
+++ b/frontend/src/routes/edit/[proteinName]/+page.svelte
@@ -4,13 +4,20 @@
 	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
 	import { formatProteinName, humanReadableProteinName } from "$lib/format";
+	import ArticleEditor from "$lib/ArticleEditor.svelte";
 
 	// key difference, here we get the information, then populate it in the upload form that can be edited
 	// and reuploaded/edited
 	export let data;
 
 	let name: string;
-	let content: string | null;
+
+	// store original too so we can see if the user changed/edited the content
+	let ogContent: string;
+	let content: string;
+	let ogRefs: string;
+	let refs: string;
+
 	let uploadError: UploadError | undefined;
 	let entry: ProteinEntry | null = null;
 	let error = false;
@@ -26,7 +33,12 @@
 			error = true;
 		} else {
 			name = humanReadableProteinName(entry.name);
-			content = entry.content!;
+
+			content = entry.content ?? "";
+			ogContent = content; // log original content
+
+			refs = entry.refs ?? "";
+			ogRefs = refs; // log original refs
 		}
 	});
 </script>
@@ -54,13 +66,7 @@
 				{/if}
 			</div>
 			<div>
-				<Label for="content" class="block mb-2">Protein Article</Label>
-				<Textarea
-					id="content"
-					placeholder="Enter markdown..."
-					rows={10}
-					bind:value={content}
-				/>
+				<ArticleEditor bind:content bind:refs />
 			</div>
 			<div>
 				<Button
@@ -68,7 +74,8 @@
 						if (entry) {
 							if (
 								name === humanReadableProteinName(entry.name) &&
-								content === entry.content
+								content === ogContent &&
+								refs === ogRefs
 							)
 								return; // no changes no edits!
 
@@ -76,7 +83,8 @@
 								const err = await Backend.editProteinEntry({
 									newName: name,
 									oldName: entry.name,
-									newContent: content,
+									newContent: content !== ogContent ? content : undefined,
+									newRefs: refs !== ogRefs ? refs : undefined,
 								});
 								if (err) {
 									uploadError = err;
@@ -91,7 +99,8 @@
 						}
 					}}
 					disabled={(name === humanReadableProteinName(entry.name) &&
-						content === entry.content) ||
+						content === ogContent &&
+						refs === ogRefs) ||
 						name.length === 0}>Edit Protein</Button
 				>
 

From ac6448bed557717c3495ba521e5e3cd5d63f8d30 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:50:03 -0800
Subject: [PATCH 15/19] refac: move article editor in separate component

---
 frontend/src/lib/ArticleEditor.svelte   | 60 +++++++++++++++++++++++++
 frontend/src/routes/upload/+page.svelte | 49 ++------------------
 2 files changed, 64 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/lib/ArticleEditor.svelte

diff --git a/frontend/src/lib/ArticleEditor.svelte b/frontend/src/lib/ArticleEditor.svelte
new file mode 100644
index 00000000..6b67cc05
--- /dev/null
+++ b/frontend/src/lib/ArticleEditor.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import {
+		Card,
+		Tabs,
+		TabItem,
+		Heading,
+		Label,
+		Textarea,
+	} from "flowbite-svelte";
+	import Markdown from "$lib/Markdown.svelte";
+	import References from "$lib/References.svelte";
+	export let refs = "";
+	export let content = "";
+</script>
+
+<Card
+	class="max-w-full"
+	style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
+>
+	<Tabs contentClass="bg-none p-5" style="underline">
+		<TabItem title="article content" open>
+			<div>
+				<Label for="content" class="block mb-2"
+					>Protein Article (Markdown)</Label
+				>
+				<Textarea
+					id="content"
+					placeholder="Enter markdown..."
+					rows={12}
+					bind:value={content}
+				/>
+			</div>
+
+			<div class="mt-3">
+				<Label for="refs" class="block mb-2">References (BibTeX)</Label>
+				<Textarea
+					id="refs"
+					placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
+					rows={4}
+					bind:value={refs}
+				/>
+			</div>
+		</TabItem>
+		<TabItem title="preview">
+			{#if content.length > 0 || refs.length > 0}
+				<Card class="max-w-full">
+					<Heading tag="h4">Article</Heading>
+					<Markdown text={content} />
+				</Card>
+
+				<Card class="max-w-full mt-5">
+					<Heading tag="h4">References</Heading>
+					<References bibtex={String.raw`${refs}`} />
+				</Card>
+			{:else}
+				No content to render/preview
+			{/if}
+		</TabItem>
+	</Tabs>
+</Card>
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 1c8ea2e6..d1bd9087 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -16,6 +16,7 @@
 	import { formatProteinName } from "$lib/format";
 	import Markdown from "$lib/Markdown.svelte";
 	import References from "$lib/References.svelte";
+	import ArticleEditor from "$lib/ArticleEditor.svelte";
 
 	let name: string = "";
 	let content: string = "";
@@ -59,51 +60,9 @@
 			{/if}
 		</div>
 
-		<Card
-			class="max-w-full"
-			style="height: 600px; overflow-y: scroll; padding: 0; padding-top: 4px; padding-left: 4px;"
-		>
-			<Tabs contentClass="bg-none p-5" style="underline">
-				<TabItem title="article content" open>
-					<div>
-						<Label for="content" class="block mb-2"
-							>Protein Article (Markdown)</Label
-						>
-						<Textarea
-							id="content"
-							placeholder="Enter markdown..."
-							rows={12}
-							bind:value={content}
-						/>
-					</div>
-
-					<div class="mt-3">
-						<Label for="refs" class="block mb-2">References (BibTeX)</Label>
-						<Textarea
-							id="refs"
-							placeholder="Enter bibtex with atleast an id, title, and author (optionally url and year)"
-							rows={4}
-							bind:value={refs}
-						/>
-					</div>
-				</TabItem>
-				<TabItem title="preview">
-					{#if content.length > 0 || refs.length > 0}
-						<Card class="max-w-full">
-							<Heading tag="h4">Article</Heading>
-							<Markdown text={content} />
-						</Card>
-
-						<Card class="max-w-full mt-5">
-							<Heading tag="h4">References</Heading>
-							<References bibtex={String.raw`${refs}`} />
-						</Card>
-					{:else}
-						No content to render/preview
-					{/if}
-				</TabItem>
-			</Tabs>
-		</Card>
+		<div>
+			<ArticleEditor bind:content bind:refs />
+		</div>
 
 		<div>
 			<Fileupload class="w-100" bind:files />

From 0ace8c825a5c5cee151b3c0c6a102d0b7f3c299e Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Tue, 28 Nov 2023 14:50:10 -0800
Subject: [PATCH 16/19] sh run.sh gen_api

---
 frontend/src/openapi/models/EditBody.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/openapi/models/EditBody.ts b/frontend/src/openapi/models/EditBody.ts
index 0c7f5aac..cf6035b1 100644
--- a/frontend/src/openapi/models/EditBody.ts
+++ b/frontend/src/openapi/models/EditBody.ts
@@ -7,5 +7,6 @@ export type EditBody = {
     oldName: string;
     newName: string;
     newContent?: (string | null);
+    newRefs?: (string | null);
 };
 

From b823e333f9ccf41764a45836a3892c447de42751 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Wed, 29 Nov 2023 11:38:53 -0800
Subject: [PATCH 17/19] feat: restyle so everything fits and references
 highlight

---
 frontend/src/lib/References.svelte              |  4 ++--
 .../routes/protein/[proteinName]/+page.svelte   |  3 +--
 frontend/src/routes/styles.css                  | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/References.svelte b/frontend/src/lib/References.svelte
index 43186619..fb713b08 100644
--- a/frontend/src/lib/References.svelte
+++ b/frontend/src/lib/References.svelte
@@ -34,8 +34,8 @@
 
 {#if bib}
 	{#each bib.entries_raw as entry, i}
-		<div class={i > 0 ? "mt-5" : ""} id={`#${entry._id}`}>
-			<div class="bg-gray-100">
+		<div class={i > 0 ? "mt-5" : ""} id={entry._id}>
+			<div class="bg-gray-50 text-gray-400">
 				[<span style="font-size: 15px;">{entry._id}</span>]
 			</div>
 			<div class="border-l-2 border-gray-400 pl-2">
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
index 730f7058..1b4f5608 100644
--- a/frontend/src/routes/protein/[proteinName]/+page.svelte
+++ b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -126,8 +126,7 @@
 
 <style>
 	#left-side {
-		min-width: 100ch;
-		max-width: 100ch;
+		width: 825px;
 	}
 	#right-side {
 	}
diff --git a/frontend/src/routes/styles.css b/frontend/src/routes/styles.css
index 771fd6d9..186cc9ec 100644
--- a/frontend/src/routes/styles.css
+++ b/frontend/src/routes/styles.css
@@ -16,6 +16,23 @@
 	color: var(--color-text);
 }
 
+html {
+	scroll-behavior: smooth;
+}
+
+/* when I href an id and it scrolls to an element, highlight it momentarily */
+:target {
+	animation: target-fade 1s;
+}
+@keyframes target-fade {
+	from {
+		background-color: #ef562f;
+	}
+	to {
+		background-color: transparent;
+	}
+}
+
 body {
 	margin: 0;
 }

From 344b4b1a5392ac6973a0b08319e77f21be962bf7 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 30 Nov 2023 17:30:54 -0800
Subject: [PATCH 18/19] fix: remove base64 encoding and use raw pdb text

---
 backend/src/api_types.py                |  2 +-
 backend/src/server.py                   |  2 +-
 frontend/src/lib/format.ts              | 11 +++++++++
 frontend/src/routes/upload/+page.svelte | 33 +++----------------------
 4 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/backend/src/api_types.py b/backend/src/api_types.py
index 1f5e1f40..5b25eeba 100644
--- a/backend/src/api_types.py
+++ b/backend/src/api_types.py
@@ -39,7 +39,7 @@ class UploadBody(CamelModel):
     name: str
     content: str  # markdown content from user
     refs: str  # references used in content (bibtex form)
-    pdb_file_base64: str
+    pdb_file_str: str
 
 
 class UploadError(str, enum.Enum):
diff --git a/backend/src/server.py b/backend/src/server.py
index bc23fbcb..ac8db09a 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -98,7 +98,7 @@ def upload_protein_entry(body: UploadBody):
     # if name is unique, save the pdb file and add the entry to the database
     try:
         # TODO: consider somehow sending the file as a stream instead of a b64 string or send as regular string
-        pdb = parse_protein_pdb(body.name, body.pdb_file_base64, encoding="b64")
+        pdb = parse_protein_pdb(body.name, body.pdb_file_str)
     except Exception:
         return UploadError.PARSE_ERROR
 
diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
index 981b7429..93776499 100644
--- a/frontend/src/lib/format.ts
+++ b/frontend/src/lib/format.ts
@@ -10,3 +10,14 @@ export function formatProteinName(name: string) {
 export function humanReadableProteinName(name: string) {
 	return name.replaceAll("_", " ");
 }
+
+export function fileToString(f: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.readAsText(f);
+		reader.onload = () => {
+			resolve(reader.result as string);
+		};
+		reader.onerror = reject;
+	});
+}
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index d1bd9087..c6211b84 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -1,21 +1,8 @@
 <script lang="ts">
 	import { Backend, UploadError } from "$lib/backend";
-	import {
-		Fileupload,
-		Button,
-		Input,
-		Label,
-		Helper,
-		Textarea,
-		Tabs,
-		TabItem,
-		Card,
-		Heading,
-	} from "flowbite-svelte";
+	import { Fileupload, Button, Input, Label, Helper } from "flowbite-svelte";
 	import { goto } from "$app/navigation";
-	import { formatProteinName } from "$lib/format";
-	import Markdown from "$lib/Markdown.svelte";
-	import References from "$lib/References.svelte";
+	import { formatProteinName, fileToString } from "$lib/format";
 	import ArticleEditor from "$lib/ArticleEditor.svelte";
 
 	let name: string = "";
@@ -24,18 +11,6 @@
 	let uploadError: UploadError | undefined;
 	let refs = "";
 	$: file = files ? files[0] : undefined; // we're just concerned with one file
-	$: console.log(content);
-
-	function fileToBase64(f: File): Promise<string> {
-		return new Promise((resolve, reject) => {
-			const reader = new FileReader();
-			reader.readAsDataURL(f);
-			reader.onload = () => {
-				resolve(reader.result as string);
-			};
-			reader.onerror = reject;
-		});
-	}
 </script>
 
 <section>
@@ -72,11 +47,11 @@
 				on:click={async () => {
 					if (file === undefined || name === "") return; // no file selected
 
-					const base64Encoding = await fileToBase64(file);
+					const pdbFileStr = await fileToString(file);
 					try {
 						const err = await Backend.uploadProteinEntry({
 							name,
-							pdbFileBase64: base64Encoding,
+							pdbFileStr,
 							content,
 							refs,
 						});

From 9490cdf16b13ef79438fef56bcaebdc887d5ab08 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 30 Nov 2023 17:31:02 -0800
Subject: [PATCH 19/19] sh run.sh gen_api

---
 frontend/src/openapi/models/UploadBody.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/openapi/models/UploadBody.ts b/frontend/src/openapi/models/UploadBody.ts
index 67b433df..061e2a5d 100644
--- a/frontend/src/openapi/models/UploadBody.ts
+++ b/frontend/src/openapi/models/UploadBody.ts
@@ -7,6 +7,6 @@ export type UploadBody = {
     name: string;
     content: string;
     refs: string;
-    pdbFileBase64: string;
+    pdbFileStr: string;
 };