Created
April 27, 2015 02:45
-
-
Save JoshCheek/ab43492821bfb79855f5 to your computer and use it in GitHub Desktop.
Rails D3 Routing Visualizer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require 'action_dispatch/routing' | |
| require 'json' | |
| routes = ::ActionDispatch::Routing::RouteSet.new | |
| routes.draw do | |
| namespace :admin do | |
| resources :users | |
| end | |
| resources :ducks do | |
| member do | |
| get :pond | |
| end | |
| end | |
| end | |
| $LOADED_FEATURES.grep(/dispatch/).first # => "/Users/josh/.gem/ruby/2.2.2/gems/actionpack-4.2.1/lib/action_dispatch/routing.rb" | |
| router = ActionDispatch::Journey::Router.new(routes.routes) | |
| puts router.visualizer | |
| # >> <!DOCTYPE html> | |
| # >> <html> | |
| # >> <head> | |
| # >> <title>FSM</title> | |
| # >> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" type="text/css"> | |
| # >> <style> | |
| # >> | |
| # >> 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; | |
| # >> } | |
| # >> | |
| # >> .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; } | |
| # >> | |
| # >> | |
| # >> | |
| # >> </style> | |
| # >> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/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: | |
| # >> | |
| # >> <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));"> | |
| # >> /ducks/22/edit.xml | |
| # >> </a> | |
| # >> | |
| # >> <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));"> | |
| # >> /ducks.json | |
| # >> </a> | |
| # >> | |
| # >> <a href="#" onclick="document.forms[0].elements[0].value=this.text.replace(/^\s+|\s+$/g,''); return match(this.text.replace(/^\s+|\s+$/g,''));"> | |
| # >> /admin/users/23/edit.json | |
| # >> </a> | |
| # >> | |
| # >> </p> | |
| # >> </div> | |
| # >> <div class='chart' id='chart-2'> | |
| # >> <!-- Generated by graphviz version 2.38.0 (20140413.2041) | |
| # >> --> | |
| # >> <!-- Title: nfa Pages: 1 --> | |
| # >> <svg | |
| # >> viewBox="0.00 0.00 1204.40 523.90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| # >> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 519.901)"> | |
| # >> <title>nfa</title> | |
| # >> <polygon fill="white" stroke="none" points="-4,4 -4,-519.901 1200.4,-519.901 1200.4,4 -4,4"/> | |
| # >> <!-- 3 --> | |
| # >> <g id="node1" class="node"><title>3</title> | |
| # >> <ellipse fill="none" stroke="black" cx="204.883" cy="-238.95" rx="18" ry="18"/> | |
| # >> <ellipse fill="none" stroke="black" cx="204.883" cy="-238.95" rx="22" ry="22"/> | |
| # >> <text text-anchor="middle" x="204.883" y="-234.75" font-family="Times,serif" font-size="14.00">3</text> | |
| # >> </g> | |
| # >> <!-- 5 --> | |
| # >> <g id="node23" class="node"><title>5</title> | |
| # >> <ellipse fill="none" stroke="black" cx="284.772" cy="-301.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="284.772" y="-297.75" font-family="Times,serif" font-size="14.00">5</text> | |
| # >> </g> | |
| # >> <!-- 3->5 --> | |
| # >> <g id="edge5" class="edge"><title>3->5</title> | |
| # >> <path fill="none" stroke="black" d="M222.401,-252.311C234.123,-261.792 249.958,-274.6 262.606,-284.83"/> | |
| # >> <polygon fill="black" stroke="black" points="260.407,-287.553 270.383,-291.12 264.809,-282.11 260.407,-287.553"/> | |
| # >> <text text-anchor="middle" x="246.828" y="-275.75" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 6 --> | |
| # >> <g id="node24" class="node"><title>6</title> | |
| # >> <ellipse fill="none" stroke="black" cx="284.772" cy="-238.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="284.772" y="-234.75" font-family="Times,serif" font-size="14.00">6</text> | |
| # >> </g> | |
| # >> <!-- 3->6 --> | |
| # >> <g id="edge6" class="edge"><title>3->6</title> | |
| # >> <path fill="none" stroke="black" d="M227.167,-238.95C236.199,-238.95 246.839,-238.95 256.443,-238.95"/> | |
| # >> <polygon fill="black" stroke="black" points="256.703,-242.45 266.703,-238.95 256.703,-235.45 256.703,-242.45"/> | |
| # >> <text text-anchor="middle" x="246.828" y="-241.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 7 --> | |
| # >> <g id="node2" class="node"><title>7</title> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-175.95" rx="18" ry="18"/> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-175.95" rx="22" ry="22"/> | |
| # >> <text text-anchor="middle" x="444.984" y="-171.75" font-family="Times,serif" font-size="14.00">7</text> | |
| # >> </g> | |
| # >> <!-- 11 --> | |
| # >> <g id="node25" class="node"><title>11</title> | |
| # >> <ellipse fill="none" stroke="black" cx="526.775" cy="-210.95" rx="18.7537" ry="18.7537"/> | |
| # >> <text text-anchor="middle" x="526.775" y="-206.75" font-family="Times,serif" font-size="14.00">11</text> | |
| # >> </g> | |
| # >> <!-- 7->11 --> | |
| # >> <g id="edge9" class="edge"><title>7->11</title> | |
| # >> <path fill="none" stroke="black" d="M465.299,-184.423C475.716,-188.992 488.709,-194.692 499.98,-199.635"/> | |
| # >> <polygon fill="black" stroke="black" points="498.769,-202.926 509.333,-203.738 501.581,-196.516 498.769,-202.926"/> | |
| # >> <text text-anchor="middle" x="487.88" y="-197.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 12 --> | |
| # >> <g id="node26" class="node"><title>12</title> | |
| # >> <ellipse fill="none" stroke="black" cx="526.775" cy="-150.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="526.775" y="-146.75" font-family="Times,serif" font-size="14.00">12</text> | |
| # >> </g> | |
| # >> <!-- 7->12 --> | |
| # >> <g id="edge10" class="edge"><title>7->12</title> | |
| # >> <path fill="none" stroke="black" d="M465.81,-168.705C472.204,-166.449 479.342,-164.013 485.935,-161.95 489.905,-160.708 494.119,-159.465 498.264,-158.284"/> | |
| # >> <polygon fill="black" stroke="black" points="499.546,-161.561 508.246,-155.515 497.674,-154.815 499.546,-161.561"/> | |
| # >> <text text-anchor="middle" x="487.88" y="-164.75" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 8 --> | |
| # >> <g id="node3" class="node"><title>8</title> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-364.95" rx="18" ry="18"/> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-364.95" rx="22" ry="22"/> | |
| # >> <text text-anchor="middle" x="444.984" y="-360.75" font-family="Times,serif" font-size="14.00">8</text> | |
| # >> </g> | |
| # >> <!-- 13 --> | |
| # >> <g id="node27" class="node"><title>13</title> | |
| # >> <ellipse fill="none" stroke="black" cx="526.775" cy="-428.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="526.775" y="-424.75" font-family="Times,serif" font-size="14.00">13</text> | |
| # >> </g> | |
| # >> <!-- 8->13 --> | |
| # >> <g id="edge11" class="edge"><title>8->13</title> | |
| # >> <path fill="none" stroke="black" d="M462.906,-378.523C474.764,-388.034 490.73,-400.841 503.604,-411.167"/> | |
| # >> <polygon fill="black" stroke="black" points="501.554,-414.009 511.544,-417.536 505.934,-408.549 501.554,-414.009"/> | |
| # >> <text text-anchor="middle" x="487.88" y="-401.75" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 14 --> | |
| # >> <g id="node28" class="node"><title>14</title> | |
| # >> <ellipse fill="none" stroke="black" cx="526.775" cy="-364.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="526.775" y="-360.75" font-family="Times,serif" font-size="14.00">14</text> | |
| # >> </g> | |
| # >> <!-- 8->14 --> | |
| # >> <g id="edge12" class="edge"><title>8->14</title> | |
| # >> <path fill="none" stroke="black" d="M467.367,-364.95C476.588,-364.95 487.504,-364.95 497.389,-364.95"/> | |
| # >> <polygon fill="black" stroke="black" points="497.582,-368.45 507.582,-364.95 497.582,-361.45 497.582,-368.45"/> | |
| # >> <text text-anchor="middle" x="487.88" y="-367.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 9 --> | |
| # >> <g id="node4" class="node"><title>9</title> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-301.95" rx="18" ry="18"/> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-301.95" rx="22" ry="22"/> | |
| # >> <text text-anchor="middle" x="444.984" y="-297.75" font-family="Times,serif" font-size="14.00">9</text> | |
| # >> </g> | |
| # >> <!-- 15 --> | |
| # >> <g id="node29" class="node"><title>15</title> | |
| # >> <ellipse fill="none" stroke="black" cx="526.775" cy="-301.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="526.775" y="-297.75" font-family="Times,serif" font-size="14.00">15</text> | |
| # >> </g> | |
| # >> <!-- 9->15 --> | |
| # >> <g id="edge13" class="edge"><title>9->15</title> | |
| # >> <path fill="none" stroke="black" d="M467.367,-301.95C476.588,-301.95 487.504,-301.95 497.389,-301.95"/> | |
| # >> <polygon fill="black" stroke="black" points="497.582,-305.45 507.582,-301.95 497.582,-298.45 497.582,-305.45"/> | |
| # >> <text text-anchor="middle" x="487.88" y="-304.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 10 --> | |
| # >> <g id="node5" class="node"><title>10</title> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-238.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="444.984" cy="-238.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="444.984" y="-234.75" font-family="Times,serif" font-size="14.00">10</text> | |
| # >> </g> | |
| # >> <!-- 16 --> | |
| # >> <g id="node6" class="node"><title>16</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-214.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-214.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-210.75" font-family="Times,serif" font-size="14.00">16</text> | |
| # >> </g> | |
| # >> <!-- 17 --> | |
| # >> <g id="node7" class="node"><title>17</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-150.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-150.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-146.75" font-family="Times,serif" font-size="14.00">17</text> | |
| # >> </g> | |
| # >> <!-- 23 --> | |
| # >> <g id="node30" class="node"><title>23</title> | |
| # >> <ellipse fill="none" stroke="black" cx="769.727" cy="-150.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="769.727" y="-146.75" font-family="Times,serif" font-size="14.00">23</text> | |
| # >> </g> | |
| # >> <!-- 17->23 --> | |
| # >> <g id="edge17" class="edge"><title>17->23</title> | |
| # >> <path fill="none" stroke="black" d="M711.163,-150.95C720.209,-150.95 730.773,-150.95 740.365,-150.95"/> | |
| # >> <polygon fill="black" stroke="black" points="740.648,-154.45 750.648,-150.95 740.648,-147.45 740.648,-154.45"/> | |
| # >> <text text-anchor="middle" x="730.832" y="-153.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 18 --> | |
| # >> <g id="node8" class="node"><title>18</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-86.9503" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-86.9503" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-82.7503" font-family="Times,serif" font-size="14.00">18</text> | |
| # >> </g> | |
| # >> <!-- 24 --> | |
| # >> <g id="node31" class="node"><title>24</title> | |
| # >> <ellipse fill="none" stroke="black" cx="769.727" cy="-86.9503" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="769.727" y="-82.7503" font-family="Times,serif" font-size="14.00">24</text> | |
| # >> </g> | |
| # >> <!-- 18->24 --> | |
| # >> <g id="edge18" class="edge"><title>18->24</title> | |
| # >> <path fill="none" stroke="black" d="M711.163,-86.9503C720.209,-86.9503 730.773,-86.9503 740.365,-86.9503"/> | |
| # >> <polygon fill="black" stroke="black" points="740.648,-90.4504 750.648,-86.9503 740.648,-83.4504 740.648,-90.4504"/> | |
| # >> <text text-anchor="middle" x="730.832" y="-89.7503" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 25 --> | |
| # >> <g id="node32" class="node"><title>25</title> | |
| # >> <ellipse fill="none" stroke="black" cx="769.727" cy="-26.9503" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="769.727" y="-22.7503" font-family="Times,serif" font-size="14.00">25</text> | |
| # >> </g> | |
| # >> <!-- 18->25 --> | |
| # >> <g id="edge19" class="edge"><title>18->25</title> | |
| # >> <path fill="none" stroke="black" d="M706.645,-73.6343C718.209,-64.9385 733.42,-53.5005 745.891,-44.1227"/> | |
| # >> <polygon fill="black" stroke="black" points="748.119,-46.826 754.008,-38.0186 743.912,-41.2313 748.119,-46.826"/> | |
| # >> <text text-anchor="middle" x="730.832" y="-58.7503" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 19 --> | |
| # >> <g id="node9" class="node"><title>19</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-492.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-492.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-488.75" font-family="Times,serif" font-size="14.00">19</text> | |
| # >> </g> | |
| # >> <!-- 26 --> | |
| # >> <g id="node33" class="node"><title>26</title> | |
| # >> <ellipse fill="none" stroke="black" cx="769.727" cy="-492.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="769.727" y="-488.75" font-family="Times,serif" font-size="14.00">26</text> | |
| # >> </g> | |
| # >> <!-- 19->26 --> | |
| # >> <g id="edge20" class="edge"><title>19->26</title> | |
| # >> <path fill="none" stroke="black" d="M711.163,-492.95C720.209,-492.95 730.773,-492.95 740.365,-492.95"/> | |
| # >> <polygon fill="black" stroke="black" points="740.648,-496.45 750.648,-492.95 740.648,-489.45 740.648,-496.45"/> | |
| # >> <text text-anchor="middle" x="730.832" y="-495.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 20 --> | |
| # >> <g id="node10" class="node"><title>20</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-428.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-428.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-424.75" font-family="Times,serif" font-size="14.00">20</text> | |
| # >> </g> | |
| # >> <!-- 27 --> | |
| # >> <g id="node34" class="node"><title>27</title> | |
| # >> <ellipse fill="none" stroke="black" cx="769.727" cy="-428.95" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="769.727" y="-424.75" font-family="Times,serif" font-size="14.00">27</text> | |
| # >> </g> | |
| # >> <!-- 20->27 --> | |
| # >> <g id="edge21" class="edge"><title>20->27</title> | |
| # >> <path fill="none" stroke="black" d="M711.163,-428.95C720.209,-428.95 730.773,-428.95 740.365,-428.95"/> | |
| # >> <polygon fill="black" stroke="black" points="740.648,-432.45 750.648,-428.95 740.648,-425.45 740.648,-432.45"/> | |
| # >> <text text-anchor="middle" x="730.832" y="-431.75" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 21 --> | |
| # >> <g id="node11" class="node"><title>21</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-364.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-364.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-360.75" font-family="Times,serif" font-size="14.00">21</text> | |
| # >> </g> | |
| # >> <!-- 22 --> | |
| # >> <g id="node12" class="node"><title>22</title> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-300.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="687.937" cy="-300.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="687.937" y="-296.75" font-family="Times,serif" font-size="14.00">22</text> | |
| # >> </g> | |
| # >> <!-- 28 --> | |
| # >> <g id="node13" class="node"><title>28</title> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-150.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-150.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="930.889" y="-146.75" font-family="Times,serif" font-size="14.00">28</text> | |
| # >> </g> | |
| # >> <!-- 29 --> | |
| # >> <g id="node14" class="node"><title>29</title> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-86.9503" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-86.9503" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="930.889" y="-82.7503" font-family="Times,serif" font-size="14.00">29</text> | |
| # >> </g> | |
| # >> <!-- 33 --> | |
| # >> <g id="node35" class="node"><title>33</title> | |
| # >> <ellipse fill="none" stroke="black" cx="1012.29" cy="-86.9503" rx="18.9007" ry="18.9007"/> | |
| # >> <text text-anchor="middle" x="1012.29" y="-82.7503" font-family="Times,serif" font-size="14.00">33</text> | |
| # >> </g> | |
| # >> <!-- 29->33 --> | |
| # >> <g id="edge23" class="edge"><title>29->33</title> | |
| # >> <path fill="none" stroke="black" d="M954.007,-86.9503C963.009,-86.9503 973.522,-86.9503 983.066,-86.9503"/> | |
| # >> <polygon fill="black" stroke="black" points="983.299,-90.4504 993.299,-86.9503 983.299,-83.4504 983.299,-90.4504"/> | |
| # >> <text text-anchor="middle" x="973.59" y="-89.7503" font-family="Times,serif" font-size="14.00">.</text> | |
| # >> </g> | |
| # >> <!-- 30 --> | |
| # >> <g id="node15" class="node"><title>30</title> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-22.9503" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-22.9503" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="930.889" y="-18.7503" font-family="Times,serif" font-size="14.00">30</text> | |
| # >> </g> | |
| # >> <!-- 31 --> | |
| # >> <g id="node16" class="node"><title>31</title> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-492.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-492.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="930.889" y="-488.75" font-family="Times,serif" font-size="14.00">31</text> | |
| # >> </g> | |
| # >> <!-- 32 --> | |
| # >> <g id="node17" class="node"><title>32</title> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-428.95" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="930.889" cy="-428.95" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="930.889" y="-424.75" font-family="Times,serif" font-size="14.00">32</text> | |
| # >> </g> | |
| # >> <!-- 34 --> | |
| # >> <g id="node18" class="node"><title>34</title> | |
| # >> <ellipse fill="none" stroke="black" cx="1173.45" cy="-86.9503" rx="18.9093" ry="18.9093"/> | |
| # >> <ellipse fill="none" stroke="black" cx="1173.45" cy="-86.9503" rx="22.9007" ry="22.9007"/> | |
| # >> <text text-anchor="middle" x="1173.45" y="-82.7503" font-family="Times,serif" font-size="14.00">34</text> | |
| # >> </g> | |
| # >> <!-- 0 --> | |
| # >> <g id="node19" class="node"><title>0</title> | |
| # >> <ellipse fill="none" stroke="black" cx="18" cy="-201.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="18" y="-197.75" font-family="Times,serif" font-size="14.00">0</text> | |
| # >> </g> | |
| # >> <!-- 1 --> | |
| # >> <g id="node20" class="node"><title>1</title> | |
| # >> <ellipse fill="none" stroke="black" cx="93.8896" cy="-201.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="93.8896" y="-197.75" font-family="Times,serif" font-size="14.00">1</text> | |
| # >> </g> | |
| # >> <!-- 0->1 --> | |
| # >> <g id="edge1" class="edge"><title>0->1</title> | |
| # >> <path fill="none" stroke="black" d="M36.1375,-201.95C44.9038,-201.95 55.7824,-201.95 65.6628,-201.95"/> | |
| # >> <polygon fill="black" stroke="black" points="65.8451,-205.45 75.8451,-201.95 65.8451,-198.45 65.8451,-205.45"/> | |
| # >> <text text-anchor="middle" x="55.9448" y="-204.75" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 1->3 --> | |
| # >> <g id="edge3" class="edge"><title>1->3</title> | |
| # >> <path fill="none" stroke="black" d="M111.443,-207.57C128.051,-213.208 153.993,-222.014 174.172,-228.864"/> | |
| # >> <polygon fill="black" stroke="black" points="173.24,-232.244 183.834,-232.144 175.49,-225.616 173.24,-232.244"/> | |
| # >> <text text-anchor="middle" x="147.386" y="-227.75" font-family="Times,serif" font-size="14.00">ducks</text> | |
| # >> </g> | |
| # >> <!-- 2 --> | |
| # >> <g id="node21" class="node"><title>2</title> | |
| # >> <ellipse fill="none" stroke="black" cx="204.883" cy="-178.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="204.883" y="-174.75" font-family="Times,serif" font-size="14.00">2</text> | |
| # >> </g> | |
| # >> <!-- 1->2 --> | |
| # >> <g id="edge2" class="edge"><title>1->2</title> | |
| # >> <path fill="none" stroke="black" d="M111.92,-198.357C129.357,-194.677 156.712,-188.904 177.06,-184.611"/> | |
| # >> <polygon fill="black" stroke="black" points="177.91,-188.008 186.972,-182.519 176.465,-181.159 177.91,-188.008"/> | |
| # >> <text text-anchor="middle" x="147.386" y="-197.75" font-family="Times,serif" font-size="14.00">admin</text> | |
| # >> </g> | |
| # >> <!-- 4 --> | |
| # >> <g id="node22" class="node"><title>4</title> | |
| # >> <ellipse fill="none" stroke="black" cx="284.772" cy="-176.95" rx="18" ry="18"/> | |
| # >> <text text-anchor="middle" x="284.772" y="-172.75" font-family="Times,serif" font-size="14.00">4</text> | |
| # >> </g> | |
| # >> <!-- 2->4 --> | |
| # >> <g id="edge4" class="edge"><title>2->4</title> | |
| # >> <path fill="none" stroke="black" d="M223.169,-178.506C232.951,-178.255 245.405,-177.935 256.476,-177.651"/> | |
| # >> <polygon fill="black" stroke="black" points="256.628,-181.149 266.535,-177.393 256.448,-174.151 256.628,-181.149"/> | |
| # >> <text text-anchor="middle" x="246.828" y="-180.75" font-family="Times,serif" font-size="14.00">/</text> | |
| # >> </g> | |
| # >> <!-- 4->7 --> | |
| # >> <g id="edge7" class="edge"><title>4->7</title> | |
| # >> <path fill="none" stroke="black" d="M303.005,-176.841C329.31,-176.675 379.883,-176.355 412.763,-176.148"/> | |
| # >> <polygon fill="black" stroke="black" points="412.785,-179.648 422.763,-176.084 412.741,-172.648 412.785,-179.648"/> | |
| # >> <text text-anchor="middle" x="362.403" y="-179.75" font-family="Times,serif" font-size="14.00">users</text> | |
| # >> </g> | |
| # >> <!-- 5->8 --> | |
| # >> <g id="edge24" class="edge"><title>5->8</title> | |
| # >> <path fill="none" stroke="black" d="M300.906,-310.256C306.996,-313.461 314.137,-317.046 320.772,-319.95 351.943,-333.594 388.7,-346.641 413.904,-355.139"/> | |
| # >> <polygon fill="black" stroke="black" points="413.025,-358.536 423.619,-358.383 415.242,-351.896 413.025,-358.536"/> | |
| # >> <text text-anchor="middle" x="362.403" y="-354.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 5->9 --> | |
| # >> <g id="edge8" class="edge"><title>5->9</title> | |
| # >> <path fill="none" stroke="black" d="M303.005,-301.95C329.31,-301.95 379.883,-301.95 412.763,-301.95"/> | |
| # >> <polygon fill="black" stroke="black" points="412.763,-305.45 422.763,-301.95 412.763,-298.45 412.763,-305.45"/> | |
| # >> <text text-anchor="middle" x="362.403" y="-304.75" font-family="Times,serif" font-size="14.00">new</text> | |
| # >> </g> | |
| # >> <!-- 6->10 --> | |
| # >> <g id="edge25" class="edge"><title>6->10</title> | |
| # >> <path fill="none" stroke="black" d="M303.005,-238.95C329.093,-238.95 379.051,-238.95 411.946,-238.95"/> | |
| # >> <polygon fill="black" stroke="black" points="411.975,-242.45 421.975,-238.95 411.975,-235.45 411.975,-242.45"/> | |
| # >> <text text-anchor="middle" x="362.403" y="-241.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 11->16 --> | |
| # >> <g id="edge26" class="edge"><title>11->16</title> | |
| # >> <path fill="none" stroke="black" d="M545.416,-211.394C571.781,-212.056 621.883,-213.315 654.846,-214.144"/> | |
| # >> <polygon fill="black" stroke="black" points="654.809,-217.644 664.894,-214.396 654.985,-210.646 654.809,-217.644"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-216.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 12->17 --> | |
| # >> <g id="edge14" class="edge"><title>12->17</title> | |
| # >> <path fill="none" stroke="black" d="M546.033,-150.95C572.443,-150.95 621.715,-150.95 654.426,-150.95"/> | |
| # >> <polygon fill="black" stroke="black" points="654.827,-154.45 664.827,-150.95 654.827,-147.45 654.827,-154.45"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-153.75" font-family="Times,serif" font-size="14.00">new</text> | |
| # >> </g> | |
| # >> <!-- 12->18 --> | |
| # >> <g id="edge27" class="edge"><title>12->18</title> | |
| # >> <path fill="none" stroke="black" d="M544.065,-142.332C550.165,-139.228 557.198,-135.793 563.725,-132.95 594.635,-119.488 630.878,-106.252 656.019,-97.4601"/> | |
| # >> <polygon fill="black" stroke="black" points="657.435,-100.674 665.736,-94.0902 655.141,-94.0603 657.435,-100.674"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-135.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 13->19 --> | |
| # >> <g id="edge15" class="edge"><title>13->19</title> | |
| # >> <path fill="none" stroke="black" d="M544.065,-437.568C550.165,-440.672 557.198,-444.107 563.725,-446.95 594.635,-460.413 630.878,-473.648 656.019,-482.44"/> | |
| # >> <polygon fill="black" stroke="black" points="655.141,-485.84 665.736,-485.81 657.435,-479.227 655.141,-485.84"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-480.75" font-family="Times,serif" font-size="14.00">pond</text> | |
| # >> </g> | |
| # >> <!-- 13->20 --> | |
| # >> <g id="edge16" class="edge"><title>13->20</title> | |
| # >> <path fill="none" stroke="black" d="M546.033,-428.95C572.443,-428.95 621.715,-428.95 654.426,-428.95"/> | |
| # >> <polygon fill="black" stroke="black" points="654.827,-432.45 664.827,-428.95 654.827,-425.45 654.827,-432.45"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-431.75" font-family="Times,serif" font-size="14.00">edit</text> | |
| # >> </g> | |
| # >> <!-- 14->21 --> | |
| # >> <g id="edge28" class="edge"><title>14->21</title> | |
| # >> <path fill="none" stroke="black" d="M546.033,-364.95C572.443,-364.95 621.715,-364.95 654.426,-364.95"/> | |
| # >> <polygon fill="black" stroke="black" points="654.827,-368.45 664.827,-364.95 654.827,-361.45 654.827,-368.45"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-367.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 15->22 --> | |
| # >> <g id="edge29" class="edge"><title>15->22</title> | |
| # >> <path fill="none" stroke="black" d="M546.033,-301.836C572.443,-301.67 621.715,-301.36 654.426,-301.155"/> | |
| # >> <polygon fill="black" stroke="black" points="654.849,-304.652 664.827,-301.089 654.805,-297.652 654.849,-304.652"/> | |
| # >> <text text-anchor="middle" x="605.356" y="-304.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 23->28 --> | |
| # >> <g id="edge30" class="edge"><title>23->28</title> | |
| # >> <path fill="none" stroke="black" d="M788.985,-150.95C815.395,-150.95 864.668,-150.95 897.378,-150.95"/> | |
| # >> <polygon fill="black" stroke="black" points="897.78,-154.45 907.78,-150.95 897.78,-147.45 897.78,-154.45"/> | |
| # >> <text text-anchor="middle" x="848.308" y="-153.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 24->29 --> | |
| # >> <g id="edge22" class="edge"><title>24->29</title> | |
| # >> <path fill="none" stroke="black" d="M788.985,-86.9503C815.395,-86.9503 864.668,-86.9503 897.378,-86.9503"/> | |
| # >> <polygon fill="black" stroke="black" points="897.78,-90.4504 907.78,-86.9503 897.78,-83.4504 897.78,-90.4504"/> | |
| # >> <text text-anchor="middle" x="848.308" y="-89.7503" font-family="Times,serif" font-size="14.00">edit</text> | |
| # >> </g> | |
| # >> <!-- 25->30 --> | |
| # >> <g id="edge31" class="edge"><title>25->30</title> | |
| # >> <path fill="none" stroke="black" d="M788.676,-26.4992C815.159,-25.8337 865.104,-24.5785 897.937,-23.7533"/> | |
| # >> <polygon fill="black" stroke="black" points="898.036,-27.252 907.945,-23.5018 897.86,-20.2542 898.036,-27.252"/> | |
| # >> <text text-anchor="middle" x="848.308" y="-29.7503" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 26->31 --> | |
| # >> <g id="edge32" class="edge"><title>26->31</title> | |
| # >> <path fill="none" stroke="black" d="M788.985,-492.95C815.395,-492.95 864.668,-492.95 897.378,-492.95"/> | |
| # >> <polygon fill="black" stroke="black" points="897.78,-496.45 907.78,-492.95 897.78,-489.45 897.78,-496.45"/> | |
| # >> <text text-anchor="middle" x="848.308" y="-495.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 27->32 --> | |
| # >> <g id="edge33" class="edge"><title>27->32</title> | |
| # >> <path fill="none" stroke="black" d="M788.985,-428.95C815.395,-428.95 864.668,-428.95 897.378,-428.95"/> | |
| # >> <polygon fill="black" stroke="black" points="897.78,-432.45 907.78,-428.95 897.78,-425.45 897.78,-432.45"/> | |
| # >> <text text-anchor="middle" x="848.308" y="-431.75" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> <!-- 33->34 --> | |
| # >> <g id="edge34" class="edge"><title>33->34</title> | |
| # >> <path fill="none" stroke="black" d="M1031.55,-86.9503C1057.96,-86.9503 1107.23,-86.9503 1139.94,-86.9503"/> | |
| # >> <polygon fill="black" stroke="black" points="1140.34,-90.4504 1150.34,-86.9503 1140.34,-83.4504 1140.34,-90.4504"/> | |
| # >> <text text-anchor="middle" x="1090.87" y="-89.7503" font-family="Times,serif" font-size="14.00">(?-mix:[^./?]+)</text> | |
| # >> </g> | |
| # >> </g> | |
| # >> </svg> | |
| # >> | |
| # >> </div> | |
| # >> <div class="instruction"> | |
| # >> <p> | |
| # >> This is a FSM for a system that has the following routes: | |
| # >> </p> | |
| # >> <ul> | |
| # >> | |
| # >> <li>/admin/users(.:format)</li> | |
| # >> | |
| # >> <li>/admin/users/new(.:format)</li> | |
| # >> | |
| # >> <li>/admin/users/:id/edit(.:format)</li> | |
| # >> | |
| # >> <li>/admin/users/:id(.:format)</li> | |
| # >> | |
| # >> <li>/ducks/:id/pond(.:format)</li> | |
| # >> | |
| # >> <li>/ducks(.:format)</li> | |
| # >> | |
| # >> <li>/ducks/new(.:format)</li> | |
| # >> | |
| # >> <li>/ducks/:id/edit(.:format)</li> | |
| # >> | |
| # >> <li>/ducks/:id(.:format)</li> | |
| # >> | |
| # >> </ul> | |
| # >> </div> | |
| # >> </div> | |
| # >> | |
| # >> <script>function tt() { return "#<ActionDispatch::Journey::GTG::TransitionTable:0x007f9d2c90d6b8>"; }</script> | |
| # >> | |
| # >> <script>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; | |
| # >> } | |
| # >> | |
| # >> </script> | |
| # >> | |
| # >> </body> | |
| # >> </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I get a
NoMethodErrorfor methodast- presumably this was introduced in 4.2.1?