lazy load templates

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js

@@ -128,7 +128,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           buttonId: "hypertoolsTabBtn",
           label: this.tr("HYPERTOOLS"),
           icon: "@FontAwesome5Solid/copy/"+tabIconSize,
-          initVisibility: "excluded",
+          // initVisibility: "excluded",
           buildLayout: this.__createHypertoolsBrowser
         });
       }
@@ -172,26 +172,25 @@ qx.Class.define("osparc.dashboard.Dashboard", {
         osparc.utils.Utils.setIdToWidget(tabButton, buttonId);
         tabPage.setLayout(new qx.ui.layout.Grow());
 
-        const viewLayout = buildLayout.call(this);
+        const resourceBrowser = buildLayout.call(this);
         tabButton.addListener("execute", () => {
-          if (viewLayout.resetSelection) {
-            viewLayout.resetSelection();
+          if (resourceBrowser.resetSelection) {
+            resourceBrowser.resetSelection();
           }
         }, this);
-        viewLayout.addListener("changeTab", e => {
+
+        resourceBrowser.addListener("changeTab", e => {
           const activeTab = e.getData();
           const tabFound = this.getSelectables().find(s => s.id === activeTab);
           if (tabFound) {
             this.setSelection([tabFound]);
           }
         }, this);
-        viewLayout.addListener("showTab", e => {
-          const showTab = e.getData();
-          tabButton.setVisibility(showTab ? "visible" : "excluded");
-        })
+
         const scrollerMainView = new qx.ui.container.Scroll();
-        scrollerMainView.add(viewLayout);
+        scrollerMainView.add(resourceBrowser);
         tabPage.add(scrollerMainView);
+        tabPage.resourceBrowser = resourceBrowser;
 
         this.add(tabPage);
       }, this);
@@ -202,9 +201,22 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       preResourcePromises.push(osparc.store.Services.getServicesLatest(false));
       Promise.all(preResourcePromises)
         .then(() => {
-          this.__studyBrowser.initResources();
-          this.__serviceBrowser.initResources();
-          this.__dataBrowser.initResources();
+          if (this.__studyBrowser) {
+            this.__studyBrowser.initResources();
+          }
+          if (this.__serviceBrowser) {
+            this.__serviceBrowser.initResources();
+          }
+          if (this.__dataBrowser) {
+            this.__dataBrowser.initResources();
+          }
+
+          this.addListener("changeSelection", e => {
+            const selectedTab = e.getData()[0];
+            if (selectedTab && selectedTab.resourceBrowser) {
+              selectedTab.resourceBrowser.initResources();
+            }
+          }, this);
         })
         .catch(err => console.error(err));
     },

services/static-webserver/client/source/class/osparc/dashboard/DataBrowser.js

@@ -55,6 +55,11 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
 
     // overridden
     initResources: function() {
+      if (this._resourcesInitialized) {
+        return;
+      }
+      this._resourcesInitialized = true;
+
       this._hideLoadingPage();
       this.__buildLayout();
 

services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js

@@ -31,6 +31,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
   construct: function() {
     this.base(arguments);
 
+    this._resourcesInitialized = false;
+
     this._showLoadingPage(this.tr("Starting") + " " + osparc.store.StaticInfo.getInstance().getDisplayName());
 
     const padding = osparc.dashboard.Dashboard.PADDING;
@@ -88,7 +90,6 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
   events: {
     "changeTab": "qx.event.type.Data",
-    "showTab": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
   },
 
@@ -210,6 +211,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
     __centerLayout: null,
     _resourceType: null,
     _resourcesList: null,
+    _resourcesInitialized: null,
     _toolbar: null,
     _searchBarFilter: null,
     __viewModeLayout: null,

services/static-webserver/client/source/class/osparc/dashboard/ServiceBrowser.js

@@ -37,6 +37,11 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
 
     // overridden
     initResources: function() {
+      if (this._resourcesInitialized) {
+        return;
+      }
+      this._resourcesInitialized = true;
+
       this._resourcesList = [];
       osparc.store.Services.getServicesLatest()
         .then(services => {

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -92,6 +92,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     // overridden
     initResources: function() {
+      if (this._resourcesInitialized) {
+        return;
+      }
+      this._resourcesInitialized = true;
+
       this._resourcesList = [];
       this.__getActiveStudy()
         .then(() => {

services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js

@@ -31,6 +31,11 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
 
     // overridden
     initResources: function() {
+      if (this._resourcesInitialized) {
+        return;
+      }
+      this._resourcesInitialized = true;
+
       osparc.store.Templates.getInstance().fetchAllTemplates()
         .then(() => {
           this._resourcesList = [];
@@ -106,7 +111,6 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
     __setResourcesToList: function(templatesList) {
       templatesList.forEach(template => template["resourceType"] = "template");
       this._resourcesList = templatesList.filter(template => osparc.study.Utils.extractTemplateType(template) === this.__templateType);
-      this.fireDataEvent("showTab", Boolean(this._resourcesList.length));
       this._reloadCards();
     },