feat: connect to frontend

backend/src/api/similar.py

@@ -10,15 +10,15 @@
 
 
 @router.get("/similar-pdb/{protein_name:str}", response_model=list[SimilarProtein])
-def get_pdb_proteins(protein_name: str):
+def get_similar_pdb(protein_name: str):
  query_name = pdb_file_name(protein_name)
  PDB = create_db("PDB", "pdb")
  similar = easy_search(query_name, PDB, out_format=["target", "prob"])
  return [SimilarProtein(name=s[0].split(".")[0], prob=s[1]) for s in similar]
 
 
 @router.get("/similar-venome/{protein_name:str}", response_model=list[SimilarProtein])
-def get_venome_proteins(protein_name: str):
+def get_similar_venome(protein_name: str):
  query_name = pdb_file_name(protein_name)
  target_folder = "src/data/pdbAlphaFold/"
  similar = easy_search(query_name, target_folder, out_format=["target", "prob"])

frontend/src/lib/SimilarProteins.svelte

@@ -1,61 +1,47 @@
 <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 similarProteins: any[] = [];
+ let similarProteins: SimilarProtein[] = [];
  onMount(async () => {
- similarProteins = await similarPDBProteins(queryProteinName);
+ similarProteins = await Backend.getSimilarPdb(queryProteinName);
  });
-
- async function similarPDBProteins(queryProteinName: string) {
- // TODO: QUERY TO BACKEND WITH ACTUAL CALL INSTEAD OF MOCK DATA
- const similarExternalProteins = [
- {
- source: "pdb",
- link: "https://www.rcsb.org/structure/1A0S",
- name: "1A0S",
- prob: 0.99,
- },
- {
- source: "pdb",
- link: "https://www.rcsb.org/structure/1A0S",
- name: "1A0S",
- prob: 0.99,
- },
- {
- source: "pdb",
- link: "https://www.rcsb.org/structure/1A0S",
- name: "1A0S",
- prob: 0.99,
- },
- ];
-
- return similarExternalProteins;
- }
 </script>
 
 <table>
- <tr>
- <th> Source </th>
- <th> Name </th>
- <th> Desc. </th>
- <th> Prob. </th>
- </tr>
- {#each similarProteins as protein}
- <tr class="pdb-row">
- <td>
- <a href={protein.link}
- ><LinkOutline size="sm" /> {protein.source.toUpperCase()}</a
- >
- </td>
- <td>{protein.name}</td>
- <td class="pdb-desc">DEscDEscDEscDEsc DEscDEsc DEsc DEsc </td>
- <td>{protein.prob}</td>
+ {#if similarProteins.length > 0}
+ <tr>
+ <th> Source </th>
+ <th> Desc. </th>
+ <th> Prob. </th>
  </tr>
- {/each}
- <span class="text-gray-400 cursor-pointer">... click to see more</span>
+ {#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>
+ </tr>
+ {/each}
+ {#if similarProteins.length > showing}
+ <div class="text-gray-400 cursor-pointer" on:click={() => (showing += 5)}>
+ ... click to see more
+ </div>
+ {/if}
+ {:else}
+ Computing Similar PDB proteins w/ Foldseek <Spinner />
+ {/if}
 </table>
 
 <style>

frontend/src/openapi/index.ts

@@ -13,6 +13,7 @@ export type { LoginBody } from './models/LoginBody';
 export { LoginError } from './models/LoginError';
 export type { ProteinEntry } from './models/ProteinEntry';
 export type { ResponseToken } from './models/ResponseToken';
+export type { SimilarProtein } from './models/SimilarProtein';
 export type { UploadBody } from './models/UploadBody';
 export { UploadError } from './models/UploadError';
 export type { ValidationError } from './models/ValidationError';

frontend/src/openapi/models/SimilarProtein.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type SimilarProtein = {
+ name: string;
+ prob: number;
+};
+

frontend/src/openapi/services/DefaultService.ts

@@ -7,6 +7,7 @@ import type { LoginBody } from '../models/LoginBody';
 import type { LoginError } from '../models/LoginError';
 import type { ProteinEntry } from '../models/ProteinEntry';
 import type { ResponseToken } from '../models/ResponseToken';
+import type { SimilarProtein } from '../models/SimilarProtein';
 import type { UploadBody } from '../models/UploadBody';
 import type { UploadError } from '../models/UploadError';
 
@@ -36,6 +37,48 @@ export class DefaultService {
  });
  }
 
+ /**
+ * Get Similar Pdb
+ * @param proteinName
+ * @returns SimilarProtein Successful Response
+ * @throws ApiError
+ */
+ public static getSimilarPdb(
+ proteinName: string,
+ ): CancelablePromise<Array<SimilarProtein>> {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/similar-pdb/{protein_name}',
+ path: {
+ 'protein_name': proteinName,
+ },
+ errors: {
+ 422: `Validation Error`,
+ },
+ });
+ }
+
+ /**
+ * Get Similar Venome
+ * @param proteinName
+ * @returns SimilarProtein Successful Response
+ * @throws ApiError
+ */
+ public static getSimilarVenome(
+ proteinName: string,
+ ): CancelablePromise<Array<SimilarProtein>> {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/similar-venome/{protein_name}',
+ path: {
+ 'protein_name': proteinName,
+ },
+ errors: {
+ 422: `Validation Error`,
+ },
+ });
+ }
+
  /**
  * Get Pdb File
  * @param proteinName