diff --git a/components/Footer.vue b/components/Footer.vue
index 4d127df67d245406c1257325cdcd339b06a370ec..d08796d04e18f879cf7f614149980805c84dc072 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,7 +1,7 @@
<template>
<v-footer app border text-center d-flex flex-column>
- <div class="px-4 py-1 text-center w-100">
- <span><a href="https://mdmlab.fr/" target="_blank"><v-img src="/cropped-logoblue-288x129.png" inline :width="80"
+ <div class="px-4 text-center w-100">
+ <span><a href="https://mdmlab.fr/" target="_blank"><v-img src="/cropped-logoblue-288x129.png" inline :width="70"
:aspect-ratio="288 / 129"></v-img></a></span>
</div>
</v-footer>
diff --git a/components/Nav/BackToTop.vue b/components/Nav/BackToTop.vue
index faf1a66086224943736dca5b51c141fac76b8d8d..4b0831eb6e149ec76c5ea9f36e1784d6f452e433 100644
--- a/components/Nav/BackToTop.vue
+++ b/components/Nav/BackToTop.vue
@@ -1,53 +1,41 @@
<!-- from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/app/BackToTop.vue -->
<template>
- <v-layout-item
- v-scroll="onScroll"
- class="text-end pointer-events-none"
- model-value
- position="bottom"
- size="88"
- >
- <div class="ma-4">
- <v-fab-transition>
- <v-btn
- v-show="model"
- class="mt-auto pointer-events-initial"
- color="primary"
- elevation="8"
- icon="mdi-chevron-up"
- size="large"
- @click="onClick"
- />
- </v-fab-transition>
- </div>
- </v-layout-item>
- </template>
+ <v-layout-item v-scroll="onScroll" class="text-end pointer-events-none" model-value position="bottom"
+ :size="model ? 88 : 0">
+ <div class="ma-4">
+ <v-fab-transition>
+ <v-btn v-show="model" class="mt-auto pointer-events-initial" color="primary" elevation="8" icon="mdi-chevron-up"
+ size="large" @click="onClick" />
+ </v-fab-transition>
+ </div>
+ </v-layout-item>
+</template>
- <script setup>
- import { ref } from 'vue'
-
- const model = ref(false)
-
- function onScroll () {
- model.value = window.scrollY > 200
- }
-
- function onClick () {
- window.scrollTo({
- top: 0,
- behavior: 'smooth',
- })
- }
- </script>
-
- <style scoped>
- .pointer-events-none {
- pointer-events: none;
- }
+<script setup>
+import { ref } from 'vue'
+
+const model = ref(false)
+
+function onScroll() {
+ model.value = window.scrollY > 200
+}
+
+function onClick() {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ })
+}
+</script>
- .pointer-events-initial {
- pointer-events: initial;
- }
- </style>
+<style scoped>
+.pointer-events-none {
+ pointer-events: none;
+}
+
+.pointer-events-initial {
+ pointer-events: initial;
+}
+</style>
\ No newline at end of file
diff --git a/components/Nav/PrevNext.vue b/components/Nav/PrevNext.vue
index f35a9450a6441368d0903a7f5e210e9bf47a60c2..d3fa401f3d1626df3073fc84e308208528098a4e 100644
--- a/components/Nav/PrevNext.vue
+++ b/components/Nav/PrevNext.vue
@@ -1,9 +1,10 @@
<script setup lang="ts">
const { surround } = useContent();
+const { mobile } = useDisplay();
</script>
<template>
- <v-row justify="space-between">
+ <v-row justify="space-between" class="mt-0">
<v-col v-for="(surroundPage, i) in surround" :key="surroundPage?._id" :cols="mobile ? '12' : 'auto'">
<v-btn v-if="surroundPage" :prepend-icon="i === 0 ? 'mdi-arrow-left' : undefined"
:append-icon="i === 1 ? 'mdi-arrow-right' : undefined" :block="mobile ? true : false" variant="outlined"
diff --git a/components/PfamChips.vue b/components/PfamChips.vue
index a5568a8f4250e4a301153a0a6fcc7c9179276466..64d4f4b9f6982386aacc9c7aefc487e5d22f9195 100644
--- a/components/PfamChips.vue
+++ b/components/PfamChips.vue
@@ -26,53 +26,42 @@ function constructPfamUrl(pfam: string) {
}
</script>
<template>
- <v-card flat class="d-flex justify-start align-center">
- <template v-for="(pfam, index) in pfams" :key="pfam">
- <v-chip
- v-if="index < itemsToDisplay || itemsToDisplay < 0"
- :href="constructPfamUrl(pfam)"
- target="_blank"
- color="info"
- class="mr-1"
- >
- {{ pfam }}
- <v-tooltip activator="parent" location="top">{{
- pfamStore.get(pfam)?.DE ?? "none"
- }}</v-tooltip></v-chip
- >
+ <!-- class="d-inline-flex justify-start align-center" -->
+ <v-row>
+ <v-col>
+ <v-card flat color="transparent" density="compact" rounded="false">
+ <template v-for="(pfam, index) in pfams" :key="pfam">
+ <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam)" target="_blank"
+ color="info" class="mr-1 mb-1">
+ {{ pfam }}
+ <v-tooltip activator="parent" location="top">{{
+ pfamStore.get(pfam)?.DE ?? "none"
+ }}</v-tooltip></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"
- >
- (+{{ pfams.length - itemsToDisplay }} others)
- </v-chip>
- </template>
- </template>
- <template v-if="pfams.length > itemsToDisplay && show">
- <template v-for="(pfam, index) in pfams" :key="pfam">
- <v-chip
- v-if="index >= itemsToDisplay"
- :href="constructPfamUrl(pfam)"
- target="_blank"
- color="info"
- class="mr-1"
- >
- {{ pfam }}
- <v-tooltip activator="parent" location="top">{{
- pfamStore.get(pfam)?.DE ?? "none"
- }}</v-tooltip></v-chip
- >
- </template>
- </template>
- <v-btn
- v-if="itemsToDisplay < pfams.length"
- variant="text"
- :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
- @click="show = !show"
- ></v-btn>
- </v-card>
+ <template v-if="index === itemsToDisplay">
+ <span>
+ <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1 "
+ @click="show = !show">
+ (+{{ pfams.length - itemsToDisplay }} others)
+ </v-chip>
+ <v-btn v-if="itemsToDisplay < pfams.length && !show" variant="text" :icon="'mdi-chevron-down'"
+ @click="show = !show"></v-btn>
+ </span>
+ </template>
+ </template>
+ <template v-if="pfams.length > itemsToDisplay && show">
+ <template v-for="(pfam, index) in pfams" :key="pfam">
+ <v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam)" target="_blank" color="info"
+ class="mr-1 mb-1">
+ {{ pfam }}
+ <v-tooltip activator="parent" location="top">{{
+ pfamStore.get(pfam)?.DE ?? "none"
+ }}</v-tooltip></v-chip>
+ </template>
+ </template>
+ <v-btn v-if="itemsToDisplay < pfams.length && show" variant="text" :icon="'mdi-chevron-up'"
+ @click="show = !show"></v-btn>
+ </v-card>
+ </v-col>
+ </v-row>
</template>
\ No newline at end of file
diff --git a/components/content/ListSystems.vue b/components/content/ListSystems.vue
index 7816bd5b7bb72b2634b582b68b6bd6875a8461c2..f54b92baec6169c21ead750c66840858ed79af31 100644
--- a/components/content/ListSystems.vue
+++ b/components/content/ListSystems.vue
@@ -37,14 +37,14 @@ const { initPfam } = usePfamStore();
initPfam();
</script>
<template>
- <v-card variant="outlined" class="my-5">
- <v-toolbar color="primary">
+ <v-card >
+ <v-toolbar density="compact">
<v-toolbar-title>Defense Systems</v-toolbar-title>
<v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
</v-toolbar>
- <v-data-table-virtual :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
+ <v-data-table-virtual fixed-header :height="height" :items-per-page="itemsPerParge" v-model:sort-by="sortBy"
:headers="props.headers" density="compact" :custom-filter="filterOnlyCapsText" :items="props.systems"
:search="search" item-value="system.name">
<template #[`item.system`]="{ item }">
@@ -58,14 +58,7 @@ initPfam();
</template>
<template #[`item.PFAM`]="{ item }">
- <pfam-chips v-if="item.columns?.PFAM" :pfam-string="item.columns.PFAM"></pfam-chips>
- </template>
- <template #expanded-row="{ columns, item }">
- <tr>
- <td :colspan="columns.length" class="v-data-table__td v-data-table-column--align-start">
- <pfam-chips :pfam-string="item.columns.PFAM" :items-to-display="-1"></pfam-chips>
- </td>
- </tr>
+ <pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips>
</template>
</v-data-table-virtual>
</v-card>
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index c9de71ed6f9913849130abf7b3026f53fe4a4878..8806499607808025bbe03472f6310aa41e55d9a0 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -3,34 +3,50 @@ import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
export interface Props {
height?: number
- dataUrl: string
+ dataUrls: string[]
}
-
-const refinedDataUrl = computed(() => {
- if (props.dataUrl?.startsWith('/') && !props.dataUrl.startsWith('//')) {
- const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
- if (_base !== '/' && !props.dataUrl.startsWith(_base)) {
- return joinURL(_base, props.dataUrl)
+// const selectedPdb = ref('')
+const refinedDataUrls = computed(() => {
+ return props.dataUrls.map((dataUrl) => {
+ if (dataUrl?.startsWith('/') && !dataUrl.startsWith('//')) {
+ const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+ if (_base !== '/' && !dataUrl.startsWith(_base)) {
+ return joinURL(_base, dataUrl)
+ }
}
- }
- return props.dataUrl
+ return dataUrl
+ })
})
+// const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)
const props = withDefaults(defineProps<Props>(), {
height: 600,
})
-const { width } = useDisplay()
+const { width, height } = useDisplay()
const maxWidth = ref(1300)
-
+const dialog = ref(false)
+// const show = ref(false)
const computedWidth = computed(() => {
if (width > maxWidth) return maxWidth
return width
})
+const computedHeight = computed(() => {
+ return height.value - 250
+})
+
+function closeStructure() {
+ selectedPdb.value = null
+ dialog.value = false
+
+
+}
+
+
useHead({
link: [
{
@@ -54,15 +70,62 @@ useHead({
]
})
+const pdbeMolstarComponent = ref(null)
+// const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
+const selectedPdb = ref(null)
+
+watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
+ if (selectedPdb !== null) {
+ dialog.value = true
+ if (pdbeMolstarComponent.value?.viewerInstance) {
+ const viewerInstance = pdbeMolstarComponent.value.viewerInstance
+
+ // show.value = true
+
+ const customData = { url: selectedPdb, format: "pdb", binary: false }
+
+ viewerInstance.visual.update({ customData })
+
+ }
+
+ }
+})
+
</script>
<template>
- <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" height="500"
- :max-width="1300" :width="computedWidth - 950" position="relative">
- <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" hide-expand-icon="true"
- hide-controls="true" landscape="true" sequence-panel></pdbe-molstar>
- </v-sheet>
+ <v-row><v-col><v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
+ hide-details="auto"></v-select></v-col></v-row>
+
+ <v-row justify="center">
+ <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
+ <v-card flat :rounded="false">
+ <v-toolbar color="primary">
+ <v-toolbar-title>Strucutures</v-toolbar-title>
+ <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
+ hide-details="auto"></v-select>
+ <v-spacer></v-spacer>
+
+ <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn>
+ <v-btn icon @click="closeStructure">
+ <v-icon>mdi-close</v-icon>
+ </v-btn>
+
+ </v-toolbar>
+ <v-card-text>
+
+ <v-sheet v-if="selectedPdb"
+ class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
+ :height="computedHeight" :max-width="1300" :width="computedWidth" position="relative">
+ <pdbe-molstar ref="pdbeMolstarComponent" hide-controls :custom-data-url="selectedPdb"
+ custom-data-format="pdb"></pdbe-molstar>
+ </v-sheet>
+ </v-card-text>
+
+ </v-card>
+ </v-dialog>
+ </v-row>
</template>
diff --git a/content/3.defense-systems/avs.md b/content/3.defense-systems/avs.md
index b2a457097cb51fe823f844b5b225c49d2819bb06..06f7b8a0eef31bedad7cd2972127b83eb8966b98 100644
--- a/content/3.defense-systems/avs.md
+++ b/content/3.defense-systems/avs.md
@@ -60,22 +60,19 @@ Among the 22k complete genomes of RefSeq, this system is present in 1046 genomes
## Structure
-### AVAST I
-::molstar-pdbe-plugin
----
-height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
----
-::
-
+### Avs_I
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
+dataUrls:
+ - /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
+ - /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
+ - /avs/AVAST_I,AVAST_I__Avs1C,0,V-plddts_81.74849.pdb
---
::
+
## Structure
### Avs_I
@@ -83,21 +80,10 @@ dataUrl: /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
----
-::
-
-::molstar-pdbe-plugin
----
-height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
----
-::
-
-::molstar-pdbe-plugin
----
-height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1C,0,V-plddts_81.74849.pdb
+dataUrls:
+ - /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
+ - /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
+ - /avs/AVAST_I,AVAST_I__Avs1C,0,V-plddts_81.74849.pdb
---
::
@@ -106,7 +92,8 @@ dataUrl: /avs/AVAST_I,AVAST_I__Avs1C,0,V-plddts_81.74849.pdb
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_II__Avs2A-plddts_86.07393.pdb
+dataUrls:
+ - /avs/AVAST_II__Avs2A-plddts_86.07393.pdb
---
::
@@ -115,14 +102,9 @@ dataUrl: /avs/AVAST_II__Avs2A-plddts_86.07393.pdb
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_III,AVAST_III__Avs3A,0,V-plddts_81.87773.pdb
----
-::
-
-::molstar-pdbe-plugin
----
-height: 700
-dataUrl: /avs/AVAST_III,AVAST_III__Avs3B,0,V-plddts_71.16048.pdb
+dataUrls:
+ - /avs/AVAST_III,AVAST_III__Avs3A,0,V-plddts_81.87773.pdb
+ - /avs/AVAST_III,AVAST_III__Avs3B,0,V-plddts_71.16048.pdb
---
::
@@ -131,7 +113,8 @@ dataUrl: /avs/AVAST_III,AVAST_III__Avs3B,0,V-plddts_71.16048.pdb
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_IV__Avs4A-plddts_87.35544.pdb
+dataUrls:
+ - /avs/AVAST_IV__Avs4A-plddts_87.35544.pdb
---
::
@@ -140,7 +123,8 @@ dataUrl: /avs/AVAST_IV__Avs4A-plddts_87.35544.pdb
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_V__Avs5A-plddts_89.56857.pdb
+dataUrls:
+ - /avs/AVAST_V__Avs5A-plddts_89.56857.pdb
---
::
diff --git a/layouts/article-no-toc.vue b/layouts/article-no-toc.vue
index a7a46c5f3424df7bc558c416c4f893d66f42d098..2a009555ac7e554f8c37f72e0983d457a5beb8a5 100644
--- a/layouts/article-no-toc.vue
+++ b/layouts/article-no-toc.vue
@@ -4,7 +4,7 @@ const { page } = useContent();
import { useDisplay } from 'vuetify'
// const { isDark } = useCustomTheme()
-const { mobile } = useDisplay()
+// const { mobile } = useDisplay()
</script>
diff --git a/layouts/article.vue b/layouts/article.vue
index 1480e3f290ac696aaf3d64fc10d901dc12c05900..64e4f13a0fcea8c523b2361f98226d40ad995154 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -4,7 +4,7 @@ const { page, surround, prev, next } = useContent();
import { useDisplay } from 'vuetify'
// const { isDark } = useCustomTheme()
-const { mobile } = useDisplay()
+// const { mobile } = useDisplay()
console.log("================================")
console.log(surround)
console.log(prev)
diff --git a/pages/defense-systems.vue b/pages/defense-systems.vue
index 2ad4c2e6db1bbcab4ce340977a4ed2ddfc74792b..f0754901d99a0ce087b4b4ea1dff30ea8fdc4c35 100644
--- a/pages/defense-systems.vue
+++ b/pages/defense-systems.vue
@@ -53,6 +53,6 @@ const systems = computed(() => {
</script>
<template>
<v-card flat color="transparent">
- <ListSystems :headers="headers" :systems="systems" :height="height - 405"></ListSystems>
+ <ListSystems :headers="headers" :systems="systems" :height="height - 350"></ListSystems>
</v-card>
</template>
\ No newline at end of file
diff --git a/pages/refseq.vue b/pages/refseq.vue
index e68426c6bcbe0da55384b702cd5e706c060dc1f0..85d78f2391c3f7cc1d765619a94bb944741d3592 100644
--- a/pages/refseq.vue
+++ b/pages/refseq.vue
@@ -3,7 +3,11 @@ import * as Plot from "@observablehq/plot";
import PlotFigure from "~/components/PlotFigure";
import { useDisplay } from "vuetify";
-const { width, lgAndDown } = useDisplay();
+const { width, height } = useDisplay();
+
+const computedTableHeight = computed(() => {
+ return height.value - 350
+})
const drawer = ref(true);
// const { data } = await useAsyncData("refseq", () =>
@@ -21,7 +25,7 @@ const {
);
const availableTaxo = ref(["species", "genus", "phylum"]);
-const selectedTaxoRank = ref("phylum");
+const selectedTaxoRank = ref("genus");
const sanitizedRefseq = computed(() => {
if (refseqData.value?.body) {
return refseqData.value.body;
@@ -34,8 +38,8 @@ const computedWidth = computed(() => {
return Math.max(width.value, 550);
});
-const height = computed(() => {
- return computedWidth.value / 3;
+const plotHeight = computed(() => {
+ return computedWidth.value / 4;
});
const search = ref("");
@@ -90,24 +94,25 @@ const computedDistriSystemOptions = computed(() => {
: {
x: "type",
tip: true,
+ fill: "#6750a4",
// fill: selectedTaxoRank.value,
sort: { x: "-y" },
};
return {
- marginLeft: facetDistriSystem.value ? 120 : 30,
- marginBottom: facetDistriSystem.value ? 120 : 120,
+ marginLeft: 30,
+ marginBottom: 120,
x: { label: null, tickRotate: 70 },
y: { grid: true },
color: { legend: true },
width: computedWidth.value,
- height: facetDistriSystem.value ? height.value * 8 : height.value * 2,
+ height: plotHeight.value,
marks: [
- Plot.frame(),
+ // Plot.frame(),
Plot.barY(
unref(selectedRefSeq.value),
Plot.groupX(
- { y: facetDistriSystem.value ? "proportion-facet" : "count" },
+ { y: "count" },
groupYOption
)
),
@@ -116,43 +121,31 @@ const computedDistriSystemOptions = computed(() => {
});
const computedDistriTaxoOptions = computed(() => {
- const groupYOption = facet.value
- ? {
- y: "type",
- fy: selectedTaxoRank.value,
- fill: "type",
- tip: true,
- sort: { x: "-y" },
- }
- : {
- y: selectedTaxoRank.value,
- tip: true,
- fill: "type",
- // offset: "normalize",
- sort: { y: "x", reverse: true },
- };
+ const groupYOption = {
+ x: selectedTaxoRank.value,
+ // fx: selectedTaxoRank.value,
+ tip: true,
+ // fill: "type",
+ fill: "#6750a4",
+ // offset: "normalize",
+ sort: { x: "-y" },
+ };
return {
- // style: {
- // width: "100%",
- // "max-width": "100%",
- // },
-
- marginLeft: 110,
- marginRight: facet.value ? 110 : 20,
+ // marginLeft: 110,
marginBottom: 100,
grid: true,
- x: { percent: true },
+ // x: { percent: true },
// x: { label: facet.value ? "Count" : null, tickRotate: 90 },
// y: { nice: true },
color: { legend: true },
width: computedWidth.value,
- height: facet.value ? height.value * 4.3 : height.value,
+ height: plotHeight.value,
marks: [
- Plot.frame(),
- Plot.barX(
+ // Plot.frame(),
+ Plot.barY(
unref(selectedRefSeq.value),
- Plot.groupY({ x: "count" }, groupYOption)
+ Plot.groupX({ y: "proportion" }, groupYOption)
),
],
};
@@ -161,11 +154,12 @@ const computedDistriTaxoOptions = computed(() => {
<template>
<v-card>
- <v-toolbar color="primary"><v-toolbar-title> REFSEQ</v-toolbar-title>
+ <v-toolbar density="compact"><v-toolbar-title> REFSEQ</v-toolbar-title>
<v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field></v-toolbar>
- <v-data-table-virtual v-model="selected" :headers="headers" :items="sanitizedRefseq" :item-value="itemValue"
- density="compact" :search="search" :custom-filter="filterOnlyCapsText" height="800" show-select class="elevation-1">
+ <v-data-table-virtual fixed-header v-model="selected" :headers="headers" :items="sanitizedRefseq"
+ :item-value="itemValue" density="compact" :search="search" :custom-filter="filterOnlyCapsText"
+ :height="computedTableHeight" show-select class="elevation-1">
<template #[`item.type`]="{ item }">
<v-chip variant="text" link :to="`/defense-systems/${item.type.toLowerCase()}`">{{
@@ -175,13 +169,16 @@ const computedDistriTaxoOptions = computed(() => {
</v-data-table-virtual>
</v-card>
<v-card class="my-3">
- <v-toolbar color="primary"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar>
+ <v-card-title> Systems Distribution</v-card-title>
+
+ <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar> -->
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
<v-card>
- <v-toolbar color="primary"><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar>
+ <v-card-title> Taxonomic Distribution</v-card-title>
+ <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Taxonomy</v-toolbar-title></v-toolbar> -->
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>