From 0dc79199d9947a0502d7833a55ff8aad4fd8b8e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Mon, 4 Sep 2023 14:57:06 +0200
Subject: [PATCH 01/12] add rudimentary filter

---
 src/components/QueryFilter.vue | 32 ++++++++++++++++++++++++++++++++
 src/views/BrowseView.vue       |  8 +++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/components/QueryFilter.vue

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
new file mode 100644
index 0000000..28510ed
--- /dev/null
+++ b/src/components/QueryFilter.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="rounded bg-body-tertiary p-4 mb-4">
+    <div>
+      <div><span class="fw-bold">Genome Size:</span> <span>{{ sizeValue[0] + 'kbp' }} - {{ sizeValue[1] + 'kbp' }}</span></div>
+      <vue-slider :min="0" :max="100000" v-model="sizeValue" :lazy="true" :interval="500" />
+    </div>
+    <div>
+      <div class="fw-bold">Contig Count:</div>
+      <vue-slider :min="1" :max="1000" v-model="contigValue" :lazy="true" />
+    </div>
+    <div>
+      <div class="fw-bold">Quality:</div>
+      <vue-slider :min="0" :max="100" v-model="qualityValue" :lazy="true" />
+    </div>
+    <div>
+      <div class="fw-bold">Contamination:</div>
+      <vue-slider :min="0" :max="100" v-model="contaminationValue" :lazy="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import VueSlider from 'vue-slider-component';
+import 'vue-slider-component/theme/default.css'
+
+const sizeValue = ref([0, 100000]);
+const contigValue = ref([1, 1000]);
+const qualityValue = ref([75, 100]);
+const contaminationValue = ref([0, 10]);
+
+</script>
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 89772ca..92eda39 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import ResultTable from "@/components/ResultTable.vue";
+import QueryFilter from "@/components/QueryFilter.vue";
 
 const entries = ref([{
     "id": "SAMD00000344",
@@ -39,11 +40,16 @@ const entries = ref([{
 
 <template>
   <main class="container pt-5">
-
     <div class="row">
       <h2>Browse BakRep Genomes</h2>
     </div>
 
+    <div class="row">
+      <div class="col">
+        <QueryFilter />
+      </div>
+    </div>
+
     <div class="row">
       <ResultTable :entries=entries />
     </div>

From 3db7a7c32db2a3058234a75b396394fc360a6cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Mon, 4 Sep 2023 14:58:19 +0200
Subject: [PATCH 02/12] add dependencies for slider

---
 package-lock.json | 6 ++++++
 package.json      | 1 +
 2 files changed, 7 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 7da6609..4ddfef0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "vue": "^3.2.45",
         "vue-chartjs": "^5.2.0",
         "vue-router": "^4.1.6",
+        "vue-slider-component": "^4.1.0-beta.7",
         "zod": "^3.22.2"
       },
       "devDependencies": {
@@ -5578,6 +5579,11 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-slider-component": {
+      "version": "4.1.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/package.json b/package.json
index f5090ca..84b6658 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "vue": "^3.2.45",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.1.6",
+    "vue-slider-component": "^4.1.0-beta.7",
     "zod": "^3.22.2"
   },
   "devDependencies": {

From 4a5ca467dc344aac03db1902132aed0171db5dee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Mon, 4 Sep 2023 16:31:41 +0200
Subject: [PATCH 03/12] add text based filter

---
 src/components/QueryFilter.vue | 74 +++++++++++++++++++++++++---------
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 28510ed..36c416c 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -1,32 +1,68 @@
 <template>
-  <div class="rounded bg-body-tertiary p-4 mb-4">
-    <div>
-      <div><span class="fw-bold">Genome Size:</span> <span>{{ sizeValue[0] + 'kbp' }} - {{ sizeValue[1] + 'kbp' }}</span></div>
-      <vue-slider :min="0" :max="100000" v-model="sizeValue" :lazy="true" :interval="500" />
+  <div class="rounded bg-body-secondary p-4 mb-4">
+    <div class="input-group mb-3">
+      <span class="input-label input-group-text">Size:</span>
+      <input class="form-control" type="text" v-model="sizeMin" />
+      <span class="input-group-text">Min</span>
+      <input class="form-control" type="text" v-model="sizeMax" />
+      <span class="input-group-text">Max</span>
     </div>
-    <div>
-      <div class="fw-bold">Contig Count:</div>
-      <vue-slider :min="1" :max="1000" v-model="contigValue" :lazy="true" />
+
+    <div class="input-group mb-3">
+      <span class="input-label input-group-text">Contig Count:</span>
+      <input class="form-control" type="text" v-model="contigMin" />
+      <span class="input-group-text">Min</span>
+      <input class="form-control" type="text" v-model="contigMax" />
+      <span class="input-group-text">Max</span>
     </div>
-    <div>
-      <div class="fw-bold">Quality:</div>
-      <vue-slider :min="0" :max="100" v-model="qualityValue" :lazy="true" />
+
+    <div class="input-group mb-3">
+      <span class="input-label input-group-text">GC Ratio:</span>
+      <input class="form-control" type="text" v-model="gcMin" />
+      <span class="input-group-text">Min</span>
+      <input class="form-control" type="text" v-model="gcMax" />
+      <span class="input-group-text">Max</span>
     </div>
-    <div>
-      <div class="fw-bold">Contamination:</div>
-      <vue-slider :min="0" :max="100" v-model="contaminationValue" :lazy="true" />
+
+    <div class="input-group mb-3">
+      <div class="input-label input-group-text">Quality:</div>
+      <input class="form-control" type="text" v-model="qualityMin" />
+      <div class="input-group-text">Min</div>
+      <input class="form-control" type="text" v-model="qualityMax" />
+      <div class="input-group-text">Max</div>
+    </div>
+
+    <div class="input-group mb-3">
+      <div class="input-label input-group-text">Contamination:</div>
+      <input class="form-control" type="text" v-model="contaminationMin" />
+      <div class="input-group-text">Min</div>
+      <input class="form-control" type="text" v-model="contaminationMax" />
+      <div class="input-group-text">Max</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/default.css'
 
-const sizeValue = ref([0, 100000]);
-const contigValue = ref([1, 1000]);
-const qualityValue = ref([75, 100]);
-const contaminationValue = ref([0, 10]);
+const sizeMin = ref();
+const sizeMax = ref();
 
+const gcMin = ref();
+const gcMax = ref();
+
+const qualityMin = ref();
+const qualityMax = ref();
+
+const contaminationMin = ref();
+const contaminationMax = ref();
+
+const contigMin = ref();
+const contigMax = ref();
 </script>
+
+<style scoped>
+.input-label {
+  width: 8.5rem;
+}
+</style>

From fe49e0cfecdf7c747ff7e245af8f3e0b86c0a24a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Mon, 4 Sep 2023 16:32:20 +0200
Subject: [PATCH 04/12] remove slider component

---
 package-lock.json | 6 ------
 package.json      | 1 -
 2 files changed, 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ddfef0..7da6609 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
         "vue": "^3.2.45",
         "vue-chartjs": "^5.2.0",
         "vue-router": "^4.1.6",
-        "vue-slider-component": "^4.1.0-beta.7",
         "zod": "^3.22.2"
       },
       "devDependencies": {
@@ -5579,11 +5578,6 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-slider-component": {
-      "version": "4.1.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
-      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
-    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/package.json b/package.json
index 84b6658..f5090ca 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "vue": "^3.2.45",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.1.6",
-    "vue-slider-component": "^4.1.0-beta.7",
     "zod": "^3.22.2"
   },
   "devDependencies": {

From f3878677ebb402b12f8cf24d223dee4def9d92cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 11:23:56 +0200
Subject: [PATCH 05/12] add filter and browse function

---
 src/components/QueryFilter.vue   |  81 +++++--------
 src/components/ResultTable.vue   |  64 ----------
 src/views/BrowseView.vue         | 195 ++++++++++++++++++++++++-------
 src/views/search/ResultTable.vue |   2 +-
 4 files changed, 183 insertions(+), 159 deletions(-)
 delete mode 100644 src/components/ResultTable.vue

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 36c416c..2a02e86 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -1,64 +1,39 @@
 <template>
-  <div class="rounded bg-body-secondary p-4 mb-4">
-    <div class="input-group mb-3">
-      <span class="input-label input-group-text">Size:</span>
-      <input class="form-control" type="text" v-model="sizeMin" />
-      <span class="input-group-text">Min</span>
-      <input class="form-control" type="text" v-model="sizeMax" />
-      <span class="input-group-text">Max</span>
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-label input-group-text">Contig Count:</span>
-      <input class="form-control" type="text" v-model="contigMin" />
-      <span class="input-group-text">Min</span>
-      <input class="form-control" type="text" v-model="contigMax" />
-      <span class="input-group-text">Max</span>
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-label input-group-text">GC Ratio:</span>
-      <input class="form-control" type="text" v-model="gcMin" />
-      <span class="input-group-text">Min</span>
-      <input class="form-control" type="text" v-model="gcMax" />
-      <span class="input-group-text">Max</span>
-    </div>
-
-    <div class="input-group mb-3">
-      <div class="input-label input-group-text">Quality:</div>
-      <input class="form-control" type="text" v-model="qualityMin" />
-      <div class="input-group-text">Min</div>
-      <input class="form-control" type="text" v-model="qualityMax" />
-      <div class="input-group-text">Max</div>
-    </div>
-
-    <div class="input-group mb-3">
-      <div class="input-label input-group-text">Contamination:</div>
-      <input class="form-control" type="text" v-model="contaminationMin" />
-      <div class="input-group-text">Min</div>
-      <input class="form-control" type="text" v-model="contaminationMax" />
-      <div class="input-group-text">Max</div>
-    </div>
+  <div class="input-group mb-3">
+    <span class="input-label input-group-text">{{ label }}:</span>
+    <input
+      class="form-control"
+      type="text"
+      v-model.lazy.number="min"
+      @change="$emit('update:min', min)"
+    />
+    <span class="input-group-text">Min</span>
+    <input
+      class="form-control"
+      type="text"
+      v-model.lazy.number="max"
+      @change="$emit('update:max', max)"
+    />
+    <span class="input-group-text">Max</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-const sizeMin = ref();
-const sizeMax = ref();
-
-const gcMin = ref();
-const gcMax = ref();
+import { ref, type PropType } from "vue";
+import type { filterTouple } from "@/views/BrowseView.vue";
 
-const qualityMin = ref();
-const qualityMax = ref();
+const props = defineProps({
+  label: { type: String, required: true },
+  modelValue: { type: Object as PropType<filterTouple>, required: true },
+});
 
-const contaminationMin = ref();
-const contaminationMax = ref();
+const emits = defineEmits<{
+  (e: "update:min", min: number): void;
+  (e: "update:max", max: number): void;
+}>();
 
-const contigMin = ref();
-const contigMax = ref();
+const min = ref(props.modelValue.min);
+const max = ref(props.modelValue.max);
 </script>
 
 <style scoped>
diff --git a/src/components/ResultTable.vue b/src/components/ResultTable.vue
deleted file mode 100644
index 2ad5b38..0000000
--- a/src/components/ResultTable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from "vue";
-type SearchResultEntry = {
-  id: string;
-  GC: number;
-  Contigs: number;
-  Length: number;
-  Name: string;
-};
-
-defineProps({
-  entries: { type: Array as PropType<SearchResultEntry[]>, default: () => [] },
-});
-
-</script>
-
-<template>
-  <div class="rounded bg-light shadow-sm">
-    <table class="table table-hover">
-      <thead>
-        <tr>
-          <th scope="col">Id</th>
-          <th scope="col">GC</th>
-          <th scope="col">Contigs</th>
-          <th scope="col">Genome Size</th>
-          <th scope="col">Species</th>
-          <th scope="col">ST Type</th>
-          <th scope="col">Quality & Contamination</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-for="entry in entries" :key="entry.id">
-          <tr
-            @click="
-              $router.push({
-                name: 'result',
-                params: { id: entry.id, title: entry.Name },
-              })
-            "
-            class="pointer"
-          >
-            <td scope="row">{{ entry.id }}</td>
-            <td>{{ entry.GC * 100 + "%" }}</td>
-            <td>{{ entry.Contigs }}</td>
-            <td>
-              {{
-                Math.round(entry.Length / 1000).toLocaleString("en") + "KB"
-              }}
-            </td>
-            <td>{{ entry.Name }}</td>
-            <td class="text-nowrap">ST - Type</td>
-            <td>Quality</td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style>
-.pointer {
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 92eda39..473771f 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -1,41 +1,129 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import ResultTable from "@/components/ResultTable.vue";
+import { onMounted, ref, type Ref, computed } from "vue";
+import ResultTable from "@/views/search/ResultTable.vue";
 import QueryFilter from "@/components/QueryFilter.vue";
+import { useApi } from "@/BakrepApi";
+import CenteredLargeSpinner from "@/components/CenteredLargeSpinner.vue";
+import Loading from "@/components/Loading.vue";
+import {
+  empty,
+  toPosition,
+  type PaginationData,
+  type PositionInResult,
+} from "@/components/pagination/Pagination";
+import Pagination from "@/components/pagination/Pagination.vue";
+import type { BakrepSearchResultEntry } from "@/model/BakrepSearchResult";
+import usePageState, { State } from "@/PageState";
+const state = usePageState();
+const entries: Ref<BakrepSearchResultEntry[]> = ref([]);
 
-const entries = ref([{
-    "id": "SAMD00000344",
-    "GC": 0.75,
-    "Contigs": 175,
-    "Length": 2359987,
-    "Name": "Decumaria L."
-  }, {
-    "id": "SAMD00000344",
-    "GC": 0.23,
-    "Contigs": 171,
-    "Length": 2359987,
-    "Name": "Avicennia germinans (L.) L."
-  }, {
-    "id": "SAMD00000344",
-    "GC": 0.40,
-    "Contigs": 19,
-    "Length": 2359987,
-    "Name": "Cetraria ericetorum Opiz ssp. reticulata (Rasanen) Karnefelt"
-  }, {
-    "id": "SAMD00000344",
-    "GC": 0.61,
-    "Contigs": 66,
-    "Length": 2359987,
-    "Name": "Rudbeckia laciniata L. var. laciniata"
-  }, {
-    "id": "SAMD00000344",
-    "GC": 0.49,
-    "Contigs": 170,
-    "Length": 2359987,
-    "Name": "Tetraclinis articulata (Vahl) Masters"
-  }
-])
+const api = useApi();
+const pagination: Ref<PaginationData> = ref(empty());
 
+export type filterTouple = {
+  min: number;
+  max: number;
+};
+
+const sizeTouple = ref<filterTouple>({ min: 0, max: 9999999 });
+const gcTouple = ref<filterTouple>({ min: 0, max: 75 });
+const contigTouple = ref<filterTouple>({ min: 0, max: 1000 });
+const qualityTouple = ref<filterTouple>({ min: 0, max: 100 });
+const contaminationTouple = ref<filterTouple>({ min: 0, max: 100 });
+
+function filter(offset = 0) {
+  let query;
+  query = {
+    op: "and",
+    value: [
+      // Size Filter
+
+      {
+        field: "bakta.stats.size",
+        op: ">=",
+        value: sizeTouple.value.min,
+      },
+      {
+        field: "bakta.stats.size",
+        op: "<=",
+        value: sizeTouple.value.max,
+      },
+
+      // GC Ratio Filter
+
+      {
+        field: "bakta.stats.gc",
+        op: ">=",
+        value: gcTouple.value.min / 100,
+      },
+      {
+        field: "bakta.stats.gc",
+        op: "<=",
+        value: gcTouple.value.max / 100,
+      },
+
+      // Contig Count Filter
+
+      {
+        field: "bakta.stats.no_sequences",
+        op: ">=",
+        value: contigTouple.value.min,
+      },
+      {
+        field: "bakta.stats.no_sequences",
+        op: "<=",
+        value: contigTouple.value.max,
+      },
+
+      // Quality Filter
+
+      {
+        field: "checkm2.quality.completeness",
+        op: ">=",
+        value: qualityTouple.value.min,
+      },
+      {
+        field: "checkm2.quality.completeness",
+        op: "<=",
+        value: qualityTouple.value.max,
+      },
+
+      // Contamination Filter
+
+      {
+        field: "checkm2.quality.contamination",
+        op: ">=",
+        value: contaminationTouple.value.min,
+      },
+      {
+        field: "checkm2.quality.contamination",
+        op: "<=",
+        value: contaminationTouple.value.max,
+      },
+    ],
+  };
+
+  state.value.setState(State.Loading);
+
+  api
+    .search({
+      query: query,
+      sort: [{ field: "bakta.stats.no_sequences", ord: "asc" }],
+      offset: offset,
+      limit: 10,
+    })
+    .then((r) => {
+      entries.value = r.results;
+      state.value.setState(State.Main);
+      pagination.value.offset = r.offset;
+      pagination.value.total = r.total;
+    });
+}
+const positionInResults: Ref<PositionInResult> = computed(() =>
+  toPosition(pagination.value),
+);
+
+onMounted(filter);
 </script>
 
 <template>
@@ -46,15 +134,40 @@ const entries = ref([{
 
     <div class="row">
       <div class="col">
-        <QueryFilter />
+        <div class="rounded bg-body-secondary p-4 mb-4">
+          <QueryFilter label="Size" v-model="sizeTouple" @update:min="(newValue: number) => (sizeTouple.min = newValue)"
+            @update:max="(newValue: number) => (sizeTouple.max = newValue)" />
+          <QueryFilter label="GC Ratio" v-model="gcTouple" @update:min="(newValue: number) => (gcTouple.min = newValue)"
+            @update:max="(newValue: number) => (gcTouple.max = newValue)" />
+          <QueryFilter label="Contig Count" v-model="contigTouple"
+            @update:min="(newValue: number) => (contigTouple.min = newValue)"
+            @update:max="(newValue: number) => (contigTouple.max = newValue)" />
+          <QueryFilter label="Quality" v-model="qualityTouple"
+            @update:min="(newValue: number) => (qualityTouple.min = newValue)"
+            @update:max="(newValue: number) => (qualityTouple.max = newValue)" />
+          <QueryFilter label="Contamination" v-model="contaminationTouple"
+            @update:min="(newValue: number) => (contaminationTouple.min = newValue)"
+            @update:max="(newValue: number) => (contaminationTouple.max = newValue)" />
+          <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
+        </div>
       </div>
     </div>
-
-    <div class="row">
-      <ResultTable :entries=entries />
-    </div>
+    <Loading :state="state">
+      <template v-slot:loading>
+        <CenteredLargeSpinner />
+      </template>
+      <template v-slot:content>
+        <div class="row py-3 my-5">
+          Showing results {{ positionInResults.firstElement }}-{{
+            positionInResults.lastElement
+          }}
+          of {{ pagination.total }} results
+          <ResultTable :entries="entries" />
+          <Pagination class="mt-3" :value="pagination" @update:offset="filter" />
+        </div>
+      </template>
+    </Loading>
   </main>
 </template>
 
-<style>
-</style>
+<style></style>
diff --git a/src/views/search/ResultTable.vue b/src/views/search/ResultTable.vue
index 8cff5b9..3771919 100644
--- a/src/views/search/ResultTable.vue
+++ b/src/views/search/ResultTable.vue
@@ -43,7 +43,7 @@ let drag = false;
 
 <template>
   <div class="rounded bg-light shadow-sm">
-    <table class="mt-3 table table-hover">
+    <table class="mt-3 table table-hover table-light">
       <thead>
         <tr>
           <th scope="col">Id</th>

From 546fb1c22f76f12145f693a5925c35ae915d5dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 12:50:00 +0200
Subject: [PATCH 06/12] adopt [] operator

---
 src/components/QueryFilter.vue |  4 +-
 src/views/BrowseView.vue       | 81 ++++++++++++----------------------
 2 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 2a02e86..e41c8d3 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -32,8 +32,8 @@ const emits = defineEmits<{
   (e: "update:max", max: number): void;
 }>();
 
-const min = ref(props.modelValue.min);
-const max = ref(props.modelValue.max);
+const min = ref(props.modelValue.from);
+const max = ref(props.modelValue.to);
 </script>
 
 <style scoped>
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 473771f..55beb0c 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -21,15 +21,15 @@ const api = useApi();
 const pagination: Ref<PaginationData> = ref(empty());
 
 export type filterTouple = {
-  min: number;
-  max: number;
+  from: number;
+  to: number;
 };
 
-const sizeTouple = ref<filterTouple>({ min: 0, max: 9999999 });
-const gcTouple = ref<filterTouple>({ min: 0, max: 75 });
-const contigTouple = ref<filterTouple>({ min: 0, max: 1000 });
-const qualityTouple = ref<filterTouple>({ min: 0, max: 100 });
-const contaminationTouple = ref<filterTouple>({ min: 0, max: 100 });
+const sizeTouple = ref<filterTouple>({ from: 0, to: 9999999 });
+const gcTouple = ref<filterTouple>({ from: 0, to: 75 });
+const contigTouple = ref<filterTouple>({ from: 0, to: 1000 });
+const qualityTouple = ref<filterTouple>({ from: 0, to: 100 });
+const contaminationTouple = ref<filterTouple>({ from: 0, to: 100 });
 
 function filter(offset = 0) {
   let query;
@@ -40,65 +40,38 @@ function filter(offset = 0) {
 
       {
         field: "bakta.stats.size",
-        op: ">=",
-        value: sizeTouple.value.min,
-      },
-      {
-        field: "bakta.stats.size",
-        op: "<=",
-        value: sizeTouple.value.max,
+        op: "[]",
+        value: sizeTouple.value,
       },
 
-      // GC Ratio Filter
 
       {
         field: "bakta.stats.gc",
-        op: ">=",
-        value: gcTouple.value.min / 100,
-      },
-      {
-        field: "bakta.stats.gc",
-        op: "<=",
-        value: gcTouple.value.max / 100,
+        op: "[]",
+        value: gcTouple.value,
       },
-
       // Contig Count Filter
 
       {
         field: "bakta.stats.no_sequences",
-        op: ">=",
-        value: contigTouple.value.min,
-      },
-      {
-        field: "bakta.stats.no_sequences",
-        op: "<=",
-        value: contigTouple.value.max,
+        op: "[]",
+        value: contigTouple.value,
       },
 
       // Quality Filter
 
       {
         field: "checkm2.quality.completeness",
-        op: ">=",
-        value: qualityTouple.value.min,
-      },
-      {
-        field: "checkm2.quality.completeness",
-        op: "<=",
-        value: qualityTouple.value.max,
+        op: "[]",
+        value: qualityTouple.value,
       },
 
       // Contamination Filter
 
       {
         field: "checkm2.quality.contamination",
-        op: ">=",
-        value: contaminationTouple.value.min,
-      },
-      {
-        field: "checkm2.quality.contamination",
-        op: "<=",
-        value: contaminationTouple.value.max,
+        op: "[]",
+        value: contaminationTouple.value,
       },
     ],
   };
@@ -135,19 +108,19 @@ onMounted(filter);
     <div class="row">
       <div class="col">
         <div class="rounded bg-body-secondary p-4 mb-4">
-          <QueryFilter label="Size" v-model="sizeTouple" @update:min="(newValue: number) => (sizeTouple.min = newValue)"
-            @update:max="(newValue: number) => (sizeTouple.max = newValue)" />
-          <QueryFilter label="GC Ratio" v-model="gcTouple" @update:min="(newValue: number) => (gcTouple.min = newValue)"
-            @update:max="(newValue: number) => (gcTouple.max = newValue)" />
+          <QueryFilter label="Size" v-model="sizeTouple" @update:min="(newValue: number) => (sizeTouple.from = newValue)"
+            @update:max="(newValue: number) => (sizeTouple.to = newValue)" />
+          <QueryFilter label="GC Ratio" v-model="gcTouple" @update:min="(newValue: number) => (gcTouple.from = newValue)"
+            @update:max="(newValue: number) => (gcTouple.to = newValue)" />
           <QueryFilter label="Contig Count" v-model="contigTouple"
-            @update:min="(newValue: number) => (contigTouple.min = newValue)"
-            @update:max="(newValue: number) => (contigTouple.max = newValue)" />
+            @update:min="(newValue: number) => (contigTouple.from = newValue)"
+            @update:max="(newValue: number) => (contigTouple.to = newValue)" />
           <QueryFilter label="Quality" v-model="qualityTouple"
-            @update:min="(newValue: number) => (qualityTouple.min = newValue)"
-            @update:max="(newValue: number) => (qualityTouple.max = newValue)" />
+            @update:min="(newValue: number) => (qualityTouple.from = newValue)"
+            @update:max="(newValue: number) => (qualityTouple.to = newValue)" />
           <QueryFilter label="Contamination" v-model="contaminationTouple"
-            @update:min="(newValue: number) => (contaminationTouple.min = newValue)"
-            @update:max="(newValue: number) => (contaminationTouple.max = newValue)" />
+            @update:min="(newValue: number) => (contaminationTouple.from = newValue)"
+            @update:max="(newValue: number) => (contaminationTouple.to = newValue)" />
           <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
         </div>
       </div>

From 06396e78e5eed9e465a92058e18083e33822f283 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 12:53:16 +0200
Subject: [PATCH 07/12] remove lazy

---
 src/components/QueryFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index e41c8d3..513eb4f 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -4,14 +4,14 @@
     <input
       class="form-control"
       type="text"
-      v-model.lazy.number="min"
+      v-model.number="min"
       @change="$emit('update:min', min)"
     />
     <span class="input-group-text">Min</span>
     <input
       class="form-control"
       type="text"
-      v-model.lazy.number="max"
+      v-model.number="max"
       @change="$emit('update:max', max)"
     />
     <span class="input-group-text">Max</span>

From a4dbddfdc06b60eac5b9baea469bb203cb490f8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 13:18:05 +0200
Subject: [PATCH 08/12] resolve issues

---
 src/components/QueryFilter.vue   |  7 ++--
 src/views/BrowseView.vue         | 58 ++++++++++++++------------------
 src/views/search/ResultTable.vue |  2 +-
 3 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 513eb4f..4daa9e3 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -5,14 +5,14 @@
       class="form-control"
       type="text"
       v-model.number="min"
-      @change="$emit('update:min', min)"
+      @change="$emit('update:modelValue', {from: min, to: max})"
     />
     <span class="input-group-text">Min</span>
     <input
       class="form-control"
       type="text"
       v-model.number="max"
-      @change="$emit('update:max', max)"
+      @change="$emit('update:modelValue', {from: min, to: max})"
     />
     <span class="input-group-text">Max</span>
   </div>
@@ -28,8 +28,7 @@ const props = defineProps({
 });
 
 const emits = defineEmits<{
-  (e: "update:min", min: number): void;
-  (e: "update:max", max: number): void;
+  (e: "update:modelValue", value: filterTouple): void;
 }>();
 
 const min = ref(props.modelValue.from);
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 55beb0c..56f041e 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -14,8 +14,9 @@ import {
 import Pagination from "@/components/pagination/Pagination.vue";
 import type { BakrepSearchResultEntry } from "@/model/BakrepSearchResult";
 import usePageState, { State } from "@/PageState";
-const state = usePageState();
+const searchState = usePageState();
 const entries: Ref<BakrepSearchResultEntry[]> = ref([]);
+const pageState = usePageState();
 
 const api = useApi();
 const pagination: Ref<PaginationData> = ref(empty());
@@ -44,11 +45,10 @@ function filter(offset = 0) {
         value: sizeTouple.value,
       },
 
-
       {
         field: "bakta.stats.gc",
         op: "[]",
-        value: gcTouple.value,
+        value: { from: gcTouple.value.from / 100, to: gcTouple.value.to / 100 },
       },
       // Contig Count Filter
 
@@ -76,7 +76,7 @@ function filter(offset = 0) {
     ],
   };
 
-  state.value.setState(State.Loading);
+  searchState.value.setState(State.Loading);
 
   api
     .search({
@@ -87,10 +87,11 @@ function filter(offset = 0) {
     })
     .then((r) => {
       entries.value = r.results;
-      state.value.setState(State.Main);
+      searchState.value.setState(State.Main);
       pagination.value.offset = r.offset;
       pagination.value.total = r.total;
-    });
+    })
+    .catch((err) => pageState.value.setError(err));
 }
 const positionInResults: Ref<PositionInResult> = computed(() =>
   toPosition(pagination.value),
@@ -104,32 +105,25 @@ onMounted(filter);
     <div class="row">
       <h2>Browse BakRep Genomes</h2>
     </div>
-
-    <div class="row">
-      <div class="col">
-        <div class="rounded bg-body-secondary p-4 mb-4">
-          <QueryFilter label="Size" v-model="sizeTouple" @update:min="(newValue: number) => (sizeTouple.from = newValue)"
-            @update:max="(newValue: number) => (sizeTouple.to = newValue)" />
-          <QueryFilter label="GC Ratio" v-model="gcTouple" @update:min="(newValue: number) => (gcTouple.from = newValue)"
-            @update:max="(newValue: number) => (gcTouple.to = newValue)" />
-          <QueryFilter label="Contig Count" v-model="contigTouple"
-            @update:min="(newValue: number) => (contigTouple.from = newValue)"
-            @update:max="(newValue: number) => (contigTouple.to = newValue)" />
-          <QueryFilter label="Quality" v-model="qualityTouple"
-            @update:min="(newValue: number) => (qualityTouple.from = newValue)"
-            @update:max="(newValue: number) => (qualityTouple.to = newValue)" />
-          <QueryFilter label="Contamination" v-model="contaminationTouple"
-            @update:min="(newValue: number) => (contaminationTouple.from = newValue)"
-            @update:max="(newValue: number) => (contaminationTouple.to = newValue)" />
-          <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
+    <loading :state="pageState">
+      <div class="row">
+        <div class="col">
+          <div class="rounded bg-body-secondary p-4 mb-4">
+            <QueryFilter label="Size" v-model="sizeTouple"
+              @update:modelValue="(newValue: filterTouple) => (sizeTouple = newValue)" />
+            <QueryFilter label="GC Ratio" v-model="gcTouple"
+              @update:modelValue="(newValue: filterTouple) => (gcTouple = newValue)" />
+            <QueryFilter label="Contig Count" v-model="contigTouple"
+              @update:modelValue="(newValue: filterTouple) => (contigTouple = newValue)" />
+            <QueryFilter label="Quality" v-model="qualityTouple"
+              @update:modelValue="(newValue: filterTouple) => (qualityTouple = newValue)" />
+            <QueryFilter label="Contamination" v-model="contaminationTouple"
+              @update:modelValue="(newValue: filterTouple) => (contaminationTouple = newValue)" />
+            <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
+          </div>
         </div>
       </div>
-    </div>
-    <Loading :state="state">
-      <template v-slot:loading>
-        <CenteredLargeSpinner />
-      </template>
-      <template v-slot:content>
+      <Loading :state="searchState">
         <div class="row py-3 my-5">
           Showing results {{ positionInResults.firstElement }}-{{
             positionInResults.lastElement
@@ -138,8 +132,8 @@ onMounted(filter);
           <ResultTable :entries="entries" />
           <Pagination class="mt-3" :value="pagination" @update:offset="filter" />
         </div>
-      </template>
-    </Loading>
+      </Loading>
+    </loading>
   </main>
 </template>
 
diff --git a/src/views/search/ResultTable.vue b/src/views/search/ResultTable.vue
index 6dd300e..ad0b435 100644
--- a/src/views/search/ResultTable.vue
+++ b/src/views/search/ResultTable.vue
@@ -64,7 +64,7 @@ const showFeatures = computed(() =>
 
 <template>
   <div class="rounded bg-light shadow-sm">
-    <table class="mt-3 table table-hover table-light">
+    <table class="mt-3 table table-hover">
       <thead>
         <tr>
           <th scope="col">

From d7230ff1c6fa0139ca6fb6612ca365b9d93f4322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 13:20:35 +0200
Subject: [PATCH 09/12] fix type name

---
 src/components/QueryFilter.vue |  6 +++---
 src/views/BrowseView.vue       | 23 +++++++++++------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 4daa9e3..2def269 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -20,15 +20,15 @@
 
 <script setup lang="ts">
 import { ref, type PropType } from "vue";
-import type { filterTouple } from "@/views/BrowseView.vue";
+import type { FilterTouple } from "@/views/BrowseView.vue";
 
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: Object as PropType<filterTouple>, required: true },
+  modelValue: { type: Object as PropType<FilterTouple>, required: true },
 });
 
 const emits = defineEmits<{
-  (e: "update:modelValue", value: filterTouple): void;
+  (e: "update:modelValue", value: FilterTouple): void;
 }>();
 
 const min = ref(props.modelValue.from);
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 56f041e..a99842f 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -21,16 +21,16 @@ const pageState = usePageState();
 const api = useApi();
 const pagination: Ref<PaginationData> = ref(empty());
 
-export type filterTouple = {
+export type FilterTouple = {
   from: number;
   to: number;
 };
 
-const sizeTouple = ref<filterTouple>({ from: 0, to: 9999999 });
-const gcTouple = ref<filterTouple>({ from: 0, to: 75 });
-const contigTouple = ref<filterTouple>({ from: 0, to: 1000 });
-const qualityTouple = ref<filterTouple>({ from: 0, to: 100 });
-const contaminationTouple = ref<filterTouple>({ from: 0, to: 100 });
+const sizeTouple = ref<FilterTouple>({ from: 0, to: 9999999 });
+const gcTouple = ref<FilterTouple>({ from: 0, to: 75 });
+const contigTouple = ref<FilterTouple>({ from: 0, to: 1000 });
+const qualityTouple = ref<FilterTouple>({ from: 0, to: 100 });
+const contaminationTouple = ref<FilterTouple>({ from: 0, to: 100 });
 
 function filter(offset = 0) {
   let query;
@@ -110,15 +110,15 @@ onMounted(filter);
         <div class="col">
           <div class="rounded bg-body-secondary p-4 mb-4">
             <QueryFilter label="Size" v-model="sizeTouple"
-              @update:modelValue="(newValue: filterTouple) => (sizeTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTouple) => (sizeTouple = newValue)" />
             <QueryFilter label="GC Ratio" v-model="gcTouple"
-              @update:modelValue="(newValue: filterTouple) => (gcTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTouple) => (gcTouple = newValue)" />
             <QueryFilter label="Contig Count" v-model="contigTouple"
-              @update:modelValue="(newValue: filterTouple) => (contigTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTouple) => (contigTouple = newValue)" />
             <QueryFilter label="Quality" v-model="qualityTouple"
-              @update:modelValue="(newValue: filterTouple) => (qualityTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTouple) => (qualityTouple = newValue)" />
             <QueryFilter label="Contamination" v-model="contaminationTouple"
-              @update:modelValue="(newValue: filterTouple) => (contaminationTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTouple) => (contaminationTouple = newValue)" />
             <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
           </div>
         </div>
@@ -136,5 +136,4 @@ onMounted(filter);
     </loading>
   </main>
 </template>
-
 <style></style>

From 11fa279e08719036357ad4c6def200b0a99f74cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 13:22:09 +0200
Subject: [PATCH 10/12] fix typo

---
 src/components/QueryFilter.vue |  6 +++---
 src/views/BrowseView.vue       | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 2def269..b67c65d 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -20,15 +20,15 @@
 
 <script setup lang="ts">
 import { ref, type PropType } from "vue";
-import type { FilterTouple } from "@/views/BrowseView.vue";
+import type { FilterTuple } from "@/views/BrowseView.vue";
 
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: Object as PropType<FilterTouple>, required: true },
+  modelValue: { type: Object as PropType<FilterTuple>, required: true },
 });
 
 const emits = defineEmits<{
-  (e: "update:modelValue", value: FilterTouple): void;
+  (e: "update:modelValue", value: FilterTuple): void;
 }>();
 
 const min = ref(props.modelValue.from);
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index a99842f..17a0a4c 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -21,16 +21,16 @@ const pageState = usePageState();
 const api = useApi();
 const pagination: Ref<PaginationData> = ref(empty());
 
-export type FilterTouple = {
+export type FilterTuple = {
   from: number;
   to: number;
 };
 
-const sizeTouple = ref<FilterTouple>({ from: 0, to: 9999999 });
-const gcTouple = ref<FilterTouple>({ from: 0, to: 75 });
-const contigTouple = ref<FilterTouple>({ from: 0, to: 1000 });
-const qualityTouple = ref<FilterTouple>({ from: 0, to: 100 });
-const contaminationTouple = ref<FilterTouple>({ from: 0, to: 100 });
+const sizeTouple = ref<FilterTuple>({ from: 0, to: 9999999 });
+const gcTouple = ref<FilterTuple>({ from: 0, to: 75 });
+const contigTouple = ref<FilterTuple>({ from: 0, to: 1000 });
+const qualityTouple = ref<FilterTuple>({ from: 0, to: 100 });
+const contaminationTouple = ref<FilterTuple>({ from: 0, to: 100 });
 
 function filter(offset = 0) {
   let query;
@@ -110,15 +110,15 @@ onMounted(filter);
         <div class="col">
           <div class="rounded bg-body-secondary p-4 mb-4">
             <QueryFilter label="Size" v-model="sizeTouple"
-              @update:modelValue="(newValue: FilterTouple) => (sizeTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTuple) => (sizeTouple = newValue)" />
             <QueryFilter label="GC Ratio" v-model="gcTouple"
-              @update:modelValue="(newValue: FilterTouple) => (gcTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTuple) => (gcTouple = newValue)" />
             <QueryFilter label="Contig Count" v-model="contigTouple"
-              @update:modelValue="(newValue: FilterTouple) => (contigTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTuple) => (contigTouple = newValue)" />
             <QueryFilter label="Quality" v-model="qualityTouple"
-              @update:modelValue="(newValue: FilterTouple) => (qualityTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTuple) => (qualityTouple = newValue)" />
             <QueryFilter label="Contamination" v-model="contaminationTouple"
-              @update:modelValue="(newValue: FilterTouple) => (contaminationTouple = newValue)" />
+              @update:modelValue="(newValue: FilterTuple) => (contaminationTouple = newValue)" />
             <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
           </div>
         </div>

From 16db06f40e1862022c05fa684b6baf97bc4f5a38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noah=20St=C3=BCrtz?= <noah.stuertz@gmail.com>
Date: Thu, 7 Sep 2023 13:32:18 +0200
Subject: [PATCH 11/12] resolve last issues

---
 src/components/QueryFilter.vue | 11 ++++------
 src/views/BrowseView.vue       | 40 +++++++++++++++++-----------------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index b67c65d..9df1263 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -4,15 +4,15 @@
     <input
       class="form-control"
       type="text"
-      v-model.number="min"
-      @change="$emit('update:modelValue', {from: min, to: max})"
+      v-model.number="$props.modelValue.from"
+      @change="$emit('update:modelValue', $props.modelValue)"
     />
     <span class="input-group-text">Min</span>
     <input
       class="form-control"
       type="text"
-      v-model.number="max"
-      @change="$emit('update:modelValue', {from: min, to: max})"
+      v-model.number="$props.modelValue.to"
+      @change="$emit('update:modelValue', $props.modelValue)"
     />
     <span class="input-group-text">Max</span>
   </div>
@@ -30,9 +30,6 @@ const props = defineProps({
 const emits = defineEmits<{
   (e: "update:modelValue", value: FilterTuple): void;
 }>();
-
-const min = ref(props.modelValue.from);
-const max = ref(props.modelValue.to);
 </script>
 
 <style scoped>
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 17a0a4c..9ed2464 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -26,11 +26,11 @@ export type FilterTuple = {
   to: number;
 };
 
-const sizeTouple = ref<FilterTuple>({ from: 0, to: 9999999 });
-const gcTouple = ref<FilterTuple>({ from: 0, to: 75 });
-const contigTouple = ref<FilterTuple>({ from: 0, to: 1000 });
-const qualityTouple = ref<FilterTuple>({ from: 0, to: 100 });
-const contaminationTouple = ref<FilterTuple>({ from: 0, to: 100 });
+const sizeTuple = ref<FilterTuple>({ from: 0, to: 9999999 });
+const gcTuple = ref<FilterTuple>({ from: 0, to: 75 });
+const contigTuple = ref<FilterTuple>({ from: 0, to: 1000 });
+const qualityTuple = ref<FilterTuple>({ from: 0, to: 100 });
+const contaminationTuple = ref<FilterTuple>({ from: 0, to: 100 });
 
 function filter(offset = 0) {
   let query;
@@ -42,20 +42,20 @@ function filter(offset = 0) {
       {
         field: "bakta.stats.size",
         op: "[]",
-        value: sizeTouple.value,
+        value: sizeTuple.value,
       },
 
       {
         field: "bakta.stats.gc",
         op: "[]",
-        value: { from: gcTouple.value.from / 100, to: gcTouple.value.to / 100 },
+        value: { from: gcTuple.value.from / 100, to: gcTuple.value.to / 100 },
       },
       // Contig Count Filter
 
       {
         field: "bakta.stats.no_sequences",
         op: "[]",
-        value: contigTouple.value,
+        value: contigTuple.value,
       },
 
       // Quality Filter
@@ -63,7 +63,7 @@ function filter(offset = 0) {
       {
         field: "checkm2.quality.completeness",
         op: "[]",
-        value: qualityTouple.value,
+        value: qualityTuple.value,
       },
 
       // Contamination Filter
@@ -71,7 +71,7 @@ function filter(offset = 0) {
       {
         field: "checkm2.quality.contamination",
         op: "[]",
-        value: contaminationTouple.value,
+        value: contaminationTuple.value,
       },
     ],
   };
@@ -109,16 +109,16 @@ onMounted(filter);
       <div class="row">
         <div class="col">
           <div class="rounded bg-body-secondary p-4 mb-4">
-            <QueryFilter label="Size" v-model="sizeTouple"
-              @update:modelValue="(newValue: FilterTuple) => (sizeTouple = newValue)" />
-            <QueryFilter label="GC Ratio" v-model="gcTouple"
-              @update:modelValue="(newValue: FilterTuple) => (gcTouple = newValue)" />
-            <QueryFilter label="Contig Count" v-model="contigTouple"
-              @update:modelValue="(newValue: FilterTuple) => (contigTouple = newValue)" />
-            <QueryFilter label="Quality" v-model="qualityTouple"
-              @update:modelValue="(newValue: FilterTuple) => (qualityTouple = newValue)" />
-            <QueryFilter label="Contamination" v-model="contaminationTouple"
-              @update:modelValue="(newValue: FilterTuple) => (contaminationTouple = newValue)" />
+            <QueryFilter label="Size" v-model="sizeTuple"
+              @update:modelValue="(newValue: FilterTuple) => (sizeTuple = newValue)" />
+            <QueryFilter label="GC Ratio" v-model="gcTuple"
+              @update:modelValue="(newValue: FilterTuple) => (gcTuple = newValue)" />
+            <QueryFilter label="Contig Count" v-model="contigTuple"
+              @update:modelValue="(newValue: FilterTuple) => (contigTuple = newValue)" />
+            <QueryFilter label="Quality" v-model="qualityTuple"
+              @update:modelValue="(newValue: FilterTuple) => (qualityTuple = newValue)" />
+            <QueryFilter label="Contamination" v-model="contaminationTuple"
+              @update:modelValue="(newValue: FilterTuple) => (contaminationTuple = newValue)" />
             <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
           </div>
         </div>

From 9772444a2d8492aa4dfb2b25c9e30c9eecb4c852 Mon Sep 17 00:00:00 2001
From: Lukas Jelonek <lukas.jelonek@computational.bio.uni-giessen.de>
Date: Thu, 7 Sep 2023 13:50:46 +0200
Subject: [PATCH 12/12] Remove unnecessary event listeners

---
 src/components/QueryFilter.vue | 29 ++++++++++++++++-------------
 src/views/BrowseView.vue       | 34 +++++++++++++++++-----------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/QueryFilter.vue b/src/components/QueryFilter.vue
index 9df1263..a88d715 100644
--- a/src/components/QueryFilter.vue
+++ b/src/components/QueryFilter.vue
@@ -1,26 +1,16 @@
 <template>
   <div class="input-group mb-3">
     <span class="input-label input-group-text">{{ label }}:</span>
-    <input
-      class="form-control"
-      type="text"
-      v-model.number="$props.modelValue.from"
-      @change="$emit('update:modelValue', $props.modelValue)"
-    />
+    <input class="form-control" type="text" v-model.number="from" />
     <span class="input-group-text">Min</span>
-    <input
-      class="form-control"
-      type="text"
-      v-model.number="$props.modelValue.to"
-      @change="$emit('update:modelValue', $props.modelValue)"
-    />
+    <input class="form-control" type="text" v-model.number="to" />
     <span class="input-group-text">Max</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType } from "vue";
 import type { FilterTuple } from "@/views/BrowseView.vue";
+import { computed, type PropType } from "vue";
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -30,6 +20,19 @@ const props = defineProps({
 const emits = defineEmits<{
   (e: "update:modelValue", value: FilterTuple): void;
 }>();
+
+const from = computed({
+  get: () => props.modelValue.from,
+  set: (x) => {
+    emits("update:modelValue", { ...props.modelValue, from: x });
+  },
+});
+const to = computed({
+  get: () => props.modelValue.to,
+  set: (x) => {
+    emits("update:modelValue", { ...props.modelValue, to: x });
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/views/BrowseView.vue b/src/views/BrowseView.vue
index 9ed2464..0c33407 100644
--- a/src/views/BrowseView.vue
+++ b/src/views/BrowseView.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, type Ref, computed } from "vue";
-import ResultTable from "@/views/search/ResultTable.vue";
-import QueryFilter from "@/components/QueryFilter.vue";
 import { useApi } from "@/BakrepApi";
-import CenteredLargeSpinner from "@/components/CenteredLargeSpinner.vue";
+import usePageState, { State } from "@/PageState";
 import Loading from "@/components/Loading.vue";
+import QueryFilter from "@/components/QueryFilter.vue";
 import {
   empty,
   toPosition,
@@ -13,7 +11,8 @@ import {
 } from "@/components/pagination/Pagination";
 import Pagination from "@/components/pagination/Pagination.vue";
 import type { BakrepSearchResultEntry } from "@/model/BakrepSearchResult";
-import usePageState, { State } from "@/PageState";
+import ResultTable from "@/views/search/ResultTable.vue";
+import { computed, onMounted, ref, type Ref } from "vue";
 const searchState = usePageState();
 const entries: Ref<BakrepSearchResultEntry[]> = ref([]);
 const pageState = usePageState();
@@ -109,17 +108,14 @@ onMounted(filter);
       <div class="row">
         <div class="col">
           <div class="rounded bg-body-secondary p-4 mb-4">
-            <QueryFilter label="Size" v-model="sizeTuple"
-              @update:modelValue="(newValue: FilterTuple) => (sizeTuple = newValue)" />
-            <QueryFilter label="GC Ratio" v-model="gcTuple"
-              @update:modelValue="(newValue: FilterTuple) => (gcTuple = newValue)" />
-            <QueryFilter label="Contig Count" v-model="contigTuple"
-              @update:modelValue="(newValue: FilterTuple) => (contigTuple = newValue)" />
-            <QueryFilter label="Quality" v-model="qualityTuple"
-              @update:modelValue="(newValue: FilterTuple) => (qualityTuple = newValue)" />
-            <QueryFilter label="Contamination" v-model="contaminationTuple"
-              @update:modelValue="(newValue: FilterTuple) => (contaminationTuple = newValue)" />
-            <button class="btn btn-light w-100" @click="filter()">Apply Filter</button>
+            <QueryFilter label="Size" v-model="sizeTuple" />
+            <QueryFilter label="GC Ratio" v-model="gcTuple" />
+            <QueryFilter label="Contig Count" v-model="contigTuple" />
+            <QueryFilter label="Quality" v-model="qualityTuple" />
+            <QueryFilter label="Contamination" v-model="contaminationTuple" />
+            <button class="btn btn-light w-100" @click="filter()">
+              Apply Filter
+            </button>
           </div>
         </div>
       </div>
@@ -130,7 +126,11 @@ onMounted(filter);
           }}
           of {{ pagination.total }} results
           <ResultTable :entries="entries" />
-          <Pagination class="mt-3" :value="pagination" @update:offset="filter" />
+          <Pagination
+            class="mt-3"
+            :value="pagination"
+            @update:offset="filter"
+          />
         </div>
       </Loading>
     </loading>