[BUG] Openseadragon displays two canvases

[wgilling]

In some situations, the OpenSeadragon field formatter is triggering two canvas objects to be created.

For added context, another developer here said

For the double openseadragon viewer (in my case it was triple?!?!?!), there's no obvious wrong thing we're doing. Display config seems correct. The object and media are tagged correctly. The view that renders OSD seems correct. If I go to edit it and feed it a node id and try to do a little preview thing, I only get one viewer. Yet on the node page, there's one canvas that contains multiple containers.

It is possible that something in our MODULE_entity_view hook is causing this to happen.

I patched the javascript code that creates them so that ONLY one canvas is ever created, but that is a bandaid and the real reason is not known yet.

index cec89d8..47eb73b 100644
--- a/js/openseadragon_viewer.js
+++ b/js/openseadragon_viewer.js
@@ -12,6 +12,7 @@
      * @type {string}
      */
     var base = '#openseadragon-viewer';
+    var included_seadragon = false;
 
     /**
      * Initialize the OpenSeadragon Viewer.
@@ -19,11 +20,14 @@
     Drupal.behaviors.openSeadragon = {
         attach: function(context, settings) {
             Object.keys(settings.openseadragon).forEach(function(osdViewerId) {
-              // Use custom element #id if set.
-              base = '#' + osdViewerId;
-              $(base, context).once('openSeadragonViewer').each(function () {
+              if (!included_seadragon) {
+                // Use custom element #id if set.
+                base = '#' + osdViewerId;
+                $(base, context).once('openSeadragonViewer').each(function () {
+                    included_seadragon = true;
                     Drupal.openSeadragonViewer[base] = new Drupal.openSeadragonViewer(base, settings.openseadragon[osdViewerId]);
-              });
+                });
+              }
             });
         },
         detach: function() {

What steps does it take to reproduce the issue?
On any isle site, make an object with Model = "Image" tag it with Display Hints = "Openseadragon", add a media "File" and upload a small TIFF file. (I am not sure if any context rule needs to be set up or a specific display mode, but this is happening when the View the object.

• When does this issue occur?
  When an object is viewed.

• Which page does it occur on?

• What happens?
  See screenshot above... the regular openseadragon div contains two or more canvas divs.

• What did you expect to happen?
  Only one canvas for each display of a media.

Which version of Islandora are you using?
2.x-dev
The version of openseadragon is pulled in via our composer.json: "https://github.com/openseadragon/openseadragon/releases/download/v2.4.2/openseadragon-bin-2.4.2.zip"

Which method did you use to install your Islandora instance? (manually, ISLE, playbook, etc.)
Born Digital composer

Any related open or closed issues to this bug report?
none

Screenshots:
see above

[jordandukart]

Possibly related to https://www.drupal.org/node/3158256 and how the rollout for it went which at one point introduced a regression.

[ruebot]

I've seen this happening periodically on our dev build.

[wgilling]

I have not had any time to investigate this issue further, but I am leaning toward the above mentioned "once()" reason that Jordan mentioned. I should be able to look at this in the next two weeks -- but in the meanwhile, this patch would "fix" the issue on any given site -- provided that any one page does not need to display more than one openseadragon viewer at a time.

[wgilling]

When this is merged, the issue may be fixed https://www.drupal.org/node/3158256

[wgilling]

I wonder if we can just change the javascript to have the second parameter in the once() call. From the Drupal page https://www.drupal.org/node/3158256 referenced above, it states:

once API

The once functions take 2 parameters, a string id without spaces and an array-like object. The recommended way to use it is to call it with the string you would use in a querySelectorAll() call. You can only use once with objects that are instances of Element, which means you can not use it with the document or window object. If you need a page-level element please use 'html' or 'body' as the selector used in the once call: once('my-global-once', 'html').

[jordandukart]

Closing as Islandora/openseadragon#48 was merged.