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"> <script setup lang="ts">
interface Props { interface Props {
foldseekPath: string foldseekPath: string
title: string title: string
...@@ -37,6 +38,10 @@ const computedHeight = computed(() => { ...@@ -37,6 +38,10 @@ const computedHeight = computed(() => {
return toValue(height) - toValue(yMargin) return toValue(height) - toValue(yMargin)
}) })
const foldseekImgPath = ref<string>("/foldseek-avatar.webp")
const foldseekImgSrc = computed(() => {
return useRefinedUrl(foldseekImgPath).refinedUrl
})
function fullscreen() { function fullscreen() {
iframe.value.requestFullscreen(); iframe.value.requestFullscreen();
...@@ -48,11 +53,8 @@ function fullscreen() { ...@@ -48,11 +53,8 @@ function fullscreen() {
<template> <template>
<v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition"> <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition">
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-avatar> <v-avatar size="small">
<v-img src="~/assets/foldseek.png" alt="Foldseek results" v-bind="props" class="cursor-pointer"></v-img> <v-img :src="toValue(foldseekImgSrc)" 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> </v-avatar>
</template> </template>
<v-card variant="flat"> <v-card variant="flat">
......
<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)">
......
...@@ -247,7 +247,7 @@ const { refinedUrl: downloadAllCifUrl } = useRefinedUrl("/df-all-cifs.tar.gz") ...@@ -247,7 +247,7 @@ const { refinedUrl: downloadAllCifUrl } = useRefinedUrl("/df-all-cifs.tar.gz")
</v-card-text> </v-card-text>
</template> </template>
<template #[`item.Foldseek_name`]="{ item }"> <template #[`item.Foldseek_name`]="{ item }">
<FoldseekDialog :foldseek-path="toFolseekUrl(item)"></FoldseekDialog> <FoldseekDialog v-if="item?.pdb !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
</template> </template>
<template #[`item.proteins_in_the_prediction`]="{ item }"> <template #[`item.proteins_in_the_prediction`]="{ item }">
......
...@@ -11,7 +11,7 @@ export default defineNuxtConfig({ ...@@ -11,7 +11,7 @@ export default defineNuxtConfig({
'nuxt-meilisearch', 'nuxt-meilisearch',
'@nuxtjs/plausible', '@nuxtjs/plausible',
'@nuxtjs/seo', '@nuxtjs/seo',
'@nuxt/eslint' '@nuxt/eslint',
], ],
app: { app: {
head: { head: {
...@@ -101,7 +101,7 @@ export default defineNuxtConfig({ ...@@ -101,7 +101,7 @@ export default defineNuxtConfig({
config: { config: {
stylistic: true // <--- 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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment