Thumbnail scrolling #207

will-moore · 2018-08-29T12:58:37Z

See https://trello.com/c/JLpfTbmW/4-improve-thumbnails-loading-display

Instead of clicking up/down to load more thumbnails, the thumbnail panel is created at the full size (with only the visible thumbnails loaded) and more thumbnails are loaded when we scroll.
There are lots of different cases to handle and a lot has changed so everything needs testing:

Expected behaviour: any thumbnails that appear in the panel should be loaded (no empty grey squares).
While actually scrolling we don't load thumbnails, since that would load the whole dataset if you scroll fast from one end to the other. Instead, wait until scrolling slows / stops, then load thumbs for visible thumbnails.
You can see when loading is happening in the devtools Network tab.
In all scenarios below, check thumbs on load, then scroll about, then refresh thumbs (when scrollbar is in various locations).
Check that IE works.

Scenarios to test:

Single image in 1 or more Datasets, double-clicked in webclient. url like /webclient/img_detail/4413/?dataset=1301
- Check that thumbs loaded from current parent Dataset (not a different Dataset that the image is in)
- Try double-clicking images in webclient near the start of the Dataset and at the end. Thumb panel in iviewer should scroll to the show the selected image.
- Try with a small Dataset (< 5 images) and as large as possible.
- Remove the ?datasets=ID from the URL and reload. If image is in single Dataset, thumbs should be loaded. If more than 1 Dataset, thumbnail panel hidden.
Multiple selected images > Open with iviewer. Url like /iviewer/?images=4402,4403,4404,4405
Orphaned image, double-clicked in webclient. e.g. webclient/img_detail/57012/ should hide thumbnail panel.
Well - openwith > iviewer. Url /iviewer/?well=148 First image should be selected.
Datasets - openwith > iviewer. /iviewer/?dataset=10480 First image selected.

mtbc · 2018-08-30T08:30:08Z

I suspect that dropping IE11 (or not) should be a clear, conscious decision given that we often choose to support old stuff.

jburel · 2018-08-31T13:04:02Z

Basic testing:

Open dataset with < 10 Images by double-clicking on an image. The correct thumbnails were loaded
Open a larger dataset (~80 images) double click on the first image visible thumbnails loaded. Scroll down to the bottom: more visible thumbnails are then loaded. Moving backward forward to load the rest of the thumbnails
Repeat the step above but this time double-click on the last image in the dataset. iviewer opens the correct image and the list of thumbnails displayed the portion of the list containing the image

jburel · 2018-09-13T14:31:03Z

Testing in Chrome

Remove the ?datasets=ID from the URL and reload. If image is in single Dataset, thumbs should be loaded. If more than 1 Dataset, thumbnail panel hidden.
Datasets - openwith > iviewer. /iviewer/?dataset=10480 First image selected.
Well - openwith > iviewer. Url /iviewer/?well=148 First image should be selected.
Orphaned image, double-clicked in webclient. e.g. webclient/img_detail/57012/ should hide thumbnail panel.

This works fine

Multiple selected images > Open with iviewer. Url like /iviewer/?images=4402,4403,4404,4405

If I select all the images in the dataset All the thumbnails are loaded
but If I open the dataset or double click on a thumbnail to open the viewer. Only few thumbnails are loaded.

jburel · 2018-09-13T14:31:24Z

I don't think we can drop IE

jburel · 2018-09-13T14:38:58Z

Safari:

Clicking on well with only one field does not hide the thumbnails panel. It is empty

The problem only shows if the well has one field

jburel · 2018-09-13T14:50:42Z

Noticeable loading difference between FF and chrome
In FF I have time to see "Not Found"
even for small dataset

jburel · 2018-09-13T14:53:09Z

FF or Vivaldi
Same problem as the one described in #207 (comment)

This time
it does not work for well with multiple fields. (user-1 testImportCellWorksPlate)

mtbc · 2018-09-13T14:54:51Z

I too saw that "Not Found": https://openmicroscopy.slack.com/archives/C0K5EED3R/p1535619171000100

jburel · 2018-09-13T15:02:22Z

kymograph is correctly displayed cc @pwalczysko

jburel · 2018-09-14T10:51:37Z

While testing 5.4.8
Looking at data belonging to another user when that user has not viewed the image
leads to "Not found" in the left-hand panel and empty bird eye view
we should handle such case a bit better

will-moore · 2018-09-14T13:58:15Z

@jburel Re: "If I select all the images in the dataset All the thumbnails are loaded
but If I open the dataset or double click on a thumbnail to open the viewer. Only few thumbnails are loaded."
As long as all the thumbnails that are visible are loaded then I think this is OK?
I assume that the number of images listed with ?image=1,2,3 is not going to be larger than a safe number of thumbnails to load (e.g. 200, or even more).

jburel · 2018-09-14T14:07:36Z

All the thumbnails were loaded even the non visible when I do a selection of images
I probably select ~100

will-moore · 2018-09-14T14:55:01Z

Also noticed that e.g. http://web-dev-merge.openmicroscopy.org/iviewer/?well=339085 (user-1) doesn't work (no thumbnails or image loaded).

will-moore · 2018-09-14T15:00:21Z

Re: #207 (comment) The 'Not Found' in this case is the same as previously (not related to this PR). To fix that we could use /webclient/render_thumbnail/ID instead of /webgateway/render_thumbnail. Then we'd get the 'No Image' icon same as webclient?

will-moore · 2018-09-17T10:55:39Z

Fixed the placeholder "Not Found" while images loading in Firefox.
Also fixed bugs with SPW images in a Well (/webclient/img_detail/ID/) and opening Well directly (/iviewer/?well=ID). In both cases, the thumbnails within the Well should be shown in the thumbnail_slider, even if it's only 1 field (same behaviour as before).

mtbc · 2018-09-18T07:01:06Z

src/app/thumbnail-slider.js

+            count = 0;
+        }
+        this.thumbnails.length = count;
+        this.thumbnails.fill({'version': 0, 'title': 'unloaded'});


Given #207 (comment) is this okay?

jburel · 2018-09-19T10:36:41Z

Wells with 1 or multiple fields are now correctly displayed in FF, Vivaldi and Safari
I also select a large number of images, loading occurred when scrolling down the list

No cover yet: IE testing

jburel · 2018-09-19T10:37:20Z

src/app/thumbnail-slider.js


    /**
-     * the end index of the displayed thumbnails
+     * height of slider, so we which thumbs have scrolled into view


missing verb

jburel · 2018-09-19T10:37:36Z

src/app/thumbnail-slider.js


    /**
     * @constructor
     * @param {Context} context the application context (injected)
     * @param {BindingEngine} bindingEngine the BindingEngine (injected)
     */
-    constructor(context, element, bindingEngine) {
+    constructor(context, element, bindingEngine, taskQueue) {


Declare new parameter

jburel · 2018-09-19T10:38:49Z

src/app/thumbnail-slider.js

+    /**
+     * Loads unloaded thumbnails that scrolled into the thumbnail panel
+     *
+     * @param {number} scrollTop Current scroll position of the panel


declare parameter

jburel · 2018-09-19T10:40:18Z

src/app/thumbnail-slider.js

-     * Adds thumbnails to then be loaded.
+     * Adds thumbnails with Image IDs to this.thumbnails array.
+     * We create a new list from old, replacing the thumbnails (instead of
+     * modifying the old list) to make sure the changes is observed and


jburel · 2018-09-19T10:40:44Z

src/app/thumbnail-slider.js

+    /**
+     * Adds thumbnails with Image IDs to this.thumbnails array.
+     * We create a new list from old, replacing the thumbnails (instead of
+     * modifying the old list) to make sure the changes is observed and


jburel · 2018-09-19T10:40:58Z

src/app/thumbnail-slider.js

+     * modifying the old list) to make sure the changes is observed and
+     * UI updates.
+     *
+     * @param {Array.<Object>} thumbnails the thumbnails to be added


thumbnails not a parameter

jburel · 2018-09-20T12:52:08Z

Testing in IE 11
it works nicely too

will-moore added 7 commits August 20, 2018 23:46

Started work on scrolling thumbnails to load

1e39a36

Placeholders for unloaded thumbs, scrollTop to initial selected thumb

abe0c14

Try to simplify, without loading thumbs reverse etc

a4cdf68

Try to cleanup handling of paths_to_object response

6a32544

Add setThumbnailsFromImageIds(ids) if we have ids in hand

62136e4

Load any unloaded thumbs in scoller window

4598fa3

Doc strings

04f8db4

Handle loading of all visible thumbs on init or refresh

6bf3920

will-moore added 4 commits September 15, 2018 23:05

Use webclient/render_thumbnail/ for thumbnail slider

fdd40b8

Fix 'Not Found' placeholder in Firefox

0c2511b

Add comment to html

e43ab23

Fix setting parent.id for Well

a3f3bb1

mtbc reviewed Sep 18, 2018

View reviewed changes

will-moore added 2 commits September 18, 2018 13:28

Don't use array.fill() for IE

ffb8bfa

Code cleanup, remove console.logs

5ab99be

jburel reviewed Sep 19, 2018

View reviewed changes

Docstring fixes for thumbnail-slider.js

0b929de

jburel merged commit 3c4a7cb into ome:master Sep 20, 2018

jburel added this to the 0.6.0 milestone Nov 14, 2018

will-moore mentioned this pull request Mar 6, 2019

fix 11 thumbnails in Dataset #246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Thumbnail scrolling #207

Thumbnail scrolling #207

will-moore commented Aug 29, 2018 •

edited

mtbc commented Aug 30, 2018

jburel commented Aug 31, 2018 •

edited

jburel commented Sep 13, 2018 •

edited

jburel commented Sep 13, 2018

jburel commented Sep 13, 2018 •

edited

jburel commented Sep 13, 2018

jburel commented Sep 13, 2018 •

edited

mtbc commented Sep 13, 2018

jburel commented Sep 13, 2018

jburel commented Sep 14, 2018

will-moore commented Sep 14, 2018

jburel commented Sep 14, 2018

will-moore commented Sep 14, 2018

will-moore commented Sep 14, 2018

will-moore commented Sep 17, 2018

mtbc Sep 18, 2018

jburel commented Sep 19, 2018

jburel Sep 19, 2018

jburel Sep 19, 2018

jburel Sep 19, 2018

jburel Sep 19, 2018

jburel Sep 19, 2018

jburel Sep 19, 2018

jburel commented Sep 20, 2018

Thumbnail scrolling #207

Thumbnail scrolling #207

Conversation

will-moore commented Aug 29, 2018 • edited

mtbc commented Aug 30, 2018

jburel commented Aug 31, 2018 • edited

jburel commented Sep 13, 2018 • edited

jburel commented Sep 13, 2018

jburel commented Sep 13, 2018 • edited

jburel commented Sep 13, 2018

jburel commented Sep 13, 2018 • edited

mtbc commented Sep 13, 2018

jburel commented Sep 13, 2018

jburel commented Sep 14, 2018

will-moore commented Sep 14, 2018

jburel commented Sep 14, 2018

will-moore commented Sep 14, 2018

will-moore commented Sep 14, 2018

will-moore commented Sep 17, 2018

mtbc Sep 18, 2018

Choose a reason for hiding this comment

jburel commented Sep 19, 2018

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel Sep 19, 2018

Choose a reason for hiding this comment

jburel commented Sep 20, 2018

will-moore commented Aug 29, 2018 •

edited

jburel commented Aug 31, 2018 •

edited

jburel commented Sep 13, 2018 •

edited

jburel commented Sep 13, 2018 •

edited

jburel commented Sep 13, 2018 •

edited