From 37f86273e2a4023a2575744e287f8e480f26b9a4 Mon Sep 17 00:00:00 2001
From: Mikko Nieminen <mikko.nieminen@bih-charite.de>
Date: Fri, 11 Aug 2023 16:44:52 +0200
Subject: [PATCH] update tour help (wip) (#1583), fix #1751

---
 .../templates/landingzones/_zone_item.html    |   9 +-
 .../templates/landingzones/project_zones.html |  72 ++++++---
 .../samplesheets/irods_requests.html          | 145 +++++++++++++++---
 .../samplesheets/project_sheets.html          |  38 ++---
 4 files changed, 202 insertions(+), 62 deletions(-)

diff --git a/landingzones/templates/landingzones/_zone_item.html b/landingzones/templates/landingzones/_zone_item.html
index 7c19ca33..27618f37 100644
--- a/landingzones/templates/landingzones/_zone_item.html
+++ b/landingzones/templates/landingzones/_zone_item.html
@@ -19,6 +19,7 @@
   <td class="sodar-lz-zone-title">
     <div class="sodar-overflow-container">
       <span title="{{ zone.assay.get_display_name }}"
+            class="sodar-lz-zone-assay-icon"
             data-tooltip="tooltip" data-placement="top">
         <i class="iconify text-danger" data-icon="mdi:table-large"></i>
       </span>
@@ -34,9 +35,11 @@
         </a>
       {% endif %}
       {% if zone.description %}
-        {% get_zone_desc_html zone as zone_desc_html %}
-        {% get_info_link zone_desc_html html=True as info_link %}
-        {{ info_link | safe }}
+        <span class="sodar-lz-zone-description-link">
+          {% get_zone_desc_html zone as zone_desc_html %}
+          {% get_info_link zone_desc_html html=True as info_link %}
+          {{ info_link | safe }}
+        </span>
       {% endif %}
       {% if zone.configuration %}
         <span class="badge badge-pill badge-success">{% get_config_legend zone %}</span>
diff --git a/landingzones/templates/landingzones/project_zones.html b/landingzones/templates/landingzones/project_zones.html
index 814c650b..509df8d8 100644
--- a/landingzones/templates/landingzones/project_zones.html
+++ b/landingzones/templates/landingzones/project_zones.html
@@ -95,8 +95,7 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
   {% if not zone_access_disabled and investigation and can_create_zone %}
     <div class="ml-auto">
       <a href="{% url 'landingzones:create' project=project.sodar_uuid %}"
-         class="btn btn-primary"
-         role="button">
+         class="btn btn-primary" role="button" id="sodar-lz-btn-create-zone">
        <i class="iconify" data-icon="mdi:plus-thick"></i> Create Zone
       </a>
     </div>
@@ -177,9 +176,9 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
 
     tour.addStep('zone_info', {
         title: 'Landing Zones',
-        text: 'In this app you are able to create and manage personal ' +
-              'landing zones for uploading data to the project sample ' +
-              'repository in iRODS.',
+        text: 'In this view you can create and manage personal landing zones ' +
+              'for uploading data to the project sample data repository in ' +
+              'iRODS.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
@@ -198,7 +197,7 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
 
     if ($('#sodar-lz-zone-list-own').length) {
         tour.addStep('own_zones', {
-            title: 'Your Own Zones',
+            title: 'Your Zones',
             text: 'Your own landing zones are listed in this table.',
             attachTo: '#sodar-lz-zone-list-own top',
             advanceOn: '.docs-link click',
@@ -232,8 +231,9 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
     if ($('.sodar-lz-table').length) {
         tour.addStep('zone_title', {
             title: 'Zone Title',
-            text: 'The title of each stone is shown in this column. This ' +
-                  'takes the form of a timestamp and an arbitrary suffix.',
+            text: 'The title of each stone is shown in the leftmost column. ' +
+                  'The title is presented in the form of a time stamp of the ' +
+                  'creation date and an optional text idenfitier.',
             attachTo: '.sodar-lz-list-header-title top',
             advanceOn: '.docs-link click',
             showCancelLink: true
@@ -241,24 +241,48 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
 
         tour.addStep('zone_assay', {
             title: 'Zone Assay',
-            text: 'Each landing zone is specific to one assay within the ' +
-                  'project studies.',
-            attachTo: '.sodar-lz-list-header-assay top',
+            text: 'Each landing zone is specific to an assay within the ' +
+                  'project studies. This assay icon links to the assay in ' +
+                  'the Sample Sheets app.',
+            attachTo: '.sodar-lz-zone-assay-icon right',
             advanceOn: '.docs-link click',
             showCancelLink: true
         });
 
+        if ($('.sodar-lz-zone-description-link').length) {
+            tour.addStep('zone_description', {
+            title: 'Zone Description',
+            text: 'Clicking on this icon will display an optional ' +
+                'description for the landing zone.',
+            attachTo: '.sodar-lz-zone-description-link right',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+          });
+        }
+
         tour.addStep('zone_status', {
             title: 'Zone Status',
             text: 'The status of each landing zone can be seen in this ' +
                   'column. Available actions depend on the current status. ' +
                   '"ACTIVE" zones are ones in which you can freely upload ' +
-                  'and modify files.',
+                  'and modify files. "FAILED" zones have experienced ' +
+                  'problems in validation or transfer, which you can now ' +
+                  'correct.',
             attachTo: '.sodar-lz-list-header-status top',
             advanceOn: '.docs-link click',
             showCancelLink: true
         });
 
+        tour.addStep('zone_status_info', {
+            title: 'Zone Status Information',
+            text: 'Detailed information about the landing zone status can be ' +
+                  'found here along with current zone file size and file ' +
+                  'count.',
+            attachTo: '.sodar-lz-list-header-info top',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+
         tour.addStep('zone_links', {
             title: 'iRODS Links for Zone',
             text: 'Links for iRODS access for available zone are presented ' +
@@ -268,16 +292,28 @@ <h3><i class="iconify" data-icon="mdi:briefcase-upload"></i> Landing Zones</h3>
             showCancelLink: true
         });
 
-        tour.addStep('zone_edit', {
-            title: 'Zone Specific Operations',
-            text: 'In this column, you can trigger the data validation and ' +
-                  'moving operation for moving your landing zone content ' +
-                  'into the project sample repository. Here you can also ' +
-                  'delete unwanted landing zones.',
+        tour.addStep('zone_dropdown', {
+            title: 'Zone Dropdown',
+            text: 'From the zone dropdown, you can trigger the data ' +
+                  'validation and moving operation for moving your landing ' +
+                  'zone content into the project sample repository. Here you ' +
+                  'can also delete unwanted landing zones.',
             attachTo: '.sodar-lz-zone-edit left',
             advanceOn: '.docs-link click',
             showCancelLink: true
         });
     }
+
+    // Create zone
+    if ($('#sodar-lz-btn-create-zone').length) {
+        tour.addStep('zone_create', {
+            title: 'Create Zone',
+            text: 'This button takes you to the landing zone creation form ' +
+                  'in which you can set up a new zone.',
+            attachTo: '#sodar-lz-btn-create-zone left',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+    }
   </script>
 {% endblock javascript %}
diff --git a/samplesheets/templates/samplesheets/irods_requests.html b/samplesheets/templates/samplesheets/irods_requests.html
index a3deb045..351aaa54 100644
--- a/samplesheets/templates/samplesheets/irods_requests.html
+++ b/samplesheets/templates/samplesheets/irods_requests.html
@@ -12,7 +12,6 @@
 {% block css %}
   {{ block.super }}
   <style type="text/css">
-
     table#sodar-ss-request-table thead tr th:nth-child(3),
     table#sodar-ss-request-table tbody tr td:nth-child(3),
     table#sodar-ss-request-table thead tr th:nth-child(4),
@@ -62,23 +61,47 @@
 {% endblock css %}
 
 {% block projectroles_extend %}
-{% has_perm 'samplesheets.manage_sheet' request.user project as can_manage_request %}
+{% has_perm 'samplesheets.manage_sheet' request.user project as can_manage_requests %}
 
 <div class="row sodar-subtitle-container">
   <h3>iRODS Delete Requests</h3>
-    <div class="ml-auto">
-      <a href="{% url 'samplesheets:project_sheets' project=project.sodar_uuid %}"
-         class="btn btn-secondary mr-1" role="button">
-        <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Project Sheets
-      </a>
-      {% include 'samplesheets/_list_buttons.html' with project=project folder=folder up=False %}
+  <div class="ml-auto">
+    <a href="{% url 'samplesheets:project_sheets' project=project.sodar_uuid %}"
+       class="btn btn-secondary mr-1" role="button"
+       id="sodar-ss-btn-back">
+      <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Project Sheets
+    </a>
+    <div class="btn-group ml-auto" id="sodar-ss-request-ops-dropdown">
+      {% csrf_token %}
+      <button class="btn btn-primary dropdown-toggle"
+              type="button" data-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+        Request Operations
+      </button>
+      <div class="dropdown-menu dropdown-menu-right">
+        <a href="{% url 'samplesheets:irods_request_create' project=project.sodar_uuid %}"
+           class="dropdown-item" role="button">
+          <i class="iconify" data-icon="mdi:plus-thick"></i> Create Request
+        </a>
+        <a class="dropdown-item" id="sodar-ss-accept-selected"
+           href="javascript:{}"
+           onclick="sendRequest('{% url 'samplesheets:irods_request_accept_batch' project=project.sodar_uuid %}');">
+          <i class="iconify" data-icon="mdi:check-bold"></i> Accept Selected
+        </a>
+        <a class="dropdown-item" id="sodar-ss-reject-selected"
+           href="javascript:{}"
+           onclick="sendRequest('{% url 'samplesheets:irods_request_reject_batch' project=project.sodar_uuid %}');">
+          <i class="iconify" data-icon="mdi:close-thick"></i> Reject Selected
+        </a>
+      </div>
     </div>
+  </div>
 </div>
 
 <div class="container-fluid sodar-page-container">
 
 {% if object_list.count > 0 %}
-  <div class="card" id="sodar-ss-irods-request-list">
+  <div class="card" id="sodar-ss-request-list">
     <div class="card-body p-0">
       <table class="table table-striped sodar-card-table"
              id="sodar-ss-request-table">
@@ -92,7 +115,7 @@ <h3>iRODS Delete Requests</h3>
               <th></th>
             {% endif %}
             <th id="sodar-ss-request-header-select">
-              {% if can_manage_request %}
+              {% if can_manage_requests %}
                 <input class="sodar-checkbox" type="checkbox"
                        onchange="checkAll(this)" name="check_all"
                        id="sodar-ss-request-check-all" title="Check/uncheck all" />
@@ -102,22 +125,25 @@ <h3>iRODS Delete Requests</h3>
         </thead>
         <tbody>
           {% for irods_request in object_list %}
-            <tr>
+            <tr class="sodar-ss-request-item">
               <td>
-                <span title="Assay: {{ irods_request.get_assay.get_display_name }}"
+                <span class="sodar-ss-request-item-path"
+                      title="Assay: {{ irods_request.get_assay.get_display_name }}"
                       data-toggle="tooltip">
                   {{ irods_request.get_short_path }}
                 </span>
                 {% if irods_request.description %}
-                  {% get_info_link irods_request.description as info_link %}
-                  {{ info_link | safe }}
+                  <span class="sodar-ss-request-item-description">
+                    {% get_info_link irods_request.description as info_link %}
+                    {{ info_link | safe }}
+                  </span>
                 {% endif %}
                 {% if irods_webdav_enabled %}
                   <a href="{{ irods_request.webdav_url }}" id="sodar-ss-davrods-link"
                      class="btn ml-1 btn-secondary sodar-list-btn pull-right"
                      target="_blank" role="button"
                      data-toggle="tooltip" data-placement="top"
-                     title="Open collection/file in WebDAV">
+                     title="Open collection or data object in WebDAV">
                     <i class="iconify" data-icon="mdi:open-in-new"></i>
                   </a>
                 {% endif %}
@@ -135,16 +161,17 @@ <h3>iRODS Delete Requests</h3>
                 {{ user_html | safe }}
               </td>
               <td>{{ irods_request.get_date_created }}</td>
-              <td class="{% get_request_status_class irods_request %}">
+              <td class="sodar-ss-request-item-status {% get_request_status_class irods_request %}">
                 {{ irods_request.status }}
               </td>
               <td class="text-right">
-                <button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
+                <button class="btn btn-secondary dropdown-toggle
+                               sodar-list-dropdown sodar-ss-request-item-dropdown"
                         type="button" data-toggle="dropdown" aria-expanded="false">
                   <i class="iconify" data-icon="mdi:cog"></i>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right">
-                  {% if can_manage_request %}
+                  {% if can_manage_requests %}
                     <a class="dropdown-item"
                        href="{% url 'samplesheets:irods_request_accept' irodsdatarequest=irods_request.sodar_uuid %}">
                       <i class="iconify" data-icon="mdi:check-bold"></i> Accept Request
@@ -169,8 +196,8 @@ <h3>iRODS Delete Requests</h3>
                 </div>
               </td>
               <td>
-                {% if can_manage_request %}
-                  <input class="sodar-checkbox sodar-ss-checkbox-item" type="checkbox"
+                {% if can_manage_requests %}
+                  <input class="sodar-checkbox sodar-ss-checkbox-item sodar-ss-request-item-check" type="checkbox"
                          id="sodar-ss-checkbox-item-{{ irods_request.sodar_uuid }}"
                          name="batch_item_{{ irods_request.sodar_uuid }}" value="{{ irods_request.sodar_uuid }}"
                          {% if irods_request.is_collection %}disabled{% endif %} />
@@ -238,6 +265,84 @@ <h3>iRODS Delete Requests</h3>
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
+
+    if ($('.sodar-ss-request-item').length) {
+        tour.addStep('irods_req_path', {
+            title: 'Request Path',
+            text: 'The partial path of the request is displayed here, ' +
+                  'including the collection or data object targeted for ' +
+                  'deletion. The column also includes links for copying the ' +
+                  'targeted iRODS path to the clipboard and opening the ' +
+                  'associated data object or collection in WebDAV.',
+            attachTo: '.sodar-ss-request-item-path top',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+
+        if ($('.sodar-ss-request-item-description').length) {
+            tour.addStep('irods_req_desc', {
+                title: 'Request Description',
+                text: 'Clicking on this icon will display an optional ' +
+                      'description for the request, which may e.g. explain ' +
+                      'why deletion was requested.',
+                attachTo: '.sodar-ss-request-item-description right',
+                advanceOn: '.docs-link click',
+                showCancelLink: true
+             });
+         }
+
+        tour.addStep('irods_req_status', {
+            title: 'Request Status',
+            text: 'The current status of the request is displayed here.',
+            attachTo: '.sodar-ss-request-item-status left',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+
+        tour.addStep('irods_req_dropdown', {
+            title: 'Request Dropdown',
+            text: 'This dropdown contains links to actions the user is ' +
+                  'permitted to take on the corresponding request.',
+            attachTo: '.sodar-ss-request-item-dropdown left',
+            advanceOn: '.docs-link click',
+            showCancelLink: true
+        });
+
+        if ($('.sodar-ss-request-item-check').length) {
+            tour.addStep('irods_req_check', {
+                title: 'Batch Accepting or Rejecting Requests',
+                text: 'As owner or delegate you can accept or reject ' +
+                      'multiple request at once by checking them using the ' +
+                      'checkboxes in this column. Note that requests which ' +
+                      'target entire collections must be accepted or ' +
+                      'rejected separately. Once you have selected desired ' +
+                      'requests, open the "Request Operations" dropdown to ' +
+                      'select the appropriate action.',
+                attachTo: '.sodar-ss-request-item-check left',
+                advanceOn: '.docs-link click',
+                showCancelLink: true
+             });
+         }
+    }
+
+    tour.addStep('irods_req_ops_dropdown', {
+        title: 'Request Operations Dropdown',
+        text: 'This dropdown lists operations you can perform on requests. ' +
+              'From here you can create a new request or, if you are an ' +
+              'owner or a delegate, batch accepting or rejecting selected ' +
+              'requests.',
+        attachTo: '#sodar-ss-request-ops-dropdown left',
+        advanceOn: '.docs-link click',
+        showCancelLink: true
+    });
+
+    tour.addStep('sheets_btn_back', {
+        title: 'Back to Project Sample Sheets',
+        text: 'Click on this button to return to the project sample sheets.',
+        attachTo: '#sodar-ss-btn-back left',
+        advanceOn: '.docs-link click',
+        showCancelLink: true
+    });
   </script>
 
 {% endblock javascript %}
diff --git a/samplesheets/templates/samplesheets/project_sheets.html b/samplesheets/templates/samplesheets/project_sheets.html
index 80b6d76f..8903e3da 100644
--- a/samplesheets/templates/samplesheets/project_sheets.html
+++ b/samplesheets/templates/samplesheets/project_sheets.html
@@ -31,21 +31,21 @@
 
     tour.addStep('sheet_info', {
         title: 'Sample Sheets',
-        text: 'In this app you are able to access meta data regarding ' +
-              'project samples, along with links to sample file mass storage ' +
-              'in iRODS.',
+        text: 'In this app you are able to access the project\'s study design ' +
+              'metadata regarding and project samples. The metadata links to ' +
+              'study files in iRODS mass storage.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
 
     tour.addStep('sheet_isa', {
         title: 'ISA Model',
-        text: 'Sample data is represented according to the ISA ' +
-              '(Investigation/Study/Assay) specification. One project is ' +
-              'expected to contain one investigation, which contains one ' +
-              'or more studies, which in turn can consist of one or more ' +
-              'assays. One study and its assays are visualized per page ' +
-              'in this application.',
+        text: 'The study design is represented according to the ISA ' +
+              '(Investigation/Study/Assay) specification. One project can ' +
+              'contain one investigation, which contains one or more ' +
+              'studies. The studies can consist of one or more assays. One ' +
+              'study and its assays are visualized per view in this ' +
+              'application.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
@@ -53,7 +53,7 @@
     tour.addStep('sheet_navigation', {
         title: 'Sample Sheet Navigation',
         text: 'Navigate between studies and data overview using the ' +
-            'navigation bar on the top of the page.',
+              'navigation bar on the top of the page.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
@@ -79,10 +79,9 @@
 
     tour.addStep('study_shortcuts', {
         title: 'Study Shortcuts',
-        text: 'Study shortcuts such as IGV links are no longer found in a ' +
-              'separate table, but instead in the rightmost column of the ' +
-              'study table. Links will be inactive if no related files are ' +
-              'currently stored in iRODS.',
+        text: 'Study shortcuts such as IGV links can be found in the ' +
+              'rightmost column of the study table. Links will be inactive ' +
+              'if no related files are currently stored in iRODS.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
@@ -91,19 +90,16 @@
         title: 'Cell Copying',
         text: 'You can copy one or several cells by clicking on a ' +
               'study/assay table and painting a selection with your mouse. ' +
-              'Then press CTRL+C to copy the cells into your clipboard. ' +
-              'This feature is still experimental and bugs may appear.',
+              'Then press CTRL+C to copy the cells into your clipboard.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });
 
     tour.addStep('sheet_edit', {
         title: 'Sheet Editing',
-        text: 'New in SODAR v0.7.0+: Limited sample sheet editing is ' +
-              'available. Currently, editing must be allowed per project by ' +
-              'project owner, delegate or a superuser in the Update ' +
-              'Project form. Further documentation is available once "Edit ' +
-              'Sheets" is selected from the Sheet Operations menu.',
+        text: 'Certain aspects of the sample sheets can be edited. See the ' +
+              'SODAR manual for more information and detailed instructions ' +
+              'on sample sheet editing.',
         advanceOn: '.docs-link click',
         showCancelLink: true
     });