From 35273f010f8db0b98f7bee0023be34f27732f8a0 Mon Sep 17 00:00:00 2001
From: Lo <Lomou@analytics.moodys.net>
Date: Fri, 22 Jul 2016 14:38:13 +0200
Subject: [PATCH] filter applied to graph

---
 .../src/app/notebook/notebook-actionBar.html  |  9 +++
 .../src/app/notebook/notebook.controller.js   | 35 ++++++++++++
 .../paragraph/paragraph.controller.js         | 57 ++++++++++++++++++-
 3 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/src/app/notebook/notebook-actionBar.html b/zeppelin-web/src/app/notebook/notebook-actionBar.html
index 22ae67c64d1..37c0bb66eb3 100644
--- a/zeppelin-web/src/app/notebook/notebook-actionBar.html
+++ b/zeppelin-web/src/app/notebook/notebook-actionBar.html
@@ -109,6 +109,15 @@ <h3>
           data-toggle="dropdown" id="revisionsDropdown">
           <span class="caret"></span>
         </button>
+        <span>
+          <button type="button" class="btn btn-default btn-xs"
+            ng-class="{'active' : noFilter()}"
+            ng-click="allParagraphFiltered(true)" tooltip-placement="bottom"
+            tooltip="click on graph to filter">
+            <i class="fa fa-filter"></i> {{filteredData}}
+          </button>
+        </span>
+
         <ul class="dropdown-menu pull-right" aria-labelledby="revisionsDropdown">
           <li ng-repeat="revision in noteRevisions | orderBy:'time':true" class="revision">
             <a style="cursor:pointer">
diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js
index f2dce0964ee..0d499527dac 100644
--- a/zeppelin-web/src/app/notebook/notebook.controller.js
+++ b/zeppelin-web/src/app/notebook/notebook.controller.js
@@ -171,6 +171,9 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
     document.getElementById('note.checkpoint.message').value = '';
   };
 
+  //contains the data filtered with value
+  $scope.filteredData = '';
+
   $scope.$on('listRevisionHistory', function(event, data) {
     console.log('We got the revisions %o', data);
     $scope.noteRevisions = data.revisionList;
@@ -192,11 +195,43 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
           _.forEach($scope.note.paragraphs, function(n, key) {
             angular.element('#' + n.id + '_paragraphColumn_main').scope().runParagraph(n.text);
           });
+
+          $scope.filteredData = '';
         }
       }
     });
   };
 
+  $scope.allParagraphFiltered = function(emit, refresh, columnName, nameOfFilteredData) {
+    _.forEach($scope.note.paragraphs, function(n, key) {
+      //default: the last paragraph have no data
+      if (n.result === undefined || n.result.type === 'TEXT') {
+        return;
+      }
+      var graphMode = angular.element('#' + n.id + '_paragraphColumn_main').scope().getGraphMode();
+      //remove filter by clicking the button filter
+      if (nameOfFilteredData === undefined) {
+        angular.element('#' + n.id + '_paragraphColumn_main').scope().setGraphMode(graphMode, true);
+      } else {
+        //console.log(n.config.graph.keys[0].name);
+        angular.element('#' + n.id + '_paragraphColumn_main').scope().setFilter(graphMode, emit, refresh, columnName,
+          nameOfFilteredData);
+      }
+    });
+    if (nameOfFilteredData !== undefined) {
+      $scope.filteredData = columnName + ': ' +  nameOfFilteredData;
+    } else {
+      $scope.filteredData = '';
+    }
+  };
+
+  $scope.noFilter = function() {
+    if ($scope.filteredData === '' || $scope.filteredData === undefined) {
+      return false;
+    }
+    return true;
+  };
+
   $scope.saveNote = function() {
     if ($scope.note && $scope.note.paragraphs) {
       _.forEach($scope.note.paragraphs, function(n, key) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index bd3b6b3c945..2036dd6d7f8 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -931,6 +931,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
   $scope.setGraphMode = function(type, emit, refresh) {
     if (emit) {
+      $scope.loadTableData($scope.paragraph.result);
       setNewMode(type);
     } else {
       clearUnknownColsFromGraphOption();
@@ -1053,6 +1054,38 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     return groupedThousandsWith3DigitsFormatter(d);
   };
 
+  /**
+   * Function that allow to filter chart
+   */
+  $scope.setFilter = function(type, emit, refresh, columnName, filteredValue) {
+    //reload is necessary the second time the user applies a filter
+    $scope.loadTableData($scope.paragraph.result);
+    var columnNameFinded = _.find($scope.paragraph.result.columnNames, function(o) {return o.name === columnName;});
+    //if the column name doesn't exist on the paragraph then return
+    if (columnNameFinded === undefined) {
+      return;
+    }
+    var result = $scope.paragraph.result;
+    var filteredMsgTable = [];
+    var filteredRows = [];
+    var k = 0;
+    for (var i = 0; i < result.msgTable.length; i++) {
+      for (var j = 0; j < result.msgTable[i].length; j++) {
+        if (result.msgTable[i][j].value === filteredValue) {
+          filteredMsgTable[k] = result.msgTable[i];
+          filteredRows[k] = result.rows[i];
+          k++;
+          break; //for the first time we filter one value
+        }
+      }
+    }
+    //if the paragraph doesn't contain the filter value but have the column name, "no data available"
+    //will be print at screen
+    result.msgTable = filteredMsgTable;
+    result.rows = filteredRows;
+    $scope.setGraphMode(type, emit, refresh);
+  };
+
   var setD3Chart = function(type, data, refresh) {
     if (!$scope.chart[type]) {
       var chart = nv.models[type]();
@@ -1062,6 +1095,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     var d3g = [];
     var xLabels;
     var yLabels;
+    var index; //index of filtered value
 
     if (type === 'scatterChart') {
       var scatterData = setScatterChart(data, refresh);
@@ -1072,7 +1106,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
       $scope.chart[type].xAxis.tickFormat(function(d) {return xAxisTickFormat(d, xLabels);});
       $scope.chart[type].yAxis.tickFormat(function(d) {return yAxisTickFormat(d, yLabels);});
-
+      $scope.chart[type].scatter.dispatch.on('elementClick', function(d) {
+        index = d.point.x;
+        $scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.scatter.xAxis.name, xLabels[index]);
+      });
       // configure how the tooltip looks.
       $scope.chart[type].tooltipContent(function(key, x, y, graph, data) {
         var tooltipContent = '<h3>' + key + '</h3>';
@@ -1094,6 +1131,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
         $scope.chart[type].x(function(d) { return d.label;})
           .y(function(d) { return d.value;});
+        $scope.chart[type].pie.dispatch.on('elementClick', function(d) {
+          $scope.allParagraphFiltered(false,  false, $scope.paragraph.config.graph.keys[0].name, d.label);
+        });
 
         if (d.length > 0) {
           for (var i = 0; i < d[0].values.length ; i++) {
@@ -1108,6 +1148,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         d3g = pivotDataToD3ChartFormat(p, true, false, type).d3g;
         $scope.chart[type].yAxis.axisLabelDistance(50);
         $scope.chart[type].yAxis.tickFormat(function(d) {return yAxisTickFormat(d);});
+        //filter when clicked on graph
+        $scope.chart[type].multibar.dispatch.on('elementClick', function(d) {
+          $scope.allParagraphFiltered(false,  false, $scope.paragraph.config.graph.keys[0].name, d.point.x);
+        });
       } else if (type === 'lineChart' || type === 'stackedAreaChart' || type === 'lineWithFocusChart') {
         var pivotdata = pivotDataToD3ChartFormat(p, false, true);
         xLabels = pivotdata.xLabels;
@@ -1127,6 +1171,17 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         } else {
           $scope.chart[type].forceY([]);
         }
+        if (type === 'lineChart') {
+          $scope.chart[type].lines.dispatch.on('elementClick', function(d) {
+            index = d[0].pointIndex;
+            $scope.allParagraphFiltered(false,  false, $scope.paragraph.config.graph.keys[0].name,  xLabels[index]);
+          });
+        }
+        if (type === 'stackedAreaChart') {
+          $scope.chart[type].stacked.scatter.dispatch.on('elementClick', function(d) {
+            $scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.keys[0].name, xLabels[0]);
+          });
+        }
       }
     }