From c099aa2165b3543c39d1adf0b7171f6d629c88b4 Mon Sep 17 00:00:00 2001
From: xnought <bertuccd@oregonstate.edu>
Date: Thu, 18 Apr 2024 16:28:30 -0700
Subject: [PATCH] feat: show legend

---
 frontend/src/lib/venomeMolstarUtils.ts |  3 ++-
 frontend/src/routes/Protein.svelte     | 28 +++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/venomeMolstarUtils.ts b/frontend/src/lib/venomeMolstarUtils.ts
index 5ac4e92..e9c2ad5 100644
--- a/frontend/src/lib/venomeMolstarUtils.ts
+++ b/frontend/src/lib/venomeMolstarUtils.ts
@@ -107,7 +107,8 @@ export function colorResidues({
 	return selections;
 }
 
-const alphafoldColorscheme = [
+export const alphafoldThresholds = ["> 90", "> 70", "> 50", "< 50"];
+export const alphafoldColorscheme = [
 	"rgb(1,83,214)", // > 90
 	"rgb(100,203,243)", // > 70
 	"rgb(255,219,18)", // > 50
diff --git a/frontend/src/routes/Protein.svelte b/frontend/src/routes/Protein.svelte
index abd692d..4087ea1 100644
--- a/frontend/src/routes/Protein.svelte
+++ b/frontend/src/routes/Protein.svelte
@@ -21,7 +21,11 @@
 	import DelayedSpinner from "../lib/DelayedSpinner.svelte";
 	import { user } from "../lib/stores/user";
 	import { AccordionItem, Accordion } from "flowbite-svelte";
-	import { pLDDTToAlphaFoldResidueColors } from "../lib/venomeMolstarUtils";
+	import {
+		pLDDTToAlphaFoldResidueColors,
+		alphafoldColorscheme,
+		alphafoldThresholds,
+	} from "../lib/venomeMolstarUtils";
 	import type { ChainColors } from "../lib/venomeMolstarUtils";
 
 	const fileDownloadDropdown = ["pdb", "fasta"];
@@ -189,6 +193,16 @@
 						>
 							Color by pLDDT</Button
 						>
+						{#if Object.keys(chainColors).length > 0}
+							{#each alphafoldThresholds as at, i}
+								<div
+									class="legend-chip"
+									style="--color: {alphafoldColorscheme[i]};"
+								>
+									{at}
+								</div>
+							{/each}
+						{/if}
 					</div>
 				</EntryCard>
 			</div>
@@ -215,4 +229,16 @@
 		font-weight: 500;
 		color: var(--primary-700);
 	}
+	.legend-chip {
+		--color: black;
+		color: rgb(0, 0, 0);
+		background-color: var(--color);
+		border-radius: 3px;
+		font-size: 12px;
+
+		padding-left: 5px;
+		padding-right: 5px;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
 </style>