diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 9e849debee2c90fd980da165bcb5318b9edd9bb4..e82aaa38465a462bc81207aa7533882b5b0d3f51 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -441,8 +441,8 @@ load-website:prod: - kubectl --namespace ${NAMESPACE} cp .output/public/ ${WIKI_POD}:/website - kubectl --namespace ${NAMESPACE} cp scripts/copy-structure-data.sh ${WIKI_POD}:/structure-data/sanitized-dump - - kubectl --namespace ${NAMESPACE} exec ${WIKI_POD} -- bash /structure-data/sanitized-dump/copy-structure-data.sh - - kubectl --namespace ${NAMESPACE} exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && find * -type d -exec sh -c "for d in $@; do (cd /usr/share/nginx/html/$d; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done" argv0 {} +' + - kubectl --namespace ${NAMESPACE} exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && bash copy-structure-data.sh' + # - kubectl --namespace ${NAMESPACE} exec ${WIKI_POD} -- bash -c 'cd /structure-data/sanitized-dump && find * -type d -exec sh -c "for d in $@; do (cd /usr/share/nginx/html/$d; cp --archive --recursive --symbolic-link /structure-data/sanitized-dump/$d/* .) done" argv0 {} +' diff --git a/components/content/MolstarPdbePlugin.vue b/components/content/MolstarPdbePlugin.vue index 3658274f9c7bcd2f81a241bb5927f455809c8974..79716b0788a78c6ad0b626310a6f8f720f7a8381 100644 --- a/components/content/MolstarPdbePlugin.vue +++ b/components/content/MolstarPdbePlugin.vue @@ -157,102 +157,103 @@ const moleculeFormat: Ref<string> = ref("pdb") <template> - <span class="d-flex flex-wrap align-center justify-center"> + <template v-if="uniq"> <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-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> </v-row> - <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false"> - <v-card flat :rounded="false"> - <v-toolbar> - <v-toolbar-title>Structures</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="structureToDownload"></v-btn> - <v-btn icon @click="closeStructure"> - <v-icon>mdi-close</v-icon> - </v-btn> - - </v-toolbar> - <v-card-text> - <v-row> - <v-col :cols="mobile ? 12 : 'auto'"> - <v-sheet v-if="selectedPdb" - class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" - :height="computedHeight" :width="computedWidth" position="relative"> - <pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true" - :custom-data-url="selectedPdb" alphafold-view="true" - :custom-data-format="moleculeFormat"></pdbe-molstar> - </v-sheet> - </v-col> - <v-col :cols="mobile ? 12 : undefined"> - <v-img :src="selectedPaePath"></v-img> - - <!-- <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer + </template> + <v-row v-else> + <span class="d-flex flex-wrap align-center justify-center"> + <v-select v-model="selectedPdb" label="Select PDB" :items="refinedDataUrls" hide-details="auto"> + </v-select> + </span> + </v-row> + <v-dialog v-model="dialog" transition="dialog-bottom-transition" fullscreen :scrim="false"> + <v-card flat :rounded="false"> + <v-toolbar> + <v-toolbar-title>Structures</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="structureToDownload"></v-btn> + <v-btn icon @click="closeStructure"> + <v-icon>mdi-close</v-icon> + </v-btn> + + </v-toolbar> + <v-card-text> + <v-row> + <v-col :cols="mobile ? 12 : 'auto'"> + <v-sheet v-if="selectedPdb" + class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4 my-3" + :height="computedHeight" :width="computedWidth" position="relative"> + <pdbe-molstar ref="pdbeMolstarComponent" hide-controls="true" landscape="true" + :custom-data-url="selectedPdb" alphafold-view="true" + :custom-data-format="moleculeFormat"></pdbe-molstar> + </v-sheet> + </v-col> + <v-col :cols="mobile ? 12 : undefined"> + <v-img :src="selectedPaePath"></v-img> + + <!-- <PlotFigure v-if="sanitizedPaeData?.length > 0 && paeError === null" defer :options="plotPaeOptions"></PlotFigure> <v-alert v-else type="warning" variant="tonal">{{ paeError }}</v-alert> --> - <v-card flat color="transparent"> - <v-card-title>Model Confidence</v-card-title> - <v-card-text> - AlphaFold produces a per-residue model - confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be - unstructured - in isolation. - </v-card-text> - <v-list> - <v-list-item> - <template #prepend> - <div class="legendColor mr-2" style="background-color: rgb(0, 83, 214);"> - </div> - </template> - <v-list-item-title> - Very high (pLDDT > 90) - </v-list-item-title> - - </v-list-item> - <v-list-item> - <template #prepend> - <div class="legendColor mr-2" style="background-color: rgb(101, 203, 243);"> - </div> - </template> - <v-list-item-title> - High (90 > pLDDT > 70) - </v-list-item-title> - - </v-list-item> - <v-list-item> - <template #prepend> - <div class="legendColor mr-2" style="background-color: rgb(255, 219, 19);"> - </div> - </template> - <v-list-item-title> - Low (70 > pLDDT > 50) </v-list-item-title> - - </v-list-item> - <v-list-item> - <template #prepend> - <div class="legendColor mr-2" style="background-color: rgb(255, 125, 69);"> - </div> - </template> - <v-list-item-title> - Very low (pLDDT < 50) </v-list-item-title> - - </v-list-item> - </v-list> - </v-card> - </v-col> - </v-row> - </v-card-text> - </v-card> - </v-dialog> - </span> + <v-card flat color="transparent"> + <v-card-title>Model Confidence</v-card-title> + <v-card-text> + AlphaFold produces a per-residue model + confidence score (pLDDT) between 0 and 100. Some regions below 50 pLDDT may be + unstructured + in isolation. + </v-card-text> + <v-list> + <v-list-item> + <template #prepend> + <div class="legendColor mr-2" style="background-color: rgb(0, 83, 214);"> + </div> + </template> + <v-list-item-title> + Very high (pLDDT > 90) + </v-list-item-title> + + </v-list-item> + <v-list-item> + <template #prepend> + <div class="legendColor mr-2" style="background-color: rgb(101, 203, 243);"> + </div> + </template> + <v-list-item-title> + High (90 > pLDDT > 70) + </v-list-item-title> + + </v-list-item> + <v-list-item> + <template #prepend> + <div class="legendColor mr-2" style="background-color: rgb(255, 219, 19);"> + </div> + </template> + <v-list-item-title> + Low (70 > pLDDT > 50) </v-list-item-title> + + </v-list-item> + <v-list-item> + <template #prepend> + <div class="legendColor mr-2" style="background-color: rgb(255, 125, 69);"> + </div> + </template> + <v-list-item-title> + Very low (pLDDT < 50) </v-list-item-title> + + </v-list-item> + </v-list> + </v-card> + </v-col> + </v-row> + </v-card-text> + </v-card> + </v-dialog> </template> diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue index f608ee9948406969fe46b4c25a64a238b8c57065..8136ee88763b36b569dd63294ffab08d64318c98 100644 --- a/components/content/StructureDb.vue +++ b/components/content/StructureDb.vue @@ -140,9 +140,9 @@ const plddtDistribution = computed(() => { <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'" :data-urls="[`/${toSystemName(item.system)}/${pdbNameToCif(item.pdb)}`]" uniq> </MolstarPdbePlugin> - <span v-else class="d-flex flex-wrap align-center justify-center"> - <v-icon color="warning" icon="md:dangerous"></v-icon> - </span> + + <!-- <v-icon v-else color="warning" icon="md:dangerous"></v-icon> --> + </template> <template #[`item.completed`]="{ item }"> <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon>