diff --git a/services/web/client/source/class/osparc/component/widget/PersistentIframe.js b/services/web/client/source/class/osparc/component/widget/PersistentIframe.js index 9d7aaed494d..20c13a9c2ff 100644 --- a/services/web/client/source/class/osparc/component/widget/PersistentIframe.js +++ b/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 => { diff --git a/services/web/client/source/class/osparc/data/model/Node.js b/services/web/client/source/class/osparc/data/model/Node.js index 5e514ee971f..a25731cefac 100644 --- a/services/web/client/source/class/osparc/data/model/Node.js +++ b/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); } } },