DPL-954: colour code wells on arraying page

app/javascript/multi-stamp-tubes/components/MultiStampTubes.spec.js

@@ -16,10 +16,12 @@ describe('MultiStampTubes', () => {
     // triggering change events on unmounted components
     return shallowMount(MultiStampTubes, {
       propsData: {
+        parentPurposeName: 'parent',
+        purposeName: 'purpose',
+        purposeUuid: 'test',
         targetRows: '8',
         targetColumns: '12',
         sourceTubes: '4',
-        purposeUuid: 'test',
         requestsFilter: 'null',
         targetUrl: 'example/example',
         locationObj: mockLocation,
@@ -33,6 +35,12 @@ describe('MultiStampTubes', () => {
     })
   }
 
+  it('renders the header', () => {
+    const wrapper = wrapperFactory()
+
+    expect(wrapper.findComponent('b-card-stub').attributes('header')).toEqual('Sample Arraying: parent → purpose')
+  })
+
   it('disables creation if there are no tubes', () => {
     const wrapper = wrapperFactory()
 
@@ -242,22 +250,22 @@ describe('MultiStampTubes', () => {
     ])
   })
 
-  it('passes on the layout', () => {
+  it('passes on the layout, assigning colour by machine barcode', () => {
     const tube1 = {
       state: 'valid',
-      labware: tubeFactory({ uuid: 'tube-uuid-1' }),
+      labware: tubeFactory({ uuid: 'tube-uuid-1', labware_barcode: { machine_barcode: 'barcode-1' } }),
     }
     const tube2 = {
       state: 'valid',
-      labware: tubeFactory({ uuid: 'tube-uuid-2' }),
+      labware: tubeFactory({ uuid: 'tube-uuid-2', labware_barcode: { machine_barcode: 'barcode-2' } }),
     }
     const tube3 = {
       state: 'valid',
-      labware: tubeFactory({ uuid: 'tube-uuid-3' }),
+      labware: tubeFactory({ uuid: 'tube-uuid-3', labware_barcode: { machine_barcode: 'barcode-2' } }),
     }
     const tube4 = {
       state: 'valid',
-      labware: tubeFactory({ uuid: 'tube-uuid-4' }),
+      labware: tubeFactory({ uuid: 'tube-uuid-4', labware_barcode: { machine_barcode: 'barcode-4' } }),
     }
     const wrapper = wrapperFactory()
     wrapper.vm.updateTube(1, tube1)
@@ -266,11 +274,97 @@ describe('MultiStampTubes', () => {
     wrapper.vm.updateTube(4, tube4)
 
     expect(wrapper.vm.targetWells).toEqual({
-      A1: { pool_index: 1 },
-      B1: { pool_index: 2 },
-      C1: { pool_index: 3 },
-      D1: { pool_index: 4 },
+      A1: { colour_index: 1 },
+      B1: { colour_index: 2 },
+      C1: { colour_index: 2 },
+      D1: { colour_index: 3 },
+    })
+  })
+
+  it('recalculates the colour index when tubes are updated', () => {
+    const noTube = { state: 'empty', labware: null }
+    const tube1 = {
+      state: 'valid',
+      labware: tubeFactory({ uuid: 'tube-uuid-1', labware_barcode: { machine_barcode: 'barcode-1' } }),
+    }
+    const tube2 = {
+      state: 'valid',
+      labware: tubeFactory({ uuid: 'tube-uuid-2', labware_barcode: { machine_barcode: 'barcode-2' } }),
+    }
+    const wrapper = wrapperFactory()
+
+    // add two different tubes
+    wrapper.vm.updateTube(1, tube1)
+    wrapper.vm.updateTube(2, tube2)
+    expect(wrapper.vm.targetWells).toEqual({
+      A1: { colour_index: 1 },
+      B1: { colour_index: 2 },
+    })
+
+    // remove the first tube
+    wrapper.vm.updateTube(1, noTube)
+    expect(wrapper.vm.targetWells).toEqual({
+      B1: { colour_index: 1 },
     })
+
+    // add the second tube again, but in the first position
+    wrapper.vm.updateTube(1, tube2)
+    expect(wrapper.vm.targetWells).toEqual({
+      A1: { colour_index: 1 },
+      B1: { colour_index: 1 },
+    })
+  })
+
+  it('renders the tube colours based on tube state', () => {
+    const wrapper = wrapperFactory()
+
+    const emptyTube = {
+      state: 'empty',
+      labware: null,
+    }
+    const notFoundTube = {
+      state: 'invalid',
+      labware: undefined,
+    }
+    const unknownTube = {
+      state: 'valid',
+      labware: tubeFactory({ uuid: 't-unknown', labware_barcode: { machine_barcode: 'UNKNOWN' }, state: 'unknown' }),
+    }
+    const pendingTube = {
+      state: 'valid',
+      labware: tubeFactory({ uuid: 't-pending', labware_barcode: { machine_barcode: 'PENDING' }, state: 'pending' }),
+    }
+    const passedTube = {
+      state: 'valid',
+      labware: tubeFactory({ uuid: 't-passed', labware_barcode: { machine_barcode: 'PASSED' }, state: 'passed' }),
+    }
+
+    wrapper.vm.updateTube(1, emptyTube)
+    wrapper.vm.updateTube(2, notFoundTube)
+    wrapper.vm.updateTube(3, unknownTube)
+    wrapper.vm.updateTube(4, pendingTube)
+    wrapper.vm.updateTube(5, passedTube)
+
+    // shows only the (valid) tubes that are passed to the plate
+    expect(wrapper.vm.targetWells).toEqual({
+      C1: { colour_index: 1 },
+      D1: { colour_index: 2 },
+      E1: { colour_index: 3 },
+    })
+
+    // shows only the (valid) tubes that are passed to labware-scan
+    expect(wrapper.vm.tubes.length).toEqual(5)
+    let colourIndices = []
+    for (let i = 0; i < 5; i++) {
+      let result = wrapper.vm.colourIndex(i)
+      colourIndices.push(result)
+    }
+
+    expect(colourIndices).toEqual([-1, -1, 1, 2, 3])
+
+    // shows all the tubes (valid and invalid) that are passed to tube-array-summary
+    // no colour index is assigned to tubes at this stage and all the tubes are passed
+    // as-is to the tube-array-summary component where the colour index is assigned
   })
 
   it('does not display an alert if no invalid transfers are present', () => {

app/javascript/multi-stamp-tubes/components/MultiStampTubes.vue

@@ -2,15 +2,14 @@
   <lb-page>
     <lb-loading-modal v-if="loading" :message="progressMessage" />
     <lb-main-content>
-      <b-card bg-variant="dark" text-variant="white">
+      <b-card bg-variant="dark" text-variant="white" :header="header" header-tag="h3">
         <lb-plate
           caption="Layout of the new plate"
           :rows="targetRowsNumber"
           :columns="targetColumnsNumber"
           :wells="targetWells"
         />
-      </b-card>
-      <b-card bg-variant="dark" text-variant="white">
+        <hr />
         <lb-tube-array-summary :tubes="tubes" />
       </b-card>
     </lb-main-content>
@@ -28,7 +27,7 @@
             :includes="tubeIncludes"
             :fields="tubeFields"
             :validators="scanValidation"
-            :colour-index="i"
+            :colour-index="colourIndex(i - 1)"
             :labware-type="'tube'"
             :valid-message="''"
             @change="updateTube(i, $event)"
@@ -60,7 +59,7 @@ import resources from 'shared/resources'
 import { transferTubesCreator } from 'shared/transfersCreators'
 import { transfersForTubes } from 'shared/transfersLayouts'
 import { buildTubeObjs } from 'shared/tubeHelpers'
-import { indexToName } from 'shared/wellHelpers'
+import { findUniqueIndex, indexToName } from 'shared/wellHelpers'
 import MultiStampTubesTransfers from './MultiStampTubesTransfers'
 import TubeArraySummary from './TubeArraySummary'
 import filterProps from './filterProps'
@@ -99,6 +98,12 @@ export default {
     // Limber plate purpose UUID
     purposeUuid: { type: String, required: true },
 
+    // Limber plate purpose name
+    purposeName: { type: String, required: true },
+
+    // Limber parent purpose name
+    parentPurposeName: { type: String, required: true },
+
     // Limber target Asset URL for posting the transfers
     targetUrl: { type: String, required: true },
 
@@ -161,6 +166,9 @@ export default {
     }
   },
   computed: {
+    header() {
+      return `Sample Arraying: ${this.parentPurposeName} → ${this.purposeName}`
+    },
     sourceTubeNumber() {
       return Number.parseInt(this.sourceTubes)
     },
@@ -204,13 +212,14 @@ export default {
     //   ...
     // }
     targetWells() {
-      const wells = {}
-      for (let i = 0; i < this.validTransfers.length; i++) {
-        wells[this.validTransfers[i].targetWell] = {
-          pool_index: this.validTransfers[i].tubeObj.index + 1,
+      return this.validTransfers.reduce((acc, transfer) => {
+        const tubeIndex = transfer.tubeObj.index
+        acc[transfer.targetWell] = {
+          colour_index: this.colourIndex(tubeIndex),
+          human_barcode: this.tubes[tubeIndex].labware.labware_barcode.human_barcode,
         }
-      }
-      return wells
+        return acc
+      }, {})
     },
     tubeIncludes() {
       return filterProps.tubeIncludes
@@ -236,6 +245,23 @@ export default {
     wellIndexToName(index) {
       return indexToName(index, this.targetRowsNumber)
     },
+    colourIndex(tubeIndex) {
+      // determine the colour of the tube
+      let colour_index = -1
+
+      const tube = this.tubes[tubeIndex]
+      if (tube.state !== 'valid') return colour_index
+
+      const tube_machine_barcode = tube.labware.labware_barcode.machine_barcode
+      const tube_machine_barcodes = this.tubes
+        .filter((tube) => tube.state === 'valid')
+        .map((tube) => tube.labware.labware_barcode.machine_barcode)
+
+      const barcode_index = findUniqueIndex(tube_machine_barcodes, tube_machine_barcode)
+      if (barcode_index !== -1) colour_index = barcode_index + 1
+
+      return colour_index
+    },
     updateTube(index, data) {
       this.$set(this.tubes, index - 1, { ...data, index: index - 1 })
     },

app/javascript/multi-stamp-tubes/components/TubeArraySummary.spec.js

@@ -58,6 +58,45 @@ describe('TubeArraySummary', () => {
     }
   }
 
+  const mixtureOfTubesWithDifferingStates = []
+  for (let i = 0; i < 96; i++) {
+    switch (true) {
+      case i < 6:
+        mixtureOfTubesWithDifferingStates.push({
+          index: i.toString(),
+          labware: {
+            labware_barcode: { human_barcode: 'PASSED', machine_barcode: '1000000000001' },
+            state: 'passed',
+          },
+          state: 'valid',
+        })
+        break
+      case i < 12:
+        mixtureOfTubesWithDifferingStates.push({
+          index: i.toString(),
+          labware: {
+            labware_barcode: { human_barcode: 'PENDING', machine_barcode: '1000000000002' },
+            state: 'pending',
+          },
+          state: 'valid',
+        })
+        break
+      case i < 18:
+        mixtureOfTubesWithDifferingStates.push({
+          index: i.toString(),
+          labware: {
+            labware_barcode: { human_barcode: 'UNKNOWN', machine_barcode: '1000000000003' },
+            state: 'unknown',
+          },
+          state: 'valid',
+        })
+        break
+      default:
+        mixtureOfTubesWithDifferingStates.push({ index: i.toString(), labware: null, state: 'empty' })
+        break
+    }
+  }
+
   const wrapperTubeArraySummaryEmpty = function () {
     return mount(TubeArraySummary, {
       propsData: {
@@ -84,6 +123,16 @@ describe('TubeArraySummary', () => {
       localVue,
     })
   }
+
+  const wrapperTubeArraySummaryWithDifferingStates = function () {
+    return mount(TubeArraySummary, {
+      propsData: {
+        tubes: mixtureOfTubesWithDifferingStates,
+      },
+      localVue,
+    })
+  }
+
   it('renders the provided caption', () => {
     const wrapper = wrapperTubeArraySummaryWithDuplicates()
 
@@ -93,6 +142,7 @@ describe('TubeArraySummary', () => {
   it('renders the provided tubes summary headers', () => {
     const wrapper = wrapperTubeArraySummaryWithDuplicates()
 
+    expect(wrapper.find('#header_tube_colour').text()).toEqual('Tube Colour')
     expect(wrapper.find('#header_human_barcode').text()).toEqual('Human Barcode')
     expect(wrapper.find('#header_machine_barcode').text()).toEqual('Machine Barcode')
     expect(wrapper.find('#header_replicates').text()).toEqual('Replicates')
@@ -144,4 +194,32 @@ describe('TubeArraySummary', () => {
     expect(wrapper.find('#row_machine_barcode_index_95').text()).toEqual('1000000000095')
     expect(wrapper.find('#row_replicates_index_95').text()).toEqual('1')
   })
+
+  it('renders tube summary rows based on labware state', () => {
+    const wrapper = wrapperTubeArraySummaryWithDifferingStates()
+
+    // row 1
+    expect(wrapper.find('#row_tube_colour_index_0').element.children[0].classList.contains('colour-1')).toBe(true)
+    expect(wrapper.find('#row_human_barcode_index_0').text()).toEqual('PASSED')
+    expect(wrapper.find('#row_machine_barcode_index_0').text()).toEqual('1000000000001')
+    expect(wrapper.find('#row_replicates_index_0').text()).toEqual('6')
+
+    // row 2
+    expect(wrapper.find('#row_tube_colour_index_1').element.children.length).toBe(0) // no colour should be rendered
+    expect(wrapper.find('#row_human_barcode_index_1').text()).toEqual('PENDING')
+    expect(wrapper.find('#row_machine_barcode_index_1').text()).toEqual('1000000000002')
+    expect(wrapper.find('#row_replicates_index_1').text()).toEqual('6')
+
+    // row 3
+    expect(wrapper.find('#row_tube_colour_index_2').element.children.length).toBe(0) // no colour should be rendered
+    expect(wrapper.find('#row_human_barcode_index_2').text()).toEqual('UNKNOWN')
+    expect(wrapper.find('#row_machine_barcode_index_2').text()).toEqual('1000000000003')
+    expect(wrapper.find('#row_replicates_index_2').text()).toEqual('6')
+
+    // row 4
+    expect(wrapper.find('#row_tube_colour_index_3').element.children.length).toBe(0) // empty
+    expect(wrapper.find('#row_human_barcode_index_3').text()).toEqual('Empty')
+    expect(wrapper.find('#row_machine_barcode_index_3').text()).toEqual('Empty')
+    expect(wrapper.find('#row_replicates_index_3').text()).toEqual('78')
+  })
 })