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

foldseek image issue

parent b7a75e34
No related branches found
No related tags found
1 merge request!232foldseek image issue
<script setup lang="ts">
interface Props {
foldseekPath: string
title: string
......@@ -37,6 +38,10 @@ const computedHeight = computed(() => {
return toValue(height) - toValue(yMargin)
})
const foldseekImgPath = ref<string>("/foldseek-avatar.webp")
const foldseekImgSrc = computed(() => {
return useRefinedUrl(foldseekImgPath).refinedUrl
})
function fullscreen() {
iframe.value.requestFullscreen();
......@@ -48,11 +53,8 @@ function fullscreen() {
<template>
<v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition">
<template v-slot:activator="{ props }">
<v-avatar>
<v-img src="~/assets/foldseek.png" alt="Foldseek results" v-bind="props" class="cursor-pointer"></v-img>
<!-- <v-btn color="primary" dark v-bind="props">
<v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
</v-btn> -->
<v-avatar size="small">
<v-img :src="toValue(foldseekImgSrc)" alt="Foldseek results" v-bind="props" class="cursor-pointer"></v-img>
</v-avatar>
</template>
<v-card variant="flat">
......
<script setup lang="ts">
import { toValue } from '@vueuse/core';
// import MolstarPdbePlugin from './MolstarPdbePlugin.vue';
import { joinURL } from 'ufo'
import * as d3 from "d3";
import SystemOperonStructure from './SystemOperonStructure.vue';
import type { OperonStructureIndexName, StructureItem, StructureOperonGene } from '~/types/structure';
......@@ -20,6 +22,7 @@ const operonSructIndexName = ref<OperonStructureIndexName>("systemoperonstruct")
// 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: 'Foldseek', key: 'Foldseek_name', sortable: false },
{ title: "System", key: "system" },
{ title: "Gene name", key: "gene_name", removable: false },
......@@ -74,7 +77,11 @@ function displayStructure(item) {
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 toValStructures = toValue(structures)
......@@ -182,6 +189,10 @@ async function fetchAllOperonStructures() {
<v-card-title>Summary</v-card-title>
</v-card-item>
<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 }">
<CollapsibleChips
:items="namesToCollapsibleChips(item.proteins_in_the_prediction, item.system, item.fasta_file)">
......
......@@ -247,7 +247,7 @@ const { refinedUrl: downloadAllCifUrl } = useRefinedUrl("/df-all-cifs.tar.gz")
</v-card-text>
</template>
<template #[`item.Foldseek_name`]="{ item }">
<FoldseekDialog :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
<FoldseekDialog v-if="item?.pdb !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
</template>
<template #[`item.proteins_in_the_prediction`]="{ item }">
......
......@@ -11,7 +11,7 @@ export default defineNuxtConfig({
'nuxt-meilisearch',
'@nuxtjs/plausible',
'@nuxtjs/seo',
'@nuxt/eslint'
'@nuxt/eslint',
],
app: {
head: {
......@@ -101,7 +101,7 @@ export default defineNuxtConfig({
config: {
stylistic: true // <---
}
}
},
})
})
\ No newline at end of file
This diff is collapsed.
public/foldseek-avatar.png

13.4 KiB

public/foldseek-avatar.webp

12 KiB

File moved
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