neo-viz 1.0.1

data/neo-viz.gemspec

@@ -0,0 +1,37 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "neo-viz/version"
+
+Gem::Specification.new do |s|
+  s.name        = "neo-viz"
+  s.version     = Neo::Viz::VERSION
+  s.authors     = ["Anders Janmyr"]
+  s.email       = ["anders.janmyr@jayway.com"]
+  s.homepage    = ""
+  s.summary     = %q{A gem for visualizing a Neo database with Javascript}
+  s.description = %q{A gem for visualizing a Neo database with Javascript}
+
+  s.rubyforge_project = "neo-viz"
+
+  s.add_dependency 'sprockets'
+  s.add_dependency 'sinatra'
+  s.add_dependency 'sinatra-reloader'
+  s.add_dependency 'neo4j', '~> 1.1'
+  s.add_dependency 'coffee-script'
+  s.add_dependency 'haml'
+  s.add_dependency 'sass'
+  s.add_dependency 'json'
+  s.add_dependency 'pry'
+  
+
+  s.add_development_dependency 'rspec'
+  s.add_development_dependency 'rack-test'
+  s.add_development_dependency 'jasmine'
+
+  s.requirements << 'coffee-script'
+  
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/public/coffeescripts/app_context.coffee

@@ -0,0 +1,89 @@
+$ = jQuery
+
+class AppContext
+
+  constructor: (@eventBroker)->
+    @nodeFilter = ''
+    @keyFilter = ''
+    @nodeData = null
+    @nodeCount = 10
+    @activatedNodeId = null
+    @selectedObject = {"id":0, "kind":""}
+
+  setNodeCount: (n) ->
+    if (@nodeCount != n)
+      @nodeCount = n
+      @publish("nodeCountChanged")
+
+  getNodeCount: () ->
+    @nodeCount
+
+  setKeyFilter: (keyFilter) ->
+    if (@keyFilter != keyFilter)
+      @keyFilter = keyFilter
+      @publish("keyFilterChanged")
+
+  getKeyFilter: ->
+    @keyFilter
+
+  setNodeFilter: (filter) ->
+    if (@nodeFilter != filter)
+      @nodeFilter = filter
+      @publish("nodeFilterChanged")
+
+  getNodeFilter: ->
+    @nodeFilter
+
+  setActivatedNodeId: (nodeId, suppressChangedEvent=false) ->
+    if (@activatedNodeId != nodeId)
+      @activatedNodeId = nodeId
+      if (!suppressChangedEvent)
+        @publish("activatedNodeIdChanged")
+
+  getActivatedNodeId: ->
+    @activatedNodeId
+
+  setSelectedObject: (id, kind) ->
+    if (@selectedObjectId != id && @selectedObjectKind != kind)
+      @selectedObject.id = id
+      @selectedObject.kind = kind
+      @publish("selectedObjectChanged")
+
+  getSelectedObject: ->
+    @selectedObject
+
+
+  # I.e. nodeData.nodes, nodeData.rels
+  setNodeData: (nodeData) ->
+    if (@nodeData != nodeData)
+      @nodeData = nodeData
+      @graph = new Graph(nodeData.nodes, nodeData.rels)
+      @publish("nodeDataChanged")
+
+  getNodeData: ->
+    @nodeData
+
+  getGraph: ->
+    @graph
+
+  # I.e. hiddenNodeData.nodeIds, hiddenNodeData.relIds
+  setHiddenNodeData: (hiddenNodeData) ->
+    if (@hiddenNodeData != hiddenNodeData)
+      @hiddenNodeData = hiddenNodeData
+      @publish("hiddenNodeDataChanged")
+
+  getHiddenNodeData: ->
+    @hiddenNodeData
+
+  clearHiddenNodeData: ->
+    @hiddenNodeData = {nodeIds:[], relIds:[]}
+    @publish("hiddenNodeDataChanged")
+
+  # TODO: How do we make this a private method?
+  publish: (eventName) ->
+    @eventBroker.publish(eventName)
+
+$ ->
+  root = exports ? this
+  root.appContext = new AppContext(root.eventBroker)
+

data/public/coffeescripts/canvas_util.coffee

@@ -0,0 +1,68 @@
+root = exports ? window
+
+root.CanvasUtil =
+  centerToEdge: (val, delta) ->
+    val - delta/2
+
+  roundRect: (ctx, point, width, height, color, radius=5) ->
+    x = @centerToEdge(point.x, width)
+    y = @centerToEdge(point.y, height)
+    ctx.beginPath()
+    ctx.moveTo(x + radius, y)
+    ctx.fillStyle = @createGradient(ctx, color, y, height)
+    ctx.lineTo(x + width - radius, y)
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+    ctx.lineTo(x + width, y + height - radius)
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+    ctx.lineTo(x + radius, y + height)
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+    ctx.lineTo(x, y + radius)
+    ctx.quadraticCurveTo(x, y, x + radius, y)
+    ctx.closePath()
+    ctx.fill()
+
+  line: (ctx, fromPoint, toPoint, width = 2) ->
+    ctx.lineWidth = width
+    ctx.beginPath()
+    ctx.moveTo fromPoint.x, fromPoint.y
+    ctx.lineTo toPoint.x, toPoint.y
+    @arrow(ctx, fromPoint, toPoint, width)
+    ctx.stroke()
+
+  arrow: (ctx, fromPoint, toPoint, width = 2) ->
+    ctx.save()
+    mx = (toPoint.x + fromPoint.x) / 2
+    my = (toPoint.y + fromPoint.y) / 2
+
+    ctx.translate(mx, my)
+    # draw your arrow, with its origin at [0, 0]
+    angle = Math.atan2(toPoint.y-fromPoint.y, toPoint.x-fromPoint.x)
+    ctx.rotate(angle)
+    arrowSize = 6
+    ctx.moveTo(0, 0)
+    ctx.lineTo(-arrowSize, -arrowSize)
+    ctx.moveTo(0, 0)
+    ctx.lineTo(-arrowSize, arrowSize)
+    ctx.restore()
+    
+  textSize: (ctx, text) ->
+    lineHeight = ctx.measureText(text[0]).height or 16
+    width = 0
+    count = text.length
+    height = count * lineHeight + 20
+    for line in text
+      width = Math.max ctx.measureText(line).width, width
+    {width, height, count, lineHeight }
+
+  drawText: (ctx, text, left, top) ->
+    textSize = @textSize(ctx, text)
+    for i in [0...textSize.count]
+      line = text[i]
+      ctx.fillText(line, left, top + i*textSize.lineHeight)
+  
+  createGradient: (ctx, color, y, height) ->
+    gradient = ctx.createLinearGradient(0, y, 0, y+height+40)
+    gradient.addColorStop(0, color)
+    gradient.addColorStop(1, "white")
+    gradient 
+

data/public/coffeescripts/event_broker.coffee

@@ -0,0 +1,16 @@
+$ = jQuery
+
+class EventBroker
+
+  publish: (eventName) ->
+    $("body").trigger(eventName)
+    console.log 'published ' + eventName
+
+  subscribe: (eventName, func) ->
+    $("body").bind(eventName, () ->
+      func()
+    )
+
+$ ->
+  root = exports ? this
+  root.eventBroker = new EventBroker

data/public/coffeescripts/filters.coffee

@@ -0,0 +1,113 @@
+$ = jQuery
+
+initFormListeners = (appContext, eventBroker) ->
+  $('#node-count').change ->
+    appContext.setNodeCount($(this).val())
+    eventBroker.publish('refresh')
+
+  $('#node-filter').change ->
+    appContext.setNodeFilter($(this).val())
+    eventBroker.publish('refresh')
+
+  $('#key-filter').change ->
+    appContext.setKeyFilter($(this).val())
+    eventBroker.publish('refresh')
+
+initSubscribers = (appContext, eventBroker) ->
+  eventBroker.subscribe('nodeDataChanged', ->
+    refreshRelationFilters(appContext)
+  )
+
+refreshRelationFilters = (appContext)->
+  activatedNodeId = appContext.getActivatedNodeId()
+  return if (activatedNodeId == null)
+
+  graph = appContext.getGraph()
+  activatedNode = graph.load(activatedNodeId)
+  # Event timing issue: when reloading data we have not
+  # set the new activatedNodeId yet so we might try to fetch non-existent node
+  # here.
+  return if (activatedNode == null)
+
+  incomingTypes = (rel.type for rel in activatedNode.incoming()).unique()
+  outgoingTypes = (rel.type for rel in activatedNode.outgoing()).unique()
+  allRelTypes = incomingTypes.union(outgoingTypes).sort()
+
+  $('#relationsFilterTable').empty()
+
+  for relType in allRelTypes
+    hasIncoming = incomingTypes.contains(relType)
+    hasOutgoing = outgoingTypes.contains(relType)
+    inCheckboxHtml = buildCheckboxHtml relType, "in", hasIncoming
+    outCheckboxHtml = buildCheckboxHtml relType, "out", hasOutgoing
+
+    $('#relationsFilterTable').append("<tr><td>#{relType} #{inCheckboxHtml}</td><td>#{outCheckboxHtml}</td></tr>")
+
+  $("#relationsFilterTable input").change ->
+    updateHiddenNodeData(appContext, graph, activatedNode)
+
+updateHiddenNodeData = (appContext, graph, activatedNode) ->
+  relsToHide = ({ type:"#{checkbox.name}", direction:"#{checkbox.value}"} for checkbox in $("#relationsFilterTable input") when (!checkbox.disabled && !checkbox.checked))
+
+  incomingTypesToHide = (rel.type for rel in relsToHide when rel.direction == "in")
+  outgoingTypesToHide = (rel.type for rel in relsToHide when rel.direction == "out")
+
+  relsHiddenByUser = activatedNode.incoming(incomingTypesToHide)
+  relsHiddenByUser = relsHiddenByUser.concat(activatedNode.outgoing(outgoingTypesToHide))
+
+  hiddenNodeData = buildHiddenNodeData graph, activatedNode, relsHiddenByUser
+
+  appContext.setHiddenNodeData(hiddenNodeData)
+
+buildHiddenNodeData = (graph, activatedNode, relsHiddenByUser) ->
+
+  hiddenNodeData = nodeIds:[], relIds:(rel.id for rel in relsHiddenByUser)
+
+  allRels = graph.relationships
+  activeRels = allRels.diff(relsHiddenByUser)
+  for rel in activatedNode.both()
+    if relsHiddenByUser.contains(rel)
+      otherNode = rel.other(activatedNode)
+
+      if (!graph.areConnected(activatedNode, otherNode, activeRels))
+        #console.log "node " + activatedNode.id + " and " + otherNode.id + " are not connected"
+        # No connections to otherNode exists, so hide otherNode and its subgraph
+        appendHiddenNodeDataForSubGraph(otherNode, activeRels, hiddenNodeData)
+
+  hiddenNodeData
+
+appendHiddenNodeDataForSubGraph = (node, mutableActiveRels, hiddenNodeData) -> #={nodeIds: [], relIds: []}) ->
+
+  hiddenNodeData.nodeIds.push(node.id)
+  for rel in node.both()
+    if mutableActiveRels.contains(rel)
+      hiddenNodeData.relIds.push(rel.id)
+      # Remove the relationship already traversed so that
+      # next iteration does not traverse "backwards" again
+      mutableActiveRels.remove(mutableActiveRels.indexOf(rel))
+      other = rel.other(node)
+      # Have we already hidden the other node?
+      if (!hiddenNodeData.nodeIds.contains(other.id))
+        # No, go ahead and hide its subgraph.
+        appendHiddenNodeDataForSubGraph(other, mutableActiveRels, hiddenNodeData)
+
+
+buildCheckboxHtml = (relType, value, enabled) ->
+  html = "<input type='checkbox' name=\"#{relType}\" value='#{value}'"
+  html += " checked='true'" if enabled
+  html += " disabled='disabled'" if !enabled
+  html += " />"
+  html += "<del>" if !enabled
+  html += value
+  html += "</del>" if !enabled
+  html
+
+
+root = exports ? this
+root.test_buildHiddenNodeData = buildHiddenNodeData # global for unit testing
+
+
+$ ->
+
+  initSubscribers(@appContext, @eventBroker)
+  initFormListeners(@appContext, @eventBroker)

data/public/coffeescripts/main.coffee.erb

@@ -0,0 +1,132 @@
+//= require 'renderer.coffee'
+//= require 'space.coffee'
+
+$ = jQuery
+
+initFormListeners= (space, renderer, evalCode) ->
+  $('#loadForm').submit  (e) ->
+    e.preventDefault()
+    console.log 'load'
+    evalCode()
+
+showNodeDetails = (space, id=0) =>
+  node = space.node(id)
+  return unless node
+  showDetails(node.data)
+
+showDetails = (data) =>
+  html = for key, value of data
+    if key is 'first' then '' else "<tr><td>#{key}</td><td>#{value}</td></tr>"
+  $('#details').empty().append(html.join('\n'))
+
+showEdgeDetails = (space, id=0) =>
+  edge = space.rel(id)
+  return unless edge
+  showDetails(edge.data)
+
+
+initEventSubscribers = (eventBroker, appContext, space, renderer, getData) ->
+  eventBroker.subscribe('nodeCountChanged', ->
+    space.setNodeCount appContext.getNodeCount()
+  )
+
+  eventBroker.subscribe('nodeFilterChanged', ->
+    space.setFilter appContext.getNodeFilter()
+  )
+
+  eventBroker.subscribe('keyFilterChanged', ->
+    renderer.setKeyFilter appContext.getKeyFilter()
+  )
+
+  eventBroker.subscribe('nodeDataChanged', ->
+     appContext.clearHiddenNodeData()
+     nodeData = appContext.getNodeData()
+     space.addData nodeData
+     if nodeData.nodes.length > 0
+        firstNode = nodeData.nodes[0]
+        appContext.setActivatedNodeId(firstNode.id)
+        appContext.setSelectedObject(firstNode.id, "node")
+  )
+
+  eventBroker.subscribe('hiddenNodeDataChanged', ->
+     space.setHiddenData appContext.getHiddenNodeData()
+  )
+
+  eventBroker.subscribe('activatedNodeIdChanged', ->
+     getData appContext.getActivatedNodeId()
+  )
+
+  eventBroker.subscribe('selectedObjectChanged', ->
+     object = appContext.getSelectedObject()
+     if (object.kind == "node")
+        showNodeDetails(space, object.id)
+     else
+        showEdgeDetails(space, object.id)
+
+  )
+
+  eventBroker.subscribe('refresh', ->
+    space.refresh()
+  )
+
+$ ->
+
+  $('#consoleOutput').hide()
+
+  sys = arbor.ParticleSystem(1000, 600, 0.5) # create the system with sensible repulsion/stiffness/friction
+  sys.parameters({gravity:true}) # use center-gravity to make the graph settle nicely (ymmv)
+
+  space = new Space(sys, @appContext.getNodeCount())
+
+  appendToConsole = (text) ->
+      $('#console').val($('#console').val()+ '\n#' + text)
+
+  setError = (text) ->
+      $('#consoleOutputArea').val(text)
+
+  getData = (id=0) =>
+    depth = $('#depth').val()
+    code = if id is 0 then "node = Neo4j.ref_node" else "node = Node._load(#{id})"
+    code += "; viz node"
+    innerEvalCode(code, depth)
+
+  evalCode = =>
+    code = $('#console').val()
+    depth = $('#depth').val()
+    innerEvalCode(code, depth)
+
+  innerEvalCode = (code, depth) =>
+    appContext = @appContext
+    console.log code
+    $('#eval').attr('disabled', 'true')
+    $('#ajax-loader').show()
+    $.getJSON "<%= root_url() %>/eval", {code: code, depth: depth}, (data) ->
+      $('#ajax-loader').hide()
+      $('#eval').removeAttr('disabled')
+      if data.result
+        $('#consoleOutput').show()
+        setError data.result
+      else
+        setError ""
+        $('#consoleOutput').hide()
+        appContext.setNodeData data
+
+  activateNode = (id=0) =>
+    @appContext.setActivatedNodeId(id)
+
+  selectNode = (id=0) =>
+    @appContext.setSelectedObject(id, "node")
+
+  selectEdge = (id=0) =>
+    @appContext.setSelectedObject(id, "edge")
+
+  objectHandler =
+    activated: activateNode
+    selectedNode: selectNode
+    selectedEdge: selectEdge
+
+  sys.renderer = Renderer("#viewport", objectHandler) 
+
+  initFormListeners(space, sys.renderer, evalCode)
+  initEventSubscribers(@eventBroker, @appContext, space, sys.renderer, getData)
+  activateNode(0)