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(() => {
@@ -61,7 +61,7 @@ const computedTableHeight = computed(() => {
 
 
 const filterInputValues = computed(() => {
-    console.log("recompouted FILTER value")
+    // console.log("recompouted FILTER value")
     if (filterOrSearch.value != null) {
         return filterOrSearch.value.filter(({ props }) => props.type !== 'text')
     } else {
@@ -70,7 +70,7 @@ const filterInputValues = computed(() => {
 })
 
 const queryInputValue = computed(() => {
-    console.log("recompouted TEXT value")
+    // console.log("recompouted TEXT value")
 
     if (filterOrSearch.value !== null) {
         const phrase = filterOrSearch.value
@@ -156,17 +156,14 @@ function clearFilterOrSearch() {
 }
 
 watch(msFilter, async (fos) => {
-    console.log("the filter change")
-    console.log(msFilter)
-    console.log(fos)
     searchOrFilter()
     search.value = ''
 
 })
 
 watch(msResult, (newRes) => {
-    console.log(msResult)
-    console.log(newRes)
+    // console.log(msResult)
+    // console.log(newRes)
     facetStore.setFacets({ facetDistribution: newRes.facetDistribution, facetStat: newRes.facetStat })
 }, { deep: true })
 
@@ -190,10 +187,6 @@ 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
@@ -214,7 +207,7 @@ const operatorItems = ref([
 
 const autocompleteItems = computed(() => {
     const index = filterOrSearch.value?.length ?? 0
-    console.log(index)
+    // console.log(index)
     if (filterStep.value === null || filterStep.value === 0) {
         return props.facets.map(value => {
             return {
@@ -237,9 +230,9 @@ const autocompleteItems = computed(() => {
         if (Array.isArray(filterOrSearch.value)) {
             const { type, value } = filterOrSearch.value?.slice(-2, -1)[0]
             const sanitizedValue = value.split("-")[0]
-            console.log("compute new facets")
+            // console.log("compute new facets")
             const facetDistri = facetStore.facets?.facetDistribution
-            console.log(facetDistri)
+            // console.log(facetDistri)
             return facetDistri?.[sanitizedValue] ? Object.entries(facetDistri[sanitizedValue]).map(([key, val]) => {
                 return {
                     type: "value", value: `${key}-${index}`, title: key, count: val, deletable: true, props: {
@@ -264,33 +257,33 @@ function selectItem(item) {
 }
 
 function deleteOneFilter(index: number) {
-    console.log("deleteOnefilter")
-    console.log(index)
-    console.log(isFilter.value)
-    console.log(filterOrSearch)
+    // console.log("deleteOnefilter")
+    // console.log(index)
+    // console.log(isFilter.value)
+    // console.log(filterOrSearch)
     if (isFilter.value) {
 
         filterOrSearch.value?.splice(index - 2, 2)
-        console.log(filterOrSearch.value)
+        // console.log(filterOrSearch.value)
 
     }
 
 }
 
 function deleteTextFilter(index: number) {
-    console.log("delete text filter")
-    console.log(index)
-    console.log(isFilter.value)
-    console.log(filterOrSearch)
-    console.log(filterOrSearch.value?.length)
+    // console.log("delete text filter")
+    // console.log(index)
+    // console.log(isFilter.value)
+    // console.log(filterOrSearch)
+    // console.log(filterOrSearch.value?.length)
     if (isFilter.value) {
         if (index === 0) {
             filterOrSearch.value?.shift()
         } else {
             filterOrSearch.value?.splice(index, 1)
         }
-        console.log(filterOrSearch.value?.length)
-        console.log(filterOrSearch.value)
+        // console.log(filterOrSearch.value?.length)
+        // console.log(filterOrSearch.value)
 
     }
 
@@ -334,7 +327,7 @@ function namesToAccessionChips(names: string[]) {
 
 </script>
 <template>
-    <v-card flat>
+    <v-card flat color="transparent">
         <v-card-text>
             <v-row>
                 <v-col cols="5">
@@ -370,10 +363,11 @@ function namesToAccessionChips(names: string[]) {
                 </v-col>
             </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-data-table-server v-if="!msError" v-model:page="reactiveParams.page" color="primary"
+            v-model:items-per-page="reactiveParams.hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded"
+            fixed-header :loading="loading" :headers="headers" :items="msResult?.hits ?? []"
+            :items-length="msResult?.totalHits ?? 0" :item-value="itemValue" 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 +382,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 }}