✨ [Frontend] Template type: Hypertools (#7531)

odeimaiz · web-flow · commit eeb6a1c5bb29 · 2025-04-16T15:36:10.000Z
diff --git a/packages/models-library/src/models_library/api_schemas_webserver/projects_ui.py b/packages/models-library/src/models_library/api_schemas_webserver/projects_ui.py
@@ -1,5 +1,5 @@
 """
-    Models Front-end UI
+Models Front-end UI
 """
 
 from typing import Annotated, Literal, NotRequired
@@ -20,6 +20,7 @@
 
 from ..projects_nodes_io import NodeID, NodeIDStr
 from ..utils.common_validators import empty_str_to_none_pre_validator
+from ._base import OutputSchema
 from .projects_nodes_ui import MarkerUI, PositionUI
 
 
@@ -79,14 +80,15 @@ def _update_json_schema_extra(schema: JsonDict) -> None:
     )
 
 
-class StudyUI(BaseModel):
+class StudyUI(OutputSchema):
     # Model fully controlled by the UI and stored under `projects.ui`
     icon: HttpUrl | None = None
 
     workbench: dict[NodeIDStr, WorkbenchUI] | None = None
     slideshow: dict[NodeIDStr, SlideshowUI] | None = None
-    current_node_id: Annotated[NodeID | None, Field(alias="currentNodeId")] = None
+    current_node_id: NodeID | None = None
     annotations: dict[NodeIDStr, AnnotationUI] | None = None
+    template_type: Literal["hypertool"] | None = None
 
     _empty_is_none = field_validator("*", mode="before")(
         empty_str_to_none_pre_validator
@@ -169,6 +171,7 @@ def _update_json_schema_extra(schema: JsonDict) -> None:
                             },
                         },
                         "current_node_id": "4b3345e5-861f-47b0-8b52-a4508449be79",
+                        "template_type": "hypertool",
                     },
                 ]
             }
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js
@@ -79,6 +79,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
   members: {
     __studyBrowser: null,
     __templateBrowser: null,
+    __hypertoolBrowser: null,
     __serviceBrowser: null,
     __dataBrowser: null,
 
@@ -90,6 +91,10 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       return this.__templateBrowser;
     },
 
+    getHypertoolBrowser: function() {
+      return this.__hypertoolBrowser;
+    },
+
     getServiceBrowser: function() {
       return this.__serviceBrowser;
     },
@@ -118,6 +123,14 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           icon: "@FontAwesome5Solid/copy/"+tabIconSize,
           buildLayout: this.__createTemplateBrowser
         });
+        tabs.push({
+          id: "hypertoolsTab",
+          buttonId: "hypertoolsTabBtn",
+          label: this.tr("HYPERTOOLS"),
+          icon: "@FontAwesome5Solid/copy/"+tabIconSize,
+          initVisibility: "excluded",
+          buildLayout: this.__createHypertoolsBrowser
+        });
       }
       if (permissions.canDo("dashboard.services.read")) {
         tabs.push({
@@ -128,16 +141,17 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           buildLayout: this.__createServiceBrowser
         });
       }
-      if (permissions.canDo("dashboard.data.read") && osparc.product.Utils.isProduct("osparc")) {
+      if (permissions.canDo("dashboard.data.read")) {
         tabs.push({
           id: "dataTab",
           buttonId: "dataTabBtn",
           label: this.tr("DATA"),
           icon: "@FontAwesome5Solid/folder/"+tabIconSize,
+          initVisibility: osparc.product.Utils.isProduct("osparc") ? "visible" : "excluded",
           buildLayout: this.__createDataBrowser
         });
       }
-      tabs.forEach(({id, buttonId, label, icon, buildLayout}) => {
+      tabs.forEach(({id, buttonId, label, icon, initVisibility, buildLayout}) => {
         const tabPage = new qx.ui.tabview.Page(label, icon).set({
           appearance: "dashboard-page"
         });
@@ -146,6 +160,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
         tabButton.set({
           minWidth: 50,
           maxHeight: 36,
+          visibility: initVisibility ? initVisibility : "visible",
         });
         tabButton.ttt = label;
         tabButton.getChildControl("label").set({
@@ -171,6 +186,10 @@ qx.Class.define("osparc.dashboard.Dashboard", {
             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);
         tabPage.add(scrollerMainView);
@@ -187,6 +206,7 @@ qx.Class.define("osparc.dashboard.Dashboard", {
           [
             this.__studyBrowser,
             this.__templateBrowser,
+            this.__hypertoolBrowser,
             this.__serviceBrowser,
             this.__dataBrowser
           ].forEach(resourceBrowser => {
@@ -208,6 +228,12 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       return templatesView;
     },
 
+    __createHypertoolsBrowser: function() {
+      const templateType = osparc.data.model.StudyUI.HYPERTOOL_TYPE;
+      const hypertoolsView = this.__hypertoolBrowser = new osparc.dashboard.TemplateBrowser(templateType);
+      return hypertoolsView;
+    },
+
     __createServiceBrowser: function() {
       const servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();
       return servicesView;
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
@@ -88,7 +88,8 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
   events: {
     "changeTab": "qx.event.type.Data",
-    "publishTemplate": "qx.event.type.Data"
+    "showTab": "qx.event.type.Data",
+    "publishTemplate": "qx.event.type.Data",
   },
 
   statics: {
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceContainerManager.js
@@ -315,7 +315,16 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     __rebuildLayout: function(resourceType) {
       this.__cleanAll();
       if (this.getGroupBy()) {
-        const noGroupContainer = this.__createGroupContainer("no-group", "No Group", "transparent");
+        let groupTitle = "No Group";
+        switch (this.getGroupBy()) {
+          case "tags":
+            groupTitle = "Not Tagged";
+            break;
+          case "shared":
+            groupTitle = "Not Shared";
+            break;
+        }
+        const noGroupContainer = this.__createGroupContainer("no-group", groupTitle, "transparent");
         this.__groupedContainers.add(noGroupContainer);
         this._add(this.__groupedContainers);
       } else {
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js b/services/static-webserver/client/source/class/osparc/dashboard/TemplateBrowser.js
@@ -18,12 +18,15 @@
 qx.Class.define("osparc.dashboard.TemplateBrowser", {
   extend: osparc.dashboard.ResourceBrowserBase,
 
-  construct: function() {
+  construct: function(templateType = null) {
     this._resourceType = "template";
+    this.__templateType = templateType;
+
     this.base(arguments);
   },
 
   members: {
+    __templateType: null,
     __updateAllButton: null,
 
     // overridden
@@ -97,7 +100,8 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
 
     __setResourcesToList: function(templatesList) {
       templatesList.forEach(template => template["resourceType"] = "template");
-      this._resourcesList = templatesList;
+      this._resourcesList = templatesList.filter(template => osparc.study.Utils.extractTemplateType(template) === this.__templateType);
+      this.fireDataEvent("showTab", Boolean(this._resourcesList.length));
       this._reloadCards();
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/data/model/StudyUI.js b/services/static-webserver/client/source/class/osparc/data/model/StudyUI.js
@@ -33,7 +33,8 @@ qx.Class.define("osparc.data.model.StudyUI", {
       slideshow: new osparc.data.model.Slideshow(studyDataUI && studyDataUI.slideshow ? studyDataUI.slideshow : this.getSlideshow()),
       currentNodeId: studyDataUI && studyDataUI.currentNodeId ? studyDataUI.currentNodeId : this.initCurrentNodeId(),
       mode: studyDataUI && studyDataUI.mode ? studyDataUI.mode : this.initMode(),
-      annotations: {}
+      annotations: {},
+      templateType: studyDataUI && studyDataUI.templateType ? studyDataUI.templateType : null,
     });
 
     if ("annotations" in studyDataUI) {
@@ -79,7 +80,18 @@ qx.Class.define("osparc.data.model.StudyUI", {
       check: "Object",
       init: {},
       nullable: true
-    }
+    },
+
+    templateType: {
+      check: [null, "hypertool"],
+      init: null,
+      nullable: true,
+      event: "changeTemplateType",
+    },
+  },
+
+  statics: {
+    HYPERTOOL_TYPE: "hypertool",
   },
 
   members: {
diff --git a/services/static-webserver/client/source/class/osparc/desktop/MainPage.js b/services/static-webserver/client/source/class/osparc/desktop/MainPage.js
@@ -225,12 +225,17 @@ qx.Class.define("osparc.desktop.MainPage", {
       const text = this.tr("Started template creation and added to the background tasks");
       osparc.FlashMessenger.logAs(text, "INFO");
 
+      const studyId = data["studyData"].uuid;
+      const studyName = data["studyData"].name;
+      const copyData = data["copyData"];
+      const templateAccessRights = data["accessRights"];
+      const templateType = data["templateType"];
+
       const params = {
         url: {
-          "study_id": data["studyData"].uuid,
-          "copy_data": data["copyData"]
+          "study_id": studyId,
+          "copy_data": copyData
         },
-        data: data["studyData"]
       };
       const options = {
         pollTask: true
@@ -240,12 +245,27 @@ qx.Class.define("osparc.desktop.MainPage", {
       pollTasks.createPollingTask(fetchPromise)
         .then(task => {
           const templateBrowser = this.__dashboard.getTemplateBrowser();
+          const hypertoolBrowser = this.__dashboard.getHypertoolBrowser();
           if (templateBrowser) {
-            templateBrowser.taskToTemplateReceived(task, data["studyData"].name);
+            templateBrowser.taskToTemplateReceived(task, studyName);
           }
           task.addListener("resultReceived", e => {
             const templateData = e.getData();
-            osparc.store.Study.addCollaborators(templateData, data["accessRights"]);
+            // these operations need to be done after template creation
+            osparc.store.Study.addCollaborators(templateData, templateAccessRights);
+            if (templateType) {
+              const studyUI = osparc.utils.Utils.deepCloneObject(templateData["ui"]);
+              studyUI["templateType"] = templateType;
+              osparc.store.Study.patchStudyData(templateData, "ui", studyUI)
+                .then(() => {
+                  if (templateBrowser) {
+                    templateBrowser.reloadResources();
+                  }
+                  if (hypertoolBrowser) {
+                    hypertoolBrowser.reloadResources();
+                  }
+                });
+            }
           });
         })
         .catch(errMsg => {
diff --git a/services/static-webserver/client/source/class/osparc/share/ShareTemplateWith.js b/services/static-webserver/client/source/class/osparc/share/ShareTemplateWith.js
@@ -22,7 +22,7 @@
  * - Product everyone
  */
 
-qx.Class.define("osparc.share.PublishTemplate", {
+qx.Class.define("osparc.share.ShareTemplateWith", {
   extend: qx.ui.core.Widget,
 
   /**
diff --git a/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js b/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js
@@ -43,17 +43,38 @@ qx.Class.define("osparc.study.SaveAsTemplate", {
 
   members: {
     __studyDataClone: null,
-    __shareWith: null,
+    __form: null,
     __publishTemplateBtn: null,
-    __copyWData: null,
 
     __buildLayout: function() {
-      const publishWithData = this.__copyWData = new qx.ui.form.CheckBox(this.tr("Publish with data")).set({
-        value: true
-      });
-      this._add(publishWithData);
+      const form = this.__form = new qx.ui.form.Form();
+      this._add(new qx.ui.form.renderer.Single(form));
 
-      const shareWith = this.__shareWith = new osparc.share.PublishTemplate(this.__studyDataClone);
+      const publishWithData = new qx.ui.form.CheckBox().set({
+        value: true,
+        iconPosition: "right",
+      });
+      form.add(publishWithData, this.tr("Publish with data"), null, "publishWithData");
+
+      if (osparc.utils.DisabledPlugins.isHypertoolsEnabled()) {
+        const templateTypeSB = new qx.ui.form.SelectBox().set({
+          allowGrowX: false,
+        });
+        const templateTypes = [{
+          label: "Tutorial",
+          id: null,
+        }, {
+          label: "Hypertool",
+          id: osparc.data.model.StudyUI.HYPERTOOL_TYPE,
+        }]
+        templateTypes.forEach(tempType => {
+          const tItem = new qx.ui.form.ListItem(tempType.label, null, tempType.id);
+          templateTypeSB.add(tItem);
+        });
+        form.add(templateTypeSB, this.tr("Template Type"), null, "templateType");
+      }
+
+      const shareWith = this.__shareWith = new osparc.share.ShareTemplateWith(this.__studyDataClone);
       this._add(shareWith);
 
       const publishTemplateBtn = this.__publishTemplateBtn = new qx.ui.form.Button().set({
@@ -67,6 +88,10 @@ qx.Class.define("osparc.study.SaveAsTemplate", {
     },
 
     __publishTemplate: function() {
+      const publishWithDataCB = this.__form.getItem("publishWithData");
+      const templateTypeSB = this.__form.getItem("templateType");
+      const templateType = templateTypeSB ? templateTypeSB.getSelection()[0].getModel() : null;
+
       const readAccessRole = osparc.data.Roles.STUDY["read"];
       // AccessRights will be POSTed after the template is created.
       // No need to add myself, backend will automatically do it
@@ -79,8 +104,9 @@ qx.Class.define("osparc.study.SaveAsTemplate", {
 
       this.fireDataEvent("publishTemplate", {
         "studyData": this.__studyDataClone,
-        "copyData": this.__copyWData.getValue(),
-        "accessRights": accessRights
+        "copyData": publishWithDataCB.getValue(),
+        "accessRights": accessRights,
+        "templateType": templateType,
       });
     },
 
diff --git a/services/static-webserver/client/source/class/osparc/study/Utils.js b/services/static-webserver/client/source/class/osparc/study/Utils.js
@@ -205,6 +205,13 @@ qx.Class.define("osparc.study.Utils", {
       return pollTasks.createPollingTask(fetchPromise)
     },
 
+    extractTemplateType: function(templateData) {
+      if (templateData && templateData["ui"] && templateData["ui"]["templateType"]) {
+        return templateData["ui"]["templateType"];
+      }
+      return null;
+    },
+
     isAnyLinkedNodeMissing: function(studyData) {
       const existingNodeIds = Object.keys(studyData["workbench"]);
       const linkedNodeIds = osparc.data.model.Workbench.getLinkedNodeIds(studyData["workbench"]);
diff --git a/services/static-webserver/client/source/class/osparc/utils/DisabledPlugins.js b/services/static-webserver/client/source/class/osparc/utils/DisabledPlugins.js
@@ -67,6 +67,13 @@ qx.Class.define("osparc.utils.DisabledPlugins", {
       return false;
     },
 
+    isHypertoolsEnabled: function() {
+      if (osparc.store.StaticInfo.getInstance().isDevFeaturesEnabled() && osparc.product.Utils.isS4LProduct()) {
+        return true;
+      }
+      return false;
+    },
+
     __isPluginDisabled: function(key) {
       const statics = osparc.store.Store.getInstance().get("statics");
       if (statics) {
diff --git a/services/web/server/src/simcore_service_webserver/api/v0/openapi.yaml b/services/web/server/src/simcore_service_webserver/api/v0/openapi.yaml
