🎨 [Frontend] Functions: Show Preview only when requested from MMUX (#7948)

Co-authored-by: Copilot <[email protected]>

Author: odeimaiz

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

@@ -37,6 +37,10 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         latestPromise = osparc.data.Resources.fetch("studies", "getOne", params);
         break;
       }
+      case "function": {
+        latestPromise = osparc.store.Templates.fetchTemplate(resourceData["uuid"]);
+        break;
+      }
       case "service": {
         latestPromise = osparc.store.Services.getService(resourceData["key"], resourceData["version"]);
         break;
@@ -57,6 +61,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
           case "template":
           case "tutorial":
           case "hypertool":
+          case "function":
             // when getting the latest study data, the debt information was lost
             if (osparc.study.Utils.isInDebt(this.__resourceData)) {
               const mainStore = osparc.store.Store.getInstance();
@@ -372,6 +377,16 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       // removeAll
       osparc.utils.Utils.removeAllChildren(tabsView);
 
+      if (this.__resourceData["resourceType"] === "function") {
+        // for now, we only want the preview page
+        const page = this.__getPreviewPage();
+        if (page) {
+          tabsView.add(page);
+        }
+        this.fireEvent("pagesAdded");
+        return;
+      }
+
       // add Open service button
       [
         this.__getInfoPage,

services/static-webserver/client/source/class/osparc/study/StudyPreview.js

@@ -36,13 +36,28 @@ qx.Class.define("osparc.study.StudyPreview", {
 
     __buildPreview: function() {
       const study = this.__study;
+
+      const workbenchReady = () => {
+        if (!study.isPipelineEmpty()) {
+          const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview();
+          workbenchUIPreview.setStudy(study);
+          workbenchUIPreview.loadModel(study.getWorkbench());
+          workbenchUIPreview.setMaxHeight(550);
+          this._add(workbenchUIPreview);
+        }
+      };
+
       const uiMode = study.getUi().getMode();
-      if (["workbench", "pipeline"].includes(uiMode) && !study.isPipelineEmpty()) {
-        const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview();
-        workbenchUIPreview.setStudy(study);
-        workbenchUIPreview.loadModel(study.getWorkbench());
-        workbenchUIPreview.setMaxHeight(550);
-        this._add(workbenchUIPreview);
+      if (["workbench", "pipeline"].includes(uiMode)) {
+        if (study.getWorkbench().isDeserialized()) {
+          workbenchReady();
+        } else {
+          study.getWorkbench().addListenerOnce("changeDeserialized", e => {
+            if (e.getData()) {
+              workbenchReady();
+            }
+          }, this);
+        }
       }
     }
   }

services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js

@@ -334,15 +334,15 @@ qx.Class.define("osparc.widget.PersistentIframe", {
             // this is the MetaModeling service trying to show function/template information
             if (data["message"] && data["message"]["functionId"]) {
               const templateId = data["message"]["functionId"];
-              osparc.store.Templates.fetchTemplate(templateId)
-                .then(templateData => {
-                  templateData["resourceType"] = "template";
-                  const resourceDetails = new osparc.dashboard.ResourceDetails(templateData).set({
-                    showOpenButton: false,
-                  });
-                  osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
-                })
-                .catch(() => osparc.FlashMessenger.logError(this.tr("Function not found")));
+              const functionData = {
+                "uuid": templateId,
+                "resourceType": "function",
+              };
+              const resourceDetails = new osparc.dashboard.ResourceDetails(functionData).set({
+                showOpenButton: false,
+              });
+              const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
+              win.setCaption("Function Details");
             }
             break;
           }