2596y25-595---display plate id on prepool plate schematic

[wendyyang]

Closes #

Changes proposed in this pull request

update the template and javascript to display plate barcode & input barcode on top of source plate

Instructions for Reviewers

[All PRs] - Confirm PR template filled
[Feature Branches] - Review code
[Production Merges to main]
    - Check story numbers included
    - Check for debug code
    - Check version

[codecov]

Codecov Report

❌ Patch coverage is 29.41176% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.55%. Comparing base (1b9b14c) to head (582754b).

Files with missing lines	Patch %	Lines
.../frontend/entrypoints/pages/multi_plate_pooling.js	0.00%	11 Missing ⚠️
app/models/presenters/presenter.rb	83.33%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #2693      +/-   ##
===========================================
- Coverage    84.59%   84.55%   -0.04%     
===========================================
  Files          501      501              
  Lines        20538    20553      +15     
  Branches       377      377              
===========================================
+ Hits         17374    17379       +5     
- Misses        3161     3171      +10     
  Partials         3        3              

Flag	Coverage Δ
javascript	79.65% <0.00%> (-0.06%)	⬇️
pull_request	84.55% <29.41%> (-0.05%)	⬇️
push	84.55% <29.41%> (-0.04%)	⬇️
ruby	92.55% <83.33%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[BenTopping]

It looks like we are already populating the plate barcode but it is just invisible as its black text on black background. See caption here https://github.com/sanger/limber/blob/develop/app/frontend/entrypoints/pages/multi_plate_pooling.js#L278 (line 278).

I think it would be best to add the input barcode in that caption too - should save you having to create those new html divs.

[BenTopping]

Changes look good to me - I have not tested locally.

Do we need tests for this?

[wendyyang]

Changes look good to me - I have not tested locally.

Do we need tests for this?

I run integration suite to test it, the screenshot looks like:

[BenTopping]

Nice looks good to me.

[wendyyang]

update label using 'the LB Lib PCR-XP' and 'Cherry Pick Plate ID'.

[StephenHulme]

A couple comments - thanks for the screenshots, they look great!

[StephenHulme]

There's potential for an injection attack here. Instead of using .html() with potentially user-supplied values, a better approach would be to specifiy the html tags directly and set their contents with .text() which would automatically escape any html.

Here is one (unchecked) suggested alternative:

const $caption = $('.plate-id-' + plateIndex + ' caption');
$caption.empty();
$caption
  .append($('<span>').addClass('barcode-label').text(purpose))
  .append($('<span>').addClass('barcode-value').text(barcode))
  .append($('<span>').addClass('caption-separator'))
  .append($('<span>').addClass('barcode-label').text(label))
  .append($('<span>').addClass('barcode-value').text(inputBarcode));

[wendyyang]

Thanks for the comments. refactored.

[StephenHulme]

We tend to avoid pipeline-specific behaviour if at all possible as it can be unexpected and fragile if the pipeline name changes.
Is it reasonably possible to use a single label that applies to well to pipeline groups?

[wendyyang]

refactored and moved the label to presenter