diff --git a/components/content/StructureDb.vue b/components/content/StructureDb.vue index 35eff255100596d973202a4b76fc47ec7cace17b..1fa0667b56c85e5efb21c8dcf6fde38c675a520b 100644 --- a/components/content/StructureDb.vue +++ b/components/content/StructureDb.vue @@ -16,6 +16,9 @@ const sortBy: Ref<SortItem[]> = ref([{ key: 'System', order: "asc" }]) const itemValue = ref("id"); const dbName = ref("structure") const client = useMeiliSearchRef() +const structureTitle = ref("Structure") +const stuctureUrls = ref<string[] | undefined>(undefined) + onMounted(async () => { @@ -148,111 +151,147 @@ function pdbNameToCif(pdbPath: string) { return `${cifPath}.cif` } + +function buildStructureUrl(item) { + return [`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`] +} + +function displayStructure(item) { + stuctureUrls.value = buildStructureUrl(item).map(url => { + return toValue(useRefinedUrl(url).refinedUrl) + }) + structureTitle.value = `${item.subtype} - ${item.gene_name}` + +} const { refinedUrl: downloadAllPdbUrl } = useRefinedUrl("/df-all-pdbs.tar.gz") const { refinedUrl: downloadAllCifUrl } = useRefinedUrl("/df-all-cifs.tar.gz") </script> <template> - <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps" - :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" - :numerical-filters="toRef(numericalFilters)"> - <template #numerical-filters="{ search }"> - <v-row> - <v-col cols="12" md="4"> - <v-card flat variant="tonal"> - <v-card-item class="mb-4"> - <v-card-title> pLDDT - </v-card-title> - </v-card-item> - <v-card-text class="pr-0"> - <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" class="" - step="0.5" :min="0" :max="100" thumb-label="always" @update:modelValue="search()"> - <template #append> - <v-btn variant="text" density="compact" icon="md:restart_alt" - @click="plddtsReset()"></v-btn> - </template> - - </v-range-slider> - </v-card-text> - </v-card> - </v-col> - <v-col cols="12" md="4"> - <v-card flat variant="tonal"> - <v-card-item class="mb-4"> - <v-card-title> iptm+ptm - </v-card-title> - </v-card-item> - <v-card-text class="pr-0"> - <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" step="0.1" - :min="0" :max="1" thumb-label="always" @update:modelValue="search()"> - <template #append> - <v-btn variant="text" density="compact" icon="md:restart_alt" - @click="iptmReset()"></v-btn> - </template> - </v-range-slider> - </v-card-text></v-card> - </v-col> - - <v-col cols="12" md="4"> - <v-card flat variant="tonal"> - <v-card-item class="mb-4"> - <v-card-title> pDockQ - </v-card-title> - </v-card-item> - <v-card-text class="pr-0"> - <v-range-slider v-model="pdockqRange" density="compact" strict hide-details="auto" - step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()"> - <template #append> - <v-btn variant="text" density="compact" icon="md:restart_alt" - @click="pdockqReset()"></v-btn> - </template> - </v-range-slider> - </v-card-text> - </v-card> - </v-col> - </v-row> - </template> - <template #[`item.Foldseek_name`]="{ item }"> - <FoldseekDialog v-if="item.Foldseek_name !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog> - - </template> - <template #[`item.proteins_in_the_prediction`]="{ item }"> - <CollapsibleChips - :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.System_name_ok, item.fasta_file)"> - </CollapsibleChips> - </template> - <template #[`item.system_genes`]="{ item }"> - <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes, item.System_name_ok)"> - </CollapsibleChips> - </template> - <template #[`item.structure`]="{ item }"> - <v-row no-gutters align="center"> - <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'" - :data-urls="[`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`]" - uniq format="cif"> - </MolstarPdbePlugin> - </v-row> - </template> - <template #[`item.completed`]="{ item }"> - <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon> - <v-icon v-else color="warning" icon="md:dangerous"></v-icon> - </template> - <template #toolbar-items> - <v-menu> - <template v-slot:activator="{ props }"> - <!-- <v-tooltip activator="parent" location="top">Download all structures</v-tooltip> --> - <v-btn class="align-self-end" v-bind="props" icon="md:download"> - </v-btn> - </template> - <v-list> - <v-list-item value="pdb" :href="downloadAllPdbUrl"> - <v-list-item-title>all pdbs</v-list-item-title> - </v-list-item> - <v-list-item value="cif" :href="downloadAllCifUrl"> - <v-list-item-title>all cifs</v-list-item-title> - </v-list-item> - </v-list> - </v-menu> - </template> - </ServerDbTable> + <v-card> + <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps" + :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" + :numerical-filters="toRef(numericalFilters)"> + <template #numerical-filters="{ search }"> + <v-row> + <v-col cols="12" md="4"> + <v-card flat variant="tonal"> + <v-card-item class="mb-4"> + <v-card-title> pLDDT + </v-card-title> + </v-card-item> + <v-card-text class="pr-0"> + <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" + class="" step="0.5" :min="0" :max="100" thumb-label="always" + @update:modelValue="search()"> + <template #append> + <v-btn variant="text" density="compact" icon="md:restart_alt" + @click="plddtsReset()"></v-btn> + </template> + + </v-range-slider> + </v-card-text> + </v-card> + </v-col> + <v-col cols="12" md="4"> + <v-card flat variant="tonal"> + <v-card-item class="mb-4"> + <v-card-title> iptm+ptm + </v-card-title> + </v-card-item> + <v-card-text class="pr-0"> + <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" + step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()"> + <template #append> + <v-btn variant="text" density="compact" icon="md:restart_alt" + @click="iptmReset()"></v-btn> + </template> + </v-range-slider> + </v-card-text></v-card> + </v-col> + + <v-col cols="12" md="4"> + <v-card flat variant="tonal"> + <v-card-item class="mb-4"> + <v-card-title> pDockQ + </v-card-title> + </v-card-item> + <v-card-text class="pr-0"> + <v-range-slider v-model="pdockqRange" density="compact" strict hide-details="auto" + step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()"> + <template #append> + <v-btn variant="text" density="compact" icon="md:restart_alt" + @click="pdockqReset()"></v-btn> + </template> + </v-range-slider> + </v-card-text> + </v-card> + </v-col> + </v-row> + </template> + <template #[`item.Foldseek_name`]="{ item }"> + <FoldseekDialog v-if="item.Foldseek_name !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog> + + </template> + <template #[`item.proteins_in_the_prediction`]="{ item }"> + <CollapsibleChips + :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.System_name_ok, item.fasta_file)"> + </CollapsibleChips> + </template> + <template #[`item.system_genes`]="{ item }"> + <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes, item.System_name_ok)"> + </CollapsibleChips> + </template> + <template #[`item.structure`]="{ item }"> + <v-row justify="space-between" dense no-gutters align="center"> + <v-col> + <v-btn size="x-small" variant="text" icon="md:visibility" + @click="displayStructure(item)"></v-btn> + </v-col> + <v-col> + <v-menu> + <template v-slot:activator="{ props }"> + <v-btn :disabled="item.structuresUrls?.length < 1" size="x-small" variant="text" + icon="md:download" class="ml-1" v-bind="props"></v-btn> + </template> + <v-list> + <v-list-item v-for="(url, index) in item.structuresUrls" :key="index" :value="index" + :href="url"> + <v-list-item-title>{{ url.split('.').slice(-1)[0] }}</v-list-item-title> + </v-list-item> + </v-list> + </v-menu> + </v-col> + </v-row> + <!-- <v-row no-gutters align="center"> + <MolstarPdbePlugin v-if="item?.pdb && item.pdb !== 'na'" + :data-urls="[`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`]" + uniq format="cif"> + </MolstarPdbePlugin> + </v-row> --> + </template> + <template #[`item.completed`]="{ item }"> + <v-icon v-if="item.completed" color="success" icon="md:check"></v-icon> + <v-icon v-else color="warning" icon="md:dangerous"></v-icon> + </template> + <template #toolbar-items> + <v-menu> + <template v-slot:activator="{ props }"> + <!-- <v-tooltip activator="parent" location="top">Download all structures</v-tooltip> --> + <v-btn class="align-self-end" v-bind="props" icon="md:download"> + </v-btn> + </template> + <v-list> + <v-list-item value="pdb" :href="downloadAllPdbUrl"> + <v-list-item-title>all pdbs</v-list-item-title> + </v-list-item> + <v-list-item value="cif" :href="downloadAllCifUrl"> + <v-list-item-title>all cifs</v-list-item-title> + </v-list-item> + </v-list> + </v-menu> + </template> + </ServerDbTable> + <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" /> + </v-card> </template> \ No newline at end of file