add scale transform

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>

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

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>

components/content/StructureDb.vue

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

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

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