Bind node states to GUI elements

services/web/client/source/class/osparc/component/node/BaseNodeView.js

@@ -58,6 +58,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
     __pane2: null,
     __title: null,
     __serviceInfoLayout: null,
+    __nodeStatusUI: null,
     __header: null,
     _mainView: null,
     __inputsView: null,
@@ -66,8 +67,9 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
     _settingsLayout: null,
     _mapperLayout: null,
     _iFrameLayout: null,
+    _loggerLayout: null,
     __buttonContainer: null,
-    __filesButton: null,
+    __outFilesButton: null,
 
     populateLayout: function() {
       this.__cleanLayout();
@@ -77,6 +79,8 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       this.__addOutputPortsUIs();
       this._addSettings();
       this._addIFrame();
+      // this._addLogger();
+
       this._addButtons();
     },
 
@@ -193,6 +197,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       this._settingsLayout = this.self().createSettingsGroupBox(this.tr("Settings"));
       this._mapperLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
       this._iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
+      this._loggerLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());
 
       return mainView;
     },
@@ -237,8 +242,14 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
 
       header.addSpacer();
 
+      // just a placeholder until the node is set
+      const nodeStatusUI = this.__nodeStatusUI = new qx.ui.core.Widget();
+      header.add(nodeStatusUI);
+
+      header.addSpacer();
+
       const buttonsPart = this.__buttonContainer = new qx.ui.toolbar.Part();
-      const filesBtn = this.__filesButton = new qx.ui.toolbar.Button(this.tr("Output Files"), "@FontAwesome5Solid/folder-open/14");
+      const filesBtn = this.__outFilesButton = new qx.ui.toolbar.Button(this.tr("Output Files"), "@FontAwesome5Solid/folder-open/14");
       osparc.utils.Utils.setIdToWidget(filesBtn, "nodeViewFilesBtn");
       filesBtn.addListener("execute", () => this.__openNodeDataManager(), this);
       buttonsPart.add(filesBtn);
@@ -334,7 +345,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
         retrieveBtn.setEnabled(Boolean(this.getNode().getServiceUrl()));
         this.__buttonContainer.add(retrieveBtn);
       }
-      this.__buttonContainer.add(this.__filesButton);
+      this.__buttonContainer.add(this.__outFilesButton);
       this.__header.add(this.__buttonContainer);
     },
 
@@ -346,6 +357,7 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       const othersStatus2 = isSettingsGroupShowable && !maximize ? "visible" : "excluded";
       this._settingsLayout.setVisibility(othersStatus2);
       this._mapperLayout.setVisibility(othersStatus);
+      this._loggerLayout.setVisibility(othersStatus);
       this.__header.setVisibility(othersStatus);
     },
 
@@ -475,13 +487,27 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
       throw new Error("Abstract method called!");
     },
 
+    _addLogger: function() {
+      return;
+    },
+
     /**
       * @abstract
       */
     _openEditAccessLevel: function() {
       throw new Error("Abstract method called!");
     },
 
+    __createNodeStatusUI: function(node) {
+      const nodeStatusUI = new osparc.ui.basic.NodeStatusUI(node).set({
+        backgroundColor: "material-button-background"
+      });
+      nodeStatusUI.getChildControl("label").set({
+        font: "text-16"
+      });
+      return nodeStatusUI;
+    },
+
     /**
       * @param node {osparc.data.model.Node} node
       */
@@ -498,6 +524,13 @@ qx.Class.define("osparc.component.node.BaseNodeView", {
         const infoButton = this.__getInfoButton();
         this.__serviceInfoLayout.add(infoButton);
       }
+
+      const idx = this.__header.indexOf(this.__nodeStatusUI);
+      if (idx > -1) {
+        this.__header.remove(this.__nodeStatusUI);
+      }
+      this.__nodeStatusUI = this.__createNodeStatusUI(node);
+      this.__header.addAt(this.__nodeStatusUI, idx);
     }
   }
 });

services/web/client/source/class/osparc/component/node/NodeView.js

@@ -100,34 +100,55 @@ qx.Class.define("osparc.component.node.NodeView", {
 
       const loadingPage = this.getNode().getLoadingPage();
       const iFrame = this.getNode().getIFrame();
-      if (loadingPage === null && iFrame === null) {
-        return;
-      }
-      [
-        loadingPage,
-        iFrame
-      ].forEach(widget => {
-        if (widget) {
-          widget.addListener("maximize", e => {
-            this._maximizeIFrame(true);
-          }, this);
-          widget.addListener("restore", e => {
-            this._maximizeIFrame(false);
-          }, this);
-          this._maximizeIFrame(widget.hasState("maximized"));
-        }
-      });
-      this.__iFrameChanged();
-
-      iFrame.addListener("load", () => {
+      if (loadingPage && iFrame) {
+        [
+          loadingPage,
+          iFrame
+        ].forEach(widget => {
+          if (widget) {
+            widget.addListener("maximize", e => {
+              this._maximizeIFrame(true);
+            }, this);
+            widget.addListener("restore", e => {
+              this._maximizeIFrame(false);
+            }, this);
+            this._maximizeIFrame(widget.hasState("maximized"));
+          }
+        });
         this.__iFrameChanged();
-      });
+
+        iFrame.addListener("load", () => {
+          this.__iFrameChanged();
+        });
+      } else {
+        // This will keep what comes after at the bottom
+        this._iFrameLayout.add(new qx.ui.core.Spacer(), {
+          flex: 1
+        });
+      }
 
       this._addToMainView(this._iFrameLayout, {
         flex: 1
       });
     },
 
+    _addLogger: function() {
+      this._loggerLayout.removeAll();
+
+      const loggerView = this.__loggerView = this.getNode().getLogger().set({
+        maxHeight: 250
+      });
+      loggerView.getChildControl("pin-node").exclude();
+      const loggerPanel = new osparc.desktop.PanelView(this.tr("Logger"), loggerView).set({
+        collapsed: true,
+        backgroundColor: "background-main-lighter"
+      });
+      osparc.utils.Utils.setIdToWidget(loggerPanel.getTitleLabel(), "nodeLoggerTitleLabel");
+      this._loggerLayout.add(loggerPanel);
+
+      this._addToMainView(this._loggerLayout);
+    },
+
     _openEditAccessLevel: function() {
       const settingsEditorLayout = osparc.component.node.BaseNodeView.createSettingsGroupBox(this.tr("Settings"));
       const propsFormEditor = this.getNode().getPropsFormEditor();

services/web/client/source/class/osparc/component/widget/CollapsibleView.js

@@ -100,12 +100,18 @@ qx.Class.define("osparc.component.widget.CollapsibleView", {
         }
         case "title": {
           const header = this.getChildControl("header");
-          control = new qx.ui.basic.Atom(this.getTitle());
+          control = new qx.ui.basic.Label(this.getTitle());
           header.addAt(control, 1);
           // Attach handler
           this.__attachToggler(control);
           break;
         }
+        case "icon": {
+          const header = this.getChildControl("header");
+          control = new qx.ui.basic.Image();
+          header.addAt(control, 2);
+          break;
+        }
       }
       return control || this.base(arguments, id);
     },
@@ -187,12 +193,16 @@ qx.Class.define("osparc.component.widget.CollapsibleView", {
       }
     },
 
+    _applyCaretSize: function(size) {
+      this.getChildControl("caret").setSource(this.__getCaretId(this.getCollapsed()));
+    },
+
     _applyTitle: function(title) {
-      this.getChildControl("title").setLabel(title);
+      this.getChildControl("title").setValue(title);
     },
 
-    _applyCaretSize: function(size) {
-      this.getChildControl("caret").setSource(this.__getCaretId(this.getCollapsed()));
+    _applyIcon: function(icon) {
+      this.getChildControl("icon").setSource(icon);
     },
 
     __getCaretId: function(collapsed) {

services/web/client/source/class/osparc/component/widget/NodePorts.js

@@ -44,7 +44,30 @@ qx.Class.define("osparc.component.widget.NodePorts", {
 
     this.base(arguments, node.getLabel());
 
+    this.getTitleBar().set({
+      height: 30
+    });
     node.bind("label", this, "title");
+
+    node.getStatus().bind("modified", this.getChildControl("icon"), "source", {
+      converter: modified => {
+        if (modified === null) {
+          return osparc.utils.StatusUI.getIconSource();
+        }
+        return osparc.utils.StatusUI.getIconSource(modified === true ? "modified" : "up-to-date");
+      }
+    }, this);
+    node.getStatus().bind("modified", this.getChildControl("icon"), "textColor", {
+      converter: modified => {
+        if (modified === null) {
+          return osparc.utils.StatusUI.getColor();
+        }
+        return osparc.utils.StatusUI.getColor(modified === true ? "modified" : "up-to-date");
+      }
+    }, this);
+    node.getStatus().bind("modified", this.getChildControl("icon"), "toolTipText", {
+      converter: modified => modified === true ? this.tr("Out of date") : ""
+    }, this);
   },
 
   properties: {

services/web/client/source/class/osparc/component/widget/logger/RemoteTableModel.js → services/web/client/source/class/osparc/component/widget/logger/LoggerTable.js

@@ -25,7 +25,7 @@
  * Here is a little example of how to use the widget.
  *
  * <pre class='javascript'>
- *   let tableModel = this.__logModel = new osparc.component.widget.logger.RemoteTableModel();
+ *   let tableModel = this.__logModel = new osparc.component.widget.logger.LoggerTable();
  *   tableModel.setColumns(["Origin", "Message"], ["whoRich", "whatRich"]);
  *   let custom = {
  *     tableColumnModel : function(obj) {
@@ -42,14 +42,19 @@
  * @asset(demobrowser/backend/remote_table.php)
  */
 
-qx.Class.define("osparc.component.widget.logger.RemoteTableModel", {
-
+qx.Class.define("osparc.component.widget.logger.LoggerTable", {
   extend : qx.ui.table.model.Remote,
 
   construct : function() {
     this.base(arguments);
 
-    this.setColumns(["Origin", "Message"], ["whoRich", "msgRich"]);
+    this.setColumns([
+      "Origin",
+      "Message"
+    ], [
+      "whoRich",
+      "msgRich"
+    ]);
 
     this.__rawData = [];
   },
@@ -60,15 +65,11 @@ qx.Class.define("osparc.component.widget.logger.RemoteTableModel", {
       check : "Number",
       init: -1
     },
+
     filterString: {
       nullable: true,
       check : "String",
       init: ""
-    },
-    caseSensitive: {
-      nullable: false,
-      check : "Boolean",
-      init: false
     }
   },
 
@@ -85,8 +86,8 @@ qx.Class.define("osparc.component.widget.logger.RemoteTableModel", {
     addRows: function(newRows) {
       for (let i=0; i<newRows.length; i++) {
         const newRow = newRows[i];
-        newRow["whoRich"] = osparc.component.widget.logger.RemoteTableModel.addColorTag(newRow.label, newRow.nodeColor);
-        newRow["msgRich"] = osparc.component.widget.logger.RemoteTableModel.addColorTag(newRow.msg, newRow.msgColor);
+        newRow["whoRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(newRow.label, newRow.nodeColor);
+        newRow["msgRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(newRow.msg, newRow.msgColor);
         this.__rawData.push(newRow);
       }
     },
@@ -100,7 +101,7 @@ qx.Class.define("osparc.component.widget.logger.RemoteTableModel", {
         const row = this.__rawData[i];
         if (row.nodeId === nodeId) {
           row.label = newLabel;
-          row["whoRich"] = osparc.component.widget.logger.RemoteTableModel.addColorTag(row.label, row.nodeColor);
+          row["whoRich"] = osparc.component.widget.logger.LoggerTable.addColorTag(row.label, row.nodeColor);
         }
       }
     },
@@ -143,13 +144,9 @@ qx.Class.define("osparc.component.widget.logger.RemoteTableModel", {
       if (searchString === null || searchString === "") {
         return true;
       }
-      if (searchString && !this.isCaseSensitive()) {
-        searchString = searchString.toUpperCase();
-      }
-      if (msg !== null && msg !== undefined) {
-        if (!this.isCaseSensitive()) {
-          msg = msg.toUpperCase();
-        }
+      searchString = searchString.toUpperCase();
+      if (msg) {
+        msg = msg.toUpperCase();
         return msg.includes(searchString);
       }
       return false;