rails--rails/actionpack/lib/action_dispatch/journey/visualizer/fsm.js

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;
}