From 1111a12554e217e7b3f3ef42e5b081a2cb859863 Mon Sep 17 00:00:00 2001
From: Tom Kazimiers <tom@voodoo-arts.net>
Date: Wed, 7 Aug 2024 14:59:24 +0200
Subject: [PATCH] Pixi tile layer: attempt repeated redraws after 3sec wait

The tile layer gives allows the image loading to take three seconds max.
So far it just stopped updating afterwards, even though images are still
loaded. A manual update like with the help of panning the view would
usually show additionally loaded data. With this commit, image data is
attempted to render every 500ms for five seconds after this three second
period has ended. If a new redraw happens in-between, the old interval
is canceled.
---
 .../static/js/layers/pixi-tile-layer.js       | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/django/applications/catmaid/static/js/layers/pixi-tile-layer.js b/django/applications/catmaid/static/js/layers/pixi-tile-layer.js
index 09a9605a71..9ca5d1dea5 100644
--- a/django/applications/catmaid/static/js/layers/pixi-tile-layer.js
+++ b/django/applications/catmaid/static/js/layers/pixi-tile-layer.js
@@ -263,11 +263,32 @@
       // not it has loaded. Do this before loading tiles in case they load
       // immediately, so that the buffer will be cleared.
       window.clearTimeout(this._swapBuffersTimeout);
-      this._swapBuffersTimeout = window.setTimeout(this._swapBuffers.bind(this, true), 3000);
+      const swapBufferTimeoutHandler = () => {
+        const nToLoad = this._swapBuffers(true);
+        if (nToLoad > 0) {
+          // Unless canceled, try to redrawing every 0.5 sec for five seconds.
+          window.clearInterval(this._renderInterval);
+          this._renderIntervalRunningTime = 0;
+          this._renderInterval = window.setInterval(() => {
+            this._renderIntervalRunningTime += 500;
+            this._renderIfReady();
+            if (this._renderIntervalRunningTime > 5000) {
+              window.clearInterval(this._renderInterval);
+              this._renderIntervalRunningTime = 0;
+            }
+          }, 500);
+        }
+      };
+      this._swapBuffersTimeout = window.setTimeout(swapBufferTimeoutHandler, 3000);
+      this._renderInterval = null;
+      this._renderIntervalRunningTime = 0;
       var newRequest = CATMAID.PixiContext.GlobalTextureManager.load(
           toLoad,
           this.tileSource.getRequestHeaders(),
-          this._swapBuffers.bind(this, false, this._swapBuffersTimeout));
+          () => {
+            this._swapBuffers(false, this._swapBuffersTimeout);
+            window.clearInterval(this._renderInterval);
+          });
       CATMAID.PixiContext.GlobalTextureManager.cancel(this._tileRequest);
       this._tileRequest = newRequest;
       loading = true;
@@ -299,6 +320,7 @@
     window.clearTimeout(this._swapBuffersTimeout);
     this._swapBuffersTimeout = null;
 
+    let nInvalid = 0;
     for (var i = 0; i < this._tiles.length; ++i) {
       for (var j = 0; j < this._tiles[0].length; ++j) {
         var source = this._tilesBuffer[i][j];
@@ -315,6 +337,9 @@
               this._setTextureInterpolationMode(tile.texture, this._pixiInterpolationMode);
             }
             tile.visible = true;
+            if (!texture || !texture.valid) {
+              ++nInvalid;
+            }
           }
         }
       }
@@ -331,6 +356,8 @@
       this._completionCallback = null;
       completionCallback();
     }
+
+    return nInvalid;
   };
 
   /** @inheritdoc */