Augment Neo4j Browser with Zoom, DataTable and Charts Moved to: https://github.com/jexp/spoon-neo4j/

_usage.adoc

Add Bookmarklet

Please note there is now a dedicated project for this: https://github.com/jexp/spoon-neo4j/

Adds these features to Neo4j Browser

• DataTable (search, sort, paginage)

• Zoom for graphs and query plans (Hold Alt- and drag / pan)

• Charts (Currently Line-Charts)

javascript:$.getScript('https://cdn.rawgit.com/jexp/spoon-neo4j/master/spoon.js');

Credits

Uses these libraries

• jquery-datatable: https://datatables.net/

• c3.js Charts with D3: http://c3js.org

• PanZoom (SVG Zoom Library): http://github.com/anvaka/panzoom

Note	Please support these projects

spoon.js

$("body")
  .append($('<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" type="text/css">'))
  .append($('<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>'))
  .append($('<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>'))
  .append($('<script src="https://cdn.rawgit.com/anvaka/panzoom/v1.2.1/dist/panzoom.min.js"></script>'))
  .append($('<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">'))
;

function augmentFrame() {
$(".outer").each(function() {
   var frame=$(this);

   function toggleChart(type) {
	  var chart = frame.data().chart
	  if (chart) {
      	  frame.find(".c3-chart").show();
          chart.transform(type.toLowerCase());
      }
   }

   function createChart() {
      var $tables = frame.find("neo-table table.table.data").not(".datatable");
      if (frame.find(".c3-chart").length > 0 || !$tables.length) return null;
      var data = $tables.map(function() { 
           var isText = function() { return this.nodeType == 3; }
           var text = function() { return $(this).text(); }
           var ctext = function() { return $(this).find("*").andSelf().contents().filter(isText).map(text).toArray().join(" "); }
           var texts = function (x) { return x.map(ctext).toArray() };
           var $table=$(this); 
           return { 
              header: texts($table.find("thead tr th")), 
              data: $table.children("tbody").children("tr").map(
                 function() { return [texts($(this).children("td"))]; }).toArray()
           }
        }).get(0);
        var columns = d3.transpose(data.data)
        data.header.forEach(function(x,i) { columns[i].unshift(x); })
      
      var $chart = $('<div class="c3-chart"><div class="container"></div></div>').hide()
      .css({'z-index':1,position:'relative','background-color':'white'})
      .append($('<a class="sl button sl-delete">').css({position:"absolute",right:5,top:5,'z-index':2,display:'block'}).click(function() {$chart.hide();}))
      .prependTo(frame.find(".view-result-table"));
      return c3.generate({ bindto: $chart.find('.container').get(0),
        data: { x: columns[0][0],  columns: columns /*labels: true,*/ , type: 'line'}, 
        axis: { x: { type: columns[0][1].match(/[^0-9-+.,]/)  ? 'category' : 'indexed'  } } });
   }

   var chart = createChart();
   if (chart) {
      frame.data({chart: chart});
   
      var $actions=frame.find(".code-bar ul.actions")
      if (!$actions.find(".sl-business-chart").length) {
         var $dropdown = $(`
         <li dropdown="dropdown" class="dropdown"> \
           <a dropdown-toggle="dropdown-toggle" tooltip-placement="bottom" tooltip="Render table as chart" class="button sl sl-business-chart dropdown-toggle" aria-haspopup="true" aria-expanded="true" onClick="$(this).siblings('.dropdown-menu').show()"></a> \
           <ul class="dropdown-menu"> \ 
             <li></li> \
           </ul> \
         </li>`);
   	  var $dropdownMenu = $dropdown.find("ul.dropdown-menu");
         var types=["Line","Spline","Step","Area","Area-Spline","Area-Step","Bar","Scatter","Pie","Donut","Gauge"];
         var $charts=types.map(function(t) { return $('<a>').text(t).click(function() { toggleChart(t); $dropdownMenu.hide(); })});
   
         $dropdownMenu.find("li").append($charts);
   
         $actions.prepend($dropdown);
      }
      frame.find("neo-table table.table.data").not(".datatable").addClass("datatable").css({padding:10}).DataTable();
   }
   frame.find(".graph > g,.query-plan > g").not("[panzoom]").attr("panzoom","panzoom")
        .each(function() { panzoom($(this).get(0), { beforeWheel: function(e) { return !e.altKey; }}); });
})};

setInterval(augmentFrame,1000);