From 3217a094a7b6433d4a1a917512dd835f601913b0 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 16:02:02 -0700
Subject: [PATCH 01/10] feat: when pdb url changes, protein is updated in
 molstar 3D visualization

---
 frontend/src/lib/Molstar.svelte    | 59 ++++++++++++++++++++
 frontend/src/lib/ProteinVis.svelte | 88 ------------------------------
 frontend/src/routes/Compare.svelte | 53 ++++++------------
 frontend/src/routes/Protein.svelte | 16 +-----
 4 files changed, 80 insertions(+), 136 deletions(-)
 create mode 100644 frontend/src/lib/Molstar.svelte
 delete mode 100644 frontend/src/lib/ProteinVis.svelte

diff --git a/frontend/src/lib/Molstar.svelte b/frontend/src/lib/Molstar.svelte
new file mode 100644
index 00000000..6456c48e
--- /dev/null
+++ b/frontend/src/lib/Molstar.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { PDBeMolstarPlugin } from "../../venome-molstar/lib";
+
+	export let url = "";
+	export let format = "pdb";
+	export let bgColor = { r: 255, g: 255, b: 255 }; // white
+	export let binary = false;
+	export let width = 500;
+	export let height = 500;
+
+	let divEl: HTMLDivElement;
+	async function render() {
+		// @ts-ignore
+		const m = new PDBeMolstarPlugin(); // loaded through app.html
+		// some bs for the whole thing to rerender. TODO: fix this.
+		divEl.innerHTML = "";
+		const div = document.createElement("div");
+		divEl.appendChild(div);
+		await m.render(div, {
+			customData: {
+				url,
+				format,
+				binary,
+			},
+			bgColor,
+			subscribeEvents: false,
+			selectInteraction: true,
+			alphafoldView: true,
+			reactive: true,
+			sequencePanel: true,
+			hideControls: true,
+			hideCanvasControls: ["animation"],
+		});
+	}
+
+	$: {
+		if (url && divEl) {
+			render();
+		}
+	}
+</script>
+
+<div
+	bind:this={divEl}
+	id="myViewer"
+	style="width: {width}px; height: {height}px;"
+/>
+
+<style>
+	/* https://embed.plnkr.co/plunk/WlRx73uuGA9EJbpn */
+	.msp-plugin ::-webkit-scrollbar-thumb {
+		background-color: #474748 !important;
+	}
+	#myViewer {
+		float: left;
+		position: relative;
+		z-index: 997;
+	}
+</style>
diff --git a/frontend/src/lib/ProteinVis.svelte b/frontend/src/lib/ProteinVis.svelte
deleted file mode 100644
index 98943dee..00000000
--- a/frontend/src/lib/ProteinVis.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-	import { PDBeMolstarPlugin } from "../../venome-molstar";
-	import type { InitParams } from "../../venome-molstar/lib/spec";
-	import { Backend } from "./backend";
-	import { createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher<{
-		mount: { screenshot: typeof screenshot };
-	}>();
-
-	export let proteinName = "Gh_comp271_c0_seq1";
-	export let format = "pdb";
-	export let width = 500;
-	export let height = 500;
-
-	const url = `http://localhost:8000/protein/pdb/${proteinName}`;
-	const m = new PDBeMolstarPlugin(); // loaded through app.html
-	let divEl: HTMLDivElement;
-	const options: Partial<InitParams> = {
-		customData: {
-			url,
-			format,
-			binary: false,
-		},
-		subscribeEvents: false,
-		bgColor: {
-			r: 255,
-			g: 255,
-			b: 255,
-		},
-		selectInteraction: true,
-		alphafoldView: true,
-		reactive: true,
-		sequencePanel: true,
-		hideControls: true,
-		hideCanvasControls: ["animation"],
-	};
-
-	/**
-	 * @todo: don't upload the protein thumbnail everytime, just do once!
-	 */
-	onMount(async () => {
-		await m.render(divEl, options);
-		dispatch("mount", { screenshot });
-	});
-
-	async function screenshot(delayMs = 200) {
-		async function onLoad(funcToExec: () => void) {
-			return new Promise((resolve) => {
-				m.events.loadComplete.subscribe(() => {
-					funcToExec();
-					resolve(true);
-				});
-			});
-		}
-		async function delay(ms: number) {
-			return new Promise((resolve) => setTimeout(resolve, ms));
-		}
-		let p = "";
-		await onLoad(() => {
-			console.log("protein loaded");
-		});
-		await delay(delayMs); // why the fuck do I need this for the next line to work?
-		p = m.plugin.helpers.viewportScreenshot
-			?.getPreview()!
-			.canvas.toDataURL()!;
-		return p;
-	}
-</script>
-
-<div
-	bind:this={divEl}
-	id="myViewer"
-	style="width: {width}px; height: {height}px;"
-/>
-
-<style>
-	/* https://embed.plnkr.co/plunk/WlRx73uuGA9EJbpn */
-	.msp-plugin ::-webkit-scrollbar-thumb {
-		background-color: #474748 !important;
-	}
-	#myViewer {
-		float: left;
-		position: relative;
-		z-index: 997;
-	}
-</style>
diff --git a/frontend/src/routes/Compare.svelte b/frontend/src/routes/Compare.svelte
index b1866b05..324f5a04 100644
--- a/frontend/src/routes/Compare.svelte
+++ b/frontend/src/routes/Compare.svelte
@@ -1,31 +1,26 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { Backend, BACKEND_URL, type ProteinEntry } from "../lib/backend";
-	import ProteinVis from "../lib/ProteinVis.svelte";
-	import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
-	import Markdown from "../lib/Markdown.svelte";
-	import { numberWithCommas, undoFormatProteinName } from "../lib/format";
-	import { navigate } from "svelte-routing";
-	import References from "../lib/References.svelte";
-	import { ChevronDownSolid, PenOutline } from "flowbite-svelte-icons";
-	import EntryCard from "../lib/EntryCard.svelte";
-	import SimilarProteins from "../lib/SimilarProteins.svelte";
+	import Molstar from "../lib/Molstar.svelte";
 	import DelayedSpinner from "../lib/DelayedSpinner.svelte";
-	import { user } from "../lib/stores/user";
 
-	const fileDownloadDropdown = ["pdb", "fasta"];
-
-    export let proteinA: string;
-    export let proteinB: string;
-    let combined = proteinA + "/" + proteinB
-    let urlId="Gh_comp1045_c0_seq1"
+	export let proteinA: string;
+	export let proteinB: string;
+	let combined = proteinA + "/" + proteinB;
+	let urlId = "Gh_comp1045_c0_seq1";
 	let entry: ProteinEntry | null = null;
 	let error = false;
 
 	// when this component mounts, request protein wikipedia entry from backend
 	onMount(async () => {
 		// Request the protein from backend given ID
-		console.log("Requesting", proteinA, "and", proteinB, "info from backend");
+		console.log(
+			"Requesting",
+			proteinA,
+			"and",
+			proteinB,
+			"info from backend"
+		);
 
 		entry = await Backend.getProteinEntry(urlId);
 		// if we could not find the entry, the id is garbo
@@ -41,28 +36,16 @@
 	{#if entry}
 		<div id="left-side">
 			<!-- TITLE AND DESCRIPTION -->
-			<h1 id="title">
-				Comparing Proteins
-			</h1>
+			<h1 id="title">Comparing Proteins</h1>
 
 			<div id="description">
 				{proteinA} and {proteinB}
 			</div>
-            <ProteinVis
-                format="pdb"
-                proteinName={combined}
-                width={750}
-                height={500}
-                on:mount={async ({ detail: { screenshot } }) => {
-                    // upload the protein thumbnail if it doesn't exist
-                    if (entry !== null && entry.thumbnail === null) {
-                        const b64 = await screenshot();
-                        const res = await Backend.uploadProteinPng({
-                            proteinName: entry.name,
-                            base64Encoding: b64,
-                        });
-                    }
-                }}
+			<Molstar
+				format="pdb"
+				url="{BACKEND_URL}/protein/pdb/{combined}"
+				width={750}
+				height={500}
 			/>
 		</div>
 	{:else if !error}
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index 2834333f..bb57146a 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { Backend, BACKEND_URL, type ProteinEntry } from "../lib/backend";
-	import ProteinVis from "../lib/ProteinVis.svelte";
+	import Molstar from "../lib/Molstar.svelte";
 	import { Button, Dropdown, DropdownItem } from "flowbite-svelte";
 	import Markdown from "../lib/Markdown.svelte";
 	import {
@@ -109,21 +109,11 @@
 			</div>
 
 			<EntryCard title="Provided Information">
-				<ProteinVis
+				<Molstar
 					format="pdb"
-					proteinName={entry.name}
+					url="http://localhost:8000/protein/pdb/{entry.name}"
 					width={400}
 					height={350}
-					on:mount={async ({ detail: { screenshot } }) => {
-						// upload the protein thumbnail if it doesn't exist
-						if (entry !== null && entry.thumbnail === null) {
-							const b64 = await screenshot();
-							const res = await Backend.uploadProteinPng({
-								proteinName: entry.name,
-								base64Encoding: b64,
-							});
-						}
-					}}
 				/>
 				<div id="info-grid" class="grid grid-cols-2 mt-5">
 					<b>Organism</b>

From 7177207e593630feb21db3dedc81a3533c4b2854 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 16:17:51 -0700
Subject: [PATCH 02/10] feat: small color changes and text

---
 frontend/src/app.pcss                   |  2 +-
 frontend/src/lib/SimilarProteins.svelte | 25 ++++++++++++-------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app.pcss b/frontend/src/app.pcss
index 4f717622..0fbd28ec 100644
--- a/frontend/src/app.pcss
+++ b/frontend/src/app.pcss
@@ -82,7 +82,7 @@ p {
 }
 
 a {
-	color: var(--lightblue);
+	color: var(--primary-600);
 }
 
 a:hover {
diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index b5e24f74..76241f9c 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { link } from "svelte-routing";
-	import { LinkOutline } from "flowbite-svelte-icons";
+	import { ArrowUpRightFromSquareOutline } from "flowbite-svelte-icons";
 	import { onMount } from "svelte";
 	import { Backend, type SimilarProtein } from "../lib/backend";
 	import { undoFormatProteinName } from "./format";
@@ -27,26 +27,26 @@
 			<th> Name </th>
 			<th> Probability Match</th>
 			<th> E-Value </th>
-			<th> Description </th>
-			<th> Compare </th>
+			<th> Alignment </th>
+			<th> 3D Superimpose TMAlign</th>
 		</tr>
 		{#each similarProteins as protein}
 			<tr class="pdb-row">
-				<td>
+				<td style="align-text: end;">
 					<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
-					<a href="/protein/{protein.name}"
-						><LinkOutline size="sm" />
-						{undoFormatProteinName(protein.name)}</a
-					>
+					<a href="/protein/{protein.name}">
+						{undoFormatProteinName(protein.name)}
+						<ArrowUpRightFromSquareOutline size="sm" />
+					</a>
 				</td>
 				<td>{protein.prob}</td>
-				<td>{protein.evalue}</td>
-				<td class="pdb-desc">{protein.description}</td>
+				<td>{protein.evalue.toExponential()}</td>
+				<td>blah blah</td>
 				<td>
 					<a
 						use:link
 						href="/compare/{queryProteinName}/{protein.name}"
-						><LinkOutline size="sm" />Compare</a
+						>Compare <ArrowUpRightFromSquareOutline size="sm" /></a
 					>
 				</td>
 			</tr>
@@ -66,7 +66,7 @@
 		text-align: left;
 	}
 	.pdb-row {
-		background-color: hsl(var(--lightorange-hsl), 0.11);
+		background-color: hsl(var(--darkblue-hsl), 0.04);
 	}
 	.pdb-desc {
 		width: 5px;
@@ -75,7 +75,6 @@
 		overflow: hidden;
 	}
 	a {
-		color: var(--lightorange);
 		display: flex;
 		gap: 1px;
 		align-items: center;

From 4303ec0c038e5d9e53d4a9e8dd16d5057e7dcb8e Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 17:23:34 -0700
Subject: [PATCH 03/10] feat: add alignment index to easy-search

---
 backend/src/api/search.py                     | 21 +++++++++++++------
 backend/src/foldseek.py                       |  2 +-
 .../src/lib/openapi/models/SimilarProtein.ts  |  3 +++
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/backend/src/api/search.py b/backend/src/api/search.py
index 1fa8f60a..b634246a 100644
--- a/backend/src/api/search.py
+++ b/backend/src/api/search.py
@@ -14,6 +14,9 @@ class SimilarProtein(CamelModel):
     prob: float
     evalue: float
     description: str = ""
+    qstart: int
+    qend: int
+    alntmscore: int
 
 
 class RangeFilter(CamelModel):
@@ -131,7 +134,6 @@ def search_proteins(body: SearchProteinsBody):
                 [text_query, text_query, text_query],
             )
             if entries_result is not None:
-                print(entries_result)
                 return SearchProteinsResults(
                     protein_entries=[
                         ProteinEntry(
@@ -201,14 +203,21 @@ def search_venome_similar(protein_name: str):
         similar = easy_search(
             stored_pdb_file_name(protein_name),
             venome_folder,
-            out_format="target,prob,evalue",
-        )[1:]
+            out_format="target,prob,evalue,qstart,qend",
+        )  # qend,qstart refer to alignment
         formatted = [
-            SimilarProtein(name=name.rstrip(".pdb"), prob=prob, evalue=evalue)
-            for [name, prob, evalue] in similar
+            SimilarProtein(
+                name=name.rstrip(".pdb"),
+                prob=prob,
+                evalue=evalue,
+                qstart=qstart,
+                qend=qend,
+                alntmscore=0,
+            )
+            for [name, prob, evalue, qstart, qend] in similar
         ]
     except Exception:
-        raise HTTPException(404, "Foldseek not found on the system")
+        raise HTTPException(404, "Error in 'foldseek easy-search' command")
 
     try:
         # populate protein descriptions for the similar proteins
diff --git a/backend/src/foldseek.py b/backend/src/foldseek.py
index d9a0a706..40373493 100644
--- a/backend/src/foldseek.py
+++ b/backend/src/foldseek.py
@@ -69,7 +69,7 @@ def parse_easy_search_output(filepath: str) -> list[list]:
 def easy_search(
     query: str,
     target: str,
-    out_format: str = "query, target, prob",
+    out_format: str = "query,target,prob",
     print_loading_info=False,
 ) -> list[list]:
     """easy_search just calls foldseek easy-search under the hood
diff --git a/frontend/src/lib/openapi/models/SimilarProtein.ts b/frontend/src/lib/openapi/models/SimilarProtein.ts
index a222499a..16113600 100644
--- a/frontend/src/lib/openapi/models/SimilarProtein.ts
+++ b/frontend/src/lib/openapi/models/SimilarProtein.ts
@@ -7,5 +7,8 @@ export type SimilarProtein = {
     prob: number;
     evalue: number;
     description?: string;
+    qstart: number;
+    qend: number;
+    alntmscore: number;
 };
 

From 14c6e55621beda1b5c62c485aa2e35ebd5256a94 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 17:23:52 -0700
Subject: [PATCH 04/10] feat: display alignment in frontend

---
 frontend/package.json                   |   1 +
 frontend/src/lib/AlignBlock.svelte      |  42 +++++
 frontend/src/lib/SimilarProteins.svelte |  25 ++-
 frontend/src/routes/Protein.svelte      |   5 +-
 frontend/yarn.lock                      | 194 ++++++++++++++++++++++--
 5 files changed, 243 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/lib/AlignBlock.svelte

diff --git a/frontend/package.json b/frontend/package.json
index b222465a..9c8f2a20 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
 	},
 	"dependencies": {
 		"bibtex": "^0.9.0",
+		"d3": "^7.9.0",
 		"js-cookie": "^3.0.5",
 		"marked": "^12.0.0",
 		"svelte-routing": "^2.11.0"
diff --git a/frontend/src/lib/AlignBlock.svelte b/frontend/src/lib/AlignBlock.svelte
new file mode 100644
index 00000000..08400bab
--- /dev/null
+++ b/frontend/src/lib/AlignBlock.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import * as d3 from "d3";
+
+	// query, 0 to ogLength
+	export let ogLength: number;
+	// alignment within query
+	export let qstart: number;
+	export let qend: number;
+	export let width: number;
+	export let height: number;
+
+	const alnToWidthScaler = d3
+		.scaleLinear()
+		.domain([1, ogLength])
+		.range([0, width]);
+</script>
+
+<svg {width} {height} id="aln" style="overflow: visible;">
+	<rect {width} {height} fill="var(--primary-100)" />
+	<line
+		x1={alnToWidthScaler(qstart)}
+		y1={height / 2}
+		x2={alnToWidthScaler(qend)}
+		y2={height / 2}
+		stroke-width={height}
+		stroke="var(--primary-700)"
+	/>
+	<text
+		x={alnToWidthScaler(qend) + 3}
+		y={height / 2 + 3}
+		style="font-size: 10px;"
+		text-anchor="start"
+		fill="var(--primary-700)">{qend}</text
+	>
+	<text
+		x={alnToWidthScaler(qstart) - 3}
+		y={height / 2 + 3}
+		style="font-size: 10px;"
+		text-anchor="end"
+		fill="var(--primary-700)">{qstart}</text
+	>
+</svg>
diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index 76241f9c..6815744c 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -4,14 +4,17 @@
 	import { onMount } from "svelte";
 	import { Backend, type SimilarProtein } from "../lib/backend";
 	import { undoFormatProteinName } from "./format";
+	import AlignBlock from "./AlignBlock.svelte";
 
 	export let queryProteinName: string;
+	export let length: number;
 
 	let similarProteins: SimilarProtein[] = [];
 	onMount(async () => {
 		try {
 			similarProteins =
 				await Backend.searchVenomeSimilar(queryProteinName);
+			console.log(similarProteins);
 		} catch (e) {
 			console.error(e);
 			console.error(
@@ -27,21 +30,29 @@
 			<th> Name </th>
 			<th> Probability Match</th>
 			<th> E-Value </th>
-			<th> Alignment </th>
-			<th> 3D Superimpose TMAlign</th>
+			<th> Alignment Coverage </th>
+			<th> TMAlign</th>
 		</tr>
-		{#each similarProteins as protein}
+		{#each similarProteins as protein, i}
 			<tr class="pdb-row">
-				<td style="align-text: end;">
+				<td>
 					<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
 					<a href="/protein/{protein.name}">
 						{undoFormatProteinName(protein.name)}
 						<ArrowUpRightFromSquareOutline size="sm" />
 					</a>
 				</td>
-				<td>{protein.prob}</td>
-				<td>{protein.evalue.toExponential()}</td>
-				<td>blah blah</td>
+				<td><code>{protein.prob}</code></td>
+				<td><code>{protein.evalue.toExponential()}</code></td>
+				<td
+					><AlignBlock
+						width={200}
+						height={20}
+						ogLength={length}
+						qstart={protein.qstart}
+						qend={protein.qend}
+					/>
+				</td>
 				<td>
 					<a
 						use:link
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index bb57146a..dc7cdc27 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -63,7 +63,10 @@
 				<div>
 					<b>Structurally Similar Proteins</b>
 					{#if entry.name}
-						<SimilarProteins queryProteinName={entry.name} />
+						<SimilarProteins
+							queryProteinName={entry.name}
+							length={entry.length}
+						/>
 					{/if}
 				</div>
 			</EntryCard>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 835d3a1f..b4a5ab46 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2871,6 +2871,11 @@ comma-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
 
+commander@7:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
@@ -3101,19 +3106,19 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-"d3-array@2 - 3", "d3-array@2.10.0 - 3":
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
   integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
   dependencies:
     internmap "1 - 2"
 
-d3-axis@^3.0.0:
+d3-axis@3, d3-axis@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
   integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
 
-d3-brush@^3.0.0:
+d3-brush@3, d3-brush@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
   integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
@@ -3124,17 +3129,38 @@ d3-brush@^3.0.0:
     d3-selection "3"
     d3-transition "3"
 
-"d3-color@1 - 3":
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
-"d3-dispatch@1 - 3":
+d3-contour@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-delaunay@6:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
   integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-"d3-drag@2 - 3":
+"d3-drag@2 - 3", d3-drag@3:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
   integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
@@ -3142,24 +3168,89 @@ d3-brush@^3.0.0:
     d3-dispatch "1 - 3"
     d3-selection "3"
 
-"d3-ease@1 - 3":
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
-"d3-format@1 - 3":
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
-"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3":
+d3-geo@3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.1.tgz#6027cf51246f9b2ebd64f99e01dc7c3364033a4d"
+  integrity sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
   dependencies:
     d3-color "1 - 3"
 
-d3-scale@^4.0.2:
+"d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-scale-chromatic@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
+  integrity sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4, d3-scale@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -3170,31 +3261,38 @@ d3-scale@^4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-d3-selection@3, d3-selection@^3.0.0:
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
-"d3-time-format@2 - 4":
+d3-shape@3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4", d3-time-format@4:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
     d3-time "1 - 3"
 
-"d3-time@1 - 3", "d3-time@2.1.1 - 3":
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
   dependencies:
     d3-array "2 - 3"
 
-"d3-timer@1 - 3":
+"d3-timer@1 - 3", d3-timer@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
   integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
 
-d3-transition@3:
+"d3-transition@2 - 3", d3-transition@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
   integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
@@ -3205,6 +3303,53 @@ d3-transition@3:
     d3-interpolate "1 - 3"
     d3-timer "1 - 3"
 
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.9.0:
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.9.0.tgz#579e7acb3d749caf8860bd1741ae8d371070cd5d"
+  integrity sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
 date-fns@^2.29.1:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
@@ -3293,6 +3438,13 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delaunator@5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
+  dependencies:
+    robust-predicates "^3.0.2"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -4461,7 +4613,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3, iconv-lite@^0.6.2:
+iconv-lite@0.6, iconv-lite@0.6.3, iconv-lite@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -6507,6 +6659,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rollup@^4.2.0:
   version "4.9.6"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.6.tgz#4515facb0318ecca254a2ee1315e22e09efc50a0"
@@ -6536,6 +6693,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs@^7.0.0, rxjs@^7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"

From de5a910f50b235106215907139f95b1f38971caf Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 17:45:57 -0700
Subject: [PATCH 05/10] feat: show the values with dot

---
 frontend/src/lib/Dot.svelte             | 24 ++++++++
 frontend/src/lib/SimilarProteins.svelte | 76 +++++++++++++++++--------
 2 files changed, 77 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/lib/Dot.svelte

diff --git a/frontend/src/lib/Dot.svelte b/frontend/src/lib/Dot.svelte
new file mode 100644
index 00000000..ecf185d1
--- /dev/null
+++ b/frontend/src/lib/Dot.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let maxColor: string;
+	export let normalizedValue: number;
+	export let diameter: number;
+	const radius = diameter / 2;
+</script>
+
+<div>
+	<svg width={diameter} height={diameter}>
+		<circle
+			cx={radius}
+			cy={radius}
+			r={radius}
+			opacity={normalizedValue}
+			fill={maxColor}
+		/>
+	</svg>
+</div>
+
+<style>
+	circle {
+		transition: opacity ease-in-out 400ms;
+	}
+</style>
diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index 6815744c..3bbf89db 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -5,16 +5,20 @@
 	import { Backend, type SimilarProtein } from "../lib/backend";
 	import { undoFormatProteinName } from "./format";
 	import AlignBlock from "./AlignBlock.svelte";
+	import Dot from "./Dot.svelte";
 
 	export let queryProteinName: string;
 	export let length: number;
 
 	let similarProteins: SimilarProtein[] = [];
+	let maxEvalue: number;
 	onMount(async () => {
 		try {
 			similarProteins =
 				await Backend.searchVenomeSimilar(queryProteinName);
-			console.log(similarProteins);
+			maxEvalue = similarProteins
+				? Math.max(...similarProteins.map((p) => p.evalue))
+				: 0;
 		} catch (e) {
 			console.error(e);
 			console.error(
@@ -28,37 +32,63 @@
 	<table>
 		<tr>
 			<th> Name </th>
-			<th> Probability Match</th>
 			<th> E-Value </th>
-			<th> Alignment Coverage </th>
-			<th> TMAlign</th>
+			<th> Prob. Match</th>
+			<th> Alignment Region </th>
+			<th> TMAlign Superimpose 3D</th>
 		</tr>
 		{#each similarProteins as protein, i}
 			<tr class="pdb-row">
 				<td>
-					<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
-					<a href="/protein/{protein.name}">
-						{undoFormatProteinName(protein.name)}
-						<ArrowUpRightFromSquareOutline size="sm" />
-					</a>
+					<div class="name-cell">
+						<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
+						<a href="/protein/{protein.name}">
+							{undoFormatProteinName(protein.name)}
+							<ArrowUpRightFromSquareOutline size="sm" />
+						</a>
+					</div>
+				</td>
+				<td>
+					<div class="evalue-cell flex gap-2 items-center">
+						<Dot
+							diameter={10}
+							maxColor="var(--primary-700)"
+							normalizedValue={protein.evalue / maxEvalue}
+						/>
+						<code>{protein.evalue.toExponential()}</code>
+					</div>
 				</td>
-				<td><code>{protein.prob}</code></td>
-				<td><code>{protein.evalue.toExponential()}</code></td>
 				<td
-					><AlignBlock
-						width={200}
-						height={20}
-						ogLength={length}
-						qstart={protein.qstart}
-						qend={protein.qend}
-					/>
+					><div class="prob-cell flex gap-2 items-center">
+						<Dot
+							diameter={10}
+							maxColor="var(--primary-700)"
+							normalizedValue={protein.prob}
+						/>
+						<code>{protein.prob}</code>
+					</div></td
+				>
+				<td>
+					<div class="align-cell">
+						<AlignBlock
+							width={200}
+							height={20}
+							ogLength={length}
+							qstart={protein.qstart}
+							qend={protein.qend}
+						/>
+					</div>
 				</td>
 				<td>
-					<a
-						use:link
-						href="/compare/{queryProteinName}/{protein.name}"
-						>Compare <ArrowUpRightFromSquareOutline size="sm" /></a
-					>
+					<div class="compare-cell">
+						<a
+							use:link
+							href="/compare/{queryProteinName}/{protein.name}"
+							>Compare <ArrowUpRightFromSquareOutline
+								size="sm"
+							/></a
+						>
+					</div>
 				</td>
 			</tr>
 		{/each}

From 9f4628a797ec570f25a2e78a7109b3c964e7b7fd Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 18:05:49 -0700
Subject: [PATCH 06/10] feat: style the table reactively

---
 frontend/src/lib/SimilarProteins.svelte | 34 ++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index 3bbf89db..b180c01e 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -31,11 +31,11 @@
 <div style="max-height: 300px; overflow-y: scroll;">
 	<table>
 		<tr>
-			<th> Name </th>
-			<th> E-Value </th>
-			<th> Prob. Match</th>
-			<th> Alignment Region </th>
-			<th> TMAlign Superimpose 3D</th>
+			<th class="name-cell"> Name </th>
+			<th class="evalue-cell"> E-Value </th>
+			<th class="prob-cell"> Prob. Match</th>
+			<th class="align-cell"> Alignment Region </th>
+			<th class="compare-cell">TMAlign</th>
 		</tr>
 		{#each similarProteins as protein, i}
 			<tr class="pdb-row">
@@ -71,7 +71,7 @@
 				<td>
 					<div class="align-cell">
 						<AlignBlock
-							width={200}
+							width={260}
 							height={20}
 							ogLength={length}
 							qstart={protein.qstart}
@@ -105,6 +105,10 @@
 	th {
 		font-weight: 500;
 		text-align: left;
+		position: sticky;
+		top: 0;
+		background-color: white;
+		color: var(--primary-700);
 	}
 	.pdb-row {
 		background-color: hsl(var(--darkblue-hsl), 0.04);
@@ -139,4 +143,22 @@
 	::-webkit-scrollbar-thumb:hover {
 		background: #555;
 	}
+
+	.name-cell {
+		width: 250px;
+	}
+	.evalue-cell {
+		width: 150px;
+	}
+	.prob-cell {
+		width: 120px;
+	}
+	.align-cell {
+		width: 320px;
+		padding-left: 10px;
+		padding-right: 50px;
+	}
+	.compare-cell {
+		width: 100px;
+	}
 </style>

From c11fef3e9a723948e4ff2f27d19ad4029db11738 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 18:29:20 -0700
Subject: [PATCH 07/10] feat: use accordian and consider false to start

---
 frontend/src/lib/DelayedSpinner.svelte  |   7 +-
 frontend/src/lib/SimilarProteins.svelte | 144 +++++++++++++-----------
 frontend/src/routes/Protein.svelte      |  21 ++--
 3 files changed, 97 insertions(+), 75 deletions(-)

diff --git a/frontend/src/lib/DelayedSpinner.svelte b/frontend/src/lib/DelayedSpinner.svelte
index beeacbcf..58da1461 100644
--- a/frontend/src/lib/DelayedSpinner.svelte
+++ b/frontend/src/lib/DelayedSpinner.svelte
@@ -4,6 +4,7 @@
 	export let msDelay = 500;
 	export let spinnerProps = {};
 	export let text = "";
+	export let textRight = false;
 
 	let showSpinner = false;
 
@@ -15,5 +16,9 @@
 </script>
 
 {#if showSpinner}
-	{text} <Spinner {...spinnerProps} />
+	{#if textRight}
+		<Spinner {...spinnerProps} /> {text}
+	{:else}
+		{text} <Spinner {...spinnerProps} />
+	{/if}
 {/if}
diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index b180c01e..c018f323 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -6,11 +6,13 @@
 	import { undoFormatProteinName } from "./format";
 	import AlignBlock from "./AlignBlock.svelte";
 	import Dot from "./Dot.svelte";
+	import DelayedSpinner from "./DelayedSpinner.svelte";
 
 	export let queryProteinName: string;
 	export let length: number;
 
-	let similarProteins: SimilarProtein[] = [];
+	let similarProteins: SimilarProtein[];
+	let errorEncountered = false;
 	let maxEvalue: number;
 	onMount(async () => {
 		try {
@@ -24,76 +26,86 @@
 			console.error(
 				"NEED TO DOWNLOAD FOLDSEEK IN THE SERVER. SEE THE SERVER ERROR MESSAGE."
 			);
+			errorEncountered = true;
 		}
 	});
 </script>
 
-<div style="max-height: 300px; overflow-y: scroll;">
-	<table>
-		<tr>
-			<th class="name-cell"> Name </th>
-			<th class="evalue-cell"> E-Value </th>
-			<th class="prob-cell"> Prob. Match</th>
-			<th class="align-cell"> Alignment Region </th>
-			<th class="compare-cell">TMAlign</th>
-		</tr>
-		{#each similarProteins as protein, i}
-			<tr class="pdb-row">
-				<td>
-					<div class="name-cell">
-						<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
-						<a href="/protein/{protein.name}">
-							{undoFormatProteinName(protein.name)}
-							<ArrowUpRightFromSquareOutline size="sm" />
-						</a>
-					</div>
-				</td>
-				<td>
-					<div class="evalue-cell flex gap-2 items-center">
-						<Dot
-							diameter={10}
-							maxColor="var(--primary-700)"
-							normalizedValue={protein.evalue / maxEvalue}
-						/>
-						<code>{protein.evalue.toExponential()}</code>
-					</div>
-				</td>
-				<td
-					><div class="prob-cell flex gap-2 items-center">
-						<Dot
-							diameter={10}
-							maxColor="var(--primary-700)"
-							normalizedValue={protein.prob}
-						/>
-						<code>{protein.prob}</code>
-					</div></td
-				>
-				<td>
-					<div class="align-cell">
-						<AlignBlock
-							width={260}
-							height={20}
-							ogLength={length}
-							qstart={protein.qstart}
-							qend={protein.qend}
-						/>
-					</div>
-				</td>
-				<td>
-					<div class="compare-cell">
-						<a
-							use:link
-							href="/compare/{queryProteinName}/{protein.name}"
-							>Compare <ArrowUpRightFromSquareOutline
-								size="sm"
-							/></a
-						>
-					</div>
-				</td>
+{#if similarProteins === undefined && !errorEncountered}
+	<DelayedSpinner
+		text="Computing Foldseek on the entire Venome Database..."
+		textRight
+	/>
+{:else if similarProteins !== undefined}
+	<div style="max-height: 300px; overflow-y: scroll;">
+		<table>
+			<tr>
+				<th class="name-cell"> Name </th>
+				<th class="evalue-cell"> E-Value </th>
+				<th class="prob-cell"> Prob. Match</th>
+				<th class="align-cell"> Alignment Region </th>
+				<th class="compare-cell">TMAlign</th>
 			</tr>
-		{/each}
-	</table>
-</div>
+			{#each similarProteins as protein, i}
+				<tr class="pdb-row">
+					<td>
+						<div class="name-cell">
+							<!-- TODO: figure out how to make this a simple route instead of reloading the entire page -->
+							<a href="/protein/{protein.name}">
+								{undoFormatProteinName(protein.name)}
+								<ArrowUpRightFromSquareOutline size="sm" />
+							</a>
+						</div>
+					</td>
+					<td>
+						<div class="evalue-cell flex gap-2 items-center">
+							<Dot
+								diameter={10}
+								maxColor="var(--primary-700)"
+								normalizedValue={protein.evalue / maxEvalue}
+							/>
+							<code>{protein.evalue.toExponential()}</code>
+						</div>
+					</td>
+					<td
+						><div class="prob-cell flex gap-2 items-center">
+							<Dot
+								diameter={10}
+								maxColor="var(--primary-700)"
+								normalizedValue={protein.prob}
+							/>
+							<code>{protein.prob}</code>
+						</div></td
+					>
+					<td>
+						<div class="align-cell">
+							<AlignBlock
+								width={260}
+								height={20}
+								ogLength={length}
+								qstart={protein.qstart}
+								qend={protein.qend}
+							/>
+						</div>
+					</td>
+					<td>
+						<div class="compare-cell">
+							<a
+								use:link
+								href="/compare/{queryProteinName}/{protein.name}"
+								>Compare <ArrowUpRightFromSquareOutline
+									size="sm"
+								/></a
+							>
+						</div>
+					</td>
+				</tr>
+			{/each}
+		</table>
+	</div>
+{:else}
+	Error in the in the backend. Please contact admins.
+{/if}
 
 <style>
 	table {
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index dc7cdc27..ed171184 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -16,6 +16,7 @@
 	import SimilarProteins from "../lib/SimilarProteins.svelte";
 	import DelayedSpinner from "../lib/DelayedSpinner.svelte";
 	import { user } from "../lib/stores/user";
+	import { AccordionItem, Accordion } from "flowbite-svelte";
 
 	const fileDownloadDropdown = ["pdb", "fasta"];
 
@@ -60,14 +61,18 @@
 					<b>Mass (Da)</b>
 					<div><code>{numberWithCommas(entry.mass)}</code></div>
 				</div>
-				<div>
-					<b>Structurally Similar Proteins</b>
-					{#if entry.name}
-						<SimilarProteins
-							queryProteinName={entry.name}
-							length={entry.length}
-						/>
-					{/if}
+				<div class="mt-3">
+					<Accordion>
+						<AccordionItem open>
+							<span slot="header" style="font-size: 18px;"
+								>Foldseek Similar Venome Proteins</span
+							>
+							<SimilarProteins
+								queryProteinName={entry.name}
+								length={entry.length}
+							/>
+						</AccordionItem>
+					</Accordion>
 				</div>
 			</EntryCard>
 

From fd0208feba0faedbd975d96fb6bdbf487454fc71 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 20:18:09 -0700
Subject: [PATCH 08/10] feat: by default have it not open

---
 frontend/src/routes/Protein.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index ed171184..ca7fe342 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -63,9 +63,12 @@
 				</div>
 				<div class="mt-3">
 					<Accordion>
-						<AccordionItem open>
+						<AccordionItem>
 							<span slot="header" style="font-size: 18px;"
-								>Foldseek Similar Venome Proteins</span
+								>3D Similar Proteins <span
+									style="font-weight: 300; font-size: 15px;"
+									>(click to compute)</span
+								></span
 							>
 							<SimilarProteins
 								queryProteinName={entry.name}

From 637f42a885ec27c75102ffdfa907bfe1e6b5ca3d Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 20:30:14 -0700
Subject: [PATCH 09/10] fix: styling

---
 frontend/src/lib/SimilarProteins.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index c018f323..dfd79269 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -35,9 +35,10 @@
 	<DelayedSpinner
 		text="Computing Foldseek on the entire Venome Database..."
 		textRight
+		msDelay={0}
 	/>
 {:else if similarProteins !== undefined}
-	<div style="max-height: 300px; overflow-y: scroll;">
+	<div style="max-height: 300px; overflow-y: scroll; overflow-x: hidden;">
 		<table>
 			<tr>
 				<th class="name-cell"> Name </th>

From 559f209a086ac61c85c72ffd02a7463e4ace4c1a Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 4 Apr 2024 21:03:54 -0700
Subject: [PATCH 10/10] fix: change column name

---
 frontend/src/lib/SimilarProteins.svelte | 6 +++---
 frontend/src/routes/Protein.svelte      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
index dfd79269..e4e3acd5 100644
--- a/frontend/src/lib/SimilarProteins.svelte
+++ b/frontend/src/lib/SimilarProteins.svelte
@@ -44,7 +44,7 @@
 				<th class="name-cell"> Name </th>
 				<th class="evalue-cell"> E-Value </th>
 				<th class="prob-cell"> Prob. Match</th>
-				<th class="align-cell"> Alignment Region </th>
+				<th class="align-cell"> Region of Similarity </th>
 				<th class="compare-cell">TMAlign</th>
 			</tr>
 			{#each similarProteins as protein, i}
@@ -167,9 +167,9 @@
 		width: 120px;
 	}
 	.align-cell {
-		width: 320px;
+		width: 290px;
 		padding-left: 10px;
-		padding-right: 50px;
+		padding-right: 30px;
 	}
 	.compare-cell {
 		width: 100px;
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index ca7fe342..4c8d98db 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -67,7 +67,7 @@
 							<span slot="header" style="font-size: 18px;"
 								>3D Similar Proteins <span
 									style="font-weight: 300; font-size: 15px;"
-									>(click to compute)</span
+									>(click to compute with Foldseek)</span
 								></span
 							>
 							<SimilarProteins