handle case when title do not correspond to system name

components/content/ArticleStructure.vue

@@ -32,7 +32,10 @@ const groupBy = ref([
     },
 ])
 
-
+const computedSystem = computed(() => {
+    const toValPage = toValue(page)
+    return toValPage?.system ?? toValPage?.title ?? undefined
+})
 onMounted(() => {
     fetchStructures()
 })
@@ -82,11 +85,11 @@ async function fetchStructures() {
     try {
         const d = await client.index(toValue(msIndexName)).search("", {
             facets: ["*"],
-            filter: [`System='${toValue(page).title}'`, "completed='true'"],
+            filter: [`System='${toValue(computedSystem)}'`, "completed='true'"],
         })
         structures.value = d
     } catch (error) {
-        throw createError(`Cannot get structure for system: ${page.title}`)
+        throw createError(`Cannot get structure for system: ${toValue(computedSystem)}`)
     }
 }
 

components/content/ArticleSystemDistributionPlot.vue

@@ -109,6 +109,11 @@ const distributionOptions = computed(() => {
 })
 
 
+const systemName = computed(() => {
+    const toValPage = toValue(page)
+    return toValPage?.system ?? toValPage?.title ?? undefined
+})
+
 // =================================================
 // ASYNC PART 
 // =================================================
@@ -118,13 +123,13 @@ async function fetchSystemHits() {
         query: "",
         params: {
             facets: ["*"],
-            filter: [`type='${toValue(page).title}'`],
+            filter: [`type='${toValue(systemName)}'`],
             limit: 500000,
         }
     })
     systemHits.value = data.value
     if (error.value) {
-        throw createError(`Cannot get hits on refseq for system: ${page.title}`)
+        throw createError(`Cannot get hits on refseq for system: ${toValue(systemName)}`)
     }
 }
 
@@ -140,7 +145,7 @@ async function fetchRefSeqTaxo() {
     })
     refseqTaxo.value = data.value
     if (error.value) {
-        throw createError(`Cannot get refseq taxo: ${page.title}`)
+        throw createError(`Cannot get refseq taxo: ${toValue(systemName)}`)
     }
 }
 

components/content/pdockqMatrix.vue

@@ -8,13 +8,10 @@ import { useRefinedUrl } from "@/composables/useRefinedUrl"
 import { useDisplay } from "vuetify";
 
 
-export interface Props {
-    system?: MaybeRef<string | null>
-}
+
 const { mobile } = useDisplay();
 
 const { page } = useContent();
-const { system } = withDefaults(defineProps<Props>(), { system: null })
 const dbName = "structure"
 const filterBase = ref<string[]>([
     "prediction_type='multimer(dimer)'",
@@ -58,17 +55,22 @@ onMounted(async () => {
 
 })
 
+
 const computedSystem = computed(() => {
     const toValPage = toValue(page)
-    const toValSystem = toValue(system)
-    if (toValSystem === null) {
-        return toValPage?.title?.toLowerCase() ?? null
-    }
-    else {
-        return toValSystem
-    }
+    return toValPage?.system ?? toValPage?.title ?? undefined
 })
 
+// const computedSystem = computed(() => {
+//     const toValSystem = toValue(system)
+//     if (toValSystem === null) {
+//         return toValue(systemName).toLowerCase() ?? null
+//     }
+//     else {
+//         return toValSystem
+//     }
+// })
+
 
 const groupedPdocks = computed(() => {
     const toValData = toValue(data)