Merge pull request #170 from usegalaxy-au/dev

About page and FGENESH form updates

webapp/home/forms.py

@@ -402,20 +402,14 @@ class FgeneshRequestForm(BaseAccessRequestForm):
     """Form to request AlphaFold access."""
 
     RESOURCE_NAME = 'FGENESH++'
-    MAIL_SUCCESS_MESSAGE = (
-        "This request has been actioned by Galaxy Media Site and the user has"
-        " been assigned to the 'fgenesh' group on Galaxy AU. An admin should"
-        "  ensure that the required matrices are installed before notifying"
-        " the user that the service is ready for use."
-    )
+    AUTO_ACTION = True
 
     name = forms.CharField()
     email = forms.EmailField(validators=[validators.institutional_email])
     agree_terms = forms.BooleanField()
     agree_acknowledge = forms.BooleanField()
     research_description = forms.CharField(max_length=200, required=False)
     research_topics = forms.CharField(max_length=200, required=False)
-    matrices = forms.MultipleChoiceField(choices=genematrix_tree.as_choices())
 
     terms = {
         'button_text': 'View terms',

webapp/home/static/home/css/about.css

@@ -22,6 +22,19 @@ section:last-child {
 .textbox {
   margin: 4rem;
 }
+#scrollToTop {
+  position: fixed;
+  bottom: -5rem;
+  right: 2rem;
+  background-color: var(--color);
+  color: white;
+  padding: .25rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.25s ease;
+  transition: bottom 1s ease;
+  font-size: 2rem;
+}
 
 /* Lists */
 ol.nested > li {

webapp/home/static/home/js/fgenesh-matrix-tree.js

@@ -1,9 +1,14 @@
+const SELECTION_ENABLED = false;
+
 $(document).ready(function() {
-  setMatricesValue();
   setTermsValue();
   addNodeClickEvent();
-  // Add event handler to update "selected matrices" count
-  $('#taxonomy-tree input[type="checkbox"]').change(updateTreeSelection);
+
+  if (SELECTION_ENABLED) {
+    setMatricesValue();
+    // Add event handler to update "selected matrices" count
+    $('#taxonomy-tree input[type="checkbox"]').change(updateTreeSelection);
+  }
 });
 
 const debouncedSearchTree = (q) => _.debounce(
@@ -61,7 +66,7 @@ function showTreeMatches(matched) {
 function selectTreeMatch(id) {
   $('#treeSearch .dropdown').empty();
   const input = $(`#taxonomy-tree input[value="${id}"]`);
-  input.prop('checked', true);
+  SELECTION_ENABLED && input.prop('checked', true);
   let ul = input.closest('ul');
   expandTreeBranch(ul);
   updateTreeSelection();
@@ -94,6 +99,7 @@ function addNodeClickEvent() {
 }
 
 function setMatricesValue() {
+  if (!SELECTION_ENABLED) return;
   const matricesValueText = $('#matricesValue').text().replaceAll("'", '"');
   const selectedMatrices = JSON.parse(matricesValueText);
   if (selectedMatrices.length) {
@@ -113,19 +119,21 @@ function setTermsValue() {
 }
 
 function updateTreeSelection() {
-    const selected = $('#taxonomy-tree input:checked');
-    const count = selected.length;
-    $('#matrixCount span').text(count);
-    if (count) {
-        $('#matrixCount').addClass('text-success');
-        $('#matrixCount').removeClass('text-danger');
-    } else {
-        $('#matrixCount').addClass('text-danger');
-        $('#matrixCount').removeClass('text-success');
-    }
+  if (!SELECTION_ENABLED) return;
+  const selected = $('#taxonomy-tree input:checked');
+  const count = selected.length;
+  $('#matrixCount span').text(count);
+  if (count) {
+      $('#matrixCount').addClass('text-success');
+      $('#matrixCount').removeClass('text-danger');
+  } else {
+      $('#matrixCount').addClass('text-danger');
+      $('#matrixCount').removeClass('text-success');
+  }
 }
 
 function clearTreeSelection() {
+  if (!SELECTION_ENABLED) return;
   $('#treeSearch input').val('');
   $('#taxonomy-tree input:checked').prop('checked', false);
   updateTreeSelection();

webapp/home/static/home/js/scroll-hash.js

@@ -0,0 +1,44 @@
+// Scroll to an element with a custom offset when clicking on anchor links with
+// hash navigation. This prevents the browser from scrolling past the target
+// element.
+
+const OFFSET = -120; // Set offset from scroll target (px)
+
+function scrollToElementWithOffset(elementId) {
+  const targetElement = document.getElementById(elementId);
+
+  if (targetElement) {
+    const elementPosition =
+      targetElement.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: elementPosition + OFFSET,
+      behavior: "smooth",
+    });
+  }
+}
+
+// Handle clicks on anchor links with hash navigation
+document.querySelectorAll("a").forEach((link) => {
+  if (link.getAttribute("href").startsWith("#")) {
+    link.addEventListener("click", function (event) {
+      event.preventDefault();
+      const targetId = this.getAttribute("href").substring(1);
+      scrollToElementWithOffset(targetId);
+      window.location.hash = targetId;
+    });
+  }
+});
+
+// Handle URL hash change (for direct navigation to #elementId)
+window.addEventListener("hashchange", function () {
+  const hash = window.location.hash.substring(1);
+  scrollToElementWithOffset(hash);
+});
+
+// Scroll on page load if the URL contains a hash
+window.addEventListener("load", function () {
+  const hash = window.location.hash.substring(1);
+  if (hash) {
+    scrollToElementWithOffset(hash);
+  }
+});

webapp/home/templates/home/about.html

@@ -34,7 +34,7 @@ <h1> About Galaxy Australia </h1>
       <p class="lead">On this page</p>
       <ol>
         <li>
-          <a href="#about">Citing Galaxy Australia</a>
+          <a href="#about">Acknowledging and citing Galaxy Australia</a>
         </li>
         <li>
           <a href="#operational-partners">Our funding and partners</a>
@@ -46,13 +46,13 @@ <h1> About Galaxy Australia </h1>
           <a href="#terms-of-service">Terms of service</a>
         </li>
         <li>
-          <a href="#data-privacy">Data privacy</a>
+          <a href="#data-privacy">Privacy policy and data collection statement</a>
         </li>
         <li>
-          <a href="#acceptable-use">Acceptable use</a>
+          <a href="#acceptable-use">Acceptable use policy</a>
         </li>
         <li>
-          <a href="#service-levels">Service levels</a>
+          <a href="#service-levels">Service commitments</a>
         </li>
       </ol>
     </div>
@@ -81,11 +81,34 @@ <h1> About Galaxy Australia </h1>
       {% include 'home/snippets/about/service-levels.html' %}
     </section>
   </div>
+
+  <div
+    id="scrollToTop"
+    title="Scroll to top"
+    data-bs-toggle="tooltip"
+    onclick="window.scrollTo(0, 0); window.location.hash = '';"
+  >
+    <i class="fas fa-arrow-up"></i>
+  </div>
 </main>
 {% endblock %}
 
 
 {% block script %}
+<script src="{% static 'home/js/scroll-hash.js' %}" ></script>
+
+<script>
+  // Scroll event handler to show/hide the floating "scroll-to-top" element
+  window.addEventListener('scroll', function() {
+    const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+    const targetElement = document.getElementById('scrollToTop');
+    if (scrollPosition > 500) {
+      targetElement.style.bottom = '2rem'; // Show the element
+    } else {
+      targetElement.style.bottom = '-5rem'; // Hide the element
+    }
+  });
+</script>
 {% endblock %}
 
 

webapp/home/templates/home/requests/access/fgenesh.html

@@ -81,23 +81,32 @@ <h3 class="mb-3">
       <hr>
 
       <div class="col-sm-12">
-        <h3 class="mb-3">Select matrices</h3>
+        <h3 class="mb-3">Locate a matrix for your analysis</h3>
 
         <p>
-          An annotation matrix for your species (or a related species) may need
-          to be installed prior to use. This will be used as a reference to
-          annotate your genome, so you should nominate a matrix with the closest
-          taxonomic proximity to your subject species. If you have more than
-          one species of interest, you can select multiple matrices.
+          An annotation matrix for your species (or a related species) must be
+          selected when you run this tool. This will be used as a reference to
+          annotate your genome.
         </p>
 
-        <div id="matricesValue" style="display: none;">{{ form.matrices.value|default_if_none:"[]" }}</div>
-
-        {{ form.matrices.errors }}
+        <div class="alert alert-info">
+          <table>
+            <tr>
+              <td>
+                <span class="material-icons p-3" style="opacity: 1;">info</span>
+              </td>
+              <td>
+                A matrix with close taxonomic proximity to your subject species
+                will provide higher quality gene predictions.
+                Please use the explorer below to ensure that a suitable matrix exists
+                for your analysis. Take a note of the matrix you intend to use for
+                when you run this tool in Galaxy.
+              </td>
+            </tr>
+          </table>
+        </div>
 
         <p>
-          <button class="ga-btn btn-sm" type="button" onclick="expandTreeSelected();">Show selection</button>
-          <button class="ga-btn btn-sm" type="button" onclick="clearTreeSelection();">Clear selection</button>
           <button class="ga-btn btn-sm" type="button" onclick="resetTreeList();">Collapse tree</button>
         </p>
 
@@ -113,12 +122,6 @@ <h3 class="mb-3">Select matrices</h3>
           </div>
         </div>
 
-        <p class="lead" id="matrixCount">
-          <span>0</span> matrices selected
-        </p>
-
-        <ul id="selectedMatrices"></ul>
-
         {{ form.render_matrix_field|safe }}
 
       </div>

webapp/home/tests.py

@@ -319,7 +319,6 @@ def test_it_can_handle_request_for_fgenesh_access(self):
             'email': '[email protected]',
             'agree_terms': 'on',
             'agree_acknowledge': 'on',
-            'matrices': [genematrix_tree.as_choices()[0][0]],
         })
         self.assert_access_form_success(response, auto_action=False)
 

webapp/utils/data/fgenesh/genematrix_tree.py

@@ -66,20 +66,26 @@ def get_order(v):
             keys.sort(key=lambda k: get_order(node[k]))
             return keys
 
-        def render_leaf_li(key, desc):
+        def render_leaf_li(key, desc, checkbox=False):
             """Render a list item representing a matrix choice."""
             tag = f'{"  " * indent}<li>\n'
             indent_str = "  " * (indent + 1)
             input_val = get_input_val(key, desc)
-            checkbox = (f'{indent_str}<input type="checkbox"'
-                        f' name="matrices" value="{input_val}"'
-                        f' id="{input_val}">')
+            checkbox_html = (
+                f'{indent_str}<input type="checkbox"'
+                f' name="matrices" value="{input_val}"'
+                f' id="{input_val}">'
+            )
+            if not checkbox:
+                icon = '<i class="fas fa-check-square" style="color: limegreen;"></i>'
+                checkbox_html = icon + checkbox_html.replace(
+                    'type="checkbox"', 'type="hidden"')
             text = key
             if desc:
                 text += f' - {desc}'
             return (
                 f'{tag}{indent_str}<span class="choice">'
-                f'{checkbox}'
+                f'{checkbox_html}'
                 f'<label for="{input_val}">'
                 f"{text}"
                 '</label>'