Add Support For 3D Scatter Plots and Line Plots (Closes #1463)

src/common/viz/FigureExtractor.js

@@ -6,6 +6,7 @@ define(['./Utils'], function (Utils) {
     };
     const EXTRACTORS = {
         GRAPH: 'Graph',
+        SUBGRAPH: 'SubGraph',
         PLOT2D: 'Plot2D',
         PLOT3D: 'Plot3D',
         IMAGE: 'Image',
@@ -28,6 +29,12 @@ define(['./Utils'], function (Utils) {
         }
     };
 
+    FigureExtractor.prototype.extractChildrenOfType = function(node, metaType) {
+        const children = node.getChildrenIds().map(id => this._client.getNode(id));
+        return children.filter(node => this.getMetaType(node) === metaType)
+            .map(child => this.extract(child));
+    };
+
     FigureExtractor.prototype.constructor = FigureExtractor;
 
     FigureExtractor.prototype[EXTRACTORS.GRAPH] = function(node) {
@@ -54,7 +61,8 @@ define(['./Utils'], function (Utils) {
         return desc;
     };
 
-    FigureExtractor.prototype[EXTRACTORS.PLOT2D] = function (node) {
+
+    FigureExtractor.prototype[EXTRACTORS.SUBGRAPH] = function(node){
         const id = node.getId(),
             graphId = node.getParentId(),
             execId = this.getExecutionId(node);
@@ -63,7 +71,7 @@ define(['./Utils'], function (Utils) {
         desc = {
             id: id,
             execId: execId,
-            type: 'plot2D',
+            type: this.getMetaType(node) === EXTRACTORS.PLOT3D ? 'plot3D' : 'plot2D',
             graphId: this._client.getNode(graphId).getAttribute('id'),
             subgraphId: node.getAttribute('id'),
             subgraphName: node.getAttribute('name'),
@@ -74,20 +82,22 @@ define(['./Utils'], function (Utils) {
             ylabel: node.getAttribute('ylabel'),
         };
 
-        const children = node.getChildrenIds().map(id => this._client.getNode(id));
-        desc.lines = children.filter(node => this.getMetaType(node) === EXTRACTORS.LINE)
-            .map(lineNode => this.extract(lineNode));
-        desc.images = children.filter(node => this.getMetaType(node) === EXTRACTORS.IMAGE)
-            .map(imageNode => this.extract(imageNode));
-
-        desc.scatterPoints = children.filter(node => this.getMetaType(node) === EXTRACTORS.SCATTER_POINTS)
-            .map(scatterPointsNode => this.extract(scatterPointsNode));
+        desc.lines = this.extractChildrenOfType(node, EXTRACTORS.LINE);
+        desc.scatterPoints = this.extractChildrenOfType(node, EXTRACTORS.SCATTER_POINTS);
+        return desc;
+    };
 
+    FigureExtractor.prototype[EXTRACTORS.PLOT2D] = function (node) {
+        let desc = this[EXTRACTORS.SUBGRAPH](node);
+        desc.images = this.extractChildrenOfType(node, EXTRACTORS.IMAGE);
         return desc;
     };
 
-    FigureExtractor.prototype[EXTRACTORS.PLOT3D] = function(/*node*/) {
-        throw new Error('Not Implemented yet');
+    FigureExtractor.prototype[EXTRACTORS.PLOT3D] = function(node) {
+        let desc = this[EXTRACTORS.SUBGRAPH](node);
+        desc.zlim = node.getAttribute('zlim');
+        desc.zlabel = node.getAttribute('zlabel');
+        return desc;
     };
 
     FigureExtractor.prototype[EXTRACTORS.LINE] = function (node) {
@@ -97,22 +107,21 @@ define(['./Utils'], function (Utils) {
 
         points = node.getAttribute('points').split(';')
             .filter(data => !!data)  // remove any ''
-            .map(pair => {
-                const [x, y] = pair.split(',').map(num => parseFloat(num));
-                return {x, y};
-            });
+            .map(pair => extractPointsArray(pair));
+
         desc = {
             id: id,
             execId: execId,
             subgraphId: this._client.getNode(node.getParentId()).getAttribute('id'),
             lineName: node.getAttribute('name'),
             label: node.getAttribute('label'),
+            lineWidth: node.getAttribute('lineWidth'),
+            marker: node.getAttribute('marker'),
             name: node.getAttribute('name'),
             type: 'line',
             points: points,
             color: node.getAttribute('color')
         };
-
         return desc;
     };
 
@@ -143,10 +152,7 @@ define(['./Utils'], function (Utils) {
 
         points = node.getAttribute('points').split(';')
             .filter(data => !!data)  // remove any ''
-            .map(pair => {
-                const [x, y] = pair.split(',').map(num => parseFloat(num));
-                return {x, y};
-            });
+            .map(pair => extractPointsArray(pair));
         desc = {
             id: id,
             execId: execId,
@@ -194,5 +200,14 @@ define(['./Utils'], function (Utils) {
         return this._metaNodesMap[metaTypeId];
     };
 
+    const extractPointsArray = function (pair) {
+        const pointsArr = pair.split(',').map(num => parseFloat(num));
+        let cartesianPoint = {x: pointsArr[0], y: pointsArr[1]};
+        if (pointsArr.length === 3) {
+            cartesianPoint.z = pointsArr[2];
+        }
+        return cartesianPoint;
+    };
+
     return FigureExtractor;
 });

src/plugins/ExecuteJob/metadata/Figure.js

@@ -12,11 +12,11 @@ define([
             state.axes.forEach(axes => {
                 const axesNode = this.core.createNode({
                     parent: this.node,
-                    base: Figure.is3D(axes) ? this.META.Plot3D : this.META.Plot2D
+                    base: axes.is3D ? this.META.Plot3D : this.META.Plot2D
                 });
                 this.setAxesProperties(axesNode, axes);
                 this.addAxesLines(axesNode, this.node, axes);
-                if(!Figure.is3D(axes)){
+                if(!axes.is3D){
                     this.addAxesImage(axesNode, this.node, axes);
                 }
                 this.addAxesScatterPoints(axesNode, this.node, axes);
@@ -29,7 +29,7 @@ define([
             this.core.setAttribute(axesNode, 'ylabel', axes.ylabel);
             this.core.setAttribute(axesNode, 'xlim', axes.xlim);
             this.core.setAttribute(axesNode, 'ylim', axes.ylim);
-            if(Figure.is3D(axes)){
+            if(axes.is3D){
                 this.core.setAttribute(axesNode, 'zlabel', axes.zlabel);
                 this.core.setAttribute(axesNode, 'zlim', axes.zlim);
             }
@@ -93,10 +93,6 @@ define([
             return 'Graph';
         }
 
-        static is3D(axes) {
-            return !!axes.zlabel;
-        }
-
     }
 
     return Figure;

src/plugins/GenerateJob/templates/backend_deepforge.py

@@ -71,6 +71,7 @@
 import six
 
 import numpy as np
+import numpy.ma as ma
 
 from matplotlib._pylab_helpers import Gcf
 from matplotlib.backend_bases import (
@@ -80,6 +81,8 @@
 from matplotlib import transforms, collections
 from matplotlib.collections import LineCollection, PathCollection
 from matplotlib.path import Path
+from mpl_toolkits.mplot3d import Axes3D
+from mpl_toolkits.mplot3d.art3d import Line3D, Path3DCollection
 from matplotlib.pyplot import gcf, close
 import simplejson as json
 
@@ -378,14 +381,24 @@ def figure_to_state(self):
             axes_data['ylabel'] = axes.get_ylabel()
             axes_data['xlim'] = axes.get_xlim()
             axes_data['ylim'] = axes.get_ylim()
+            axes_data['is3D'] = False
+            if hasattr(axes, 'get_zlabel'):
+                axes_data['zlim'] = axes.get_zlim()
+                axes_data['zlabel'] = axes.get_zlabel()
+                axes_data['is3D'] = True
+
             axes_data['lines'] = []
             axes_data['images'] = []
             axes_data['scatterPoints'] = []
 
             # Line Data
             for i, line in enumerate(axes.lines):
                 lineDict = {}
-                lineDict['points'] = line.get_xydata().tolist()
+                if isinstance(line, Line3D):
+                    points = line.get_data_3d()
+                    lineDict['points'] = np.transpose(points).tolist()
+                else:
+                    lineDict['points'] = line.get_xydata().tolist()
                 lineDict['label'] = ''
                 lineDict['color'] = to_hex(line.get_color())
                 lineDict['marker'] = line.get_marker()
@@ -395,12 +408,12 @@ def figure_to_state(self):
                 if line.get_label() != default_label:
                     lineDict['label'] = line.get_label()
                 axes_data['lines'].append(lineDict)
-
+                if lineDict['marker'] is None or lineDict['marker'] == 'None':
+                    lineDict['marker'] = ''
             # Line Collections
             for collection in axes.collections:
                 if isinstance(collection, LineCollection):
                     axes_data['lines'].extend(self.process_line_collection(collection))
-
                 if isinstance(collection, PathCollection):
                     axes_data['scatterPoints'].append(self.process_collection(axes, collection, force_pathtrans=axes.transAxes))
 
@@ -464,14 +477,25 @@ def process_collection(self, ax, collection,
         offset_dict = {"data": "before",
                        "screen": "after"}
         offset_order = offset_dict[collection.get_offset_position()]
+        coll_offsets = offsets
+        if isinstance(collection, Path3DCollection):
+            coll_offsets = self.get_3d_array(collection._offsets3d)
+
         return {
             'color': self.colors_to_hex(styles['facecolor'].tolist()),
-            'points': offsets.tolist(),
+            'points': coll_offsets.tolist(),
             'marker': '.',      #TODO: Detect markers from Paths
             'label': '',
             'width': self.convert_size_array(collection.get_sizes())
         }
 
+    def get_3d_array(self, masked_array_tuple):
+        values = []
+        for array in masked_array_tuple:
+            values.append(ma.getdata(array))
+        return np.transpose(np.asarray(values))
+
+
     def convert_size_array(self, size_array):
         size = [math.sqrt(s) for s in size_array]
         if len(size) == 1:

src/visualizers/panels/ExecutionIndex/ExecutionIndexControl.js

@@ -117,28 +117,49 @@ define([
     };
 
     ExecutionIndexControl.prototype._combineSubGraphsDesc = function (consolidatedDesc, subGraphs, abbr) {
-        let currentSubGraph, imageSubGraphCopy, added=0;
+        let currentSubGraph, imageSubGraphCopy, added=0, subgraphCopy;
         const originalLength = consolidatedDesc.subGraphs.length;
         for (let i = 0; i < originalLength; i++) {
             if (!subGraphs[i]) break;
             currentSubGraph = consolidatedDesc.subGraphs[i+added];
             subGraphs[i].abbr = abbr;
-            if (subGraphs[i].images.length > 0 || currentSubGraph.images.length > 0) {
-                imageSubGraphCopy = JSON.parse(JSON.stringify(subGraphs[i]));
-                imageSubGraphCopy.title = getDisplayTitle(subGraphs[i], true);
-                consolidatedDesc.subGraphs.splice(i+added, 0, imageSubGraphCopy);
+
+            if(subGraphs[i].type !== currentSubGraph.type){
+                subgraphCopy = JSON.parse(JSON.stringify(subGraphs[i]));
+                subgraphCopy.title = getDisplayTitle(subGraphs[i], true);
+                consolidatedDesc.subGraphs.splice(i+added, 0, subgraphCopy);
                 added++;
                 continue;
             }
+            if(currentSubGraph.images && subGraphs[i].images) {
+                if (subGraphs[i].images.length > 0 || currentSubGraph.images.length > 0) {
+                    imageSubGraphCopy = JSON.parse(JSON.stringify(subGraphs[i]));
+                    imageSubGraphCopy.title = getDisplayTitle(subGraphs[i], true);
+                    consolidatedDesc.subGraphs.splice(i+added, 0, imageSubGraphCopy);
+                    added++;
+                    continue;
+                }
+            }
 
             currentSubGraph.title += ` vs. ${getDisplayTitle(subGraphs[i], true)}`;
+            if(currentSubGraph.xlabel !== subGraphs[i].xlabel){
+                currentSubGraph.xlabel += ` ${subGraphs[i].xlabel}`;
+            }
 
+            if(currentSubGraph.ylabel !== subGraphs[i].ylabel){
+                currentSubGraph.ylabel += ` ${subGraphs[i].ylabel}`;
+            }
+
+            if(currentSubGraph.zlabel && currentSubGraph.zlabel !== subGraphs[i].zlabel){
+                currentSubGraph.zlabel += ` ${subGraphs[i].zlabel}`;
+            }
 
             subGraphs[i].lines.forEach((line, index) => {
                 let lineClone = JSON.parse(JSON.stringify(line));
                 lineClone.label = (lineClone.label || `line${index}`) + ` (${abbr})`;
                 currentSubGraph.lines.push(lineClone);
             });
+
             subGraphs[i].scatterPoints.forEach(scatterPoint => {
                 let scatterClone = JSON.parse(JSON.stringify(scatterPoint));
                 currentSubGraph.scatterPoints.push(scatterClone);
@@ -223,10 +244,10 @@ define([
             desc,
             base,
             type;
-        const graphNode = this.figureExtractor.getGraphNode(node),
-            isGraphOrChildren = !!graphNode;
 
         if (node) {
+            const graphNode = this.figureExtractor.getGraphNode(node),
+                isGraphOrChildren = !!graphNode;
             base = this._client.getNode(node.getBaseId());
             type = base.getAttribute('name');
             desc = {