Added pipeline index viz. Fixes #429 (#438)

WIP #429 Added basic boilerplate for the pipeline index viz

WIP #429 Removed the title

WIP #429 Fixed columns (and text)

WIP #429 Added open, delete actions

WIP #429 Added double click to edit pipeline name

WIP #429 Added check for empty, same name

WIP #429 Added comment for thing to add next

WIP #429 Added some thumbnail support and embedded support

WIP #429 Fixed the thumbnail

WIP #429 thumbnail updates

WIP #429 Set background color and fixed updateNode bug

WIP #429 Fixed update thumbnail deletion

WIP #429 Added preview click-to-open

WIP #429 Added empty message

WIP #429 slight refactor

WIP #429 Added executions text (better phrasing)

WIP #429 Removed toolbar items

WIP #429 Fixed remove undefined bug

WIP #429 Updated seeds

WIP #429 Added pipeline index css to ignore

WIP #429 Fixed code climate issues

WIP #429 Added csslint ignore file

WIP #429 Fixed code climate issues

WIP #429 Added csslint ignore block for materialize

WIP #429 Added thumbnails to cifar10 example

.codeclimate.yml

@@ -32,3 +32,4 @@ exclude_paths:
 - src/common/lua.js
 - src/common/js-yaml.min.js
 - src/visualizers/widgets/TextEditor/lib/
+- src/visualizers/widgets/PipelineIndex/styles/PipelineIndex.css

.csslintrc

@@ -1,2 +1,3 @@
 --exclude-exts=.min.css
+--exclude-list=src/visualizers/widgets/PipelineIndex/styles/PipelineIndex.css
 --ignore=adjoining-classes,box-model,ids,order-alphabetical,unqualified-attributes

src/visualizers/Visualizers.json

@@ -100,5 +100,11 @@
     "title": "ClassEditor",
     "panel": "panels/ClassEditor/ClassEditorPanel",
     "DEBUG_ONLY": false
+  },
+  {
+    "id": "PipelineIndex",
+    "title": "PipelineIndex",
+    "panel": "panels/PipelineIndex/PipelineIndexPanel",
+    "DEBUG_ONLY": false
   }
 ]

src/visualizers/panels/PipelineEditor/PipelineEditorControl.js

@@ -137,6 +137,7 @@ define([
         this._widget.createConnection = this.createConnection.bind(this);
         this._widget.removeConnection = this.removeConnection.bind(this);
         this._widget.getDecorator = this.getDecorator.bind(this);
+        this._widget.updateThumbnail = this.updateThumbnail.bind(this);
     };
 
     PipelineEditorControl.prototype.isContainedInActive = function (gmeId) {
@@ -594,5 +595,27 @@ define([
         }
     };
 
+    PipelineEditorControl.prototype.updateThumbnail = function (svg) {
+        var node = this._client.getNode(this._currentNodeId),
+            name,
+            attrs,
+            currentThumbnail,
+            attrName = 'thumbnail',
+            msg;
+
+        if (node) {  // may have been deleted
+            name = node.getAttribute('name');
+            attrs = node.getValidAttributeNames();
+            currentThumbnail = node.getAttribute(attrName);
+            msg = `Updating pipeline thumbnail for "${name}"`;
+
+            if (attrs.indexOf(attrName) > -1 && currentThumbnail !== svg) {
+                this._client.startTransaction(msg);
+                this._client.setAttributes(this._currentNodeId, attrName, svg);
+                this._client.completeTransaction();
+            }
+        }
+    };
+
     return PipelineEditorControl;
 });

src/visualizers/panels/PipelineIndex/PipelineIndexControl.js

@@ -0,0 +1,225 @@
+/*globals define, WebGMEGlobal*/
+/*jshint browser: true*/
+
+define([
+    'js/Constants',
+    'js/NodePropertyNames'
+], function (
+    CONSTANTS,
+    nodePropertyNames
+) {
+
+    'use strict';
+
+    var PipelineIndexControl;
+
+    PipelineIndexControl = function (options) {
+
+        this._logger = options.logger.fork('Control');
+
+        this._client = options.client;
+
+        // Initialize core collections and variables
+        this._widget = options.widget;
+
+        this._currentNodeId = null;
+        this._embedded = options.embedded;
+
+        this._initWidgetEventHandlers();
+        this._logger.debug('ctor finished');
+    };
+
+    PipelineIndexControl.prototype._initWidgetEventHandlers = function () {
+        this._widget.deletePipeline = id => {
+            var node = this._client.getNode(id),
+                name = node.getAttribute('name'),
+                msg = `Deleting pipeline "${name}"`;
+
+            // Change the current active object
+            this._client.startTransaction(msg);
+            this._client.delMoreNodes([id]);
+            this._client.completeTransaction();
+        };
+
+        this._widget.setName = (id, name) => {
+            var oldName = this._client.getNode(id).getAttribute('name'),
+                msg = `Renaming pipeline: "${oldName}" -> "${name}"`;
+
+            if (oldName !== name && !/^\s*$/.test(name)) {
+                this._client.startTransaction(msg);
+                this._client.setAttributes(id, 'name', name);
+                this._client.completeTransaction();
+            }
+        };
+    };
+
+    /* * * * * * * * Visualizer content update callbacks * * * * * * * */
+    // One major concept here is with managing the territory. The territory
+    // defines the parts of the project that the visualizer is interested in
+    // (this allows the browser to then only load those relevant parts).
+    PipelineIndexControl.prototype.selectedObjectChanged = function (nodeId) {
+        this._logger.debug('activeObject nodeId \'' + nodeId + '\'');
+
+        // Remove current territory patterns
+        if (this._currentNodeId) {
+            this._client.removeUI(this._territoryId);
+        }
+
+        this._currentNodeId = nodeId;
+
+        if (typeof this._currentNodeId === 'string') {
+            // Put new node's info into territory rules
+            this._selfPatterns = {};
+            this._selfPatterns[nodeId] = {children: 1};
+            this._territoryId = this._client.addUI(this, this._eventCallback.bind(this));
+
+            // Update the territory
+            this._client.updateTerritory(this._territoryId, this._selfPatterns);
+        }
+    };
+
+    // This next function retrieves the relevant node information for the widget
+    PipelineIndexControl.prototype._getObjectDescriptor = function (nodeId) {
+        var node = this._client.getNode(nodeId),
+            objDescriptor;
+
+        if (node) {
+            objDescriptor = {
+                id: undefined,
+                name: undefined,
+                parentId: undefined,
+                thumbnail: node.getAttribute('thumbnail'),
+                executionCount: node.getMemberIds('executions').length
+            };
+
+            objDescriptor.id = node.getId();
+            objDescriptor.name = node.getAttribute(nodePropertyNames.Attributes.name);
+            objDescriptor.parentId = node.getParentId();
+        }
+
+        return objDescriptor;
+    };
+
+    /* * * * * * * * Node Event Handling * * * * * * * */
+    PipelineIndexControl.prototype._eventCallback = function (events) {
+        var i = events ? events.length : 0,
+            event;
+
+        this._logger.debug('_eventCallback \'' + i + '\' items');
+
+        while (i--) {
+            event = events[i];
+            switch (event.etype) {
+            case CONSTANTS.TERRITORY_EVENT_LOAD:
+                this._onLoad(event.eid);
+                break;
+            case CONSTANTS.TERRITORY_EVENT_UPDATE:
+                this._onUpdate(event.eid);
+                break;
+            case CONSTANTS.TERRITORY_EVENT_UNLOAD:
+                this._onUnload(event.eid);
+                break;
+            default:
+                break;
+            }
+        }
+
+        this._logger.debug('_eventCallback \'' + events.length + '\' items - DONE');
+    };
+
+    PipelineIndexControl.prototype._onLoad = function (gmeId) {
+        if (gmeId !== this._currentNodeId) {
+            var description = this._getObjectDescriptor(gmeId);
+            this._widget.addNode(description);
+        }
+    };
+
+    PipelineIndexControl.prototype._onUpdate = function (gmeId) {
+        if (gmeId !== this._currentNodeId) {
+            var description = this._getObjectDescriptor(gmeId);
+            this._widget.updateNode(description);
+        }
+    };
+
+    PipelineIndexControl.prototype._onUnload = function (gmeId) {
+        this._widget.removeNode(gmeId);
+    };
+
+    PipelineIndexControl.prototype._stateActiveObjectChanged = function (model, activeObjectId) {
+        if (this._currentNodeId !== activeObjectId) {
+            this.selectedObjectChanged(activeObjectId);
+        }
+    };
+
+    /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+    PipelineIndexControl.prototype.destroy = function () {
+        this._detachClientEventListeners();
+        this._removeToolbarItems();
+    };
+
+    PipelineIndexControl.prototype._attachClientEventListeners = function () {
+        this._detachClientEventListeners();
+        if (!this._embedded) {
+            WebGMEGlobal.State.on('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged, this);
+        }
+    };
+
+    PipelineIndexControl.prototype._detachClientEventListeners = function () {
+        if (!this._embedded) {
+            WebGMEGlobal.State.off('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged);
+        }
+    };
+
+    PipelineIndexControl.prototype.onActivate = function () {
+        this._attachClientEventListeners();
+        this._displayToolbarItems();
+
+        if (typeof this._currentNodeId === 'string') {
+            WebGMEGlobal.State.registerSuppressVisualizerFromNode(true);
+            WebGMEGlobal.State.registerActiveObject(this._currentNodeId);
+            WebGMEGlobal.State.registerSuppressVisualizerFromNode(false);
+        }
+    };
+
+    PipelineIndexControl.prototype.onDeactivate = function () {
+        this._detachClientEventListeners();
+        this._hideToolbarItems();
+    };
+
+    /* * * * * * * * * * Updating the toolbar * * * * * * * * * */
+    PipelineIndexControl.prototype._displayToolbarItems = function () {
+
+        if (this._toolbarInitialized === true) {
+            for (var i = this._toolbarItems.length; i--;) {
+                this._toolbarItems[i].show();
+            }
+        } else {
+            this._initializeToolbar();
+        }
+    };
+
+    PipelineIndexControl.prototype._hideToolbarItems = function () {
+
+        if (this._toolbarInitialized === true) {
+            for (var i = this._toolbarItems.length; i--;) {
+                this._toolbarItems[i].hide();
+            }
+        }
+    };
+
+    PipelineIndexControl.prototype._removeToolbarItems = function () {
+
+        if (this._toolbarInitialized === true) {
+            for (var i = this._toolbarItems.length; i--;) {
+                this._toolbarItems[i].destroy();
+            }
+        }
+    };
+
+    PipelineIndexControl.prototype._initializeToolbar = function () {
+        this._toolbarItems = [];
+        this._toolbarInitialized = true;
+    };
+
+    return PipelineIndexControl;
+});

src/visualizers/panels/PipelineIndex/PipelineIndexPanel.js

@@ -0,0 +1,94 @@
+/*globals define, _, WebGMEGlobal*/
+/*jshint browser: true*/
+/**
+ * Generated by VisualizerGenerator 1.7.0 from webgme on Wed Jun 29 2016 16:10:46 GMT-0500 (CDT).
+ */
+
+define(['js/PanelBase/PanelBaseWithHeader',
+    'js/PanelManager/IActivePanel',
+    'widgets/PipelineIndex/PipelineIndexWidget',
+    './PipelineIndexControl'
+], function (PanelBaseWithHeader,
+             IActivePanel,
+             PipelineIndexWidget,
+             PipelineIndexControl) {
+    'use strict';
+
+    var PipelineIndexPanel;
+
+    PipelineIndexPanel = function (layoutManager, params) {
+        var options = {};
+        //set properties from options
+        options[PanelBaseWithHeader.OPTIONS.LOGGER_INSTANCE_NAME] = 'PipelineIndexPanel';
+        options[PanelBaseWithHeader.OPTIONS.FLOATING_TITLE] = true;
+
+        //call parent's constructor
+        PanelBaseWithHeader.apply(this, [options, layoutManager]);
+
+        this._client = params.client;
+        this._embedded = params.embedded;
+
+        //initialize UI
+        this._initialize();
+
+        this.logger.debug('ctor finished');
+    };
+
+    //inherit from PanelBaseWithHeader
+    _.extend(PipelineIndexPanel.prototype, PanelBaseWithHeader.prototype);
+    _.extend(PipelineIndexPanel.prototype, IActivePanel.prototype);
+
+    PipelineIndexPanel.prototype._initialize = function () {
+        //set Widget title
+        this.setTitle('');
+
+        this.widget = new PipelineIndexWidget(this.logger, this.$el);
+
+        this.control = new PipelineIndexControl({
+            logger: this.logger,
+            client: this._client,
+            embedded: this._embedded,
+            widget: this.widget
+        });
+
+        this.onActivate();
+    };
+
+    /* OVERRIDE FROM WIDGET-WITH-HEADER */
+    /* METHOD CALLED WHEN THE WIDGET'S READ-ONLY PROPERTY CHANGES */
+    PipelineIndexPanel.prototype.onReadOnlyChanged = function (isReadOnly) {
+        //apply parent's onReadOnlyChanged
+        PanelBaseWithHeader.prototype.onReadOnlyChanged.call(this, isReadOnly);
+
+    };
+
+    PipelineIndexPanel.prototype.onResize = function (width, height) {
+        this.logger.debug('onResize --> width: ' + width + ', height: ' + height);
+    };
+
+    /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+    PipelineIndexPanel.prototype.destroy = function () {
+        this.control.destroy();
+        this.widget.destroy();
+
+        PanelBaseWithHeader.prototype.destroy.call(this);
+        WebGMEGlobal.KeyboardManager.setListener(undefined);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    PipelineIndexPanel.prototype.onActivate = function () {
+        this.widget.onActivate();
+        this.control.onActivate();
+        WebGMEGlobal.KeyboardManager.setListener(this.widget);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    PipelineIndexPanel.prototype.onDeactivate = function () {
+        this.widget.onDeactivate();
+        this.control.onDeactivate();
+        WebGMEGlobal.KeyboardManager.setListener(undefined);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    return PipelineIndexPanel;
+});

src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js

@@ -90,6 +90,7 @@ define([
             // Update the given port...
             dstItem.refreshPorts();
         }
+        this.refreshThumbnail();
     };
 
     PipelineEditorWidget.prototype.addNode = function(desc) {
@@ -109,6 +110,7 @@ define([
             this.PORT_STATE = STATE.DEFAULT;
             this.connectPort.apply(this, this.srcPortToConnectArgs);
         }
+        this.refreshThumbnail();
     };
 
     PipelineEditorWidget.prototype._removeConnection = function(id) {
@@ -123,6 +125,7 @@ define([
             dst.refreshPorts();
         }
         EasyDAGWidget.prototype._removeConnection.call(this, id);
+        this.refreshThumbnail();
     };
 
     // May not actually need these port methods
@@ -142,6 +145,7 @@ define([
             this.removePort(gmeId);
         } else {
             EasyDAGWidget.prototype.removeNode.call(this, gmeId);
+            this.refreshThumbnail();
         }
     };
 
@@ -386,5 +390,48 @@ define([
             });
     };
 
+    ////////////////////////// Action Overrides END //////////////////////////
+
+    ////////////////////////// Thumbnail updates //////////////////////////
+    PipelineEditorWidget.prototype.getSvgDistanceDim = function(dim) {
+        var maxValue = this._getMaxAlongAxis(dim),
+            nodes,
+            minValue;
+
+        nodes = this.graph.nodes().map(id => this.graph.node(id));
+        minValue = Math.min.apply(null, nodes.map(node => node[dim]));
+        return maxValue-minValue;
+    };
+
+    PipelineEditorWidget.prototype.getSvgWidth = function() {
+        return this.getSvgDistanceDim('x');
+    };
+
+    PipelineEditorWidget.prototype.getSvgHeight = function() {
+        return this.getSvgDistanceDim('y');
+    };
+
+    PipelineEditorWidget.prototype.getViewBox = function() {
+        var maxX = this.getSvgWidth('x'),
+            maxY = this.getSvgHeight('y');
+
+        return `0 0 ${maxX} ${maxY}`;
+    };
+
+    PipelineEditorWidget.prototype.refreshThumbnail = _.debounce(function() {
+        // Get the svg...
+        var svg = document.createElement('svg'),
+            group = this.$svg.node(),
+            child;
+
+        svg.setAttribute('viewBox', this.getViewBox());
+        for (var i = 0; i < group.children.length; i++) {
+            child = $(group.children[i]);
+            svg.appendChild(child.clone()[0]);
+        }
+
+        this.updateThumbnail(svg.outerHTML);
+    }, 1000);
+
     return PipelineEditorWidget;
 });

src/visualizers/widgets/PipelineIndex/Pipeline.ejs

@@ -0,0 +1,28 @@
+<div class="col s6 m3 l2">
+    <div class="pipeline card" data-id="<%= id %>" style="overflow: hidden;">
+        <div class="center preview card-image waves-effect waves-block waves-light">
+        </div>
+        <div class="card-content">
+            <span data-id="<%= id %>" class="card-title activator grey-text text-darken-4 pipeline-name"><%= name %></span>
+            <p>
+        <% if (executionCount === 0) { %>
+            No executions
+        <% } else if (executionCount === 1){ %>
+            Executed once
+        <% } else if (executionCount === 2){ %>
+            Executed twice
+        <% } else { %>
+            Executed <%= executionCount %> times
+        <% } %>
+        </p>
+        </div>
+        <div class="card-reveal" style="display: none; transform: translateY(0px);">
+            <span class="card-title grey-text text-darken-4">"<%= name %>" Executions<i class="material-icons right">close</i></span>
+            <p></p>
+        </div>
+        <div class="card-action">
+            <a class="open-pipeline" href="#">Open</a>
+            <a class="delete-pipeline" data-id="<%= id %>" href="#">Delete</a>
+        </div>
+    </div>
+</div>

src/visualizers/widgets/PipelineIndex/PipelineIndexWidget.js

@@ -0,0 +1,154 @@
+/*globals define, $, WebGMEGlobal */
+/*jshint browser: true*/
+
+define([
+    'text!./Pipeline.ejs',
+    'underscore',
+    'css!./styles/PipelineIndexWidget.css'
+], function (
+    PipelineHtml,
+    _
+) {
+    'use strict';
+
+    var PipelineIndexWidget,
+        PipelineTemplate = _.template(PipelineHtml),
+        EMPTY_MSG = 'No Existing Pipelines... yet!',
+        WIDGET_CLASS = 'pipeline-index';
+
+    PipelineIndexWidget = function (logger, container) {
+        this._logger = logger.fork('Widget');
+
+        this.$el = $('<div>', {
+            class: 'row'
+        });
+        container.append(this.$el);
+        container.addClass(`${WIDGET_CLASS} container`);
+
+        this.cards = {};
+        this.nodes = {};
+
+        this.$backgroundText = null;
+        this.updateBackgroundText();
+
+        this._initializeEventHandlers();
+        this._logger.debug('ctor finished');
+    };
+
+    PipelineIndexWidget.prototype._initializeEventHandlers = function () {
+        this.$el.on('click', '.open-pipeline', this.openPipeline);
+        this.$el.on('click', '.preview.card-image', this.openPipeline);
+
+        this.$el.on('click', '.delete-pipeline', event => {
+            var id = event.target.getAttribute('data-id');
+            this.deletePipeline(id);
+        });
+
+        this.$el.on('dblclick', '.pipeline-name', event => {
+            var html = $(event.target),
+                id = html.data('id');
+
+            html.editInPlace({
+                css: {
+                    'z-index': 1000
+                },
+                onChange: (oldVal, newVal) => {
+                    this.setName(id, newVal);
+                }
+            });
+        });
+    };
+
+    PipelineIndexWidget.prototype.updateBackgroundText = function() {
+        if (this.$backgroundText) {
+            this.$backgroundText.remove();
+        }
+
+        // Add background text if empty
+        if (Object.keys(this.cards).length === 0) {
+            this.$backgroundText = $('<div>', {class: 'background-text'});
+            this.$backgroundText.text(EMPTY_MSG);
+            this.$el.append(this.$backgroundText);
+        }
+    };
+
+    PipelineIndexWidget.prototype.openPipeline = function (event) {
+        var target = event.target,
+            indexOf = Array.prototype.indexOf,
+            id;
+
+        while (!target.classList || indexOf.call(target.classList, 'pipeline') === -1) {
+            target = target.parentNode;
+        }
+
+        id = target.getAttribute('data-id');
+        WebGMEGlobal.State.registerActiveObject(id);
+    };
+
+    // Adding/Removing/Updating items
+    PipelineIndexWidget.prototype.addNode = function (desc) {
+        var node;
+
+        if (desc) {
+            // Add node to a table of cards
+            this.nodes[desc.id] = desc;
+            node = $(PipelineTemplate(desc));
+            this.cards[desc.id] = node;
+
+            // Add click listeners
+            this.$el.append(node);
+
+            // Add the thumbnail
+            if (desc.thumbnail) {
+                this.addThumbnail(desc.thumbnail, node);
+            }
+            this.updateBackgroundText();
+        }
+    };
+
+    PipelineIndexWidget.prototype.addThumbnail = function (thumbnail, node) {
+        var container = node.find('.preview'),
+            svg = $(thumbnail);
+
+        // scale and shift the thumbnail
+        svg.attr('width', 150)
+            .attr('height', 150);
+
+        container.empty();
+        container.append(svg);
+    };
+
+    PipelineIndexWidget.prototype.removeNode = function (gmeId) {
+        var html = this.cards[gmeId];
+        if (html) {
+            html.remove();
+            delete this.cards[gmeId];
+            this.updateBackgroundText();
+        }
+    };
+
+    PipelineIndexWidget.prototype.updateNode = function (desc) {
+        if (desc && this.cards[desc.id]) {
+            this.cards[desc.id].outerHTML = PipelineTemplate(desc);
+            // Check if the preview changed
+            if (desc.thumbnail !== this.nodes[desc.id].thumbnail) {
+                this.addThumbnail(desc.thumbnail, this.cards[desc.id]);
+            }
+            this.nodes[desc.id] = desc;
+        }
+    };
+
+    /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+    PipelineIndexWidget.prototype.destroy = function () {
+    };
+
+    PipelineIndexWidget.prototype.onActivate = function () {
+        this._logger.debug('PipelineIndexWidget has been activated');
+    };
+
+    PipelineIndexWidget.prototype.onDeactivate = function () {
+        this._logger.debug('PipelineIndexWidget has been deactivated');
+    };
+
+    return PipelineIndexWidget;
+});

src/visualizers/widgets/PipelineIndex/styles/PipelineIndexWidget.scss

@@ -0,0 +1,7 @@
+/**
+ * This file is for any scss that you may want for this visualizer.
+ */
+
+.pipeline-index {
+  outline: none;
+}

webgme-setup.json

@@ -165,6 +165,13 @@
         "panel": "src/visualizers/panels/ClassEditor",
         "secondary": false,
         "widget": "src/visualizers/widgets/ClassEditor"
+      },
+      "PipelineIndex": {
+        "src": "panels/PipelineIndex/PipelineIndexPanel",
+        "title": "PipelineIndex",
+        "panel": "src/visualizers/panels/PipelineIndex",
+        "secondary": false,
+        "widget": "src/visualizers/widgets/PipelineIndex"
       }
     },
     "addons": {},