QueryBuilder in Zeppelin

cell1.scala

//Get list of distinct values on a column for given table
def distinctValues(table: String, col: String) : Array[(String, String)] = {
  sqlContext.sql("select distinct " + col + " from " + table + " order by " + col).collect.map(x => (x(0).asInstanceOf[String], x(0).asInstanceOf[String]))
}

//Get list of tables
def tables(): Array[(String, String)] = {
 sqlContext.sql("show tables").collect.map(x => (x(0).asInstanceOf[String], x(0).asInstanceOf[String]))
}

//Get list of columns on a given table
def columns(table: String) : Array[(String, String)] = {
  sqlContext.sql("select * from " + table + " limit 0").columns.map(x => (x, x))
}

//Wrapper for printing any DataFrame in Zeppelin table format
def printQueryResultsAsTable(query: String) : Unit = {
  val df = sqlContext.sql(query)
  println("%table " + df.columns.mkString("\t"))
  println(df.map(x => x.mkString("\t")).collect().mkString("\n"))  
}

//Changes to "clause" value in notebook front-end automatically passed back to interpreter
var query = ""
z.angularWatch("clause", (oldVal, newVal) => {
  query = "select count(*) from crimes where " + newVal
})
z.angularBind("columns", columns("crimes"))

cell2.html

%angular
<link rel="stylesheet" href="https://cdn.rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/css/query-builder.default.min.css">
<script src="https://cdn.rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/js/query-builder.standalone.min.js"></script>

<div id="builder"></div>
<button type="submit" id="generateQuery" class="btn btn-primary">Generate Query</button>
<!-- Grab and use correct paragraph ID for cell 3, see https://zeppelin.apache.org/docs/0.6.0-incubating-SNAPSHOT/assets/themes/zeppelin/img/screenshots/z_runParagraph.gif for an example -->
<button type="submit" class="btn btn-primary" ng-click="z.runParagraph('20160531-143313_136483687');">Run Query</button>
<input id="whereClause" type="text" ng-model="clause" class="hide"></input>
<h3>Query: select count(*) from crimes where {{clause}}</h3>

<script type="text/javascript">
  var button = $('#generateQuery');
  var qb = $('#builder');
  var whereClause = $('#whereClause');
  
  button.click(function(){
    whereClause.val(qb.queryBuilder('getSQL').sql);
    whereClause.trigger('input') //triggers Angular to detect changed value
  });
  
  var el = angular.element(qb.parent('.ng-scope'));
  angular.element(el).ready(function(){
    //Executes on page-load and on update to 'columns', defined in first snippet
    window.watcher = el.scope().compiledScope.$watch('columns', function(newVal, oldVal) {
      //Append each column to QueryBuilder's list of filters
      var options = {allowEmpty: true, filters: []}
      $.each(newVal, function(i, v){
        options.filters.push({id: v._1, type: 'string'});
      });
      qb.queryBuilder(options);
  });
});
</script>

cell3.scala

printQueryResultsAsTable(query)