Migrated icons to iconify

HISTORY.rst

@@ -23,6 +23,8 @@ End-User Summary
 - Imports via API now are only allowed for projects of type ``PROJECT`` (#237).
 - Fixing ensembl gene link-out to wrong genome build (#156).
 - Added section for developers in manual (#267).
+- Migrated icons to iconify (#208).
+- Bumped chrome-driver version (#208).
 
 Full Change List
 ================
@@ -45,6 +47,8 @@ Full Change List
 - Imports via API now are only allowed for projects of type ``PROJECT`` (#237).
 - Fixing ensembl gene link-out to wrong genome build (#156).
 - Added section for developers in manual (#267).
+- Migrated icons to iconify (#208).
+- Bumped chrome-driver version (#208).
 
 -------
 v0.23.9

cohorts/templates/cohorts/cohort_list.html

@@ -93,7 +93,7 @@ <h4 class="card-header">
                       </a>
                   {% endfor %}
                   {% if not item|check_accessible_cases:user %}
-                    <span class="badge badge-warning"><i class="fa fa-warning"></i> Not all cases are accessible!</span>
+                    <span class="badge badge-warning"><i class="iconify" data-icon="bi:exclamation-circle"></i> Not all cases are accessible!</span>
                   {% endif %}
                 </td>
                 <td>

geneinfo/templates/gene_info/gene_info.html

@@ -78,7 +78,7 @@
           {% for omim_id, omim_names in gene.omim.items %}
             <a href="https://www.omim.org/entry/{{ omim_id }}" target="_blank">
             <span class="badge-group omim-popover"
-                  data-toggle="popover" data-trigger="focus" tabindex="0" title="{% if omim_names.1 %}<ul class='pl-3 pb-0 mb-0'><li>{{ omim_names.1|join:"</li><li>" }}</li></ul>{% else %}<em>No alternative description</em>{% endif %}" data-content="<a href='https://www.omim.org/entry/{{ omim_id }}' target='_blank' class='btn btn-secondary'><i class='fa fa-external-link'></i> View in OMIM</a>" data-html="true">
+                  data-toggle="popover" data-trigger="focus" tabindex="0" title="{% if omim_names.1 %}<ul class='pl-3 pb-0 mb-0'><li>{{ omim_names.1|join:"</li><li>" }}</li></ul>{% else %}<em>No alternative description</em>{% endif %}" data-content="<a href='https://www.omim.org/entry/{{ omim_id }}' target='_blank' class='btn btn-secondary'><i class='iconify' data-icon='fa-solid:external-link-alt'></i> View in OMIM</a>" data-html="true">
             <span class="badge badge-dark">{{ omim_id }}</span>
             <span class="badge badge-secondary">{{ omim_names.0 }}</span></span></a>
           {% endfor %}
@@ -119,7 +119,7 @@
               <th>Exp. # SNVs</th>
               <th>Obs. # SNVs</th>
               <th>Constraint</th>
-              <th>o/e <i class="fa fa-info-circle" data-toggle="tooltip" data-html="true" title="<sup>observed</sup>&frasl;<sub>expected</sub> with 90% CI"></i></th>
+              <th>o/e <i class="iconify" data-icon="fa-solid:info-circle" data-toggle="tooltip" data-html="true" title="<sup>observed</sup>&frasl;<sub>expected</sub> with 90% CI"></i></th>
             </tr>
             {% if gene.exac_constraints %}
             <tr>

svs/templates/svs/_filter_form.html

@@ -107,7 +107,7 @@
                     data-url='{{ submit_button_url }}'
                     data-url-reload='{{ load_data_url }}'
                     {% if object.num_svs == 0 or not variant_set_exists %}disabled{% endif %}>
-              <i class="fa fa-refresh"></i>
+              <i class="iconify" data-icon="mdi:refresh"></i>
               Filter &amp; Display
             </button>
           </div>

svs/templates/svs/filter_form/genotype.html

@@ -44,8 +44,8 @@
         <td>{{ form.get_member_roles|keyvalue:item.patient }}</td>
         <td>{{ item.father|default:"0"|only_source_name }}</td>
         <td>{{ item.mother|default:"0"|only_source_name }}</td>
-        <td><i class="fa fa-fw {% if item.sex == 2 %}fa-venus{% elif item.sex == 1 %}fa-mars{% else %}fa-question{% endif %}"></i></td>
-        <td><i class="fa fa-fw {% if item.affected == 2 %}fa-check color-danger{% elif item.affected == 1 %}fa-times{% else %}fa-question{% endif %}"></i></td>
+        <td><i class="iconify" data-icon="fa-solid:{% if item.sex == 2 %}venus{% elif item.sex == 1 %}mars{% else %}question{% endif %}"></i></td>
+        <td><i class="iconify{% if item.affected == 2 %} color-danger{% endif %}" data-icon="fa-solid:{% if item.affected == 2 %}check{% elif item.affected == 1 %}times{% else %}question{% endif %}"></i></td>
         {% if item.has_gt_entries %}
           <td>{% with x=form.get_genotype_field_names|keyvalue:item.patient|keyvalue:"gt" %}{{ form|keyvalue:x }}{% endwith %}</td>
         {% else %}

svs/templates/svs/filter_result/card.html

@@ -5,7 +5,7 @@
   <td colspan="{{ card_colspan }}">
     <div class="variant-details" data-loaded="false">
       <div class="text-center py-2">
-        <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
+        <i class="iconify spin" data-icon="fa-solid:circle-notch"></i>
       </div>
     </div>
   </td>

svs/templates/svs/filter_result/row_sv.html

@@ -10,7 +10,7 @@
   <td class="clickable toggle-variant-details pl-0 pr-0"
       data-url="{% url "svs:sv-details" project=project.sodar_uuid case=object.sodar_uuid sv=first_entry.sv_uuid %}?database={{ database }}&regulatory_general_padding={{ form.cleaned_data|keyvalue:"regulatory_general_padding" }}"
       data-toggle="collapse" data-target="#variant-details-{{ forloop.counter0 }}" aria-expanded="false" aria-controls="variant-details-{{ forloop.counter0 }}" aria-hidden="true">
-    <i class="fa fa-fw fa-chevron-right"></i>
+    <img src="/icons/fa-solid/chevron-right.svg" />
   </td>
   {# rank #}
   <td class="text-nowrap text-right text-muted">
@@ -20,17 +20,17 @@
   {# bookmark #}
   {% if not training_mode %}
   <td class="bookmark pl-0 pr-0 text-nowrap">
-    <i class="fa fa-fw {% if first_entry.flag_count %}fa-bookmark{% else %}fa-bookmark-o{% endif %} text-muted variant-bookmark"
-       data-sv="{{ first_entry.sv_uuid }}" data-project="{{ project.sodar_uuid }}" data-case="{{ first_entry.case_uuid }}"></i>
-    <i class="fa fa-fw {% if first_entry.comment_count %}fa-comment{% else %}fa-comment-o{% endif %} text-muted variant-comment"
-       data-sv="{{ first_entry.sv_uuid }}" data-project="{{ project.sodar_uuid }}" data-case="{{ first_entry.case_uuid }}"></i>
+    <a href="#" class="variant-bookmark-comment-group" data-sv="{{ first_entry.sv_uuid }}" data-project="{{ project.sodar_uuid }}" data-case="{{ first_entry.case_uuid }}">
+      <img class="text-muted variant-bookmark" src="/icons/fa-{% if first_entry.flag_count %}solid{% else %}regular{% endif %}/bookmark.svg" />
+      <img class="text-muted variant-comment" src="/icons/fa-{% if first_entry.comment_count %}solid{% else %}regular{% endif %}/comment.svg" />
+    </a>
   </td>
   {% endif %}
 
   <td class="text-center text-nowrap">
     {{ first_entry.sv_type }}
     <span>
-      <i class="fa fa-wrench text-muted" data-tooltip="tooltip" title="SV caller: {{ first_entry.caller }}"></i>
+      <i class="iconify text-muted" data-icon="fa-solid:wrench" data-tooltip="tooltip" title="SV caller: {{ first_entry.caller }}"></i>
     </span>
   </td>
   <td style="width: 140px;" class="text-nowrap">

svs/templates/svs/scripts.html

@@ -7,19 +7,20 @@
 
 // we can't employ .click here because the html that it will work on is loaded afterwards.
 $(document).on('click', '.toggle-variant-details', function() {
-  if ($("i", this).hasClass('fa-chevron-right')) {
+  if ($("i", this).attr("src") === "/icons/fa-solid/chevron-right.svg") {
     $($(this).data("target") + " .variant-details").load(
       $(this).data("url"),
-      function(responseText, textStatus, request) {
+      function (responseText, textStatus, request) {
         if (textStatus == "error") {
           console.log("Error during AJAX call: ", request, textStatus, responseText);
         }
       }
     );
+    $("img", this).attr("src", "/icons/fa-solid/chevron-down.svg");
+  }
+  else {
+    $("img", this).attr("src", "/icons/fa-solid/chevron-right.svg");
   }
-  $("i", this).toggleClass('fa-chevron-right');
-  $("i", this).toggleClass('fa-chevron-down');
-
 });
 </script>
 

utility/install_chrome.sh

@@ -5,7 +5,7 @@ echo "Installing Chrome + Driver for UI Testing"
 echo "***********************************************"
 
 # Version
-CHROME_DRIVER_VERSION="89.0.4389.23"
+CHROME_DRIVER_VERSION=96.0.4664.35
 
 # Install dependencies
 sudo apt-get update

utility/install_chrome_gitlab.sh

@@ -5,7 +5,7 @@ echo "Installing Chrome + Driver for UI Testing"
 echo "***********************************************"
 
 # Version
-CHROME_DRIVER_VERSION="89.0.4389.23"
+CHROME_DRIVER_VERSION=96.0.4664.35
 
 # Install dependencies
 apt-get -y install unzip libgconf-2-4 xvfb gtk2-engines-pixbuf

utility/install_vue_dev.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+echo "***********************************************"
+echo "Installing Node.js"
+echo "***********************************************"
+curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+apt-get install -y nodejs
+
+echo "***********************************************"
+echo "Installing Vue CLI and Init"
+echo "***********************************************"
+npm install -g @vue/cli
+npm install -g @vue/cli-init

varfish/static/js/filter_form.js

@@ -221,29 +221,29 @@ function loadBeaconWidget() {
 
 function loadVariantDetails(row, cell, show=false) {
   var url = cell.data("url");
-  var icon = $("i", cell);
+  var icon = $("img", cell);
   var previous_icon = "";
-  var spinner = "fa-spinner fa-spin";
-  if (icon.hasClass("fa-chevron-right")) {
-      previous_icon = "fa-chevron-right";
+  var current_icon = icon.attr("src");
+  if (current_icon === "/icons/fa-solid/chevron-right.svg") {
+      previous_icon = current_icon;
   }
-  else if (icon.hasClass("fa-chevron-down")) {
-      previous_icon = "fa-chevron-down";
+  else if (current_icon === "/icons/fa-solid/chevron-down.svg") {
+      previous_icon = current_icon;
   }
-  icon.removeClass(previous_icon);
-  icon.addClass(spinner);
+  icon.attr("src", "/icons/fa-solid/spinner.svg");
+  icon.addClass("spin");
   $.ajax(
     url,
     {
       success: function (response) {
         row.child(response);
-        icon.removeClass(spinner);
+        icon.removeClass("spin");
         if (show) {
-            icon.addClass("fa-chevron-down");
+            icon.attr("src", "/icons/fa-solid/chevron-down.svg");
             row.child.show();
         }
         else {
-            icon.addClass(previous_icon);
+            icon.attr("src", previous_icon);
         }
         $('[data-toggle="tooltip"]').tooltip({container: "body"});
         $('[data-toggle="popover"]').popover({container: "body"});
@@ -280,18 +280,16 @@ function loadVariantDetails(row, cell, show=false) {
 $(document).on('click', '.toggle-variant-details', function() {
   var row = dt.row($(this).parent());
   var cell = $(this);
-  var icon = $("i", this);
+  var icon = $("img", this);
 
-  // using toggleClass to shorten the code results to erroneous icon behaviour in border cases (e.g. fast opening/closing the details)
+  // using toggleClass to shorten the code results in erroneous icon behaviour in border cases (e.g. fast opening/closing the details)
   if (row.child.isShown()) {
-    icon.removeClass('fa-chevron-down');
-    icon.addClass('fa-chevron-right');
+    icon.attr("src", "/icons/fa-solid/chevron-right.svg");
     row.child.hide();
   }
   else {
     if (row.child() && row.child().length) {
-      icon.removeClass('fa-chevron-right');
-      icon.addClass('fa-chevron-down');
+      icon.attr("src", "/icons/fa-solid/chevron-down.svg");
       row.child.show();
     }
     else {

varfish/static/js/flags_comments.js

@@ -46,8 +46,10 @@ function clickVariantBookmark() {
   // Compile popup template.
   var bookmarkPopupTpl = $.templates("#bookmark-flags-popup");
   // Store handle outmost $(this) for later hiding popup again.
-  var outerThis = $(this).closest(".bookmark").find(".variant-bookmark");
+  var outerThis = $(this);
   var caseUuid = $(this).data("case");
+  var icon_comment = $(this).find(".variant-comment")
+  var icon_bookmark = $(this).find(".variant-bookmark")
   var cell = $(this).closest(".variant-row").find(".toggle-variant-details");
 
   // Get variant description from triggering bookmark icon.
@@ -76,7 +78,7 @@ function clickVariantBookmark() {
     // Setup the form elements so we can use AJAX for them.
     $(html).find(".cancel").click(function(event) {
       event.preventDefault();
-      $(outerThis).popover("hide");
+      outerThis.popover("hide");
     });
     $(html).find(".save").click(function(event) {
       event.preventDefault();  // we will handle everything
@@ -94,14 +96,13 @@ function clickVariantBookmark() {
         dataType: "json",
       }).done(function(data) {
         // successfully updated flags, update bookmark display
-        $(outerThis).removeClass("fa-bookmark fa-bookmark-o");
         if (data["flag_bookmarked"] || data["flag_for_validation"] || data["flag_candidate"] || data["flag_final_causative"]) {
-          $(outerThis).addClass("fa-bookmark");
+          icon_bookmark.attr("src", "/icons/fa-solid/bookmark.svg");
         } else {
-          $(outerThis).addClass("fa-bookmark-o");
+          icon_bookmark.attr("src", "/icons/fa-regular/bookmark.svg");
         }
         // update row color
-        var variantRow = $(outerThis).closest(".variant-row");
+        var variantRow = outerThis.closest(".variant-row");
         variantRow.removeClass("variant-row-positive variant-row-uncertain variant-row-negative variant-row-empty variant-row-wip");
         variantRow.addClass("variant-row-" + summarizeFlags(data));
         let dtrow = dt.row(variantRow);
@@ -127,10 +128,8 @@ function clickVariantBookmark() {
           dataType: "json",
         }).done(function(data) {
           // successfully updated flags, update bookmark display
-          var commentTag = $(outerThis).closest(".bookmark").find(".variant-comment");
-          commentTag.removeClass("fa-comment fa-comment-o");
-          commentTag.addClass("fa-comment");
-          let dtrow = dt.row($(outerThis).closest(".variant-row"));
+          icon_comment.attr("src", "/icons/fa-solid/comment.svg");
+          let dtrow = dt.row(outerThis.closest(".variant-row"));
           if (structural_or_small == "small" && dtrow.child() && dtrow.child().length) {
             loadVariantDetails(dtrow, cell);
           }
@@ -141,7 +140,7 @@ function clickVariantBookmark() {
       }
 
       // Remove pop-over
-      $(outerThis).popover('hide').popover("dispose");
+      outerThis.popover('hide').popover("dispose");
     });
 
     outerThis.popover({
@@ -212,7 +211,7 @@ function clickVariantBookmark() {
 
 // Hide popover when clicking outside of popover.
 $('body').on('click', function (e) {
-    $('.variant-bookmark, .variant-comment, .hgmd-popover, .variant-acmg').each(function () {
+    $('.variant-bookmark-comment-group, .hgmd-popover, .variant-acmg').each(function () {
         // hide any open popovers when the anywhere else in the body is clicked
         if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
             $(this).popover('hide');
@@ -425,6 +424,6 @@ function clickVariantAcmgRating() {
   });
 }
 
-$(document).on("click", ".variant-bookmark", clickVariantBookmark);
-$(document).on("click", ".variant-comment", clickVariantBookmark);
+$(document).on("click", ".variant-bookmark-comment-group", clickVariantBookmark);
+//$(document).on("click", ".variant-comment", clickVariantBookmark);
 $(document).on("click", ".variant-acmg", clickVariantAcmgRating);

varfish/static/js/panelapp.js

@@ -69,7 +69,7 @@ $(document).ready(function() {
           console.log("FAILED", jqXHR, textStatus, errorThrown);
           panelsList.html($(
             "<a class=\"dropdown-item disabled\" href=\"#\">\n" +
-            "<i class=\"fa fa-times fa-fw\"></i> Loading Panels failed!</a>"
+            "<i class=\"iconify\" data-icon=\"fa-solid:times\"></i> Loading Panels failed!</a>"
           ))
         }
       });

varfish/static/js/project.js

@@ -90,7 +90,7 @@ $(document).ready(function() {
     }
     $('div.sodar-alert-container').prepend(
       '<div class="alert alert-danger sodar-alert-top">' +
-      '<i class="fa fa-exclamation-triangle"></i> ' +
+      '<i class="iconify" data-icon="bi:exclamation-circle"></i> ' +
       'VarFish doesn\'t support Microsoft Internet Explorer. We recommend using ' +
       '<a href="https://www.mozilla.org/firefox/new" target="_blank">Mozilla Firefox</a> or ' +
       '<a href="https://www.google.com/chrome" target="_blank">Google Chrome</a>.' +
@@ -112,7 +112,7 @@ $(document).ready(function() {
 
     $('div.sodar-alert-container').prepend(
       '<div class="alert alert-danger sodar-alert-top">' +
-      '<i class="fa fa-exclamation-triangle"></i> ' +
+      '<i class="iconify" data-icon="bi:exclamation-circle"></i> ' +
       'You have assumed the identity of another account! <a href="' + su_escape_url + '">Escape</a>' +
       '</div>')
   }

varfish/static/js/state_machine.js

@@ -125,19 +125,19 @@ function displayError(msg) {
   resultsTable.empty();
   resultsTable.html(
     '<div class="alert alert-danger">' +
-    '<i class="fa fa-exclamation-triangle"></i> ' +
+    '<i class="iconify" data-icon="bi:exclamation-circle"></i> ' +
     '<strong>' + msg + '</strong>' +
     '</div>'
   );
 }
 
 // Helper function to switch the state of the submit button (make it "Submit").
 function animateFilterButtonSubmit() {
-  let icon = $("i", filterButton).clone();
+  let icon = $("svg", filterButton).clone();
   filterButton.text(" Filter & Display");
   icon.prependTo(filterButton);
   filterButton.attr("data-event-type", EVENT_SUBMIT);
-  icon.removeClass("fa-spin");
+  icon.removeClass("spin");
 }
 
 function toggleLogs() {
@@ -156,22 +156,22 @@ function toggleLogs() {
 
 // Helper function to switch the state of the submit button (make it "Cancel").
 function animateSubmitButtonCancel() {
-  let icon = $("i", filterButton).clone();
+  let icon = $("svg", filterButton).clone();
   filterButton.text(" Cancel");
   icon.prependTo(filterButton);
   filterButton.attr("data-event-type", EVENT_CANCEL);
   resultsTable.empty();
   resultsTable.html(
     '<div class="alert alert-info">' +
-    '<i class="fa fa-circle-o-notch fa-spin"></i> ' +
+    '<i class="iconify spin" data-icon="fa-solid:circle-notch"></i> ' +
     '<strong id="infoBoxTitle">Loading ...</strong> <button id="togglelogs" class="ml-3 btn btn-sm btn-info" onclick="toggleLogs()">Show Logs</button>' +
     '<div id="logger" class="d-none"></div>' +
     '</div>'
   );
   if (getCookie("logs") == "1") {
     toggleLogs();
   }
-  icon.addClass("fa-spin");
+  icon.addClass("spin");
 }
 
 function setInfoBoxTitle(title) {
@@ -344,7 +344,7 @@ function handleEventStateGetJobId(eventType, event) {
     resultsTable.html(
       '<div class="alert alert-info">' +
       '  <strong>No query has been started yet.</strong><br>' +
-      '   Click <span class="badge badge-primary"><i class="fa fa-refresh"></i> Filter & Display</span> to start filtering and create results to display here.' +
+      '   Click <span class="badge badge-primary"><i class="iconify" data-icon="mdi:refresh"></i> Filter & Display</span> to start filtering and create results to display here.' +
       '   You may want to adjust the filter settings to your needs first.' +
       '</div>'
     );

varfish/static/js/variant_comments.js

@@ -95,7 +95,7 @@ function commentSubmit() {
     </span>
     <em>${data["comment"]}</em>
     <a href="#" class="pl-2 text-secondary comment-button-edit"><i class="iconify" data-icon="mdi:pencil"></i></a>
-    <a href="#" class="pl-2 text-secondary comment-button-delete"><i class="fa fa-times-circle"></i></a>
+    <a href="#" class="pl-2 text-secondary comment-button-delete"><i class="iconify" data-icon="fa-solid:times-circle"></i></a>
   </div>
   <div id="edit-comment-${data["sodar_uuid"]}" style="display: none;">
     <form>