From 95318e320778e4422605293b7bdb8e5c47751b92 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Wed, 10 Jan 2024 14:26:29 +0100
Subject: [PATCH] ui numerical slider filters
---
components/ServerDbTable.vue | 4 --
components/content/StructureDb.vue | 71 ++++++++++++++++++------------
2 files changed, 43 insertions(+), 32 deletions(-)
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index 6826c00d..f66ae473 100644
--- a/components/ServerDbTable.vue
+++ b/components/ServerDbTable.vue
@@ -299,11 +299,7 @@ function focusedOrBlur(isFocused: boolean) {
</script>
<template>
<v-card flat color="transparent">
- <v-card-text>
- </v-card-text>
- <v-card-text>
<slot name="numerical-filters" :search="throttleSearch"></slot>
- </v-card-text>
<v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-bind="dataTableServerProps"
v-model:items-per-page="hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header
:loading="loading" :items="msResult?.hits ?? []" :items-length="totalHits" density="compact"
diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue
index 706aa84b..443068c9 100644
--- a/components/content/StructureDb.vue
+++ b/components/content/StructureDb.vue
@@ -132,34 +132,49 @@ function pdbNameToCif(pdbPath: string) {
<ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps"
:autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="numericalFilters">
<template #numerical-filters="{ search }">
- <v-row>
- <v-col cols="12" md="12" lg="4">
- <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" label="pLDDT"
- step="0.5" :min="0" :max="100" thumb-label="always" @update:modelValue="search()">
- <template #append>
- <v-btn variant="text" icon="md:restart_alt" @click="plddtsReset()"></v-btn>
- </template>
- </v-range-slider>
- </v-col>
- <v-col cols="12" md="12" lg="4">
-
- <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" label="iptm+ptm"
- step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
- <template #append>
- <v-btn variant="text" icon="md:restart_alt" @click="iptmReset()"></v-btn>
- </template>
- </v-range-slider>
- </v-col>
- <!-- pdockqReset -->
- <v-col cols="12" md="12" lg="4">
- <v-range-slider v-model="pdockqRange" strict density="compact" hide-details="auto" label="pDockQ"
- step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
- <template #append>
- <v-btn variant="text" icon="md:restart_alt" @click="pdockqReset()"></v-btn>
- </template>
- </v-range-slider>
- </v-col>
- </v-row>
+ <v-list>
+ <v-list-item>
+ <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+ pLDDT
+ </v-list-item-title>
+ <v-row>
+ <v-col class="pt-8 pl-8">
+ <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" step="0.5"
+ :min="0" :max="100" thumb-label="always" @update:modelValue="search()">
+ <template #append>
+ <v-btn variant="text" icon="md:restart_alt" @click="plddtsReset()"></v-btn>
+ </template>
+
+ </v-range-slider>
+ </v-col></v-row>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+ iptm+ptm
+ </v-list-item-title>
+ <v-row>
+ <v-col class="pt-8 pl-8">
+ <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" step="0.1"
+ :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+ <template #append>
+ <v-btn variant="text" icon="md:restart_alt" @click="iptmReset()"></v-btn>
+ </template>
+ </v-range-slider>
+ </v-col></v-row>
+ </v-list-item>
+ <v-list-item>
+ <v-list-item-title class="text-subtitle-1 text-medium-emphasis">pDockQ</v-list-item-title>
+ <v-row>
+ <v-col class="pt-8 pl-8">
+ <v-range-slider v-model="pdockqRange" density="compact" strict hide-details="auto" step="0.1"
+ :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+ <template #append>
+ <v-btn variant="text" icon="md:restart_alt" @click="pdockqReset()"></v-btn>
+ </template>
+ </v-range-slider>
+ </v-col></v-row>
+ </v-list-item>
+ </v-list>
</template>
<template #[`item.proteins_in_the_prediction`]="{ item }">
--
GitLab