diff --git a/components/LayoutWrapper.vue b/components/LayoutWrapper.vue
index b322aa7c568d39fe9c29b6df062bfad4ac73c397..67192204f7cf580b8b1747202dd83b397749cbad 100644
--- a/components/LayoutWrapper.vue
+++ b/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" />
diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue
index 87099cc8e9ad41befd3821754e8b121be23bf84a..0f19d827ce4ca870c56bc496d61559bdc11b4b2d 100644
--- a/components/Nav/Navbar.vue
+++ b/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>
diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue
index e43d3aa6037bb884d2932eb3e32cbb090ebf0102..68c2793b5c7dda596158d90eaee927a762b16cbd 100644
--- a/components/content/RefseqDb.vue
+++ b/components/content/RefseqDb.vue
@@ -1,6 +1,15 @@
<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>
diff --git a/content/4.refseq.md b/content/4.refseq.md
index 16165e5f554c08a9afd5ae7aa9fccc995e4b4f86..21e92f20b81a4fd849ba9f359ecb023f69feaf80 100644
--- a/content/4.refseq.md
+++ b/content/4.refseq.md
@@ -1,4 +1,13 @@
---
layout: db
navigation: false
----
\ No newline at end of file
+---
+
+
+
+# Refseq
+
+
+::refseq-db
+::
+
diff --git a/content/6.db.md b/content/6.db.md
deleted file mode 100644
index 98f9e569bbe0907be4af32a6f86b2277e56af4ca..0000000000000000000000000000000000000000
--- a/content/6.db.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-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
diff --git a/layouts/db.vue b/layouts/db.vue
index 911df8380744c976d6fe9085eb075e2edd3e7714..55982ec2cfe62124b994b2c97d1cd948803bebab 100644
--- a/layouts/db.vue
+++ b/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>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 9c9bf619593d96b76a11deffcd089d6df558fdf6..7fa8469ba5e0b03e3c1f21cd3218aac9afeffd25 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,11 +1,8 @@
<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>
diff --git a/pages/refseq.vue b/pages/_refseq-bak.vue
similarity index 100%
rename from pages/refseq.vue
rename to pages/_refseq-bak.vue