StructureDb.vue

<script setup lang="ts">
import type { SortItem } from "@/components/ServerDbTable.vue"
import { ServerDbTable } from "#components"
const sortBy: Ref<SortItem[]> = ref([{ key: 'system', order: "asc" }])
const itemValue = ref("id");
const facets: Ref<string[]> = ref(["system", "completed"])
const headers: Ref<Object[]> = ref([
    { title: "System", key: "system", removable: false },
    // { title: "pdb file", key: "pdb" },
    // { title: "fasta", key: "fasta_file" },
    { title: "Proteins in structure", key: 'proteins_in_the_prediction', sortable: false, removable: true },
    { title: "System genes", key: "system_genes", sortable: false, removable: true },
    { title: "Sys id", key: "nb_sys", removable: true },

    { title: "Completed", key: "completed", 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 },
    { title: "Type", key: "type", removable: true },
    { title: 'Structure', key: 'structure', sortable: false, removable: false },

])
const { search: msSearch, result: msResult } = useMeiliSearch('structure')

const defaultDataTableServerProps = ref({
    showExpand: false
})

const dataTableServerProps = computed(() => {
    return {
        ...toValue(defaultDataTableServerProps),
        headers: toValue(headers),
        itemValue: toValue(itemValue)
    }
})




function namesToCollapsibleChips(names: string[], file: string | null = null) {
    if (file === null) {
        return names.filter((it) => it !== "").map(it => ({ title: it.split("__").pop() }))
    } else {
        return names.filter((it) => it !== "").map(it => ({ title: it.split("__").pop(), href: `/wiki/${toSystemName(file)}/${file}` }))
    }
}

function pdbNameToCif(pdbPath: string) {
    const cifPath = pdbPath.split(".").slice(0, -1).join(".")
    return `${cifPath}.cif`
}


function toSystemName(rawName: string) {
    return rawName.split(/_|-0/)[0].toLocaleLowerCase()

}


const plddtDistribution = computed(() => {
    if (toValue(msResult)?.facetDistribution?.plddts) {
        return Object.entries(toValue(msResult).facetDistribution.plddts).map(([key, value]) => { })
    }
})

function remove(key) {
    headers.value = headers.value.filter(header => header.key !== key)
}

</script>
<template>
    <ServerDbTable title="Predicted Structures" db="structure" :sortBy="sortBy" :facets="facets"
        :data-table-server-props="dataTableServerProps">

        <template #top>
            <v-toolbar><v-toolbar-title class="text-capitalize">
                    Predicted Structures
                </v-toolbar-title><v-spacer></v-spacer>

            </v-toolbar>
        </template>

        <template #[`item.proteins_in_the_prediction`]="{ item }">
            <CollapsibleChips :items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.fasta_file)">
            </CollapsibleChips>
        </template>
        <template #[`item.system_genes`]="{ item }">
            <CollapsibleChips :items="namesToCollapsibleChips(item.system_genes)"></CollapsibleChips>
        </template>
        <template #[`item.structure`]="{ item }">
            <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>
        </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>
    </ServerDbTable>
</template>