Function preview

Author: odeimaiz

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

@@ -394,7 +394,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         return;
       } else if (this.__resourceData["resourceType"] === "function") {
         this.__addInfoPage();
-        // this.__addPreviewPage();
+        this.__addPreviewPage();
         this.fireEvent("pagesAdded");
         return;
       }
@@ -575,7 +575,12 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
       const lazyLoadContent = () => {
         const resourceModel = this.__resourceModel;
-        const preview = new osparc.study.StudyPreview(resourceModel);
+        let preview = null;
+        if (osparc.utils.Resources.isFunction(this.__resourceData)) {
+          preview = new osparc.study.FunctionPreview(resourceModel);
+        } else {
+          preview = new osparc.study.StudyPreview(resourceModel);
+        }
         page.addToContent(preview);
         this.__widgets.push(preview);
       }

services/static-webserver/client/source/class/osparc/data/model/Function.js

@@ -40,12 +40,9 @@ qx.Class.define("osparc.data.model.Function", {
       creationDate: functionData.creationDate ? new Date(functionData.creationDate) : this.getCreationDate(),
       lastChangeDate: functionData.lastChangeDate ? new Date(functionData.lastChangeDate) : this.getLastChangeDate(),
       thumbnail: functionData.thumbnail || this.getThumbnail(),
+      workbenchData: functionData.workbench || this.getWorkbenchData(),
+      functionUIData: functionData.ui || this.functionUIData(),
     });
-
-    const wbData = functionData.workbench || {};
-    const wbUiData = functionData.ui || {};
-    const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview2(wbData, wbUiData);
-    this.setWorkbenchUiPreview(workbenchUIPreview);
   },
 
   properties: {
@@ -126,10 +123,16 @@ qx.Class.define("osparc.data.model.Function", {
       init: null
     },
 
-    workbenchUiPreview: {
-      check: "osparc.workbench.WorkbenchUIPreview2",
+    workbenchData: {
+      check: "Object",
+      nullable: false,
+      init: {},
+    },
+
+    functionUIData: {
+      check: "Object",
       nullable: false,
-      init: null,
+      init: {},
     },
   },
 

services/static-webserver/client/source/class/osparc/data/model/Node.js

@@ -577,6 +577,9 @@ qx.Class.define("osparc.data.model.Node", {
      */
     __addSettings: function(inputs) {
       const form = this.__settingsForm = new osparc.form.Auto(inputs);
+      if (!this.getStudy()) {
+        return;
+      }
       const propsForm = new osparc.form.renderer.PropForm(form, this, this.getStudy());
       this.setPropsForm(propsForm);
       propsForm.addListener("linkFieldModified", e => {

services/static-webserver/client/source/class/osparc/store/Functions.js

@@ -202,7 +202,10 @@ qx.Class.define("osparc.store.Functions", {
           },
           "thumbnail": "https://img.freepik.com/premium-vector/image-icon-design-vector-template_1309674-940.jpg",
           "workbench": {"50a50309-1dfc-5ad5-b2d9-c11697641f0b": {"key": "simcore/services/comp/itis/sleeper", "version": "2.1.6", "label": "sleeper", "inputs": {"input_2": 2, "input_3": false, "input_4": 0, "input_5": 0}, "inputsRequired": [], "inputNodes": ["2e348481-5042-5148-9196-590574747297", "69873032-770a-536b-adb6-0e6ea01720a4"]}, "2e348481-5042-5148-9196-590574747297": {"key": "simcore/services/frontend/parameter/number", "version": "1.0.0", "label": "X", "inputs": {}, "inputsRequired": [], "inputNodes": [], "outputs": {"out_1": 1}, "runHash": null}, "70e1de1a-a8b0-59e3-b19e-ea20f78765ce": {"key": "simcore/services/frontend/iterator-consumer/probe/number", "version": "1.0.0", "label": "Out 1", "inputs": {"in_1": 0}, "inputsRequired": [], "inputNodes": ["50a50309-1dfc-5ad5-b2d9-c11697641f0b"]}, "69873032-770a-536b-adb6-0e6ea01720a4": {"key": "simcore/services/frontend/parameter/number", "version": "1.0.0", "label": "Y", "inputs": {}, "inputsRequired": [], "inputNodes": [], "outputs": {"out_1": 1}, "runHash": null}, "24f856c3-408c-5ab4-ad01-e99630a355fe": {"key": "simcore/services/frontend/iterator-consumer/probe/number", "version": "1.0.0", "label": "Out_2", "inputs": {"in_1": 0}, "inputsRequired": [], "inputNodes": ["50a50309-1dfc-5ad5-b2d9-c11697641f0b"]}},
-          "ui": {"24f856c3-408c-5ab4-ad01-e99630a355fe": {"position": {"x": 540, "y": 240}}, "2e348481-5042-5148-9196-590574747297": {"position": {"x": 120, "y": 140}}, "50a50309-1dfc-5ad5-b2d9-c11697641f0b": {"position": {"x": 300, "y": 180}}, "69873032-770a-536b-adb6-0e6ea01720a4": {"position": {"x": 120, "y": 240}}, "70e1de1a-a8b0-59e3-b19e-ea20f78765ce": {"position": {"x": 540, "y": 140}}},
+          "ui": {
+            "workbench": {"24f856c3-408c-5ab4-ad01-e99630a355fe": {"position": {"x": 540, "y": 240}}, "2e348481-5042-5148-9196-590574747297": {"position": {"x": 120, "y": 140}}, "50a50309-1dfc-5ad5-b2d9-c11697641f0b": {"position": {"x": 300, "y": 180}}, "69873032-770a-536b-adb6-0e6ea01720a4": {"position": {"x": 120, "y": 240}}, "70e1de1a-a8b0-59e3-b19e-ea20f78765ce": {"position": {"x": 540, "y": 140}}},
+            "mode": "pipeline",
+          },
         }],
         "_links": {
           "next": null,

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

@@ -0,0 +1,41 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2025 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.study.FunctionPreview", {
+  extend: qx.ui.core.Widget,
+
+  /**
+   * @param func {osparc.data.model.Function} Function model
+   */
+  construct: function(func) {
+    this.base(arguments);
+
+    this._setLayout(new qx.ui.layout.VBox(5));
+
+    this.__buildPreview(func);
+  },
+
+  members: {
+    __buildPreview: function(func) {
+      const wbData = func.getWorkbenchData();
+      const functionUiData = func.getFunctionUIData();
+      const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview2(wbData, functionUiData["workbench"] || {});
+      workbenchUIPreview.setMaxHeight(550);
+      this._add(workbenchUIPreview);
+    }
+  }
+});

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js

@@ -418,7 +418,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
 
       nodeUI.addListener("appear", () => this.__updateNodeUIPos(nodeUI), this);
 
-      const isStudyReadOnly = this.getStudy().isReadOnly();
+      const isStudyReadOnly = this.isPropertyInitialized("study") ? this.getStudy().isReadOnly() : true;
       nodeUI.set({
         movable: !isStudyReadOnly,
         selectable: !isStudyReadOnly,

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUIPreview2.js

@@ -43,7 +43,9 @@ qx.Class.define("osparc.workbench.WorkbenchUIPreview2", {
     this.__wbData = wbData || {};
     this.__wbDataUi = wbDataUi || {};
 
-    this.__buildPreview();
+    setTimeout(() => {
+      this.__buildPreview();
+    }, 200);
   },
 
   members: {
@@ -70,11 +72,10 @@ qx.Class.define("osparc.workbench.WorkbenchUIPreview2", {
       this.resetSelection();
 
       // create nodes
-      const nodes = this.__wbData.nodes || {};
-      Object.entries(nodes).forEach(([nodeId, nodeData]) => {
+      Object.entries(this.__wbData).forEach(([nodeId, nodeData]) => {
         // we assume that the metadata was fetched before
         const serviceMetadata = osparc.store.Services.getMetadata(nodeData["key"], nodeData["version"]);
-        const node = osparc.data.model.Node(null, serviceMetadata, nodeId);
+        const node = new osparc.data.model.Node(null, serviceMetadata, nodeId);
         const nodeUI = new osparc.workbench.NodeUI(node);
         nodeUI.setIsMovable(false);
         this._addNodeUIToWorkbench(nodeUI, node.position);