dothtml 0.0.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1e761c595a94b3bbafdbb7b7796ecc2b1f8a6690
+  data.tar.gz: 2aa1330586afdd6bd045b35c29255ee70d0d3ddc
+SHA512:
+  metadata.gz: 27d82f94a44ca6052014e949f6bd3dfaf3d3a2958c03ff71016a6ea9418b7f6ec27d84ccc5f2d888036651a461f2e73fe17e6a3380383b0599a2b2487e604df1
+  data.tar.gz: dee8c3c7154326da5120f175e6e4be26a3c1821ae35f922aff673bb1ee6614bd1764a9a455c40b61c25526c606fc402a5f58df8a1c49fc474f7e0dcf807abef3

data/.gitignore

@@ -0,0 +1,14 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

data/.travis.yml

@@ -0,0 +1,5 @@
+language: ruby
+before_install:
+  - sudo apt-get install graphviz
+rvm:
+  - 2.1.5

data/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log
+
+## 0.0.3 - 2014-12-23
+### Added
+- Rule to generate an svg file
+
+## 0.0.2 - 2014-12-10
+### Added
+- This CHANGELOG
+- Added behavior and style files. (no longer in template file)
+
+### Removed
+- Removed temporary svg file and associated Rakefile rule.
+- Removed documentation and radioboxes when not necessary.
+
+## 0.0.1 - 2014-12-08
+### Added
+- Rakefile task rule to convert dot files to svg files
+- Rakefile rule to convert svg files to html files
+- Guardfile to auto generate site
+
+### Remove
+- Removed embedding of svg images. Not ready for prime time yet.
+- Removed requirement on liquid gem. Default template now in erb.

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in dothtml.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Keenan Brock
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,52 @@
+# Dothtml
+
+Graphviz is a great visualization tool for coding digraphs.
+
+d3 is a great tool for dynamic html presentations.
+
+This tool:
+
+- converts graphviz dot files into html.
+- provides sample guard file
+- Rake tasks
+- hacks class attributes to embed into html file
+- embeds style into html file
+
+TODO:
+- add radio button for class association
+- embed external svg images into html file
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'dothtml'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install dothtml
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Similar Projects
+
+- https://github.com/ioquatix/graphviz
+- https://github.com/kui/octopress-graphviz
+- https://github.com/glejeune/Ruby-Graphviz
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/dothtml/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,9 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+end
+
+task :default => :test
+

data/bin/dothtml

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+
+require 'dothtml'

data/dothtml.gemspec

@@ -0,0 +1,30 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'dothtml/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "dothtml"
+  spec.version       = Dothtml::VERSION
+  spec.authors       = ["Keenan Brock"]
+  spec.email         = ["keenan@thebrocks.net"]
+  spec.summary       = %q{Make conversion of dot to html easier}
+  spec.description   = %q{Make conversion of dot to html easier}
+  spec.homepage      = "http://github.com/kbrock/dothtml"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency 'guard'
+  spec.add_dependency 'guard-rake'
+  spec.add_dependency 'nokogiri'
+  # possibly remove this
+  spec.add_dependency 'tilt'
+
+  spec.add_development_dependency "bundler", "~> 1.7"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "minitest"
+end

data/lib/dothtml/dot_helper.rb

@@ -0,0 +1,126 @@
+require "tilt"
+require 'nokogiri'
+require 'set'
+require 'open3'
+
+class DotHelper
+  def initialize(svg_contents)
+    @svg_contents = svg_contents
+  end
+
+  def parse_dom(contents)
+    Nokogiri::XML.parse(contents)
+  end
+
+  def dom
+    @dom ||= parse_dom(@svg_contents)
+  end
+
+  def extractChoices
+  end
+
+  def descriptions?
+    #dom.css("")
+  end
+
+  def extractTitle
+    dom.css("title").first.content()
+  end
+
+  # this currently has too many limitations
+  # working on making this more friendly
+  # assume unique list of filenames
+  def images
+    embedded_images = Set.new
+
+    defs = dom.create_element("def")
+
+    # assuming the images are the correct size, declare their size
+    dom.css("image").each do |img|
+      file_name = img.attributes["href"].value
+      id = file_name.split(".").first.split("/").last
+      if file_name =~ /\.svg$/ && ! embedded_images.include?(file_name)
+        src = parse_dom(File.read(file_name)).at("svg")
+        g = dom.create_element("g", id: id,
+          width: src["width"], height: src["height"])
+        defs.add_child(g)
+        src.children.each do |child|
+          g.add_child(child.clone)
+        end
+        embedded_images << file_name
+      end
+
+      img.name="use"
+      img.attributes["href"].value="##{id}"
+      #img.attributes["width"].remove
+      #img.attributes["height"].remove
+      #img.attributes["preserveAspectRatio"].remove
+    end
+    defs
+  end
+
+  def extract_id_class(old_id)
+    if old_id =~ /(.*?) ?class=["']?(.*?)['"]?$/
+      [$1, $2]
+    else
+      [old_id]
+    end
+  end
+
+  def merge_id_class(old_id, old_class)
+    new_id, new_class = extract_id_class(old_id)
+    [new_id, [old_class, new_class].compact.join(" ")]
+  end
+
+  # some nodes are of the form <div id="x1 class='other'" class="c1">
+  # assume (class= is present)
+  def fix_node_id(node)
+    new_id, new_class = merge_id_class(node["id"], node["class"])
+    node["id"] = new_id
+    node["class"] = new_class
+    node
+  end
+
+  def embed_images
+    dom.at("svg").children.before(images)
+    self
+  end
+
+  def fix_ids
+    dom.xpath("//*[contains(@id,'class=')]").each { |n| fix_node_id(n) }
+    self
+  end
+
+
+  # uses a fragment to remove extra xml declarations
+  def to_xml
+    dom.at("svg").to_xml
+  end
+
+  def write(file_name, template_name, locals)
+    File.write(file_name, Tilt.new(template_name).render(binding, locals))
+  end
+
+  def self.from_dotfile(filename)
+    new(svg_from_dot(File.read(filename)))
+  end
+
+  def self.from_dot(contents)
+    new(svg_from_dot(contents))
+  end
+
+  def self.svg_from_dot(contents)
+    Open3.popen3('dot -Tsvg') do |stdin, stdout, stderr|
+      stdout.binmode
+      stdin.print contents
+      stdin.close
+
+      err = stderr.read
+      if !err.nil? && !err.strip.empty?
+        raise "Error from graphviz:\n#{err}"
+      end
+
+      stdout.read.tap { |str| str.force_encoding 'UTF-8' }
+    end
+  end
+end

data/lib/dothtml/dot_task.rb

@@ -0,0 +1,78 @@
+require 'rake'
+require 'rake/tasklib'
+require_relative 'dot_helper'
+
+module Dothtml
+  class DotTask < Rake::TaskLib
+    attr_accessor :template
+    attr_accessor :style
+    attr_accessor :behavior
+    attr_accessor :cdn
+    attr_accessor :d3js
+
+    attr_accessor :dot_folder
+    attr_accessor :html_folder
+
+    def initialize(name = :dot)
+      templates = File.expand_path(File.join(File.dirname(__FILE__), "..", "..","templates"))
+      @name     = name
+      @style    = File.join(templates, 'style.css')
+      @behavior = File.join(templates, 'behavior.js')
+      @template = File.join(templates, 'index.html.erb')
+      self.cdn  = true
+      yield self if block_given?
+      define
+    end
+
+    def cdn=(val)
+      @d3js = val ? "//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js" : "d3.v3.js"
+    end
+
+    def define
+      desc "convert dot file into an html file"
+      task :dot_html, [:src, :target] do |t, params|
+        source = params[:src]
+        target = params[:target]
+
+        puts "#{source} -> #{target}"
+
+        doc = DotHelper.from_dotfile(source).fix_ids#.embed_images
+        doc.write target, @template,
+                  title:    doc.extractTitle,
+                  body:     doc.to_xml,
+                  choices:  doc.extractChoices,
+                  descriptions: doc.descriptions?,
+                  style:    File.read(style),
+                  behavior: File.read(behavior),
+                  d3js:     d3js
+      end
+
+      desc "convert dot file into an svg file"
+      task :dot_svg, [:src, :target] do |t, params|
+        source = params[:src]
+        target = params[:target]
+
+        puts "#{source} -> #{target}"
+
+        doc = DotHelper.from_dotfile(source).fix_ids#.embed_images
+        File.write(target, doc.to_xml)
+      end
+
+      rule '.html' => [".dot", style, template, behavior] do |t|
+        Rake::Task["dot_html"].execute(:target => t.name, :src => t.source)
+        Rake::Task["refresh_browser"].invoke
+      end
+
+      rule '.svg' => [".dot"] do |t|
+        Rake::Task["dot_svg"].execute(:target => t.name, :src => t.source)
+      end
+
+      #TODO find proper tab, offer non chrome options
+      desc "use applescript to refresh front most window in chrome"
+      task :refresh_browser do
+        puts "refreshing browser"
+        `osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'` 
+      end
+    end
+  end
+end

data/lib/dothtml/version.rb

@@ -0,0 +1,3 @@
+module Dothtml
+  VERSION = "0.0.3"
+end

data/lib/dothtml.rb

@@ -0,0 +1,5 @@
+require "dothtml/version"
+
+module Dothtml
+  # Your code goes here...
+end

data/templates/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+group "diagram" do
+  gem 'dothtml'
+end

data/templates/Guardfile

@@ -0,0 +1,6 @@
+guard 'rake', :task => :html do
+  watch(/.dot$/)
+  #watch('index.html.erb')
+  #watch('style.css')
+  #watch('behavior.js')
+end

data/templates/Rakefile

@@ -0,0 +1,23 @@
+
+# Rakefile to build dot files
+# dependencies:
+# mac 
+# graphviz to convert dot files to svg
+
+require "dothtml/dot_task"
+
+Dothtml::DotTask.new do |t|
+  #t.cdn      = true
+  #t.template = 'index.html.liquid'
+  #t.style    = 'style.css'
+  #t.behavior = 'behavior.js'
+end
+
+task :default => :html
+
+#task :html => %w(file1.html file2.html)
+task :html do
+  Dir.glob("*.dot").each do |f|
+    Rake::Task[f.sub(/\.dot$/, '.html')].invoke
+  end
+end

data/templates/behavior.js

@@ -0,0 +1,86 @@
+var current_edge = {};
+
+function markClass(id, className, enabled) {
+  if (id && className) {
+    d3.select("#"+id).classed(className, enabled);
+  }
+}
+
+function displayRelations(datum, nodeClass, enabled) {
+  if (!datum)
+    return;
+  // highlight current node (datum.id)
+  markClass(datum.id, nodeClass, enabled);
+  // highlight related nodes
+  for(var n in datum) {
+    if(n != "desc" && n != "id") {
+      markClass(datum[n], n, enabled);
+    }
+  }
+  // update node description
+  // since there are node and edge descriptions, have multiple #desc divs
+  var desc = enabled ? (datum.desc || "") : "";
+  d3.select("#desc ."+nodeClass).html(desc);
+}
+
+// store attributes in dot's tooltip attribute
+// data associated with each node will split those up
+function extractDatum(node, datum) {
+  var info = d3.select(node).select("a");
+  if (info && info[0] && info[0][0]) {
+    info = info.attr("xlink:title");
+  } else {
+    info = null;
+  }
+  if (info) {
+    var attrs = info.split("|");
+    // class:id:filename - class = (config|client|server|client_config|server_config)
+    for(var attr_num = 0; attr_num < attrs.length ; attr_num++) {
+      var attr = attrs[attr_num].trim();
+      attr_parts = attr.split(":");
+      if (attr_parts[1]) {
+        // TODO: handle duplicate attributes?
+        datum[attr_parts[0]] = attr_parts[1];
+        // TODO: add specific support for 3rd parameter (tablename/filename)
+        // if (attr_parts[2])
+        //   attr["filename"] = attr_parts[2];
+      } else {
+        datum["desc"] = attr_parts[0];
+      }
+    }
+  }
+  return datum;
+}
+
+/* work around dot not supporting attribute `class="x"` */
+function hackClass(node, datum) {
+  if (datum["class"]) {
+    d3.select(node).classed(datum["class"], true);
+    delete datum["class"];
+  }
+  return datum;
+}
+
+d3.selectAll(".node").datum(function() {
+  return hackClass(this, extractDatum(this, {"id" : this.id}));
+})
+.on('mouseover', function(datum) {
+  displayRelations(datum, 'active', true);
+})
+.on('mouseout', function(datum) {
+  displayRelations(datum, 'active', false);
+});
+
+d3.selectAll(".edge").datum(function(){
+  return extractDatum(this, {"id" : this.id});
+})
+/*  selecting an edge is difficult
+ *  instead of relying upon mouseover/mouseout, making mouseover sticky
+ */
+.on('mouseover', function(datum) {
+  if (datum.id != current_edge.id) {
+    displayRelations(current_edge, 'src-dest', false);
+    current_edge = datum;
+    displayRelations(datum, 'src-dest', true);
+  }
+});