LIMS-128: Add plate view to queue page (#839)

Co-authored-by: Mark Williams <mark.williams@diamond.ac.uk>

Author: ndg63276

api/src/Page/Imaging.php

@@ -610,7 +610,7 @@ function _get_inspection_images()
             array_push($args, $this->arg('sid'));
         }
 
-        $images = $this->db->pq("SELECT i.containerid, si.containerinspectionid, ROUND(TIMESTAMPDIFF('HOUR', min(i2.bltimestamp), i.bltimestamp)/24,1) as delta, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI') as bltimestamp, sc.name as scorename, sc.score, sc.colour as scorecolour, max.maxscore, scorecolours.colour as maxscorecolour
+        $images = $this->db->pq("SELECT i.containerid, si.containerinspectionid, ROUND(TIMESTAMPDIFF('HOUR', min(i2.bltimestamp), i.bltimestamp)/24,1) as delta, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI') as bltimestamp, sc.name as scorename, sc.score, sc.colour as scorecolour, max.maxscore, scorecolours.colour as maxscorecolour, b.location
               FROM blsampleimage si
               LEFT OUTER JOIN blsampleimagescore sc ON sc.blsampleimagescoreid = si.blsampleimagescoreid
               INNER JOIN containerinspection i ON i.containerinspectionid = si.containerinspectionid
@@ -620,6 +620,7 @@ function _get_inspection_images()
               INNER JOIN dewar d ON d.dewarid = c.dewarid
               INNER JOIN shipping s ON s.shippingid = d.shippingid
               INNER JOIN proposal p ON p.proposalid = s.proposalid
+              INNER JOIN blsample b ON b.blsampleid = si.blsampleid
 
               LEFT OUTER JOIN (SELECT blsampleid, max(score) as maxscore
                                FROM BLSampleImageScore sc

api/src/Page/Sample.php

@@ -635,6 +635,22 @@ function _sub_samples()
         $third_inner_select_where = '';
         $args = array($this->proposalid);
 
+        if ($this->has_arg('s')) {
+            $st = sizeof($args) + 1;
+            $where .= " AND s.name LIKE CONCAT('%',:" . $st . ",'%')";
+            array_push($args, $this->arg('s'));
+        }
+
+        if ($this->has_arg('filter')) {
+            $filters = array(
+                'manual' => " AND ss.source='manual'",
+                'auto' => " AND ss.source='auto'",
+                'point' => " AND dp.experimentkind='SAD'",
+                'region' => " AND dp.experimentkind='MESH'",
+            );
+            $where .= $filters[$this->arg('filter')];
+        }
+
         if ($this->has_arg('sid')) {
             $where .= ' AND s.blsampleid=:' . (sizeof($args) + 1);
             $first_inner_select_where .= ' AND s.blsampleid=:' . (sizeof($args) + 2);

client/src/css/partials/_imaging.scss

@@ -226,3 +226,7 @@ input[name=gap] {
     text-align: center;
     box-sizing: content-box;
 }
+
+.plate-max-width {
+    max-width: 700px;
+}

client/src/js/modules/imaging/views/queuecontainer.js

@@ -12,6 +12,7 @@ define(['marionette',
 
     'modules/imaging/models/plan',
     'modules/imaging/collections/plans',
+    'modules/shipment/views/plate',
 
     'collections/beamlinesetups',
 
@@ -27,6 +28,7 @@ define(['marionette',
         SubSamples,
         TableView, table, FilterView, utils,
         DiffractionPlan, DiffractionPlans,
+        PlateView,
         BeamlineSetups,
         template, pointemplate, gridtemplate, xfetemplate,
         VMXiPoint, VMXiGrid, VMXiXFE,
@@ -360,53 +362,6 @@ define(['marionette',
             {id: 'manual', name: 'Manual' },
         ],
 
-        initialize: function(options) {
-            ClientFilterView.__super__.initialize.call(this, options)
-
-            this.filterablecollection = options.collection.fullCollection// || options.collection
-            this.shadowCollection = this.filterablecollection.clone()
-
-            this.listenTo(this.filterablecollection, 'add', function (model, collection, options) {
-                this.shadowCollection.add(model, options)
-            })
-            this.listenTo(this.filterablecollection, 'remove', function (model, collection, options) {
-                this.shadowCollection.remove(model, options)
-            })
-            this.listenTo(this.filterablecollection, 'sort', function (col) {
-                if (!this.query()) this.shadowCollection.reset(col.models)
-            })
-            this.listenTo(this.filterablecollection, 'reset', function (col, options) {
-                options = _.extend({reindex: true}, options || {})
-                if (options.reindex && options.from == null && options.to == null) {
-                    this.shadowCollection.reset(col.models)
-                    if (this.selected()) this._filter()
-                }
-            })
-        },
-
-        _filter: function() {
-            var id = this.selected()
-            this.trigger('selected:change', id, this.selectedName())
-            if (id) {
-                this.filterablecollection.reset(this.shadowCollection.filter(function(m) {
-                    if (id === 'region') {
-                        return m.get('X2') && m.get('Y2')
-
-                    } else if (id === 'point') {
-                        return m.get('X') && m.get('Y') && !m.get('X2')
-                    }
-                    else if (id === 'auto') {
-                        return m.get('SOURCE') == 'auto'
-
-                    } else if (id === 'manual') {
-                        return m.get('SOURCE') == 'manual'
-                    }
-                }), {reindex: false})
-            } else {
-                console.log('reset', this.shadowCollection)
-                this.filterablecollection.reset(this.shadowCollection.models, {reindex: false})
-            }
-        }
     })
 
 
@@ -517,6 +472,7 @@ define(['marionette',
             qfilt: '.qfilt',
             afilt: '.afilt',
             rimg: '.image',
+            plate: '.plate',
         },
 
         events: {
@@ -773,11 +729,20 @@ define(['marionette',
             return this.ui.notcompleted.is(':checked') ? 1 : null
         },
 
+        getSearch: function() {
+            return this.table.filter.query() || null
+        },
+
+        getFilter: function() {
+            return this.afilt.$el.find('.current').attr('id') || null
+        },
+
         refreshSubSamples: function() {
             this.subsamples.fetch().done(this.onSubsamplesReady.bind(this))
         },
 
-        initialize: function() {
+        initialize: function(options) {
+            this.params = options.params
             this._lastSample = null
             this._subsamples_ready = []
 
@@ -787,8 +752,9 @@ define(['marionette',
             this.unfilteredSubsamples = null
             this.subsamples = new SubSamples()
             this.subsamples.queryParams.cid = this.model.get('CONTAINERID')
-            this.subsamples.state.pageSize = 10
+            if (this.params.s) this.subsamples.queryParams.s = this.params.s
 
+            this.subsamples.state.pageSize = 10
             this._subsamples_ready.push(this.subsamples.fetch())
 
             this.inspections = new ContainerInspections()
@@ -842,6 +808,12 @@ define(['marionette',
             }
         },
 
+        onSubsamplesReady: function() {
+            this.getInspectionImages()
+            this.refreshQSubSamples()
+            this.listenTo(this.subsamples, 'change:isSelected', this.selectSubSample, this)
+            this.listenTo(this.subsamples, 'sync add remove change:READYFORQUEUE', this.refreshQSubSamples, this)
+        },
 
         populatePresets: function() {
             this.ui.preset.html(this.plans.opts())
@@ -878,7 +850,7 @@ define(['marionette',
         },
 
         selectSample: function() {
-            this.subsamples.at(0).set({ isSelected: true })
+            if (this.subsamples.at(0)) this.subsamples.at(0).set({ isSelected: true })
         },
 
         refreshQSubSamples: function() {
@@ -902,6 +874,8 @@ define(['marionette',
             this.ui.unqueuebutton.hide()
             this.subsamples.queryParams.nodata = this.getNoData.bind(this)
             this.subsamples.queryParams.notcompleted = this.getNotCompleted.bind(this)
+            this.subsamples.queryParams.s = this.getSearch.bind(this)
+            this.subsamples.queryParams.filter = this.getFilter.bind(this)
             this._ready.done(this.doOnRender.bind(this))
         },
 
@@ -927,6 +901,8 @@ define(['marionette',
                 collection: this.subsamples, 
                 columns: subSamplesColumns,
                 tableClass: 'subsamples', 
+                filter: 's',
+                search: this.params.s,
                 loading: true,
                 backgrid: { row: ClickableRow, emptyText: 'No sub samples found' },
                 noPageUrl: true,
@@ -992,11 +968,29 @@ define(['marionette',
             })
 
             this.qsmps.show(this.table2)
+
+            this.plateView = new PlateView({ collection: this.subsamples.fullCollection, type: this.type, inspectionimages: this.inspectionimages, showMaxScore: true })
+            this.listenTo(this.plateView, 'dropClicked', this.filterByLocation, this)
+            this.plate.show(this.plateView)
         },
 
         onShow: function() {
             this.rimg.show(this.image)
         },
+
+        filterByLocation: function(pos) {
+            if (!pos) return;
+            var namedrop = this.type.getName(pos)+'d'+this.type.getDrop(pos)
+            if (this.table.filter.query() === namedrop) {
+                this.table.filter.clearSearchBox()
+            } else {
+                this.table.filter.searchBox().val(namedrop)
+            }
+            this.table.filter._updateUrl()
+            this.subsamples.fetch().done(this.selectSample.bind(this))
+            var i = this.inspectionimages.findWhere({ LOCATION: pos.toString() })
+            this.image.setModel(i)
+        },
 
     })
 

client/src/js/modules/shipment/components/container-queue-wrapper.vue

@@ -43,6 +43,7 @@ export default {
     },
     props: {
         'cid': Number,
+        'search': String,
     },
     data: function() {
         return {
@@ -59,6 +60,7 @@ export default {
         options: function() {
             return {
                 model: this.model,
+                params: { s: this.search }
             }
         },
         proposalType : function() {
@@ -106,4 +108,4 @@ export default {
     }
 
 }
-</script>
+</script>

client/src/js/modules/shipment/router.js

@@ -10,7 +10,7 @@ define(['utils/lazyrouter'], function(LazyRouter) {
       'shipments/pickup/sid/:sid': 'rebook_pickup',
 
       'containers/cid/:cid(/iid/:iid)(/sid/:sid)': 'view_container',
-      'containers/queue/:cid': 'queue_container',
+      'containers/queue/:cid(/s/:s)': 'queue_container',
       'containers/add/did/:did': 'add_container',
       'containers/add/visit/:visit': 'add_container_visit',
       'containers(/s/:s)(/ty/:ty)(/page/:page)': 'container_list',
@@ -46,4 +46,4 @@ define(['utils/lazyrouter'], function(LazyRouter) {
     // controller: c
     rjsController: 'modules/shipment/controller',
   })
-})
+})

client/src/js/modules/shipment/routes.js

@@ -353,11 +353,12 @@ const routes = [
     }
   },
   {
-    path: '/containers/queue/:cid([0-9]+)',
+    path: '/containers/queue/:cid([0-9]+)(/s/)?:s([a-zA-Z0-9_-]+)?',
     name: 'container-queue',
     component: ContainerQueueWrapper,
     props: route => ({
       cid: +route.params.cid,
+      search: route.params.s || '',
     }),
   },
   {
@@ -537,4 +538,4 @@ const routes = [
   },
 ]
 
-export default routes
+export default routes

client/src/js/modules/shipment/views/plate.js

@@ -29,23 +29,26 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
             e.preventDefault()
             var pos = this._xy_to_drop(utils.get_xy(e,this.$el))
             if (pos) {
+                this.lastClickedDrop = pos
                 var drop = this.collection.findWhere({ LOCATION: pos.toString() })
 
                 this.trigger('plate:select')
+                this.trigger('dropClicked', pos)
                 if (drop) drop.set('isSelected', true)
                 this.drawPlate()
             }
         },
 
         initialize: function(options) {
             this.pt = this.getOption('type')
+            this.lastClickedDrop = null
             this.inspectionimages = options && options.inspectionimages
             if (this.inspectionimages) this.listenTo(this.inspectionimages, 'sync', this.render, this)
 
             this.hover = {}
             this.showImageStatus = this.getOption('showImageStatus')
             this.showSampleStatus = this.getOption('showSampleStatus')
-            this.showMaxScore = false
+            this.showMaxScore = this.getOption('showMaxScore')
 
             Backbone.Validation.bind(this, {
                 collection: this.collection
@@ -187,7 +190,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
                         var did = (k*this.pt.get('drop_per_well_x'))+j
                         if (this.pt.get('well_drop') > -1) {
                             if (did == this.pt.get('well_drop')) continue
-                                if (did > this.pt.get('well_drop')) did--;
+                            if (did > this.pt.get('well_drop')) did--;
                         }
 
                         var sampleid = i*this.pt.dropTotal()+did+1
@@ -198,6 +201,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
 
                         this.ctx.beginPath()
                         this.ctx.lineWidth = 1;
+
                         if (sample && sample.get('isSelected')) {
                             this.ctx.strokeStyle = 'cyan'
 
@@ -213,7 +217,12 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
                         } else this.ctx.strokeStyle = '#ddd'
 
                         this.ctx.rect(this.pt.get('drop_offset_x')+this.pt.get('offset_x')+row*(this.pt.get('well_width')+this.pt.get('well_pad'))+(j*this.pt.get('drop_widthpx')+this.pt.get('drop_pad')), this.pt.get('drop_offset_y')+this.pt.get('offset_y')+col*(this.pt.get('well_height')+this.pt.get('well_pad'))+(k*this.pt.get('drop_heightpx')+this.pt.get('drop_pad')), this.pt.get('drop_widthpx'), this.pt.get('drop_heightpx'))
-                            
+
+                        // Highlight last clicked drop
+                        if (sampleid == this.lastClickedDrop) {
+                            this.ctx.fillStyle = '#dddddd'
+                            this.ctx.fill()
+                        }
 
                         // Highlight Hovered Sample
                         if (this.hover == sampleid) {
@@ -234,7 +243,7 @@ define(['marionette', 'backbone', 'utils', 'backbone-validation'], function(Mari
                                 this.ctx.fill()
                             }
                         }
-                        
+
                         // Show status
                         if (sample && this.showSampleStatus) {
                             if (this.rankOption) {

client/src/js/templates/imaging/queuecontainer.html

@@ -18,7 +18,7 @@ <h1>Prepare Container for Data Collection</h1>
             <ul>
                 <li>
                     <span class="label">Container</span>
-                    <span class="NAME"><%-NAME%></span>
+                    <span class="NAME"><a href="/containers/cid/<%-CONTAINERID%>"><%-NAME%></a></span>
                 </li>
 
                 <li>
@@ -28,6 +28,8 @@ <h1>Prepare Container for Data Collection</h1>
             </ul>
         </div>
 
+        <div class="plate plate-max-width"></div>
+
         <h2>Available Samples</h2>
         <div class="filter">
             <span class="r">
@@ -38,9 +40,7 @@ <h2>Available Samples</h2>
                 <li><label><input type="checkbox" name="nodata" /> Without Data</label></li>
                 <li><label><input type="checkbox" name="notcompleted" /> Not Completed</label></li>
             </ul>
-        </div>
-        <div class="filter">
-            <div class="filter filter-nohide afilt"></div>
+            <span class="filter filter-nohide afilt"></span>
         </div>
         <div class="asamples"></div>
     </div>