model-visualizer 0.0.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f85b56d9e73dfedbe9dddf499329ece11391694b
-  data.tar.gz: 99ba57a781f2c7f6b65a0e1161c4b70608795912
+  metadata.gz: bfe6c500461c09bfa2290ee696b56c6b49a3964d
+  data.tar.gz: 2c0dc9fbfee71a9867578da437e3b1b1951f5566
 SHA512:
-  metadata.gz: bdc68954e9628bcc93ffa680e19a4252d45bb45e1fa3d2225ce63b86ec3ed2c39268de18b38d80a13ef490e836534a061b454e906d8be477a7fcde52800a9b97
-  data.tar.gz: ce79b5640c79d4eb2ada3a5cdbe61616f825dbc47d4f8d2af4e8fe571d24098aa96489d8ca28718306446142ea1cfed8218dc3330fa48886bbadff29f9262c26
+  metadata.gz: d0901702b651f3acf807555d6b05e1ef73c891c4c4fbe391854fe2dcac119bfae27cfb4030d59dd6ff269a5b4a5c86f8be09a5d58baeff5002959a8836b7b770
+  data.tar.gz: 9f7e0d5b40f77643bce5ba1d394d88985e9f6902d337f1ad1f9784fa333c7369706cb5f182b95f25e793731132ff6e5c67c92bd04c042d50362757ff7826d65f

data/lib/model-visualizer.rb

@@ -14,6 +14,6 @@ class ModelVisualizer
         root = if ARGV.length == 1 then ARGV[0] else '.' end
 
         models = Parser.parse root
-        Visualizer.new(models).create_visualization
+        Visualizer.new(models).create_visualization(File.basename root)
     end
 end

data/lib/model-visualizer/model.rb

@@ -1,23 +1,6 @@
 #!/usr/bin/env ruby
 
 class Model
-    attr_reader :belongs_to
-    attr_reader :has_one
-    attr_reader :has_many
-    attr_reader :has_and_belongs_to_many
-    attr_reader :integer_attributes
-    attr_reader :string_attributes
-    attr_reader :primary_key_attributes
-    attr_reader :text_attributes
-    attr_reader :float_attributes
-    attr_reader :decimal_attributes
-    attr_reader :datetime_attributes
-    attr_reader :timestamp_attributes
-    attr_reader :time_attributes
-    attr_reader :date_attributes
-    attr_reader :binary_attributes
-    attr_reader :boolean_attributes
-    attr_reader :foreign_keys
 
     def initialize(name)
         @name = name

data/lib/model-visualizer/schema-parser.rb

@@ -13,7 +13,8 @@ class SchemaParser
     def parse(root)
         file = File.join(root, SCHEMA_FILE)
         unless File.file? file
-            abort 'db/schema.rb does not exist! Run from or pass the root directory of your Rails project.'
+            puts 'db/schema.rb does not exist! If this is surprising, run the command again from the Rails project directory.'
+            return
         end
 
         curr_model = nil

data/lib/model-visualizer/visualizer.rb

@@ -9,22 +9,37 @@ class Visualizer
         @models = models
     end
 
-    def create_visualization
+    def create_visualization(title)
         # Get file from gem directory
         g = Gem::Specification.find_by_name 'model-visualizer'
         template = File.join(g.full_gem_path, 'share/template.html')
+        css = File.join(g.full_gem_path, 'share/main.css')
         d3 = File.join(g.full_gem_path, 'share/d3.min.js')
+        tooltip = File.join(g.full_gem_path, 'share/d3.tip.js')
 
         # Insert data into file
         template_contents = File.read template
         output = template_contents.gsub(/<%= @models %>/, JSON.generate(@models))
+                                  .gsub(/<%= @css %>/, css)
                                   .gsub(/<%= @d3 %>/, d3)
+                                  .gsub(/<%= @title %>/, title + ' Model Visualization')
+                                  .gsub(/<%= @sidebar %>/, create_sidebar)
+                                  .gsub(/<%= @tooltip %>/, tooltip)
 
         # Write and open file
         File.open(FILE_PATH, 'w') {|file| file.puts output}
         self.launch_browser FILE_PATH
     end
 
+    def create_sidebar
+        str = '<div class="sidebar">'
+        str += '<div class="search"><input type="search" class="searchbox" results=5 size="large" placeholder="Search"></div>' # input type="search" does not let you resize in webkit
+        @models.sort.each do |name, model|
+            str += '<div class="model" onclick="highlightNode(this.innerHTML)">' + name + '</div>'
+        end
+        str += '</div>'
+    end
+
     # http://stackoverflow.com/questions/152699/open-the-default-browser-in-ruby
     def launch_browser(path)
         if RbConfig::CONFIG['host_os'] =~ /mswin|mingw|cygwin/

data/share/d3.tip.js

@@ -0,0 +1,325 @@
+// d3.tip
+// Copyright (c) 2013 Justin Palmer
+//
+// Tooltips for d3.js SVG visualizations
+
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module with d3 as a dependency.
+    define(['d3'], factory)
+  } else if (typeof module === 'object' && module.exports) {
+    // CommonJS
+    module.exports = function(d3) {
+      d3.tip = factory(d3)
+      return d3.tip
+    }
+  } else {
+    // Browser global.
+    root.d3.tip = factory(root.d3)
+  }
+}(this, function (d3) {
+
+  // Public - contructs a new tooltip
+  //
+  // Returns a tip
+  return function() {
+    var direction = d3_tip_direction,
+        offset    = d3_tip_offset,
+        html      = d3_tip_html,
+        node      = initNode(),
+        svg       = null,
+        point     = null,
+        target    = null
+
+    function tip(vis) {
+      svg = getSVGNode(vis)
+      point = svg.createSVGPoint()
+      document.body.appendChild(node)
+    }
+
+    // Public - show the tooltip on the screen
+    //
+    // Returns a tip
+    tip.show = function() {
+      var args = Array.prototype.slice.call(arguments)
+      if(args[args.length - 1] instanceof SVGElement) target = args.pop()
+
+      var content = html.apply(this, args),
+          poffset = offset.apply(this, args),
+          dir     = direction.apply(this, args),
+          nodel   = getNodeEl(),
+          i       = directions.length,
+          coords,
+          scrollTop  = document.documentElement.scrollTop || document.body.scrollTop,
+          scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
+
+      nodel.html(content)
+        .style({ opacity: 1, 'pointer-events': 'all' })
+
+      while(i--) nodel.classed(directions[i], false)
+      coords = direction_callbacks.get(dir).apply(this)
+      // changed this to 0, 0 to put tip in top right corner
+      nodel.classed(dir, true).style({
+        top: 0,
+        right: 0
+      })
+
+      return tip
+    }
+
+    // Public - hide the tooltip
+    //
+    // Returns a tip
+    tip.hide = function() {
+      var nodel = getNodeEl()
+      nodel.style({ opacity: 0, 'pointer-events': 'none' })
+      return tip
+    }
+
+    // Public: Proxy attr calls to the d3 tip container.  Sets or gets attribute value.
+    //
+    // n - name of the attribute
+    // v - value of the attribute
+    //
+    // Returns tip or attribute value
+    tip.attr = function(n, v) {
+      if (arguments.length < 2 && typeof n === 'string') {
+        return getNodeEl().attr(n)
+      } else {
+        var args =  Array.prototype.slice.call(arguments)
+        d3.selection.prototype.attr.apply(getNodeEl(), args)
+      }
+
+      return tip
+    }
+
+    // Public: Proxy style calls to the d3 tip container.  Sets or gets a style value.
+    //
+    // n - name of the property
+    // v - value of the property
+    //
+    // Returns tip or style property value
+    tip.style = function(n, v) {
+      if (arguments.length < 2 && typeof n === 'string') {
+        return getNodeEl().style(n)
+      } else {
+        var args =  Array.prototype.slice.call(arguments)
+        d3.selection.prototype.style.apply(getNodeEl(), args)
+      }
+
+      return tip
+    }
+
+    // Public: Set or get the direction of the tooltip
+    //
+    // v - One of n(north), s(south), e(east), or w(west), nw(northwest),
+    //     sw(southwest), ne(northeast) or se(southeast)
+    //
+    // Returns tip or direction
+    tip.direction = function(v) {
+      if (!arguments.length) return direction
+      direction = v == null ? v : d3.functor(v)
+
+      return tip
+    }
+
+    // Public: Sets or gets the offset of the tip
+    //
+    // v - Array of [x, y] offset
+    //
+    // Returns offset or
+    tip.offset = function(v) {
+      if (!arguments.length) return offset
+      offset = v == null ? v : d3.functor(v)
+
+      return tip
+    }
+
+    // Public: sets or gets the html value of the tooltip
+    //
+    // v - String value of the tip
+    //
+    // Returns html value or tip
+    tip.html = function(v) {
+      if (!arguments.length) return html
+      html = v == null ? v : d3.functor(v)
+
+      return tip
+    }
+
+    // Public: destroys the tooltip and removes it from the DOM
+    //
+    // Returns a tip
+    tip.destroy = function() {
+      if(node) {
+        getNodeEl().remove();
+        node = null;
+      }
+      return tip;
+    }
+
+    function d3_tip_direction() { return 'n' }
+    function d3_tip_offset() { return [0, 0] }
+    function d3_tip_html() { return ' ' }
+
+    var direction_callbacks = d3.map({
+      n:  direction_n,
+      s:  direction_s,
+      e:  direction_e,
+      w:  direction_w,
+      nw: direction_nw,
+      ne: direction_ne,
+      sw: direction_sw,
+      se: direction_se
+    }),
+
+    directions = direction_callbacks.keys()
+
+    function direction_n() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.n.y - node.offsetHeight,
+        left: bbox.n.x - node.offsetWidth / 2
+      }
+    }
+
+    function direction_s() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.s.y,
+        left: bbox.s.x - node.offsetWidth / 2
+      }
+    }
+
+    function direction_e() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.e.y - node.offsetHeight / 2,
+        left: bbox.e.x
+      }
+    }
+
+    function direction_w() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.w.y - node.offsetHeight / 2,
+        left: bbox.w.x - node.offsetWidth
+      }
+    }
+
+    function direction_nw() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.nw.y - node.offsetHeight,
+        left: bbox.nw.x - node.offsetWidth
+      }
+    }
+
+    function direction_ne() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.ne.y - node.offsetHeight,
+        left: bbox.ne.x
+      }
+    }
+
+    function direction_sw() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.sw.y,
+        left: bbox.sw.x - node.offsetWidth
+      }
+    }
+
+    function direction_se() {
+      var bbox = getScreenBBox()
+      return {
+        top:  bbox.se.y,
+        left: bbox.e.x
+      }
+    }
+
+    function initNode() {
+      var node = d3.select(document.createElement('div'))
+      node.style({
+        position: 'absolute',
+        top: 0,
+        opacity: 0,
+        'pointer-events': 'none',
+        'box-sizing': 'border-box'
+      })
+
+      return node.node()
+    }
+
+    function getSVGNode(el) {
+      el = el.node()
+      if(el.tagName.toLowerCase() === 'svg')
+        return el
+
+      return el.ownerSVGElement
+    }
+
+    function getNodeEl() {
+      if(node === null) {
+        node = initNode();
+        // re-add node to DOM
+        document.body.appendChild(node);
+      };
+      return d3.select(node);
+    }
+
+    // Private - gets the screen coordinates of a shape
+    //
+    // Given a shape on the screen, will return an SVGPoint for the directions
+    // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
+    // sw(southwest).
+    //
+    //    +-+-+
+    //    |   |
+    //    +   +
+    //    |   |
+    //    +-+-+
+    //
+    // Returns an Object {n, s, e, w, nw, sw, ne, se}
+    function getScreenBBox() {
+      var targetel   = target || d3.event.target;
+
+      while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
+          targetel = targetel.parentNode;
+      }
+
+      var bbox       = {},
+          matrix     = targetel.getScreenCTM(),
+          tbbox      = targetel.getBBox(),
+          width      = tbbox.width,
+          height     = tbbox.height,
+          x          = tbbox.x,
+          y          = tbbox.y
+
+      point.x = x
+      point.y = y
+      bbox.nw = point.matrixTransform(matrix)
+      point.x += width
+      bbox.ne = point.matrixTransform(matrix)
+      point.y += height
+      bbox.se = point.matrixTransform(matrix)
+      point.x -= width
+      bbox.sw = point.matrixTransform(matrix)
+      point.y -= height / 2
+      bbox.w  = point.matrixTransform(matrix)
+      point.x += width
+      bbox.e = point.matrixTransform(matrix)
+      point.x -= width / 2
+      point.y -= height / 2
+      bbox.n = point.matrixTransform(matrix)
+      point.y += height
+      bbox.s = point.matrixTransform(matrix)
+
+      return bbox
+    }
+
+    return tip
+  };
+
+}));

data/share/main.css

@@ -0,0 +1,140 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Regular.ttf');
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  background-image: url("background.png");
+  font-family: 'Open Sans', sans-serif;
+  margin: 0;
+  top: 0;
+}
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  overflow: scroll;
+  border-right: 1px solid #999;
+  width: 18%;
+  color: #222;
+  background-color: #eee;
+}
+
+.search, .model {
+  padding: 7px 15px;
+}
+
+.searchbox {
+  width: 100%;
+  font-size: 16px;
+}
+
+.model {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.model:hover {
+  background-color: #6495ed;
+  color: #eee;
+}
+
+.container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 18%;
+}
+
+.title {
+  margin-top: 30px;
+  text-align: center;
+  font-size: 32px;
+}
+
+.inner-container {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #999;
+  top: 100px;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+}
+
+.node {
+  stroke: #000111;
+  stroke-width: 1.0px;
+  fill: #6495ed;
+}
+
+.node-label {
+  pointer-events: none;
+}
+
+.link {
+  fill: none;
+  stroke-width: 1.5px;
+  stroke-opacity: 0.8;
+}
+
+.legend-outer {
+  width: 236px;
+  padding: 10px;
+  height: 110px;
+  border: 2px solid #9E9DA6;
+  position: fixed;
+  right: 44px;
+  bottom: 44px;
+  background-color: white;
+}
+
+.legend-outer legend {
+  font-size: large;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ho_line {
+  color: #0000ff;
+}
+
+.hm_line{
+  color: #000000;
+}
+
+.bt_line {
+  color: #00ff00;
+}
+
+.habtm_line {
+  color: #ff0000;
+}
+
+.association_name {
+  margin-left: 10px;
+}
+
+.legend-has_one, .legend-has_many, .legend-belongs_to, .legend-has_and_belongs_to_many {
+  display: -webkit-flex;
+  display: flex;
+  cursor: pointer;
+}
+
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}

data/share/template.html

@@ -3,11 +3,40 @@
     <head>
         <title>Rails Model Visualizer</title>
         <meta charset="utf-8">
-        <!-- d3 3.5.5 included from gem directory -->
+        <link href="<%= @css %>" rel="stylesheet" type="text/css">
         <script src="<%= @d3 %>" charset="utf-8"></script>
+        <script src="<%= @tooltip %>"></script>
     </head>
 
     <body>
+        <%= @sidebar %>
+
+        <div class="container">
+            <div class="title"><%= @title %></div>
+            <div class="inner-container">
+                <!-- SVG will be inserted here -->
+            </div>
+        </div>
+
+        <div class='legend-outer'>
+          <legend>Associations</legend>
+          <div class='legend-has_one' onclick="highlightAssociation('has_one')">
+            <div class='ho_line'>&#x25AC;</div>
+            <div class='association_name'>has_one</div>
+          </div>
+          <div class='legend-has_many' onclick="highlightAssociation('has_many')">
+            <div class='hm_line'>&#x25AC;</div>
+            <div class='association_name'>has_many</div>
+          </div>
+          <div class='legend-belongs_to' onclick="highlightAssociation('belongs_to')">
+            <div class='bt_line'>&#x25AC;</div>
+            <div class='association_name'>belongs_to</div>
+          </div>
+          <div class='legend-has_and_belongs_to_many' onclick="highlightAssociation('has_and_belongs_to_many')">
+            <div class='habtm_line'>&#x25AC;</div>
+            <div class='association_name'>has_and_belongs_to_many</div>
+          </div>
+        </div>
         <script>
             (function() {
                 // Model data is inserted from visualizer.rb
@@ -15,6 +44,7 @@
                 var nodes = [];
                 var links = [];
                 var node;
+                var nodeSelected = null;
 
                 // Create node array and number each one
                 var i = 0;
@@ -36,91 +66,254 @@
                         node = data[name];
                         for (var assn_type in node.associations) {
                             node.associations[assn_type].forEach(function(assn) {
-                                links.push({
-                                    source: node.node_number,
-                                    target: data[assn].node_number,
-                                    type: assn_type
-                                });
+                                if (assn in data) {
+                                    links.push({
+                                        source: node.node_number,
+                                        target: data[assn].node_number,
+                                        type: assn_type
+                                    });
+                                } else {
+                                    console.log('ERROR: association not found. ' + name + ' -> ' + assn)
+                                }
                             });
                         }
                     }
                 }
 
-                var width = window.innerWidth,
-                    height = window.innerHeight;
-
-                var color = d3.scale.category20();
-
-                var force = d3.layout
-                              .force()
-                              .charge(-450)
-                              .linkDistance(150)
-                              .size([width, height]);
+                var container = document.getElementsByClassName("inner-container")[0];
+                var width = container.clientWidth,
+                    height = container.clientHeight;
 
-                var svg = d3.select("body")
+                var svg = d3.select(".inner-container")
                             .append("svg")
                             .attr("width", width)
                             .attr("height", height);
 
-                force.nodes(nodes)
-                     .links(links)
-                     .start();
+                var force = d3.layout.force()
+                              .size([width, height])
+                              .nodes(d3.values(nodes))
+                              .links(links)
+                              .charge(-1000)
+                              .linkDistance(200)
+                              .start();
 
-                var link = svg.selectAll(".link")
-                              .data(links)
-                              .enter().append("line")
+                var markerWidth = 8,
+                    markerHeight = 8,
+                    cRadius = 30, // play with the cRadius value
+                    refX = cRadius + (markerWidth / 2),
+                    refY = -Math.sqrt(cRadius / 3),
+                    maxNodeLabelSize = cRadius * 0.625,
+                    minNodeLabelSize = cRadius * 0.275,
+                    drSub = cRadius - refY;
+
+                // build the arrow.
+                svg.append("svg:defs")
+                   .selectAll("marker")
+                   .data(["end"])      // Different link/path types can be defined here
+                   .enter().append("svg:marker")    // This section adds in the arrows
+                   .attr("id", String)
+                   .attr("viewBox", "0 -5 10 10")
+                   .attr("refX", refX)
+                   .attr("refY", refY)
+                   .attr("markerWidth", markerWidth)
+                   .attr("markerHeight", markerHeight)
+                   .attr("orient", "auto")
+                   .append("svg:path")
+                   .attr("d", "M0,-5L10,0L0,5");
+
+                // add the links and the arrows
+                var path = svg.append("svg:g").selectAll("path")
+                              .data(force.links())
+                              .enter().append("svg:path")
                               .attr("class", "link")
+                              .attr("marker-end", "url(#end)")
                               .style("stroke", function(d) {
                                   switch(d.type) {
-                                      case "belongs_to":
-                                          return "#000";
-                                      case "has_and_belongs_to_many":
-                                          return "#f00";
                                       case "has_many":
-                                          return "#0f0";
+                                          return "#000000";
+                                      case "has_and_belongs_to_many":
+                                          return "#ff0000";
+                                      case "belongs_to":
+                                          return "#00ff00";
                                       case "has_one":
-                                          return "#00f";
+                                          return "#0000ff";
                                       default:
-                                          return "#999";
+                                          return "#999999";
                                   }
-                              }).style("stroke-width", function(d) { return Math.sqrt(d.value); });
+                              });
 
                 // Create the node groups under svg
                 var gnodes = svg.selectAll('g.gnode')
                                 .data(nodes)
                                 .enter()
                                 .append('g')
+                                .on("mouseover", mouseover)
+                                .on("mouseout", mouseout)
+                                .on("click", click)
                                 .classed('gnode', true);
 
                 // Add circle to each group
                 node = gnodes.append("circle")
                              .attr("class", "node")
-                             .attr("r", 15)
-                             .style("fill", function(d) { return color(d.group); })
+                             .attr("r", cRadius)
                              .call(force.drag);
 
                 // Append labels to each group
                 var labels = gnodes.append("text")
-                                   .text(function(d) { return d.name; });
-
-                // Show model attributes on hover
-                node.append("title").text(function(d) {
-                    var description = d.name + '\r\n';
+                                   .text(function(d) { return d.name; })
+                                   .attr("text-anchor", "middle")
+                                   .attr("class", "node-label")
+                                   .style("font-size", "1px")
+                                   .each(getSize)
+                                   .style("font-size", function(d) { return d.scale + "px"; })
+                                   .attr("dy", function(d) { return (d.scale / 5) + "px"; });
 
+                // initializes the tooltip for node mouseover
+                var tip = d3.tip()
+                  .attr('class', 'd3-tip')
+                  .offset([-10, 0])
+                  .html(function(d) {
+                    var description = d.name + '<br>';
                     for (var attr in d.schema_info) {
-                        if (d.schema_info[attr].length > 0) {
-                            description += '\r\n' + attr + ": " + d.schema_info[attr].join(', ');
-                        }
+                      if (d.schema_info[attr].length > 0) {
+                        description += '<br>' + attr + ": " + d.schema_info[attr].join(', ');
+                      }
                     }
-
                     return description;
-                });
+                  })
+
+                // svg calls tip for tooltip functionality
+                svg.call(tip);
+
+                function getSize(d) {
+                  var bbox = this.getBBox(),
+                      margin = 3.0,
+                      cbbox = this.parentNode.getBBox(),
+                      scale = Math.min(cbbox.width/bbox.width, cbbox.height/bbox.height);
+                  scale = Math.min(scale, maxNodeLabelSize)
+                  scale = Math.max(scale, minNodeLabelSize)
+                  d.scale = (scale - margin);
+                }
+
+                function mouseover() {
+                  if (nodeSelected === null) {
+                    d3.select(this).select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius * 1.1;
+                        })
+                        .style("fill", function(d) {
+                           return "#90EE90";
+                        });
+                    d3.select(this).select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale * 1.1; });
+                    // A little hackish, but couldn't figure out how to use mouseover with anonymous function inside
+                    tip.show(d3.select(this)[0][0].__data__);
+                  }
+                }
+
+                function mouseout() {
+                  if (nodeSelected === null) {
+                    d3.select(this).select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale; });
+                    d3.select(this).select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius;
+                        })
+                        .style("fill", function(d) {
+                           return "#6495ED";
+                        });
+                    // same comment as mouseover ^^^
+                    tip.hide(d3.select(this)[0][0].__data__);
+                  }
+                }
+
+                function click() {
+                  // if we are clicking a node and there is no node currently selected
+                  if (nodeSelected === null) {
+                    nodeSelected = d3.select(this);
+                    nodeSelected.select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius * 1.1;
+                        })
+                        .style("fill", function(d) {
+                           return "#90EE90";
+                        });
+                    nodeSelected.select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale * 1.1; });
+                    tip.show(nodeSelected[0][0].__data__);
+                  }
+                  // if we are clicking a node that is currently selected
+                  else if(nodeSelected[0][0].__data__.index === d3.select(this)[0][0].__data__.index) {
+                    nodeSelected.select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale; });
+                    nodeSelected.select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius;
+                        })
+                        .style("fill", function(d) {
+                           return "#6495ED";
+                        });
+                    tip.hide(nodeSelected[0][0].__data__);
+
+                    nodeSelected = null;
+                  }
+                  // if we are clicking a node that is not already selected
+                  else {
+                    nodeSelected.select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale; });
+                    nodeSelected.select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius;
+                        })
+                        .style("fill", function(d) {
+                           return "#6495ED";
+                        });
+                    tip.hide(nodeSelected[0][0].__data__);
+
+                    nodeSelected = d3.select(this);
+
+                    nodeSelected.select("circle").transition()
+                        .duration(500)
+                        .attr("r", function(d){
+                          return cRadius * 1.1;
+                        })
+                        .style("fill", function(d) {
+                           return "#90EE90";
+                        });
+                    nodeSelected.select('text').transition()
+                        .duration(500)
+                        .style("font-size", function(d) { return d.scale * 1.1; });
+                    tip.show(d3.select(this)[0][0].__data__);
+                  }
+                }
 
                 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; });
+                    path.attr("d", function(d) {
+                      var dx = d.target.x - d.source.x,
+                          dy = d.target.y - d.source.y,
+                          dr = Math.sqrt(dx * dx + dy * dy);
+                      return "M" +
+                          d.source.x + "," +
+                          d.source.y + "A" +
+                          (dr - drSub) + "," + (dr - drSub) + " 0 0,1 " +
+                          d.target.x + "," +
+                          d.target.y;
+                      });
+
+                    // 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; });
 
                     // Translate the groups
                     gnodes.attr("transform", function(d) {
@@ -129,7 +322,73 @@
                     // node.attr("cx", function(d) { return d.x; })
                     //     .attr("cy", function(d) { return d.y; });
                 });
+
+                // Search functionality for sidebar
+                var searchdiv = document.getElementsByClassName('sidebar')[0].firstChild;
+                var searchfield = searchdiv.firstChild;
+                searchfield.oninput = function() {
+                    var sidebarentries = document.getElementsByClassName('model');
+                    var search = searchfield.value.toLowerCase();
+                    for (var i = 0; i < sidebarentries.length; i++) {
+                        var entry = sidebarentries[i];
+                        var html = entry.innerHTML.toLowerCase();
+                        if (html.indexOf(search) == -1) {
+                            entry.style.display = 'none';
+                        } else {
+                            entry.style.display = 'block';
+                        }
+                    }
+                }
+
+                // Highlight node on click. Must be global.
+                var nodeHighlightTimeout;
+                window.highlightNode = function(name) {
+                    if (nodeHighlightTimeout !== null) {
+                        clearTimeout(nodeHighlightTimeout);
+                    }
+
+                    // Dim all links and all nodes but the one with the given name
+                    var gnodes = svg.selectAll(".gnode");
+
+                    gnodes.filter(function (d, i) {
+                        return d.name != name;
+                    }).style("opacity", "0.1");
+
+                    gnodes.filter(function (d, i) {
+                        return d.name == name;
+                    }).style("opacity", "1.0");
+
+                    svg.selectAll(".link").style("opacity", "0.1");
+
+                    // TODO: display tooltip and keep everything else dimmed to undim later
+                    nodeHighlightTimeout = setTimeout(function() {
+                        d3.selectAll(".gnode, .link")
+                          .style("opacity", "1");
+                    }, 1500);
+                }
+
+                window.highlightAssociation = function(association) {
+                  //dim all OTHER types of associations
+                  svg.selectAll(".link").filter(function (d, i) {
+                    return d.type != association;
+                  }).style("opacity", "0.1");
+
+                  // svg.selectAll(".link").filter(function (d, i) {
+                  //   return d.type = association;
+                  // }).style("stroke-width", "3.5px");
+
+                  d3.selectAll(".gnode, .link").transition()
+                   .duration(4500)
+                   .style("opacity", "1");
+
+                  // d3.selectAll(".link").transition()
+                  //   .duration(1500)
+                  //   .style("stroke-width", "1.5px");
+
+                }
+
             })();
         </script>
+
     </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: model-visualizer
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
 platform: ruby
 authors:
 - Alex Grover
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-04-09 00:00:00.000000000 Z
+date: 2015-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -41,7 +41,11 @@ files:
 - lib/model-visualizer/model-parser.rb
 - lib/model-visualizer/schema-parser.rb
 - share/template.html
+- share/main.css
+- share/background.png
+- share/OpenSans-Regular.ttf
 - share/d3.min.js
+- share/d3.tip.js
 - bin/model-visualizer
 homepage: http://rubygems.org/gems/model-visualizer
 licenses: