Merge branch 'png-fix'

Venom-Biochem-Lab · Apr 6, 2024 · 772ce11 · 772ce11
2 parents a56a0df + b69226d
commit 772ce11
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 54 deletions.
diff --git a/frontend/src/lib/DelayedSpinner.svelte b/frontend/src/lib/DelayedSpinner.svelte
@@ -16,9 +16,13 @@
 </script>
 
 {#if showSpinner}
- {#if textRight}
- <Spinner {...spinnerProps} /> {text}
- {:else}
- {text} <Spinner {...spinnerProps} />
- {/if}
+ <div class="flex gap-2 items-center">
+ {#if textRight}
+ <Spinner {...spinnerProps} />
+ <p>{text}</p>
+ {:else}
+ <p>{text}</p>
+ <Spinner {...spinnerProps} />
+ {/if}
+ </div>
 {/if}
diff --git a/frontend/src/routes/Search.svelte b/frontend/src/routes/Search.svelte
@@ -5,6 +5,7 @@
  import ListProteins from "../lib/ListProteins.svelte";
  import { Search, Button } from "flowbite-svelte";
  import RangerFilter from "../lib/RangerFilter.svelte";
+ import DelayedSpinner from "../lib/DelayedSpinner.svelte";
 
  let query = "";
  let proteinEntries: ProteinEntry[];
@@ -50,59 +51,63 @@
 <section>
  <div id="sidebar">
  <h2 class="text-primary-900 mb-2">Filter By</h2>
-
- <div>
- {#if species && species.length > 0}
- <div>
- <h3>Species</h3>
- </div>
- <div class="flex gap-2 flex-wrap">
- {#each species as s}
- <Button
- outline
- on:click={async () => {
- speciesFilter = s;
- await search();
- }}
- >
- {s}
- </Button>
- {/each}
- </div>
- {/if}
- </div>
- <div>
- {#if lengthExtent && lengthFilter}
+ {#if lengthExtent && massExtent && species}
+ <div>
+ {#if species && species.length > 0}
+ <div>
+ <h3>Species</h3>
+ </div>
+ <div class="flex gap-2 flex-wrap">
+ {#each species as s}
+ <Button
+ outline
+ on:click={async () => {
+ speciesFilter = s;
+ await search();
+ }}
+ >
+ {s}
+ </Button>
+ {/each}
+ </div>
+ {/if}
+ </div>
+ <div>
  <h3>Amino Acids Length</h3>
- <RangerFilter
- min={lengthExtent.min}
- max={lengthExtent.max}
- on:change={async ({ detail }) => {
- lengthFilter = detail;
- await search();
- }}
- />
- {/if}
- </div>
+ {#if lengthExtent && lengthFilter}
+ <RangerFilter
+ min={lengthExtent.min}
+ max={lengthExtent.max}
+ on:change={async ({ detail }) => {
+ lengthFilter = detail;
+ await search();
+ }}
+ />
+ {/if}
+ </div>
 
- <div>
- {#if massExtent && massFilter}
+ <div>
  <h3>Mass (Da)</h3>
- <RangerFilter
- min={massExtent.min}
- max={massExtent.max}
- on:change={async ({ detail }) => {
- massFilter = detail;
- await search();
- }}
- />
- {/if}
- </div>
+ {#if massExtent && massFilter}
+ <RangerFilter
+ min={massExtent.min}
+ max={massExtent.max}
+ on:change={async ({ detail }) => {
+ massFilter = detail;
+ await search();
+ }}
+ />
+ {/if}
+ </div>
 
- <div class="mt-5">
- <Button on:click={resetFilter}>Reset All Filters</Button>
- </div>
+ <div class="mt-5">
+ <Button on:click={resetFilter}>Reset All Filters</Button>
+ </div>
+ {:else}
+ <DelayedSpinner text="Fetching Properties to Filter By" textRight />
+ {/if}
  </div>
+
  <div id="view">
  <form id="search-bar" on:submit|preventDefault={search}>
  <Search
@@ -120,7 +125,10 @@
  </div>
  {/if}
  {#if proteinEntries === undefined || proteinEntries.length === 0}
- No proteins Found
+ <DelayedSpinner
+ text="Fetching Proteins from the Venome DB..."
+ textRight
+ />
  {:else}
  <ListProteins allEntries={proteinEntries} />
  {/if}