Set custom operation colors. Fixes #980 (#989)

* WIP #980 Added set operation color button

* WIP #980 Added color selector for operations

* WIP #980 hide color picker on close

* WIP #980 Added displayColor for operations

* WIP #980 made it so you can actually set the color

* WIP #980 use the operation color in op int editor

* WIP #980 Removed displayColor from generated attributes

* WIP #980 Removed displayColor from displayed job attributes

* WIP #980 Added display color to add operation fab

* WIP #980 Updated color in add node dialog

* WIP #980 Selected the color palette

* WIP #980 Fixed linter issues

* WIP #980 updated cifar10 and project seeds

src/common/Constants.js

@@ -15,6 +15,7 @@
         CONTAINED_LAYER_INDEX: 'index',
 
         LINE_OFFSET: 'lineOffset',
+        DISPLAY_COLOR: 'displayColor',
 
         // DeepForge metadata creation in dist execution
         START_CMD: 'deepforge-cmd',

src/common/viz/NodePrompter.js

@@ -4,9 +4,11 @@
 // adding a "plus" button for creating new objects in line
 
 define([
+    'deepforge/Constants',
     'q',
     'css!./NodePrompter.css'
 ], function(
+    Constants,
     Q
 ) {
 
@@ -271,12 +273,14 @@ define([
     };
 
     var Container = function(svg, node) {  // used for positioning
+        var colorAttr = node.attributes[Constants.DISPLAY_COLOR];
         this.$el = svg.append('g');
         this.x = 0;
         this.y = 0;
         this.node = node;
         this.decorator = new node.Decorator({
             node: node,
+            color: colorAttr && colorAttr.value,
             parentEl: this.$el
         });
     };

src/common/viz/PipelineControl.js

@@ -103,6 +103,10 @@ define([
                 delete desc.attributes.code;
             }
 
+            // Handle the display color
+            desc.displayColor = desc.attributes[CONSTANTS.DISPLAY_COLOR].value;
+            delete desc.attributes[CONSTANTS.DISPLAY_COLOR];
+
         } else if (desc.isConnection) {
             // Set src, dst to siblings and add srcPort, dstPort
             desc.srcPort = desc.src;

src/decorators/OperationDecorator/EasyDAG/OperationDecorator.EasyDAGWidget.js

@@ -28,8 +28,9 @@ define([
     //     - unhighlight ports
     //     - report the location of specific ports
     OPERATION_COLORS[CONSTANTS.OP.OUTPUT] = '#b0bec5';
+    OPERATION_COLORS[CONSTANTS.OP.INPUT] = '#b0bec5';
     OperationDecorator = function (options) {
-        options.color = options.color || OPERATION_COLORS[options.node.name] || '#78909c';
+        options.color = OPERATION_COLORS[options.node.name] || options.color || '#78909c';
         DecoratorBase.call(this, options);
 
         this.id = this._node.id;

src/plugins/ExecuteJob/ExecuteJob.Files.js

@@ -11,6 +11,15 @@ define([
     CONSTANTS
 ) {
 
+    var SKIP_ATTRIBUTES = [
+        'code',
+        'stdout',
+        'execFiles',
+        'jobId',
+        'secret',
+        CONSTANTS.LINE_OFFSET,
+        CONSTANTS.DISPLAY_COLOR
+    ];
     var ExecuteJob = function() {
     };
 
@@ -285,13 +294,12 @@ define([
     };
 
     ExecuteJob.prototype.createAttributeFile = function (node, files) {
-        var skip = ['code', 'stdout', 'execFiles', 'jobId', 'secret', CONSTANTS.LINE_OFFSET],
-            numOrBool = /^(-?\d+\.?\d*((e|e-)\d+)?|(true|false))$/,
+        var numOrBool = /^(-?\d+\.?\d*((e|e-)\d+)?|(true|false))$/,
             table;
 
         this.logger.info('Creating attributes file...');
         table = '{\n\t' + this.core.getAttributeNames(node)
-            .filter(attr => skip.indexOf(attr) === -1)
+            .filter(attr => SKIP_ATTRIBUTES.indexOf(attr) === -1)
             .map(name => {
                 var value = this.getAttribute(node, name);
                 if (!numOrBool.test(value)) {

src/seeds/pipeline/version.txt

@@ -1 +1 @@
-0.5.0
+0.6.0

src/visualizers/panels/ExecutionView/ExecutionViewControl.js

@@ -116,6 +116,7 @@ define([
                     allAttrs = {},
                     hiddenAttrs = [
                         CONSTANTS.LINE_OFFSET,
+                        CONSTANTS.DISPLAY_COLOR,
                         'code',
                         'name'
                     ],

src/visualizers/panels/OperationInterfaceEditor/OperationInterfaceEditorControl.js

@@ -155,6 +155,8 @@ define([
             // Remove DeepForge hidden attributes
             delete desc.attributes.code;
             delete desc.attributes[CONSTANTS.LINE_OFFSET];
+            desc.displayColor = desc.attributes[CONSTANTS.DISPLAY_COLOR].value;
+            delete desc.attributes[CONSTANTS.DISPLAY_COLOR];
         }
 
         // Extra decoration for data

src/visualizers/widgets/OperationInterfaceEditor/Buttons.js

@@ -1,16 +1,23 @@
 /*globals define*/
 define([
     'deepforge/viz/Buttons',
+    'deepforge/Constants',
     'widgets/EasyDAG/Buttons',
     'widgets/EasyDAG/Icons',
-    'underscore'
+    'underscore',
+    './lib/spectrum.min'
 ], function(
     CommonButtons,
+    Constants,
     EasyDAGButtons,
     Icons,
     _
 ) {
 
+    var COLOR_PALETTE = [
+        ['#78909c', '#ce93d8', '#ff9100', '#ffb74d', '#ffe0b2'],
+        ['#42a5f5', '#80deea', '#80cbc4', '#a5d6a7', '#69f0ae']
+    ];
     var AddOutput = function(params) {
         params.title = params.title || 'Add operation output';
         EasyDAGButtons.Add.call(this, params);
@@ -89,9 +96,54 @@ define([
         this.selectionManager.deselect();
     };
 
+    // Set the color
+    var SetColor = function(params) {
+        params.title = params.title || 'Set operation color';
+        EasyDAGButtons.Add.call(this, params);
+
+        // Add the click handling
+        var currentColor = this.item.desc.displayColor;
+        $('.set-color-icon').spectrum({
+            change: color => this.onColorChanged(color.toHexString()),
+            showPaletteOnly: true,
+            showPalette: true,
+            clickoutFiresChange: true,
+            hideAfterPaletteSelect: true,
+
+            color: currentColor,
+            palette: COLOR_PALETTE
+        });
+    };
+    _.extend(SetColor.prototype, EasyDAGButtons.Add.prototype);
+
+    SetColor.prototype.BTN_CLASS = 'set-color-icon';
+    SetColor.prototype._onClick = function() {};
+
+    SetColor.prototype.onColorChanged = function(color) {
+        // Set the displayColor attribute to the given hex value
+        this.context.saveAttributeForNode(this.item.id, Constants.DISPLAY_COLOR, color);
+    };
+
+    SetColor.prototype._render = function() {
+        var lineRadius = EasyDAGButtons.Add.SIZE - EasyDAGButtons.Add.BORDER,
+            btnColor = '#ffcc80';
+
+        if (this.disabled) {
+            btnColor = '#e0e0e0';
+        }
+
+        this.$el
+            .append('circle')
+            .attr('r', EasyDAGButtons.Add.SIZE)
+            .attr('fill', btnColor);
+
+        Icons.addIcon('brush', this.$el, {radius: lineRadius});
+    };
+
     return {
         AddOutput: AddOutput,
         AddInput: AddInput,
+        SetColor: SetColor,
         AddRef: AddRef,
         GoToBase: CommonButtons.GoToBase,
         Delete: Delete

src/visualizers/widgets/OperationInterfaceEditor/Item.js

@@ -9,6 +9,8 @@ define([
     
     var Item = function(parentEl, desc) {
         DAGItem.call(this, parentEl, desc);
+        this.decorator.color = desc.displayColor || this.decorator.color;
+
 
         // Show the warnings
         this.$warning = null;
@@ -19,6 +21,7 @@ define([
     _.extend(Item.prototype, DAGItem.prototype);
     
     Item.prototype.update = function(desc) {
+        this.decorator.color = desc.displayColor || this.decorator.color;
         DAGItem.prototype.update.call(this, desc);
         this.updateWarnings();
     };

src/visualizers/widgets/OperationInterfaceEditor/SelectionManager.js

@@ -17,6 +17,12 @@ define([
 
     _.extend(SelectionManager.prototype, EasyDAGSelectionManager.prototype);
 
+    SelectionManager.prototype.deselect = function() {
+        // this would be better in a 'destroy' method...
+        $('.set-color-icon').spectrum('hide');
+        EasyDAGSelectionManager.prototype.deselect.call(this);
+    };
+
     SelectionManager.prototype.createActionButtons = function(width, height) {
         var selectedType = this.selectedItem.desc.baseName,
             dataNodes,
@@ -53,6 +59,14 @@ define([
                 x: 2*width/3,
                 y: 0
             });
+
+            new Buttons.SetColor({  // Set the operation color
+                context: this._widget,
+                $pEl: this.$selection,
+                item: this.selectedItem,
+                x: 0,
+                y: height
+            });
         } else {  // Data or pointer...
             new Buttons.Delete({
                 context: this._widget,

src/visualizers/widgets/PipelineEditor/OperationNode.js

@@ -9,7 +9,10 @@ define([
 
     'use strict';
     var OperationNode = function(parentEl, desc) {
-        DAGItem.call(this, parentEl, desc);
+        var decoratorOpts = {
+            color: desc.displayColor
+        };
+        DAGItem.call(this, parentEl, desc, decoratorOpts);
         this.inputs = desc.inputs;
         this.outputs = desc.outputs;
         this._visiblePorts = null;

src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js

@@ -64,6 +64,17 @@ define([
         return 'PipelineEditor';
     };
 
+    PipelineEditorWidget.prototype.onCreateInitialNode = function() {
+        var initialNodes = this.getValidInitialNodes().map(node => {
+            var colorAttr = node.attributes[CONSTANTS.DISPLAY_COLOR];
+            node.decoratorOpts = {color: colorAttr && colorAttr.value};
+            return {node};
+        });
+
+        AddNodeDialog.prompt(initialNodes)
+            .then(selected => this.createNode(selected.node.id));
+    };
+
     PipelineEditorWidget.prototype.setupItemCallbacks = function() {
         ThumbnailWidget.prototype.setupItemCallbacks.call(this);
         this.ItemClass.prototype.connectPort =