Improve frame slider response with base quads.

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Add more opacity support for image overlays ([#761](../../pull/761))
 - Make annotation schema more uniform ([#763](../../pull/763))
 - Improve TileSource class repr ([#765](../../pull/765))
+- Improve frame slider response with base quads ([#771](../../pull/771))
 
 ## Version 1.10.0
 

girder/girder_large_image/web_client/views/imageViewerWidget/setFrameQuad.js

@@ -192,6 +192,9 @@ function setFrameQuad(tileinfo, layer, options) {
                         options.progress(status);
                     } catch (err) {}
                 }
+                if (status.frame !== undefined) {
+                    layer.baseQuad = Object.assign({}, status.quads[status.framesToIdx[status.frame]]);
+                }
             };
         } else {
             ((idx) => {
@@ -233,10 +236,10 @@ function setFrameQuad(tileinfo, layer, options) {
     status.images[0].src = status.src[0];
 
     layer.setFrameQuad = function (frame) {
-        if (status.framesToIdx[frame] !== undefined) {
+        if (status.framesToIdx[frame] !== undefined && status.loaded) {
             layer.baseQuad = Object.assign({}, status.quads[status.framesToIdx[frame]]);
-            status.frame = frame;
         }
+        status.frame = frame;
     };
     layer.setFrameQuad.status = status;
 }

girder/test_girder/web_client_specs/imageViewerSpec.js

@@ -20,6 +20,59 @@ $(function () {
             girderTest.createUser(
                 'admin', '[email protected]', 'Admin', 'Admin', 'testpassword')();
         });
+    });
+    describe('test accessing a multi-frame image', function () {
+        it('go to users page', girderTest.goToUsersPage());
+
+        it('Got to a user page and then the Public folder', function () {
+            runs(function () {
+                $('a.g-user-link').trigger('click');
+            });
+            waitsFor(function () {
+                return $('button:contains("Actions")').length === 1;
+            }, 'user page to appear');
+            waitsFor(function () {
+                return $('a.g-folder-list-link:contains(Public):visible').length === 1;
+            }, 'the Public folder to be clickable');
+            runs(function () {
+                $('a.g-folder-list-link:contains(Public)').trigger('click');
+            });
+            waitsFor(function () {
+                return $('.g-folder-actions-button:visible').length === 1;
+            }, 'the folder to appear');
+        });
+        it('upload test file', function () {
+            girderTest.waitForLoad();
+            runs(function () {
+                $('.g-folder-list-link:first').click();
+            });
+            girderTest.waitForLoad();
+            runs(function () {
+                girderTest.binaryUpload('${large_image}/../../test/test_files/multi_test_source3.yml');
+            });
+            girderTest.waitForLoad();
+        });
+        it('navigate to item and wait for an image', function () {
+            runs(function () {
+                $('a.g-item-list-link').click();
+            });
+            girderTest.waitForLoad();
+            waitsFor(function () {
+                return $('.g-item-image-viewer-select').length !== 0;
+            }, 'image to load', 15000);
+        });
+        it('adjust frame slider', function () {
+            runs(function () {
+                expect($('.image-controls-frame').length).toBe(1);
+                $('.image-controls-number').val(1).trigger('input');
+            });
+            girderTest.waitForLoad();
+            waitsFor(function () {
+                return $('.image-controls-slider').val() === '1';
+            }, 'control slider to update');
+        });
+    });
+    describe('upload test file', function () {
         it('go to collections page', function () {
             runs(function () {
                 $("a.g-nav-link[g-target='collections']").click();

test/test_files/multi_test_source3.yml

@@ -0,0 +1,10 @@
+---
+sources:
+  - sourceName: test
+    path: __none__
+    params:
+      sizeX: 2000
+      sizeY: 1250
+      fractal: True
+      # c,z,t,xy OR frames
+      frames: "1,3,1,1"