UI improvements

guigolab · Sep 9, 2024 · 2f87abc · 2f87abc
1 parent 0abde01
commit 2f87abc
Show file tree

Hide file tree

Showing 36 changed files with 451 additions and 420 deletions.
diff --git a/biogenome-client/configs/charts.json b/biogenome-client/configs/charts.json
@@ -7,8 +7,8 @@
             "type": "pie"
         },
         {
-            "model": "assemblies",
-            "field": "metadata.assembly_info.assembly_level",
+            "model": "organisms",
+            "field": "goat_status",
             "class": "flex lg6 md6 sm12 xs12",
             "type": "pie"
         }
@@ -73,5 +73,24 @@
             "type": "dateline"
         }
     ],
-    "organisms": []
+    "organisms": [
+        {
+            "model": "organisms",
+            "field": "insdc_status",
+            "class": "flex lg6 md6 sm12 xs12",
+            "type": "pie"
+        },
+        {
+            "model": "organisms",
+            "field": "goat_status",
+            "class": "flex lg6 md6 sm12 xs12",
+            "type": "pie"
+        },
+        {
+            "model": "organisms",
+            "field": "target_list_status",
+            "class": "flex lg6 md6 sm12 xs12",
+            "type": "pie"
+        }
+    ]
 }
diff --git a/biogenome-client/configs/columns.json b/biogenome-client/configs/columns.json
@@ -7,6 +7,11 @@
         "metadata.lifestage",
         "metadata.tissue"
     ],
+    "local_samples": [
+        "local_id",
+        "scientific_name",
+        "taxid"
+    ],
     "experiments": [
         "experiment_accession",
         "metadata.scientific_name",
@@ -24,11 +29,5 @@
         "metadata.assembly_info.assembly_type",
         "metadata.assembly_info.assembly_status",
         "metadata.assembly_info.release_date"
-    ],
-    "organisms": [
-        "scientific_name",
-        "taxid",
-        "insdc_common_name",
-        "insdc_status"
     ]
 }
diff --git a/biogenome-client/configs/filters.json b/biogenome-client/configs/filters.json
@@ -53,6 +53,14 @@
         {
             "key": "insdc_status",
             "type": "select"
+        },
+        {
+            "key": "goat_status",
+            "type": "select"
+        },
+        {
+            "key": "target_list_status",
+            "type": "select"
         }
     ]
 }
diff --git a/biogenome-client/configs/general.json b/biogenome-client/configs/general.json
@@ -1,38 +1,27 @@
 {
-    "title": "EBP Portal Community Edition",
+    "title": "Catalan Initiative for the Earth BioGenome Project",
     "nav": {
-        "logo": "EBP-Logo.png",
-        "url": "https://www.earthbiogenome.org/"
+      "logo": "CBPLogo.png",
+      "url": "https://www.biogenoma.cat"
     },
-    "cms": false,
-    "goat": false,
-    "tracker": "",
+    "cms": true,
+    "goat": true,
+    "tracker": "cbp-tracking.js",
     "languages": [
-        {
-            "code": "gb",
-            "name": "english"
-        },
-        {
-            "code": "es-ct",
-            "name": "catalan"
-        },
-        {
-            "code": "fr",
-            "name": "french"
-        },
-        {
-            "code": "es",
-            "name": "spanish"
-        }
+      {
+        "code": "gb",
+        "name": "english"
+      },
+      {
+        "code": "es-ct",
+        "name": "catalan"
+      }
     ],
     "wiki": {
-        "gb": "https://en.m.wikipedia.org/wiki",
-        "es-ct": "https://ca.m.wikipedia.org/wiki",
-        "fr": "https://fr.m.wikipedia.org/wiki",
-        "es": "https://es.m.wikipedia.org/wiki"
+      "gb": "https://en.m.wikipedia.org/wiki",
+      "es-ct": "https://ca.m.wikipedia.org/wiki"
     },
     "maps": [
-        "samples-map",
-        "countries"
+        "samples-map"
     ]
 }
diff --git a/biogenome-client/configs/pages.json b/biogenome-client/configs/pages.json
@@ -1,72 +1,62 @@
 {
     "dashboard": {
         "title": {
-            "gb": "EBP Portal Community Edition",
-            "es-ct": "EBP Portal Community Edition",
-            "es": "EBP Portal Community Edition",
-            "fr": "EBP Portal Community Edition"
+            "gb": "Catalan Initiative for the Earth BioGenome Project",
+            "es-ct": "Iniciativa Catalana per a l’Earth BioGenome Project"
         },
         "description": {
-            "gb": "This portal tracks the INSDC submission progress of the Earth Biogenome Project (EBP)",
-            "es-ct": "Aquest portal segueix el progrés de les submissions a l'INSDC del Projecte Biogenoma Terrestre (EBP).",
-            "es": "Este portal sigue el progreso de la submission en el INSDC del Proyecto de Biogenoma Terrestre (EBP)",
-            "fr": "Ce portail suit l'avancement des soumissions à l'INSDC du Projet de Biogénome Terrestre (EBP)."
+            "gb": "The Catalan Initiative for the Earth BioGenome Project (CBP) aims to produce a detailed catalogue of the genome of eukaryotic species in the Catalan territories",
+            "es-ct": "La Iniciativa Catalana per a l’Earth BioGenome Project (CBP) té per objectiu la producció d’un catàleg detallat del genoma de les espècies eucariotes dels territoris de parla catalana."
         }
     },
     "biosamples": {
         "title": {
-            "gb": "BioSamples collected under the EBP",
-            "es-ct": "BioSamples recopilades sota l'EBP.",
-            "fr": "BioSamples collectés dans le cadre de l'EBP",
-            "es": "BioSamples recolectadas bajo el EBP"
+            "gb": "BioSamples",
+            "es-ct": "BioSamples"
         },
         "description": {
-            "gb": "These biosamples, include those associated with projects ERGA, DTOL, or CBP, as well as those retrieved from assemblies and experiments metadata via a cronjob import.",
-            "es-ct": "Aquestes mostres biològiques inclouen aquelles associades als projectes ERGA, DTOL o CBP, així com aquelles recuperades del metadades de muntatge a través d'una importació de cronjob.",
-            "fr": "Ces échantillons biologiques incluent ceux associés aux projets ERGA, DTOL ou CBP, ainsi que ceux récupérés à partir des métadonnées d'assemblage via une importation cronjob.",
-            "es": "Estas muestras biológicas incluyen aquellas asociadas con los proyectos ERGA, DTOL o CBP, así como aquellas recuperadas de los metadatos de ensamblaje mediante una importación cronjob."
+            "gb": "These BioSamples include those associated with the CBP project, as well as those retrieved from assemblies and experiments metadata, all imported via a cronjob.",
+            "es-ct": "Aquestes BioSamples inclouen les associades amb el projecte CBP, així com les recuperades de les metadades d'assemblatges i experiments, totes importades mitjançant un cronjob."
+        }
+    },
+    "local_samples": {
+        "title": {
+            "gb": "Local samples",
+            "es-ct": "Mostres locals"
+        },
+        "description": {
+            "gb": "List of samples that have been imported into the database through spreadsheet uploads. These samples are currently awaiting submission to a broker or the European Nucleotide Archive (ENA)",
+            "es-ct": "Llista de mostres que s'han importat a la base de dades mitjançant càrregues de fulls de càlcul. Aquestes mostres estan actualment a l'espera de ser enviades a un intermediari o a l'Arxiu Nucleòtid Europeu (ENA)."
         }
     },
     "experiments": {
         "title": {
-            "gb": "Experiments collected under the EBP",
-            "es": "Experimentos recopilados bajo el EBP",
-            "es-ct": "Experimentos recopilats sota l'EBP",
-            "fr": "Expériments collectées dans le cadre de l'EBP"
+            "gb": "Experiments",
+            "es-ct": "Experimentos"
         },
         "description": {
-            "gb": "Experiments and Reads collected under the EBP",
-            "es": "Experimentos y lecturas recopilados bajo el EBP",
-            "es-ct": "Experimentos i lectures recopilats sota l'EBP",
-            "fr": "Expériments et lectures collectées dans le cadre de l'EBP"
+            "gb": "Experiments and Reads imported from INSDC under the CBP",
+            "es-ct": "Experiments i lectures importades de l'INSDC sota l'accés al projecte CBP"
         }
     },
     "assemblies": {
         "title": {
-            "gb": "Assemblies collected under the EBP",
-            "es": "Ensambles recopilados bajo el EBP",
-            "es-ct": "Muntatges recopilats sota l'EBP",
-            "fr": "Assemblages collectés dans le cadre de l'EBP"
+            "gb": "Assemblies",
+            "es-ct": "Assemblatges"
         },
         "description": {
-            "gb": "Assemblies retrieved from NCBI under EBP (PRJNA533106)",
-            "es": "Ensambles recuperados de NCBI bajo el EBP (PRJNA533106)",
-            "es-ct": "Muntatges recuperats de NCBI sota el EBP (PRJNA533106)",
-            "fr": "Assemblages récupérés de NCBI sous le EBP (PRJNA533106)"
+            "gb": "Assemblies retrieved from NCBI under CBP (PRJEB49670)",
+            "es-ct": "Assemblatges recuperats de NCBI sota la CBP (PRJEB49670)"
         }
     },
     "organisms": {
         "title": {
-            "gb": "Species sequenced under the EBP umbrella",
-            "es": "Especies secuenciadas bajo el EBP",
-            "es-ct": "Espècies seqüenciades sota l'EBP",
-            "fr": "Espèces séquencées dans le cadre de l'EBP"
+            "gb": "Organisms",
+            "es-ct": "Organismes"
         },
         "description": {
-            "gb": "INSDC submission status of species sequenced under the EBP umbrella",
-            "es": "Lista de especies secuenciadas bajo el paraguas del EBP",
-            "es-ct": "Llista d'espècies seqüenciades sota el paraigua de l'EBP",
-            "fr": "Liste des espèces séquencées sous l'égide de l'EBP"
+            "gb": "List of organisms currently targeted by the CBP",
+            "es-ct": "Llista d'organismes actualment objectiu del CBP"
         }
     }
 }
diff --git a/biogenome-client/src/App.vue b/biogenome-client/src/App.vue
@@ -11,7 +11,7 @@ import config from '../configs/general.json'
 onMounted(() => {
   document.title = config.title
   if (config.tracker) {
-    const src = import.meta.env.VITE_BASE_PATH ? import.meta.env.VITE_BASE_PATH + `/tracking/${tracker}` : `/tracking/${tracker}`
+    const src = import.meta.env.VITE_BASE_PATH ? import.meta.env.VITE_BASE_PATH + `/tracking/${config.tracker}` : `/tracking/${config.tracker}`
     const trackerScript = document.createElement('script')
     trackerScript.setAttribute("type", "text/javascript")
     trackerScript.setAttribute("src", src)

diff --git a/biogenome-client/src/components/blocks/ChartsBlock.vue b/biogenome-client/src/components/blocks/ChartsBlock.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="row row-equal">
-        <div v-for="chart, index in charts" :key="index" :class="chart.class">
+        <div v-for="chart, index in charts" :key="`${index}-${chart.model}-${chart.field}`" :class="chart.class">
             <Suspense>
                 <template #default>
                     <va-card>

diff --git a/biogenome-client/src/components/blocks/FiltersBlock.vue b/biogenome-client/src/components/blocks/FiltersBlock.vue
@@ -1,16 +1,21 @@
 <template>
     <div class="row justify-space-between align-center">
         <div class="flex">
-            <div class="row">
-                <div class="flex">
-                    <VaBadge overlap color="info" :text="activeFilters.length">
-                        <FilterDropdown />
-
-                    </VaBadge>
-
+            <div class="row align-center">
+                <div v-if="modelFilterEntries.length" class="flex">
+                    <FilterDropdown />
                 </div>
                 <div class="flex">
-                    <VaMenu class="ml-2" :options="exportOptions" @selected="showModal">
+                    <VaMenu>
+                        <VaMenuItem v-if="isGoaTActive" @selected="downloadGoatReport">
+                            GoaT
+                        </VaMenuItem>
+                        <VaMenuItem @selected="itemStore.showTsvModal = !itemStore.showTsvModal">
+                            Report
+                        </VaMenuItem>
+                        <VaMenuItem @selected="itemStore.showChartModal = !itemStore.showChartModal">
+                            Chart
+                        </VaMenuItem>
                         <template #anchor>
                             <VaButton icon="cloud_download" preset="primary">Export</VaButton>
                         </template>
@@ -38,6 +43,9 @@ import { useItemStore } from '../../stores/items-store'
 import { useI18n } from 'vue-i18n'
 import ExportTSV from '../modals/ExportTSV.vue'
 import CreateChart from '../modals/CreateChart.vue'
+import general from '../../../configs/general.json'
+import GoaTService from '../../services/clients/GoaTService'
+
 const { t } = useI18n()
 
 const props = defineProps<{
@@ -47,49 +55,66 @@ const props = defineProps<{
 watch(() => props.hasCharts, () => {
     if (!props.hasCharts) itemStore.view = 'table'
 })
-type ExportType = {
-    text: string
-    icon: string
-    value: 'showTsvModal' | 'showChartModal'
-}
 
 const options = [
     { value: "table", icon: "table_rows", },
     { value: "charts", icon: "leaderboard", },
 ]
-
-const exportOptions = [
-    { text: 'TSV', value: 'showTsvModal', icon: 'download' },
-    { text: 'Chart', value: 'showChartModal', icon: 'insert_chart' },
-]
+const staticColumns = ['filter', 'sort_order', 'sort_column']
 
 const itemStore = useItemStore()
 
 const model = computed(() => {
     return itemStore.currentModel
 })
 
-const isFiltering = computed(() => !!itemStore.stores[model.value].filter)
+const isGoaTActive = computed(() => {
+    return model.value === 'organisms' && general.goat
+})
+
+const isFiltering = computed(() => !!itemStore.stores[model.value].searchForm.filter)
 
 const total = computed(() => itemStore.stores[model.value].total)
 
-const activeFilters = computed(() => {
-    const entries = Object.entries(itemStore.stores[model.value].searchForm)
-    return entries.filter(([k, v]) => (v || v === false) && !['filter', 'sort_order', 'sort_column'].includes(k))
-})
+const modelFilterEntries = computed(() => Object.entries(itemStore.stores[model.value].searchForm)
+    .filter(([k, v]) => !staticColumns.includes(k)))
+
+const activeFilters = computed(() => modelFilterEntries.value
+    .filter(([k, v]) => (v || v === false))
+)
+
+
+async function downloadGoatReport() {
+    try {
+        const response = await GoaTService.getGoatReport()
+        const data = response.data
+        const href = URL.createObjectURL(data);
+
+        const filename = response.headers['content-disposition']
+        const match = filename.match(/filename=([^;]+)/);
+        let name = ''
+        if (match && match[1]) {
+            name = match[1];
+        } else {
+            name = 'file.tsv'
+            console.log("Filename not found in the string.");
+        }
+        // create "a" HTML element with href to file & click
+        const link = document.createElement('a');
+        link.href = href;
+        link.setAttribute('download', name); //or any other extension
+        document.body.appendChild(link);
+        link.click();
+        // clean up "a" element & remove ObjectURL
+        document.body.removeChild(link);
+        URL.revokeObjectURL(href);
+    } catch (err) {
+        console.error(err)
+        itemStore.toast({ message: 'Error downloading Goat Report', color: 'danger' })
+    }
 
-// pretty print label
-function getLabel(key: string) {
-    if (key.includes('metadata.')) {
-        const splittedKey = key.split('.')
-        return splittedKey[splittedKey.length - 1]
-    } else if (key.includes('_')) {
-        return key.split('_').join(' ')
-    } return key
-}
-function showModal(v: ExportType) {
-    itemStore[v.value] = !itemStore[v.value]
 }
+
 </script>
 <style>
 .w-200 {