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

[ndg63276]

JIRA ticket: LIMS-1753

Summary:

When viewing a plate (eg https://ispyb.diamond.ac.uk/containers/cid/338352 ) it would be nice to click a button to show all the formulatrix images next to each other, as a long vertical list of full size images, The button could be next to the Inspections dropdown as it would show all images from a particular inspection.

Changes:

• Edit backend so that requesting images for a plate also gives the location for each, and can be sorted by location
• Add a See All Images button next to the inspections dropdown
• Add a dialog that opens, showing all the images from that inspection, and their location (in order)
• Fix callback logic in xhrimage.js to allow loading of images after dialog is created
• Use IntersectionObserver to lazy load the images
• Destroy the dialog on closure to ensure the observers are disconnected

To test:

• Go to a plate inspection page, eg /containers/cid/341680, check there is a "See All Images" button next to the inspections dropdown
• Check it brings up a dialog displaying all 192 inspection images
• Check the images are loaded lazily as you scroll down
• Check that scrolling is disabled on the page behind the dialog
• Close the dialog using either the [x], the close button, or the escape key, check scrolling is re-enabled
• Check changing the inspection dropdown gives different images (check network requests for this)
• Check other dialogs are unaffected, eg the Add Inspection dialog still allows scrolling

[gfrn]

If you drag the scroll bar all the way to the end, it attempts to load all images at once. At least on dev-6, this results in the server becoming unresponsive for a while afterwards. Maybe it needs some debouncing?

[ndg63276]

If you drag the scroll bar all the way to the end, it attempts to load all images at once. At least on dev-6, this results in the server becoming unresponsive for a while afterwards. Maybe it needs some debouncing?

It wasn't a problem for me locally, but I have added code to only load an image if it is in view for 200ms, so scrolling past doesn't trigger the load.