diff --git a/components/Nav/PrevNext.vue b/components/Nav/PrevNext.vue
index 2993b25b44439a11870cc759915a3d6b4681285c..d3fa401f3d1626df3073fc84e308208528098a4e 100644
--- a/components/Nav/PrevNext.vue
+++ b/components/Nav/PrevNext.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
const { surround } = useContent();
+const { mobile } = useDisplay();
</script>
<template>
diff --git a/components/PfamChips.vue b/components/PfamChips.vue
index a5568a8f4250e4a301153a0a6fcc7c9179276466..64d4f4b9f6982386aacc9c7aefc487e5d22f9195 100644
--- a/components/PfamChips.vue
+++ b/components/PfamChips.vue
@@ -26,53 +26,42 @@ function constructPfamUrl(pfam: string) {
}
</script>
<template>
- <v-card flat class="d-flex justify-start align-center">
- <template v-for="(pfam, index) in pfams" :key="pfam">
- <v-chip
- v-if="index < itemsToDisplay || itemsToDisplay < 0"
- :href="constructPfamUrl(pfam)"
- target="_blank"
- color="info"
- class="mr-1"
- >
- {{ pfam }}
- <v-tooltip activator="parent" location="top">{{
- pfamStore.get(pfam)?.DE ?? "none"
- }}</v-tooltip></v-chip
- >
+ <!-- class="d-inline-flex justify-start align-center" -->
+ <v-row>
+ <v-col>
+ <v-card flat color="transparent" density="compact" rounded="false">
+ <template v-for="(pfam, index) in pfams" :key="pfam">
+ <v-chip v-if="index < itemsToDisplay || itemsToDisplay < 0" :href="constructPfamUrl(pfam)" target="_blank"
+ color="info" class="mr-1 mb-1">
+ {{ pfam }}
+ <v-tooltip activator="parent" location="top">{{
+ pfamStore.get(pfam)?.DE ?? "none"
+ }}</v-tooltip></v-chip>
- <template v-if="index === itemsToDisplay">
- <v-chip
- v-if="!show"
- variant="text"
- class="text-grey text-caption align-self-center px-1"
- @click="show = !show"
- >
- (+{{ pfams.length - itemsToDisplay }} others)
- </v-chip>
- </template>
- </template>
- <template v-if="pfams.length > itemsToDisplay && show">
- <template v-for="(pfam, index) in pfams" :key="pfam">
- <v-chip
- v-if="index >= itemsToDisplay"
- :href="constructPfamUrl(pfam)"
- target="_blank"
- color="info"
- class="mr-1"
- >
- {{ pfam }}
- <v-tooltip activator="parent" location="top">{{
- pfamStore.get(pfam)?.DE ?? "none"
- }}</v-tooltip></v-chip
- >
- </template>
- </template>
- <v-btn
- v-if="itemsToDisplay < pfams.length"
- variant="text"
- :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
- @click="show = !show"
- ></v-btn>
- </v-card>
+ <template v-if="index === itemsToDisplay">
+ <span>
+ <v-chip v-if="!show" variant="text" class="text-grey text-caption align-self-center px-1 "
+ @click="show = !show">
+ (+{{ pfams.length - itemsToDisplay }} others)
+ </v-chip>
+ <v-btn v-if="itemsToDisplay < pfams.length && !show" variant="text" :icon="'mdi-chevron-down'"
+ @click="show = !show"></v-btn>
+ </span>
+ </template>
+ </template>
+ <template v-if="pfams.length > itemsToDisplay && show">
+ <template v-for="(pfam, index) in pfams" :key="pfam">
+ <v-chip v-if="index >= itemsToDisplay" :href="constructPfamUrl(pfam)" target="_blank" color="info"
+ class="mr-1 mb-1">
+ {{ pfam }}
+ <v-tooltip activator="parent" location="top">{{
+ pfamStore.get(pfam)?.DE ?? "none"
+ }}</v-tooltip></v-chip>
+ </template>
+ </template>
+ <v-btn v-if="itemsToDisplay < pfams.length && show" variant="text" :icon="'mdi-chevron-up'"
+ @click="show = !show"></v-btn>
+ </v-card>
+ </v-col>
+ </v-row>
</template>
\ No newline at end of file
diff --git a/components/content/ListSystems.vue b/components/content/ListSystems.vue
index c1181f4a622cadfc11794d278ea2eb7a3372edae..f54b92baec6169c21ead750c66840858ed79af31 100644
--- a/components/content/ListSystems.vue
+++ b/components/content/ListSystems.vue
@@ -37,7 +37,7 @@ const { initPfam } = usePfamStore();
initPfam();
</script>
<template>
- <v-card>
+ <v-card >
<v-toolbar density="compact">
<v-toolbar-title>Defense Systems</v-toolbar-title>
@@ -58,14 +58,7 @@ initPfam();
</template>
<template #[`item.PFAM`]="{ item }">
- <pfam-chips v-if="item.columns?.PFAM" :pfam-string="item.columns.PFAM"></pfam-chips>
- </template>
- <template #expanded-row="{ columns, item }">
- <tr>
- <td :colspan="columns.length" class="v-data-table__td v-data-table-column--align-start">
- <pfam-chips :pfam-string="item.columns.PFAM" :items-to-display="-1"></pfam-chips>
- </td>
- </tr>
+ <pfam-chips v-if="item?.PFAM" :pfam-string="item.PFAM"></pfam-chips>
</template>
</v-data-table-virtual>
</v-card>
diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue
index c9de71ed6f9913849130abf7b3026f53fe4a4878..8806499607808025bbe03472f6310aa41e55d9a0 100644
--- a/components/content/MolstarPdbePlugin.vue
+++ b/components/content/MolstarPdbePlugin.vue
@@ -3,34 +3,50 @@ import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
import { useRuntimeConfig, computed } from '#imports'
export interface Props {
height?: number
- dataUrl: string
+ dataUrls: string[]
}
-
-const refinedDataUrl = computed(() => {
- if (props.dataUrl?.startsWith('/') && !props.dataUrl.startsWith('//')) {
- const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
- if (_base !== '/' && !props.dataUrl.startsWith(_base)) {
- return joinURL(_base, props.dataUrl)
+// const selectedPdb = ref('')
+const refinedDataUrls = computed(() => {
+ return props.dataUrls.map((dataUrl) => {
+ if (dataUrl?.startsWith('/') && !dataUrl.startsWith('//')) {
+ const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+ if (_base !== '/' && !dataUrl.startsWith(_base)) {
+ return joinURL(_base, dataUrl)
+ }
}
- }
- return props.dataUrl
+ return dataUrl
+ })
})
+// const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)
const props = withDefaults(defineProps<Props>(), {
height: 600,
})
-const { width } = useDisplay()
+const { width, height } = useDisplay()
const maxWidth = ref(1300)
-
+const dialog = ref(false)
+// const show = ref(false)
const computedWidth = computed(() => {
if (width > maxWidth) return maxWidth
return width
})
+const computedHeight = computed(() => {
+ return height.value - 250
+})
+
+function closeStructure() {
+ selectedPdb.value = null
+ dialog.value = false
+
+
+}
+
+
useHead({
link: [
{
@@ -54,15 +70,62 @@ useHead({
]
})
+const pdbeMolstarComponent = ref(null)
+// const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
+const selectedPdb = ref(null)
+
+watch(selectedPdb, (selectedPdb, prevSelectPdb) => {
+ if (selectedPdb !== null) {
+ dialog.value = true
+ if (pdbeMolstarComponent.value?.viewerInstance) {
+ const viewerInstance = pdbeMolstarComponent.value.viewerInstance
+
+ // show.value = true
+
+ const customData = { url: selectedPdb, format: "pdb", binary: false }
+
+ viewerInstance.visual.update({ customData })
+
+ }
+
+ }
+})
+
</script>
<template>
- <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" height="500"
- :max-width="1300" :width="computedWidth - 950" position="relative">
- <pdbe-molstar :custom-data-url="refinedDataUrl" custom-data-format="pdb" hide-expand-icon="true"
- hide-controls="true" landscape="true" sequence-panel></pdbe-molstar>
- </v-sheet>
+ <v-row><v-col><v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
+ hide-details="auto"></v-select></v-col></v-row>
+
+ <v-row justify="center">
+ <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
+ <v-card flat :rounded="false">
+ <v-toolbar color="primary">
+ <v-toolbar-title>Strucutures</v-toolbar-title>
+ <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
+ hide-details="auto"></v-select>
+ <v-spacer></v-spacer>
+
+ <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn>
+ <v-btn icon @click="closeStructure">
+ <v-icon>mdi-close</v-icon>
+ </v-btn>
+
+ </v-toolbar>
+ <v-card-text>
+
+ <v-sheet v-if="selectedPdb"
+ class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3"
+ :height="computedHeight" :max-width="1300" :width="computedWidth" position="relative">
+ <pdbe-molstar ref="pdbeMolstarComponent" hide-controls :custom-data-url="selectedPdb"
+ custom-data-format="pdb"></pdbe-molstar>
+ </v-sheet>
+ </v-card-text>
+
+ </v-card>
+ </v-dialog>
+ </v-row>
</template>
diff --git a/content/3.defense-systems/avs.md b/content/3.defense-systems/avs.md
index 66b3ae807cb7f4ff085fc9c86fb0ed76828e8544..470ad5c50ff30d039f269f2196d0df9e2353a1cc 100644
--- a/content/3.defense-systems/avs.md
+++ b/content/3.defense-systems/avs.md
@@ -64,18 +64,13 @@ Among the 22k complete genomes of RefSeq, this system is present in 1046 genomes
::molstar-pdbe-plugin
---
height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
+dataUrls:
+ - /avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb
+ - /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
---
::
-::molstar-pdbe-plugin
----
-height: 700
-dataUrl: /avs/AVAST_I,AVAST_I__Avs1B,0,V-plddts_80.96481.pdb
----
-::
-
## Experimental validation
Avs systems were experimentally validated using:
diff --git a/layouts/article-no-toc.vue b/layouts/article-no-toc.vue
index a7a46c5f3424df7bc558c416c4f893d66f42d098..2a009555ac7e554f8c37f72e0983d457a5beb8a5 100644
--- a/layouts/article-no-toc.vue
+++ b/layouts/article-no-toc.vue
@@ -4,7 +4,7 @@ const { page } = useContent();
import { useDisplay } from 'vuetify'
// const { isDark } = useCustomTheme()
-const { mobile } = useDisplay()
+// const { mobile } = useDisplay()
</script>
diff --git a/layouts/article.vue b/layouts/article.vue
index 1480e3f290ac696aaf3d64fc10d901dc12c05900..64e4f13a0fcea8c523b2361f98226d40ad995154 100644
--- a/layouts/article.vue
+++ b/layouts/article.vue
@@ -4,7 +4,7 @@ const { page, surround, prev, next } = useContent();
import { useDisplay } from 'vuetify'
// const { isDark } = useCustomTheme()
-const { mobile } = useDisplay()
+// const { mobile } = useDisplay()
console.log("================================")
console.log(surround)
console.log(prev)
diff --git a/pages/refseq.vue b/pages/refseq.vue
index e3f27c2f04267e3cc0881bb87847d7ba819a2483..85d78f2391c3f7cc1d765619a94bb944741d3592 100644
--- a/pages/refseq.vue
+++ b/pages/refseq.vue
@@ -169,13 +169,16 @@ const computedDistriTaxoOptions = computed(() => {
</v-data-table-virtual>
</v-card>
<v-card class="my-3">
- <v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar>
+ <v-card-title> Systems Distribution</v-card-title>
+
+ <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Systems</v-toolbar-title></v-toolbar> -->
<v-card-text>
<PlotFigure :options="unref(computedDistriSystemOptions)" defer></PlotFigure>
</v-card-text>
</v-card>
<v-card>
- <v-toolbar color="primary" density="compact"><v-toolbar-title> Distribution </v-toolbar-title></v-toolbar>
+ <v-card-title> Taxonomic Distribution</v-card-title>
+ <!-- <v-toolbar density="compact"><v-toolbar-title> Distribution Taxonomy</v-toolbar-title></v-toolbar> -->
<v-card-text>
<v-select v-model="selectedTaxoRank" :items="availableTaxo" density="compact"
label="Select taxonomic rank"></v-select>