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..2993b25b44439a11870cc759915a3d6b4681285c 100644
--- a/components/Nav/PrevNext.vue
+++ b/components/Nav/PrevNext.vue
@@ -3,7 +3,7 @@ const { surround } = useContent();
</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/content/ListSystems.vue b/components/content/ListSystems.vue
index 7816bd5b7bb72b2634b582b68b6bd6875a8461c2..c1181f4a622cadfc11794d278ea2eb7a3372edae 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 }">
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..e3f27c2f04267e3cc0881bb87847d7ba819a2483 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,13 @@ 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-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-toolbar color="primary" density="compact"><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar>
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>