add a download btn for cif file

components/content/MolstarPdbePlugin.vue

@@ -105,86 +105,43 @@ useHead({
 const pdbeMolstarComponent = ref(null)
 // const selectedPdb = ref("/wiki/avs/AVAST_I,AVAST_I__Avs1A,0,V-plddts_85.07081.pdb")
 const selectedPdb: Ref<string | null> = ref(null)
-
+const structureToDownload: Ref<string | null> = ref(null)
 const selectedPaePath = computed(() => {
     return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.png` : null
 })
 
-// const paeData = ref([])
-// watch(selectedPaePath, async (newPaePath) => {
-//     if (newPaePath !== null) {
-//         try {
-//             const data = await d3.tsv(newPaePath);
-//             if (data.length > 500) {
-//                 paeError.value = `The PAE is too large to be displayed (${data.length} residus)`
-//                 paeData.value = []
-//             }
-//             else if (data?.[0]?.[0] === undefined) {
-//                 paeError.value = "The PAE cannot be downloaded"
-//                 paeData.value = []
-//             }
-//             else {
-//                 paeData.value = data
-//                 paeError.value = null
-//             }
-
-//         }
-//         catch (error) {
-//             console.log(error)
-//         }
-//     } else {
-//         paeData.value = []
-//     }
-
-// })
-
-// const sanitizedPaeData = computed(() => {
-//     return paeData.value.reduce((acc, curr, index) => {
-//         const scoredResidue = index
-//         // let newAcc = [...acc]
-//         for (const [alignedResidue, value] of Object.entries(curr)) {
-//             // console.log(value)
-//             acc.push({ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) })
-//             // newAcc = [...newAcc, ...[{ alignedResidue: parseInt(alignedResidue), scoredResidue: parseInt(scoredResidue), value: parseFloat(value) }]]
-//         }
-
-//         return acc
-//     }, [])
-// })
-
-
-// const plotPaeOptions = computed(() => {
-//     return {
-//         width: 640,
-//         height: 640,
-//         color: { scheme: "Greens", legend: true, reverse: true, label: "Expected position error (Ångströms)" },
-//         y: { reverse: true },
-//         marks: [
-//             Plot.dot(sanitizedPaeData.value, { x: "scoredResidue", y: "alignedResidue", stroke: "value" })
-//         ]
-//     }
-// })
-
 watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
     viewPdb(newSelectedPdb)
+    structureToDownload.value = newSelectedPdb
 })
 
 
+onMounted(() => {
+    const urls = toValue(refinedDataUrls)
+    if (props.uniq && urls.length >= 1) {
+        structureToDownload.value = urls[0]
+
+    }
+})
 function viewPdb(pdbPath: string | null) {
     if (pdbPath !== null) {
         dialog.value = true
         const format = toValue(pdbPath)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
         moleculeFormat.value = format
         if (pdbeMolstarComponent.value?.viewerInstance) {
-            console.log(pdbeMolstarComponent.value)
             const viewerInstance = pdbeMolstarComponent.value.viewerInstance
             const customData = { url: pdbPath, format: format, binary: false }
             viewerInstance.visual.update({ customData })
-            
+
         }
     }
 }
 
+
+
+
+
+
 function setSelectedPdbToFirst() {
     const urls = toValue(refinedDataUrls)
     if (urls.length >= 1) {
@@ -201,12 +158,15 @@ const moleculeFormat: Ref<string> = ref("pdb")
 
 <template>
     <span class="d-flex flex-wrap align-center justify-center">
-        <v-col>
-            <v-btn v-if="uniq" size="x-small" variant="tonal" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
+        <v-row>
+            <template v-if="uniq">
+                <v-btn size="x-small" variant="tonal" icon="md:visibility" @click="setSelectedPdbToFirst()"></v-btn>
+                <v-btn :disabled="!structureToDownload" size="x-small" variant="tonal" icon="md:download" class="ml-1"
+                    :href="structureToDownload"></v-btn>
+            </template>
             <v-select v-else v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto">
             </v-select>
-        </v-col>
-
+        </v-row>
         <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
             <v-card flat :rounded="false">
                 <v-toolbar>
@@ -215,7 +175,7 @@ const moleculeFormat: Ref<string> = ref("pdb")
                         hide-details="auto"></v-select>
                     <v-spacer></v-spacer>
 
-                    <v-btn :disabled="!selectedPdb" icon="md:download" :href="selectedPdb"></v-btn>
+                    <v-btn :disabled="!selectedPdb" icon="md:download" :href="structureToDownload"></v-btn>
                     <v-btn icon @click="closeStructure">
                         <v-icon>mdi-close</v-icon>
                     </v-btn>