From ebd151936f87657568dbe857e1127bc0ba319431 Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Fri, 14 Jun 2024 12:11:15 +0200
Subject: [PATCH 01/15] Add data sources page

---
 content/english/data-sources.md      |   9 ++
 layouts/shortcodes/data_sources.html | 181 +++++++++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100644 content/english/data-sources.md
 create mode 100644 layouts/shortcodes/data_sources.html

diff --git a/content/english/data-sources.md b/content/english/data-sources.md
new file mode 100644
index 00000000..bbd4c5de
--- /dev/null
+++ b/content/english/data-sources.md
@@ -0,0 +1,9 @@
+---
+Title: Data sources
+---
+
+This is a list of data sources available for *Epidemiology and biology of infection* in Sweden. Use the **Search** function to find sources by name/keywords (often more granular than other filters). A resource type of **Repository** indicates that at least some users can both submit and access data, whilst **Data Source** indicates that data can only be accessed, not submitted. It is also possible to filter data sources according to **Data Type**.
+
+[Get in touch](/contact/) about adding further data sources.
+
+{{< data_sources >}}
diff --git a/layouts/shortcodes/data_sources.html b/layouts/shortcodes/data_sources.html
new file mode 100644
index 00000000..1f924f28
--- /dev/null
+++ b/layouts/shortcodes/data_sources.html
@@ -0,0 +1,181 @@
+<section id="ds-section">
+  <!-- The events content will filled by JS function below -->
+</section>
+
+<script>
+  // Functions need to be run when the DOM is ready
+  document.addEventListener("DOMContentLoaded", function (event) {
+    // Takes a URL and calls the callback function pass the data fetched
+    function getDataFromUrl(url, load_callback, loadend_callback) {
+      var req = new XMLHttpRequest();
+      req.overrideMimeType("application/json");
+      req.open("GET", url, true);
+      // The function call for fetching data and display
+      req.onload = function () {
+        load_callback(JSON.parse(req.responseText));
+      };
+      // Add the search function to inputs
+      req.onloadend = function () {
+        $('input:checkbox').on('change', loadend_callback);
+        $("input[type=text]").on("input", loadend_callback);
+      };
+      req.send(null);
+    }; // function "getDataFromUrl" ends here
+
+    // Function to add data source to the page
+    function addDataSources(dataArray) {
+      var dsList = [], resource_type=[], data_type=[];
+      dataArray.forEach(ds => {
+        if (typeof ds.ddls !== 'undefined') {
+          var scientificArea = ds.ddls.map(sa => sa.toLowerCase());
+        } else {
+          var scientificArea = [];
+        }
+        if (scientificArea.includes("epidemiology and biology of infection")) {
+          dsList.push(ds);
+          if (typeof ds.type !== 'undefined') {
+            ds.type.forEach((t) => {if(!resource_type.includes(t.toLowerCase())){resource_type.push(t.toLowerCase())}});
+          }
+          if (typeof ds.data !== 'undefined') {
+            ds.data.forEach((d) => {if(!data_type.includes(d.toLowerCase())){data_type.push(d.toLowerCase())}});
+          }
+        }
+      });
+      
+      // Sort the arrays
+      dsList = dsList.sort((a,b) => (a.name > b.name) ? 1 : (a.name < b.name) ? -1 : 0);
+      resource_type = resource_type.sort();
+      data_type = data_type.sort();
+
+      // HTML template for the page
+      var dsHTML = `<div class="row mt-3 mb-5">
+                    <div class="col-lg-2 pe-lg-0" id="ds-filters">
+                    <div class="bg-light p-3" style="position: sticky; top: 15px;">
+                      <h5>Search</h5>
+                      <div class="input-group">
+                        <input type="text" id="Search" class="form-control" placeholder="Name/Keywords">
+                        <label class ="form-control-label" for="Search" aria-labelledby="Search"> 
+                      </div>`;
+      if (resource_type.length > 0) {
+        dsHTML += `<h5 class="mt-3">Resource Type</h5>`;
+          resource_type.forEach((rt) => {
+            dsHTML += `<div class="form-check">   
+                        <input class="form-check-input" type="checkbox" id="${rt}" name="resource-type" value="${rt.replaceAll(" ", "-").toLowerCase()}">
+                        <label class="form-check-label" for="${rt}">${rt.charAt(0).toUpperCase() + rt.slice(1)}</label>
+                       </div>`;
+          });
+      }
+      if (data_type.length > 0) {
+        dsHTML += `<h5 class="mt-3">Data Type</h5>`;
+          data_type.forEach((dt) => {
+            dsHTML += `<div class="form-check">   
+                        <input class="form-check-input" type="checkbox" id="${dt}" name="data-type" value="${dt.replaceAll(" ", "-").toLowerCase()}">
+                        <label class="form-check-label" for="${dt}">${dt.charAt(0).toUpperCase() + dt.slice(1)}</label>
+                       </div>`;
+          });
+      };
+      dsHTML += `</div>
+                  </div>
+                    <div class="col-lg mt-2 mt-lg-0">
+                      <div class="row g-3" id="ds-container">`;
+      dsList.forEach((ds) => {
+        var this_ds_rtype, this_ds_dtype, this_ds_search;
+        if (typeof ds.type !== 'undefined'){
+            this_ds_rtype = ds.type.map(rt => rt.replaceAll(" ", "-").toLowerCase()).join(" ");
+        };
+        if (typeof ds.data !== 'undefined'){
+            this_ds_dtype = ds.data.map(dt => dt.replaceAll(" ", "-").toLowerCase()).join(" ");
+        };
+        if (typeof ds.search_tags !== 'undefined'){
+            this_ds_search = ds.search_tags.map(st => st.replaceAll(" ", "-").toLowerCase()).join(" ");
+        };
+        dsHTML += `<div class="col-md-6 col-lg-4 dsource" data-rtype="${this_ds_rtype}" data-dtype="${this_ds_dtype}" data-search-tags="${this_ds_search}">
+                    <div class="bg-dashboard">
+                      <div aria-hidden="true">
+                        <a target="_blank" href="${ds.url}">
+                          <img class="img-fluid" alt="${ds.name}" 
+                          src="https://raw.githubusercontent.com/ScilifelabDataCentre/data.scilifelab.se/main/static${ds.thumbnail ? ds.thumbnail : '/img/service_thumbnails/scilifelab.jpg'}">
+                        </a>
+                      </div>
+                      <div class="p-2 bg-dashboard-title">
+                        <h6><a href="${ ds.url }" target="_blank">${ ds.name }</a></h6>
+                      </div>
+                      <div class="p-2">
+                        ${ ds.description }
+                      </div>
+                      <div class="p-2">
+                        <b>Type:</b> ${ds.type.map(rt => rt.charAt(0).toUpperCase() + rt.slice(1)).join(", ")}
+                      </div>
+                    </div>
+                  </div>`;
+      });
+      dsHTML += `<div id="no-filtered-dsource" style="display:none;">
+                  <p class="text-center">No data sources have the given keyword, please try to use another.</p>
+                </div>
+              </div>
+            </div>
+          </div>`;
+
+      var dsSection = document.getElementById('ds-section');
+      dsSection.innerHTML = dsHTML;
+    };// function add data source ends here
+
+    // Function to enable filtering after loading the page
+    function searchAndFilter(){
+      // Get all the imputs
+      var selected_filters = new Object();
+      var resource_type = $("input:checkbox[name=resource-type]:checked").map(function () {return this.value}).get();
+      if (resource_type.length){ selected_filters['data-rtype'] = resource_type };
+      var data_type = $("input:checkbox[name=data-type]:checked").map(function () {return this.value}).get();
+      if (data_type.length){ selected_filters['data-dtype'] = data_type };
+      var search_text = $("input[type=text]").val().toLowerCase();
+      if (search_text.length){ selected_filters['data-search-tags'] = [search_text] };
+
+      // Hide all services before filtering
+      $(`div.dsource`).hide();
+      $(`div#no-filtered-dsource`).hide();
+
+      // Show relavant services based on selected criteria
+      if (!Object.keys(selected_filters).length) {
+        $("div.dsource").show();
+      } else {
+        var all_selected_sources = [];
+        // Iterate over all selected criteria and collect the services
+        for (var [filter_name, filter_list] of Object.entries(selected_filters)) {
+          var s_sources = new Set;
+          filter_list.forEach(function (filter_value) {
+            $(`div.dsource[${filter_name}*=${filter_value}]`).each(function () { s_sources.add(this); });
+          });
+          all_selected_sources.push(s_sources);
+        };
+        // When multiple criteria selectd it should act as AND not OR
+        selected_sources = all_selected_sources.reduce(function (x, y) {
+          var z = new Set;
+          x.forEach(v => y.has(v) && z.add(v));
+          return z;
+        });
+        // Set display for event with selected criteria
+        if (selected_sources.size) {
+          selected_sources.forEach(function (sSource) { sSource.style.display = ''; })
+        } else {
+          // Display a message if no events available for selected criteria
+          $('div#no-filtered-dsource').show();
+        };
+      };
+    } // function search and filter ends here
+
+    // Call the function to fetch, parse and display events
+    getDataFromUrl(
+      decodeURIComponent("https%3A%2F%2Fraw.githubusercontent.com%2FScilifelabDataCentre%2Fdata.scilifelab.se%2Fmain%2Fdata%2Fdata_sources.json"),
+      addDataSources,
+      searchAndFilter
+    );
+
+  }) // DOM loaded function ends here
+</script>
+
+
+
+
+
+

From c51eb02043d16e2419832cc77565bd015a0f5ca3 Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Fri, 14 Jun 2024 12:17:32 +0200
Subject: [PATCH 02/15] Reform header

---
 content/english/citation.md      |   5 +-
 content/english/contribute.md    |   5 +-
 content/english/events/_index.md |   4 +
 content/english/share-data.md    |   4 -
 content/english/support.md       |   5 -
 content/svenska/citation.md      |   5 +-
 content/svenska/contribute.md    |   5 +-
 content/svenska/share-data.md    |   5 -
 content/svenska/support.md       |   5 -
 layouts/index.html               |  26 +---
 layouts/partials/header.html     |   4 +-
 layouts/partials/navbar.html     | 251 ++++++++++++++-----------------
 static/css/styles.css            | 107 +++++--------
 13 files changed, 165 insertions(+), 266 deletions(-)

diff --git a/content/english/citation.md b/content/english/citation.md
index d762173a..3c8242de 100644
--- a/content/english/citation.md
+++ b/content/english/citation.md
@@ -1,10 +1,9 @@
 ---
 title: How to cite the Portal
 menu:
-  top_actions:
+  navbar_top:
     name: Cite us
-    weight: 80
-    pre: <i class="bi bi-patch-exclamation-fill me-2"></i>
+    weight: 50
   footer_about:
     name: Cite us
     weight: 30
diff --git a/content/english/contribute.md b/content/english/contribute.md
index 7099f2b2..4d293398 100644
--- a/content/english/contribute.md
+++ b/content/english/contribute.md
@@ -1,10 +1,9 @@
 ---
 title: Contribute
 menu:
-  top_actions:
+  navbar_top:
     name: Contribute
-    weight: 40
-    pre: <i class="bi bi-plus-circle-fill me-2"></i>
+    weight: 30
 ---
 
 The _Swedish Pathogens Portal_ was built to serve the community of researchers working on relevant topics and we welcome any contributions from the community or suggestions on how the Portal can help the community. Whenever there is anything that you would like to share with your colleagues, do not hesistate to share it through the Portal. We welcome suggestions for new information or edits in all sections as well as ideas for new sections that could be launched.
diff --git a/content/english/events/_index.md b/content/english/events/_index.md
index b017f70e..f9f1e513 100644
--- a/content/english/events/_index.md
+++ b/content/english/events/_index.md
@@ -2,6 +2,10 @@
 title: Events & Training
 description: Community-sourced collection of events and training opportunities.
 recaptcha: true
+menu:
+    navbar_top:
+        name: Events & Training
+        weight: 40
 ---
 
 This section includes a list of upcoming conferences, webinars, workshops, and training opportunities related to pandemic preparedness and infectious disease. This includes events related to the management of data for these topics. We also welcome suggestions for events related to research data management in general. Such events will instead be listed on the [SciLifeLab Data Platform](https://data.scilifelab.se/events/). We highly encourage users to explore those events.
diff --git a/content/english/share-data.md b/content/english/share-data.md
index 5ce5b8b1..53466aed 100644
--- a/content/english/share-data.md
+++ b/content/english/share-data.md
@@ -1,10 +1,6 @@
 ---
 title: Share data
 toc: true
-menu:
-  top_actions:
-    weight: 40
-    pre: <i class="bi bi-server me-2"></i>
 aliases:
   - /data_types/genomics_transcriptomics/guidelines/
   - /data_types/compound_and_target_data/guidelines/
diff --git a/content/english/support.md b/content/english/support.md
index bdcf564a..7f4d745e 100644
--- a/content/english/support.md
+++ b/content/english/support.md
@@ -1,11 +1,6 @@
 ---
 title: Get support
 toc: false
-menu:
-  top_actions:
-    name: Get support
-    weight: 70
-    pre: <i class="bi bi-people-fill me-2"></i>
 aliases:
   - /support_services/bioinformatics/
 ---
diff --git a/content/svenska/citation.md b/content/svenska/citation.md
index 08576549..0cfcdc68 100644
--- a/content/svenska/citation.md
+++ b/content/svenska/citation.md
@@ -1,10 +1,9 @@
 ---
 title: Citera data, information och resurser från portalen
 menu:
-  top_actions:
+  navbar_top:
     name: Citera oss
-    weight: 80
-    pre: <i class="bi bi-patch-exclamation-fill me-2"></i>
+    weight: 40
   footer_about:
     name: Citera oss
     weight: 30
diff --git a/content/svenska/contribute.md b/content/svenska/contribute.md
index ab31cc73..0eb11a30 100644
--- a/content/svenska/contribute.md
+++ b/content/svenska/contribute.md
@@ -2,10 +2,9 @@
 title: Bidra till Portalen
 toc: false
 menu:
-  top_actions:
+  navbar_top:
     name: Bidra till Portalen
-    weight: 40
-    pre: <i class="bi bi-plus-circle-fill me-2"></i>
+    weight: 30
 ---
 
 Pathogens Portal Sverige har som syfte att stödja forskare som arbetar inom de forskningsområden som Portalen specifikt är inriktade på. Vi välkomnar både förslag på och bidrag till Portalens innehåll och förslag på hur Portalen kan utvecklas för att bättre stödja forskningen. Som forskare uppmanar vi dig att interagera med Portalen, exempelvis genom att dela data eller information genom Portalen. Vi tar även gärna emot förslag på nytt innehåll, nya sektioner samt förslag på hur nuvarande sektioner kan utvecklas och förnyas.
diff --git a/content/svenska/share-data.md b/content/svenska/share-data.md
index 19e8b62a..be4e2297 100644
--- a/content/svenska/share-data.md
+++ b/content/svenska/share-data.md
@@ -1,11 +1,6 @@
 ---
 title: Dela data
 toc: true
-menu:
-  top_actions:
-    name: Dela data
-    weight: 40
-    pre: <i class="bi bi-server me-2"></i>
 aliases:
   - /sv/data_types/genomics_transcriptomics/guidelines/
   - /sv/data_types/compound_and_target_data/guidelines/
diff --git a/content/svenska/support.md b/content/svenska/support.md
index 55a91bd1..f06b60e2 100644
--- a/content/svenska/support.md
+++ b/content/svenska/support.md
@@ -1,11 +1,6 @@
 ---
 title: Stödtjänster
 toc: false
-menu:
-  top_actions:
-    name: Stödtjänster
-    weight: 70
-    pre: <i class="bi bi-people-fill me-2"></i>
 aliases:
   - /sv/support_services/bioinformatics/
 ---
diff --git a/layouts/index.html b/layouts/index.html
index 87df43fd..114bbcd5 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,30 +3,12 @@
 <!-- Main content -->
 <div class="row">
   <div class="col-md-8 vert-line-right mt-3">
-    <!-- <div style="color: white;" class="bg-success border rounded py-2 px-4 mb-3 fst-italic">
-      {{ if eq $.Site.Language.LanguageName "Svenska" }}
-      <i class="bi bi-snow2"></i> <i class="bi bi-snow2"></i>
-      SciLifeLab Data Centre önskar er alla God Jul och Gott Nytt År! <i class="bi bi-snow2"></i> <i class="bi bi-snow2"></i><br> Teamet kommer att vara lediga från 20 december till 2 januari och kommer att svara på eventuella frågor/förfrågningar så snart som möjligt.
-      {{ else }}
-      <i class="bi bi-snow2"></i> <i class="bi bi-snow2"></i>
-      SciLifeLab Data Centre wish everyone a Merry Christmas and a Happy New Year! <i class="bi bi-snow2"></i> <i class="bi bi-snow2"></i><br> The team will be away from 20th December until 2nd January, and will respond to any questions/requests as soon as possible.
-      {{ end }}
-    </div> -->
-    
-    <!-- Cluster migration notice, un comment and modify date when migration date is set -->
-    <!-- div style="color: white;" class="bg-success border rounded py-2 px-4 mb-3 fst-italic">
-      {{ if eq $.Site.Language.LanguageName "Svenska" }}
-      Underhåll av Pathogens Portal Sverige kommer att genomföras måndagen den 29 april.<br>Användare kan därför uppleva vissa problem med att komma åt webbplatsen.
-      {{ else }}
-      The Swedish Pathogens Portal will be undergoing maintenance on Monday 29th April.<br>Users may experience some issues accessing the site during this time. 
-      {{ end }}
-    </div -->
 
     <!-- Dashboards -->
     {{ range .Site.Menus.homepage_dashboards }}
     <div class="row">
       <div class="col">
-        <h2>{{ .Name }}</h2>
+        <h3 class="mt-0">{{ .Name }}</h3>
       </div>
       <div class="col mt-2 pt-1 text-end see-all-link-text">
         <a href="{{ .Page.RelPermalink }}">
@@ -48,7 +30,7 @@ <h2>{{ .Name }}</h2>
     {{ range .Site.Menus.homepage_highlights }}
     <div class="row mt-4 mb-2">
       <div class="col">
-        <h2>{{ .Name }}</h2>
+        <h3 class="mt-0">{{ .Name }}</h3>
       </div>
       <div class="col mt-2 pt-1 text-end see-all-link-text">
         <a href="{{ .Page.RelPermalink }}">See all highlights <i class="bi bi-arrow-right-square-fill"></i></a>
@@ -92,7 +74,7 @@ <h2>{{ .Name }}</h2>
     {{ range .Site.Menus.homepage_available_data }}
     <div class="row mt-4 mb-2 pt-2">
       <div class="col">
-        <h2>{{ .Name }}</h2>
+        <h3 class="mt-0">{{ .Name }}</h3>
       </div>
       <div class="col mt-2 pt-1 text-end see-all-link-text">
         <a href="{{ .Page.RelPermalink }}all">See all datasets <i class="bi bi-arrow-right-square-fill"></i></a>
@@ -133,7 +115,7 @@ <h2>{{ .Name }}</h2>
     {{ range .Site.Menus.homepage_biobanks }}
     <div class="row mt-4 mb-2 pt-2">
       <div class="col-9">
-        <h2>{{ .Name }}</h2>
+        <h3 class="mt-0">{{ .Name }}</h3>
       </div>
       <div class="col mt-2 pt-1 text-end see-all-link-text">
         <a target="_blank" href="https://biobanks.covid19dataportal.se/">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e78efc3f..2f963d58 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,7 +2,7 @@
   style="background-image: linear-gradient(to bottom, rgba(55, 174, 148, 0.52), rgba(55, 174, 148, 0.73)),
          url('{{ if .Params.header_illustration }}{{ .Params.header_illustration }}{{ else }}/img/csm_coronavirus_mc.jpg{{ end }}');">
   <div class="container">
-    <h1>{{ if .IsHome }}
+    <h2>{{ if .IsHome }}
       {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }}
       {{ else if eq .Parent.Section "highlights_topics" }}
       {{ with .Site.GetPage "/highlights" }}
@@ -18,7 +18,7 @@ <h1>{{ if .IsHome }}
       {{ .Parent.Title }}
       {{ else }}
       {{ .Title }}
-      {{ end }}</h1>
+      {{ end }}</h2>
   </div>
 </div>
 {{ if not .IsHome }}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 8b9b1d57..e9f4e6c0 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -18,12 +18,11 @@
     </button>
     
     <!-- Navigation links beside logo, visible only on biger screen -->
-    <div class="d-flex align-items-end flex-column collapse navbar-collapse">
+    <div class="d-flex flex-column align-items-end collapse navbar-collapse">
+
+      <!-- Language flags -->
       <div class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto navbar-top">
-          {{ range .Site.Menus.navbar_top }}
-          <li class="nav-item"><a class="nav-link" href="{{ .Page.RelPermalink }}">{{ .Name }}</a></li>
-          {{ end }}
+        <ul class="navbar-nav ml-auto nav-languages">
           {{ if .IsTranslated }}
           {{ range .AllTranslations }}
           <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
@@ -51,14 +50,16 @@
           {{ end }}
         </ul>
       </div>
+
+      <!-- Top navbar list i.e. About, Contact, etc -->
       <div class="collapse navbar-collapse">
-        <ul class="navbar-nav">
-          {{ range .Site.Menus.top_actions }}
-          <li class="nav-item"><a class="nav-link highlight" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
-          </li>
+        <ul class="navbar-nav ml-auto navbar-top">
+          {{ range .Site.Menus.navbar_top }}
+          <li class="nav-item"><a class="nav-link" href="{{ .Page.RelPermalink }}">{{ .Name }}</a></li>
           {{ end }}
         </ul>
       </div>
+
     </div>
   </div>
 </nav>
@@ -69,12 +70,8 @@
   <div class="container">
     <div class="collapse navbar-collapse" id="navbarCollapseBottom">
       
-      <!-- About, language and other button navigation stuff -->
-      <ul class="d-lg-none navbar-nav nav-languages list-group-horizontal justify-content-end">
-        {{ range .Site.Menus.navbar_top }}
-        <li class="nav-item"><a class="nav-link {{ .Post }}" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
-        </li>
-        {{ end }}
+      <!-- Languages flags -->
+      <ul class="d-lg-none navbar-nav nav-languages-mobile list-group-horizontal">
         {{ if .IsTranslated }}
         {{ range .AllTranslations }}
         <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
@@ -101,9 +98,11 @@
         {{ end }}
         {{ end }}
       </ul>
-      <ul class="d-lg-none navbar-nav">
-        {{ range .Site.Menus.top_actions }}
-        <li class="nav-item align-text-center"><a class="nav-link highlight" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
+
+      <!-- Top nav list i.e. About, Contact, etc -->
+      <ul class="d-lg-none navbar-nav nav-top">
+        {{ range .Site.Menus.navbar_top }}
+        <li class="nav-item"><a class="nav-link {{ .Post }}" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
         </li>
         {{ end }}
       </ul>
@@ -112,23 +111,15 @@
       <!-- Main navigation menu for all pages, English site. Visible only in smaller devices -->
       {{ if eq $.Site.Language.LanguageName "English" }}
       <div class="d-lg-none">
-        <!-- Available Data & Highlights -->
+        <!-- Data Highlights & Editorials -->
         <div class="main_menu_item pb-1">
-          <a href="#dataAndHighlight" data-bs-toggle="collapse"  role="button"
-             aria-expanded="false" aria-controls="dataAndHighlight">
-             <i class="bi bi-table"></i> Available Data & Highlights <i class="bi bi-caret-down-fill small"></i>
+          <a href="#highlightAndEditorial" data-bs-toggle="collapse"  role="button"
+             aria-expanded="false" aria-controls="highlightAndEditorial">
+             <i class="bi bi-pencil-square"></i> Data Highlights & Editorials <i class="bi bi-caret-down-fill small"></i>
            </a>
-            <div class="collapse main_menu_item_sub ps-4" id="dataAndHighlight">
-              <a href="#availableData" data-bs-toggle="collapse"  role="button"
-                 aria-expanded="false" aria-controls="availableData">
-                 Available Datasets <i class="bi bi-caret-down-fill small"></i>
-              </a>
-              <div class="collapse main_menu_item_sub ps-4" id="availableData">
-                {{ range .Site.Menus.datasets_menu }}
-                <a class="d-block m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
-                {{ end }}
-              </div>
+            <div class="collapse main_menu_item_sub ps-4" id="highlightAndEditorial">
               <a class="d-block" href="/highlights/">Data Highlights</a>
+              <a class="d-block" href="/editorials/">Editorials</a>
             </div>
         </div>
         <!-- Data Dashboards -->
@@ -143,6 +134,21 @@
             {{ end }}
           </div>
         </div>
+        <!-- Share & Access Data -->
+        <div class="main_menu_item pb-1">
+          <a href="#shareAndAccessData" data-bs-toggle="collapse"  role="button"
+             aria-expanded="false" aria-controls="shareAndAccessData">
+            <i class="bi bi-archive"></i> Share & Access Data <i class="bi bi-caret-down-fill small"></i>
+          </a>
+          <div class="collapse main_menu_item_sub ps-4" id="shareAndAccessData">
+            <a class="d-block" href="/share-data/">Share data</a>
+            <a class="d-block" href="/datasets/all/">Available datasets</a>
+            <a class="d-block" href="/dashboards/">Data dashboards</a>
+            <a class="d-block" href="/data-sources/">Data sources & repositories</a>
+            <a class="d-block" href="/biobanks/">Sample collection database</a>
+            <a class="d-block" href="/data-management/">Research data management</a>
+          </div>
+        </div>
         <!-- Research & Funding -->
         <div class="main_menu_item pb-1">
           <a href="#researchAndFunding" data-bs-toggle="collapse"  role="button"
@@ -167,14 +173,6 @@
             <a class="d-block" href="/resources/">Preparedness Resources</a>
           </div>
         </div>
-        <!-- Research data management -->
-        <div class="main_menu_item pb-1">
-          <i class="bi bi-journal-text"></i> <a href="/data-management/">Research Data Management</a>
-        </div>
-        <!-- Sample database collection -->
-        <div class="main_menu_item pb-1">
-          <i class="bi bi-collection"></i> <a href="/biobanks/">Sample Collection Database</a>
-        </div>
         <!-- Topics -->
         <div class="main_menu_item pb-1">
           <a href="#topics" data-bs-toggle="collapse"  role="button"
@@ -187,14 +185,6 @@
             {{ end }}
           </div>
         </div>
-        <!-- Editorials -->
-        <div class="main_menu_item pb-1">
-          <i class="bi bi-pencil-square"></i> <a href="/editorials/">Editorials</a>
-        </div>
-        <!-- Training and event -->
-        <div class="main_menu_item">
-          <i class="bi bi-calendar-event"></i> <a href="/events/">Events & Training</a>
-        </div>
       </div>
       <hr class="d-lg-none">
       {{ end }}
@@ -229,103 +219,78 @@
 
 <!-- Main navigation menu, English version. Visibile only on bigger screens -->
 {{ if eq $.Site.Language.LanguageName "English" }}
-<div class="container mb-1 d-none d-lg-block">
-  <div class="row main_menu">
-    <div class="col-lg">
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-table"></i>
-          <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
-             data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
-             aria-expanded="false">Available Data & Highlights</a>
-            <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-              <div class="dropend">
-                <a class="dropdown-item dropdown-toggle m-0" href="#" id="navbarDropdownMenuLink"
-                   data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
-                   aria-expanded="false">Available Datasets</a>
-                <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-                  {{ range .Site.Menus.datasets_menu }}
-                  <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
-                  {{ end }}
-                </div>
-              </div>
-              <a class="dropdown-item m-0" href="/highlights/">Data Highlights</a>
-            </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-graph-up"></i>
-          <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-auto-close="outside"
-             data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Data Dashboards</a>
-          <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-            {{ range .Site.Menus.dashboard_menu }}
-            <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
-            {{ end }}
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-inboxes-fill"></i>
-          <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-auto-close="outside"
-            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Research & Funding</a>
-          <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-            {{ range .Site.Menus.research_menu }}
-            <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
-            {{ end }}
-          </div>
+<div class="container mb-3 d-none d-lg-block">
+  <div class="row row-cols-lg-3 row-cols-xxl-auto justify-content-xxl-between main_menu">
+
+    <!-- Highlights & Editorials -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-pencil-square"></i> Data Highlights & Editorials</a>
+        <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+          <a class="dropdown-item m-0" href="/highlights/">Data Highlights</a>
+          <a class="dropdown-item m-0" href="/editorials/">Editorials</a>
         </div>
-      </div>
     </div>
-    <div class="col-lg mt-3 mt-lg-0">
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-clipboard-data"></i>
-          <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-auto-close="outside"
-            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pandemic Preparedness</a>
-            <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-              <a class="dropdown-item m-0" href="/pathogens/">Emerging Pathogens</a>
-              <a class="dropdown-item m-0" href="/plp-program-background/">SciLifeLab PLP</a>
-              <a class="dropdown-item m-0" href="/resources/">Preparedness Resources</a>
-            </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-journal-text"></i> <a href="/data-management/">Research Data Management</a>
-        </div>
+    <!-- Dashboards -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-graph-up"></i> Data Dashboards</a>
+      <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+        {{ range .Site.Menus.dashboard_menu }}
+        <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
+        {{ end }}
       </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-collection"></i> <a href="/biobanks/">Sample Collection Database</a>
-        </div>
+    </div>
+    <!-- Share and access data -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-archive"></i> Share & Access Data</a>
+      <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+        <a class="dropdown-item m-0" href="/share-data/">Share data</a>
+        <a class="dropdown-item m-0" href="/datasets/all/">Available datasets</a>
+        <a class="dropdown-item m-0" href="/dashboards/">Data dashboards</a>
+        <a class="dropdown-item m-0" href="/data-sources/">Data sources & repositories</a>
+        <a class="dropdown-item m-0" href="/biobanks/">Sample collection database</a>
+        <a class="dropdown-item m-0" href="/data-management/">Research data management</a>
       </div>
     </div>
-    <div class="col-lg my-3 my-lg-0">
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-card-list"></i>
-          <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-auto-close="outside"
-            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Topics</a>
-          <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
-            {{ range .Site.Menus.topics_menu }}
-            <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
-            {{ end }}
-          </div>
-        </div>
+    <!-- Research & Funding -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-inboxes-fill"></i> Research & Funding</a>
+      <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+        {{ range .Site.Menus.research_menu }}
+        <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
+        {{ end }}
       </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-pencil-square"></i> <a href="/editorials/">Editorials</a>
-        </div>
+    </div>
+    <!-- Pandemic Preparedness -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-clipboard-data"></i> Pandemic Preparedness</a>
+      <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+        <a class="dropdown-item m-0" href="/pathogens/">Emerging Pathogens</a>
+        <a class="dropdown-item m-0" href="/plp-program-background/">SciLifeLab PLP</a>
+        <a class="dropdown-item m-0" href="/resources/">PLP Capabilities</a>
       </div>
-      <div class="row">
-        <div class="col main_menu_item">
-          <i class="bi bi-calendar-event"></i> <a href="/events/">Events & Training</a>
-        </div>
+    </div>
+    <!-- Topics -->
+    <div class="col-auto main_menu_item">
+      <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+          aria-expanded="false"><i class="bi bi-card-list"></i> Topics</a>
+      <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+        {{ range .Site.Menus.topics_menu }}
+        <a class="dropdown-item m-0" href="{{ .Page.RelPermalink }}">{{ .Name }}</a>
+        {{ end }}
       </div>
     </div>
+
   </div>
 </div>
 {{ end }}
@@ -335,8 +300,9 @@
 {{ if eq $.Site.Language.LanguageName "Svenska" }}
 <div class="container mb-1 d-none d-lg-block">
   <div class="row main_menu">
+      <!-- Data dashboard -->
       <div class="col-md-auto main_menu_item">
-        <i class="bi bi-window-stack"></i>
+        <i class="bi bi-graph-up"></i>
         <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Data Dashboards</a>
@@ -346,8 +312,17 @@
           {{ end }}
         </div>
       </div>
+      <!-- Share & Access Data -->
       <div class="col-md-auto main_menu_item">
-        <i class="bi bi-journal-text"></i> <a href="/sv/biobanks/">Provsamlingsregistret</a>
+        <i class="bi bi-archive"></i>
+        <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
+         data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
+         aria-expanded="false">Share & Access Data</a>
+        <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
+          <a class="dropdown-item m-0" href="/sv/share-data/">Dela data</a>
+          <a class="dropdown-item m-0" href="/sv/dashboards/">Data dashboards</a>
+          <a class="dropdown-item m-0" href="/sv/biobanks/">Provsamlingsregistret</a>
+        </div>
       </div>
   </div>
 </div>
diff --git a/static/css/styles.css b/static/css/styles.css
index e0985fba..0c33925f 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -110,7 +110,6 @@ a.nav-link:active {
 
 .nav-tabs a.nav-link,
 .nav-list a.nav-link {
-  /* color: #295986; */
   color: #4770b1;
   font-weight: 500;
 }
@@ -140,81 +139,65 @@ a.nav-link:active {
   margin-left: 1rem;
 }
 
-.navbar .navbar-nav.navbar-top li:not(:first-child) a {
-  padding-left: 0;
+.navbar-nav li.nav-item a.nav-link {
+  color: rgba(0, 0, 0, 0.75) !important;
 }
 
-.navbar-top li:not(:last-child) a span {
-  border-right: 1px solid #ccc;
-  padding-right: 1rem;
+.navbar-nav.navbar-top li.nav-item a.nav-link:hover {
+  color: rgba(0, 0, 0, 0.85) !important;
+  text-decoration: underline;
+  text-decoration-color: rgba(0, 0, 0, 0.85);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 6px;
 }
 
-.navbar-top a img {
-  width: 1.1rem;
-  opacity: 0.3;
-}
-.nav-languages a img {
-  width: 1.1rem;
-  opacity: 0.5;
-  margin-left: 0.1rem;
-  margin-bottom: 0.1rem;
+.nav-languages li a span,
+.nav-languages-mobile li a span {
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  border-radius: 3px;
+  padding: 0px 4px 2px;
 }
 
-.nav-languages li:not(:last-child) a span {
-  border-right: 1px solid #ccc;
-  padding-right: 1rem;
+.nav-languages li a span:hover {
+  background-color: rgba(216, 216, 216, 0.2);
 }
 
-.nav-languages li:not(:first-child) a {
-  padding-left: 1rem;
+.nav-languages a img {
+  width: 1.1rem;
+  opacity: 0.75;
 }
 
-.navbar-top a:hover img,
-.navbar-top a:focus img,
-.navbar-top a:active img,
-.nav-languages a:hover img,
-.nav-languages a:focus img,
-.nav-languages a:active img {
-  opacity: 1;
+.nav-languages-mobile a img {
+  width: 1.1rem;
+  opacity: 0.7;
+  margin-left: 0.1rem;
+  margin-bottom: 0.1rem;
 }
 
-.navbar .navbar-nav a.nav-link.highlight {
-  border: 1px solid rgba(71, 112, 177, 0.9);
-  color: rgba(71, 112, 177, 0.9);
-  padding: 0.3rem 1rem;
-  margin: 0.5rem 0;
-  border-radius: 2px;
-  margin-left: 0.2em;
-  text-align: center;
-}
-.navbar .navbar-nav a.nav-link.highlight:hover,
-.navbar .navbar-nav a.nav-link.highlight:focus,
-.navbar .navbar-nav a.nav-link.highlight:active {
-  background-color: #d4de27;
-  border-color: #d4de27;
-  color: #1a1c1a;
+.nav-languages-mobile li:last-child a span {
+  margin-left: 1rem;
 }
 
 .main_menu_item {
-  color: rgba(71, 112, 177, 0.9);
+  color: rgba(41, 89, 134, 0.85);
   font-weight: 500;
-  font-size: 1.25em;
+  font-size: 1.07em;
 }
 
 .main_menu_item a {
-  color: rgba(71, 112, 177, 0.9);
+  color: rgba(41, 89, 134, 0.85);
   text-decoration: none;
 }
 
 .main_menu_item_sub a {
   font-weight: 500;
-  color: rgba(71, 112, 177, 0.9);
+  color: rgba(41, 89, 134, 0.85);
   text-align: left;
   vertical-align: middle;
   background-color: transparent;
   border: 1px solid transparent;
   margin: 0.2rem 0.1rem;
-  font-size: 1rem;
+  font-size: 0.95rem;
   white-space: nowrap;
   padding-right: 0.5rem;
   text-decoration: none;
@@ -236,8 +219,7 @@ a.nav-link:active {
 .main_menu_item_sub a:hover,
 .main_menu_item_sub a:focus,
 .main_menu_item_sub a:active {
-  /* color: rgba(41, 89, 134, 1); */
-  color: rgba(71, 112, 177, 1);
+  color: rgba(41, 89, 134, 1);
 }
 
 .main_menu_item_sub_dropdown a {
@@ -266,7 +248,7 @@ a.nav-link:active {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  padding: 1.5rem 0;
+  padding: 1.1rem 0;
 }
 
 .breadcrumbs {
@@ -330,27 +312,6 @@ footer img {
   border: solid 1px #295986;
 }
 
-/*
-
-This no longer an issue, commenting out on 2023-01-28,
-this commented section can be removed after a month or two
-
-There is a bug in Safari whereby it stretches an image nested 
-in a flexbox element to its natural height. I use the class below 
-for rows with images to fix that.
-
-.row_cor {
-    display: -ms-flexbox;
-    display: flex;
-    align-items: flex-start !important;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px ;
-}
-
-*/
-
 #dwbuttons .collapsed {
   background-color: white !important;
   color: #5a626a !important;
@@ -534,8 +495,8 @@ for rows with images to fix that.
 
 .btn_details_primary {
   color: #fff;
-  background-color: #4770b1;
-  border-color: #4770b1;
+  background-color: #308acf;
+  border-color: #308acf;
 }
 
 .btn-blue {

From 9d00ac3ad2df158e902273040af3cdbe79ccac7b Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Mon, 17 Jun 2024 12:17:01 +0200
Subject: [PATCH 03/15] Move language to dropdown

---
 layouts/partials/navbar.html | 118 ++++++++++++++++-------------------
 static/css/styles.css        |  61 +++++++++---------
 2 files changed, 84 insertions(+), 95 deletions(-)

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index e9f4e6c0..b0769d19 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,3 +1,20 @@
+<!-- Main contet start further below, this is to compute respective language page -->
+
+{{ $page_lang := dict }}
+{{ if .IsTranslated }}
+  {{ range .AllTranslations }}
+    {{ $page_lang = merge $page_lang (dict .Language.Lang .RelPermalink) }}
+  {{ end }}
+{{ else if .Parent.IsTranslated }}
+  {{ $page_lang = merge $page_lang (dict "en" .RelPermalink "sv" (printf "%s%s" "/sv" .Parent.RelPermalink)) }}
+{{ else if .Parent.Parent.IsTranslated }}
+  {{ $page_lang = merge $page_lang (dict "en" .RelPermalink "sv" (printf "%s%s" "/sv" .Parent.Parent.RelPermalink)) }}
+{{ else }}
+  {{ $page_lang = merge $page_lang (dict "en" "/" "sv" "/sv/") }}
+{{ end }}
+
+<!-- MAIN CONTENT -->
+
 <!-- Top navigation bar with logo and menu beside the logo -->
 <nav class="navbar navbar-expand-lg navbar-light bg-white pb-0">
   <div class="container">
@@ -20,43 +37,31 @@
     <!-- Navigation links beside logo, visible only on biger screen -->
     <div class="d-flex flex-column align-items-end collapse navbar-collapse">
 
-      <!-- Language flags -->
-      <div class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto nav-languages">
-          {{ if .IsTranslated }}
-          {{ range .AllTranslations }}
-          <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-                lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                  alt=""></span></a></li>
-          {{ end }}
-          {{ else if .Parent.IsTranslated }}
-          <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-                lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                  alt=""></span></a></li>
-          <li class="nav-item"><a class="nav-link" href="/sv{{ relURL .Parent.Permalink }}"><span lang="sv">sv <img
-                  src="/img/flag-sv.svg" alt=""></span></a></li>
-          {{ else if .Parent.Parent.IsTranslated }}
-          <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-                lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                  alt=""></span></a></li>
-          <li class="nav-item"><a class="nav-link" href="/sv{{ relURL .Parent.Parent.Permalink }}"><span lang="sv">sv
-                <img src="/img/flag-sv.svg" alt=""></span></a></li>
-          {{ else }}
-          {{ range $.Site.Home.AllTranslations }}
-          <li class="nav-item navbar-languages"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-                lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                  alt=""></span></a></li>
-          {{ end }}
-          {{ end }}
-        </ul>
-      </div>
-
-      <!-- Top navbar list i.e. About, Contact, etc -->
+      <!-- Top navbar list i.e. About, Contact, Language, etc -->
       <div class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto navbar-top">
           {{ range .Site.Menus.navbar_top }}
           <li class="nav-item"><a class="nav-link" href="{{ .Page.RelPermalink }}">{{ .Name }}</a></li>
           {{ end }}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="bi bi-globe2"></i> {{ if eq $.Site.Language.LanguageName "English" }} EN {{ else }} SV {{ end }}
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end nav-languages">
+              <li>
+                <a class="dropdown-item" href="{{ $page_lang.en }}">
+                  <i class="bi bi-{{ if eq .Language.Lang "en" }}check-{{ end }}circle"></i>
+                  <span lang="{{ .Language.Lang }}"> English</span>
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item" href="{{ $page_lang.sv }}">
+                  <i class="bi bi-{{ if eq .Language.Lang "sv" }}check-{{ end }}circle"></i>
+                  <span lang="sv"> Svenska</span>
+                </a>
+              </li>
+            </ul>
+          </li>
         </ul>
       </div>
 
@@ -66,41 +71,28 @@
 <!-- ENDS HERE - Top navigation bar with logo and menu beside the logo -->
 
 <!-- Expandable top navigation menu, controlled by above defined hamburger button, only visible on small screens -->
-<nav class="navbar navbar-expand-lg navbar-light pt-0">
+<nav class="navbar navbar-expand-lg navbar-light pt-0 pb-1">
   <div class="container">
     <div class="collapse navbar-collapse" id="navbarCollapseBottom">
-      
-      <!-- Languages flags -->
-      <ul class="d-lg-none navbar-nav nav-languages-mobile list-group-horizontal">
-        {{ if .IsTranslated }}
-        {{ range .AllTranslations }}
-        <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-              lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                alt=""></span></a></li>
-        {{ end }}
-        {{ else if .Parent.IsTranslated }}
-        <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-              lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                alt=""></span></a></li>
-        <li class="nav-item"><a class="nav-link" href="/sv{{ relURL .Parent.Permalink }}"><span lang="sv">sv <img
-                src="/img/flag-sv.svg" alt=""></span></a></li>
-        {{ else if .Parent.Parent.IsTranslated }}
-        <li class="nav-item"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-              lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                alt=""></span></a></li>
-        <li class="nav-item"><a class="nav-link" href="/sv{{ relURL .Parent.Parent.Permalink }}"><span lang="sv">sv
-              <img src="/img/flag-sv.svg" alt=""></span></a></li>
-        {{ else }}
-        {{ range $.Site.Home.AllTranslations }}
-        <li class="nav-item navbar-languages"><a class="nav-link" href="{{ relURL .Permalink }}"><span
-              lang="{{ .Language.Lang }}">{{ .Language.Lang }} <img src="/img/flag-{{ .Language.Lang }}.svg"
-                alt=""></span></a></li>
-        {{ end }}
-        {{ end }}
-      </ul>
 
-      <!-- Top nav list i.e. About, Contact, etc -->
+      <!-- Top nav list i.e. About, Contact, Language, etc -->
       <ul class="d-lg-none navbar-nav nav-top">
+        <li class="nav-item dropdown languages-mobile">
+          <a href="#languageMobile" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="languageMobile">
+            <i class="bi bi-globe2"></i> {{ if eq $.Site.Language.LanguageName "English" }} EN {{ else }} SV {{ end }}
+            <i class="bi bi-caret-down-fill small"></i>
+          </a>
+          <div class="collapse ps-2 pt-1" id="languageMobile">
+              <a class="dropdown-item" href="{{ $page_lang.en }}">
+                <i class="bi bi-{{ if eq .Language.Lang "en" }}check-{{ end }}circle"></i>
+                <span lang="{{ .Language.Lang }}"> English</span>
+              </a>
+              <a class="dropdown-item" href="{{ $page_lang.sv }}">
+                <i class="bi bi-{{ if eq .Language.Lang "sv" }}check-{{ end }}circle"></i>
+                <span lang="sv"> Svenska</span>
+              </a>
+          </div>
+        </li>
         {{ range .Site.Menus.navbar_top }}
         <li class="nav-item"><a class="nav-link {{ .Post }}" href="{{ .Page.RelPermalink }}">{{ .Pre }}{{ .Name }}</a>
         </li>
diff --git a/static/css/styles.css b/static/css/styles.css
index 0c33925f..6bda4ad5 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -79,15 +79,21 @@ figure.float-md-end {
 * Adapt header logo size for smaller mobile devices
 */
 
+@media (max-width: 263px) {
+  .navbar .navbar-brand {
+    max-width: 65%;
+  }
+}
+
 @media (max-width: 311px) {
   .navbar .navbar-brand {
     max-width: 70%;
   }
 }
 
-@media (max-width: 263px) {
-  .navbar .navbar-brand {
-    max-width: 65%;
+@media all and (min-width: 1400px) {
+  .navbar .navbar-nav a.nav-link {
+    padding: 0.3em 0.8rem;
   }
 }
 
@@ -96,12 +102,6 @@ figure.float-md-end {
   max-width: 100%;
 }
 
-@media all and (min-width: 992px) {
-  .navbar .navbar-nav a.nav-link {
-    padding: 0.3em 0.8rem;
-  }
-}
-
 a.nav-link:hover,
 a.nav-link:focus,
 a.nav-link:active {
@@ -129,12 +129,6 @@ a.nav-link:active {
   font-weight: 600;
 }
 
-@media (max-width: 991px) {
-  .navbar .text-vert {
-    display: none;
-  }
-}
-
 .navbar .navbar-nav.navbar-top {
   margin-left: 1rem;
 }
@@ -151,31 +145,34 @@ a.nav-link:active {
   text-underline-offset: 6px;
 }
 
-.nav-languages li a span,
-.nav-languages-mobile li a span {
-  border: 1px solid rgba(0, 0, 0, 0.5);
-  border-radius: 3px;
-  padding: 0px 4px 2px;
+.navbar-top li.dropdown a.nav-link {
+  padding-right: 0;
+}
+
+.nav-languages li a {
+  text-decoration: none;
 }
 
-.nav-languages li a span:hover {
-  background-color: rgba(216, 216, 216, 0.2);
+.languages-mobile a {
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.75)
 }
 
-.nav-languages a img {
-  width: 1.1rem;
-  opacity: 0.75;
+.dropdown-menu.nav-languages {
+  min-width: 1rem;
+  border-radius: 2px;
+  padding: 4px 0px;
+  margin-top: 0;
 }
 
-.nav-languages-mobile a img {
-  width: 1.1rem;
-  opacity: 0.7;
-  margin-left: 0.1rem;
-  margin-bottom: 0.1rem;
+.dropdown-menu.nav-languages a.dropdown-item {
+  padding: 2px 10px;
+  font-size: 0.9rem;
 }
 
-.nav-languages-mobile li:last-child a span {
-  margin-left: 1rem;
+.dropdown-menu.nav-languages a.dropdown-item:active {
+  background-color: rgba(216, 216, 216, 0.5);
+  color: rgba(0, 0, 0, 0.75);
 }
 
 .main_menu_item {

From 4cdc32b0348c5cb5d9c6cf363eb24a230b627407 Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthil10@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:15:23 +0200
Subject: [PATCH 04/15] revert detail button color

---
 static/css/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 6bda4ad5..494c804d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -492,8 +492,8 @@ footer img {
 
 .btn_details_primary {
   color: #fff;
-  background-color: #308acf;
-  border-color: #308acf;
+  background-color: #4770b1;
+  border-color: #4770b1;
 }
 
 .btn-blue {

From 31e430172d84a648d67e9b7cd1b16e9af6842575 Mon Sep 17 00:00:00 2001
From: LianeHughes <68756672+LianeHughes@users.noreply.github.com>
Date: Mon, 24 Jun 2024 14:54:14 +0200
Subject: [PATCH 05/15] change text on data sources and add header translation

---
 content/english/data-sources.md | 6 ++++--
 layouts/partials/navbar.html    | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/content/english/data-sources.md b/content/english/data-sources.md
index bbd4c5de..410c4642 100644
--- a/content/english/data-sources.md
+++ b/content/english/data-sources.md
@@ -1,8 +1,10 @@
 ---
-Title: Data sources
+Title: Data sources & repositories
 ---
 
-This is a list of data sources available for *Epidemiology and biology of infection* in Sweden. Use the **Search** function to find sources by name/keywords (often more granular than other filters). A resource type of **Repository** indicates that at least some users can both submit and access data, whilst **Data Source** indicates that data can only be accessed, not submitted. It is also possible to filter data sources according to **Data Type**.
+This page includes displays **Data Sources** and **Repositories** relevant to the scope of the Swedish Pathogens Portal (i.e. infectious disease and pandemic preparedness in Sweden). **Data sources** are defined as resources where at least some users can access (but not submit) data. **Repositories**, by contrast, are resources in which at least some users can both access and submit data.
+
+Use the **Search** function to locate data sources/repositries by name/keywords (often more granular than other filters). It is also possible to filter data sources according to **Data Type**.
 
 [Get in touch](/contact/) about adding further data sources.
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index b0769d19..c5860e93 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -309,7 +309,7 @@
         <i class="bi bi-archive"></i>
         <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink"
          data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true"
-         aria-expanded="false">Share & Access Data</a>
+         aria-expanded="false">Datadelning och Tillgång</a>
         <div class="dropdown-menu main_menu_item_sub" aria-labelledby="navbarDropdownMenuLink">
           <a class="dropdown-item m-0" href="/sv/share-data/">Dela data</a>
           <a class="dropdown-item m-0" href="/sv/dashboards/">Data dashboards</a>

From 5b20e0af0faee7fbc29767ed972ba13ff42de51d Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Wed, 26 Jun 2024 09:44:55 +0200
Subject: [PATCH 06/15] Fix SV header

---
 layouts/partials/navbar.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index c5860e93..678b9571 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -77,8 +77,8 @@
 
       <!-- Top nav list i.e. About, Contact, Language, etc -->
       <ul class="d-lg-none navbar-nav nav-top">
-        <li class="nav-item dropdown languages-mobile">
-          <a href="#languageMobile" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="languageMobile">
+        <li class="nav-item py-2 dropdown languages-mobile">
+          <a href="#languageMobile" class="py-2" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="languageMobile">
             <i class="bi bi-globe2"></i> {{ if eq $.Site.Language.LanguageName "English" }} EN {{ else }} SV {{ end }}
             <i class="bi bi-caret-down-fill small"></i>
           </a>
@@ -196,9 +196,17 @@
             {{ end }}
           </div>
         </div>
-        <!-- Sample collection database -->
-        <div class="main_menu_item">
-          <i class="bi bi-journal-text"></i> <a href="/sv/biobanks/">Provsamlingsregistret</a>
+        <!-- Share & Access Data -->
+        <div class="main_menu_item pb-1">
+          <a href="#shareAndAccessData" data-bs-toggle="collapse"  role="button"
+             aria-expanded="false" aria-controls="pandemicPreparedness">
+            <i class="bi bi-archive"></i> Datadelning och Tillgång <i class="bi bi-caret-down-fill small"></i>
+          </a>
+          <div class="collapse main_menu_item_sub ps-4" id="shareAndAccessData">
+            <a class="d-block" href="/sv/share-data/">Dela data</a>
+            <a class="d-block" href="/sv/dashboards/">Data dashboards</a>
+            <a class="d-block" href="/sv/biobanks/">Provsamlingsregistret</a>
+          </div>
         </div>
       </div>
       <hr class="d-lg-none">

From 8711c52d0d92668faba85cd814116d3b5ca7471f Mon Sep 17 00:00:00 2001
From: Ziip-dev <62331138+Ziip-dev@users.noreply.github.com>
Date: Wed, 26 Jun 2024 17:05:50 +0200
Subject: [PATCH 07/15] Add devbox development environment files

---
 devbox.json | 14 ++++++++++++++
 devbox.lock | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 devbox.json
 create mode 100644 devbox.lock

diff --git a/devbox.json b/devbox.json
new file mode 100644
index 00000000..9f6e950b
--- /dev/null
+++ b/devbox.json
@@ -0,0 +1,14 @@
+{
+  "$schema":  "https://raw.githubusercontent.com/jetify-com/devbox/0.11.1/.schema/devbox.schema.json",
+  "packages": ["hugo@0.123.7"],
+  "shell": {
+    "init_hook": [
+      "echo 'Welcome to devbox!' > /dev/null"
+    ],
+    "scripts": {
+      "server": [
+        "hugo serve"
+      ]
+    }
+  }
+}
diff --git a/devbox.lock b/devbox.lock
new file mode 100644
index 00000000..0a3972e7
--- /dev/null
+++ b/devbox.lock
@@ -0,0 +1,53 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "hugo@0.123.7": {
+      "last_modified": "2024-03-08T13:51:52Z",
+      "resolved": "github:NixOS/nixpkgs/a343533bccc62400e8a9560423486a3b6c11a23b#hugo",
+      "source": "devbox-search",
+      "version": "0.123.7",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/4sx62xs1vsx1lq0nbzf78q2b45yqvbap-hugo-0.123.7",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/4sx62xs1vsx1lq0nbzf78q2b45yqvbap-hugo-0.123.7"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/al5gz9r61mlpdw6hb5jz1am4j3bkqkk6-hugo-0.123.7",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/al5gz9r61mlpdw6hb5jz1am4j3bkqkk6-hugo-0.123.7"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/xl68hgyc2n83csq8dqf7fzc1cgazikpw-hugo-0.123.7",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/xl68hgyc2n83csq8dqf7fzc1cgazikpw-hugo-0.123.7"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/hgycj5hqslak89rdhr0q10iwnwdqqi2g-hugo-0.123.7",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/hgycj5hqslak89rdhr0q10iwnwdqqi2g-hugo-0.123.7"
+        }
+      }
+    }
+  }
+}

From 185766e9fbb546060feeee5c9cad0675339dc92b Mon Sep 17 00:00:00 2001
From: Ziip-dev <62331138+Ziip-dev@users.noreply.github.com>
Date: Tue, 7 May 2024 13:58:27 +0200
Subject: [PATCH 08/15] Modify serology data visualisations

Change data visualisation sources from Vega-Lite to Plotly.
---
 .../english/dashboards/serology-statistics.md | 25 ++++++++++---------
 .../svenska/dashboards/serology-statistics.md | 25 ++++++++++---------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/content/english/dashboards/serology-statistics.md b/content/english/dashboards/serology-statistics.md
index f381adce..d5e965ce 100644
--- a/content/english/dashboards/serology-statistics.md
+++ b/content/english/dashboards/serology-statistics.md
@@ -14,6 +14,7 @@ menu:
 aliases:
   - /data_types/health_data/serology-statistics/
 dashboards_topics: [COVID-19, Infectious diseases]
+plotly: true
 ---
 
 <div class="alert alert-info">
@@ -51,10 +52,14 @@ The number of SARS-CoV-2 serology tests completed by the SciLifeLab Autoimmunity
   Scroll the plot sideways to view all of the data.
 </div>
 
-<div class="plot_wrapper">
-  <div class="w-100" id="bar-chart"></div>
+<div class="plot_wrapper mb-3">
+  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
+**Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+
+**Code used to produce plot:** [Script to produce plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/weekly-serology-tests.py).
+
 ## Cumulative serology tests
 
 The cumulative number of positive, negative, and research & development (R&D) SARS-CoV-2 serology tests completed over time at the SciLifeLab Autoimmunity and Serology Profiling unit.
@@ -63,10 +68,14 @@ The cumulative number of positive, negative, and research & development (R&D) SA
   Scroll the plot sideways to view all of the data.
 </div>
 
-<div class="plot_wrapper">
-  <div class="w-100" id="cumulative-plot"></div>
+<div class="plot_wrapper mb-3">
+  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
+**Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+
+**Code used to produce plot:** [Script to produce plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/cumulative-serology-tests.py).
+
 #### About serology testing at the Autoimmunity and Serology Profiling unit
 
 Early in the COVID-19 pandemic, work was initiated to [develop a serological assay](https://www.scilifelab.se/capabilities/pandemic-laboratory-preparedness/pandemic-response/other-scilifelab-efforts/serology/) for large scale testing of plasma and serum samples for antibodies against SARS-CoV-2. The work was undertaken by three research groups at [the Department of Protein Science, KTH Royal Institute of Technology (KTH)](https://www.kth.se/pro) and the [Autoimmunity and Serology Profiling unit](https://www.scilifelab.se/facilities/autoimmunity-profiling/) at [SciLifeLab](https://www.scilifelab.se).
@@ -74,11 +83,3 @@ Early in the COVID-19 pandemic, work was initiated to [develop a serological ass
 By comparing and combining a large number of variants of SARS-CoV-2 proteins as antigens, a [highly sensitive and specific multiplex bead-based assay](https://doi.org/10.1002/cti2.1312) was established. The high-throughput assay can be used to process up to 8000 samples per week. The vast majority of samples analysed to date originated from healthcare personnel, population-based studies, personnel in the pharmaceutical and biotechnology industry, and from within multiple research collaborations. Collaborators and sample providers include the community study at Danderyd University Hospital ([see news involving a follow-up study at Danderyd University Hospital](https://www.scilifelab.se/news/four-out-of-five-still-have-antibodies-against-sars-cov-2)), Karolinska University Hospital, Uppsala University Hospital, Skåne University Hospital, Örebro University Hospital, Sophiahemmet Hospital, Public Health Agency of Sweden, RISE (Research Institutes of Sweden), AstraZeneca, Cytiva, SVPH, Karolinska Institutet, KTH, Uppsala University, and Lund University.
 
 Check out the [Autoimmunity and Serology Profiling unit page](https://www.scilifelab.se/units/autoimmunity-profiling/) on the SciLifeLab website to find out more about the unit itself. Publications produced by studies making use of the unit are available in the [SciLifeLab Infrastructure Publications database](https://publications.scilifelab.se/label/Autoimmunity%20and%20Serology%20Profiling).
-
-<script src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.12.2"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
-
-<script src="https://datagraphics.dc.scilifelab.se/graphic/e5c031600d334d889f33080d3f0ac0dd.js?id=bar-chart"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/4c635b2679e648e384d952dd3e506ff1.js?id=cumulative-plot"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/63d9201aee8747c9b37c17ebb6b01c35.js?id=total-number"></script>
diff --git a/content/svenska/dashboards/serology-statistics.md b/content/svenska/dashboards/serology-statistics.md
index 58bde2dd..f9bd68bb 100644
--- a/content/svenska/dashboards/serology-statistics.md
+++ b/content/svenska/dashboards/serology-statistics.md
@@ -9,6 +9,7 @@ menu:
     name: SARS-CoV-2 antikoppstester som utförts av SciLifeLab
 aliases:
   - /sv/data_types/health_data/serology-statistics/
+plotly: true
 ---
 
 <div class="alert alert-info">
@@ -46,10 +47,14 @@ Antalet SARS-CoV-2 serologitester som SciLifeLab Autoimmunity and Serology Profi
   Att rotera mobiltelefonen kan förbättra grafens layout
 </div>
 
-<div class="plot_wrapper">
-  <div class="w-100" id="bar-chart"></div>
+<div class="plot_wrapper mb-3">
+  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
+**Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+
+**Kod som används för att producera plot:** [Skript för att producera plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/weekly-serology-tests.py).
+
 ## Kumulativa serologiska tester
 
 Det kumulativa antalet positiva, negativa och forsknings- och utvecklingstester (R&D) av SARS-CoV-2-serologi som slutförts över tid vid SciLifeLab Autoimmunity and Serology Profiling-enheten.
@@ -58,10 +63,14 @@ Det kumulativa antalet positiva, negativa och forsknings- och utvecklingstester
   Att rotera mobiltelefonen kan förbättra grafens layout
 </div>
 
-<div class="plot_wrapper">
-  <div class="w-100" id="cumulative-plot"></div>
+<div class="plot_wrapper mb-3">
+  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
+**Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+
+**Kod som används för att producera plot:** [Skript för att producera plot]](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/cumulative-serology-tests.py).
+
 #### Om serologisk testning vid enheten för Autoimmunity and Serology Profiling
 
 Tidigt under covid-19-pandemin inleddes arbetet med att [utveckla en serologisk analys](https://www.scilifelab.se/capabilities/pandemic-laboratory-preparedness/pandemic-response/other-scilifelab-efforts/serology/) för storskalig testning av plasma- och serumprover för antikroppar mot SARS-CoV-2. Arbetet utfördes av tre forskargrupper vid [institutionen för proteinvetenskap, Kungliga Tekniska Högskolan (KTH)](https://www.kth.se/sv/pro/protein-science-1.784558) och [enheten för autoimmunitet och serologisk profilering](https://www.scilifelab.se/facilities/autoimmunity-profiling/) vid [SciLifeLab](https://www.scilifelab.se).
@@ -69,11 +78,3 @@ Tidigt under covid-19-pandemin inleddes arbetet med att [utveckla en serologisk
 Genom att jämföra och kombinera ett stort antal varianter av SARS-CoV-2-proteiner som antigener etablerades en [mycket känslig och specifik så kallad multiplex bead-based assay](https://doi.org/10.1002/cti2.1312). Assayen med hög kapacitet kan användas för att bearbeta upp till 8000 prover per vecka. De allra flesta prover som hittills har analyserats kommer från vårdpersonal, befolkningsbaserade studier, personal inom läkemedels- och bioteknikindustrin samt från flera olika forskningssamarbeten. Samarbetspartners och provleverantörer inkluderar samhällsstudien vid Danderyds universitetssjukhus ([se nyhet om uppföljningsstudie vid Danderyds universitetssjukhus](https://www.scilifelab.se/news/four-out-of-five-still-have-antibodies-against-sars-cov-2)), Karolinska universitetssjukhuset, Akademiska sjukhuset i Uppsala, Skånes universitetssjukhus, Universitetssjukhuset Örebro, Sophiahemmet, Folkhälsomyndigheten, RISE (Research Institutes of Sweden), AstraZeneca, Cytiva, SVPH, Karolinska Institutet, KTH, Uppsala universitet och Lunds universitet.
 
 Kolla in [Autoimmunity and Serology Profiling unit page](https://www.scilifelab.se/units/autoimmunity-profiling/) på SciLifeLabs webbplats för att få reda på mer om själva enheten. Publikationer som producerats av studier som använder enheten finns tillgängliga i databasen [SciLifeLab Infrastructure Publications](https://publications.scilifelab.se/label/Autoimmunity%20and%20Serology%20Profiling).
-
-<script src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.12.2"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
-
-<script src="https://datagraphics.dc.scilifelab.se/graphic/e5c031600d334d889f33080d3f0ac0dd.js?id=bar-chart"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/4c635b2679e648e384d952dd3e506ff1.js?id=cumulative-plot"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/63d9201aee8747c9b37c17ebb6b01c35.js?id=total-number"></script>

From d321c6af43cdff4e3e4793c686a8218854f062fa Mon Sep 17 00:00:00 2001
From: Ziip-dev <62331138+Ziip-dev@users.noreply.github.com>
Date: Wed, 15 May 2024 17:05:04 +0200
Subject: [PATCH 09/15] Add CSS style `min-width` to visualisation `<div>`

This ensures that the graph stops shrinking at a certain point and become scrollable.
---
 content/english/dashboards/serology-statistics.md | 4 ++--
 content/svenska/dashboards/serology-statistics.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/english/dashboards/serology-statistics.md b/content/english/dashboards/serology-statistics.md
index d5e965ce..9843edc5 100644
--- a/content/english/dashboards/serology-statistics.md
+++ b/content/english/dashboards/serology-statistics.md
@@ -53,7 +53,7 @@ The number of SARS-CoV-2 serology tests completed by the SciLifeLab Autoimmunity
 </div>
 
 <div class="plot_wrapper mb-3">
-  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
+  <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
 **Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
@@ -69,7 +69,7 @@ The cumulative number of positive, negative, and research & development (R&D) SA
 </div>
 
 <div class="plot_wrapper mb-3">
-  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
+  <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
 **Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
diff --git a/content/svenska/dashboards/serology-statistics.md b/content/svenska/dashboards/serology-statistics.md
index f9bd68bb..1132af44 100644
--- a/content/svenska/dashboards/serology-statistics.md
+++ b/content/svenska/dashboards/serology-statistics.md
@@ -48,7 +48,7 @@ Antalet SARS-CoV-2 serologitester som SciLifeLab Autoimmunity and Serology Profi
 </div>
 
 <div class="plot_wrapper mb-3">
-  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
+  <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
 **Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
@@ -64,7 +64,7 @@ Det kumulativa antalet positiva, negativa och forsknings- och utvecklingstester
 </div>
 
 <div class="plot_wrapper mb-3">
-  <div class="table-responsive">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
+  <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
 **Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)

From c79a4079ea9f1f29699b6f20a53b012a32952150 Mon Sep 17 00:00:00 2001
From: LianeHughes <68756672+LianeHughes@users.noreply.github.com>
Date: Wed, 22 May 2024 08:08:39 +0200
Subject: [PATCH 10/15] Minor updates to links

---
 .../english/dashboards/serology-statistics.md | 18 ++-------------
 .../svenska/dashboards/serology-statistics.md | 22 ++++---------------
 2 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/content/english/dashboards/serology-statistics.md b/content/english/dashboards/serology-statistics.md
index 9843edc5..696b7d0a 100644
--- a/content/english/dashboards/serology-statistics.md
+++ b/content/english/dashboards/serology-statistics.md
@@ -30,20 +30,6 @@ Serology tests involve testing bodily fluids for the presence of antibodies or o
 
 <div class="alert alert-info">Data last updated: {{% serology_date_modified %}}.</div>
 
-<!-- ## Number of serology tests completed
-
-The below plot shows the total number (sum total) of serology tests related to SARS-CoV-2 completed by the SciLifeLab Autoimmunity and Serology Profiling unit since the beginning of the pandemic.
-
-<br>
-
-<div class="d-lg-none alert alert-info">
-  Scroll the plot sideways to view all of the data.
-</div>
-
-<div class="plot_wrapper">
-  <div class="w-100" id="total-number"></div>
-</div> -->
-
 ## Weekly serology tests
 
 The number of SARS-CoV-2 serology tests completed by the SciLifeLab Autoimmunity and Serology Profiling unit each week, divided according to whether tests were positive, negative, or research & development (R&D).
@@ -56,7 +42,7 @@ The number of SARS-CoV-2 serology tests completed by the SciLifeLab Autoimmunity
   <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
-**Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+<!-- **Download the data:** [The number of R&D, negative, and positive tests done per week](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv) -->
 
 **Code used to produce plot:** [Script to produce plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/weekly-serology-tests.py).
 
@@ -72,7 +58,7 @@ The cumulative number of positive, negative, and research & development (R&D) SA
   <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
-**Download the data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+<!-- **Download the data:** [The number of R&D, negative, and positive tests done per week](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv) -->
 
 **Code used to produce plot:** [Script to produce plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/cumulative-serology-tests.py).
 
diff --git a/content/svenska/dashboards/serology-statistics.md b/content/svenska/dashboards/serology-statistics.md
index 1132af44..43823b48 100644
--- a/content/svenska/dashboards/serology-statistics.md
+++ b/content/svenska/dashboards/serology-statistics.md
@@ -25,20 +25,6 @@ Serologiska tester innebär att kroppsvätskor testas för förekomst av antikro
 
 <div class="alert alert-info">Senaste uppdatering: {{% serology_date_modified %}}.</div>
 
-<!-- ## Number of serology tests completed
-
-The below plot shows the total number (sum total) of serology tests related to SARS-CoV-2 completed by the SciLifeLab Autoimmunity and Serology Profiling unit since the beginning of the pandemic.
-
-<br>
-
-<div class="d-lg-none alert alert-info">
-  Scroll the plot sideways to view all of the data.
-</div>
-
-<div class="plot_wrapper">
-  <div class="w-100" id="total-number"></div>
-</div> -->
-
 ## Serologiska tester per vecka
 
 Antalet SARS-CoV-2 serologitester som SciLifeLab Autoimmunity and Serology Profiling-enheten genomförde varje vecka, uppdelat efter om testerna var positiva, negativa eller inom forskning och utveckling (R&D).
@@ -51,9 +37,9 @@ Antalet SARS-CoV-2 serologitester som SciLifeLab Autoimmunity and Serology Profi
   <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/weekly_serology_tests.json" height="550px" >}}</div>
 </div>
 
-**Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+<!-- **Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv) -->
 
-**Kod som används för att producera plot:** [Skript för att producera plot](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/weekly-serology-tests.py).
+**Källkod som används för att skapa grafen:** [Källkod](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/weekly-serology-tests.py).
 
 ## Kumulativa serologiska tester
 
@@ -67,9 +53,9 @@ Det kumulativa antalet positiva, negativa och forsknings- och utvecklingstester
   <div class="table-responsive" style="min-width: 800px">{{< plotly json="https://blobserver.dc.scilifelab.se/blob/cumulative_serology_tests.json" height="550px" >}}</div>
 </div>
 
-**Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv)
+<!-- **Ladda ner data:** [Serology-testing-statistics-dataset-20202021.csv](https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv) -->
 
-**Kod som används för att producera plot:** [Skript för att producera plot]](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/cumulative-serology-tests.py).
+**Källkod som används för att skapa grafen:** [Källkod](https://github.com/ScilifelabDataCentre/pathogens-portal-visualisations/blob/main/serology/cumulative-serology-tests.py).
 
 #### Om serologisk testning vid enheten för Autoimmunity and Serology Profiling
 

From 6d5ffb76b873a0fcaed68d3148c0a27221776b70 Mon Sep 17 00:00:00 2001
From: LianeHughes <68756672+LianeHughes@users.noreply.github.com>
Date: Fri, 28 Jun 2024 08:26:51 +0200
Subject: [PATCH 11/15] add reference from Kaden group

---
 content/english/dashboards/variants_region_uppsala.md | 2 ++
 content/svenska/dashboards/variants_region_uppsala.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/content/english/dashboards/variants_region_uppsala.md b/content/english/dashboards/variants_region_uppsala.md
index 8e5cd63e..ee7260f4 100644
--- a/content/english/dashboards/variants_region_uppsala.md
+++ b/content/english/dashboards/variants_region_uppsala.md
@@ -79,6 +79,8 @@ Use the **’Deselect all lineages’ button** to clear data from all lineages f
 
 ## Publications
 
+Cumlin, T., Karlsson, I., Haars, J., Rosengren, M., Lennerstrand, J., Pimushyna, M., Feuk, L., Ladenvall, C., Kaden, R. (2024). SARS-CoV-2 to Global Preparedness: A Graphical Interface for Standardised High-Throughput Bioinformatics Analysis in Pandemic Scenarios and Surveillance of Drug Resistance. _Int. J. Mol. Sci._, **25**, 6645. DOI: [10.3390/ijms25126645](https://doi.org/10.3390/ijms25126645).
+
 Haars, J., Palanisamy, N., Wallin, F., Mölling, P., Lindh, J., Sundqvist, M., Ellström, P., Kaden, R., Lennerstrand, J. (2023). Prevalence of SARS-CoV-2 Omicron Sublineages and Spike Protein Mutations Conferring Resistance against Monoclonal Antibodies in a Swedish Cohort during 2022–2023. _Microorganisms_, **11**, 2417. DOI: [10.3390/microorganisms11102417](https://doi.org/10.3390/microorganisms11102417).
 
 Mannsverk, S., Bergholm, J., Palanisamy, N., Ellström, P., Kaden, R., Lindh, J., Lennerstrand, J. (2022). SARS-CoV-2 variants of concern and spike protein mutational dynamics in a Swedish cohort during 2021, studied by Nanopore sequencing. _Virology Journal_, **19**, 164. DOI: [10.1186/s12985-022-01896-x](https://doi.org/10.1186/s12985-022-01896-x).
diff --git a/content/svenska/dashboards/variants_region_uppsala.md b/content/svenska/dashboards/variants_region_uppsala.md
index 920438af..4bca00ad 100644
--- a/content/svenska/dashboards/variants_region_uppsala.md
+++ b/content/svenska/dashboards/variants_region_uppsala.md
@@ -79,6 +79,8 @@ Använd knappen **'Deselect all lineages'** för att rensa bort data från alla
 
 ## Publikationer
 
+Cumlin, T., Karlsson, I., Haars, J., Rosengren, M., Lennerstrand, J., Pimushyna, M., Feuk, L., Ladenvall, C., Kaden, R. (2024). SARS-CoV-2 to Global Preparedness: A Graphical Interface for Standardised High-Throughput Bioinformatics Analysis in Pandemic Scenarios and Surveillance of Drug Resistance. _Int. J. Mol. Sci._, **25**, 6645. DOI: [10.3390/ijms25126645](https://doi.org/10.3390/ijms25126645).
+
 Haars, J., Palanisamy, N., Wallin, F., Mölling, P., Lindh, J., Sundqvist, M., Ellström, P., Kaden, R., Lennerstrand, J. (2023). Prevalence of SARS-CoV-2 Omicron Sublineages and Spike Protein Mutations Conferring Resistance against Monoclonal Antibodies in a Swedish Cohort during 2022–2023. _Microorganisms_, **11**, 2417. DOI: [10.3390/microorganisms11102417](https://doi.org/10.3390/microorganisms11102417).
 
 Mannsverk, S., Bergholm, J., Palanisamy, N., Ellström, P., Kaden, R., Lindh, J., Lennerstrand, J. (2022). SARS-CoV-2 variants of concern and spike protein mutational dynamics in a Swedish cohort during 2021, studied by Nanopore sequencing. _Virology Journal_, **19**, 164. DOI: [10.1186/s12985-022-01896-x](https://doi.org/10.1186/s12985-022-01896-x).

From 5b33fbe0c9be47d4bc699e5473c683f0ca667776 Mon Sep 17 00:00:00 2001
From: Abdullah Aziz <mister.abdullah.aziz@gmail.com>
Date: Fri, 28 Jun 2024 09:43:11 +0200
Subject: [PATCH 12/15] Adaptive Banner for homepage

---
 layouts/index.html           |  1 +
 layouts/partials/header.html |  3 ++-
 static/js/banner_title.js    | 37 ++++++++++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 static/js/banner_title.js

diff --git a/layouts/index.html b/layouts/index.html
index 87df43fd..01781791 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -341,6 +341,7 @@ <h4 class="mb-1">Events</h4>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
+<script src="/js/banner_title.js"></script>
 
 <script
   src="https://datagraphics.dc.scilifelab.se/graphic/e4c6a7b8bff648a5adaabbdd3d994bf9.js?id=serology"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e78efc3f..bb8a7d23 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,7 +2,8 @@
   style="background-image: linear-gradient(to bottom, rgba(55, 174, 148, 0.52), rgba(55, 174, 148, 0.73)),
          url('{{ if .Params.header_illustration }}{{ .Params.header_illustration }}{{ else }}/img/csm_coronavirus_mc.jpg{{ end }}');">
   <div class="container">
-    <h1>{{ if .IsHome }}
+    <h1 class="{{ if .IsHome }}d-none{{ end }}" id="{{ if .IsHome }}banner1{{ end }}">
+      {{ if .IsHome }}
       {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }}
       {{ else if eq .Parent.Section "highlights_topics" }}
       {{ with .Site.GetPage "/highlights" }}
diff --git a/static/js/banner_title.js b/static/js/banner_title.js
new file mode 100644
index 00000000..12467d34
--- /dev/null
+++ b/static/js/banner_title.js
@@ -0,0 +1,37 @@
+// Fetch the banner title for homepage from the blobserver and update the page title
+document.addEventListener("DOMContentLoaded", async function() {
+    try {
+        // Fetch the banner titles
+        const response = await fetch('https://blobserver.dc.scilifelab.se/blob/freya-banner_titles.json');
+        if (!response.ok) {
+            throw new Error(`Failed to fetch banner titles. Status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        // Get the current language
+        const lang = document.documentElement.lang;
+
+        // Select the title element
+        const titleElement = document.querySelector('h1');
+
+        // Find the title for the 'portal' target
+        const title = data.banner_titles.find(title => title.target === 'portal');
+
+        if (title && title[lang] && title['active']) {
+            // Update the title if it exists and is active
+            titleElement.textContent = title[lang];
+        } else {
+            console.warn('No active title found for the "portal" target.');
+        }
+    } catch (error) {
+        console.error('An error occurred while fetching banner titles:', error);
+    } finally {
+        // Show the hidden banner regardless of whether titles were fetched successfully
+        const banner1 = document.getElementById("banner1");
+        if (banner1) {
+            banner1.classList.remove("d-none");
+        } else {
+            console.warn('Banner element with ID "banner1" not found.');
+        }
+    }
+});

From a6c732a2f91bddb85eeac5929306446e31f79c9a Mon Sep 17 00:00:00 2001
From: Senthilkumar Panneerselvam <senthilkumar.panneerselvam@scilifelab.se>
Date: Mon, 1 Jul 2024 13:42:38 +0200
Subject: [PATCH 13/15] Small tweaks

---
 layouts/index.html           | 44 ++++++++++++++++++++++++++++++++----
 layouts/partials/header.html |  2 +-
 static/js/banner_title.js    | 37 ------------------------------
 3 files changed, 40 insertions(+), 43 deletions(-)
 delete mode 100644 static/js/banner_title.js

diff --git a/layouts/index.html b/layouts/index.html
index e7ccb6cd..5be79c31 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -252,6 +252,34 @@ <h6><a class="btn-white-black"
       req.send(null);
     } // function "getDataFromUrl" ends here
 
+    // Update banner title for homepage from the blobserver
+    function updateBanner(data) {
+      try {
+        // Get the current language
+        const lang = document.documentElement.lang;
+
+        // Find the active title for the 'portal' target
+        const title = data.banner_titles.find(title => title.target === 'pathogens-portal' && title.active);
+        if (title && title[lang]) {
+            const titleElement = document.querySelector('h2#home-banner');
+            titleElement.textContent = title[lang];
+        } else {
+            console.warn('No title found for the language.');
+        }
+      } catch (error) {
+        console.error('An error occurred while updating banner titles:', error);
+      } finally {
+        // Show the hidden banner regardless of whether titles were fetched successfully
+        const banner1 = document.getElementById("home-banner");
+        if (banner1) {
+          banner1.classList.remove("d-none");
+        } else {
+          console.warn('Banner element with ID "home-banner" not found.');
+        }
+      }
+    }; // function updateBanner ends here
+
+    // Add the events fetched from blobserver
     function addEvents(data) {
       var dataArray = data.items, eventList = [];
       // Not interested if the deadline has already passed
@@ -302,11 +330,18 @@ <h4 class="mb-1">Events</h4>
       };
     } // function "addEvents" ends here
 
-    // Call the function to fetch, parse and display events
+    // Call the function to update banner, if any mentioned in blob server
     getDataFromUrl(
-      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Fpathogens_portal_events.json"),
-      addEvents
-    );
+      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Ffreya-banner.json"),
+      updateBanner
+    )
+    // For english site, Call the function to fetch, parse and display events
+    if (document.documentElement.lang === "en") {
+      getDataFromUrl(
+        decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Fpathogens_portal_events.json"),
+        addEvents
+      );
+    };
 
     // Add latest tag to very recent news when content is loaded
     document.querySelectorAll("#news-items-container .small").forEach(
@@ -323,7 +358,6 @@ <h4 class="mb-1">Events</h4>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
-<script src="/js/banner_title.js"></script>
 
 <script
   src="https://datagraphics.dc.scilifelab.se/graphic/e4c6a7b8bff648a5adaabbdd3d994bf9.js?id=serology"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 42ee3412..6da8d71a 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -2,7 +2,7 @@
   style="background-image: linear-gradient(to bottom, rgba(55, 174, 148, 0.52), rgba(55, 174, 148, 0.73)),
          url('{{ if .Params.header_illustration }}{{ .Params.header_illustration }}{{ else }}/img/csm_coronavirus_mc.jpg{{ end }}');">
   <div class="container">
-    <h1 class="{{ if .IsHome }}d-none{{ end }}" id="{{ if .IsHome }}banner1{{ end }}">
+    <h2 {{ if .IsHome }}class="d-none" id="home-banner"{{ end }}>
       {{ if .IsHome }}
       {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }}
       {{ else if eq .Parent.Section "highlights_topics" }}
diff --git a/static/js/banner_title.js b/static/js/banner_title.js
deleted file mode 100644
index 12467d34..00000000
--- a/static/js/banner_title.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// Fetch the banner title for homepage from the blobserver and update the page title
-document.addEventListener("DOMContentLoaded", async function() {
-    try {
-        // Fetch the banner titles
-        const response = await fetch('https://blobserver.dc.scilifelab.se/blob/freya-banner_titles.json');
-        if (!response.ok) {
-            throw new Error(`Failed to fetch banner titles. Status: ${response.status}`);
-        }
-        const data = await response.json();
-
-        // Get the current language
-        const lang = document.documentElement.lang;
-
-        // Select the title element
-        const titleElement = document.querySelector('h1');
-
-        // Find the title for the 'portal' target
-        const title = data.banner_titles.find(title => title.target === 'portal');
-
-        if (title && title[lang] && title['active']) {
-            // Update the title if it exists and is active
-            titleElement.textContent = title[lang];
-        } else {
-            console.warn('No active title found for the "portal" target.');
-        }
-    } catch (error) {
-        console.error('An error occurred while fetching banner titles:', error);
-    } finally {
-        // Show the hidden banner regardless of whether titles were fetched successfully
-        const banner1 = document.getElementById("banner1");
-        if (banner1) {
-            banner1.classList.remove("d-none");
-        } else {
-            console.warn('Banner element with ID "banner1" not found.');
-        }
-    }
-});

From 0be8003bc576a9b360ce87c9e4ad3f66ee990cf6 Mon Sep 17 00:00:00 2001
From: LianeHughes <68756672+LianeHughes@users.noreply.github.com>
Date: Tue, 2 Jul 2024 07:17:34 +0200
Subject: [PATCH 14/15] Eliminate datagraphics links

---
 content/svenska/dashboards/post_covid.md       | 9 ---------
 layouts/index.html                             | 8 --------
 layouts/shortcodes/serology_date_modified.html | 2 +-
 3 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/content/svenska/dashboards/post_covid.md b/content/svenska/dashboards/post_covid.md
index 9795d424..7c2f5d7d 100644
--- a/content/svenska/dashboards/post_covid.md
+++ b/content/svenska/dashboards/post_covid.md
@@ -205,12 +205,3 @@ I vetenskapliga publikationer och medias rapportering används flera olika begre
 ### Aktuell forskning
 
 Ett stort antal vetenskapliga artiklar, fallrapporter och reviews med fokus på postcovid har publicerats under det senaste året (jmfr. [[Dani _et al._ (2020)](https://doi.org/10.7861/clinmed.2020-0896), [Nabavi (2020)](https://doi.org/10.1136/bmj.m3489), [Sudre _et al._ (2021)](https://doi.org/10.1038/s41591-021-01292-y), [Tarybagil _et al._ (2020)](https://doi.org/10.1136/bcr-2020-241485), [Yelin _et al._ (2020)](https://doi.org/10.1016/j.cmi.2020.12.001)). De flesta vetenskapliga artiklar har haft som syfte att identifiera riskfaktorer och faktorer som kan användas för att prediktera individer som kan utveckla postcovid efter den akuta covid-19 infektionen. En nyligen publicerad studie av [Sudre och kollegor](https://doi.org/10.1038/s41591-021-01292-y) har lagt fram en modell för att prediktera individer som riskerar utveckla postcovid utifrån data från [COVID Symptom Study](/data_types/health_data/symptom_study_sweden/). I denna studie självrapporterar deltagarna sina symtom i en app på sin mobiltelefon. Resultaten indikerade att individer som upplevde fler än fem symtom under den första sjukdomsveckan hade högre risk att utveckla kvarstående symptom efter covid-19 (oddskvot = 3,53 (2,76–4,50)). Dessutom visade studien att postcovid var mer sannolikt hos kvinnor och att risken också ökade med ökande ålder och högre BMI. Forskarna bakom studien föreslår att deras prediktionsmodell kan användas för att identifiera individer som riskerar att utveckla postcovid. Dessa resultat kan användas för förebyggande vård och för att utveckla behandlingsmetoder och stöd vid planering av utbildning och rehabilitering.
-
-<script src="https://cdn.jsdelivr.net/npm/vega@5.19.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/d8ccc0a02ad248c2ae7e5910806c3586.js?id=healthcare_contacts_u09_9"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/47b7d864db0840dab7c2ff6f8fffc011.js?id=healthcare_contacts_u08_9"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/a31cdae8f06a4ac08f8970e6dd750c13.js?id=healthcare_contacts_all"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/a483404a5b5146cfa9eaeef29d326388.js?id=diagnosed_age_sex_u09_9"></script>
-<script src="https://datagraphics.dc.scilifelab.se/graphic/ae0a086410ea489484d33035469c334f.js?id=diagnosed_age_sex_u08_9"></script>
diff --git a/layouts/index.html b/layouts/index.html
index 5be79c31..e58a32e0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -359,12 +359,4 @@ <h4 class="mb-1">Events</h4>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
 
-<script
-  src="https://datagraphics.dc.scilifelab.se/graphic/e4c6a7b8bff648a5adaabbdd3d994bf9.js?id=serology"></script>
-<script
-  src="https://datagraphics.dc.scilifelab.se/graphic/93bad55e86ad4b0f97d4d27c77862bc9.js?id=stockholm_wastewater"></script>
-<script
-  src="https://datagraphics.dc.scilifelab.se/graphic/d262787e199b4c9b8fbbaf5f95edb7bc.js?id=malmo_wastewater"></script>
-<script
-  src="https://datagraphics.dc.scilifelab.se/graphic/6d16b18be0d74425b313040c502f29c8.js?id=uppsala_wastewater"></script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/serology_date_modified.html b/layouts/shortcodes/serology_date_modified.html
index a5555b44..921dc761 100644
--- a/layouts/shortcodes/serology_date_modified.html
+++ b/layouts/shortcodes/serology_date_modified.html
@@ -6,6 +6,6 @@
     document.getElementById("last_modified").innerText = String(dataset_info.modified).substring(0,10);
   }
 };
-xmlhttp.open("GET", "https://datagraphics.dc.scilifelab.se/api/dataset/6d6f551abc10413a97a6ab64ebac46bd", true);
+xmlhttp.open("GET", "https://blobserver.dc.scilifelab.se/blob/Serology-testing-statistics-dataset-20202021.csv/info.json", true);
 xmlhttp.send();
 </script>

From b0219c4f653af2c5b06f205bd278777d325bab84 Mon Sep 17 00:00:00 2001
From: Ziip-dev <62331138+Ziip-dev@users.noreply.github.com>
Date: Tue, 2 Jul 2024 13:29:52 +0200
Subject: [PATCH 15/15] Remove vega dependencies from index.html

These are not needed anymore as we have removed datagraphics calls
---
 layouts/index.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index e58a32e0..cfb34d26 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -355,8 +355,4 @@ <h4 class="mb-1">Events</h4>
   }); // Document "DOMContentLoaded" trigger ends here
 </script>
 
-<script src="https://cdn.jsdelivr.net/npm/vega@5.12.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
-<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.8.0"></script>
-
-{{ end }}
\ No newline at end of file
+{{ end }}