✨ [Frontend] Functions Browser

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

@@ -49,6 +49,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
     "updateTutorial": "qx.event.type.Data",
+    "updateFunction": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -334,6 +335,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       check: [
         "study",
         "template",
+        "function",
         "tutorial",
         "hypertool",
         "service",
@@ -535,6 +537,11 @@ qx.Class.define("osparc.dashboard.CardBase", {
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
           break;
+        case "function":
+          uuid = resourceData.uuid ? resourceData.uuid : null;
+          owner = "";
+          workbench = resourceData.workbench ? resourceData.workbench : {};
+          break;
         case "service":
           uuid = resourceData.key ? resourceData.key : null;
           owner = resourceData.owner ? resourceData.owner : resourceData.contact;
@@ -563,26 +570,31 @@ qx.Class.define("osparc.dashboard.CardBase", {
         workbench
       });
 
-      if ([
-        "study",
-        "template",
-        "tutorial",
-        "hypertool"
-      ].includes(resourceData["resourceType"])) {
-        osparc.store.Services.getStudyServices(resourceData.uuid)
-          .then(resp => {
-            const services = resp["services"];
-            resourceData["services"] = services;
-            this.setServices(services);
-          })
-          .catch(err => {
-            resourceData["services"] = null;
-            this.setServices(null);
-            console.error(err);
-          });
+      switch (resourceData["resourceType"]) {
+        case "study":
+        case "template":
+        case "tutorial":
+        case "hypertool": {
+          osparc.store.Services.getStudyServices(resourceData.uuid)
+            .then(resp => {
+              const services = resp["services"];
+              resourceData["services"] = services;
+              this.setServices(services);
+            })
+            .catch(err => {
+              resourceData["services"] = null;
+              this.setServices(null);
+              console.error(err);
+            });
+
+          osparc.study.Utils.guessIcon(resourceData)
+            .then(iconSource => this.setIcon(iconSource));
 
-        osparc.study.Utils.guessIcon(resourceData)
-          .then(iconSource => this.setIcon(iconSource));
+          break;
+        }
+        case "function":
+          this.setIcon(osparc.data.model.StudyUI.PIPELINE_ICON);
+          break;
       }
     },
 
@@ -1081,6 +1093,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         "updateStudy",
         "updateTemplate",
         "updateTutorial",
+        "updateFunction",
         "updateService",
         "updateHypertool",
       ].forEach(ev => {

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

@@ -204,6 +204,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
           "template",
           "tutorial",
           "hypertool",
+          "function",
         ].includes(this.getResourceType())) {
           const dateBy = this.getChildControl("date-by");
           dateBy.set({

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

@@ -282,6 +282,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
       resourcesContainer.addListener("updateTutorial", e => this._updateTutorialData(e.getData()));
+      resourcesContainer.addListener("updateFunction", e => this._updateFunctionData(e.getData()));
       resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData()));
       resourcesContainer.addListener("updateHypertool", e => this._updateHypertoolData(e.getData()));
       resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData()));
@@ -692,7 +693,11 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
     },
 
-    updateTutorialData: function(tutorialData) {
+    _updateTutorialData: function(tutorialData) {
+      throw new Error("Abstract method called!");
+    },
+
+    _updateFunctionData: function(functionData) {
       throw new Error("Abstract method called!");
     },
 
@@ -926,6 +931,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourceDetails.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourceDetails.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
       resourceDetails.addListener("updateTutorial", e => this._updateTutorialData(e.getData()));
+      resourceDetails.addListener("updateFunction", e => this._updateFunctionData(e.getData()));
       resourceDetails.addListener("updateService", e => this._updateServiceData(e.getData()));
       resourceDetails.addListener("updateHypertool", e => this._updateHypertoolData(e.getData()));
       resourceDetails.addListener("publishTemplate", e => {

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

@@ -36,6 +36,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
   events: {
     "templatesContext": "qx.event.type.Event",
     "publicTemplatesContext": "qx.event.type.Event",
+    "functionsContext": "qx.event.type.Event",
     "trashContext": "qx.event.type.Event",
     "changeTab": "qx.event.type.Data",
     "trashStudyRequested": "qx.event.type.Data",
@@ -50,6 +51,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
     __workspacesAndFoldersTree: null,
     __templatesButton: null,
     __publicProjectsButton: null,
+    __functionsButton: null,
     __trashButton: null,
     __sharedWithButtons: null,
     __tagButtons: null,
@@ -66,6 +68,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
           if (osparc.product.Utils.showPublicProjects()) {
             this._add(this.__createPublicProjects());
           }
+          if (osparc.product.Utils.showFunctions()) {
+            this._add(this.__createFunctions());
+          }
           this._add(this.__createTrashBin());
           this._add(filtersSpacer);
           const scrollView = new qx.ui.container.Scroll();
@@ -102,6 +107,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
 
       this.__templatesButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.TEMPLATES);
       this.__publicProjectsButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.PUBLIC_TEMPLATES);
+      this.__functionsButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.FUNCTIONS);
       this.__trashButton.setValue(context === osparc.dashboard.StudyBrowser.CONTEXT.TRASH);
     },
 
@@ -164,6 +170,24 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       return publicProjectsButton;
     },
 
+    __createFunctions: function() {
+      const functionsButton = this.__functionsButton = new qx.ui.toolbar.RadioButton().set({
+        value: false,
+        appearance: "filter-toggle-button",
+        label: this.tr("Functions"),
+        icon: "@MaterialIcons/functions/20",
+        paddingLeft: 10, // align it with the context
+      });
+      osparc.utils.Utils.setIdToWidget(functionsButton, "functionsFilterItem");
+      functionsButton.addListener("changeValue", e => {
+        const functionsEnabled = e.getData();
+        if (functionsEnabled) {
+          this.fireEvent("functionsContext");
+        }
+      });
+      return functionsButton;
+    },
+
     /* TRASH BIN */
     __createTrashBin: function() {
       const trashButton = this.__trashButton = new qx.ui.toolbar.RadioButton().set({

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

@@ -76,6 +76,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
     "updateTutorial": "qx.event.type.Data",
+    "updateFunction": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -161,6 +162,9 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
             case osparc.dashboard.StudyBrowser.CONTEXT.SEARCH_PUBLIC_TEMPLATES:
               text = this.tr("No Public Projects found");
               break;
+            case osparc.dashboard.StudyBrowser.CONTEXT.FUNCTIONS:
+              text = this.tr("No Functions found");
+              break;
           }
           break;
         }
@@ -297,6 +301,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
         "updateStudy",
         "updateTemplate",
         "updateTutorial",
+        "updateFunction",
         "updateService",
         "updateHypertool",
         "publishTemplate",

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

@@ -33,10 +33,13 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         latestPromise = osparc.store.Study.getInstance().getOne(resourceData["uuid"]);
         break;
       }
-      case "function": {
+      case "functionedTemplate": {
         latestPromise = osparc.store.Templates.fetchTemplate(resourceData["uuid"]);
         break;
       }
+      case "function":
+        latestPromise = osparc.store.Functions.fetchFunction(resourceData["uuid"]);
+        break;
       case "service": {
         latestPromise = osparc.store.Services.getService(resourceData["key"], resourceData["version"]);
         break;
@@ -57,7 +60,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
           case "template":
           case "tutorial":
           case "hypertool":
-          case "function":
+          case "functionedTemplate":
             // when getting the latest study data, the debt information was lost
             if (osparc.study.Utils.isInDebt(this.__resourceData)) {
               const studyStore = osparc.store.Study.getInstance();
@@ -69,8 +72,20 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
                 this.__resourceModel["resourceType"] = resourceData["resourceType"];
                 this.__resourceData["services"] = resourceData["services"];
                 this.__addPages();
-              })
+              });
             break;
+          case "function": {
+            // use function's underlying template info to fetch services metadata
+            // osparc.store.Templates.fetchTemplate(resourceData["uuid"]);
+            osparc.store.Services.getStudyServicesMetadata(latestResourceData)
+              .finally(() => {
+                this.__resourceModel = new osparc.data.model.Function(latestResourceData);
+                this.__resourceModel["resourceType"] = resourceData["resourceType"];
+                this.__resourceData["services"] = resourceData["services"];
+                this.__addPages();
+              });
+            break;
+          }
           case "service": {
             this.__resourceModel = new osparc.data.model.Service(latestResourceData);
             this.__resourceModel["resourceType"] = resourceData["resourceType"];
@@ -92,6 +107,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
     "updateTutorial": "qx.event.type.Data",
+    "updateFunction": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -157,6 +173,10 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     __addToolbarButtons: function(page) {
       const resourceData = this.__resourceData;
 
+      if (this.__resourceData["resourceType"] === "function") {
+        return; // no toolbar buttons for functions
+      }
+
       const toolbar = this.self().createToolbar();
       page.addToHeader(toolbar);
 
@@ -370,11 +390,17 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       // removeAll
       osparc.utils.Utils.removeAllChildren(tabsView);
 
-      if (this.__resourceData["resourceType"] === "function") {
+      if (this.__resourceData["resourceType"] === "functionedTemplate") {
         // for now, we only want the preview page
         this.__addPreviewPage();
         this.fireEvent("pagesAdded");
         return;
+      } else if (this.__resourceData["resourceType"] === "function") {
+        this.__addInfoPage();
+        // to build the preview page we need the underlying template data
+        // this.__addPreviewPage();
+        this.fireEvent("pagesAdded");
+        return;
       }
 
       this.__addInfoPage();
@@ -417,6 +443,9 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         case "tutorial":
           this.fireDataEvent("updateTutorial", updatedData);
           break;
+        case "function":
+          this.fireDataEvent("updateFunction", updatedData);
+          break;
         case "hypertool":
           this.fireDataEvent("updateHypertool", updatedData);
           break;
@@ -448,6 +477,12 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
             const updatedData = e.getData();
             this.__fireUpdateEvent(resourceData, updatedData);
           });
+        } else if (osparc.utils.Resources.isFunction(resourceData)) {
+          infoCard = new osparc.info.FunctionLarge(resourceModel);
+          infoCard.addListener("updateFunction", e => {
+            const updatedData = e.getData();
+            this.__fireUpdateEvent(resourceData, updatedData);
+          });
         } else {
           infoCard = new osparc.info.StudyLarge(resourceModel, false);
           infoCard.addListener("updateStudy", e => {