LIMS-121: Allow use of VMXm Gridboxes and Cartridges (#732)

* LIMS-121: Allow use of VMXm Gridboxes and Cartridges * LIMS-121: Undo unnecessary change * Update client/src/js/modules/shipment/components/container-view-wrapper.vue Co-authored-by: Guilherme Francisco <[email protected]> * LIMS-121: Pass container type name into the view --------- Co-authored-by: Mark Williams <[email protected]> Co-authored-by: Guilherme Francisco <[email protected]>
DiamondLightSource · Jul 9, 2024 · ce82eab · ce82eab
1 parent b22afc0
commit ce82eab
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 11 deletions.
diff --git a/api/src/Page/Sample.php b/api/src/Page/Sample.php
@@ -1342,8 +1342,10 @@ function _update_sample_components($initial, $final, $amounts, $crystalid)
 
     function _add_sample()
     {
-        if (!$this->has_arg('prop'))
-            $this->_error('No proposal specified');
+        if (!$this->has_arg('prop')) {
+            $this->_output(array());
+            return;
+        }
 
         // Register entire container
         if ($this->has_arg('collection')) {

diff --git a/client/src/images/block-4_no_labels_470x470.png b/client/src/images/block-4_no_labels_470x470.png
diff --git a/client/src/images/cartridge_no_labels_470x470.png b/client/src/images/cartridge_no_labels_470x470.png
diff --git a/client/src/images/gridbox_no_labels_470x470.png b/client/src/images/gridbox_no_labels_470x470.png
diff --git a/client/src/js/modules/shipment/components/container-view-wrapper.vue b/client/src/js/modules/shipment/components/container-view-wrapper.vue
@@ -123,7 +123,8 @@ export default {
       // This is the current logic to determine the plate type
       // Anything other than Box, Puck or PCRStrip
       // TODO - get container types from data base
-      let is_plate = ['box', 'puck', 'pcrstrip', 'block-4', null].indexOf(containerType) == -1 && containerType.indexOf('puck') == -1
+      let puckTypes = ['cartridge', 'box', 'puck', 'pcrstrip', 'block-4']
+      let is_plate = containerType !== null && (!puckTypes.some(v => containerType.includes(v)))
 
       return is_plate
     },

diff --git a/client/src/js/modules/shipment/components/puck-view.vue b/client/src/js/modules/shipment/components/puck-view.vue
@@ -50,16 +50,38 @@ export default {
     }
   },
   data() {
-    let sampleCentres, sampleRadius, sampleHighlightRadius
-    if (this.container.capacity === "4") {
+    let sampleCentres, sampleRadius, sampleHighlightRadius, containerImage
+    if (this.container.containerType === "VMXm-Cartridge") {
       sampleCentres = [
-        [200, 150],
-        [320, 150],
-        [200, 270],
-        [320, 270],
+        [235, 75],
+        [235, 155],
+        [235, 235],
+        [235, 315],
+        [235, 395],
+      ]
+      sampleRadius = 35
+      sampleHighlightRadius = 30
+      containerImage = '/assets/images/cartridge_no_labels_470x470.png'
+    } else if (this.container.containerType === "VMXm-GridBox") {
+      sampleCentres = [
+        [315, 310],
+        [315, 160],
+        [155, 160],
+        [155, 310],
       ]
       sampleRadius = 50
+      sampleHighlightRadius = 19
+      containerImage = '/assets/images/gridbox_no_labels_470x470.png'
+    } else if (this.container.capacity === "4") {
+      sampleCentres = [
+        [152.5, 152.5],
+        [317.5, 152.5],
+        [152.5, 317.5],
+        [317.5, 317.5],
+      ]
+      sampleRadius = 75
       sampleHighlightRadius = 60
+      containerImage = '/assets/images/block-4_no_labels_470x470.png'
     } else {
       sampleCentres = [
         [235, 157],
@@ -81,6 +103,7 @@ export default {
       ]
       sampleRadius = 44
       sampleHighlightRadius = 35
+      containerImage = '/assets/images/puck_no_labels_470x470.png'
     }
     return {
       // Define geometry of puck locations
@@ -91,7 +114,7 @@ export default {
       // Centre coordinates of puck 470x470 pixels
       // Changing the background image would require changing the centres
       centres: sampleCentres,
-      puckImage: '/assets/images/puck_no_labels_470x470.png',
+      puckImage: containerImage,
       // Holders for svg elements used in updates
       graphic: null, // Holder for svg puck graphic
       labels: null, // Holder for text labels
@@ -147,6 +170,11 @@ export default {
           .append('svg')
           .attr('viewBox', viewBox.join(','))
           .attr('preserveAspectRatio', 'xMaxYMax meet')
+      // Add the background image
+      svg.append('image')
+          .attr('href', this.puckImage)
+          .attr('width', 470)
+          .attr('height', 470)
       // Chart area
       this.graphic = svg.append('g')
       this.labels = svg.append('g')

diff --git a/client/src/js/modules/types/mx/samples/valid-container-graphic.vue b/client/src/js/modules/types/mx/samples/valid-container-graphic.vue
@@ -96,6 +96,7 @@ export default {
       geometry.drops.w = this.containerType.DROPWIDTH
       geometry.well = this.containerType.WELLDROP
       geometry.columns = this.containerType.WELLPERROW
+      geometry.containerType = this.containerType.NAME
       return geometry
     },
     selectedDrops() {

diff --git a/client/src/js/modules/types/mx/shipment/views/mx-container-add.vue b/client/src/js/modules/types/mx/shipment/views/mx-container-add.vue
@@ -405,6 +405,7 @@ const INITIAL_CONTAINER_TYPE = {
   DROPPERWELLY: null,
   DROPHEIGHT: null,
   DROPWIDTH: null,
+  NAME: null,
   WELLDROP: -1,
   WELLPERROW: null,
 }
@@ -517,8 +518,9 @@ export default {
           this.CONTAINERTYPE = type.get('NAME')
           const nameToLower = this.CONTAINERTYPE.toLowerCase()
           this.containerType = Object.assign(INITIAL_CONTAINER_TYPE, type.toJSON())
+          const puckTypes = ['cartridge', 'box', 'puck', 'block-4']
 
-          if (nameToLower.includes('puck') || nameToLower.includes('block')) {
+          if (puckTypes.some(v => nameToLower.includes(v))) {
             this.plateType = 'puck'
           } else if (nameToLower.includes('pcrstrip')) {
             this.plateType = 'pcr'