LIMS-1701: Make Xray Centring results an openable table (#935)

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

Author: ndg63276

api/src/Page/DC.php

@@ -1508,20 +1508,25 @@ function _grid_xrc()
         $info = $this->db->pq("SELECT dc.datacollectiongroupid, dc.datacollectionid,
                 xrc.xraycentringtype as method, xrcr.xraycentringresultid,
                 xrcr.centreofmassx as x, xrcr.centreofmassy as y, xrcr.centreofmassz as z,
-                xrcr.totalcount
+                xrcr.totalcount,
+                xrcr.boundingboxmaxx-xrcr.boundingboxminx as sizex,
+                xrcr.boundingboxmaxy-xrcr.boundingboxminy as sizey,
+                xrcr.boundingboxmaxz-xrcr.boundingboxminz as sizez,
+                s.blsampleid, s.name
                 FROM datacollection dc
                 INNER JOIN xraycentring xrc ON xrc.datacollectiongroupid = dc.datacollectiongroupid
                 INNER JOIN xraycentringresult xrcr ON xrcr.xraycentringid = xrc.xraycentringid
-                WHERE dc.datacollectionid = :1 ", array($this->arg('id')));
+                LEFT JOIN blsample s ON xrcr.blsampleid = s.blsampleid
+                WHERE dc.datacollectionid = :1
+                ORDER BY xrcr.totalcount desc", array($this->arg('id')));
 
         if (!sizeof($info))
             $this->_output(array('total' => 0, 'data' => array()));
         else {
             foreach ($info as &$i) {
                 foreach ($i as $k => &$v) {
-                    if ($k == 'METHOD')
-                        continue;
-                    $v = round(floatval($v), 2);
+                    if ($k == 'X' || $k == 'Y' || $k == 'Z')
+                        $v = number_format($v, 1);
                 }
             }
             $this->_output(array('total' => sizeof($info), 'data' => $info));

client/src/js/modules/dc/collections/gridxrc.js

@@ -0,0 +1,16 @@
+define(['backbone'], function(Backbone) {
+
+  return Backbone.Collection.extend({
+
+    url: function() { return '/dc/grid/xrc/' + this.id },
+
+    initialize: function(options) {
+      this.id = options.id
+    },
+
+    parse: function(r) {
+      return r.data
+    },
+  })
+
+})

client/src/js/modules/dc/models/gridxrc.js

@@ -10,7 +10,7 @@ define(['marionette',
     'modules/dc/views/dccomments', 
     'modules/dc/views/attachments',
     'modules/dc/views/apstatusitem',
-    'modules/dc/models/gridxrc',
+    'modules/dc/views/gridxrc',
     'templates/dc/grid.html', 'backbone-validation'], 
     function(Marionette, DCBase, TabView, AddToProjectView, Editable, Backbone, ImageViewer, GridPlot, 
       DialogView, DCCommentsView, AttachmentsView, APStatusItem, GridXRC,
@@ -22,6 +22,7 @@ define(['marionette',
     apStatusItem: APStatusItem,
 
     events: {
+      'click .holder h1.xrc': 'loadXRC',
       'click @ui.zoom': 'toggleZoom'
     },
 
@@ -136,24 +137,16 @@ define(['marionette',
             }
 
             if (state >= 2) {
-                this.xrc = new GridXRC({ id: this.model.get('ID') })
-                this.xrc.fetch({
-                    success: this.showXRC.bind(this)
-                })
+                this.xrc = new GridXRC({ id: this.model.get('ID'), el: this.$el.find('div.xrc') })
             }
         }
     },
 
-    showXRC: function() {
-        var xrcs = this.xrc.get('data')
-        var t = ''
-        for (var i = 0; i < xrcs.length; i++) {
-            t += ' - Crystal '+(i+1)+': X Pos '+xrcs[i]['X']+' Y Pos '+xrcs[i]['Y']+' Z Pos '+xrcs[i]['Z']+' Strength '+xrcs[i]['TOTALCOUNT']
-        }
-        if (xrcs.length > 0) {
-            this.ui.holder.prepend('Method: '+xrcs[0]['METHOD']+t)
+    loadXRC: function(e) {
+        if (!this.xrc) {
+            this.xrc = new GridXRC({ id: this.model.get('ID'), el: this.$el.find('div.xrc') })
         } else {
-            this.ui.holder.prepend('Found no diffraction')
+            this.xrc.$el.slideToggle()
         }
     },
 

client/src/js/modules/dc/views/grid.js

@@ -0,0 +1,49 @@
+define(['marionette',
+    'modules/dc/collections/gridxrc',
+    'views/table',
+    'utils/table'], function(Marionette, GridXRC, TableView, table) {
+
+    var linkIfSample = function(data) {
+        if (data.BLSAMPLEID) {
+            return '<a href="/samples/sid/'+data.BLSAMPLEID+'"><i class="fa fa-search"></i> '+data.NAME+'</a>'
+        } else {
+            return ''
+        }
+    }
+
+    return Marionette.LayoutView.extend({
+        template: _.template('<div class="summary"></div>'),
+        regions: {
+            summary: '.summary',
+        },
+
+        initialize: function(options) {
+            this.collection = new GridXRC({ id: options.id })
+            this.collection.fetch().done(this.render.bind(this))
+        },
+
+        onRender: function() {
+            this.summary.show(new TableView({
+                className: 'ui-tabs-panel',
+                noTableHolder: true,
+                collection: this.collection,
+                columns: [
+                    { label: 'Sample', cell: table.TemplateCell, template: d=>linkIfSample(d), editable: false },
+                    { name: 'METHOD', label: 'Method', cell: 'string', editable: false },
+                    { name: 'TOTALCOUNT', label: 'Strength', cell: 'string', editable: false },
+                    { name: 'X', label: 'Pos X (Boxes)', cell: 'string', editable: false },
+                    { name: 'Y', label: 'Pos Y (Boxes)', cell: 'string', editable: false },
+                    { name: 'Z', label: 'Pos Z (Boxes)', cell: 'string', editable: false },
+                    { name: 'SIZEX', label: 'Size X (Boxes)', cell: 'string', editable: false },
+                    { name: 'SIZEY', label: 'Size Y (Boxes)', cell: 'string', editable: false },
+                    { name: 'SIZEZ', label: 'Size Z (Boxes)', cell: 'string', editable: false },
+                ],
+                pages: false,
+                backgrid: {
+                    emptyText: 'No xray centring results available for this data collection',
+                },
+            }))
+        },
+    })
+
+})

client/src/js/modules/dc/views/gridxrc.js

@@ -32,6 +32,7 @@ <h1 class="title"></h1>
     <a href="#" class="button zoom"><i class="fa fa-search-plus"></i> <span>Enlarge</span></a>
 
     <div class="holder">
-        <h1 title="Xray Centring Status and Results" class="xrc"><span><i class="fa fa-spinner fa-spin"></i></span></h1>
+        <h1 title="Xray Centring Status and Results" class="xrc">Grid Scan Processing<span><i class="fa fa-spinner fa-spin"></i></span></h1>
+        <div class="xrc"></div>
     </div>
 </div>