From 10b39f22969e81430059c8124b0d012b90dc84d4 Mon Sep 17 00:00:00 2001 From: xnought Date: Mon, 29 Apr 2024 18:06:59 -0700 Subject: [PATCH 1/6] fix: remove unused url params --- frontend/src/routes/Search.svelte | 125 ++++++++++++++---------------- 1 file changed, 60 insertions(+), 65 deletions(-) diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte index 3415e3e..628d323 100644 --- a/frontend/src/routes/Search.svelte +++ b/frontend/src/routes/Search.svelte @@ -6,8 +6,8 @@ import { Search, Button } from "flowbite-svelte"; import RangerFilter from "../lib/RangerFilter.svelte"; import DelayedSpinner from "../lib/DelayedSpinner.svelte"; - import app from "../main"; - import { navigate } from "svelte-routing"; + import app from "../main"; + import { navigate } from "svelte-routing"; let query = ""; let proteinEntries: ProteinEntry[]; @@ -18,28 +18,18 @@ let lengthExtent: { min: number; max: number }; let massFilter: { min: number; max: number } | undefined; let massExtent: { min: number; max: number }; - let filterResetCounter = 0; + let filterResetCounter = 0; - let urlParams = new URLSearchParams(window.location.search) - let proteinsPerPage = 20 // The number of proteins to show per page - let page = 0 + let proteinsPerPage = 20; // The number of proteins to show per page + let page = 0; onMount(async () => { - // Redirects user to ?page=1 if page query string not present - - /* - if (page == null) { - navigate('search?page=1') - } - console.log("Page is", page) - */ - await search(); species = await Backend.searchSpecies(); lengthExtent = await Backend.searchRangeLength(); massExtent = await Backend.searchRangeMass(); massFilter = massExtent; lengthFilter = lengthExtent; - console.log(page) + console.log(page); }); async function search() { @@ -48,23 +38,23 @@ speciesFilter, lengthFilter, massFilter, - proteinsPerPage, - page + proteinsPerPage, + page, }); proteinEntries = result.proteinEntries; totalFound = result.totalFound; } - async function searchAndResetPage() { - page = 0; - await search(); - } + async function searchAndResetPage() { + page = 0; + await search(); + } async function resetFilter() { speciesFilter = undefined; lengthFilter = lengthExtent; massFilter = massExtent; query = ""; - page = 0; - filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created + page = 0; + filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created await search(); } @@ -88,7 +78,7 @@ outline on:click={async () => { speciesFilter = s; - await searchAndResetPage(); + await searchAndResetPage(); }} > {s} @@ -100,32 +90,32 @@

Amino Acids Length

{#if lengthExtent && lengthFilter} - {#key filterResetCounter} - { - lengthFilter = detail; - await searchAndResetPage(); - }} - /> - {/key} + {#key filterResetCounter} + { + lengthFilter = detail; + await searchAndResetPage(); + }} + /> + {/key} {/if}

Mass (Da)

{#if massExtent && massFilter} - {#key filterResetCounter} - { - massFilter = detail; - await searchAndResetPage() - }} - /> - {/key} + {#key filterResetCounter} + { + massFilter = detail; + await searchAndResetPage(); + }} + /> + {/key} {/if}
@@ -152,19 +142,25 @@ {#if totalFound > 0 || page > 0}
- {#if totalFound == 1} - {totalFound} protein shown | - {:else} - {totalFound} proteins shown | - {/if} - | - + {#if totalFound == 1} + {totalFound} protein shown | + {:else} + {totalFound} proteins shown | + {/if} + | +
{/if} {#if proteinEntries === undefined} @@ -172,13 +168,12 @@ text="Fetching Proteins from the Venome DB..." textRight /> - {:else if proteinEntries.length === 0} - { #if page > 0 } - No more proteins found - {:else} - No proteins found - {/if} - + {:else if proteinEntries.length === 0} + {#if page > 0} + No more proteins found + {:else} + No proteins found + {/if} {:else} {/if} From 0e679f597355c43b71f5bd649e1d7244b3911751 Mon Sep 17 00:00:00 2001 From: xnought Date: Mon, 29 Apr 2024 18:07:20 -0700 Subject: [PATCH 2/6] fix: remove unused imports --- frontend/src/routes/Search.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte index 628d323..ad1b6d4 100644 --- a/frontend/src/routes/Search.svelte +++ b/frontend/src/routes/Search.svelte @@ -6,8 +6,6 @@ import { Search, Button } from "flowbite-svelte"; import RangerFilter from "../lib/RangerFilter.svelte"; import DelayedSpinner from "../lib/DelayedSpinner.svelte"; - import app from "../main"; - import { navigate } from "svelte-routing"; let query = ""; let proteinEntries: ProteinEntry[]; From 7a6b7bb503c4192625b9734e49fe14bacba7a1f6 Mon Sep 17 00:00:00 2001 From: xnought Date: Mon, 29 Apr 2024 18:14:02 -0700 Subject: [PATCH 3/6] fix: variable height for grid --- frontend/src/lib/ListProteins.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/lib/ListProteins.svelte b/frontend/src/lib/ListProteins.svelte index 5b604ed..86b40ae 100644 --- a/frontend/src/lib/ListProteins.svelte +++ b/frontend/src/lib/ListProteins.svelte @@ -99,7 +99,6 @@ flex-wrap: wrap; padding: 10px; margin-left: 10px; - height: calc(100vh - 100px); } .prot-info { width: 300px; From 5e683871ef89c9e4e13d10f9abc7bc2bd893b90f Mon Sep 17 00:00:00 2001 From: xnought Date: Mon, 29 Apr 2024 18:39:59 -0700 Subject: [PATCH 4/6] feat: show more instead of paginating --- frontend/src/routes/Search.svelte | 66 +++++++++++++++---------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte index ad1b6d4..c1c1f15 100644 --- a/frontend/src/routes/Search.svelte +++ b/frontend/src/routes/Search.svelte @@ -129,38 +129,18 @@
diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b4a5ab4..259aeb4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -7235,6 +7235,11 @@ svelte-hmr@^0.15.3: resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6" integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ== +svelte-infinite-loading@^1.3.8: + version "1.3.8" + resolved "https://registry.yarnpkg.com/svelte-infinite-loading/-/svelte-infinite-loading-1.3.8.tgz#c479938bd5ca69264fe591ffbbb013b368afe578" + integrity sha512-hn4o848LKd2Q+M11hiMWnfFxM1GHKVDi92HPZ1FYvfed4bEeRZL+QvFAQzhy1SACq6Si0CAJcQFUZpIYmAEnpQ== + svelte-preprocess@^5.1.0: version "5.1.3" resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz#7682239fe53f724c845b53026816fdfe15d028f9" From 2e7ada1e7d04756391279955679e110282116e99 Mon Sep 17 00:00:00 2001 From: xnought Date: Mon, 29 Apr 2024 19:18:50 -0700 Subject: [PATCH 6/6] feat: scroll top on reset --- frontend/src/routes/Search.svelte | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte index a897abf..3bb5ab4 100644 --- a/frontend/src/routes/Search.svelte +++ b/frontend/src/routes/Search.svelte @@ -19,7 +19,7 @@ let massFilter: { min: number; max: number } | undefined; let massExtent: { min: number; max: number }; let filterResetCounter = 0; - + let searchTop: HTMLFormElement; let proteinsPerPage = 20; // The number of proteins to show per page let page = 0; onMount(async () => { @@ -67,10 +67,12 @@ totalFound = result.totalFound; } async function searchAndResetPage() { + scrollTop(); page = 0; await search(); } async function resetFilter() { + scrollTop(); speciesFilter = undefined; lengthFilter = lengthExtent; massFilter = massExtent; @@ -79,6 +81,10 @@ filterResetCounter++; // Incrementing this so relevant components can be destroyed and re-created await search(); } + + function scrollTop() { + searchTop.scrollIntoView({ block: "end" }); + } @@ -142,8 +148,13 @@
- { + await resetFilter(); + }} + outline + size="xs" + color="light">Reset All Filters
{:else} @@ -152,7 +163,11 @@
-