feat: show legend

Venom-Biochem-Lab · Apr 18, 2024 · c099aa2 · c099aa2
1 parent d735b28
commit c099aa2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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>