use uniq molstar plugin for structure page

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