use ServerDbTable for refseq

components/LayoutWrapper.vue

@@ -3,12 +3,14 @@ export interface Props {
   fluid?: boolean
   toc?: boolean
   edit?: boolean
+  navDrawer?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   fluid: false,
   toc: true,
-  edit: true
+  edit: true,
+  navDrawer: true
 });
 const drawer = ref(true);
 
@@ -28,16 +30,23 @@ function onScroll() {
   <VApp>
     <v-main style="min-height: 300px">
       <v-container v-scroll="onScroll" :fluid="fluid">
-        <slot />
-        <!-- </v-card-text>
+        <v-row justify="center">
+          <v-col cols="auto">
+            <v-card flat color="transparent" :max-width="fluid ? undefined : 1280">
+
+              <slot />
+              <!-- </v-card-text>
           </v-card> -->
-        <EditGitlab v-if="edit" />
-        <NavPrevNext v-if="edit" />
+              <EditGitlab v-if="edit" />
+              <NavPrevNext v-if="edit" />
+            </v-card>
+          </v-col>
+        </v-row>
       </v-container>
       <!-- <Footer></Footer> -->
     </v-main>
-    <NavNavbar v-model:drawer="drawer" :density="density"  />
-    <slot name="drawer" :drawer="drawer">
+    <NavNavbar v-model:drawer="drawer" :density="density" :drawer-enabled="navDrawer"/>
+    <slot v-if="navDrawer" name="drawer" :drawer="drawer">
       <NavDrawer :drawer="drawer" />
     </slot>
     <NavTableOfContent v-if="toc" :links="page.body.toc.links" />

components/Nav/Navbar.vue

@@ -5,6 +5,7 @@ import { useDisplay, useTheme } from "vuetify";
 export interface Props {
   density: 'prominent' | 'compact'
   drawer: boolean
+  drawerEnabled: boolean
 }
 const runtimeConfig = useRuntimeConfig();
 
@@ -15,7 +16,8 @@ const theme = useTheme();
 const switchTheme = ref(false)
 const props = withDefaults(defineProps<Props>(), {
   density: "prominent",
-  drawer: true
+  drawer: true,
+  drawerEnabled: true
 });
 const emit = defineEmits(['update:drawer'])
 function toggleTheme() {
@@ -52,7 +54,7 @@ function toggleDrawer() {
 </script>
 <template>
   <v-app-bar :elevation="0" border name="app-bar" :density="density" color="background">
-    <template #prepend>
+    <template v-if="drawerEnabled" #prepend>
       <v-app-bar-nav-icon @click.stop="toggleDrawer"></v-app-bar-nav-icon>
       <!-- <Logo height="45px" /> -->
     </template>

components/content/RefseqDb.vue

 <script setup lang="ts">
+import { useFacetsStore } from '~~/stores/facets'
+import * as Plot from "@observablehq/plot";
+import PlotFigure from "~/components/PlotFigure";
+import { useDisplay } from "vuetify";
+
+
+const facetStore = useFacetsStore()
+
 const sortBy: Ref<{ key: string, order: string }[]> = ref([{ key: 'type', order: "asc" }])
 const itemValue = ref("id");
+const { width } = useDisplay();
 
 const facets = ref([
     "type",
@@ -19,6 +28,7 @@ const availableTaxo: Ref<string[]> = ref([
     "phylum",
     "Superkingdom"
 ]);
+const selectedTaxoRank = ref("phylum");
 
 const headers = ref([
     { title: "Replicon", key: "replicon" },
@@ -44,6 +54,79 @@ const computedHeaders = computed(() => {
         }
     })]
 })
+
+const computedWidth = computed(() => {
+    return Math.max(width.value, 550);
+});
+
+const plotHeight = computed(() => {
+    return computedWidth.value / 4;
+});
+
+
+const defaultBarPlotOptions = computed(() => {
+    return {
+        x: { label: null, tickRotate: 70 },
+        y: { nice: true, grid: true },
+        color: { legend: true },
+        width: computedWidth.value,
+        height: plotHeight.value,
+    }
+})
+
+const computedSystemDistribution = computed(() => {
+    if (facetStore.facets?.facetDistribution?.type) {
+        return Object.entries(facetStore.facets.facetDistribution.type).map(([key, value]) => {
+            return { type: key, count: value }
+        }).sort()
+    } else { return [] }
+
+})
+const computedDistriSystemOptions = computed(() => {
+    return {
+        ...defaultBarPlotOptions.value,
+        marginBottom: 120,
+        marks: [
+            // Plot.frame(),
+            Plot.barY(
+                toValue(computedSystemDistribution),
+                {
+                    y: "count", x: 'type', tip: true,
+                    fill: "#6750a4",
+                    sort: { x: "-y" },
+                },
+
+            ),
+        ],
+    };
+});
+const computedTaxonomyDistribution = computed(() => {
+    if (facetStore.facets?.facetDistribution?.[selectedTaxoRank.value]) {
+        return Object.entries(facetStore.facets.facetDistribution[selectedTaxoRank.value]).map(([key, value]) => {
+            return { [selectedTaxoRank.value]: key, count: value }
+        }).sort()
+    } else { return [] }
+
+})
+
+const computedDistriTaxoOptions = computed(() => {
+    return {
+        ...defaultBarPlotOptions.value,
+        marginBottom: 200,
+        marks: [
+            Plot.barY(
+                toValue(computedTaxonomyDistribution),
+                {
+                    y: "count",
+                    x: selectedTaxoRank.value,
+                    tip: true,
+                    fill: "#6750a4",
+                    sort: { x: "-y" },
+                }
+            ),
+        ],
+    };
+});
 function capitalize([first, ...rest]) {
     return first.toUpperCase() + rest.join('').toLowerCase();
 }
@@ -51,6 +134,27 @@ function capitalize([first, ...rest]) {
 </script>
 
 <template>
+    <v-row>
+        <v-col cols="6">
+            <v-card flat class="my-3">
+                <v-card-title> Systems Distribution</v-card-title>
+
+                <v-card-text>
+                    <PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
+                </v-card-text>
+            </v-card>
+        </v-col>
+        <v-col cols="6">
+            <v-card flat :loading="pending">
+                <v-card-title> Taxonomic Distribution</v-card-title>
+                <v-card-text>
+                    <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
+                        label="Select taxonomic rank"></v-select>
+                    <PlotFigure defer :options="unref(computedDistriTaxoOptions)"></PlotFigure>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
     <ServerDbTable title="RefSeq" db="refseq" :sortBy="sortBy" :headers="computedHeaders" :item-value="itemValue"
         :facets="facets">
     </ServerDbTable>

content/4.refseq.md

 ---
 layout: db
 navigation: false
----
\ No newline at end of file
+---
+
+
+
+# Refseq
+
+
+::refseq-db
+::
+

content/6.db.md

----
-layout: db
-navigation: false
----
-
-
-
-# Refseq
-
-Lorem markdownum arborea, euntem talia crimine parentque inque, belli nisi parte
-induit; ut latos hortamine Aeneadae. Luctus madefacta o fluit ego exciderit
-omnibus aestuat. Signum et se **illa vinci me** cortice Mopsopium pressum
-*fessos*, inducere superabat liceat me. In et aethera mutavit, dictis sua, sub
-insidiaeque, deus ramos illa hostem luet.
-
-> Est inductaque sunt nec, *sua quam modumque*, peperisse nunc tantum. Quem
-> natus non sed; aliquid *artus arvo* alter peragit? Labefecit marcida mirantes
-> Numici memor laborem, mirae sequentis det ego borean defensae: innocuae. In
-> rate dat verbis spuma saxo aquarum recipit exiguus exstant et quam, Peneiaque.
-> **Altaria** ferus super vir.
-
-Nulli venit pietas quodcumque oraque exemplo ut formae fugae hostibus iubenti,
-avia quae. Virgae hominis in inutile; vagantur mortale est fero: sensit ne
-felix.
-
-1. Medicamen tulit dexteriore
-2. Imagine veri bonis
-3. Male sitim iacentes mittentis cepere dixit contigit
-4. Pugman olivis tristique
-5. Capere in vomentes cunctis
-
-::refseq-db
-::
-
-## des choses à dire apres
\ No newline at end of file

layouts/db.vue

@@ -5,15 +5,8 @@ import { useFacetsStore, type Facets } from '~~/stores/facets'
 const facetStore = useFacetsStore()
 </script>
 <template>
-    <LayoutWrapper :fluid="true" :toc="false" :edit="false">
-        <template #drawer="{ drawer }">
-            <v-navigation-drawer :model-value="drawer" :border="1" color="background">
-                <v-list>
-                    <v-list-item v-for="(value, key) in facetStore.facets.facetDistribution" :key="key"
-                        :title="key"></v-list-item>
-                </v-list>
-            </v-navigation-drawer>
-        </template>
+    <LayoutWrapper :fluid="true" :toc="false" :edit="false" :nav-drawer="false">
+        
 
         <slot />
     </LayoutWrapper>

pages/[...slug].vue

 <template>
-  <v-row justify="center">
-    <v-col cols="auto">
-      <v-card flat color="transparent" max-width="1280">
+ 
         <v-card-text>
           <ContentDoc />
         </v-card-text>
-      </v-card></v-col>
-  </v-row>
+      
 </template>