foldseek image issue

components/FoldseekDialog.vue

 <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">

components/content/ArticleStructure.vue

 <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)">

components/content/StructureDb.vue

@@ -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 }">

nuxt.config.ts

@@ -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