feat: separate pdb and venome search into two tables

Venom-Biochem-Lab · Feb 1, 2024 · b99c94d · b99c94d
1 parent 22f0923
commit b99c94d
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 31 deletions.
diff --git a/frontend/src/lib/SimilarProteins.svelte b/frontend/src/lib/SimilarProteins.svelte
@@ -8,41 +8,49 @@
  export let queryProteinName: string;
  let showing = 5;
 
- let similarProteins: SimilarProtein[] = [];
+ let similar: SimilarProtein[];
  onMount(async () => {
- similarProteins = await Backend.getSimilarPdb(queryProteinName);
+ similar = await Backend.getSimilarVenome(queryProteinName);
  });
 </script>
 
-<table>
- {#if similarProteins.length > 0}
- <tr>
- <th> Source </th>
- <th> Desc. </th>
- <th> Prob. </th>
- </tr>
- {#each { length: Math.min(showing, similarProteins.length) } as _, i}
- {@const protein = similarProteins[i]}
- {@const pdbId = protein.name.toUpperCase()}
- <tr class="pdb-row">
- <td>
- <a href="https://www.rcsb.org/structure/{pdbId}"
- ><LinkOutline size="sm" />PDB:{pdbId}</a
- >
- </td>
- <td class="pdb-desc">DEscDEscDEscDEsc DEscDEsc DEsc DEsc </td>
- <td>{protein.prob}</td>
+{#if similar}
+ {#if similar.length > 0}
+ <table>
+ <tr>
+ <th> Source </th>
+ <th> Desc. </th>
+ <th> Prob. </th>
  </tr>
- {/each}
- {#if similarProteins.length > showing}
- <div class="text-gray-400 cursor-pointer" on:click={() => (showing += 5)}>
- ... click to see more
- </div>
- {/if}
+ {#each { length: Math.min(showing, similar.length) } as _, i}
+ {@const protein = similar[i]}
+ <tr class="pdb-row">
+ <td>
+ <a href="/protein/{protein.name}" target="_blank"
+ ><LinkOutline size="sm" />VENOME:{protein.name}</a
+ >
+ </td>
+ <td class="pdb-desc">DEscDEscDEscDEsc DEscDEsc DEsc DEsc </td>
+ <td>{protein.prob}</td>
+ </tr>
+ {/each}
+ {#if similar.length > showing}
+ <div
+ class="text-gray-400 cursor-pointer"
+ on:click={() => (showing += 5)}
+ >
+ ... click to see more
+ </div>
+ {/if}
+ </table>
  {:else}
- Computing Similar PDB proteins w/ Foldseek <Spinner />
+ <div>None Found</div>
  {/if}
-</table>
+{:else}
+ <div>
+ Computing Similar Venome proteins w/ Foldseek <Spinner />
+ </div>
+{/if}
 
 <style>
  table {
@@ -56,7 +64,7 @@
  text-align: left;
  }
  .pdb-row {
- background-color: hsl(var(--lightorange-hsl), 0.11);
+ background-color: hsl(var(--darkblue-hsl), 0.11);
  }
  .pdb-desc {
  min-width: 70px;
@@ -66,7 +74,7 @@
  overflow: hidden;
  }
  a {
- color: var(--lightorange);
+ color: var(--darkblue);
  display: flex;
  gap: 1px;
  align-items: center;

diff --git a/frontend/src/lib/SimilarProteinsPDB.svelte b/frontend/src/lib/SimilarProteinsPDB.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+ import { LinkOutline } from "flowbite-svelte-icons";
+ import { onMount } from "svelte";
+ import { Backend } from "$lib/backend";
+ import type { SimilarProtein } from "$lib/backend";
+ import { Spinner } from "flowbite-svelte";
+
+ export let queryProteinName: string;
+ let showing = 5;
+
+ let similarPdb: SimilarProtein[];
+ onMount(async () => {
+ similarPdb = await Backend.getSimilarPdb(queryProteinName);
+ });
+</script>
+
+{#if similarPdb}
+ {#if similarPdb.length > 0}
+ <table>
+ <tr>
+ <th> Source </th>
+ <th> Desc. </th>
+ <th> Prob. </th>
+ </tr>
+ {#each { length: Math.min(showing, similarPdb.length) } as _, i}
+ {@const protein = similarPdb[i]}
+ {@const pdbId = protein.name.toUpperCase()}
+ <tr class="pdb-row">
+ <td>
+ <a href="https://www.rcsb.org/structure/{pdbId}" target="_blank"
+ ><LinkOutline size="sm" />PDB:{pdbId}</a
+ >
+ </td>
+ <td class="pdb-desc">DEscDEscDEscDEsc DEscDEsc DEsc DEsc </td>
+ <td>{protein.prob}</td>
+ </tr>
+ {/each}
+ {#if similarPdb.length > showing}
+ <div
+ class="text-gray-400 cursor-pointer"
+ on:click={() => (showing += 5)}
+ >
+ ... click to see more
+ </div>
+ {/if}
+ </table>
+ {:else}
+ <div>None found</div>
+ {/if}
+{:else}
+ <div>Computing Similar PDB proteins w/ Foldseek <Spinner /></div>
+{/if}
+
+<style>
+ table {
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: separate; /* Add this line */
+ border-spacing: 0 5px; /* Adjust as needed */
+ }
+ th {
+ font-weight: 500;
+ text-align: left;
+ }
+ .pdb-row {
+ background-color: hsl(var(--lightorange-hsl), 0.11);
+ }
+ .pdb-desc {
+ min-width: 70px;
+ max-width: 70px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ a {
+ color: var(--lightorange);
+ display: flex;
+ gap: 1px;
+ align-items: center;
+ }
+</style>
diff --git a/frontend/src/routes/protein/[proteinName]/+page.svelte b/frontend/src/routes/protein/[proteinName]/+page.svelte
@@ -16,6 +16,7 @@
  import { ChevronDownSolid, PenOutline } from "flowbite-svelte-icons";
  import EntryCard from "$lib/EntryCard.svelte";
  import SimilarProteins from "$lib/SimilarProteins.svelte";
+ import SimilarProteinsPdb from "$lib/SimilarProteinsPDB.svelte";
 
  const fileDownloadDropdown = ["pdb", "fasta"];
 
@@ -58,9 +59,17 @@
  <div><code>{numberWithCommas(entry.mass)}</code></div>
  </div>
  <div>
- <b>Structurally Similar Proteins</b>
+ <b>Structurally Similar Venome Proteins</b>
  <SimilarProteins queryProteinName={entry.name} />
  </div>
+ <div>
+ <b
+ >Structurally Similar <a href="https://www.rcsb.org/"
+ >Protein Data Bank</a
+ > Proteins</b
+ >
+ <SimilarProteinsPdb queryProteinName={entry.name} />
+ </div>
  </EntryCard>
 
  <!-- Article / Wiki entry -->