Skip to content
Snippets Groups Projects

foldseek image issue

Merged Remi PLANEL requested to merge dev into main
8 files
+ 5838
6005
Compare changes
  • Side-by-side
  • Inline
Files
8
<script setup lang="ts">
<script setup lang="ts">
import { toValue } from '@vueuse/core';
import { toValue } from '@vueuse/core';
// import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
// import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
 
import { joinURL } from 'ufo'
 
import * as d3 from "d3";
import * as d3 from "d3";
import SystemOperonStructure from './SystemOperonStructure.vue';
import SystemOperonStructure from './SystemOperonStructure.vue';
import type { OperonStructureIndexName, StructureItem, StructureOperonGene } from '~/types/structure';
import type { OperonStructureIndexName, StructureItem, StructureOperonGene } from '~/types/structure';
@@ -20,6 +22,7 @@ const operonSructIndexName = ref<OperonStructureIndexName>("systemoperonstruct")
@@ -20,6 +22,7 @@ const operonSructIndexName = ref<OperonStructureIndexName>("systemoperonstruct")
// const stuctureUrls = ref<string[] | undefined>(undefined)
// const stuctureUrls = ref<string[] | undefined>(undefined)
const headers = ref<Record<string, any>[]>([
const headers = ref<Record<string, any>[]>([
{ title: 'Structure', key: 'structure', sortable: false, removable: false, fixed: true, minWidth: "110px" },
{ title: 'Structure', key: 'structure', sortable: false, removable: false, fixed: true, minWidth: "110px" },
 
{ title: 'Foldseek', key: 'Foldseek_name', sortable: false },
{ title: "System", key: "system" },
{ title: "System", key: "system" },
{ title: "Gene name", key: "gene_name", removable: false },
{ title: "Gene name", key: "gene_name", removable: false },
@@ -74,7 +77,11 @@ function displayStructure(item) {
@@ -74,7 +77,11 @@ function displayStructure(item) {
structureTitle.value = `${item.subsystem} - ${item.gene_name}`
structureTitle.value = `${item.subsystem} - ${item.gene_name}`
}
}
function toFolseekUrl(item) {
 
const url = joinURL("/" + item.system.toLocaleLowerCase(), item.pdb.replace(/\.pdb$/i, ".html"))
 
const { refinedUrl } = useRefinedUrl(url)
 
return toValue(refinedUrl)
 
}
const sanitizedStructures = computed(() => {
const sanitizedStructures = computed(() => {
const toValStructures = toValue(structures)
const toValStructures = toValue(structures)
@@ -182,6 +189,10 @@ async function fetchAllOperonStructures() {
@@ -182,6 +189,10 @@ async function fetchAllOperonStructures() {
<v-card-title>Summary</v-card-title>
<v-card-title>Summary</v-card-title>
</v-card-item>
</v-card-item>
<v-data-table :headers="headers" :items="sanitizedStructures" :group-by="groupBy">
<v-data-table :headers="headers" :items="sanitizedStructures" :group-by="groupBy">
 
<template #[`item.Foldseek_name`]="{ item }">
 
<FoldseekDialog v-if="item?.pdb !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
 
 
</template>
<template #[`item.proteins_in_the_prediction`]="{ item }">
<template #[`item.proteins_in_the_prediction`]="{ item }">
<CollapsibleChips
<CollapsibleChips
:items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.system, item.fasta_file)">
:items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.system, item.fasta_file)">
Loading