✨ [Frontend] Patch service icon (#7209)

Author: odeimaiz

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

@@ -461,20 +461,24 @@ qx.Class.define("osparc.dashboard.CardBase", {
       let owner = null;
       let workbench = null;
       let defaultHits = null;
+      let icon = null;
       switch (resourceData["resourceType"]) {
         case "study":
           uuid = resourceData.uuid ? resourceData.uuid : null;
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
+          icon = osparc.study.Utils.guessIcon(resourceData);
           break;
         case "template":
           uuid = resourceData.uuid ? resourceData.uuid : null;
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
           workbench = resourceData.workbench ? resourceData.workbench : {};
+          icon = osparc.study.Utils.guessIcon(resourceData);
           break;
         case "service":
           uuid = resourceData.key ? resourceData.key : null;
           owner = resourceData.owner ? resourceData.owner : resourceData.contact;
+          icon = resourceData["icon"] || osparc.dashboard.CardBase.PRODUCT_ICON;
           defaultHits = 0;
           break;
       }
@@ -489,7 +493,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
         lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,
         trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,
         trashedBy: resourceData.trashedBy || null,
-        icon: ["study", "template"].includes(resourceData.resourceType) ? osparc.study.Utils.guessIcon(resourceData) : osparc.dashboard.CardBase.PRODUCT_ICON,
+        icon,
         thumbnail: resourceData.thumbnail || this.self().PRODUCT_THUMBNAIL,
         state: resourceData.state ? resourceData.state : {},
         classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],

services/static-webserver/client/source/class/osparc/info/ServiceLarge.js

@@ -143,9 +143,14 @@ qx.Class.define("osparc.info.ServiceLarge", {
         // Show description only
         vBox.add(description.getChildren()[1]);
       } else {
-        const title = this.__createTitle();
+        const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));
+        const icon = this.__createIcon();
+        const iconLayout = this.__createViewWithEdit(icon, this.__openIconEditor);
+        hBox.add(iconLayout);
+        const title = this.__createName();
         const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);
-        vBox.add(titleLayout);
+        hBox.add(titleLayout);
+        vBox.add(hBox);
 
         const extraInfo = this.__extraInfo();
         const extraInfoLayout = this.__createExtraInfo(extraInfo);
@@ -218,7 +223,21 @@ qx.Class.define("osparc.info.ServiceLarge", {
       return null;
     },
 
-    __createTitle: function() {
+    __createIcon: function() {
+      const serviceIcon = this.getService()["icon"] || "osparc/no_photography_black_24dp.svg";
+      const iconSize = osparc.dashboard.GridButtonBase.ICON_SIZE;
+      const icon = new osparc.ui.basic.Thumbnail(serviceIcon, iconSize, iconSize).set({
+        minHeight: iconSize,
+        minWidth: iconSize,
+      });
+      icon.getChildControl("image").set({
+        minWidth: iconSize,
+        minHeight: iconSize,
+      });
+      return icon;
+    },
+
+    __createName: function() {
       const serviceName = this.getService()["name"];
       let text = "";
       if (this.getInstanceLabel()) {
@@ -443,9 +462,19 @@ qx.Class.define("osparc.info.ServiceLarge", {
       return container;
     },
 
+    __openIconEditor: function() {
+      const iconEditor = new osparc.widget.Renamer(this.getService()["icon"], null, this.tr("Edit Icon"));
+      iconEditor.addListener("labelChanged", e => {
+        iconEditor.close();
+        const newIcon = e.getData()["newLabel"];
+        this.__patchService("icon", newIcon);
+      }, this);
+      iconEditor.center();
+      iconEditor.open();
+    },
+
     __openTitleEditor: function() {
-      const title = this.tr("Edit Title");
-      const titleEditor = new osparc.widget.Renamer(this.getService()["name"], null, title);
+      const titleEditor = new osparc.widget.Renamer(this.getService()["name"], null, this.tr("Edit Name"));
       titleEditor.addListener("labelChanged", e => {
         titleEditor.close();
         const newLabel = e.getData()["newLabel"];

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

@@ -358,42 +358,33 @@ qx.Class.define("osparc.study.Utils", {
       return ["UNKNOWN_SERVICES", false].includes(blocked);
     },
 
+    getNonFrontendNodes: function(studyData) {
+      return Object.values(studyData["workbench"]).filter(node => !osparc.data.model.Node.isFrontend(node));
+    },
+
     guessIcon: function(studyData) {
-      if (osparc.product.Utils.isProduct("osparc")) {
-        return this.__guessOsparcIcon(studyData);
-      }
-      if (osparc.product.Utils.isS4LProduct() || osparc.product.Utils.isProduct("s4llite")) {
-        return this.__guessS4LIcon(studyData);
-      }
       if (osparc.product.Utils.isProduct("tis") || osparc.product.Utils.isProduct("tiplite")) {
         return this.__guessTIPIcon(studyData);
       }
-      return osparc.dashboard.CardBase.PRODUCT_ICON;
-    },
-
-    __guessOsparcIcon: function(studyData) {
-      // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline
-      const wbServices = Object.values(studyData["workbench"]);
-      if (wbServices.length > 1) {
-        return "osparc/icons/diagram.png";
-      }
-      return osparc.dashboard.CardBase.PRODUCT_ICON;
+      return this.__guessIcon(studyData);
     },
 
-    __guessS4LIcon: function(studyData) {
+    __guessIcon: function(studyData) {
       // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline
-      const wbServices = Object.values(studyData["workbench"]);
+      const wbServices = this.self().getNonFrontendNodes(studyData);
       if (wbServices.length === 1) {
-        if (wbServices[0]["key"].includes("iseg")) {
-          return "https://raw.githubusercontent.com/ITISFoundation/osparc-iseg/master/iSeg/images/isegicon.png";
-        }
-        if (wbServices[0]["key"].includes("jupyter")) {
-          return "https://images.seeklogo.com/logo-png/35/1/jupyter-logo-png_seeklogo-354673.png";
-        }
-        if (wbServices[0]["key"].includes("s4l-ui")) {
-          return "https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/refs/heads/main/app/icons/s4l/Sim4Life.png";
+        const wbService = wbServices[0];
+        const allServices = osparc.store.Services.servicesCached;
+        if (wbService.key in allServices && wbService.version in allServices[wbService.key]) {
+          const serviceMetadata = allServices[wbService.key][wbService.version];
+          if (serviceMetadata["icon"]) {
+            return serviceMetadata["icon"];
+          }
         }
       }
+      if (wbServices.length > 1) {
+        return "osparc/icons/diagram.png";
+      }
       return osparc.dashboard.CardBase.PRODUCT_ICON;
     },