Integrate Journey into Action Dispatch

Move the Journey code underneath the ActionDispatch namespace so
that we don't pollute the global namespace with names that may
be used for models.

Fixes rails/journey#49.

3 files changed, 220 insertions, 0 deletions

diff --git a/actionpack/lib/action_dispatch/journey/visualizer/fsm.css b/actionpack/lib/action_dispatch/journey/visualizer/fsm.css
new file mode 100644
index 0000000000..50caebaa18
--- /dev/null
+++ b/actionpack/lib/action_dispatch/journey/visualizer/fsm.css
@@ -0,0 +1,34 @@
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
+  margin: 0;
+}
+
+h1 {
+  font-size: 2.0em; font-weight: bold; text-align: center;
+  color: white; background-color: black;
+  padding: 5px 0;
+  margin: 0 0 20px;
+}
+
+h2 {
+  text-align: center;
+  display: none;
+  font-size: 0.5em;
+}
+
+div#chart-2 {
+  height: 350px;
+}
+
+.clearfix {display: inline-block; }
+.input { overflow: show;}
+.instruction { color: #666; padding: 0 30px 20px; font-size: 0.9em}
+.instruction p { padding: 0 0 5px; }
+.instruction li { padding: 0 10px 5px; }
+
+.form { background: #EEE; padding: 20px 30px; border-radius: 5px; margin-left: auto; margin-right: auto; width: 500px; margin-bottom: 20px}
+.form p, .form form { text-align: center }
+.form form {padding: 0 10px 5px; }
+.form .fun_routes { font-size: 0.9em;}
+.form .fun_routes a { margin: 0 5px 0 0; }
+
diff --git a/actionpack/lib/action_dispatch/journey/visualizer/fsm.js b/actionpack/lib/action_dispatch/journey/visualizer/fsm.js
new file mode 100644
index 0000000000..d9bcaef928
--- /dev/null
+++ b/actionpack/lib/action_dispatch/journey/visualizer/fsm.js
@@ -0,0 +1,134 @@
+function tokenize(input, callback) {
+  while(input.length > 0) {
+    callback(input.match(/^[\/\.\?]|[^\/\.\?]+/)[0]);
+    input = input.replace(/^[\/\.\?]|[^\/\.\?]+/, '');
+  }
+}
+
+var graph = d3.select("#chart-2 svg");
+var svg_edges = {};
+var svg_nodes = {};
+
+graph.selectAll("g.edge").each(function() {
+  var node  = d3.select(this);
+  var index = node.select("title").text().split("->");
+  var left  = parseInt(index[0]);
+  var right = parseInt(index[1]);
+
+  if(!svg_edges[left]) { svg_edges[left] = {} }
+  svg_edges[left][right] = node;
+});
+
+graph.selectAll("g.node").each(function() {
+  var node  = d3.select(this);
+  var index = parseInt(node.select("title").text());
+  svg_nodes[index] = node;
+});
+
+function reset_graph() {
+  for(var key in svg_edges) {
+    for(var mkey in svg_edges[key]) {
+      var node = svg_edges[key][mkey];
+      var path = node.select("path");
+      var arrow = node.select("polygon");
+      path.style("stroke", "black");
+      arrow.style("stroke", "black").style("fill", "black");
+    }
+  }
+
+  for(var key in svg_nodes) {
+    var node = svg_nodes[key];
+    node.select('ellipse').style("fill", "white");
+    node.select('polygon').style("fill", "white");
+  }
+  return false;
+}
+
+function highlight_edge(from, to) {
+  var node = svg_edges[from][to];
+  var path = node.select("path");
+  var arrow = node.select("polygon");
+
+  path
+    .transition().duration(500)
+    .style("stroke", "green");
+
+  arrow
+    .transition().duration(500)
+    .style("stroke", "green").style("fill", "green");
+}
+
+function highlight_state(index, color) {
+  if(!color) { color = "green"; }
+
+  svg_nodes[index].select('ellipse')
+    .style("fill", "white")
+    .transition().duration(500)
+    .style("fill", color);
+}
+
+function highlight_finish(index) {
+  svg_nodes[index].select('polygon')
+    .style("fill", "while")
+    .transition().duration(500)
+    .style("fill", "blue");
+}
+
+function match(input) {
+  reset_graph();
+  var table         = tt();
+  var states        = [0];
+  var regexp_states = table['regexp_states'];
+  var string_states = table['string_states'];
+  var accepting     = table['accepting'];
+
+  highlight_state(0);
+
+  tokenize(input, function(token) {
+    var new_states = [];
+    for(var key in states) {
+      var state = states[key];
+
+      if(string_states[state] && string_states[state][token]) {
+        var new_state = string_states[state][token];
+        highlight_edge(state, new_state);
+        highlight_state(new_state);
+        new_states.push(new_state);
+      }
+
+      if(regexp_states[state]) {
+        for(var key in regexp_states[state]) {
+          var re = new RegExp("^" + key + "$");
+          if(re.test(token)) {
+            var new_state = regexp_states[state][key];
+            highlight_edge(state, new_state);
+            highlight_state(new_state);
+            new_states.push(new_state);
+          }
+        }
+      }
+    }
+
+    if(new_states.length == 0) {
+      return;
+    }
+    states = new_states;
+  });
+
+  for(var key in states) {
+    var state = states[key];
+    if(accepting[state]) {
+      for(var mkey in svg_edges[state]) {
+        if(!regexp_states[mkey] && !string_states[mkey]) {
+          highlight_edge(state, mkey);
+          highlight_finish(mkey);
+        }
+      }
+    } else {
+      highlight_state(state, "red");
+    }
+  }
+
+  return false;
+}
+
diff --git a/actionpack/lib/action_dispatch/journey/visualizer/index.html.erb b/actionpack/lib/action_dispatch/journey/visualizer/index.html.erb
new file mode 100644
index 0000000000..6aff10956a
--- /dev/null
+++ b/actionpack/lib/action_dispatch/journey/visualizer/index.html.erb
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= title %></title>
+    <link rel="stylesheet" href="https://raw.github.com/gist/1706081/af944401f75ea20515a02ddb3fb43d23ecb8c662/reset.css" type="text/css">
+    <style>
+      <% stylesheets.each do |style| %>
+        <%= style %>
+      <% end %>
+    </style>
+    <script src="https://raw.github.com/gist/1706081/df464722a05c3c2bec450b7b5c8240d9c31fa52d/d3.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="wrapper">
+      <h1>Routes FSM with NFA simulation</h1>
+      <div class="instruction form">
+        <p>
+        Type a route in to the box and click "simulate".
+        </p>
+        <form onsubmit="return match(this.route.value);">
+          <input type="text" size="30" name="route" value="/articles/new" />
+          <button>simulate</button>
+          <input type="reset" value="reset" onclick="return reset_graph();"/>
+        </form>
+        <p class="fun_routes">
+          Some fun routes to try:
+          <% fun_routes.each do |path| %>
+             <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));">
+               <%= path %>
+             </a>
+          <% end %>
+        </p>
+      </div>
+      <div class='chart' id='chart-2'>
+        <%= svg %>
+      </div>
+      <div class="instruction">
+        <p>
+        This is a FSM for a system that has the following routes:
+        </p>
+        <ul>
+          <% paths.each do |route| %>
+            <li><%= route %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+    <% javascripts.each do |js| %>
+      <script><%= js %></script>
+    <% end %>
+  </body>
+</html>