Merge relevant Abstract and references

• merge the 2 sections
• Make the way references are displayed more compact

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 }}