Merge branch 'download-button-for-structure' into 'dev'

Resolve "Download button for structure"

Closes #139

See merge request !15

components/Nav/PrevNext.vue

 <script setup lang="ts">
 const { surround } = useContent();
+const { mobile } = useDisplay();
 
 </script>
 <template>

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

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>

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>
 
 

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:

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>

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)

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>