🎨 [Frontend] Highlight workbench elements

services/static-webserver/client/source/class/osparc/file/FileDrop.js

@@ -102,7 +102,9 @@ qx.Class.define("osparc.file.FileDrop", {
         }
       }
       return files;
-    }
+    },
+
+    ONE_FILE_ONLY: qx.locale.Manager.tr("Only one file at a time is accepted.") + "<br>" + qx.locale.Manager.tr("Please zip all files together."),
   },
 
   events: {
@@ -299,7 +301,7 @@ qx.Class.define("osparc.file.FileDrop", {
               pos: this.__pointerFileEventToScreenPos(e)
             });
           } else {
-            osparc.FlashMessenger.getInstance().logAs(this.tr("Only one file at a time is accepted."), "ERROR");
+            osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, "ERROR");
           }
         } else {
           osparc.FlashMessenger.getInstance().logAs(this.tr("Folders are not accepted. You might want to upload a zip file."), "ERROR");

services/static-webserver/client/source/class/osparc/file/FilePicker.js

@@ -417,7 +417,7 @@ qx.Class.define("osparc.file.FilePicker", {
     },
 
     uploadPendingFiles: function(files) {
-      if (files.length > 0) {
+      if (files.length) {
         if (files.length === 1) {
           const fileUploader = new osparc.file.FileUploader(this.getNode());
           fileUploader.addListener("uploadAborted", () => this.__resetOutput());
@@ -428,7 +428,7 @@ qx.Class.define("osparc.file.FilePicker", {
           fileUploader.retrieveUrlAndUpload(files[0]);
           return true;
         }
-        osparc.FlashMessenger.getInstance().logAs(this.tr("Only one file is accepted"), "ERROR");
+        osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, "ERROR");
       }
       return false;
     },

services/static-webserver/client/source/class/osparc/form/renderer/PropForm.js

@@ -36,6 +36,7 @@ qx.Class.define("osparc.form.renderer.PropForm", {
   },
 
   events: {
+    "highlightEdge": "qx.event.type.Data",
     "linkFieldModified": "qx.event.type.Data",
     "fileRequested": "qx.event.type.Data",
     "filePickerRequested": "qx.event.type.Data",
@@ -928,6 +929,17 @@ qx.Class.define("osparc.form.renderer.PropForm", {
         nodeUuid: fromNodeId,
         output: fromPortId
       };
+      const highlightEdgeUI = highlight => {
+        this.fireDataEvent("highlightEdge", {
+          highlight,
+          toNodeId: this.getNode().getNodeId(),
+          toPortId,
+          fromNodeId,
+          fromPortId,
+        });
+      };
+      ctrlLink.addListener("mouseover", () => highlightEdgeUI(true));
+      ctrlLink.addListener("mouseout", () => highlightEdgeUI(false));
 
       const workbench = study.getWorkbench();
       const fromNode = workbench.getNode(fromNodeId);

services/static-webserver/client/source/class/osparc/theme/Appearance.js

@@ -192,19 +192,19 @@ qx.Theme.define("osparc.theme.Appearance", {
       WINDOW-SMALL-CAP CHOOSER
     ---------------------------------------------------------------------------
     */
-    "window-small-cap": {
+    "node-ui-cap": {
       include: "window", // get all the settings from window
       alias: "window", // redirect kids to window/kid
       style: function(states) {
         return {
           backgroundColor: states.selected ? "node-selected-background" : "node-background",
           textColor: states.selected ? "text-selected" : "text",
-          decorator: states.maximized ? "window-small-cap-maximized" : "window-small-cap"
+          decorator: states.maximized ? "node-ui-cap-maximized" : "node-ui-cap"
         };
       }
     },
 
-    "window-small-cap/captionbar": {
+    "node-ui-cap/captionbar": {
       include: "window/captionbar", // load defaults from window captionbar
       alias: "window/captionbar", // redirect kids
       style: function(states) {
@@ -217,7 +217,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/title": {
+    "node-ui-cap/title": {
       include: "window/title",
       style: function(states) {
         return {
@@ -228,7 +228,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/minimize-button": {
+    "node-ui-cap/minimize-button": {
       alias: "window/minimize-button",
       include: "window/minimize-button",
       style: function(states) {
@@ -238,7 +238,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/restore-button": {
+    "node-ui-cap/restore-button": {
       alias: "window/restore-button",
       include: "window/restore-button",
       style: function(states) {
@@ -248,7 +248,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/maximize-button": {
+    "node-ui-cap/maximize-button": {
       alias: "window/maximize-button",
       include: "window/maximize-button",
       style: function(states) {
@@ -258,7 +258,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/close-button": {
+    "node-ui-cap/close-button": {
       alias: "window/close-button",
       include: "window/close-button",
       style: function(states) {
@@ -268,7 +268,7 @@ qx.Theme.define("osparc.theme.Appearance", {
       }
     },
 
-    "window-small-cap/progress": "progressbar",
+    "node-ui-cap/progress": "progressbar",
 
     "service-window": {
       include: "window",

services/static-webserver/client/source/class/osparc/theme/ColorDark.js

@@ -68,6 +68,8 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",
     "window-caption-text-active": "c12",
+    "window-border":  "background-main-2",
+    "window-border-inner":  "background-main-1",
 
     // material-button
     "material-button-background": "fab-background",
@@ -111,10 +113,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "button-box-pressed":  "background-main-4",
     "border-lead": "c07",
 
-    // window
-    "window-border":  "background-main-2",
-    "window-border-inner":  "background-main-1",
-
     // group box
     "white-box-border":  "background-main-2",
 
@@ -172,7 +170,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
     "workbench-start-hint": "#505050",
 
     "node-background": "rgba(113, 157, 181, 0.5)",
-    "node-selected-background": "background-selected",
+    "node-selected-background": "strong-main",
     "node-title-text": "text-selected",
     "node-port-text": "#454545",
 

services/static-webserver/client/source/class/osparc/theme/ColorLight.js

@@ -68,6 +68,8 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "window-caption-background-active":  "background-main-3",
     "window-caption-text": "text",
     "window-caption-text-active": "c12",
+    "window-border":  "background-main-2",
+    "window-border-inner":  "background-main-1",
 
     // material-button
     "material-button-background":  "fab-background",
@@ -111,10 +113,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "button-box-pressed":  "background-main-4",
     "border-lead": "c07",
 
-    // window
-    "window-border":  "background-main-2",
-    "window-border-inner":  "background-main-1",
-
     // group box
     "white-box-border":  "background-main-2",
 
@@ -172,7 +170,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
     "workbench-start-hint": "#AFAFAF",
 
     "node-background": "rgba(113, 157, 181, 0.35)",
-    "node-selected-background": "background-selected",
+    "node-selected-background": "strong-main",
     "node-title-text": "#232323",
     "node-port-text": "#454545",
 

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -137,7 +137,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "window-small-cap": {
+    "node-ui-cap": {
       include: "service-window",
       style: {
         shadowBlurRadius: 0,
@@ -150,7 +150,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "window-small-cap-maximized": {
+    "node-ui-cap-maximized": {
       include: "service-window-maximized",
       style: {
         width: 1,

services/static-webserver/client/source/class/osparc/widget/Renamer.js

@@ -44,7 +44,6 @@ qx.Class.define("osparc.widget.Renamer", {
     const minWidth = 150;
     const labelWidth = oldLabel ? Math.min(Math.max(parseInt(oldLabel.length*4), minWidth), maxWidth) : minWidth;
     this.set({
-      appearance: "window-small-cap",
       layout: new qx.ui.layout.VBox(5),
       autoDestroy: true,
       padding: 2,

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

@@ -28,6 +28,7 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
     grid.setColumnFlex(1, 1);
 
     this.set({
+      appearance: "node-ui-cap",
       layout: grid,
       showMinimize: false,
       showMaximize: false,
@@ -84,11 +85,6 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
       nullable: false
     },
 
-    appearance: {
-      init: "window-small-cap",
-      refine: true
-    },
-
     isMovable: {
       check: "Boolean",
       init: true,
@@ -113,8 +109,8 @@ qx.Class.define("osparc.workbench.BaseNodeUI", {
     },
 
     captionHeight: function() {
-      return osparc.theme.Appearance.appearances["window-small-cap/captionbar"].style().height ||
-        osparc.theme.Appearance.appearances["window-small-cap/captionbar"].style().minHeight;
+      return osparc.theme.Appearance.appearances["node-ui-cap/captionbar"].style().height ||
+        osparc.theme.Appearance.appearances["node-ui-cap/captionbar"].style().minHeight;
     }
   },
 

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

@@ -122,6 +122,15 @@ qx.Class.define("osparc.workbench.EdgeUI", {
       }
     },
 
+    setHighlighted: function(highlight) {
+      if (highlight) {
+        const strongColor = qx.theme.manager.Color.getInstance().resolve("strong-main");
+        osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), strongColor);
+      } else {
+        this.__updateEdgeState();
+      }
+    },
+
     getEdgeId: function() {
       return this.getEdge().getEdgeId();
     },

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

@@ -484,7 +484,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
       const allChildren = Array.from(this.getContentElement().getDomElement().getElementsByTagName("*"));
       const nodesAndSuspicious = allChildren.filter(child => parseInt(child.style.zIndex) >= 100000);
       nodesAndSuspicious.forEach(child => {
-        if (child.className !== "qx-window-small-cap") {
+        if (child.className !== "qx-node-ui-cap") {
           console.warn("moving undesired element to background");
           child.style.zIndex = "1";
         }
@@ -654,6 +654,25 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
       nodeUI.addListener("infoNode", e => this.__openNodeInfo(e.getData()), this);
       nodeUI.addListener("removeNode", e => this.fireDataEvent("removeNode", e.getData()), this);
 
+      if (nodeUI.getNode().getPropsForm()) {
+        nodeUI.getNode().getPropsForm().addListener("highlightEdge", e => {
+          const {
+            highlight,
+            fromNodeId,
+            toNodeId,
+          } = e.getData();
+          const edgeFound = this.__edgesUI.find(edgeUI => {
+            const edge = edgeUI.getEdge();
+            const inputNode = edge.getInputNode();
+            const outputNode = edge.getOutputNode();
+            return (inputNode.getNodeId() === fromNodeId && outputNode.getNodeId() === toNodeId)
+          });
+          if (edgeFound) {
+            edgeFound.setHighlighted(highlight);
+          }
+        });
+      }
+
       return nodeUI;
     },
 
@@ -2002,7 +2021,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
               filePicker.addListener("fileUploaded", () => this.fireDataEvent("nodeSelected", nodeUI.getNodeId()), this);
             }
           } else {
-            osparc.FlashMessenger.getInstance().logAs(this.tr("Only one file at a time is accepted."), "ERROR");
+            osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, "ERROR");
           }
         } else {
           osparc.FlashMessenger.getInstance().logAs(this.tr("Folders are not accepted. You might want to upload a zip file."), "ERROR");