From d4a62670370d2ae5f201ca8f342bae3a4bba78bd Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 4 Feb 2022 10:48:30 +0100 Subject: [PATCH 1/5] clean up --- .../source/class/osparc/data/model/Node.js | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) 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..1852a58d8d3 100644 --- a/services/web/client/source/class/osparc/data/model/Node.js +++ b/services/web/client/source/class/osparc/data/model/Node.js @@ -897,33 +897,7 @@ qx.Class.define("osparc.data.model.Node", { __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 { - this.getIFrame().setSource(this.getServiceUrl()); - } - - 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); - } + this.getIFrame().setSource(this.getServiceUrl()); } }, From ecf4e077003998bb32626e884d71608c9b454282 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 4 Feb 2022 12:33:53 +0100 Subject: [PATCH 2/5] minor --- .../osparc/component/widget/PersistentIframe.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) 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 => { From a28158047bac6f3045778bf77c26d0d055e15e11 Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 4 Feb 2022 12:35:57 +0100 Subject: [PATCH 3/5] it works --- .../source/class/osparc/data/model/Node.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) 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 1852a58d8d3..f374b1e2502 100644 --- a/services/web/client/source/class/osparc/data/model/Node.js +++ b/services/web/client/source/class/osparc/data/model/Node.js @@ -888,16 +888,24 @@ 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(); - this.getIFrame().setSource(this.getServiceUrl()); + const loadingPage = this.getLoadingPage(); + const iframe = this.getIFrame(); + if (loadingPage.getBounds() === null) { + // lazy loading + loadingPage.addListenerOnce("appear", () => { + iframe.resetSource(); + iframe.setSource(this.getServiceUrl()); + }, this); + } else { + iframe.resetSource(); + iframe.setSource(this.getServiceUrl()); + } } }, From 7b644975750048bf5b4d182bf0a2689673040e5d Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 4 Feb 2022 14:51:14 +0100 Subject: [PATCH 4/5] lazy load optimized --- .../source/class/osparc/data/model/Node.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) 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 f374b1e2502..2ef83eeed5a 100644 --- a/services/web/client/source/class/osparc/data/model/Node.js +++ b/services/web/client/source/class/osparc/data/model/Node.js @@ -894,17 +894,21 @@ qx.Class.define("osparc.data.model.Node", { __restartIFrame: function() { if (this.getServiceUrl() !== null) { + const loadIframe = () => { + this.getIFrame().resetSource(); + this.getIFrame().setSource(this.getServiceUrl()); + }; + const loadingPage = this.getLoadingPage(); - const iframe = this.getIFrame(); - if (loadingPage.getBounds() === null) { - // lazy loading - loadingPage.addListenerOnce("appear", () => { - iframe.resetSource(); - iframe.setSource(this.getServiceUrl()); - }, this); + const bounds = loadingPage.getBounds(); + const domEle = loadingPage.getContentElement().getDomElement(); + const boundsCR = domEle ? domEle.getBoundingClientRect() : null; + if (bounds !== null && boundsCR && boundsCR.width > 0) { + loadIframe(); } else { - iframe.resetSource(); - iframe.setSource(this.getServiceUrl()); + // lazy loading + console.debug("lazy load", this.getNodeId()); + loadingPage.addListenerOnce("appear", () => loadIframe(), this); } } }, From fb5929b6568fe13632d0429a4c508db5fd89634b Mon Sep 17 00:00:00 2001 From: odeimaiz Date: Fri, 4 Feb 2022 15:33:34 +0100 Subject: [PATCH 5/5] restart button case --- services/web/client/source/class/osparc/data/model/Node.js | 5 +++++ 1 file changed, 5 insertions(+) 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 2ef83eeed5a..a25731cefac 100644 --- a/services/web/client/source/class/osparc/data/model/Node.js +++ b/services/web/client/source/class/osparc/data/model/Node.js @@ -899,6 +899,11 @@ qx.Class.define("osparc.data.model.Node", { this.getIFrame().setSource(this.getServiceUrl()); }; + // restart button pushed + if (this.getIFrame().getSource().includes(this.getServiceUrl())) { + loadIframe(); + } + const loadingPage = this.getLoadingPage(); const bounds = loadingPage.getBounds(); const domEle = loadingPage.getContentElement().getDomElement();