rubrowser 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 728b4572bf4dc170bbc4d88f8061622c79c8e1fe
-  data.tar.gz: e609c2523b14b57bce3c4fbc6a33cb294c0e0fb0
+  metadata.gz: c73af6e853cf9a9ccbfecd66f87167be4f6437a2
+  data.tar.gz: 644e9a8d84252da3aeb417c52cdc37ac5c598d1f
 SHA512:
-  metadata.gz: 92a1ff49dc8f328dca9be9d07991b668ce11d2eb31bfdc95b60dca45f204aee6728444d6ba69a0f9f60219bc49a71d6e9201fd3b43e888e4afdde32a1ab2c98b
-  data.tar.gz: 7ca9bf3b48db3468e6b195e6760b79377c55563be0a08f0b82cc3066a63f02b133f5a65fa44486c8a5552115a58f1e20bff48e52e57f7acce669876e6ae2eb20
+  metadata.gz: a3fee22947295cf8a8aa168c63edf91f6c19d91ed967fac419d5371ab5a6970694a9f9ec039a3f3244218f8a15a2d05c5ad8ea6d1bd6e6c04bff4ece7f3089e9
+  data.tar.gz: f1a827ac8faf66d3609ac2f52cf54508d856b053c1950fb427c9ff4b3ef3886ab319b8f74d114d425aad18b66f9c599b722658e67f9a3ac3a067ffd4bb377b55

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    rubrowser (0.2.1)
+    rubrowser (0.2.2)
       parser (~> 2.3, >= 2.3.0)
 
 GEM

data/lib/rubrowser.rb

@@ -1,3 +1,3 @@
 module Rubrowser
-  VERSION = '0.2.1'.freeze
+  VERSION = '0.2.2'.freeze
 end

data/public/css/application.css

@@ -39,4 +39,81 @@ text {
 
 text.type{
     font: 7px sans-serif;
+}
+
+.downlighted, .name_ignored, .type_ignored{
+    opacity: 0.1;
+}
+
+.highlighted, .name_highlighted, .type_highlighted{
+    fill: #008ef3;
+}
+
+.highlighted circle, .name_highlighted circle, .type_highlighted circle{
+    stroke: #008ef3;
+}
+
+.hide_namespace .namespace, .link.hide_relation{
+    display: none;
+}
+
+/* ============================ */
+/* Toolbox style */
+/* ============================ */
+
+.toolbox{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    max-height: 100%;
+    width: 200px;
+    background: white;
+    border-right: 1px solid #ddd;
+    display: none;
+    overflow: auto;
+}
+
+.panel .title{
+    padding: 20px 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    border-bottom: 1px solid #ddd;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.panel .title:hover{
+    background: #eee;
+}
+
+.panel .content{
+    border-bottom: 1px solid #ddd;
+    padding: 5px;
+}
+
+.panel label{
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.panel textarea{
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: 100px;
+    padding: 0px;
+    border: 1px solid #ddd
+}
+
+.panel input[type=button],
+.panel input[type=range],
+.panel button{
+    width: 100%;
+    max-width: 100%;
+    display: block;
 }

data/public/javascript/application.js

@@ -1,6 +1,7 @@
 d3.json("/data.json", function(error, data) {
   parseGraph(data);
   $('.loading').hide();
+  $('.toolbox').show();
 });
 
 var parseGraph = function(data){
@@ -12,8 +13,8 @@ var parseGraph = function(data){
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended),
-      constants = _.uniqWith(data.definitions.map(function(d){ return {id: d.namespace, type: d.type }; }), _.isEqual),
-      namespaces = constants.map(function(d){ return d.id; }),
+      definitions = _.uniqWith(data.definitions.map(function(d){ return {id: d.namespace, type: d.type }; }), _.isEqual),
+      namespaces = definitions.map(function(d){ return d.id; }),
       relations = data.relations.map(function(d){ return {source: d.caller, target: d.resolved_namespace }; });
 
   relations = relations.filter(function(d){
@@ -34,10 +35,10 @@ var parseGraph = function(data){
         .force("link", d3.forceLink().id(function(d) { return d.id; }))
         .force("charge", d3.forceManyBody())
         .force("center", d3.forceCenter(width / 2, height / 2))
-        .force("forceCollide", d3.forceCollide(function(){ return 80; }));
+        .force("forceCollide", d3.forceCollide(80));
 
   simulation
-    .nodes(constants)
+    .nodes(definitions)
     .on("tick", ticked);
 
   simulation.force("link")
@@ -53,7 +54,7 @@ var parseGraph = function(data){
       node = container.append("g")
         .attr("class", "nodes")
         .selectAll("g")
-        .data(constants)
+        .data(definitions)
         .enter().append("g")
         .call(drag)
         .on("dblclick", dblclick),
@@ -68,6 +69,7 @@ var parseGraph = function(data){
         .text(function(d) { return d.type[0]; }),
       text = node
         .append("text")
+        .attr("class", "namespace")
         .attr("x", 8)
         .attr("y", ".31em")
         .text(function(d) { return d.id; });
@@ -126,29 +128,31 @@ var parseGraph = function(data){
 
   node.on('mouseover', function(d) {
     var relatives = [];
-    link.style('opacity', function(l) {
+    link.classed('downlighted', function(l) {
       if (d === l.source || d === l.target){
         relatives.push(l.source);
         relatives.push(l.target);
-        return 1;
+        return false;
       }else{
-        return 0.1;
+        return true;
       }
     });
-    node.style('opacity', function(n) {
-      if( n == d || relatives.indexOf(n) > -1 ){
-        return 1;
-      }else{
-        return 0.1;
-      }
+    node.classed('downlighted', function(n) {
+      return !(n == d || relatives.indexOf(n) > -1);
     });
   });
 
   node.on('mouseout', function() {
-    link.style('opacity', 1);
-    node.style('opacity', 1);
+    link.classed('downlighted', false);
+    node.classed('downlighted', false);
   });
 
-  return true;
-
+  window.rubrowser = {
+    data: data,
+    definitions: definitions,
+    relations: relations,
+    simulation: simulation,
+    node: node,
+    link: link
+  };
 };

data/public/javascript/toolbox.js

@@ -0,0 +1,77 @@
+$(document).on('click', '.panel .title', function(){
+  $(this).siblings().toggle();
+});
+
+// --------------------------------
+// Search Panel
+// --------------------------------
+$(document).on('change', '#highlight_by_namespace', function(){
+  var highlights_entries = $(this).val().trim();
+  var highlights = highlights_entries.split("\n");
+
+  rubrowser.node.classed('name_highlighted', function(d){
+    if(highlights_entries.length == 0){ return false; }
+    return highlights.filter(function(i){ return d.id.indexOf(i) > -1; }).length > 0;
+  });
+});
+
+$(document).on('change', '#highlight_modules, #highlight_classes', function(){
+  var modules_highlighted = $('#highlight_modules').is(':checked'),
+      classes_highlighted = $('#highlight_classes').is(':checked');
+
+  rubrowser.node.classed('type_highlighted', function(d){
+    return (d.type == 'Module' && modules_highlighted) || (d.type == 'Class' && classes_highlighted);
+  });
+});
+
+// --------------------------------
+// Ignore Panel
+// --------------------------------
+$(document).on('change', '#ignore_by_namespace', function(){
+  var ignores_entries = $(this).val().trim();
+  var ignores = ignores_entries.split("\n");
+
+  rubrowser.node.classed('name_ignored', function(d){
+    if(ignores_entries.length == 0){ return false; }
+    return ignores.filter(function(i){ return d.id.indexOf(i) > -1; }).length > 0;
+  });
+  rubrowser.link.classed('name_ignored', function(d){
+    if(ignores_entries.length == 0){ return false; }
+    return ignores.filter(function(i){ return d.source.id.indexOf(i) > -1 || d.target.id.indexOf(i) > -1; }).length > 0;
+  });
+});
+
+$(document).on('change', '#ignore_modules, #ignore_classes', function(){
+  var modules_ignored = $('#ignore_modules').is(':checked'),
+      classes_ignored = $('#ignore_classes').is(':checked');
+
+  rubrowser.node.classed('type_ignored', function(d){
+    return (d.type == 'Module' && modules_ignored) || (d.type == 'Class' && classes_ignored);
+  });
+  rubrowser.link.classed('type_ignored', function(d){
+    return ((d.source.type == 'Module' && modules_ignored) || (d.source.type == 'Class' && classes_ignored)) ||
+      ((d.target.type == 'Module' && modules_ignored) || (d.target.type == 'Class' && classes_ignored));
+  });
+});
+
+// --------------------------------
+// Display Panel
+// --------------------------------
+$(document).on('change', "#force_collide", function(){
+  var new_value = $(this).val();
+  rubrowser.simulation.force("forceCollide", d3.forceCollide(new_value));
+});
+
+$(document).on('change', "#hide_relations", function(){
+  var hide_relations = $('#hide_relations').is(':checked');
+  rubrowser.link.classed("hide_relation", hide_relations);
+});
+
+$(document).on('change', "#hide_namespaces", function(){
+  var hide_namespaces = $('#hide_namespaces').is(':checked');
+  rubrowser.node.classed("hide_namespace", hide_namespaces);
+});
+
+$(document).on('click', "#pause_simulation", function(){
+    rubrowser.simulation.stop();
+});

data/readme.md

@@ -6,7 +6,7 @@ a visualizer for ruby code (rails or otherwise), it analyze your code and extrac
 
 this project is so small that the visualization looks like so
 
-![rubrowser visualization](http://i.imgur.com/HwLfJx2.png)
+![rubrowser visualization](http://i.imgur.com/5mbshee.png)
 
 the idea is that the project opens every `.rb` file and parse it with `parser` gem then list all modules and classes definitions, and all constants that are listed inside this module/class and link them together.
 
@@ -54,6 +54,8 @@ it'll analyze the current directory and open port 9000, so you can access the gr
 * to release node double click on it
 * zoom and pan with mouse or touch pad
 * highlight node and all related nodes, it'll make it easier for you to see what depends and dependencies of certain class
+* ignore node by name
+* ignore nodes of certain type (modules/classes)
 
 
 ## Tests?

data/views/index.erb

@@ -12,9 +12,41 @@
         Parsing files...
       </div>
     </div>
+    <div class="toolbox">
+      <div class="panel">
+        <div class="title"> Search </div>
+        <div class="content">
+          <label>Namespace</label>
+          <textarea id="highlight_by_namespace"></textarea>
+          <label><input type="checkbox" id="highlight_modules"/> Modules</label>
+          <label><input type="checkbox" id="highlight_classes"/> Classes</label>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="title"> Ignore </div>
+        <div class="content">
+          <label>Namespace</label>
+          <textarea id="ignore_by_namespace"></textarea>
+          <label><input type="checkbox" id="ignore_modules"/> Modules</label>
+          <label><input type="checkbox" id="ignore_classes"/> Classes</label>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="title"> Display </div>
+        <div class="content">
+          <input type="button" id="pause_simulation" value="Pause animation"/>
+          <label>Force Collide</label>
+          <input id="force_collide" type="range" value="80" min="0" max="500"/>
+          <label><input type="checkbox" id="hide_namespaces"/> Hide namespaces</label>
+          <label><input type="checkbox" id="hide_relations"/> Hide relations</label>
+        </div>
+      </div>
+    </div>
+
     <script src='/javascript/lodash.js' type='text/javascript'></script>
     <script src='/javascript/d3.js' type='text/javascript'></script>
     <script src='/javascript/jquery.js' type='text/javascript'></script>
     <script src='/javascript/application.js' type='text/javascript'></script>
+    <script src='/javascript/toolbox.js' type='text/javascript'></script>
   </body>
 </html>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rubrowser
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Emad Elsaid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-09-01 00:00:00.000000000 Z
+date: 2016-09-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: parser
@@ -60,6 +60,7 @@ files:
 - public/javascript/d3.js
 - public/javascript/jquery.js
 - public/javascript/lodash.js
+- public/javascript/toolbox.js
 - readme.md
 - rubrowser.gemspec
 - views/index.erb