Draft: Modify all articles with article struct

components/content/ArticleStructure.vue

+<script setup lang="ts">
+import { toValue } from '@vueuse/core';
+import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
+
+
+const { page } = useContent();
+// get the structures
+const structures = ref()
+const structureTitle = ref("Structure")
+const msIndexName = ref<string>("structure")
+const stuctureUrls = ref<string[] | undefined>(undefined)
+const headers = ref<Record<string, any>[]>([
+    { title: 'Structure', key: 'structure', sortable: false, removable: false, fixed: true, minWidth: "110px" },
+
+    { title: " System", key: "System" },
+    { title: "Gene name", key: "gene_name", removable: false },
+    { title: "Subtype", key: "subtype", removable: false },
+    { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false, removable: true },
+    { title: "System genes", key: "system_genes", sortable: false, removable: true },
+    { title: "Prediction type", key: "prediction_type", removable: true },
+    { title: "N genes in sys", key: "system_number_of_genes", removable: true },
+    { title: "pLDDT", key: "plddts", removable: true },
+    { title: "iptm+ptm", key: "iptm+ptm", removable: true },
+    { title: "pDockQ", key: "pDockQ", removable: true },
+])
+const groupBy = ref([
+    {
+        key: 'subtype',
+        order: 'asc',
+    },
+])
+
+
+
+onBeforeMount(() => {
+    fetchStructures()
+})
+onMounted(() => {
+    fetchStructures()
+})
+
+function namesToCollapsibleChips(names: string[], systemDir: string, file: string | null = null) {
+    if (file === null) {
+        return names.filter((it) => it !== "").map(it => ({ title: it.split("__")[1] }))
+    } else {
+        return names.filter((it) => it !== "").map(it => ({ title: it.split("__")[1], href: `/wiki/${systemDir}/${file}` }))
+    }
+}
+function pdbNameToCif(pdbPath: string) {
+    const cifPath = pdbPath.split(".").slice(0, -1).join(".")
+    return `${cifPath}.cif`
+}
+function displayStructure(item) {
+    stuctureUrls.value = item.structuresUrls
+    console.log(item)
+    structureTitle.value = `${item.subtype} - ${item.gene_name}`
+
+}
+
+
+const sanitizedStructures = computed(() => {
+    const toValStructures = toValue(structures)
+    if (toValStructures?.hits?.length > 0) {
+
+        return toValStructures.hits.map(item => {
+            return {
+                ...item, structuresUrls: [`/${item.System_name_ok}/${pdbNameToCif(item.pdb)}`, `/${item.System_name_ok}/${item.pdb}`]
+                    .map(url => {
+                        return toValue(useRefinedUrl(url).refinedUrl)
+                    })
+            }
+        })
+    }
+    return []
+
+})
+
+
+// ==================================================================================
+// ASYNC PART 
+
+async function fetchStructures() {
+    const { data, error, refresh } = await useAsyncMeiliSearch({
+        index: toValue(msIndexName),
+        query: "",
+        params: {
+            facets: ["*"],
+            filter: [`System='${toValue(page).title}'`, "completed='true'"],
+        }
+    })
+    structures.value = data.value
+    if (error.value) {
+        throw createError(`Cannot get structure for system: ${page.title}`)
+    }
+}
+
+// watch(page() => {
+
+
+//     refresh()
+// })
+console.log(structures)
+
+
+</script>
+<template>
+    <v-card flat>
+        <v-data-table :headers="headers" :items="sanitizedStructures" :group-by="groupBy">
+            <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 v-slot:group-header="{ item, columns, toggleGroup, isGroupOpen }">
+                <tr>
+                    <td :colspan="columns.length">
+                        <VBtn :icon="isGroupOpen(item) ? '$expand' : '$next'" size="small" variant="text"
+                            @click="toggleGroup(item)"></VBtn>
+                        {{ item.value === 'na' ? 'No subtype' : item.value }}
+                    </td>
+                </tr>
+            </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>
+            </template>
+        </v-data-table>
+        <PdbeMolstarPlugin v-model="stuctureUrls" v-model:title="structureTitle" />
+    </v-card>
+</template>
\ No newline at end of file