From 989728ea2cbd28567a2e1ae7d20991b44e02c895 Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 12:35:49 -0800 Subject: [PATCH 1/9] fix: rename as search --- .../{searchtest => search}/[query]/+page.svelte | 14 +++++++------- .../routes/{searchtest => search}/[query]/+page.ts | 0 2 files changed, 7 insertions(+), 7 deletions(-) rename frontend/src/routes/{searchtest => search}/[query]/+page.svelte (89%) rename frontend/src/routes/{searchtest => search}/[query]/+page.ts (100%) diff --git a/frontend/src/routes/searchtest/[query]/+page.svelte b/frontend/src/routes/search/[query]/+page.svelte similarity index 89% rename from frontend/src/routes/searchtest/[query]/+page.svelte rename to frontend/src/routes/search/[query]/+page.svelte index 6f9a1623..b9570991 100644 --- a/frontend/src/routes/searchtest/[query]/+page.svelte +++ b/frontend/src/routes/search/[query]/+page.svelte @@ -18,13 +18,13 @@ export let data; // at some point, this should be change to request from the backend - let allEntries: ProteinEntry[] | null = null; + let searchedEntries: ProteinEntry[] | null = null; onMount(async () => { console.log("Requesting", data.query, "info from backend"); // calls get_all_entries() from backend // to generate this Backend object run `./run.sh gen_api` for newly created server functions - allEntries = await Backend.searchEntries(data.query); - console.log(allEntries); + searchedEntries = await Backend.searchEntries(data.query); + console.log(searchedEntries); }); @@ -43,8 +43,8 @@ Mass (Da) - {#if allEntries} - {#each allEntries as entry} + {#if searchedEntries} + {#each searchedEntries as entry} { @@ -66,8 +66,8 @@
- {#if allEntries} - {#each allEntries as entry} + {#if searchedEntries} + {#each searchedEntries as entry} Date: Fri, 1 Dec 2023 12:46:03 -0800 Subject: [PATCH 2/9] refac: move search component out --- frontend/src/lib/ListProteins.svelte | 80 ++++++++++++++++ frontend/src/routes/+page.svelte | 95 +------------------ frontend/src/routes/Header.svelte | 2 +- frontend/src/routes/search/+page.svelte | 19 ++++ .../src/routes/search/[query]/+page.svelte | 90 +----------------- 5 files changed, 108 insertions(+), 178 deletions(-) create mode 100644 frontend/src/lib/ListProteins.svelte create mode 100644 frontend/src/routes/search/+page.svelte diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte new file mode 100644 index 00000000..a0b41c8c --- /dev/null +++ b/frontend/src/lib/ListProteins.svelte @@ -0,0 +1,80 @@ + + + + + + + Protein name + Length + Mass (Da) + + + {#if allEntries} + {#each allEntries as entry} + { + goto(`/protein/${entry.name}`); + }} + > + {humanReadableProteinName(entry.name)} + {entry.length} + {numberWithCommas(entry.mass)} + + {/each} + {/if} + +
+ + +
+ {#if allEntries} + {#each allEntries as entry} + goto(`/protein/${entry.name}`)} + > +
+ {humanReadableProteinName(entry.name)} +
+
+ Length: {entry.length}, Mass (Da): {numberWithCommas(entry.mass)} +
+ + {/each} + {/if} +
+ + + + diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index b38254ba..274bc84c 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,98 +1,9 @@ - - - Home - - -
- - - - - Protein name - Length - Mass (Da) - - - {#if allEntries} - {#each allEntries as entry} - { - goto(`/protein/${entry.name}`); - }} - > - {humanReadableProteinName(entry.name)} - {entry.length} - {numberWithCommas(entry.mass)} - - {/each} - {/if} - -
- - -
- {#if allEntries} - {#each allEntries as entry} - goto(`/protein/${entry.name}`)} - > -
- {humanReadableProteinName(entry.name)} -
-
- Length: {entry.length}, Mass (Da): {numberWithCommas( - entry.mass - )} -
- - {/each} - {/if} -
- - -
+
Landing Page
diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte index ba951f37..d99c4083 100644 --- a/frontend/src/routes/Header.svelte +++ b/frontend/src/routes/Header.svelte @@ -11,7 +11,7 @@
- Search + Search Upload
diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte new file mode 100644 index 00000000..a4b21402 --- /dev/null +++ b/frontend/src/routes/search/+page.svelte @@ -0,0 +1,19 @@ + + + + Search + + +
+ +
diff --git a/frontend/src/routes/search/[query]/+page.svelte b/frontend/src/routes/search/[query]/+page.svelte index b9570991..7025f02c 100644 --- a/frontend/src/routes/search/[query]/+page.svelte +++ b/frontend/src/routes/search/[query]/+page.svelte @@ -1,101 +1,21 @@ - - - Home + Search
- - - - - Protein name - Length - Mass (Da) - - - {#if searchedEntries} - {#each searchedEntries as entry} - { - goto(`/protein/${entry.name}`); - }} - > - {humanReadableProteinName(entry.name)} - {entry.length} - {numberWithCommas(entry.mass)} - - {/each} - {/if} - -
- - -
- {#if searchedEntries} - {#each searchedEntries as entry} - goto(`/protein/${entry.name}`)} - > -
- {humanReadableProteinName(entry.name)} -
-
- Length: {entry.length}, Mass (Da): {numberWithCommas( - entry.mass - )} -
- - {/each} - {/if} -
- - +
- - From d057b142a713d6629eb022cc79d43e96d1e23036 Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 13:12:24 -0800 Subject: [PATCH 3/9] feat: add search bar and remove alternative page --- frontend/src/routes/search/+page.svelte | 34 ++++++++++++++++++- .../src/routes/search/[query]/+page.svelte | 21 ------------ frontend/src/routes/search/[query]/+page.ts | 7 ---- 3 files changed, 33 insertions(+), 29 deletions(-) delete mode 100644 frontend/src/routes/search/[query]/+page.svelte delete mode 100644 frontend/src/routes/search/[query]/+page.ts diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte index a4b21402..0eeb0231 100644 --- a/frontend/src/routes/search/+page.svelte +++ b/frontend/src/routes/search/+page.svelte @@ -3,10 +3,21 @@ import { Backend } from "$lib/backend"; import type { ProteinEntry } from "$lib/backend"; import ListProteins from "$lib/ListProteins.svelte"; + import { Search, Button } from "flowbite-svelte"; + import { page } from "$app/stores"; + + let searchBy = ""; let allEntries: ProteinEntry[] | null = null; onMount(async () => { - allEntries = await Backend.getAllEntries(); + // if user provided a name like /search?name=abc, parse it + const name = $page.url.searchParams.get("name"); + if (name) { + searchBy = name; + allEntries = await Backend.searchEntries(searchBy); + } else { + allEntries = await Backend.getAllEntries(); + } }); @@ -15,5 +26,26 @@
+
{ + if (searchBy) { + allEntries = await Backend.searchEntries(searchBy); + } else { + allEntries = await Backend.getAllEntries(); + } + $page.url.searchParams.set("name", searchBy); // update url + }} + > + + +
diff --git a/frontend/src/routes/search/[query]/+page.svelte b/frontend/src/routes/search/[query]/+page.svelte deleted file mode 100644 index 7025f02c..00000000 --- a/frontend/src/routes/search/[query]/+page.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - - Search - - -
- -
diff --git a/frontend/src/routes/search/[query]/+page.ts b/frontend/src/routes/search/[query]/+page.ts deleted file mode 100644 index 1764b7d5..00000000 --- a/frontend/src/routes/search/[query]/+page.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * This scrapes the data from the route - * ie. /protein/your_mom -> { proteinName: "your_mom" } - */ -export function load({ params }) { - return { query: params.query }; -} From b7af9ecbdc55f0d5c3fc860f08a1fb8b558cb5e2 Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 13:35:49 -0800 Subject: [PATCH 4/9] feat: update url param for search too --- frontend/src/lib/format.ts | 34 +++++++++++++++++++++++++ frontend/src/routes/search/+page.svelte | 10 ++++---- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts index 93776499..697f5a2a 100644 --- a/frontend/src/lib/format.ts +++ b/frontend/src/lib/format.ts @@ -1,3 +1,6 @@ +import { goto } from "$app/navigation"; +import { writable } from "svelte/store"; + export function numberWithCommas(x: number, round = 0) { const formatter = new Intl.NumberFormat("en-US"); return formatter.format(+x.toFixed(round)); @@ -21,3 +24,34 @@ export function fileToString(f: File): Promise { reader.onerror = reject; }); } + +/** + * When I have a url parameter, I want to first set it to that + * Then, if the url parameter changes in svelte, I want to change the url in the browser parameter too + */ +export function writableUrlParams( + searchParams: URLSearchParams, + name: string +): Writable { + const param = writable(searchParams.get(name) ?? ""); + return { + subscribe: param.subscribe, + set(searchBy) { + searchParams.set(name, searchBy); // update url + goto(`?${searchParams.toString()}`, { + keepFocus: true, + replaceState: true, + noScroll: true, + }); // update browser top + }, + update() { + const searchBy = searchParams.get(name) ?? ""; + searchParams.set(name, searchBy); // update url + goto(`?${searchParams.toString()}`, { + keepFocus: true, + replaceState: true, + noScroll: true, + }); // update browser top + }, + }; +} diff --git a/frontend/src/routes/search/+page.svelte b/frontend/src/routes/search/+page.svelte index 0eeb0231..d2c87b71 100644 --- a/frontend/src/routes/search/+page.svelte +++ b/frontend/src/routes/search/+page.svelte @@ -5,15 +5,15 @@ import ListProteins from "$lib/ListProteins.svelte"; import { Search, Button } from "flowbite-svelte"; import { page } from "$app/stores"; + import { writableUrlParams } from "$lib/format"; - let searchBy = ""; + const nameSearch = writableUrlParams($page.url.searchParams, "name"); + let searchBy = $nameSearch; let allEntries: ProteinEntry[] | null = null; onMount(async () => { // if user provided a name like /search?name=abc, parse it - const name = $page.url.searchParams.get("name"); - if (name) { - searchBy = name; + if (searchBy) { allEntries = await Backend.searchEntries(searchBy); } else { allEntries = await Backend.getAllEntries(); @@ -32,10 +32,10 @@ on:submit={async () => { if (searchBy) { allEntries = await Backend.searchEntries(searchBy); + $nameSearch = searchBy; // update url param } else { allEntries = await Backend.getAllEntries(); } - $page.url.searchParams.set("name", searchBy); // update url }} > Date: Fri, 1 Dec 2023 13:36:20 -0800 Subject: [PATCH 5/9] fix: ts Writable --- frontend/src/lib/format.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts index 697f5a2a..44e3fa15 100644 --- a/frontend/src/lib/format.ts +++ b/frontend/src/lib/format.ts @@ -1,5 +1,5 @@ import { goto } from "$app/navigation"; -import { writable } from "svelte/store"; +import { writable, type Writable } from "svelte/store"; export function numberWithCommas(x: number, round = 0) { const formatter = new Intl.NumberFormat("en-US"); From b5cffa3eabaa921b2efe33e746b911a3a5b2cb01 Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 13:41:43 -0800 Subject: [PATCH 6/9] fix: remove underscore replacement --- backend/src/server.py | 5 ----- frontend/src/lib/ListProteins.svelte | 7 +++---- frontend/src/lib/format.ts | 8 -------- .../src/routes/edit/[proteinName]/+page.svelte | 16 ++++++---------- .../routes/protein/[proteinName]/+page.svelte | 6 +++--- frontend/src/routes/upload/+page.svelte | 4 ++-- 6 files changed, 14 insertions(+), 32 deletions(-) diff --git a/backend/src/server.py b/backend/src/server.py index f9f198ba..2729174b 100644 --- a/backend/src/server.py +++ b/backend/src/server.py @@ -113,8 +113,6 @@ def delete_protein_entry(protein_name: str): # None return means success @app.post("/protein-upload", response_model=UploadError | None) def upload_protein_entry(body: UploadBody): - body.name = body.name.replace(" ", "_") - # check that the name is not already taken in the DB if protein_name_taken(body.name): return UploadError.NAME_NOT_UNIQUE @@ -150,9 +148,6 @@ def upload_protein_entry(body: UploadBody): # TODO: add more edits, now only does name and content edits @app.put("/protein-edit", response_model=UploadError | None) def edit_protein_entry(body: EditBody): - body.new_name = body.new_name.replace(" ", "_") - body.old_name = body.old_name.replace(" ", "_") - # check that the name is not already taken in the DB # TODO: check if permission so we don't have people overriding other people's names diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte index a0b41c8c..50c7b437 100644 --- a/frontend/src/lib/ListProteins.svelte +++ b/frontend/src/lib/ListProteins.svelte @@ -1,7 +1,7 @@
@@ -101,7 +96,11 @@
- PDB + {#each fileDownloadDropdown as fileType} + {fileType.toUpperCase()} + {/each}
- +
{:else if !error} From 61a78bafde12ffe34bd0f6c93b8c882431507241 Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 14:29:33 -0800 Subject: [PATCH 8/9] feat: one central location for environment variables --- backend/src/server.py | 3 ++- docker-compose.yml | 3 +++ frontend/src/lib/backend.ts | 4 +++- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/backend/src/server.py b/backend/src/server.py index 469bd9a4..f7a3c40a 100644 --- a/backend/src/server.py +++ b/backend/src/server.py @@ -7,8 +7,9 @@ from .protein import parse_protein_pdb, pdb_file_name, protein_name_found, pdb_to_fasta from .setup import disable_cors, init_fastapi_app + app = init_fastapi_app() -disable_cors(app, origins=["http://0.0.0.0:5173", "http://localhost:5173"]) +disable_cors(app, origins=[os.environ["PUBLIC_FRONTEND_URL"]]) @app.get("/pdb/{protein_name:str}") diff --git a/docker-compose.yml b/docker-compose.yml index 4c517655..2877a16e 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -11,6 +11,8 @@ services: - docker_node_modules:/app/node_modules/ ports: - "5173:5173" + environment: + PUBLIC_BACKEND_URL: http://localhost:8000 command: ["yarn", "dev", "--", "--host", "0.0.0.0"] backend: container_name: venome-backend @@ -25,6 +27,7 @@ services: depends_on: - postgres environment: + PUBLIC_FRONTEND_URL: http://localhost:5173 BACKEND_HOST: 0.0.0.0 BACKEND_PORT: 8000 DB_HOST: postgres diff --git a/frontend/src/lib/backend.ts b/frontend/src/lib/backend.ts index b61f983a..2146c417 100644 --- a/frontend/src/lib/backend.ts +++ b/frontend/src/lib/backend.ts @@ -1,6 +1,8 @@ export * from "../openapi"; export { DefaultService as Backend } from "../openapi"; import { OpenAPI } from "../openapi"; +import { env } from "$env/dynamic/public"; -export const BACKEND_URL = "http://localhost:8000"; +export const BACKEND_URL = env["PUBLIC_BACKEND_URL"]; +if (!BACKEND_URL) throw new Error("PUBLIC_BACKEND_URL is not set in .env"); OpenAPI.BASE = BACKEND_URL; From 35dd5f042d3d9788ee5ad3fe01da52128f2fcd1d Mon Sep 17 00:00:00 2001 From: xnought Date: Fri, 1 Dec 2023 14:31:41 -0800 Subject: [PATCH 9/9] feat: auto go to the search url --- frontend/src/routes/+page.svelte | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 274bc84c..148b4855 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -1,7 +1,17 @@ + + Home + +
Landing Page