array to chips in structure db

components/AccessionChips.vue → components/CollapsibleChips.vue

 <script setup lang="ts">
 
+
+interface item {
+    title: string;
+    href?: string | undefined
+}
+
 export interface Props {
-    accessions: string[];
+    items: item[];
     itemsToDisplay?: number;
-    baseUrl: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    pfamString: null,
-    itemsToDisplay: 2,
+    items: () => [],
+    itemsToDisplay: 1,
+
 });
-// const accessions = computed(() => {
-//     if (props.accessionString === null) {
-//         return [];
-//     } else {
-//         return props.accessionString.split(",").map((acc) => acc.trim());
-//     }
-// });
+
 const show = ref(false);
 
-function constructUrl(accession: string) {
-    return new URL(accession, props.baseUrl).toString();
-}
+
 </script>
 <template>
     <!-- class="d-inline-flex justify-start align-center" -->
 
     <span v-if="show" class="d-flex flex-wrap align-center justify-start">
-        <template v-if="accessions.length > itemsToDisplay">
-            <template v-for="(acc) in accessions" :key="acc">
-                <v-chip :href="constructUrl(acc)" target="_blank" color="info" class="mr-1 my-1 align-self-center"
-                    size="small">
-                    {{ acc }}
+        <template v-if="items.length > itemsToDisplay">
+            <template v-for="item in items" :key="acc">
+                <v-chip :href="item?.href" :target="item?.href === undefined ? item?.href : '_blank'" color="info"
+                    class="mr-1 my-1 align-self-center" size="small">
+                    {{ item.title }}
                 </v-chip>
             </template>
         </template>
-        <v-btn v-if="itemsToDisplay < accessions.length" variant="text" :icon="'mdi-chevron-up'"
-            @click="show = !show"></v-btn>
+        <v-btn v-if="itemsToDisplay < items.length" variant="text" :icon="'mdi-chevron-up'" @click="show = !show"></v-btn>
     </span>
     <span v-else class="d-flex flex-wrap align-center justify-start">
-        <template v-for="(acc, index) in accessions" :key="acc">
-            <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructUrl(acc)" target="_blank"
-                color="info" class="mr-1 my-1 align-self-center" size="small">
-                {{ acc }}
+        <template v-for="(item, index) in items" :key="acc">
+            <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="item?.href"
+                :target="item?.href === undefined ? item?.href : '_blank'" color="info" class="mr-1 my-1 align-self-center"
+                size="small">
+                {{ item.title }}
             </v-chip>
             <template v-if="index === itemsToDisplay">
                 <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1"
                     @click="show = !show">
-                    (+{{ accessions.length - itemsToDisplay }} others)
+                    (+{{ items.length - itemsToDisplay }} others)
                 </v-chip>
-                <v-btn v-if="itemsToDisplay < accessions.length && !show" variant="text" :icon="'mdi-chevron-down'"
+                <v-btn v-if="itemsToDisplay < items.length && !show" variant="text" :icon="'mdi-chevron-down'"
                     @click="show = !show"></v-btn>
             </template>
         </template>

components/ServerDbTable.vue

@@ -55,7 +55,7 @@ let loading = ref(false)
 const { height } = useDisplay();
 const minTableHeight = ref(400)
 const computedTableHeight = computed(() => {
-    const computedHeight = height.value - 500
+    const computedHeight = height.value - 350
     return computedHeight > minTableHeight.value ? computedHeight : minTableHeight.value
 })
 
@@ -321,6 +321,17 @@ function runTextSearch() {
     }
 }
 
+function namesToCollapsibleChips(names: string[]) {
+    return names.filter((it) => it !== "").map(it => ({ title: it }))
+}
+
+function namesToAccessionChips(names: string[]) {
+    return namesToCollapsibleChips(names).map(it => {
+        return { ...it, href: new URL(it.title, "http://toto.pasteur.cloud").toString() }
+    })
+}
+
+
 </script>
 <template>
     <v-card flat>
@@ -364,7 +375,18 @@ function runTextSearch() {
             :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 }">
-                <accession-chips :accessions="item.accession_in_sys" baseUrl="http://toto.pasteur.cloud"></accession-chips>
+                <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips>
+            </template>
+            <template #[`item.proteins_in_the_prediction`]="{ item }">
+                <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction)"></CollapsibleChips>
+            </template>
+            <template #[`item.system_genes`]="{ item }">
+                <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
+            </template>
+
+            <template #[`item.completed`]="{ item }">
+                <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-server>
         <v-alert v-else type="error">

components/content/StructureDb.vue

@@ -7,16 +7,20 @@ const facets = ref(["system", "completed",
     "plddts",])
 const headers: Ref<Object[]> = ref([
     { title: "System", key: "system" },
+    { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false },
+    { title: "System genes", key: "system_genes", sortable: false },
     { title: "Completed", key: "completed" },
     { title: "Predition type", key: "prediction_type" },
     { title: "Num of genes", key: "system_number_of_genes" },
     { title: "pLDDT", key: "plddts" },
+    { title: "iptm+ptm", key: "iptm+ptm" },
+    { title: "pDockQ", key: "pDockQ" },
     { title: "Type", key: "type" }
 ])
 
 </script>
 <template>
-    <ServerDbTable title="Predicted Strucutres" db="structure" :sortBy="sortBy" :headers="computedHeaders"
-        :item-value="itemValue" :facets="facets">
+    <ServerDbTable title="Predicted Strucutres" db="structure" :sortBy="sortBy" :headers="headers" :item-value="itemValue"
+        :facets="facets">
     </ServerDbTable>
 </template>
\ No newline at end of file