Added functions that allow you to customize some elements of the appl…

…ication and UI such as colors, fonts, header elements, and footer contents.
genpat-it · May 7, 2024 · 154717b · 154717b
1 parent e48ed19
commit 154717b
Show file tree

Hide file tree

Showing 110 changed files with 1,787 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+datasets/sensible
diff --git a/app.json b/app.json
@@ -0,0 +1,70 @@
+{
+  "themes" : [{
+    "active" : true,
+    "name" : "default",
+    "author" : "Alessandro De Luca, IZSAM G. Caporale",
+    "logo" : "img/logo.svg",
+    "title" : {
+      "it" : "SPREAD",
+      "en" : "SPREAD"
+    },
+    "favicon" : "img/logo.ico",
+    "vars" : "css/vars.css",
+    "modules" : {
+      "header" : {
+        "css" : "css/header.css",
+        "html" : "html/header.html"
+      },
+      "footer" : {
+        "css" : "css/footer.css",
+        "html" : "html/footer.html"
+      }
+    },
+    "version" : "1.0.0"
+  }, {
+    "active" : false,
+    "name" : "genpat",
+    "author" : "Alessandro De Luca, IZSAM G. Caporale",
+    "logo" : "img/logo.svg",
+    "title" : {
+      "it" : "Piattaforma GenPat, SPREAD",
+      "en" : "GenPat Platform, SPREAD"
+    },
+    "favicon" : "img/logo.ico",
+    "vars" : "css/vars.css",
+    "modules" : {
+      "header" : {
+        "css" : "css/header.css",
+        "html" : "html/header.html"
+      },
+      "footer" : {
+        "css" : "css/footer.css",
+        "html" : "html/footer.html"
+      }
+    },
+    "version" : "1.0.0"
+  }, {
+    "active" : false,
+    "name" : "cohesive",
+    "author" : "Alessandro De Luca, IZSAM G. Caporale",
+    "logo" : "img/logo.svg",
+    "title" : {
+      "it" : "Sistema Informativo COHESIVE, SPREAD",
+      "en" : "COHESIVE Information System, SPREAD"
+    },
+    "favicon" : "img/logo.ico",
+    "vars" : "css/vars.css",
+    "modules" : {
+      "header" : {
+        "css" : "css/header.css",
+        "html" : "html/header.html"
+      },
+      "footer" : {
+        "css" : "css/footer.css",
+        "html" : "html/footer.html"
+      }
+    },
+    "version" : "1.0.0"
+  }],
+  "copyright" : "&copy; {__YEAR__} IZSAM G. Caporale"
+}
diff --git a/css/custompages-base.css → css/base.css b/css/custompages-base.css → css/base.css
diff --git a/css/dashboard-grapetree-view.css → css/dashboard.css b/css/dashboard-grapetree-view.css → css/dashboard.css
diff --git a/img/genpat-theme/favicon.ico b/img/genpat-theme/favicon.ico
diff --git a/img/genpat-theme/platform-logo.svg b/img/genpat-theme/platform-logo.svg
diff --git a/index.html b/index.html
@@ -3,17 +3,17 @@
 
 <head>
 	<meta charset="utf-8">
-	<title>COHESIVE Information System - SPREAD</title>
+	<title>SPREAD</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="shortcut icon" href="img/cohesive-theme/favicon.ico">
+	<link rel="shortcut icon" href="themes/default/img/logo.ico">
   <link rel="stylesheet" href="css/normalize.css">
 	<link rel="stylesheet" href="css/skeleton.css">
   <link rel="stylesheet" href="css/iconic.css">
-  <link rel="stylesheet" href="css/cohesive-vars.css">
-  <link rel="stylesheet" href="css/custompages-base.css">
-  <link rel="stylesheet" href="css/dashboard-grapetree-view.css">
-	<link rel="stylesheet" href="css/cohesive-header.css">
-  <link rel="stylesheet" href="css/cohesive-footer.css">
+  <link rel="stylesheet" href="themes/default/css/vars.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/dashboard.css">
+	<link rel="stylesheet" href="themes/default/css/header.css">
+  <link rel="stylesheet" href="themes/default/css/footer.css">
 
   <!-- libraries -->
   <!-- jquery-ui -->
@@ -30,21 +30,15 @@
 </head>
 
 <body class="dashboard dashboard-grapetree">
-	<header class="header">
+
+  <header class="header">
     <div class="top-bar">
       <div class="platform-heading">
-        <div class="platoform-logo">
-          <img src="img/cohesive-theme/platform-logo.svg" alt="Logo">
-        </div>
-        <div class="platform-title">
-          <h1>COHESIVE Information System, SPREAD</h1>
-        </div>
+        <!-- here custom contents for header, you can define them in themes/theme-name/html/header.html -->
       </div>
       <div class="toolbar">
         <div class="tool tool-lang">
-          <div class="tool-label">
-            It
-          </div>
+          <div class="tool-label"></div>
           <div class="tool-trigger">
             <i class="iconic iconic-globe"></i>
           </div>
@@ -58,7 +52,7 @@ <h1>COHESIVE Information System, SPREAD</h1>
       </div>
     </div>
   </header>
-  
+
   <main>
     <section class="quick-actions">
       <div class="tools-wrapper">
@@ -301,40 +295,17 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
     </div>
   </section>
 
-	<footer>
+  <footer>
     <div class="footer-contents">
       <div class="footer-close" onclick="gtiz_layout.showFooter()"><i class="iconic iconic-close-circle"></i></div>
-      <div class="logo genpat-logo">
-        <img src="img/cohesive-theme/eu-emblem.svg" alt="EU Emblem">
-      </div>
-      <div class="useful useful-disclaimer">
-        <p>
-          This project is part of the European Joint Programme One Health EJP. This project has received funding from the European Union’s Horizon 2020 research and innovation programme under Grant Agreement No 773830.
-        </p>
+      <div class="footer-content">
+        <!-- here custom contents for footer, you can define them in themes/theme-name/html/footer.html -->
       </div>
-      <div class="useful useful-links">
-        <h6 data-i18n-key="useful_links">Useful links</h6>
-        <ul>
-          <li><a href="https://onehealthejp.eu/">One Heakth EJP</a></li>
-          <li><a href="https://www.izs.it/IZS/Eccellenza/Centri_nazionali/CRN_-_Sequenze_Genomiche" target="_blank"><span data-i18n-key="crn_genome_sequencing">CRN Genome Sequencing</span></a></li>
-          <li><a href="https://github.com/achtman-lab/GrapeTree" target="_blank">GrapeTree Github</a></li>
-          <li><a href="https://www.izs.it/IZS/" target="_blank">IZSAM "G. Caporale"</a></li>
-        </ul>
-        <div class="useful useful-help">
-          <h6 data-i18n-key="support">Support</h6>
-          <ul>
-            <li><a href="https://cohesive.izs.it/wiki/user/Dashboards/SPREAD/SPREAD.html" target="_blank">Wiki</a></li>
-            <li><a href="mailto:[email protected]" target="_blank">[email protected]</a></li>
-            <li><a href="tel:+3908613321" target="_blank">+39 0861 3321</a></li>
-          </ul>
-        </div>
-        <div class="info">
-          <img src="img/cohesive-theme/izsam-logo.svg">
-        </div>
+      <div class="footer-info">
         <div class="info">
-          <p><span data-i18n-key="cookies_notice">This application does not use cookies.</span></p>
-		      <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">2024-05-03</span></p>
-          <p class="copyright">&copy; <span class="copyright-year"></span> IZSAM "G. Caporale"</p>
+          <p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
+          <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">__LAST_UPDATE__</span></p>
+          <p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
         </div>
       </div>
     </div>
@@ -372,5 +343,6 @@ <h6 data-i18n-key="support">Support</h6>
   <script src="js/help.js"></script>
   <script src="js/map.js"></script>
   <script src="js/zooms.js"></script>
+  <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,121 @@
+let gtiz_app = {};
+
+gtiz_app.loadFooter = function(path, target) {
+  fetch(path)
+    .then(response => response.text())
+    .then(data => {
+      if (!data) return;
+      let node = document.querySelector(target);
+      node.innerHTML = data;
+
+      gtiz_locales.translate(node);
+    });
+}
+
+gtiz_app.loadHeader = function(path, target, name, title, logo) {
+  fetch(path)
+    .then(response => response.text())
+    .then(data => {
+      if (!data) return;
+      let node = document.querySelector(target);
+      if (title) {
+        data = data.replace('{app title}', title);
+      }
+      if (logo) {
+        let src = 'themes/' + name + '/' + logo;
+        data = data.replace('{app logo}', src);
+      }
+      node.innerHTML = data;
+    });
+}
+
+gtiz_app.setCopyright = function(copyright) {
+  let copyright_node = document.querySelector('.copyright');
+  let year = new Date().getFullYear();
+  copyright_node.innerHTML = copyright.replace('{__YEAR__}', '<span class="copyright-year">' + year + '</span>');
+}
+
+/**
+ * Set theme for the app based on the active theme in app.json
+ * 
+ * @param {Object} theme Active theme object form app.json 
+ */
+gtiz_app.setTheme = function(theme) {
+  let languages = gtiz_locales.languages;
+  let language = languages.find(element => element.active);
+  let code = language ? language.code : 'en';
+  let name = theme.name ? theme.name : 'default';
+  let logo = theme.logo;
+  let title = theme.title ? theme.title[code] : undefined;
+  let favicon = theme.favicon;
+  let modules = theme.modules;
+  let header = modules ? modules.header : undefined;
+  let footer = modules ? modules.footer : undefined;
+  let vars = theme.vars;
+
+  if (title) {
+    document.title = title;
+  } else {
+    document.title = 'SPREAD';
+  }
+
+  if (favicon) {
+    let favicon_node = document.querySelector('link[rel="shortcut icon"]');
+    favicon_node.href = 'themes/' + name + '/' + favicon;
+  }
+
+  if (vars) {
+    let stylesheet = document.querySelector('link[rel="stylesheet"][href*="vars"]');
+    stylesheet.href = 'themes/' + name + '/' + vars;
+  }
+
+  if (header) {
+    if (header.css) {
+      let stylesheet = document.querySelector('link[rel="stylesheet"][href*="header"]');
+      stylesheet.href = 'themes/' + name + '/' + header.css;
+    }
+    if (header.html) {
+      let path = 'themes/' + name + '/' + header.html;
+      gtiz_app.loadHeader(path, '.platform-heading', name, title, logo);
+    }
+  }
+
+  if (footer) {
+    if (footer.css) {
+      let stylesheet = document.querySelector('link[rel="stylesheet"][href*="footer"]');
+      stylesheet.href = 'themes/' + name + '/' + footer.css;
+    }
+    if (footer.html) {
+      let path = 'themes/' + name + '/' + footer.html;
+      gtiz_app.loadFooter(path, '.footer-content');
+    }
+  }
+
+};
+
+gtiz_app.init = function() {
+  let path = 'app.json';
+
+  fetch(path)
+    .then(response => response.text())
+    .then(data => {
+      let json = JSON.parse(data);
+      if (json && json.themes && json.themes.length > 0) {
+        let theme = json.themes.find(element => element.active === true);
+        if (theme && Object.keys(theme).length > 0 ) {
+          gtiz_app.setTheme(theme);
+        }
+        let copyright = json.copyright;
+        if (copyright) {
+          gtiz_app.setCopyright(copyright);
+        }
+      }
+      gtiz_app.cfg = JSON.parse(data);
+      gtiz_file_handler.init();
+    })
+    .catch(err => {
+      console.error(err);
+    });
+};
+
+gtiz_app.init();
diff --git a/js/file-handler.js b/js/file-handler.js
@@ -913,7 +913,8 @@ gtiz_file_handler.modalSetFilesToLoad = function(files) {
 	gtiz_file_handler.files_to_load = files;
 };
 
-window.addEventListener('DOMContentLoaded', function(e) {
+
+gtiz_file_handler.init = function() {
 	gtiz_file_handler.drop_areas.forEach(drop_area => {
 		gtiz_file_handler.dropFiles(drop_area);
 	});
@@ -922,4 +923,4 @@ window.addEventListener('DOMContentLoaded', function(e) {
 	gtiz_layout.uiLoadingManager(l_components, l_action);	
 	gtiz_tree.initiateLoading("Waiting for tree...");
 	gtiz_file_handler.loadNetFiles();
-});
+};
diff --git a/js/i18n/en.js b/js/i18n/en.js
@@ -32,7 +32,7 @@ gtiz_languages.en = {
   "download": "Download",
   "download_table": "Download table",
   "download_svg": "Download Svg",
-  "drop_info": "You can also drag or load a .nwk file followed by a .tsv file containing metadata and optionally a .geojson file containing geo-saptial information. Please read more on our <a href=\"https://cohesive.izs.it/wiki/user/Dashboards/SPREAD/SPREAD.html\" target=\"_blank\">wiki</a>.",
+  "drop_info": "You can also drag or load a .nwk file followed by a .tsv file containing metadata and optionally a .geojson file containing geo-saptial information. Please read more on our <a href=\"https://github.com/genpat-it/spread/wiki\" target=\"_blank\">wiki</a>.",
   "drop_message": "Please drag here a valid .json file or load it from your file system to start with SPREAD.",
   "dropped_files_alert": "You can only drop one file at a time: a complete <strong>.json</strong> file or alternatively a <strong>.nwk</strong> then a <strong>.tsv</strong> containing metadata, and then optionally a <strong>.geojson</strong> containing spatial informations.",
   "dynamic" : "Dynamic",
@@ -43,6 +43,7 @@ gtiz_languages.en = {
   "export_newick" : "Export newick",
   "fetch_error" : "Fetch request failed.",
   "font_size" : "Font size",
+  "footer_disclaimer" : "This project is part of the European Joint Programme One Health EJP. This project has received funding from the European Union’s Horizon 2020 research and innovation programme under Grant Agreement No 773830.",
   "for_branches_longer_than" : "For branches longer than:",
   "forbidden_net_geojson_alert" : "It seems that you do not have permission to access the GeoJson indicated in the URL. Please try logging in to <a href='{0}' target='_blank'>{1}</a> and refresh the page.",
   "forbidden_net_metadata_alert" : "It seems that you do not have permission to access Metadata indicated in the URL. Please try logging in to <a href='{0}' target='_blank'>{1}</a> and refresh the page.",
@@ -83,7 +84,7 @@ gtiz_languages.en = {
     "map": {
       "help": '<p>Through the options available in this section, you can control the appearance of the map.</p><ul><li><strong>Join by coordinates/by metadata:</strong> The toggle allows you to aggregate points on the map based on the geographical proximity of the provided coordinates or based on the values of the loaded metadata. In the first case, you can define a numerical value for <strong>delta</strong>, which determines the degree of aggregation.</li><li><strong>Minimum/Maximum marker radius:</strong> With these two fields, you can adjust the size of the points on the map by defining a minimum and a maximum radius. The initial size is relative to the number of nodes present at the same geographical coordinates.</li><li><strong>Pie Chart mode/Heatmap mode:</strong> This toggle allows you to change the visualization mode of the points on the map. With the first option (selected by default), the points will be displayed with pie charts based on the categories of the tree nodes, while with the second option, a blur effect is applied to the nodes.</li></ul>'
     },
-    "feedback": '<p>You can find the complete documentation on our <a href="https://cohesive.izs.it/wiki/user/Dashboards/SPREAD/SPREAD.html" target="_blank">wiki</a>. Please visit also <a href="https://enterobase.readthedocs.io/en/latest/grapetree/grapetree-about.html" target="_blank">EnteroBase documentation</a>.</p>'
+    "feedback": '<p>You can find the complete documentation on our <a href="https://github.com/genpat-it/spread/wiki" target="_blank">wiki</a>. Please visit also <a href="https://enterobase.readthedocs.io/en/latest/grapetree/grapetree-about.html" target="_blank">EnteroBase documentation</a>.</p>'
   },
   "hide": "Hide",
   "hide_labels": "Hide labels",

diff --git a/js/i18n/it.js b/js/i18n/it.js
@@ -32,7 +32,7 @@ gtiz_languages.it = {
   "download": "Download",
   "download_table": "Esporta tabella",
   "download_svg": "Download Svg",
-  "drop_info": "Puoi anche trascinare o caricare un file .nwk seguito da un file .tsv per i metadata da associare al tree. Opzionalmente puoi trascinare o caricare un file .geojson contenente informazioni geospaziali. Puoi trovare una guida completa sul nostro <a href=\"https://cohesive.izs.it/wiki/user/Dashboards/SPREAD/SPREAD.html\" target=\"_blank\">wiki</a>.",
+  "drop_info": "Puoi anche trascinare o caricare un file .nwk seguito da un file .tsv per i metadata da associare al tree. Opzionalmente puoi trascinare o caricare un file .geojson contenente informazioni geospaziali. Puoi trovare una guida completa sul nostro <a href=\"https://github.com/genpat-it/spread/wiki\" target=\"_blank\">wiki</a>.",
   "drop_message": "Trascina in quest'area un file .json valido oppure caricalo dal tuo computer per iniziare con SPREAD.",
   "dropped_files_alert": "Puoi trascinare un solo file per volta: un file <strong>.json</strong> completo o in alternativa un file <strong>.nwk</strong> seguito da un file <strong>.tsv</strong> per i metadata, infine eventualmente un file <strong>.geojson</strong> per dati geospaziali.",
   "dynamic" : "Dinamico",
@@ -43,6 +43,7 @@ gtiz_languages.it = {
   "export_newick" : "Esporta newick",
   "fetch_error" : "La richiesta di caricamento del file non è riuscita.",
   "font_size" : "Dimensione carattere",
+  "footer_disclaimer" : "Questo progetto fa parte dell'European Joint Programme One Health EJP. Il progetto ha ricevuto finanziamenti dal programma di ricerca e innovazione Horizon 2020 dell'Unione Europea nell'ambito del Grant Agreement No 773830.",
   "for_branches_longer_than" : "Per collegamenti più lunghi di:",
   "forbidden_net_geojson_alert" : "Sembra che tu non abbia i permessi per accedere al GeoJson indicato nella URL. Prova a fare la login su <a href='{0}' target='_blank'>{1}</a> ed aggiorna la pagina.",
   "forbidden_net_metadata_alert" : "Sembra che tu non abbia i permessi per accedere ai Metadata indicati nella URL. Prova a fare la login su <a href='{0}' target='_blank'>{1}</a> ed aggiorna la pagina.",
@@ -83,7 +84,7 @@ gtiz_languages.it = {
     "map": {
       "help": '<p>Tramite le opzioni presenti in questa sezione potrai controllare l\'aspetto della mappa.</p><ul><li><strong>Aggrega per coordinate/per metadata:</strong> il toggle permette di aggregare i punti sulla mappa in base alla vicinanza geografica delle coordinate fornite o in base ai valori dei metadata caricati. Nel primo caso è possibile definire un valore numerico di <strong>delta</strong> che determina il grado di aggregazione.</li><li><strong>Raggio minimo/massimi marker:</strong> tramite questi due campi è possibile intervenire sulla dimensione dei punti sulla mappa definendo un raggio minimo ed un raggio massimo. La dimensione iniziale è relativa alla quantità di nodi presenti alle stesse cooridinate geografiche.</li><li><strong>Modalità diagramma/Modalità heatmap:</strong> questo toggle permette di cambiare la modalità di visualizzazione dei punti sulla mappa. Con la prima opzione (selezionata di default) i punti saranno visualizzati con dei grafici a torta in base alle categorie dei nodi del tree, con la seconda invece ai nodi viene applicata una sfocatura.</li></ul>'
     },
-    "feedback": '<p>Puoi trovare la documentazione completa sul nostro <a href="https://cohesive.izs.it/wiki/user/Dashboards/SPREAD/SPREAD.html" target="_blank">wiki</a>. Puoi anche consultare la documentazione ufficiale di <a href="https://enterobase.readthedocs.io/en/latest/grapetree/grapetree-about.html" target="_blank">EnteroBase</a>.</p>'
+    "feedback": '<p>Puoi trovare la documentazione completa sul nostro <a href="https://github.com/genpat-it/spread/wiki" target="_blank">wiki</a>. Puoi anche consultare la documentazione ufficiale di <a href="https://enterobase.readthedocs.io/en/latest/grapetree/grapetree-about.html" target="_blank">EnteroBase</a>.</p>'
   },
   "hide": "Nascondi",
   "hide_labels": "Nascondi etichette",