Iframe lazy loading (ITISFoundation#2790)

Author: odeimaiz

services/web/client/source/class/osparc/component/widget/PersistentIframe.js

@@ -36,7 +36,9 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
 
     getMaximizeWidgetId: function(maximize) {
       return maximize ? "restoreBtn" : "maximizeBtn";
-    }
+    },
+
+    HIDDEN_TOP: -10000
   },
 
   properties: {
@@ -96,7 +98,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
       let standin = new qx.html.Element("div");
       let appRoot = this.getApplicationRoot();
       appRoot.add(iframe, {
-        top:-10000
+        top: this.self().HIDDEN_TOP
       });
       const restartButton = this.__restartButton = new qx.ui.form.Button(null, "@FontAwesome5Solid/redo-alt/14").set({
         zIndex: 20,
@@ -112,7 +114,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
       }, this);
       osparc.utils.Utils.setIdToWidget(restartButton, "iFrameRestartBtn");
       appRoot.add(restartButton, {
-        top:-10000
+        top: this.self().HIDDEN_TOP
       });
       let zoomButton = this.__zoomButton = new qx.ui.form.Button(null).set({
         icon: this.self().getZoomIcon(false),
@@ -122,7 +124,7 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
       });
       osparc.utils.Utils.setIdToWidget(zoomButton, this.self().getMaximizeWidgetId(false));
       appRoot.add(zoomButton, {
-        top:-10000
+        top: this.self().HIDDEN_TOP
       });
       zoomButton.addListener("execute", e => {
         this.maximizeIFrame(!this.hasState("maximized"));
@@ -133,13 +135,13 @@ qx.Class.define("osparc.component.widget.PersistentIframe", {
       });
       standin.addListener("disappear", e => {
         iframe.setLayoutProperties({
-          top: -10000
+          top: this.self().HIDDEN_TOP
         });
         restartButton.setLayoutProperties({
-          top: -10000
+          top: this.self().HIDDEN_TOP
         });
         zoomButton.setLayoutProperties({
-          top: -10000
+          top: this.self().HIDDEN_TOP
         });
       });
       this.addListener("move", e => {

services/web/client/source/class/osparc/data/model/Node.js

@@ -888,41 +888,32 @@ qx.Class.define("osparc.data.model.Node", {
 
       const iframe = new osparc.component.widget.PersistentIframe();
       osparc.utils.Utils.setIdToWidget(iframe, "PersistentIframe");
-      iframe.addListener("restart", () => {
-        this.__restartIFrame();
-      }, this);
+      iframe.addListener("restart", () => this.__restartIFrame(), this);
       this.setIFrame(iframe);
     },
 
     __restartIFrame: function() {
       if (this.getServiceUrl() !== null) {
-        this.getIFrame().resetSource();
-        if (this.getKey().includes("3d-viewer")) {
-          // HACK: add this argument to only load the defined colorMaps
-          // https://github.com/Kitware/visualizer/commit/197acaf
-          const srvUrl = this.getServiceUrl();
-          let arg = "?serverColorMaps";
-          if (srvUrl[srvUrl.length - 1] !== "/") {
-            arg = "/" + arg;
-          }
-          this.getIFrame().setSource(srvUrl + arg);
-        } else {
+        const loadIframe = () => {
+          this.getIFrame().resetSource();
           this.getIFrame().setSource(this.getServiceUrl());
+        };
+
+        // restart button pushed
+        if (this.getIFrame().getSource().includes(this.getServiceUrl())) {
+          loadIframe();
         }
 
-        if (this.getKey().includes("raw-graphs")) {
-          // Listen to the postMessage from RawGraphs, posting a new graph
-          window.addEventListener("message", e => {
-            const {
-              id,
-              imgData
-            } = e.data;
-            if (imgData && id === "svgChange") {
-              const img = document.createElement("img");
-              img.src = imgData;
-              this.setThumbnail(img.outerHTML);
-            }
-          }, false);
+        const loadingPage = this.getLoadingPage();
+        const bounds = loadingPage.getBounds();
+        const domEle = loadingPage.getContentElement().getDomElement();
+        const boundsCR = domEle ? domEle.getBoundingClientRect() : null;
+        if (bounds !== null && boundsCR && boundsCR.width > 0) {
+          loadIframe();
+        } else {
+          // lazy loading
+          console.debug("lazy load", this.getNodeId());
+          loadingPage.addListenerOnce("appear", () => loadIframe(), this);
         }
       }
     },