fix some ux

components/Footer.vue

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

components/Nav/BackToTop.vue

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

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"

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

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

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>