Skip to content
Snippets Groups Projects
Commit 37778c7e authored by Remi PLANEL's avatar Remi PLANEL
Browse files

use uniq molstar plugin for structure page

parent a1dfa18b
No related branches found
No related tags found
No related merge requests found
Pipeline #127532 failed with stages
Stage:
    Stage:
      Stage:
        Stage:
          Stage:
            Stage:
              Stage:
                Stage:
                  Stage:
                    Stage:
                      in 9 minutes and 11 seconds
                      Hide whitespace changes
                      Inline Side-by-side
                      components/content/StructureDb.vue
                      + 141
                      − 102
                      View file @ 37778c7e
                      ......@@ -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
                      0% or .
                      You are about to add 0 people to the discussion. Proceed with caution.
                      Finish editing this message first!
                      Please register or to comment