refactor to use spinner component on pipeline selection and submission

phac-nml · Feb 4, 2025 · be6dd66 · be6dd66
1 parent 15f533c
commit be6dd66
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 94 deletions.
diff --git a/app/components/nextflow/samplesheet_component.html.erb b/app/components/nextflow/samplesheet_component.html.erb
@@ -42,22 +42,6 @@
         workflow_params:,
       ) %>
     <% end %>
-    <template data-nextflow--samplesheet-target="processing">
-      <div
-        role="status"
-        class="
-          absolute h-full w-full text-black dark:text-white backdrop-blur-sm flex
-          items-center justify-center z-20
-        "
-      >
-        <span class="flex items-center p-4 space-x-4">
-          <span class="flex-shrink-0">
-            <%= viral_icon(name: :loading, classes: "animate-spin text-primary-500 h-5 w-5") %>
-          </span>
-          <span class="font-bold"><%= t(".processing_request") %></span>
-        </span>
-      </div>
-    </template>
   </div>
   <% if samples_workflow_executions_attributes.count > 5 %>
     <div id="samplesheet_pagination" class="flex items-center justify-end">

diff --git a/app/components/nextflow_component.html.erb b/app/components/nextflow_component.html.erb
@@ -136,4 +136,10 @@
       <% end %>
     </button>
   <% end %>
+  <span
+    class="hidden flex items-center p-4 space-x-4"
+    data-nextflow--samplesheet-target="spinner"
+  >
+    <%= render SpinnerComponent.new(message: t(".processing_request")) %>
+  </span>
 </div>
diff --git a/app/javascript/controllers/nextflow/samplesheet_controller.js b/app/javascript/controllers/nextflow/samplesheet_controller.js
@@ -3,11 +3,11 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = [
     "table",
-    "processing",
     "submit",
     "error",
     "errorMessage",
     "form",
+    "spinner",
     "workflowAttributes",
     "samplesheetProperties",
     "cellContainer",
@@ -203,18 +203,12 @@ export default class extends Controller {
 
   #enableProcessingState() {
     this.submitTarget.disabled = true;
-    if (this.hasTableTarget) {
-      this.tableTarget.appendChild(
-        this.processingTarget.content.cloneNode(true),
-      );
-    }
+    this.spinnerTarget.classList.remove("hidden");
   }
 
   #disableProcessingState() {
     this.submitTarget.disabled = false;
-    if (this.hasTableTarget) {
-      this.tableTarget.removeChild(this.tableTarget.lastElementChild);
-    }
+    this.spinnerTarget.classList.add("hidden");
   }
 
   #enableErrorState(message) {

diff --git a/app/javascript/controllers/workflow_selection_controller.js b/app/javascript/controllers/workflow_selection_controller.js
@@ -31,31 +31,17 @@ export default class extends Controller {
 
   selectWorkflow({ params }) {
     this.preventClosingDialog();
+    this.workflowNameTarget.value = params.workflowname;
+    this.workflowVersionTarget.value = params.workflowversion;
 
-    for (const workflow of this.workflowTargets) {
-      if (
-        params.workflowname !==
-        workflow.dataset.workflowSelectionWorkflownameParam ||
-        params.workflowversion !==
-        workflow.dataset.workflowSelectionWorkflowversionParam
-      ) {
-        workflow.classList.add("hidden");
-      } else {
-        workflow.disabled = true;
-        workflow.querySelector(".ws-default").classList.add("hidden");
-        workflow.querySelector(".ws-loading").classList.remove("hidden");
-
-        this.workflowNameTarget.value = params.workflowname;
-        this.workflowVersionTarget.value = params.workflowversion;
-
-        // Update the text inside ws_loading
-        const wsLoading = workflow.querySelector(".ws-loading-text");
-        wsLoading.textContent = wsLoading.textContent.replace(
-          "COUNT_PLACEHOLDER",
-          this.selectionOutlet.getNumSelected(),
-        );
-      }
-    }
+    let spinner = document.getElementById("pipeline-spinner");
+
+    spinner.classList.remove("hidden");
+    // Update the text inside spinner dialog
+    spinner.innerHTML = spinner.innerHTML
+      .replace("COUNT_PLACEHOLDER", this.selectionOutlet.getNumSelected())
+      .replace("WORKFLOW_NAME_PLACEHOLDER", params.workflowname)
+      .replace("WORKFLOW_VERSION_PLACEHOLDER", params.workflowversion);
 
     this.formTarget.requestSubmit();
   }

diff --git a/app/views/workflow_executions/submissions/_pipeline_selection_dialog.html.erb b/app/views/workflow_executions/submissions/_pipeline_selection_dialog.html.erb
@@ -1,16 +1,16 @@
 <%= viral_dialog(open: true) do |dialog| %>
   <%= dialog.with_header(
-    title: t(:"workflow_executions.submissions.pipeline_selection.title")
+    title: t(:"workflow_executions.submissions.pipeline_selection.title"),
   ) %>
   <%= dialog.with_section(data: { controller: "workflow-selection", "workflow-selection-selection-outlet": "#samples-table" }) do %>
     <%= form_with url: workflow_executions_submissions_path, data: { turbo_stream: true, "workflow-selection-target": "form" } do |form| %>
       <%= form.hidden_field :workflow_name,
                         data: {
-                          "workflow-selection-target": "workflowName"
+                          "workflow-selection-target": "workflowName",
                         } %>
       <%= form.hidden_field :workflow_version,
                         data: {
-                          "workflow-selection-target": "workflowVersion"
+                          "workflow-selection-target": "workflowVersion",
                         } %>
       <%= form.hidden_field :namespace_id, value: @namespace_id %>
       <div
@@ -30,50 +30,19 @@
               data-workflow-selection-namespaceId-param="<%= @namespace_id %>"
               data-action="click->workflow-selection#selectWorkflow"
             >
-              <span class="ws-loading hidden flex items-center p-4 space-x-4">
-                <span class="flex-shrink-0">
-                  <%= viral_icon(name: :loading, classes: "animate-spin text-primary-500") %>
-                </span>
-                <span class="flex-1 min-w-0 text-left">
-                  <span class="flex items-center space-x-2">
-                    <span class=" font-medium text-slate-900 truncate dark:text-white ">
-                      <%= workflow.name %>
-                    </span>
-                    <%= viral_pill(text: workflow.version, color: :primary) %>
-                  </span>
-                  <span
-                    class="
-                      ws-loading-text
-                      text-sm
-                      font-normal
-                      truncate
-                      text-slate-500
-                      dark:text-slate-400
-                      text-wrap
-                      mr-4
-                    "
-                  >
-                    <%= t(:"workflow_executions.submissions.pipeline_selection.loading") %>
-                  </span>
-                </span>
-              </span>
               <span class="ws-default flex items-center p-4 space-x-4 hover:bg-primary-600">
                 <span class="flex-shrink-0">
                   <%= viral_icon(
                     name: :rocket_launch,
                     classes:
-                      "ws-default dark:text-slate-500 group-hover:text-slate-100 group-hover:-rotate-45 transition-rotate-45 group-hover:duration-500 group-hover:ease-in-out"
+                      "ws-default dark:text-slate-500 group-hover:text-slate-100 group-hover:-rotate-45 transition-rotate-45 group-hover:duration-500 group-hover:ease-in-out",
                   ) %>
                 </span>
                 <span class="flex-1 min-w-0 text-left group-hover:stroke-slate-100">
                   <span class="flex items-center space-x-2">
                     <span
                       class="
-                        font-medium
-                        text-slate-900
-                        truncate
-                        dark:text-white
-                        group-hover:text-slate-100
+                        font-medium text-slate-900 truncate dark:text-white group-hover:text-slate-100
                       "
                     >
                       <%= workflow.name %>
@@ -82,11 +51,7 @@
                   </span>
                   <span
                     class="
-                      text-sm
-                      font-normal
-                      truncate
-                      text-slate-500
-                      dark:text-slate-400
+                      text-sm font-normal truncate text-slate-500 dark:text-slate-400
                       group-hover:text-slate-200
                     "
                   >
@@ -98,6 +63,11 @@
           </li>
         <% end %>
       </ul>
+      <span id="pipeline-spinner" class="hidden flex items-center p-4 space-x-4">
+        <%= render SpinnerComponent.new(
+          message: t("workflow_executions.submissions.pipeline_selection.loading_html"),
+        ) %>
+      </span>
     <% end %>
   <% end %>
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1022,12 +1022,12 @@ en:
       page_selection:
         aria_label: Pagination page selector
       previous: Previous
-      processing_request: Processing your request
   nextflow_component:
     data_missing_error: 'The following samples are missing required data: '
     name:
       helper: A custom name will make it easier to search for this in the future.
       label: Name (Optional)
+    processing_request: Processing your request
     submission_error: Something went wrong with the submission request.
   personal_access_tokens:
     revoke_confirmation:
@@ -1891,7 +1891,7 @@ en:
         title: "%{workflow} parameters"
         update: Update
       pipeline_selection:
-        loading: Preparing workflow execution arguments for COUNT_PLACEHOLDER samples, this may take a bit of time.
+        loading_html: "<span class='flex items-center space-x-2'><span class='font-medium text-slate-900 truncate dark:text-white group-hover:text-slate-100'>WORKFLOW_NAME_PLACEHOLDER</span><span class='bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-400 text-xs font-medium px-2.5 py-0.5 rounded-full'>WORKFLOW_VERSION_PLACEHOLDER</span></span>Preparing workflow execution arguments for COUNT_PLACEHOLDER samples, this may take a bit of time."
         title: Workflow Selection
     summary:
       created_at: Created

diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -1022,12 +1022,12 @@ fr:
       page_selection:
         aria_label: Pagination page selector
       previous: Previous
-      processing_request: Processing your request
   nextflow_component:
     data_missing_error: 'The following samples are missing required data: '
     name:
       helper: A custom name will make it easier to search for this in the future.
       label: Name (Optional)
+    processing_request: Processing your request
     submission_error: Something went wrong with the submission request.
   personal_access_tokens:
     revoke_confirmation:
@@ -1891,7 +1891,7 @@ fr:
         title: "%{workflow} parameters"
         update: Update
       pipeline_selection:
-        loading: Preparing workflow execution arguments for COUNT_PLACEHOLDER samples, this may take a bit of time.
+        loading_html: "<span class='flex items-center space-x-2'><span class='font-medium text-slate-900 truncate dark:text-white group-hover:text-slate-100'>WORKFLOW_NAME_PLACEHOLDER</span><span class='bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-400 text-xs font-medium px-2.5 py-0.5 rounded-full'>WORKFLOW_VERSION_PLACEHOLDER</span></span>Preparing workflow execution arguments for COUNT_PLACEHOLDER samples, this may take a bit of time."
         title: Workflow Selection
     summary:
       created_at: Created