From 619376b54ba4064d58e1ac9c8dba9ce9be103a4a Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:26:17 +0300
Subject: [PATCH 01/11] add force layout button

---
 .../src/app/notebook/paragraph/paragraph-chart-selector.html  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index 26ffe5ccb09..36daa1c5f69 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -40,6 +40,10 @@
             ng-class="{'active': isGraphMode('scatterChart')}"
             ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
     </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('forceLayout')}"
+            ng-click="setGraphMode('forceLayout', true)"><i class="fa fa-share-alt"></i>
+    </button>
   </div>
   <span>
     <button type="button" class="btn btn-default btn-sm" style="margin-left:10px"

From ea6c346a90f38f6e413bbbe646d2fcf96620e4cc Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:27:18 +0300
Subject: [PATCH 02/11] add div and svg tags that will contain the force layout
 object

---
 .../src/app/notebook/paragraph/paragraph-graph.html         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index c844bf861cf..04bcf7ed744 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -51,4 +51,10 @@
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>
   </div>
+
+  <div ng-if="getGraphMode()=='forceLayout'"
+       id="p{{paragraph.id}}_forceLayout"
+       class="forceLayout">
+    <svg></svg>
+  </div>
 </div>

From 7048e8ebb55bcd570b0374afe9ac284696c7284c Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:39:30 +0300
Subject: [PATCH 03/11] add column drop boxes for column selection for source
 and destination nodes

---
 .../notebook/paragraph/paragraph-pivot.html   | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 66f570b183f..cbfdb6f543c 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -32,7 +32,7 @@
     </ul>
   </div>
 
-  <div class="row" ng-if="getGraphMode()!='scatterChart'">
+  <div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='forceLayout'">
     <div class="col-md-4">
       <span class="columns lightBold">
         Keys
@@ -165,4 +165,71 @@
       </span>
     </div>
   </div>
+
+  <div class="row" ng-if="getGraphMode()=='forceLayout'">
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Source
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.source"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.source">
+          <div class="btn btn-primary btn-xs">
+            {{paragraph.config.graph.forceLayout.source.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSource($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Source Group
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.sourceGroup"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.sourceGroup">
+          <div class="btn btn-success btn-xs">
+            {{paragraph.config.graph.forceLayout.sourceGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSourceGroup($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Destination
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.dest"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.dest">
+          <div class="btn btn-info btn-xs">
+            {{paragraph.config.graph.forceLayout.dest.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDest($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Destination Group
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.destGroup"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.destGroup">
+          <div class="btn btn-warning btn-xs">
+            {{paragraph.config.graph.forceLayout.destGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDestGroup($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+  </div>
 </div>

From c9a11c6150a50c66ff7d15739532b117aa48ddef Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:44:54 +0300
Subject: [PATCH 04/11] add force layout rendering and column selection
 handling methods

---
 .../paragraph/paragraph.controller.js         | 191 +++++++++++++++++-
 1 file changed, 189 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 83076a3f52a..735863fa4be 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1313,7 +1313,7 @@ angular.module('zeppelinWebApp')
   };
 
   var setD3Chart = function(type, data, refresh) {
-    if (!$scope.chart[type]) {
+    if (!$scope.chart[type] && type !== 'forceLayout') {
       var chart = nv.models[type]();
       $scope.chart[type] = chart;
     }
@@ -1346,6 +1346,8 @@ angular.module('zeppelinWebApp')
       $scope.chart[type].showDistX(true)
         .showDistY(true);
       //handle the problem of tooltip not showing when muliple points have same value.
+    } else if (type === 'forceLayout') {
+      var forceLayoutData = setForceLayoutData(data, 1000);
     } else {
       var p = pivot(data);
       if (type === 'pieChart') {
@@ -1413,10 +1415,139 @@ angular.module('zeppelinWebApp')
       nv.utils.windowResize($scope.chart[type].update);
     };
 
+    var renderForceLayout = function() {
+      var color = d3.scale.category10();
+      var r = 5;
+      var margin = {top: -5, right: -5, bottom: -5, left: -5};
+      var height = $scope.paragraph.config.graph.height;
+      var width = angular.element('#p' + $scope.paragraph.id + '_' + 'resize').width();
+
+      function zoomed() {
+        container.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
+      }
+
+      function dragstarted(d) {
+        d3.event.sourceEvent.stopPropagation();
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', true);
+        force.start();
+      }
+
+      function dragged(d) {
+        /*jshint validthis:true */
+        d3.select(this).attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
+      }
+
+      function dragended(d) {
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', false);
+      }
+
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg g').remove();
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' div.tooltip').remove();
+
+      if (forceLayoutData) {
+        var force = d3.layout.force()
+          .charge(-120)
+          .linkDistance(30)
+          .size([width, height]);
+
+        var zoom = d3.behavior.zoom()
+          .scaleExtent([0, 10])
+          .on('zoom', zoomed);
+
+        var drag = d3.behavior.drag()
+          .origin(function(d) { return d; })
+          .on('dragstart', dragstarted)
+          .on('drag', dragged)
+          .on('dragend', dragended);
+
+        var svg = d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg')
+          .attr('width', width)
+          .attr('height', height)
+          .append('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')')
+          .call(zoom);
+
+        var tooltip = d3.select('#p' + $scope.paragraph.id + '_' + type).append('div')
+          .attr('class', 'tooltip')
+          .style('opacity', 0);
+
+        var rect = svg.append('rect')
+          .attr('width', width)
+          .attr('height', height)
+          .style('fill', 'none')
+          .style('pointer-events', 'all');
+
+        var container = svg.append('g')
+          .attr('class', 'container');
+
+        force.nodes(forceLayoutData.nodes)
+          .links(forceLayoutData.links)
+          .start();
+
+        var link = container.append('g')
+          .attr('class', 'links')
+          .selectAll('.link')
+          .data(forceLayoutData.links)
+          .enter().append('line')
+          .attr('class', 'link')
+          .style('stroke-width', function(d) { return Math.sqrt(d.value); });
+
+        var node = container.append('g')
+          .attr('class', 'nodes')
+          .selectAll('.node')
+          .data(forceLayoutData.nodes)
+          .enter().append('g')
+          .attr('class', 'node')
+          .attr('cx', function(d) { return d.x; })
+          .attr('cy', function(d) { return d.y; })
+          .call(drag);
+
+        node.append('circle')
+          .attr('r', r)
+          .style('fill', function(d) { return color(d.group); });
+
+        node.on('mouseover', function(d) {
+          console.log(d.group);
+          var offsetX = d3.transform(container.attr('transform')).translate[0];
+          var offsetY = d3.transform(container.attr('transform')).translate[1];
+          var scale = d3.transform(container.attr('transform')).scale[0];
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0.9);
+          tooltip.html('<strong>name: <span class=\'tooltip-text\'>' + d.name + '</span><br>' +
+                       'group: <span class=\'tooltip-text\'>' + d.group + '</span></strong>')
+            .style('left', (d.px*scale + offsetX + 15) + 'px')
+            .style('top', (d.py*scale + offsetY - 18) + 'px');
+        })
+        .on('mouseout', function(d) {
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0);
+        });
+
+        force.on('tick', function() {
+          link.attr('x1', function(d) { return d.source.x; })
+              .attr('y1', function(d) { return d.source.y; })
+              .attr('x2', function(d) { return d.target.x; })
+              .attr('y2', function(d) { return d.target.y; });
+
+          node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
+        });
+      } else {
+        throw new Error('No data available');
+      }
+    };
+
     var retryRenderer = function() {
       if (angular.element('#p' + $scope.paragraph.id + '_' + type + ' svg').length !== 0) {
         try {
-          renderChart();
+          if (type !== 'forceLayout') {
+            renderChart();
+          } else {
+            renderForceLayout();
+          }
         } catch(err) {
           console.log('Chart drawing error %o', err);
         }
@@ -1489,6 +1620,30 @@ angular.module('zeppelinWebApp')
     $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
   };
 
+  $scope.removeForceLayoutOptionSource = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.source = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionSourceGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.sourceGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDest = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.dest = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDestGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.destGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
   /* Clear unknown columns from graph option */
   var clearUnknownColsFromGraphOption = function() {
     var unique = function(list) {
@@ -2022,6 +2177,38 @@ angular.module('zeppelinWebApp')
     };
   };
 
+  var setForceLayoutData = function(data, limit) {
+    try {
+      var source = $scope.paragraph.config.graph.forceLayout.source;
+      var dest = $scope.paragraph.config.graph.forceLayout.dest;
+      var sourceGroup = $scope.paragraph.config.graph.forceLayout.sourceGroup;
+      var destGroup = $scope.paragraph.config.graph.forceLayout.destGroup;
+      var nodes = [];
+      var links = [];
+      var nodesMap = {};
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          if (!(row[source.index] in nodesMap)) {
+            nodesMap[row[source.index]] = nodes.length;
+            nodes.push({ name: row[source.index], group: row[sourceGroup.index]});
+          }
+          if (!(row[dest.index] in nodesMap)) {
+            nodesMap[row[dest.index]] = nodes.length;
+            nodes.push({ name: row[dest.index], group: row[destGroup.index]});
+          }
+        }
+      });
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          links.push({ source: nodesMap[row[source.index]], target: nodesMap[row[dest.index]], value: 1 });
+        }
+      });
+      return { nodes: nodes, links: links };
+    } catch(e) {
+      console.log(e.name + ': ' + e.message);
+    }
+  };
+
   var isDiscrete = function(field) {
     var getUnique = function(f) {
       var uniqObj = {};

From 045251e3ed214be1f50876b80db2bbc638ce7dd7 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:45:58 +0300
Subject: [PATCH 05/11] add force layout and tooltip CSS

---
 .../src/app/notebook/paragraph/paragraph.css  | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 59cc28f7014..a236cfe1b75 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -471,3 +471,45 @@ table.table-striped {
   position: absolute;
   right: 15px;
 }
+
+/*
+  Force Layout CSS
+*/
+
+.node {
+        stroke: #999;
+        stroke-width: 1.5px;
+    }
+
+.link {
+    stroke: #999;
+    stroke-opacity: .6;
+}
+
+.forceLayout div.tooltip {
+    position: absolute;
+    text-align: center;
+    width: auto;
+    padding: 4px 6px 4px 6px;
+    font: 12px sans-serif;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    border: 0px;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.forceLayout div.tooltip:before {
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-right: 6px solid rgba(0, 0, 0, 0.75);
+    content: "";
+    position: absolute;
+    z-index: 99;
+    left: -6px;
+    top: 11px;
+}
+
+.forceLayout .tooltip-text {
+    color: orangered;
+}

From 048e432a615d091b734cddc8a8a81ed2fa5c1f78 Mon Sep 17 00:00:00 2001
From: Mina Lee <minalee@apache.org>
Date: Tue, 14 Jun 2016 00:39:57 -0700
Subject: [PATCH 06/11] [ZEPPELIN-997] Export data to csv

### What is this PR for?
Add csv download from front-end leveraging #714

### What type of PR is it?
Improvement

### What is the Jira issue?
[ZEPPELIN-997](https://issues.apache.org/jira/browse/ZEPPELIN-997)

### Screenshots (if appropriate)
**Before**
<img width="347" alt="screen shot 2016-06-13 at 4 55 02 pm" src="https://cloud.githubusercontent.com/assets/8503346/16027024/acb80824-3187-11e6-8535-090b06e4807e.png">

**After**
<img width="354" alt="screen shot 2016-06-14 at 12 42 01 am" src="https://cloud.githubusercontent.com/assets/8503346/16034849/dd6f48c4-31c8-11e6-92b8-809b3f27d429.png">

<img width="357" alt="screen shot 2016-06-14 at 12 41 49 am" src="https://cloud.githubusercontent.com/assets/8503346/16034844/da6cef46-31c8-11e6-8ef2-d11c460eaa02.png">

### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No

Author: Mina Lee <minalee@apache.org>

Closes #1008 from minahlee/ZEPPELIN-997 and squashes the following commits:

dabb603 [Mina Lee] Add tooltip and change style for dropdown button
e48c303 [Mina Lee] Fix integration test after adding csv download button
5437c4f [Mina Lee] Use split button dropdowns for downloading data
2ad6f47 [Mina Lee] Export data to csv
---
 .../integration/SparkParagraphIT.java         |  6 ++---
 .../paragraph/paragraph-chart-selector.html   | 19 ++++++++++++----
 .../paragraph/paragraph.controller.js         | 22 ++++++++++++-------
 .../src/app/notebook/paragraph/paragraph.css  | 12 +++++-----
 4 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java
index 1eadd0ecef9..81c7190b186 100644
--- a/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java
+++ b/zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java
@@ -165,10 +165,10 @@ public void testSqlSpark() throws Exception {
       }
 
       WebElement paragraph1Result = driver.findElement(By.xpath(
-          getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]"));
+          getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]//table"));
       collector.checkThat("Paragraph from SparkParagraphIT of testSqlSpark result: ",
-          paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n30" +
-                      " unemployed married primary 1,787\nage\njob\nmarital\neducation\nbalance"));
+          paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n" +
+          "30 unemployed married primary 1,787"));
     } catch (Exception e) {
       handleException("Exception in SparkParagraphIT while testSqlSpark", e);
     }
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index 26ffe5ccb09..76135b1d5c3 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -41,11 +41,22 @@
             ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
     </button>
   </div>
-  <span>
-    <button type="button" class="btn btn-default btn-sm" style="margin-left:10px"
-            tooltip="Download Data as TSV" tooltip-placement="bottom"
-            ng-click="exportToTSV()"><i class="fa fa-download"></i>
+  <span class="btn-group">
+    <button type="button" class="btn btn-default btn-sm"
+            style="margin-left:10px"
+            ng-click="exportToDSV(',')"
+            tooltip="Download Data as CSV" tooltip-placement="bottom">
+      <i class="fa fa-download"></i>
+    </button>
+    <button type="button" class="btn btn-default btn-sm dropdown-toggle caretBtn"
+            data-toggle="dropdown">
+      <span class="caret" style="margin: 0px;"></span>
+      <span class="sr-only">Toggle Dropdown</span>
     </button>
+    <ul class="dropdown-menu" role="menu" style="min-width: 70px;">
+      <li ng-click="exportToDSV(',')"><a>CSV</a></li>
+      <li ng-click="exportToDSV('\t')"><a>TSV</a></li>
+    </ul>
   </span>
   <span ng-if="getGraphMode()!='table'"
         style="margin-left:5px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 83076a3f52a..446358000d4 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -2153,21 +2153,27 @@ angular.module('zeppelinWebApp')
     $scope.keepScrollDown = false;
   };
 
-  $scope.exportToTSV = function () {
+  $scope.exportToDSV = function (delimiter) {
     var data = $scope.paragraph.result;
-    var tsv = '';
+    var dsv = '';
     for (var titleIndex in $scope.paragraph.result.columnNames) {
-      tsv += $scope.paragraph.result.columnNames[titleIndex].name + '\t';
+      dsv += $scope.paragraph.result.columnNames[titleIndex].name + delimiter;
     }
-    tsv = tsv.substring(0, tsv.length - 1) + '\n';
+    dsv = dsv.substring(0, dsv.length - 1) + '\n';
     for (var r in $scope.paragraph.result.msgTable) {
       var row = $scope.paragraph.result.msgTable[r];
-      var tsvRow = '';
+      var dsvRow = '';
       for (var index in row) {
-        tsvRow += row[index].value + '\t';
+        dsvRow += row[index].value + delimiter;
       }
-      tsv += tsvRow.substring(0, tsvRow.length - 1) + '\n';
+      dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
     }
-    SaveAsService.SaveAs(tsv, 'data', 'tsv');
+    var extension = '';
+    if (delimiter === '\t') {
+      extension = 'tsv';
+    } else if (delimiter === ',') {
+      extension = 'csv';
+    }
+    SaveAsService.SaveAs(dsv, 'data', extension);
   };
 });
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 59cc28f7014..3e620b5738f 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -449,10 +449,6 @@ table.dataTable.table-condensed .sorting_desc:after {
   font-weight: 500;
 }
 
-.dropdown-menu > li:first-child > a:hover {
-  background-color: transparent;
-}
-
 table.table-striped {
   border-top: 1px solid #ddd;
   margin-top: 20px;
@@ -464,10 +460,16 @@ table.table-striped {
   cursor: pointer;
 }
 
-
 .scroll-paragraph-up {
   bottom: 5px;
   cursor: pointer;
   position: absolute;
   right: 15px;
 }
+
+/* DSV download toggle button */
+.caretBtn {
+  padding-right: 4px !important;
+  padding-left: 4px !important;
+  width: 20px;
+}

From 869bfc4163eff5c8d475ea4f8cd5a2b14dc1281f Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:26:17 +0300
Subject: [PATCH 07/11] add force layout button

---
 .../src/app/notebook/paragraph/paragraph-chart-selector.html  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index 76135b1d5c3..a6b81d11fd7 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -40,6 +40,10 @@
             ng-class="{'active': isGraphMode('scatterChart')}"
             ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
     </button>
+    <button type="button" class="btn btn-default btn-sm"
+            ng-class="{'active': isGraphMode('forceLayout')}"
+            ng-click="setGraphMode('forceLayout', true)"><i class="fa fa-share-alt"></i>
+    </button>
   </div>
   <span class="btn-group">
     <button type="button" class="btn btn-default btn-sm"

From e778eb454134cd5619b78b2e6e365b1d12f67368 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:27:18 +0300
Subject: [PATCH 08/11] add div and svg tags that will contain the force layout
 object

---
 .../src/app/notebook/paragraph/paragraph-graph.html         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index c844bf861cf..04bcf7ed744 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -51,4 +51,10 @@
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>
   </div>
+
+  <div ng-if="getGraphMode()=='forceLayout'"
+       id="p{{paragraph.id}}_forceLayout"
+       class="forceLayout">
+    <svg></svg>
+  </div>
 </div>

From dc4abe5172ad5da04ba6be6a52ba956096ac0958 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:39:30 +0300
Subject: [PATCH 09/11] add column drop boxes for column selection for source
 and destination nodes

---
 .../notebook/paragraph/paragraph-pivot.html   | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
index 66f570b183f..cbfdb6f543c 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html
@@ -32,7 +32,7 @@
     </ul>
   </div>
 
-  <div class="row" ng-if="getGraphMode()!='scatterChart'">
+  <div class="row" ng-if="getGraphMode()!='scatterChart' && getGraphMode()!='forceLayout'">
     <div class="col-md-4">
       <span class="columns lightBold">
         Keys
@@ -165,4 +165,71 @@
       </span>
     </div>
   </div>
+
+  <div class="row" ng-if="getGraphMode()=='forceLayout'">
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Source
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.source"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.source">
+          <div class="btn btn-primary btn-xs">
+            {{paragraph.config.graph.forceLayout.source.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSource($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Source Group
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.sourceGroup"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.sourceGroup">
+          <div class="btn btn-success btn-xs">
+            {{paragraph.config.graph.forceLayout.sourceGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionSourceGroup($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Destination
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.dest"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.dest">
+          <div class="btn btn-info btn-xs">
+            {{paragraph.config.graph.forceLayout.dest.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDest($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+    <div class="col-md-3">
+    <span class="columns lightBold">
+      Destination Group
+      <ul data-drop="true"
+          ng-model="paragraph.config.graph.forceLayout.destGroup"
+          jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+          class="list-unstyled"
+          style="height:36px">
+        <li ng-if="paragraph.config.graph.forceLayout.destGroup">
+          <div class="btn btn-warning btn-xs">
+            {{paragraph.config.graph.forceLayout.destGroup.name}} <span class="fa fa-close" ng-click="removeForceLayoutOptionDestGroup($index)"></span>
+          </div>
+        </li>
+      </ul>
+    </span>
+    </div>
+  </div>
 </div>

From ca92187849b2dd2c099d99052571da36759f7d14 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:44:54 +0300
Subject: [PATCH 10/11] add force layout rendering and column selection
 handling methods

---
 .../paragraph/paragraph.controller.js         | 191 +++++++++++++++++-
 1 file changed, 189 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 446358000d4..8416d98c356 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1313,7 +1313,7 @@ angular.module('zeppelinWebApp')
   };
 
   var setD3Chart = function(type, data, refresh) {
-    if (!$scope.chart[type]) {
+    if (!$scope.chart[type] && type !== 'forceLayout') {
       var chart = nv.models[type]();
       $scope.chart[type] = chart;
     }
@@ -1346,6 +1346,8 @@ angular.module('zeppelinWebApp')
       $scope.chart[type].showDistX(true)
         .showDistY(true);
       //handle the problem of tooltip not showing when muliple points have same value.
+    } else if (type === 'forceLayout') {
+      var forceLayoutData = setForceLayoutData(data, 1000);
     } else {
       var p = pivot(data);
       if (type === 'pieChart') {
@@ -1413,10 +1415,139 @@ angular.module('zeppelinWebApp')
       nv.utils.windowResize($scope.chart[type].update);
     };
 
+    var renderForceLayout = function() {
+      var color = d3.scale.category10();
+      var r = 5;
+      var margin = {top: -5, right: -5, bottom: -5, left: -5};
+      var height = $scope.paragraph.config.graph.height;
+      var width = angular.element('#p' + $scope.paragraph.id + '_' + 'resize').width();
+
+      function zoomed() {
+        container.attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')');
+      }
+
+      function dragstarted(d) {
+        d3.event.sourceEvent.stopPropagation();
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', true);
+        force.start();
+      }
+
+      function dragged(d) {
+        /*jshint validthis:true */
+        d3.select(this).attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
+      }
+
+      function dragended(d) {
+        /*jshint validthis:true */
+        d3.select(this).classed('dragging', false);
+      }
+
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg g').remove();
+      d3.select('#p' + $scope.paragraph.id + '_' + type + ' div.tooltip').remove();
+
+      if (forceLayoutData) {
+        var force = d3.layout.force()
+          .charge(-120)
+          .linkDistance(30)
+          .size([width, height]);
+
+        var zoom = d3.behavior.zoom()
+          .scaleExtent([0, 10])
+          .on('zoom', zoomed);
+
+        var drag = d3.behavior.drag()
+          .origin(function(d) { return d; })
+          .on('dragstart', dragstarted)
+          .on('drag', dragged)
+          .on('dragend', dragended);
+
+        var svg = d3.select('#p' + $scope.paragraph.id + '_' + type + ' svg')
+          .attr('width', width)
+          .attr('height', height)
+          .append('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')')
+          .call(zoom);
+
+        var tooltip = d3.select('#p' + $scope.paragraph.id + '_' + type).append('div')
+          .attr('class', 'tooltip')
+          .style('opacity', 0);
+
+        var rect = svg.append('rect')
+          .attr('width', width)
+          .attr('height', height)
+          .style('fill', 'none')
+          .style('pointer-events', 'all');
+
+        var container = svg.append('g')
+          .attr('class', 'container');
+
+        force.nodes(forceLayoutData.nodes)
+          .links(forceLayoutData.links)
+          .start();
+
+        var link = container.append('g')
+          .attr('class', 'links')
+          .selectAll('.link')
+          .data(forceLayoutData.links)
+          .enter().append('line')
+          .attr('class', 'link')
+          .style('stroke-width', function(d) { return Math.sqrt(d.value); });
+
+        var node = container.append('g')
+          .attr('class', 'nodes')
+          .selectAll('.node')
+          .data(forceLayoutData.nodes)
+          .enter().append('g')
+          .attr('class', 'node')
+          .attr('cx', function(d) { return d.x; })
+          .attr('cy', function(d) { return d.y; })
+          .call(drag);
+
+        node.append('circle')
+          .attr('r', r)
+          .style('fill', function(d) { return color(d.group); });
+
+        node.on('mouseover', function(d) {
+          console.log(d.group);
+          var offsetX = d3.transform(container.attr('transform')).translate[0];
+          var offsetY = d3.transform(container.attr('transform')).translate[1];
+          var scale = d3.transform(container.attr('transform')).scale[0];
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0.9);
+          tooltip.html('<strong>name: <span class=\'tooltip-text\'>' + d.name + '</span><br>' +
+                       'group: <span class=\'tooltip-text\'>' + d.group + '</span></strong>')
+            .style('left', (d.px*scale + offsetX + 15) + 'px')
+            .style('top', (d.py*scale + offsetY - 18) + 'px');
+        })
+        .on('mouseout', function(d) {
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0);
+        });
+
+        force.on('tick', function() {
+          link.attr('x1', function(d) { return d.source.x; })
+              .attr('y1', function(d) { return d.source.y; })
+              .attr('x2', function(d) { return d.target.x; })
+              .attr('y2', function(d) { return d.target.y; });
+
+          node.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
+        });
+      } else {
+        throw new Error('No data available');
+      }
+    };
+
     var retryRenderer = function() {
       if (angular.element('#p' + $scope.paragraph.id + '_' + type + ' svg').length !== 0) {
         try {
-          renderChart();
+          if (type !== 'forceLayout') {
+            renderChart();
+          } else {
+            renderForceLayout();
+          }
         } catch(err) {
           console.log('Chart drawing error %o', err);
         }
@@ -1489,6 +1620,30 @@ angular.module('zeppelinWebApp')
     $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
   };
 
+  $scope.removeForceLayoutOptionSource = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.source = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionSourceGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.sourceGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDest = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.dest = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
+  $scope.removeForceLayoutOptionDestGroup = function(idx) {
+    $scope.paragraph.config.graph.forceLayout.destGroup = null;
+    clearUnknownColsFromGraphOption();
+    $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+  };
+
   /* Clear unknown columns from graph option */
   var clearUnknownColsFromGraphOption = function() {
     var unique = function(list) {
@@ -2022,6 +2177,38 @@ angular.module('zeppelinWebApp')
     };
   };
 
+  var setForceLayoutData = function(data, limit) {
+    try {
+      var source = $scope.paragraph.config.graph.forceLayout.source;
+      var dest = $scope.paragraph.config.graph.forceLayout.dest;
+      var sourceGroup = $scope.paragraph.config.graph.forceLayout.sourceGroup;
+      var destGroup = $scope.paragraph.config.graph.forceLayout.destGroup;
+      var nodes = [];
+      var links = [];
+      var nodesMap = {};
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          if (!(row[source.index] in nodesMap)) {
+            nodesMap[row[source.index]] = nodes.length;
+            nodes.push({ name: row[source.index], group: row[sourceGroup.index]});
+          }
+          if (!(row[dest.index] in nodesMap)) {
+            nodesMap[row[dest.index]] = nodes.length;
+            nodes.push({ name: row[dest.index], group: row[destGroup.index]});
+          }
+        }
+      });
+      angular.forEach(data.rows, function(row, index) {
+        if (index < limit) {
+          links.push({ source: nodesMap[row[source.index]], target: nodesMap[row[dest.index]], value: 1 });
+        }
+      });
+      return { nodes: nodes, links: links };
+    } catch(e) {
+      console.log(e.name + ': ' + e.message);
+    }
+  };
+
   var isDiscrete = function(field) {
     var getUnique = function(f) {
       var uniqObj = {};

From d34dad222b23268b2e362ef3e36ab8bcbe4cd556 Mon Sep 17 00:00:00 2001
From: David Tzoor <dtzoor@paypal.com>
Date: Thu, 16 Jun 2016 09:45:58 +0300
Subject: [PATCH 11/11] add force layout and tooltip CSS

---
 .../src/app/notebook/paragraph/paragraph.css  | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index 3e620b5738f..38a76a45c04 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -473,3 +473,45 @@ table.table-striped {
   padding-left: 4px !important;
   width: 20px;
 }
+
+/*
+  Force Layout CSS
+*/
+
+.node {
+        stroke: #999;
+        stroke-width: 1.5px;
+    }
+
+.link {
+    stroke: #999;
+    stroke-opacity: .6;
+}
+
+.forceLayout div.tooltip {
+    position: absolute;
+    text-align: center;
+    width: auto;
+    padding: 4px 6px 4px 6px;
+    font: 12px sans-serif;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    border: 0px;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.forceLayout div.tooltip:before {
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-right: 6px solid rgba(0, 0, 0, 0.75);
+    content: "";
+    position: absolute;
+    z-index: 99;
+    left: -6px;
+    top: 11px;
+}
+
+.forceLayout .tooltip-text {
+    color: orangered;
+}