diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue index aee98a376c7999c7d4b1bb8fbe1d0ba6cd704f27..adc59535c0b917b1e4e8eb624f35076a16c0e982 100644 --- a/components/content/MolstarPdbePlugin.vue +++ b/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);"> </span><span _ngcontent-ykv-c96="" - class="legendlabel">Very high (pLDDT > 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);"> </span><span - _ngcontent-ykv-c96="" class="legendlabel">High (90 > pLDDT > 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);"> </span><span - _ngcontent-ykv-c96="" class="legendlabel">Low (70 > pLDDT > 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);"> </span><span - _ngcontent-ykv-c96="" class="legendlabel">Very low (pLDDT < 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>