Merge pull request #8 from ScilifelabDataCentre/look-improvements

Look improvements
ScilifelabDataCentre · Mar 8, 2022 · ba168c0 · ba168c0
2 parents 354cca9 + c0ab4a5
commit ba168c0
Show file tree

Hide file tree

Showing 23 changed files with 117 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+# Hugo default output directory
+/public
+
+# more Hugo stuff
+.hugo_build.lock
+
+# OSX
+.DS_Store
+
+# backups
+*~
+\#*\#
diff --git a/content/collections/001/_index.md b/content/collections/001/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 1
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/ostergotland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1001

diff --git a/content/collections/084/_index.md b/content/collections/084/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 84
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/vastmanland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1084

diff --git a/content/collections/136/_index.md b/content/collections/136/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 136
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/region-skane/
+website_url: hhttps://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description: Regionalt biobankscentrum, Södra sjukvårdsregionen
 address:
 contact: c19dp:contact:SE_1136

diff --git a/content/collections/325/_index.md b/content/collections/325/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 325
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/halland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1325

diff --git a/content/collections/398/_index.md b/content/collections/398/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 398
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/jamtland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1398

diff --git a/content/collections/454/_index.md b/content/collections/454/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 454
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/orebro/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1454

diff --git a/content/collections/472/_index.md b/content/collections/472/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 472
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/Vasterbotten/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description: Biobanken Norr
 address:
 contact: c19dp:contact:SE_1472

diff --git a/content/collections/488/_index.md b/content/collections/488/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 488
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/kalmar/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1488

diff --git a/content/collections/490/_index.md b/content/collections/490/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 490
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/kalmar/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1490

diff --git a/content/collections/491/_index.md b/content/collections/491/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 491
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/kalmar/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1491

diff --git a/content/collections/827/_index.md b/content/collections/827/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 827
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/uppsala/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1827

diff --git a/content/collections/868/_index.md b/content/collections/868/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 868
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/jonkoping/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description: Laboratoriemedicins kombinationsbiobank
 address:
 contact: c19dp:contact:SE_1868

diff --git a/content/collections/872/_index.md b/content/collections/872/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 872
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/sormland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1872

diff --git a/content/collections/873/_index.md b/content/collections/873/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 873
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/dalarna/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1873

diff --git a/content/collections/890/_index.md b/content/collections/890/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 890
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/vastra-gotaland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description: Biobank Väst
 address:
 contact: c19dp:contact:SE_1890

diff --git a/content/collections/914/_index.md b/content/collections/914/_index.md
@@ -7,13 +7,13 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 914
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/stockholm/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description: Stockholms Medicinska Biobank
 address:
 contact: c19dp:contact:SE_1914
 contact_priority: 1
 collections:
-email: biobankstockholm.karolinska@sll.se
+email: biobankstockholm@regionstockholm.se
 aliases:
     /menu/main/app-scd/biobank/c19dp:biobank:SE_1914
 ---
diff --git a/content/collections/924/_index.md b/content/collections/924/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 924
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/varmland/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1924

diff --git a/content/collections/984/_index.md b/content/collections/984/_index.md
@@ -7,7 +7,7 @@ country: SE
 biobank_sverige: TRUE
 ivo_regnum: 984
 bbmri_id:
-website_url: https://biobanksverige.se/kont/landstingregioner/gavleborg/
+website_url: https://biobanksverige.se/kontakta-oss/biobankssamordnare-och-nej-talonger/
 description:
 address:
 contact: c19dp:contact:SE_1984

diff --git a/layouts/collections/list.html b/layouts/collections/list.html
@@ -104,7 +104,7 @@ <h5>Contact information</h5>
                 <div class="row">
                   <div class="col"><span aria-hidden="true" class="fa fa-fw fa-globe mr-1"></span><a href="{{ .Params.website_url }}" target="_blank">Biobank homepage</a></div>
                 </div>{{ end }}
-                {{ if .Params.biobank_sverige }}<div class="mt-2"><b>Part of:</b><br><a href="https://biobanksverige.se/"><img src="https://biobanksverige.se/wp-content/themes/nbr/img/biobanksverige-logo.jpg" rel="Part of Biobank Sverige" style="height: 60px;"></a></div>{{ end }}
+                {{ if .Params.biobank_sverige }}<div class="mt-2"><b>Part of:</b><br><a href="https://biobanksverige.se/"><img src="https://covid19dataportal.se/img/logos/biobanksverige_logo.jpg" rel="Part of Biobank Sverige" style="height: 60px;"></a></div>{{ end }}
               </div>
             </div>
           </div>

diff --git a/layouts/index.html b/layouts/index.html
@@ -93,9 +93,10 @@
       <div class="col-md-12">
         <div class="d-md-none alert alert-info small">Scroll the table sideways to view all columns.</div>
         <div class="table-responsive">
-          <table class="table table-hover" width="100%">
+          <table id="collections" class="table table-hover" width="100%">
             <thead class="thead-light">
               <tr>
+                <th scope="col">Biobank</th>
                 <th scope="col">Name</th>
                 <th scope="col">Type</th>
                 <th scope="col">Size</th>
@@ -106,7 +107,8 @@
             <tbody>
               {{ range sort .Site.RegularPages ".Parent.Params.name" "asc" }}
               <tr>
-                <td><small><b>{{ .Parent.Params.name }}:</b></small><br><h5><a href="{{ .RelPermalink }}">{{ .Params.name }}</a></h5></td>
+                <td>{{ .Parent.Params.acronym }}</td>
+                <td><h6><a href="{{ .RelPermalink }}">{{ .Params.name }}</a></h6></td>
                 <td><span class="m-1 badge badge-secondary">{{ .Params.collection_category }}</span></td>
                 <td><span class="m-1 badge badge-success">{{ if eq .Params.order_of_magnitude 0 }}
                               &#60;10
@@ -150,31 +152,69 @@
 
 <script>
   $(document).ready(function () {
-    var table = $('table.table').DataTable({
+    var collapsedGroups = {};
+    var top = '';
+
+    var table = $('#collections').DataTable({
       "sDom": '<"top row"<"col-md"i>>rt<"bottom row"<"col-md"l><"col-md"p>><"clear">',
       "columnDefs": [{ "orderable": false, "targets": [2, 3] },
-      {"targets": [4],  "visible": false}],
-        "language": {
-    "lengthMenu": "Show _MENU_ collections per page",
-    "zeroRecords": "Nothing found.",
-    "info": "Showing _START_ to _END_ of _TOTAL_ collections",
-    "infoEmpty": "No collections found",
-    "infoFiltered": "(filtered from _MAX_ collections in total)",
-    "search": "Search:",
-    "paginate": {
-      "first": "First",
-      "last": "Last",
-      "next": "»",
-      "previous": "«"
-    }
-  }
-    }
-
-  );
+        {"targets": [0,5],  "visible": false}],
+      "language": {
+      "lengthMenu": "Show _MENU_ collections per page",
+      "zeroRecords": "Nothing found.",
+      "info": "Showing _START_ to _END_ of _TOTAL_ collections",
+      "infoEmpty": "No collections found",
+      "infoFiltered": "(filtered from _MAX_ collections in total)",
+      "search": "Search:",
+      "paginate": {
+        "first": "First",
+        "last": "Last",
+        "next": "»",
+        "previous": "«"
+        }
+      },
+      rowGroup: {
+          dataSrc: [0],
+          startRender: function(rows, group, level) {
+              var all;
+
+              if (level === 0) {
+                  top = group;
+                  all = group;
+              } else {
+                  // if parent collapsed, nothing to do
+                  if (!!collapsedGroups[top]) {
+                      return;
+                  }
+                  all = top + group;
+              }
+
+              var collapsed = !!collapsedGroups[all];
+
+              rows.nodes().each(function(r) {
+                  r.style.display = collapsed ? 'none' : '';
+              });
+
+              // Add category name to the <tr>. NOTE: Hardcoded colspan
+              return $('<tr/>')
+                  .append('<td colspan="6"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> ' + group + ' (' + rows.count() + '):</td>')
+                  .attr('data-name', all)
+                  .toggleClass('collapsed', collapsed);
+          }
+      }
+
+      }
+      );
+
+    $('#collections tbody').on('click', 'tr.group-start', function () {
+         var name = $(this).data('name');
+         collapsedGroups[name] = !collapsedGroups[name];
+         table.draw(false);
+     });
 
   // Search field filter
   $('#nameField').on('keyup', function () {
-    table.column(0).search( this.value ).draw();
+    table.column(1).search( this.value ).draw();
   } )
 
   // Checkbox filters
@@ -185,28 +225,27 @@
       return this.value;
     }).get().join('|');
 
-    table.column(1).search(collectiontypes, false, true, true).draw(false);
+    table.column(2).search(collectiontypes, false, true, true).draw(false);
 
     // Materials filter
     var materials = $('input:checkbox[name="materials"]:checked').map(function () {
       return this.value;
     }).get().join('|');
 
-    table.column(3).search(materials, false, true, true).draw(false);
+    table.column(4).search(materials, false, true, true).draw(false);
 
     // Diagnoses filter
     var diagnoses = $('input:checkbox[name="diagnoses"]:checked').map(function () {
       return this.value;
     }).get().join('|');
 
-    table.column(4).search(diagnoses, false, true, true).draw(false);
+    table.column(5).search(diagnoses, false, true, true).draw(false);
 
   });
 
 } );
 </script>
 
-<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
 <script type="text/javascript" charset="utf8"
   src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
 

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -24,8 +24,15 @@
   <!-- Additional local CSS -->
   <link rel="stylesheet" href="/css/style.css">
 
+  {{ if .IsHome }}
   <!-- DataTables -->
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
 
+  <!-- requirements for DataTables rowGroup, for grouping rows -->
+  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
+  <script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
+  <!-- <link href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" /> -->
+  {{ end }}
+
 </head>
diff --git a/static/css/style.css b/static/css/style.css
@@ -7,3 +7,16 @@
   color: white;
   text-decoration: none;
 }
+
+.group {
+  color: rgba(77, 77, 77, 0.9);
+  font-weight: 700;
+  font-size: 1.2em;
+  background-color: rgba(233, 235, 238, 0.6);
+}
+
+.group .fa-caret-right { display: none; }
+.group .fa-caret-down { display: inline; }
+
+.group.collapsed .fa-caret-right { display: inline; }
+.group.collapsed .fa-caret-down { display: none; }