diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue index 3a013a447a077c4f8387dba0a4f9e46d3e777abc..ae276b8b8512ef8e66888151db119552ea3884c0 100644 --- a/components/Nav/Navbar.vue +++ b/components/Nav/Navbar.vue @@ -32,7 +32,7 @@ watchEffect(() => { const sections = ref([ { id: "webservice", - label: "webservice", + label: "Web service", href: runtimeConfig.public.defenseFinderWebservice, }, { id: "wiki", label: "Wiki", to: '/', }, diff --git a/components/ServerDbTable.vue b/components/ServerDbTable.vue index 7bf896d0681fc244f80960f615d98381f3eb9f13..0631f95e482079d6abf74801c2cf4d590ba671e7 100644 --- a/components/ServerDbTable.vue +++ b/components/ServerDbTable.vue @@ -149,7 +149,7 @@ const computedFilter = computed(() => { if (tmpFilterItems.length % 4 === 0) { tmpFilterItems.splice(-1) } - filtersStr = tmpFilterItems.map((it, index) => { + filtersStr = "(" + tmpFilterItems.map((it, index) => { const sanitizedValue = it.value.split("-").slice(0, -1).join("-") if ((index + 1) % 4 === 3) { return `"${sanitizedValue}"` @@ -160,7 +160,7 @@ const computedFilter = computed(() => { return `${sanitizedValue}` } - }).join("") + }).join("") + ")" } diff --git a/components/content/RefseqDb.vue b/components/content/RefseqDb.vue index 99d460722b12be1a9a1a31d59984edeec4c4a24f..b515f0a176ec8996c6c137a9b3cfb00d3f40f6de 100644 --- a/components/content/RefseqDb.vue +++ b/components/content/RefseqDb.vue @@ -10,13 +10,11 @@ import { useDownloadBlob } from '@/composables/useDownloadBlob'; import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue" import type { ComponentPublicInstance } from 'vue' -import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue' const sortBy: Ref<SortItem[]> = ref([{ key: 'type', order: "asc" }]) const itemValue = ref("id"); const { width } = useDisplay(); const dbName = ref("refseq") -const scaleTransform: Ref<string[]> = ref([]) @@ -61,7 +59,7 @@ const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({ const computedAutocompleteMeiliFacetsProps = computed(() => { const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution const toValFacets = toValue(autocompleteMeiliFacetsProps).facets - if (toValFacetDistribution !== undefined) { + if (toValFacetDistribution !== undefined && toValFacets !== undefined) { return { ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => { if (facet.type === "facet") { @@ -153,10 +151,6 @@ async function getAllHits(params: { index: string, params: Record<string, any>, } -const plotHeight = computed(() => { - return computedWidth.value / 3; - // return 500 -}); const defaultDataTableServerProps = ref({ showExpand: false diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue index afc80298f956882f78e36fb060510a99d7f3dc36..706aa84b684aa76b907ef9ea5b4f348f0255cac2 100644 --- a/components/content/StructureDb.vue +++ b/components/content/StructureDb.vue @@ -1,12 +1,14 @@ <script setup lang="ts"> import * as Plot from "@observablehq/plot"; import PlotFigure from "~/components/PlotFigure"; -import type { SortItem } from "@/components/ServerDbTable.vue" +import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue" import { useNumericalFilter } from "@/composables/useNumericalfilter" import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue' import { ServerDbTable } from "#components" + + const sortBy: Ref<SortItem[]> = ref([{ key: 'System', order: "asc" }]) const itemValue = ref("id"); const dbName = ref("structure") @@ -22,28 +24,47 @@ onBeforeMount(async () => { hitsPerPage: 25, } }) - console.log(toValue(data)) - facetDistribution.value = toValue(data)?.facetDistribution + autocompleteMeiliFacetsProps.value.facetDistribution = toValue(data)?.facetDistribution }) -const facets = ref<FacetInputItem[]>([ - { title: "Defense System", type: "subheader" }, - { title: "System", value: "System", type: "facet", icon: "mdi-virus-outline", }, - { title: "Subsystem", value: "subtype", type: "facet", icon: "mdi-virus-outline" }, - { type: "divider" }, - { title: "Gene name", value: "gene_name", type: "facet", icon: "mdi-dna" }, - { title: "Completed", value: "completed", type: "facet", icon: "md:done" }, - { title: "Prediction type", value: "prediction_type", type: "facet", icon: "mdi-molecule" }, -]) -const computedFacets = computed(() => { - const toValFacetDistribution = toValue(facetDistribution) - console.log(toValFacetDistribution) - return toValue(facets).map(facet => { - const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined - return count ? { ...facet, count } : { ...facet } - }) +const autocompleteMeiliFacetsProps = ref<AutocompleteMeiliFacetProps>({ + db: toValue(dbName), + facets: [ + { title: "Defense System", type: "subheader" }, + { title: "System", value: "System", type: "facet", icon: "mdi-virus-outline", }, + { title: "Subsystem", value: "subtype", type: "facet", icon: "mdi-virus-outline" }, + { type: "divider" }, + { title: "Gene name", value: "gene_name", type: "facet", icon: "mdi-dna" }, + { title: "Completed", value: "completed", type: "facet", icon: "md:done" }, + { title: "Prediction type", value: "prediction_type", type: "facet", icon: "mdi-molecule" }, + ], + facetDistribution: undefined +}) + + + +const computedAutocompleteMeiliFacetsProps = computed(() => { + const toValFacetDistribution = toValue(autocompleteMeiliFacetsProps).facetDistribution + const toValFacets = toValue(autocompleteMeiliFacetsProps).facets + if (toValFacetDistribution !== undefined && toValFacets !== undefined) { + return { + ...toValue(autocompleteMeiliFacetsProps), facets: toValFacets.map(facet => { + if (facet.type === "facet") { + const count = toValFacetDistribution?.[facet.value] ? Object.keys(toValFacetDistribution[facet.value]).length : undefined + + return count ? { ...facet, count } : { ...facet } + } + else { + return { ...facet } + } + }) + } + } + else { + return toValue(autocompleteMeiliFacetsProps) + } }) @@ -68,7 +89,6 @@ const headers: Ref<Object[]> = ref([ ]) -const { search: msSearch, result: msResult } = useMeiliSearch(toValue(dbName)) const { range: plddtsRange, stringifyFilter: plddtsFilter, reset: plddtsReset } = useNumericalFilter("plddts", 0, 100) const { range: iptmRange, stringifyFilter: iptmFilter, reset: iptmReset } = useNumericalFilter("iptm+ptm", 0, 1) const { range: pdockqRange, stringifyFilter: pdockqFilter, reset: pdockqReset } = useNumericalFilter("pDockQ", 0, 1) @@ -107,33 +127,10 @@ function pdbNameToCif(pdbPath: string) { return `${cifPath}.cif` } -function toSystemName(rawName: string) { - // Does it work if it's a list of system genes ? - // split on __ for systeme_vgenes - return rawName.split("__")[0].toLocaleLowerCase() - -} - - - -const plddtDistribution = computed(() => { - if (toValue(msResult)?.facetDistribution?.plddts) { - return Object.entries(toValue(msResult).facetDistribution.plddts).map(([key, value]) => { }) - } -}) - - - - - </script> <template> - <ServerDbTable title="Predicted Structures" :db="dbName" :sortBy="sortBy" :facets="computedFacets" - :data-table-server-props="dataTableServerProps" :facet-distribution="facetDistribution" - :numerical-filters="numericalFilters"> - - - + <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps" + :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="numericalFilters"> <template #numerical-filters="{ search }"> <v-row> <v-col cols="12" md="12" lg="4">