diff --git a/frontend/components/AnalysisResultDataTable.vue b/frontend/components/AnalysisResultDataTable.vue index dcda55683be704b58737153696f1cc5b92bfac9b..bfab4fd6a288bb3e2ba033fe5456e9d1c6ceb342 100644 --- a/frontend/components/AnalysisResultDataTable.vue +++ b/frontend/components/AnalysisResultDataTable.vue @@ -1,6 +1,7 @@ <script setup lang="ts"> import { useWikiUrl } from '~/composables/useWikiUrl'; import { useSelectedProtein } from '@/composables/useSelectedProtein' +import CollapsibleChips from './CollapsibleChips.vue'; interface Props { items: any[] headers: Object[] @@ -25,6 +26,9 @@ const computedItems = computed(() => { }) } else { return [] } }) +function namesToCollapsibleChips(names: string[]) { + return names.filter((it) => it !== "").map(it => ({ title: it })) +} </script> @@ -47,6 +51,11 @@ const computedItems = computed(() => { </v-chip> </template> + <template #[`item.protein_in_syst`]="{ item }"> + <CollapsibleChips :items="namesToCollapsibleChips(item.protein_in_syst)"> + </CollapsibleChips> + </template> + </v-data-table> diff --git a/frontend/components/CollapsibleChips.vue b/frontend/components/CollapsibleChips.vue new file mode 100644 index 0000000000000000000000000000000000000000..2f7a08ea757cc5e74d5f59d1f3f060065fdad0d5 --- /dev/null +++ b/frontend/components/CollapsibleChips.vue @@ -0,0 +1,57 @@ +<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="item.title"> + <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="item.title"> + <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0 || items.length - itemsToDisplay === 1" :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 && items.length - itemsToDisplay > 1"> + <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/frontend/pages/analyses/[analysisId]/systems.vue b/frontend/pages/analyses/[analysisId]/systems.vue index 4fedf30889f0be87f9d980da343ec6aa78dd80ba..1b50c42cc2f178bf2d80d357c38a9e0bdde04369 100644 --- a/frontend/pages/analyses/[analysisId]/systems.vue +++ b/frontend/pages/analyses/[analysisId]/systems.vue @@ -19,8 +19,9 @@ const headers = ref([ const sanitizedSystems = computed(() => { if (systems.value?.systems) { return systems.value.systems.map((system) => { - if (system.type === 'CasFinder') return { ...system, type: 'Cas' } - return system + let newSystem = { ...system, protein_in_syst: system.protein_in_syst.split(',') } + if (system.type === 'CasFinder') return { ...newSystem, type: 'Cas' } + return newSystem }) } else { return [] } })