add option when pdb uniq use a button

components/content/MolstarPdbePlugin.vue

@@ -12,6 +12,7 @@ export interface Props {
     height?: number
     dataUrls?: string[]
     dataUrl?: string
+    uniq?: boolean
 }
 // const selectedPdb = ref('')
 const refinedDataUrls = computed(() => {
@@ -44,6 +45,7 @@ const refinedDataUrls = computed(() => {
 // const selectedPdb = ref(refinedDataUrls.value?.length > 0 ? refinedDataUrls.value[0] : null)
 const props = withDefaults(defineProps<Props>(), {
     height: 600,
+    uniq: false
 })
 
 const { width, height } = useDisplay()
@@ -95,7 +97,7 @@ 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)
+const selectedPdb: Ref<string | null> = ref(null)
 
 const selectedPaePath = computed(() => {
     return selectedPdb.value ? `${selectedPdb.value.split(".").slice(0, -1).join('.')}.tsv` : null
@@ -160,23 +162,29 @@ const plotPaeOptions = computed(() => {
 })
 
 watch(selectedPdb, (newSelectedPdb, prevSelectPdb) => {
-    if (newSelectedPdb !== null) {
+    viewPdb(newSelectedPdb)
+})
+
+
+function viewPdb(pdbPath: string | null) {
+    if (pdbPath !== null) {
         dialog.value = true
-        const format = toValue(newSelectedPdb)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
+        const format = toValue(pdbPath)?.split(".").slice(-1)[0]?.toLowerCase() ?? "pdb"
         moleculeFormat.value = format
         if (pdbeMolstarComponent.value?.viewerInstance) {
             const viewerInstance = pdbeMolstarComponent.value.viewerInstance
-
-            // show.value = true
-
-            const customData = { url: newSelectedPdb, format: format, binary: false }
-
+            const customData = { url: pdbPath, format: format, binary: false }
             viewerInstance.visual.update({ customData })
-
         }
+    }
+}
 
+function setSelectedPdbToFirst() {
+    const urls = toValue(refinedDataUrls)
+    if (urls.length >= 1) {
+        selectedPdb.value = urls[0]
     }
-})
+}
 
 // const moleculeFormat = computed(() => {
 //     return toValue(selectedPdb)?.split(".")?.[-1]?.toLowerCase() ?? "pdb"
@@ -186,10 +194,13 @@ const moleculeFormat: Ref<string> = ref("pdb")
 
 
 <template>
-    <v-row><v-col><v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls"
-                hide-details="auto"></v-select></v-col></v-row>
+    <span class="d-flex flex-wrap align-center justify-center">
+        <v-col>
+            <v-btn v-if="uniq" size="x-small" variant="tonal" icon="mdi-molecule" @click="setSelectedPdbToFirst()"></v-btn>
+            <v-select v-else v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto">
+            </v-select>
+        </v-col>
 
-    <v-row justify="center">
         <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false">
             <v-card flat :rounded="false">
                 <v-toolbar>
@@ -269,35 +280,12 @@ const moleculeFormat: Ref<string> = ref("pdb")
                                     </v-list-item>
                                 </v-list>
                             </v-card>
-                            <!-- <div _ngcontent-ykv-c96="" class="confidenceWrapper">
-                                <div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
-                                        _ngcontent-ykv-c96="" class="legendColor"
-                                        style="background-color: rgb(0, 83, 214);">&nbsp;</span><span _ngcontent-ykv-c96=""
-                                        class="legendlabel">Very high (pLDDT &gt; 90)</span></div>
-                                <div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
-                                        _ngcontent-ykv-c96="" class="legendColor"
-                                        style="background-color: rgb(101, 203, 243);">&nbsp;</span><span
-                                        _ngcontent-ykv-c96="" class="legendlabel">High (90 &gt; pLDDT &gt; 70)</span></div>
-                                <div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
-                                        _ngcontent-ykv-c96="" class="legendColor"
-                                        style="background-color: rgb(255, 219, 19);">&nbsp;</span><span
-                                        _ngcontent-ykv-c96="" class="legendlabel">Low (70 &gt; pLDDT &gt; 50)</span></div>
-                                <div _ngcontent-ykv-c96="" class="column legendRow ng-star-inserted"><span
-                                        _ngcontent-ykv-c96="" class="legendColor"
-                                        style="background-color: rgb(255, 125, 69);">&nbsp;</span><span
-                                        _ngcontent-ykv-c96="" class="legendlabel">Very low (pLDDT &lt; 50)</span></div> -->
-                            <!---->
-                            <!-- </div> -->
-                            <!-- <div _ngcontent-ykv-c96="" class="column legendDesc"> AlphaFold produces a per-residue model
-                                confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be unstructured
-                                in isolation. </div> -->
                         </v-col>
                     </v-row>
                 </v-card-text>
-
             </v-card>
         </v-dialog>
-    </v-row>
+    </span>
 </template>