[ZEPPELIN-2222] Add Network Visualization

docs/_includes/themes/zeppelin/_navigation.html

@@ -88,6 +88,7 @@
                 <li><a href="{{BASE_PATH}}/displaysystem/basicdisplaysystem.html#text">Text</a></li>
                 <li><a href="{{BASE_PATH}}/displaysystem/basicdisplaysystem.html#html">Html</a></li>
                 <li><a href="{{BASE_PATH}}/displaysystem/basicdisplaysystem.html#table">Table</a></li>
+                <li><a href="{{BASE_PATH}}/displaysystem/basicdisplaysystem.html#network">Network</a></li>
                 <li role="separator" class="divider"></li>
                 <li class="title"><span><b>Angular API</b><span></li>
                 <li><a href="{{BASE_PATH}}/displaysystem/back-end-angular.html">Angular (backend API)</a></li>

docs/displaysystem/basicdisplaysystem.md

@@ -61,3 +61,104 @@ If table contents start with `%html`, it is interpreted as an HTML.
 <img src="../assets/themes/zeppelin/img/screenshots/display_table_html.png" />
 
 > **Note :** Display system is backend independent.
+
+## Network
+
+With the `%network` directive, Zeppelin treats your output as a graph. Zeppelin can leverage the Property Graph Model.
+
+### What is the Labelled Property Graph Model?
+
+A [Property Graph](https://github.com/tinkerpop/gremlin/wiki/Defining-a-Property-Graph) is a graph that has these elements:
+
+* a set of vertices
+    * each vertex has a unique identifier.
+    * each vertex has a set of outgoing edges.
+    * each vertex has a set of incoming edges.
+    * each vertex has a collection of properties defined by a map from key to value
+* a set of edges
+    * each edge has a unique identifier.
+    * each edge has an outgoing tail vertex.
+    * each edge has an incoming head vertex.
+    * each edge has a label that denotes the type of relationship between its two vertices.
+    * each edge has a collection of properties defined by a map from key to value.
+
+<img src="https://github.com/tinkerpop/gremlin/raw/master/doc/images/graph-example-1.jpg" />
+
+A [Labelled Property Graph](https://neo4j.com/developer/graph-database/#property-graph) is a Property Graph where the nodes can be tagged with **labels** representing their different roles in the graph model
+
+<img src="http://s3.amazonaws.com/dev.assets.neo4j.com/wp-content/uploads/property_graph_model.png" />
+
+### What are the APIs?
+
+The new NETWORK visualization is based on json with the following params:
+
+* "nodes" (mandatory): list of nodes of the graph every node can have the following params:
+    * "id" (mandatory): the id of the node (must be unique);
+    * "label": the main Label of the node;
+    * "labels": the list of the labels of the node;
+    * "data": the data attached to the node;
+* "edges": list of the edges of the graph;
+    * "id" (mandatory): the id of the edge (must be unique);
+    * "source" (mandatory): the id of source node of the edge;
+    * "target" (mandatory): the id of target node of the edge;
+    * "label": the main type of the edge;
+    * "data": the data attached to the edge;
+* "labels": a map (K, V) where K is the node label and V is the color of the node;
+* "directed": (true/false, default false) wich tells if is directed graph or not;
+* "types": a *distinct* list of the edge types of the graph
+
+If you click on a node or edge on the bottom of the paragraph you find a list of entity properties
+
+<img src="../assets/themes/zeppelin/img/screenshots/display_network.png" />
+
+This kind of graph can be easily *flatten* in order to support other visualization formats provided by Zeppelin.
+
+<img src="../assets/themes/zeppelin/img/screenshots/display_network_flatten.png" />
+
+### How to use it?
+
+An example of a simple graph
+
+```
+%spark
+print(s"""
+%network {
+    "nodes": [
+        {"id": 1},
+        {"id": 2},
+        {"id": 3}
+    ],
+    "edges": [
+		{"source": 1, "target": 2, "id" : 1},
+		{"source": 2, "target": 3, "id" : 2},
+		{"source": 1, "target": 2, "id" : 3},
+		{"source": 1, "target": 2, "id" : 4},
+		{"source": 2, "target": 1, "id" : 5},
+		{"source": 2, "target": 1, "id" : 6}
+	]
+}
+""")
+```
+
+that will look like:
+
+<img src="../assets/themes/zeppelin/img/screenshots/display_simple_network.png" />
+
+A little more complex graph:
+
+```
+%spark
+print(s"""
+%network {
+    "nodes": [{"id": 1, "label": "User", "data": {"fullName":"Andrea Santurbano"}},{"id": 2, "label": "User", "data": {"fullName":"Lee Moon Soo"}},{"id": 3, "label": "Project", "data": {"name":"Zeppelin"}}],
+    "edges": [{"source": 2, "target": 1, "id" : 1, "label": "HELPS"},{"source": 2, "target": 3, "id" : 2, "label": "CREATE"},{"source": 1, "target": 3, "id" : 3, "label": "CONTRIBUTE_TO", "data": {"oldPR": "https://github.com/apache/zeppelin/pull/1582"}}],
+	"labels": {"User": "#8BC34A", "Project": "#3071A9"},
+	"directed": true,
+	"types": ["HELPS", "CREATE", "CONTRIBUTE_TO"]
+}
+""")
+```
+
+that will look like:
+
+<img src="../assets/themes/zeppelin/img/screenshots/display_complex_network.png" />

zeppelin-interpreter/src/main/java/org/apache/zeppelin/interpreter/InterpreterResult.java

@@ -50,7 +50,8 @@ public static enum Type {
     TABLE,
     IMG,
     SVG,
-    NULL
+    NULL,
+    NETWORK
   }
 
   Code code;

zeppelin-web/.eslintrc

@@ -58,6 +58,7 @@
     "no-undef": 2,
     "no-unused-vars": [2, { "vars": "local", "args": "none" }],
     "strict": [2, "global"],
-    "max-len": [2, {"code": 120, "ignoreComments": true, "ignoreRegExpLiterals": true}]
+    "max-len": [2, {"code": 120, "ignoreComments": true, "ignoreRegExpLiterals": true}],
+	"linebreak-style": 0
   }
 }

zeppelin-web/src/app/notebook/paragraph/paragraph.css

@@ -557,3 +557,7 @@ table.table-striped {
 .markdown-body h4 {
   font-size: 16px;
 }
+
+.network-labels {
+  margin: 0.2em;
+}

zeppelin-web/src/app/notebook/paragraph/result/result-chart-selector.html

@@ -13,12 +13,13 @@
 -->
 
 <div id="{{id}}_switch"
-     ng-if="(type == 'TABLE' || apps.length > 0 || suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
+     ng-if="(type == 'TABLE' || type == 'NETWORK' || apps.length > 0 || suggestion.available && suggestion.available.length > 0) && !asIframe && !viewOnly"
      class="result-chart-selector">
 
-  <div ng-if="type == 'TABLE'" class="btn-group">
+  <div ng-if="type == 'TABLE' || type == 'NETWORK'" class="btn-group">
     <button type="button" class="btn btn-default btn-sm"
             ng-repeat="viz in builtInTableDataVisualizationList track by $index"
+            ng-if="viz.supports.indexOf(type) > -1"
             ng-class="{'active' : viz.id == graphMode && !config.helium.activeApp}"
             ng-click="switchViz(viz.id)"
             tooltip-placement="bottom" uib-tooltip="{{viz.name ? viz.name : ''}}"
@@ -28,7 +29,7 @@
 
   <div class="btn-group">
     <button type="button"
-            ng-if="type != 'TABLE'"
+            ng-if="type != 'TABLE' && type != 'NETWORK'"
             ng-click="switchApp()"
             ng-class="{'active' : !config.helium.activeApp}"
             class="btn btn-default btn-sm"><i class="fa fa-terminal"></i>
@@ -73,7 +74,7 @@
 </div>
 
 <div class="btn-group"
-     ng-if="type == 'TABLE' && !asIframe && !viewOnly"
+     ng-if="(type == 'TABLE' || type == 'NETWORK') && !asIframe && !viewOnly"
      style="margin-bottom: 10px;">
   <button type="button" class="btn btn-default btn-sm"
           style="margin-left:10px"
@@ -93,7 +94,7 @@
 </div>
 
 <span
-   ng-if="type=='TABLE' && !config.helium.activeApp && !asIframe && !viewOnly"
+   ng-if="(type == 'TABLE' || type == 'NETWORK') && !config.helium.activeApp && graphMode!='table' && !asIframe && !viewOnly"
    style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
   <a class="btnText" ng-click="toggleGraphSetting()">
     settings <span ng-class="config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>

zeppelin-web/src/app/notebook/paragraph/result/result.controller.js

@@ -14,13 +14,14 @@
 
 import moment from 'moment'
 
-import TableData from '../../../tabledata/tabledata'
+import DatasetFactory from '../../../tabledata/datasetfactory'
 import TableVisualization from '../../../visualization/builtins/visualization-table'
 import BarchartVisualization from '../../../visualization/builtins/visualization-barchart'
 import PiechartVisualization from '../../../visualization/builtins/visualization-piechart'
 import AreachartVisualization from '../../../visualization/builtins/visualization-areachart'
 import LinechartVisualization from '../../../visualization/builtins/visualization-linechart'
 import ScatterchartVisualization from '../../../visualization/builtins/visualization-scatterchart'
+import NetworkVisualization from '../../../visualization/builtins/visualization-d3network'
 import {
   DefaultDisplayType,
   SpellResult,
@@ -44,36 +45,48 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
     {
       id: 'table',   // paragraph.config.graph.mode
       name: 'Table', // human readable name. tooltip
-      icon: '<i class="fa fa-table"></i>'
+      icon: '<i class="fa fa-table"></i>',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
     },
     {
       id: 'multiBarChart',
       name: 'Bar Chart',
       icon: '<i class="fa fa-bar-chart"></i>',
-      transformation: 'pivot'
+      transformation: 'pivot',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
     },
     {
       id: 'pieChart',
       name: 'Pie Chart',
       icon: '<i class="fa fa-pie-chart"></i>',
-      transformation: 'pivot'
+      transformation: 'pivot',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
     },
     {
       id: 'stackedAreaChart',
       name: 'Area Chart',
       icon: '<i class="fa fa-area-chart"></i>',
-      transformation: 'pivot'
+      transformation: 'pivot',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
     },
     {
       id: 'lineChart',
       name: 'Line Chart',
       icon: '<i class="fa fa-line-chart"></i>',
-      transformation: 'pivot'
+      transformation: 'pivot',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
     },
     {
       id: 'scatterChart',
       name: 'Scatter Chart',
-      icon: '<i class="cf cf-scatter-chart"></i>'
+      icon: '<i class="cf cf-scatter-chart"></i>',
+      supports: [DefaultDisplayType.TABLE, DefaultDisplayType.NETWORK]
+    },
+    {
+      id: 'network',
+      name: 'Network',
+      icon: '<i class="fa fa-share-alt"></i>',
+      supports: [DefaultDisplayType.NETWORK]
     }
   ]
 
@@ -104,6 +117,10 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
     'scatterChart': {
       class: ScatterchartVisualization,
       instance: undefined
+    },
+    'network': {
+      class: NetworkVisualization,
+      instance: undefined
     }
   }
 
@@ -253,18 +270,23 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
     // enable only when it is last result
     enableHelium = (index === paragraphRef.results.msg.length - 1)
 
-    if ($scope.type === 'TABLE') {
-      tableData = new TableData()
+    if ($scope.type === 'TABLE' || $scope.type === 'NETWORK') {
+      tableData = new DatasetFactory().createDataset($scope.type)
       tableData.loadParagraphResult({type: $scope.type, msg: data})
       $scope.tableDataColumns = tableData.columns
       $scope.tableDataComment = tableData.comment
+      if ($scope.type === 'NETWORK') {
+        $scope.networkNodes = tableData.networkNodes
+        $scope.networkRelationships = tableData.networkRelationships
+        $scope.networkProperties = tableData.networkProperties
+      }
     } else if ($scope.type === 'IMG') {
       $scope.imageData = data
     }
   }
 
   $scope.createDisplayDOMId = function (baseDOMId, type) {
-    if (type === DefaultDisplayType.TABLE) {
+    if (type === DefaultDisplayType.TABLE || type === DefaultDisplayType.NETWORK) {
       return `${baseDOMId}_graph`
     } else if (type === DefaultDisplayType.HTML) {
       return `${baseDOMId}_html`
@@ -281,7 +303,7 @@ function ResultCtrl ($scope, $rootScope, $route, $window, $routeParams, $locatio
 
   $scope.renderDefaultDisplay = function (targetElemId, type, data, refresh) {
     const afterLoaded = () => {
-      if (type === DefaultDisplayType.TABLE) {
+      if (type === DefaultDisplayType.TABLE || type === DefaultDisplayType.NETWORK) {
         renderGraph(targetElemId, $scope.graphMode, refresh)
       } else if (type === DefaultDisplayType.HTML) {
         renderHtml(targetElemId, data)

zeppelin-web/src/app/notebook/paragraph/result/result.css

@@ -57,3 +57,59 @@
   font-weight: 400;
   text-align: center;
 }
+
+/* D3 Graph Configuration */
+marker {
+  fill: #D3D3D3;
+}
+path.link {
+  fill: none;
+  stroke-width: 3px;
+  stroke: #D3D3D3;
+}
+path.textpath {
+ fill: none;
+ stroke: none;
+}
+
+text {
+  font-size: 12px;
+  pointer-events: none;
+}
+text.shadow {
+  stroke: #fff;
+  stroke-width: 3px;
+  stroke-opacity: .8;
+}
+text.nodeLabel {
+  font-size: 1em;
+  pointer-events: none;
+}
+
+/* D3 Graph Configuration */
+marker {
+  fill: #D3D3D3;
+}
+path.link {
+  fill: none;
+  stroke-width: 3px;
+  stroke: #D3D3D3;
+}
+path.textpath {
+ fill: none;
+ stroke: none;
+}
+
+text {
+  font-size: 12px;
+  pointer-events: none;
+}
+text.shadow {
+  stroke: #fff;
+  stroke-width: 3px;
+  stroke-opacity: .8;
+}
+text.nodeLabel {
+  font-size: 1em;
+  pointer-events: none;
+}