1 files changed, 134 insertions, 0 deletions
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;
+}
+