Y24-382: Improve clarity of cherrypicking strategies and values

app/frontend/entrypoints/cherrypick_strategies.js

@@ -0,0 +1,27 @@
+// apply a border highlight to the card, based on the cherrypick action selected
+// this is admittedly a gratuitous addition to the user experience, but it's a nice touch
+
+// highlight only the card that corresponds to the provided index
+function highlightCard(cardIndex) {
+  const borderStyle = "border-primary";
+
+  const cards = document.querySelectorAll(`.card[data-group='cherrypick[action]']`);
+  cards.forEach((card) => card.classList.remove(borderStyle));
+
+  cards[cardIndex].classList.add(borderStyle);
+}
+
+const radioButtons = document.querySelectorAll('input[name="cherrypick[action]"]');
+radioButtons.forEach((radio) => {
+  radio.addEventListener("change", function () {
+    const action = this.value;
+    const actionToIndexMap = {
+      nano_grams_per_micro_litre: 0,
+      nano_grams: 1,
+      micro_litre: 2,
+    };
+    const cardIndex = actionToIndexMap[action];
+
+    highlightCard(cardIndex);
+  });
+});

app/models/tasks/cherrypick_handler.rb

@@ -88,7 +88,7 @@ def setup_input_params_for_pass_through # rubocop:todo Metrics/AbcSize
       @nano_grams_robot_minimum_picking_volume = params[:nano_grams][:robot_minimum_picking_volume]
     end
     @micro_litre_volume_required = params[:micro_litre][:volume_required] if params[:micro_litre]
-    @cherrypick_action = params[:cherrypick][:action]
+    @cherrypick_strategy = params[:cherrypick][:strategy]
     @plate_purpose_id = params[:plate_purpose_id]
     @fluidigm_barcode = params[:fluidigm_plate]
   end
@@ -114,17 +114,17 @@ def do_cherrypick_task(_task, params) # rubocop:todo Metrics/CyclomaticComplexit
       plate_purpose = PlatePurpose.find(params[:plate_purpose_id])
       asset_shape_id = plate_purpose.asset_shape_id
 
-      # Configure the cherrypicking action based on the parameters
+      # Configure the cherrypicking strategy based on the parameters
       cherrypicker =
-        case params[:cherrypick_action]
+        case params[:cherrypick_strategy]
         when 'nano_grams_per_micro_litre'
           create_nano_grams_per_micro_litre_picker(params[:nano_grams_per_micro_litre])
         when 'nano_grams'
           create_nano_grams_picker(params[:nano_grams])
         when 'micro_litre'
           create_micro_litre_picker(params[:micro_litre])
         else
-          raise StandardError, "Invalid cherrypicking type #{params[:cherrypick_action]}"
+          raise StandardError, "Invalid cherrypicking type #{params[:cherrypick_strategy]}"
         end
 
       # We can preload the well locations so that we can do efficient lookup later.

app/views/workflows/_cherrypick_batches.html.erb

@@ -37,7 +37,7 @@
   <%= hidden_field_tag 'plate_purpose_id', @plate_purpose_id %>
   <%= hidden_field_tag 'fluidigm_plate', @fluidigm_plate %>
   <%= hidden_field_tag 'robot_id', @robot_id    %>
-  <%= hidden_field_tag 'cherrypick_action', @cherrypick_action %>
+  <%= hidden_field_tag 'cherrypick_strategy', @cherrypick_strategy %>
   <%= hidden_field_tag 'plate_type', @plate_type %>
 
   <%= render(partial: 'next_stage_submit', locals: { check_selection: true }) %>

app/views/workflows/_cherrypick_by_amount.html.erb

@@ -0,0 +1,12 @@
+<div id='pick_by_nano_grams'>
+
+  <%= render partial: 'form_group_radio', locals: { field_name: 'cherrypick', category: 'strategy', field_value: 'nano_grams', label_text: 'Pick by amount (ng)' } %>
+
+  <%= fields_for :nano_grams do |ff| %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'total_nano_grams', label_text: 'Quantity to pick (ng)', field_value: '1000' } %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'minimum_volume', label_text: 'Minimum Volume (µl)', field_value: '10' } %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'maximum_volume', label_text: 'Maximum Volume (µl)', field_value: '50' } %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'robot_minimum_picking_volume', label_text: 'Robot Minimum Picking Volume (µl)', field_value: 5.0, options: { type: 'number', step: 0.1, min: 1, max: 9 } } %>
+  <% end %>
+
+</div>

app/views/workflows/_cherrypick_by_concentration.html.erb

@@ -0,0 +1,11 @@
+<div id='pick_by_nano_grams_per_micro_litre'>
+
+  <%= render partial: 'form_group_radio', locals: { field_name: 'cherrypick', category: 'strategy', field_value: 'nano_grams_per_micro_litre', label_text: 'Pick by concentration (ng/µl)' } %>
+
+  <%= fields_for :nano_grams_per_micro_litre do |ff|%>
+    <%= render partial: 'form_group_text', locals: { field_name: 'volume_required', label_text: 'Volume Required (µl)', field_value: '65' } %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'concentration_required', label_text: 'Concentration Required (ng/µl)', field_value: '50' } %>
+    <%= render partial: 'form_group_text', locals: { field_name: 'robot_minimum_picking_volume', label_text: 'Robot Minimum Picking Volume (µl)', field_value: 5.0, options: { type: 'number', step: 0.1, min: 1, max: 9 } } %>
+  <% end %>
+
+</div>

app/views/workflows/_cherrypick_by_volume.html.erb

@@ -0,0 +1,16 @@
+<%# locals: (hide_strategy_option: false) -%> <%# <-- this is Rails 7.1 magic %>
+<% hide_strategy_option ||= false %>
+
+<div id='pick_by_micro_litre'>
+
+  <% if hide_strategy_option %>
+    <%= hidden_field("cherrypick", "strategy", value: "micro_litre") %>
+  <% else %>
+    <%= render partial: 'form_group_radio', locals: { field_name: 'cherrypick', category: 'strategy', field_value: 'micro_litre', label_text: 'Pick by volume (µl)' } %>
+  <% end %>
+
+  <%= fields_for :micro_litre do |ff|%>
+    <%= render partial: 'form_group_text', locals: { field_name: 'volume_required', label_text: 'Volume (µl)', field_value: '13' } %>
+  <% end %>
+
+</div>

app/views/workflows/_cherrypick_strategies.html.erb

@@ -0,0 +1,28 @@
+<p>Choose a strategy below:</p>
+
+<div class="card-columns">
+
+  <div class="card" data-group='cherrypick[strategy]'>
+    <div class="card-body">
+      <h5 class="card-title">Concentration</h5>
+      <%= render partial: 'cherrypick_by_concentration' %>
+    </div>
+  </div>
+
+  <div class="card" data-group='cherrypick[strategy]'>
+    <div class="card-body">
+      <h5 class="card-title">Amount</h5>
+      <%= render partial: 'cherrypick_by_amount' %>
+    </div>
+  </div>
+
+  <div class="card" data-group='cherrypick[strategy]'>
+    <div class="card-body">
+      <h5 class="card-title">Volume</h5>
+      <%= render partial: 'cherrypick_by_volume' %>
+    </div>
+  </div>
+
+</div>
+
+<%= vite_javascript_tag 'cherrypick_strategies' %>

app/views/workflows/_fluidigm_template_batches.html.erb

@@ -65,7 +65,7 @@
   </div>
   <div class="col-md-6">
     <%= panel(:info,title:"Step 3: Layout wells on plates") do %>
-      <%= render partial: 'cherrypicking_volume_by_micro_litre' %>
+      <%= render partial: 'cherrypick_by_volume', locals: { hide_strategy_option: true } %>
     <% end %>
   </div>
 

app/views/workflows/_form_group_radio.html.erb

@@ -0,0 +1,22 @@
+<%#
+  This partial renders a form group for a single radio button in a category.
+
+  See the Rails docs for more details:
+    https://apidock.com/rails/ActionView/Helpers/FormHelper/radio_button
+    https://apidock.com/rails/ActionView/Helpers/FormHelper/label
+
+  Inputs:
+  - field_name: The name attribute for the radio button (see object_name).
+  - category: The category or group the radio button belongs to (see method).
+  - field_value: The value attribute for the radio button.
+  - label_text: The text to display for the label.
+  - options: Additional HTML options for the radio button (optional).
+%>
+<% options ||= {} %>
+
+<div class="form-group form-row">
+  <%= label(field_name, category, label_text, value: field_value, class: 'col-12 col-lg-8 col-form-label') %>
+  <div class="col-12 col-lg-4">
+    <%= radio_button(field_name, category, field_value, class: 'form-control text-right', **options) %>
+  </div>
+</div>

app/views/workflows/_form_group_text.html.erb

@@ -0,0 +1,8 @@
+<% options ||= {} %>
+
+<div class="form-group form-row">
+  <%= label_tag(field_name, label_text, class: 'col-12 col-lg-8 col-form-label') %>
+  <div class="col-12 col-lg-4">
+    <%= text_field_tag(field_name, field_value, class: 'form-control text-right', **options) %>
+  </div>
+</div>

app/views/workflows/_plate_template_batches.html.erb

@@ -53,7 +53,7 @@
     </fieldset>
   <% end %>
     <%= panel(:info, title: "Step 3: Set volumes and concentrations <a href='https://ssg-confluence.internal.sanger.ac.uk/x/NoHdDQ'><small>Information about cherrypicking options</small></a>".html_safe) do %>
-      <%= render partial: 'cherrypicking_volume_parameters' %>
+      <%= render partial: 'cherrypick_strategies' %>
     <% end %>
 
   <%= render partial: "next_stage_submit" %>