🎨 [Frontend] Review 20.05 (#7703)

odeimaiz · web-flow · commit 5bc01bbcf464 · 2025-05-20T18:15:33.000+02:00
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js b/services/static-webserver/client/source/class/osparc/dashboard/NewPlusMenu.js
@@ -191,7 +191,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       osparc.store.Templates.getHypertools()
         .then(hypertools => {
           if (hypertools.length) {
-            const hypertoolsMenuButton = this.self().createMenuButton("@FontAwesome5Solid/star/16", this.tr("Hypertools"));
+            const hypertoolsMenuButton = this.self().createMenuButton(osparc.data.model.StudyUI.HYPERTOOL_ICON(16), this.tr("Hypertools"));
             this.addAt(hypertoolsMenuButton, this.__itemIdx);
             this.__itemIdx++;
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserFilter.js
@@ -416,7 +416,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserFilter", {
       });
 
       // hypertools filter
-      const button = new qx.ui.toolbar.RadioButton("Hypertools", "@FontAwesome5Solid/wrench/"+iconSize);
+      const button = new qx.ui.toolbar.RadioButton("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
       button.appType = "hypertool";
       this.__appTypeButtons.push(button);
 
diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
@@ -274,7 +274,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
       });
 
       // hypertools filter
-      const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", "@FontAwesome5Solid/wrench/"+iconSize);
+      const hypertoolTypeButton = new qx.ui.menu.Button("Hypertools", osparc.data.model.StudyUI.HYPERTOOL_ICON(iconSize));
       serviceTypeMenu.add(hypertoolTypeButton);
       hypertoolTypeButton.addListener("execute", () => this.__addChip("app-type", "hypertool", "Hypertools"), this);
     },
diff --git a/services/static-webserver/client/source/class/osparc/data/Job.js b/services/static-webserver/client/source/class/osparc/data/Job.js
@@ -23,6 +23,7 @@ qx.Class.define("osparc.data.Job", {
 
     this.set({
       projectUuid: jobData["projectUuid"],
+      projectName: jobData["rootProjectName"] || "",
       state: jobData["state"] || "UNKNOWN",
       submittedAt: jobData["submittedAt"] ? new Date(jobData["submittedAt"]) : null,
       startedAt: jobData["startedAt"] ? new Date(jobData["startedAt"]) : null,
@@ -31,10 +32,6 @@ qx.Class.define("osparc.data.Job", {
       customMetadata: jobData["projectCustomMetadata"] || null,
     });
 
-    if (jobData["info"] && jobData["info"]["project_name"]) {
-      this.setProjectName(jobData["info"]["project_name"]);
-    }
-
     this.__subJobs = [];
   },
 
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
@@ -94,6 +94,7 @@ qx.Class.define("osparc.data.model.StudyUI", {
     TEMPLATE_TYPE: "TEMPLATE",
     TUTORIAL_TYPE: "TUTORIAL",
     HYPERTOOL_TYPE: "HYPERTOOL",
+    HYPERTOOL_ICON: (iconSize = 22) => ("@FontAwesome5Solid/wrench/" + iconSize),
   },
 
   members: {
diff --git a/services/static-webserver/client/source/class/osparc/jobs/ActivityCenterWindow.js b/services/static-webserver/client/source/class/osparc/jobs/ActivityCenterWindow.js
@@ -60,7 +60,7 @@ qx.Class.define("osparc.jobs.ActivityCenterWindow", {
       runsBrowser.addListener("runSelected", e => {
         const project = e.getData();
         subRunsBrowser.setProject(project);
-        this.getChildControl("title").setValue(this.tr("Runs"));
+        this.getChildControl("title").setValue(this.tr("Tasks"));
         stack.setSelection([subRunsBrowser]);
       });
 
diff --git a/services/static-webserver/client/source/class/osparc/jobs/ActivityOverview.js b/services/static-webserver/client/source/class/osparc/jobs/ActivityOverview.js
@@ -29,7 +29,7 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
   statics: {
     popUpInWindow: function(projectData) {
       const activityOverview = new osparc.jobs.ActivityOverview(projectData);
-      const title = qx.locale.Manager.tr("Activity Overview");
+      const title = qx.locale.Manager.tr("Activity Overview") + " - " + projectData["name"];
       const win = osparc.ui.window.Window.popUpInWindow(activityOverview, title, osparc.jobs.ActivityCenterWindow.WIDTH, osparc.jobs.ActivityCenterWindow.HEIGHT);
       win.set({
         maxHeight: 700,
@@ -40,9 +40,18 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
 
   members: {
     __buildLayout: function(projectData) {
-      this._add(new qx.ui.basic.Label(this.tr("Runs History")).set({
+      const runsHistoryTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
+        alignY: "middle",
+      })).set({
+        paddingLeft: 10,
+      });
+      const runsHistoryTitle = new qx.ui.basic.Label(this.tr("Runs History")).set({
         font: "text-14"
-      }));
+      });
+      runsHistoryTitleLayout.add(runsHistoryTitle);
+      const runsHistoryTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, the history of the project runs is shown."))
+      runsHistoryTitleLayout.add(runsHistoryTitleHelper);
+      this._add(runsHistoryTitleLayout);
 
       const latestOnly = false;
       const projectUuid = projectData["uuid"];
@@ -55,17 +64,31 @@ qx.Class.define("osparc.jobs.ActivityOverview", {
       runsTable.set({
         maxHeight: 250,
       })
-      this._add(runsTable);
+      this._add(runsTable, {
+        flex: 1
+      });
+
 
-      this._add(new qx.ui.basic.Label(this.tr("Latest Tasks")).set({
+      const latestTasksTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
+        alignY: "middle",
+      })).set({
+        paddingLeft: 10,
+      });
+      const latestTasksTitle = new qx.ui.basic.Label(this.tr("Latest Tasks")).set({
         font: "text-14"
-      }));
+      });
+      latestTasksTitleLayout.add(latestTasksTitle);
+      const latestTasksTitleHelper = new osparc.ui.hint.InfoHint(this.tr("In this table, only the latest tasks or simulations are shown. If available, the logs can be downloaded."))
+      latestTasksTitleLayout.add(latestTasksTitleHelper);
+      this._add(latestTasksTitleLayout);
 
       const subRunsTable = new osparc.jobs.SubRunsTable(projectData["uuid"]);
       subRunsTable.set({
         maxHeight: 250,
       })
-      this._add(subRunsTable);
+      this._add(subRunsTable, {
+        flex: 1,
+      });
     },
   }
 });
diff --git a/services/static-webserver/client/source/class/osparc/jobs/SubRunsTable.js b/services/static-webserver/client/source/class/osparc/jobs/SubRunsTable.js
@@ -41,7 +41,7 @@ qx.Class.define("osparc.jobs.SubRunsTable", {
     const fontButtonRendererInfo = new osparc.ui.table.cellrenderer.ImageButtonRenderer("info", iconPathInfo);
     columnModel.setDataCellRenderer(this.self().COLS.INFO.column, fontButtonRendererInfo);
 
-    const iconPathLogs = "osparc/icons/logs-text.svg";
+    const iconPathLogs = "osparc/icons/file-download-text.svg";
     const fontButtonRendererLogs = new osparc.ui.table.cellrenderer.ImageButtonRenderer("logs", iconPathLogs);
     columnModel.setDataCellRenderer(this.self().COLS.LOGS.column, fontButtonRendererLogs);
 
@@ -108,7 +108,7 @@ qx.Class.define("osparc.jobs.SubRunsTable", {
         id: "credits",
         column: 9,
         label: qx.locale.Manager.tr("Credits"),
-        width: 50
+        width: 70
       },
       INFO: {
         id: "info",
diff --git a/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js b/services/static-webserver/client/source/class/osparc/study/SaveAsTemplate.js
@@ -80,6 +80,7 @@ qx.Class.define("osparc.study.SaveAsTemplate", {
 
       if (!this.__makeItPublic) {
         const shareWith = this.__shareWith = new osparc.share.ShareTemplateWith(this.__studyDataClone);
+        shareWith.exclude(); // for now, hide the shareWith widget
         this._add(shareWith);
       }
 
diff --git a/services/static-webserver/client/source/resource/osparc/icons/file-download-text.svg b/services/static-webserver/client/source/resource/osparc/icons/file-download-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#D8D8D8"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.5 211.4l-96.4 95.7c-6.7 6.6-17.4 6.6-24 0l-96.4-95.7C73.4 337.3 80.5 320 94.8 320H160v-80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v80h65.2c14.3 0 21.4 17.3 11.3 27.4zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg>
diff --git a/services/static-webserver/client/source/resource/osparc/icons/logs-text.svg b/services/static-webserver/client/source/resource/osparc/icons/logs-text.svg

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ qx.Class.define("osparc.study.SaveAsTemplate", {`
`80`	`80`
`81`	`81`	`if (!this.__makeItPublic) {`
`82`	`82`	`const shareWith = this.__shareWith = new osparc.share.ShareTemplateWith(this.__studyDataClone);`
	`83`	`+ shareWith.exclude(); // for now, hide the shareWith widget`
`83`	`84`	`this._add(shareWith);`
`84`	`85`	`}`
`85`	`86`