feat: restyle foldseek table with more info

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

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

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"

frontend/src/app.pcss

@@ -82,7 +82,7 @@ p {
 }
 
 a {
- color: var(--lightblue);
+ color: var(--primary-600);
 }
 
 a:hover {

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>

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}

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>

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>