Deal with refseq large table

components/AccessionChips.vue

+<script setup lang="ts">
+
+export interface Props {
+    accessionString: string | null;
+    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