From 077a137cf7e25f8638393b3f42956de45820f29a Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Wed, 2 Feb 2022 16:56:33 -0500
Subject: [PATCH 1/2] Improve frame slider response with base quads.

Before, once a base quad was requested, the frame slider would not
update the display until the base quad was loaded, even though it could
be substantially slower than loading individual tiles.
---
 CHANGELOG.md                                               | 1 +
 .../web_client/views/imageViewerWidget/setFrameQuad.js     | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e41b1a08..7a57bfc5e 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/girder/girder_large_image/web_client/views/imageViewerWidget/setFrameQuad.js b/girder/girder_large_image/web_client/views/imageViewerWidget/setFrameQuad.js
index 5ae1da8da..69e4bba66 100644
--- a/girder/girder_large_image/web_client/views/imageViewerWidget/setFrameQuad.js
+++ b/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;
 }

From 128fcba53888f745bd0049973fa21abb20c9fb36 Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Thu, 3 Feb 2022 10:01:55 -0500
Subject: [PATCH 2/2] Add a client test.

---
 .../web_client_specs/imageViewerSpec.js       | 53 +++++++++++++++++++
 test/test_files/multi_test_source3.yml        | 10 ++++
 2 files changed, 63 insertions(+)
 create mode 100644 test/test_files/multi_test_source3.yml

diff --git a/girder/test_girder/web_client_specs/imageViewerSpec.js b/girder/test_girder/web_client_specs/imageViewerSpec.js
index bf9f2f2e5..207a7f0ad 100644
--- a/girder/test_girder/web_client_specs/imageViewerSpec.js
+++ b/girder/test_girder/web_client_specs/imageViewerSpec.js
@@ -20,6 +20,59 @@ $(function () {
             girderTest.createUser(
                 'admin', 'admin@email.com', '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();
diff --git a/test/test_files/multi_test_source3.yml b/test/test_files/multi_test_source3.yml
new file mode 100644
index 000000000..d5df67e87
--- /dev/null
+++ b/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"