diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue index febe44253347aeca288f5b60d6070c8b526bf172..b70ead216b37e6b15b85e4b67ae3f551ef2b98c7 100644 --- a/components/ServerDbTable.vue +++ b/components/ServerDbTable.vue @@ -51,7 +51,7 @@ const filterError: Ref<string | null> = ref(null) const msFilter: Ref<string | undefined> = ref(undefined) const page = ref(1) let loading = ref(false) - +const expanded = ref([]) const { height } = useDisplay(); const minTableHeight = ref(400) const computedTableHeight = computed(() => { @@ -156,9 +156,6 @@ function clearFilterOrSearch() { } watch(msFilter, async (fos) => { - console.log("the filter change") - console.log(msFilter) - console.log(fos) searchOrFilter() search.value = '' @@ -190,10 +187,7 @@ watch(filterInputValues, (newSoF) => { }) watch(search, () => { searchOrFilter() }) -// watch(queryInputValue, (newQuery) => { -// searchOrFilter() -// }) const filterStep = computed(() => { return filterInputValues.value !== null && filterInputValues.value.length > 0 ? filterInputValues.value?.length % 3 : null @@ -371,9 +365,10 @@ function namesToAccessionChips(names: string[]) { </v-row> </v-card-text> <v-data-table-server v-if="!msError" v-model:page="reactiveParams.page" - v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" fixed-header :loading="loading" - :headers="headers" :items="msResult?.hits ?? []" :items-length="msResult?.totalHits ?? 0" - :item-value="itemValue" multi-sort density="compact" :height="computedTableHeight" class="elevation-1 mt-2"> + v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" + show-expand fixed-header :loading="loading" :headers="headers" :items="msResult?.hits ?? []" + :items-length="msResult?.totalHits ?? 0" :item-value="itemValue" multi-sort density="compact" + :height="computedTableHeight" class="elevation-1 mt-2"> <template #[`item.accession_in_sys`]="{ item }"> <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips> </template> @@ -388,6 +383,21 @@ function namesToAccessionChips(names: string[]) { <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> + + <template #expanded-row="{ columns, item }"> + <tr> + <td :colspan="columns.length"> + <v-card flat color="transparent"> + <v-card-text> + <MolstarPdbePlugin + :data-urls="['/avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb', '/avs/AVAST_I, AVAST_I__Avs1A, 0, V - plddts_85.07081.pdb']"> + </MolstarPdbePlugin> + </v-card-text> + </v-card> + </td> + </tr> + </template> + </v-data-table-server> <v-alert v-else type="error"> {{ msError }}