add collapsible chips for prot in syst of systems table

frontend/components/AnalysisResultDataTable.vue

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

frontend/components/CollapsibleChips.vue

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

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 [] }
 })