diff --git a/components/LayoutWrapper.vue b/components/LayoutWrapper.vue index 872c0d516252107565cbc21237c3071770a04231..174b79316d414a60b08591bc01fde2d8a2f17428 100644 --- a/components/LayoutWrapper.vue +++ b/components/LayoutWrapper.vue @@ -38,7 +38,9 @@ function onScroll() { <v-row justify="center"> <v-col cols="auto"> <v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500"> - <slot /> + <v-card-text> + <slot /> + </v-card-text> <EditGitlab v-if="edit" /> <NavPrevNext v-if="edit" /> </v-card> diff --git a/components/Nav/Drawer.vue b/components/Nav/Drawer.vue index 645e512f65f55c2c9248aa653baf8edd2d1353fb..a0bb7e91e9a4ffee01c4836d12e2a785e148f2c0 100644 --- a/components/Nav/Drawer.vue +++ b/components/Nav/Drawer.vue @@ -13,23 +13,23 @@ import { useDisplay, useTheme } from "vuetify"; const { navigation, page } = useContent(); // const drawer = ref(true); -// const computedNavigation = computed(() => { -// return navigation.value -// .filter((item: { layout: string }) => { -// if (item?.layout === "db") { -// console.log(item) -// return false -// } -// return true -// // return item?.layout !== "db" -// }) +const computedNavigation = computed(() => { + return navigation.value + .filter((item: { layout: string }) => { + if (item?.layout === "db") { + console.log(item) + return false + } + return true + // return item?.layout !== "db" + }) -// }); +}); </script> <template> <v-navigation-drawer :model-value="drawer" :border="1" color="background"> <v-list nav density="compact" :lines="false"> - <NavNavigation :navigation="navigation" /> + <NavNavigation :navigation="computedNavigation" /> </v-list> </v-navigation-drawer> </template> \ No newline at end of file diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index 38f29a1576306ee8375631519d6edb36ef284042..44b23ff4e8af1baf2c3f760e3194673b2108b161 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -48,9 +48,7 @@ const headers = ref([ sortable: false } ]) -const logTransform = computed(() => { - return scaleTransform.value.includes('log') -}) + const fullWidth = computed(() => { return layoutPlot.value === 'fullwidth' }) @@ -111,11 +109,10 @@ const dataTableServerProps = computed(() => { } }) const defaultBarPlotOptions = computed(() => { - const y = logTransform.value ? { nice: true, grid: true, type: 'symlog' } : { nice: true, grid: true, type: "linear" } - // const y = { nice: true, grid: true } + return { x: { label: null, tickRotate: 45, ticks: 10 }, - y, + y: { grid: true, type: scaleType.value }, color: { legend: true }, width: computedWidth.value, height: plotHeight.value + 100, @@ -127,7 +124,6 @@ const computedSystemDistribution = computed(() => { return Object.entries(toValue(msResult).facetDistribution.type).map(([key, value]) => { return { type: key, - // count: logTransform.value ? Math.log(value) : value count: value } }).sort() @@ -213,33 +209,46 @@ const binPlotOptions = ref({ const binPlotDataOptions = computed(() => { return allHits.value?.hits?.length > 0 ? { ...binPlotOptions.value, + color: { + ...binPlotOptions.value.color, + type: scaleType.value + }, // fy: { domain: groupSortDomain.value }, marks: [ - Plot.cell(allHits.value?.hits ?? [], Plot.group({ fill: "count" }, { x: "type", y: selectedTaxoRank.value, tip: true })), + Plot.cell(allHits.value?.hits ?? [], Plot.group({ fill: "count" }, { x: "type", y: selectedTaxoRank.value, tip: true, inset: 0.5, sort: { y: "fill" } })), ] } : null }) +const scaleType = ref("linear") </script> <template> <v-card flat class="mb-2" color="transparent"> <v-toolbar> <!-- <v-toolbar-title>Plots</v-toolbar-title> --> - <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" label="Select taxonomic rank" - hide-details="auto" class="mx-2"></v-select> <v-btn-toggle v-model="layoutPlot" density="compact" rounded="false" variant="text" color="primary" mandatory class="mx-2"> <v-btn icon="md:grid_view" value="grid"></v-btn> <v-btn icon="md:view_agenda" value="fullwidth"></v-btn> </v-btn-toggle> - <v-btn-toggle v-model="scaleTransform" density="compact" multiple rounded="false" variant="text" color="primary" - class="mx-2"> - <v-btn icon="mdi-math-log" value="log"></v-btn> - </v-btn-toggle> + <v-spacer></v-spacer> + <v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact" label="Select taxonomic rank" + hide-details="auto" class="mx-2"></v-select> + + <!-- <v-btn-toggle v-model="scaleTransform" density="compact" mandatory rounded="false" variant="text" + color="primary" class="mx-2"> + <v-btn icon="mdi-math-log" value="linear">linear</v-btn> + <v-btn value="pow">pow</v-btn> + <v-btn icon="mdi-math-log" value="sqrt">sqrt</v-btn> + <v-btn icon="mdi-math-log" value="symlog">symlog</v-btn> + <v-btn icon="mdi-math-log" value="log">log</v-btn> + </v-btn-toggle> --> + <v-select v-model="scaleType" class="mx-2" density="compact" :items="['linear', 'sqrt', 'symlog']" + label="Scale Type" hide-details="auto"></v-select> </v-toolbar> @@ -293,7 +302,8 @@ const binPlotDataOptions = computed(() => { </v-toolbar> </template> <template #[`item.accession_in_sys`]="{ item }"> - <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"></CollapsibleChips> + <CollapsibleChips :items="namesToAccessionChips(item.accession_in_sys)"> + </CollapsibleChips> </template> </ServerDbTable> </v-expansion-panel-text> diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue index 26105ece160ddc8af8a01a58bb572132a45836ae..8ef19c3ca164964ebb3e1288974c39adde0b9ed1 100644 --- a/components/content/StructureDb.vue +++ b/components/content/StructureDb.vue @@ -1,10 +1,13 @@ <script setup lang="ts"> +import * as Plot from "@observablehq/plot"; +import PlotFigure from "~/components/PlotFigure"; import type { SortItem } from "@/components/ServerDbTable.vue" import { ServerDbTable } from "#components" const sortBy: Ref<SortItem[]> = ref([{ key: 'system', order: "asc" }]) const itemValue = ref("id"); const facets: Ref<string[]> = ref(["system", "completed"]) const headers: Ref<Object[]> = ref([ + { title: 'Structure', key: 'structure', sortable: false, removable: false }, { title: "System", key: "system", removable: false }, // { title: "pdb file", key: "pdb" }, // { title: "fasta", key: "fasta_file" }, @@ -19,7 +22,6 @@ const headers: Ref<Object[]> = ref([ { title: "iptm+ptm", key: "iptm+ptm", removable: true }, { title: "pDockQ", key: "pDockQ", removable: true }, { title: "Type", key: "type", removable: true }, - { title: 'Structure', key: 'structure', sortable: false, removable: false }, ]) const { search: msSearch, result: msResult } = useMeiliSearch('structure') diff --git a/content/4.refseq.md b/content/4.refseq.md index 5f47b8c5d7d5cb3a1ce29389a4e0bad75de8a86a..13605c24602416fb9f854975b8b097e60bb42833 100644 --- a/content/4.refseq.md +++ b/content/4.refseq.md @@ -5,6 +5,19 @@ navigation: true --- + + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Cras lobortis nulla ac mauris aliquet lacinia. +Praesent viverra turpis orci, eget blandit ligula placerat nec. +Mauris a libero dui. Aenean sit amet quam at enim molestie tristique nec consequat libero. +Vestibulum rutrum tellus nec dui ornare, sit amet euismod velit faucibus. Aenean lectus mauris, convallis non dolor tincidunt, laoreet pulvinar diam. Maecenas at dignissim massa. Curabitur felis felis, maximus vitae mi non, condimentum rutrum urna. Phasellus consectetur libero sit amet iaculis dapibus. + + + + +Sed varius eget metus sed congue. Donec ut sodales lectus. Integer auctor maximus quam nec porta. Nulla urna magna, congue in sodales non, blandit eu lorem. Maecenas id massa sit amet libero elementum lobortis ut vel nibh. Integer sed ante eu tellus iaculis porttitor id at ante. Fusce at venenatis ante, et faucibus magna. Integer ut egestas diam. In vel blandit urna. Mauris nec tellus ut orci blandit consectetur. Nulla cursus tellus velit, vitae finibus lacus efficitur ut. + ::refseq-db :: diff --git a/content/5.structure.md b/content/5.structure.md index 7fdd6f7283a52be0a4afd32e6668323235ad04dc..ea48cb51f4a0b016612b97e8f3589c6f10e8c81c 100644 --- a/content/5.structure.md +++ b/content/5.structure.md @@ -5,5 +5,9 @@ navigation: true --- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lobortis nulla ac mauris aliquet lacinia. Praesent viverra turpis orci, eget blandit ligula placerat nec. Mauris a libero dui. Aenean sit amet quam at enim molestie tristique nec consequat libero. Vestibulum rutrum tellus nec dui ornare, sit amet euismod velit faucibus. Aenean lectus mauris, convallis non dolor tincidunt, laoreet pulvinar diam. Maecenas at dignissim massa. Curabitur felis felis, maximus vitae mi non, condimentum rutrum urna. Phasellus consectetur libero sit amet iaculis dapibus. + +Sed varius eget metus sed congue. Donec ut sodales lectus. Integer auctor maximus quam nec porta. Nulla urna magna, congue in sodales non, blandit eu lorem. Maecenas id massa sit amet libero elementum lobortis ut vel nibh. Integer sed ante eu tellus iaculis porttitor id at ante. Fusce at venenatis ante, et faucibus magna. Integer ut egestas diam. In vel blandit urna. Mauris nec tellus ut orci blandit consectetur. Nulla cursus tellus velit, vitae finibus lacus efficitur ut. + ::structure-db :: \ No newline at end of file