208 complete migrations to iconify (#272)

* Minor fixes in documentation.

* 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>

docs_manual/admin_config.rst

@@ -18,14 +18,14 @@ VarFish & Docker Compose
 The recommended (and supported) way to deploy VarFish is using Docker compose.
 The VarFish server and its component are not installed on the system itself but rather a number of Docker containers with fixed Docker images are run and work together.
 The base ``docker-compose.yml`` file starts a fully functional VarFish server.
-Docker Compose supports using so-called override files. 
+Docker Compose supports using so-called override files.
 
 Basically, the mechanism works by providing an ``docker-compose.override.yml`` file that is automatically read at startup when running ``docker-compose up``.
 This file is put into the `.gitignore` so it is not in the ``varfish-docker-compose`` repository but rather created in the checkouts (e.g., manually or using a configuration management tool such as Ansible).
 On startup, Docker Compose will read first the base ``docker-compose.yml`` file.
 It will then read the override file (if it exists) and recursively merge both YAML files with the override file overriding taking precedence over the base file.
 Note that the recursive merging will be done on YAML dicts only, lists will overwritten.
-The mechanism in detail is described in `the offical documentation <https://docs.docker.com/compose/extends/>`__.
+The mechanism in detail is described in `the official documentation <https://docs.docker.com/compose/extends/>`__.
 
 We provide the following files that you can use/combine into the local ``docker-compose.override.yml`` file of your installation.
 
@@ -36,7 +36,7 @@ We provide the following files that you can use/combine into the local ``docker-
 The overall process is to copy any of the ``*.override.yml-*`` files to ``docker-compose.yml`` and adjusting it to your need (e.g., merging with another such file).
 
 Note that you could also explicitely provide multiple override files but we do not consider this further.
-For more information on the override mechanism see `the offical documentation <https://docs.docker.com/compose/extends/>`__.
+For more information on the override mechanism see `the official documentation <https://docs.docker.com/compose/extends/>`__.
 
 The following sections describe the possible adjustment with Docker Compose override files.
 
@@ -93,15 +93,15 @@ SAML Configuration
 ------------------
 
 Besides LDAP configuration, it is also possible to authenticate with existing SAML 2.0 ID Providers (e.g. Keycloak). Since varfish is built
-on top of sodar core, you can also refer to the `sodar-core documentation <https://sodar-core.readthedocs.io/en/latest/app_projectroles_settings.html#saml-sso-configuration-optional>`__ for further help in configuring the ID Providers.  
+on top of sodar core, you can also refer to the `sodar-core documentation <https://sodar-core.readthedocs.io/en/latest/app_projectroles_settings.html#saml-sso-configuration-optional>`__ for further help in configuring the ID Providers.
 
 To enable SAML authentication with your ID Provider, a few steps are necessary. First, add a SAML Client for your ID Provider of choice. The sodar-core documentation features examples for Keycloak. Make sure you have assertion signing turned on and allow redirects to your varfish site.
 The SAML processing URL should be set to the externally visible address of your varfish deployment, e.g. ``https://varfish.example.com/saml2_auth/acs/``.
 
 Next, you need to obtain your metadata.xml aswell as the signing certificate and key file from the ID Provider. Make sure you convert these keys to standard OpenSSL
-format, before starting your varfish instance (you can find more details `here <https://sodar-core.readthedocs.io/en/latest/app_projectroles_settings.html#saml-sso-configuration-optional>`__). 
-If you deploy varfish without docker, you can pass the file paths of your metadata.xml and key pair directly. Otherwise, make sure that you have included them 
-into a single folder and added the corresponding folder to your ``docker-compose.yml`` (or add it as a ``docker-compose-overrrided.yml``), like in the following snippet. 
+format, before starting your varfish instance (you can find more details `here <https://sodar-core.readthedocs.io/en/latest/app_projectroles_settings.html#saml-sso-configuration-optional>`__).
+If you deploy varfish without docker, you can pass the file paths of your metadata.xml and key pair directly. Otherwise, make sure that you have included them
+into a single folder and added the corresponding folder to your ``docker-compose.yml`` (or add it as a ``docker-compose-overrrided.yml``), like in the following snippet.
 
 .. code-block:: yml
 
@@ -110,7 +110,7 @@ into a single folder and added the corresponding folder to your ``docker-compose
       volumes:
         - "/path/to/my/secrets:/secrets:ro"
 
-Then, define atleast the following variables in your docker-compose ``.env`` file (or the environment variables when running the server natively). 
+Then, define atleast the following variables in your docker-compose ``.env`` file (or the environment variables when running the server natively).
 
 ``ENABLE_SAML``
     [Default 0] Enable [1] or Disable [0] SAML authentication
@@ -146,7 +146,7 @@ To set initial user permissions on first login, you can use the following option
 ``SAML_NEW_USER_SUPERUSER_STATUS``
     [Default False] New users are marked superusers (I advise leaving this one alone).
 
-If you encounter any troubles with this rather involved procedure, feel free to take a look at the discussion forums on `github<https://github.com/bihealth/varfish-server/discussions>`__ and open a thread.
+If you encounter any troubles with this rather involved procedure, feel free to take a look at the discussion forums on `github <https://github.com/bihealth/varfish-server/discussions>`__ and open a thread.
 
 -----------------
 Sending of Emails

docs_manual/developer_database.rst

@@ -51,7 +51,9 @@ tads_imr90           258K                      domain annotation
 You can find the ``import_versions.tsv`` file in the root folder of the
 package. This file determines which component (called ``table_group`` and
 represented as folder in the package) gets imported when the import command is
-issued. To exclude a component, simply comment out (``#``) or delete the line.
+issued. To exclude a table, simply comment out (``#``) or delete the line.
+Excluding tables that are not required for development can reduce time and space
+consumption.
 
 A space-consumption-friendly version of the file would look like this::
 
@@ -88,3 +90,8 @@ To perform the import, issue::
 
     $ python manage.py import_tables --tables-path varfish-db-downloader
 
+Performing the import twice will automatically skip tables that are already imported.
+To re-import tables, add the ``--force`` parameter to the command::
+
+    $ python manage.py import_tables --tables-path varfish-db-downloader --force
+

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 style="text-decoration: none" 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 {