sortable server tables

composables/useFetchMsDocument.ts

@@ -8,7 +8,8 @@ export function useFetchMsDocument(
     limit: Ref<number> = ref(1000),
     hitsPerPage: Ref<number> = ref(25),
     page: Ref<number> = ref(1),
-    facets: Ref<string[]> = ref([])
+    facets: Ref<string[]> = ref([]),
+    sort: Ref<string[]> = ref([]),
 ) {
     const runtimeConfig = useRuntimeConfig();
 
@@ -34,13 +35,16 @@ export function useFetchMsDocument(
     watchEffect(async () => {
         try {
             pending.value = true
-            const res = await client.index(toValue(index)).search(toValue(search), {
-                limit: toValue(limit),
-                filter: toValue(filter),
-                hitsPerPage: toValue(hitsPerPage),
-                page: toValue(page),
-                facets: toValue(facets)
-            })
+            const res = await client
+                .index(toValue(index))
+                .search(toValue(search), {
+                    limit: toValue(limit),
+                    filter: toValue(filter),
+                    hitsPerPage: toValue(hitsPerPage),
+                    page: toValue(page),
+                    facets: toValue(facets),
+                    sort: toValue(sort),
+                })
             filterError.value = null
             const { hits: resHits, totalHits: resTotalHits, totalPages: resTotalPages, facetDistribution: facetD } = res
             totalHits.value = resTotalHits

packages/df-wiki-cli/df_wiki_cli/meilisearch/__init__.py

@@ -96,6 +96,18 @@ def update_refseq(
             "species",
         ]
     )
+    index.update_sortable_attributes(
+        [
+            "type",
+            "subtype",
+            "Superkingdom",
+            "phylum",
+            "order",
+            "family",
+            "genus",
+            "species",
+        ]
+    )
 
 
 def update_structure(
@@ -131,6 +143,13 @@ def update_structure(
         ]
     )
     print(attr_task)
+    index.update_sortable_attributes(
+        [
+            "system",
+            "completed",
+            "plddts",
+        ]
+    )
 
 
 def split_on_comma(str_val: str) -> List[str]:

pages/predicted-structure.vue

@@ -3,18 +3,41 @@ import { useRuntimeConfig, useFetch, type MaybeRefOrGetter, ref, computed, toVal
 
 import JsonCSV from 'vue-json-csv'
 import { useDisplay } from "vuetify";
+import { useFacetsStore, type Facets } from '~~/stores/facets'
+
+
+const facetStore = useFacetsStore()
 
 const { height } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
-    const computedHeight = height.value - 400
+    const computedHeight = height.value - 500
     return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
 })
 
+
+// SORTING
+const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'system', order: "asc" }])
+const msSortBy = computed(() => {
+    if (sortBy.value.length > 0) {
+        return sortBy.value.map((curr) => {
+            if (curr?.key && curr?.order) {
+                return `${curr.key}:${curr.order}`
+            }
+            else { return "" }
+        })
+    } else { return [""] }
+})
+
+
+
 const itemValue = ref("id");
 const search: Ref<string> = ref("");
-const filter: Ref<string | null> = ref(null)
+const filter: Ref<string> = ref('')
+const hitsPerPage: Ref<number> = ref(25)
 const limit: Ref<number> = ref(500000)
+const facets = ref(["system"])
+const page = ref(1)
 const headers: Ref<Object[]> = ref([
     { title: "System", key: "system" },
     { title: "Completed", key: "completed" },
@@ -24,14 +47,18 @@ const headers: Ref<Object[]> = ref([
     { title: "Type", key: "type" }
 ])
 const {
-    hits,
+    hits: items,
     pending,
-    totalHits,
-    filterError
+    totalHits: itemsLength,
+    filterError,
+    facetDistribution
 } = useFetchMsDocument(
-    "structure", search, filter, limit)
+    "structure", search, filter, limit, hitsPerPage, page, facets, msSortBy)
 
+watch(facetDistribution, (facetDistri) => {
 
+    facetStore.setFacets({ facetDistribution: facetDistri, facetStat: undefined })
+})
 
 </script>
 
@@ -39,12 +66,12 @@ const {
     <v-card flat>
         <v-toolbar color="primary" density="compact">
             <v-app-bar-nav-icon></v-app-bar-nav-icon>
-            <v-toolbar-title>Predicted Structures summary ({{ totalHits }})
+            <v-toolbar-title>Predicted Structures summary ({{ itemsLength }})
             </v-toolbar-title>
-            <JsonCSV :data="hits" name="predicted-structures-summary-defense-system.csv">
+            <JsonCSV :data="items" name="predicted-structures-summary-defense-system.csv">
                 <v-btn icon>
                     <v-icon icon="md:download"></v-icon>
-                    <v-tooltip activator="parent" location="bottom">Download {{ hits.length }} entries</v-tooltip>
+                    <v-tooltip activator="parent" location="bottom">Download {{ itemsLength }} entries</v-tooltip>
                 </v-btn>
             </JsonCSV>
         </v-toolbar>
@@ -55,8 +82,9 @@ const {
         <v-col cols="auto">
             <v-text-field v-model="filter" prepend-inner-icon="mdi-magnify" label="Filter" hide-details="auto" class="mx-2"
                 clearable :error-messages="filterError"></v-text-field></v-col>
-        <v-data-table-virtual ref="datatable" fixed-header :loading="pending" :headers="headers" :items="hits"
-            :item-value="itemValue" density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
+        <v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" v-model:sortBy="sortBy"
+            ref="datatable" fixed-header :loading="pending" :headers="headers" :items="items" :item-value="itemValue"
+            :items-length="itemsLength" multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
             <!-- <template v-if="refseqData?.length >= 10000" #top>
         <v-alert type="warning" variant="tonal" title="Results table"
           text="Results won't be displayed since there is over 10000 hits"></v-alert>
@@ -66,6 +94,6 @@ const {
                 <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>
                 <v-icon v-else color="warning" icon="md:dangerous"></v-icon>
             </template>
-        </v-data-table-virtual>
+        </v-data-table-server>
     </v-card>
 </template>
\ No newline at end of file

pages/refseq.vue

@@ -15,7 +15,22 @@ const computedTableHeight = computed(() => {
 })
 
 
-const facetDistriSystem = ref(false);
+
+// SORTING
+const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
+const msSortBy = computed(() => {
+  if (sortBy.value.length > 0) {
+    return sortBy.value.map((curr) => {
+      if (curr?.key && curr?.order) {
+        return `${curr.key}:${curr.order}`
+      }
+      else { return "" }
+    })
+  } else { return [""] }
+})
+
+
+
 
 
 const availableTaxo: Ref<string[]> = ref(["species", "genus", "family", "order", "phylum", "Superkingdom"]);
@@ -67,10 +82,25 @@ const computedFacets = computed(() => {
 })
 
 
-const { hits: items, pending, totalHits: itemsLength, filterError, facetDistribution } = useFetchMsDocument("refseq", search, filter, limit, hitsPerPage, page, computedFacets)
 
-watch(facetDistribution, (facetDistri) => {
+const {
+  hits: items,
+  pending,
+  totalHits: itemsLength,
+  filterError,
+  facetDistribution }
+  = useFetchMsDocument(
+    "refseq",
+    search,
+    filter,
+    limit,
+    hitsPerPage,
+    page,
+    computedFacets,
+    msSortBy
+  )
 
+watch(facetDistribution, (facetDistri) => {
   facetStore.setFacets({ facetDistribution: facetDistri, facetStat: undefined })
 })
 const computedSystemDistribution = computed(() => {
@@ -197,9 +227,9 @@ watch(hasToGenerateDownload, (val) => {
     <v-col cols="auto">
       <v-text-field v-model="filter" prepend-inner-icon="mdi-magnify" label="Filter" hide-details="auto" class="mx-2"
         clearable :error-messages="filterError"></v-text-field></v-col>
-    <v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" fixed-header :loading="pending"
-      :headers="computedHeaders" :items="items" :items-length="itemsLength" :item-value="itemValue" density="compact"
-      :height="computedTableHeight" class="elevation-1 mt-2">
+    <v-data-table-server v-model:page="page" v-model:items-per-page="hitsPerPage" v-model:sortBy="sortBy" fixed-header
+      :loading="pending" :headers="computedHeaders" :items="items" :items-length="itemsLength" :item-value="itemValue"
+      multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2">
       <template #[`item.${key}`]="{ item }" v-for="key in itemFilterKeys" :key="key">
         <v-chip @click="filter = itemToFilter(item, key)">{{ item[key] }}</v-chip>
       </template>