diff --git a/components/AccessionChips.vue b/components/AccessionChips.vue
deleted file mode 100644
index 76048b353b6b0e9a873e9de133c6dd3d1b8f4574..0000000000000000000000000000000000000000
--- a/components/AccessionChips.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-
-export interface Props {
- accessions: string[];
- itemsToDisplay?: number;
- baseUrl: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
- pfamString: null,
- itemsToDisplay: 2,
-});
-// 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 }}
- </v-chip>
- </template>
- </template>
- <v-btn v-if="itemsToDisplay < accessions.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 }}
- </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)
- </v-chip>
- <v-btn v-if="itemsToDisplay < accessions.length && !show" variant="text" :icon="'mdi-chevron-down'"
- @click="show = !show"></v-btn>
- </template>
- </template>
-
- </span>
-</template>
\ No newline at end of file
diff --git a/components/CollapsibleChips.vue b/components/CollapsibleChips.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b211ba1afa2c4815ed00629cf5ebdd09793591bf
--- /dev/null
+++ b/components/CollapsibleChips.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+
+interface item {
+ title: string;
+ href?: string | undefined
+}
+
+export interface Props {
+ items: item[];
+ itemsToDisplay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+ items: () => [],
+ itemsToDisplay: 1,
+
+});
+
+const show = ref(false);
+
+
+</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="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 < 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="(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">
+ (+{{ items.length - itemsToDisplay }} others)
+ </v-chip>
+ <v-btn v-if="itemsToDisplay < items.length && !show" variant="text" :icon="'mdi-chevron-down'"
+ @click="show = !show"></v-btn>
+ </template>
+ </template>
+
+ </span>
+</template>
\ No newline at end of file
diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue
index fdabd8a52d59a1c6dcbd2d6ad05477ef1634a50e..febe44253347aeca288f5b60d6070c8b526bf172 100644
--- a/components/ServerDbTable.vue
+++ b/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">
diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue
index 986fdb8ab6878a29476a2a13dd163713bcd37e59..0233361b1af6c3a077ab0ffe754568d93b9d6c83 100644
--- a/components/content/StructureDb.vue
+++ b/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