LIMS-1753: View of all inspection images for a plate (#980)

* LIMS-1753: View of all inspection images for a plate

* LIMS-1753: Add flex wrap, dont load images if scrolled past

---------

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

Author: ndg63276

api/src/Page/Imaging.php

@@ -611,12 +611,25 @@ 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
+        $order = 'i.bltimestamp';
+
+        if ($this->has_arg('sort_by')) {
+            $cols = array(
+                'BLTIMESTAMP' => 'i.bltimestamp',
+                'LOCATION' => 'b.location+0'
+            );
+            $dir = $this->has_arg('order') ? ($this->arg('order') == 'asc' ? 'ASC' : 'DESC') : 'ASC';
+            if (array_key_exists($this->arg('sort_by'), $cols))
+                $order = $cols[$this->arg('sort_by')] . ' ' . $dir;
+        }
+
+        $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
               LEFT OUTER JOIN containerinspection i2 ON i.containerid = i2.containerid
 
+              INNER JOIN blsample b ON b.blsampleid = si.blsampleid
               INNER JOIN container c ON c.containerid = i.containerid
               INNER JOIN dewar d ON d.dewarid = c.dewarid
               INNER JOIN shipping s ON s.shippingid = d.shippingid
@@ -631,7 +644,7 @@ function _get_inspection_images()
 
               WHERE p.proposalid = :1 $where
               GROUP BY i.containerid, si.containerinspectionid, i.bltimestamp, si.blsampleimageid, si.blsampleid, si.micronsperpixelx, si.micronsperpixely, si.blsampleimagescoreid, si.comments, TO_CHAR(si.bltimestamp, 'DD-MM-YYYY HH24:MI'), sc.name, sc.score, sc.colour
-              ORDER BY i.bltimestamp", $args);
+              ORDER BY $order", $args);
 
 
         if ($this->has_arg('imid')) {

client/src/css/partials/_base.scss

@@ -21,6 +21,13 @@ body {
     }
 }
 
+body.dialog-open {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
 a {
     color: $link-color;
 

client/src/css/partials/_utility.scss

@@ -72,6 +72,10 @@
     flex: 0 0 auto
 }
 
+.wrap {
+    flex-wrap: wrap;
+}
+
 /* TODO: If we can ever get rid of this class, we can also remove the
    work-around in plotly support which needs to circumvent it */
 .active {

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

@@ -0,0 +1,94 @@
+define(['views/dialog',
+    'utils/xhrimage',
+    'modules/imaging/collections/inspectionimages',
+    ], function(DialogView,
+        XHRImage,
+        InspectionImages) {
+
+    return DialogView.extend({
+        template: '<div><ul class="images"></ul></div>',
+
+        ui: {
+            images: '.images',
+        },
+
+        initialize: function(options) {
+            // disable scrolling on the main page
+            $('body').addClass('dialog-open')
+            this.inspectionimages = new InspectionImages()
+            this.inspectionimages.queryParams.iid = options.CONTAINERINSPECTIONID
+            this.inspectionimages.queryParams.sort_by = 'LOCATION'
+        },
+
+        inspectionLoaded: function() {
+            var self = this
+            const loadDelay = 200 // milliseconds
+            this.imageTimers = new Map() // Track timers per image
+
+            this.observer = new IntersectionObserver(function(entries, observer) {
+                entries.forEach(entry => {
+                    const img = $(entry.target)
+
+                    if (entry.isIntersecting) {
+                        // Start a delayed load
+                        const timerId = setTimeout(() => {
+                            let im = new XHRImage()
+                            im.load(img.data('src'), function(loadedImage) {
+                                img.attr('src', loadedImage.src)
+                            })
+                            observer.unobserve(entry.target) // Unobserve after loading
+                            self.imageTimers.delete(entry.target)
+                        }, loadDelay)
+
+                        // Store timer so we can cancel if needed
+                        self.imageTimers.set(entry.target, timerId)
+                    } else {
+                        // No longer visible: cancel pending load if exists
+                        const timerId = self.imageTimers.get(entry.target)
+                        if (timerId) {
+                            clearTimeout(timerId)
+                            self.imageTimers.delete(entry.target)
+                        }
+                    }
+                })
+            })
+
+            this.inspectionimages.each(function(inspectionimage) {
+                let locationEl = $('<li></li>').text(inspectionimage.get('LOCATION'))
+
+                let imageEl = $('<img>').css('min-height', '400px')
+                    .data('src', app.apiurl + '/imaging/inspection/image/' + inspectionimage.get('BLSAMPLEIMAGEID') + '?f=1')
+
+                locationEl.append(imageEl)
+                self.ui.images.append(locationEl)
+                self.observer.observe(imageEl[0])
+            })
+        },
+
+        onRender: function() {
+            this.inspectionimages.fetch().done(this.inspectionLoaded.bind(this))
+        },
+
+        closeDialog: function(e) {
+            DialogView.prototype.closeDialog.apply(this, arguments)
+            this.destroy()
+        },
+        
+        onDestroy: function() {
+            // re-enable scrolling on the main page
+            $('body').removeClass('dialog-open')
+            if (this.observer) {
+                this.observer.disconnect()
+            }
+
+            // Cancel all pending image timers
+            if (this.imageTimers) {
+                for (const timer of this.imageTimers.values()) {
+                    clearTimeout(timer)
+                }
+                this.imageTimers.clear()
+            }
+        },
+    })
+
+})

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

@@ -21,6 +21,7 @@ define(['marionette',
     'modules/imaging/views/imagehistory',
 
     'modules/imaging/views/addinspection',
+    'modules/imaging/views/inspectionimages',
     'modules/imaging/views/actualschedule',
     'modules/imaging/views/subtosample',
 
@@ -64,7 +65,7 @@ define(['marionette',
     SingleSample,
 
     ContainerInspections, InspectionImage, InspectionImages, ImageViewer, ImageHistoryView,
-    AddInspectionView, ActualScheduleView, SubToSampleView,
+    AddInspectionView, InspectionImagesView, ActualScheduleView, SubToSampleView,
 
     ScreenComponentGroups,
     ScreenComponents,
@@ -286,6 +287,7 @@ define(['marionette',
             'click a.add_inspection': 'showAddInspection',
             'click a.view_sched': 'showViewSchedule',
             'click @ui.play': 'playInspection',
+            'click a.inspection_images': 'showInspectionImages',
 
             'dragover @ui.drop': 'dragHover',
             'dragleave @ui.drop': 'dragHover',
@@ -462,6 +464,20 @@ define(['marionette',
             } else this.ui.ins.val(m.get('CONTAINERINSPECTIONID')).trigger('change')
         },
 
+        showInspectionImages: function(e) {
+            e.preventDefault()
+            this.inspectionImagesView = new InspectionImagesView({ dialog: true, CONTAINERINSPECTIONID: this.ui.ins.val() })
+            app.dialog.show(new DialogView({
+                title: 'Inspection Images',
+                view: this.inspectionImagesView,
+                autoSize: true,
+                destroyOnClose: true,
+                dOptions: {
+                    height: $(window).height() * 0.8,
+                },
+            }))
+        },
+
 
         showViewSchedule: function(e) {
             e.preventDefault()

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

@@ -9,7 +9,7 @@ <h1>Add New Container Inspection</h1>
 
 
             <li>
-                <label>Inpsection Type
+                <label>Inspection Type
                     <span class="small">Type of container inspection</span>
                 </label>
                 <select name="INSPECTIONTYPEID"></select>

client/src/js/templates/shipment/containerplateimage.html

@@ -58,8 +58,11 @@ <h1 class="no_mobile">Container: <span class="NAME"><%-NAME%></span></h1>
             <ul>
                 <li class="nowrap">
                     <span class="label">Inspections</span>
-                    <select name="inspection"></select>
-                    <a href="#" class="button button-notext add_inspection tw-h-6"><i class="fa fa-plus"></i> <span>Add</span></a>
+                    <div class="flex wrap">
+                        <select name="inspection"></select>&nbsp;
+                        <a href="#" class="button inspection_images tw-h-6"><i class="fa fa-list-ul"></i> <span>See All Images</span></a>&nbsp;
+                        <a href="#" class="button add_inspection tw-h-6"><i class="fa fa-plus"></i> <span>Add Inspection</span></a>
+                    </div>
                 </li>
                 <li>
                     <span class="label">Movie</span>

client/src/js/utils/xhrimage.js

@@ -48,7 +48,7 @@ define(['marionette'], function() {
             var blob = new Blob([this.response], { type: mimeType })
             self.src = window.URL.createObjectURL(blob)
             app.imagecache[url] = self.src
-            if (callback) callback(this)
+            if (callback) callback(self)
         }
 
         xhr.onprogress = function(e) {

client/src/js/views/dialog.js

@@ -11,13 +11,19 @@ define(['marionette'], function(Marionette) {
         dOptions: {
         },
 
+        destroyOnClose: false,
+
         dialogOptions: function() {
+            var self = this
             return _.extend({}, {
                 title: this.getOption('title'),
                 width: 'auto',
                 height: 'auto',
                 resizable: false,
-                buttons: this.generateButtons(this.getOption('buttons'))
+                buttons: this.generateButtons(this.getOption('buttons')),
+                close: function() {
+                    if (self.getOption('destroyOnClose')) self.destroy();
+                },
             }, this.getOption('dOptions'))
         },
 
@@ -84,4 +90,4 @@ define(['marionette'], function(Marionette) {
 
     });
 
-})
+})