diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js index 5df1eef59a09..dddc5d7f23a5 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js +++ b/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 : [], diff --git a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js b/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js index 217c13e58e9b..7a1865cfcc01 100644 --- a/services/static-webserver/client/source/class/osparc/info/ServiceLarge.js +++ b/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"]; diff --git a/services/static-webserver/client/source/class/osparc/study/Utils.js b/services/static-webserver/client/source/class/osparc/study/Utils.js index f2fb9ea35948..e7f684ff0d6e 100644 --- a/services/static-webserver/client/source/class/osparc/study/Utils.js +++ b/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; }, diff --git a/services/static-webserver/client/source/resource/osparc/icons/diagram.png b/services/static-webserver/client/source/resource/osparc/icons/diagram.png index bb43d717baee..7ed509475bd6 100644 Binary files a/services/static-webserver/client/source/resource/osparc/icons/diagram.png and b/services/static-webserver/client/source/resource/osparc/icons/diagram.png differ