├── CNAME
├── .gitignore
├── requirements-dev.txt
├── python
    ├── pydot-1.4.1-py2.py3-none-any.whl
    ├── rcviz_test.py
    └── rcviz.py
├── package.json
├── .github
    ├── workflows
    │   ├── javascript.yaml
    │   └── python.yaml
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    ├── pull_request_template.md
    └── code_of_conduct.md
├── pyproject.toml
├── README.md
├── old
    ├── hanoi.html
    ├── vis.css
    ├── count_stair_ways4.json
    ├── find_zero_binary.json
    ├── tree.html
    ├── index.html
    ├── fib5.json
    ├── simple_tree.json
    ├── fib4.json
    ├── make_gasket1.json
    ├── count_k.json
    ├── tree.js
    ├── num_partitions63.json
    ├── vis.js
    └── make_gasket2.json
├── css
    └── recursive_tree_viz.css
├── javascript
    └── recursive_tree_viz.js
├── index.html
├── eslint.config.mjs
├── rendered
    ├── sprout_leaves1.html
    ├── sprout_leaves2.html
    ├── fact3.html
    ├── fib5.html
    └── virfib5.html
└── LICENSE


/CNAME:
--------------------------------------------------------------------------------
1 | www.recursionvisualizer.com


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | __pycache__
3 | .coverage
4 | venv/
5 | .venv/
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/requirements-dev.txt:
--------------------------------------------------------------------------------
1 | pydot
2 | pytest==7.1.2
3 | black==22.3.0
4 | flake8==4.0.1
5 | coverage==6.4.1
6 | pytest-cov==3.0.0
7 | 


--------------------------------------------------------------------------------
/python/pydot-1.4.1-py2.py3-none-any.whl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pamelafox/recursive-visualizations/HEAD/python/pydot-1.4.1-py2.py3-none-any.whl


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "devDependencies": {
3 |     "eslint": "^9.8.0",
4 |     "@eslint/eslintrc": "^3.1.0",
5 |     "@eslint/js": "^9.8.0",
6 |     "globals": "^15.9.0"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.github/workflows/javascript.yaml:
--------------------------------------------------------------------------------
 1 | name: Javascript checks
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v3
11 |       - name: Install ESLint
12 |         run: npm install
13 |       - name: Run ESLint
14 |         run: npx eslint javascript/


--------------------------------------------------------------------------------
/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [tool.black]
 2 | line-length = 100
 3 | target-version = ['py39']
 4 | 
 5 | [tool.pytest.ini_options]
 6 | addopts = "-ra --cov"
 7 | testpaths = [
 8 |     "python"
 9 | ]
10 | pythonpath = ['python']
11 | 
12 | [tool.coverage.paths]
13 | source = ["python"]
14 | 
15 | [tool.coverage.report]
16 | show_missing = true
17 | fail_under = 100
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # recursive-visualizations
 2 | 
 3 | A way to visualize the call graph of recursive functions.
 4 | 
 5 | Uses Pyodide to run rcviz.py and then a WASM PyDot/GraphViz port to build an SVG graph.
 6 | Finally, some JavaScript adds a slider for stepping through the calls.
 7 | 
 8 | To run locally:
 9 | 
10 | ```python3 -m http.server```
11 | 
12 | To run Python tests:
13 | 
14 | ```pytest```
15 | 


--------------------------------------------------------------------------------
/old/hanoi.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 | <title>Towers of Hanoi</title>
 5 | </head>
 6 | <body>
 7 | 
 8 | <p>You can move a disk by clicking it, dragging it over to the desired peg, and releasing it.</p>
 9 | 
10 | <script src="https://www.khanacademy.org/computer-programming/towers-of-hanoi-interactive-visualization/4772835774169088/embed.js?editor=no&buttons=no&author=no&embed=yes"></script>
11 | 
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/old/vis.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | .node {
 6 |     background: white;
 7 |     border: 2px solid #ccc;
 8 |     color: #757575;
 9 |     border-radius: 120px;
10 |     position: absolute;
11 |     left: 0;
12 |     width: 50px;
13 |     height: 25px;
14 |     text-align: center;
15 |     font-family: monospace;
16 |     padding: 10px 10px 0px 10px;
17 |     z-index: 1;
18 | }
19 | 
20 | 
21 | .node-activated {
22 |     color: #12bf96;
23 |     border: 2px solid #12bf96;
24 | }
25 | 
26 | .jtk-connector {
27 |     z-index: 0;
28 | 
29 | }
30 | 
31 | .jtk-connector-activated {
32 |     z-index: 0;
33 |     color: turquoise;
34 | }
35 | 
36 | input[type=range] {
37 |     vertical-align:middle;
38 | }
39 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | ### High-level description of change
 2 | 
 3 | 
 4 | ### Have you added tests to cover this new/updated code?
 5 | 
 6 | _REPLACE THIS: Remember to check the code coverage report for 100% coverage of your new code, or note if it's not needed_
 7 | 
 8 | ### Risks involved
 9 | 
10 | _REPLACE THIS: Note anything that could go wrong. Good opportunity to think through edge cases_
11 | 
12 | ### Are there any dependencies or blockers for merging this?
13 | 
14 | _REPLACE THIS: Note any branches that must be merged elsewhere, e.g._
15 | 
16 | ### How can we immediately test that it works?
17 | 
18 | _REPLACE THIS: Describe how we can check this change works from end to end, like test function code and a screenshot of expected output._
19 | 


--------------------------------------------------------------------------------
/old/count_stair_ways4.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label": "count_stair_ways(4)",
 3 |   "id": "0x7fdf3548a240->0x7fdf35061440",
 4 |   "children": [
 5 |     {
 6 |       "label": "count_stair_ways(3)",
 7 |       "id": "0x7fdf3530d3d0->0x7fdf3548a240->0x7fdf35061440",
 8 |       "children": [
 9 |         {
10 |           "label": "count_stair_ways(2)",
11 |           "id": "0x7fdf335cddc0->0x7fdf3530d3d0->0x7fdf3548a240->0x7fdf35061440",
12 |           "children": []
13 |         },
14 |         {
15 |           "label": "count_stair_ways(1)",
16 |           "id": "0x7fdf335cddc0->0x7fdf3530d3d0->0x7fdf3548a240->0x7fdf35061440",
17 |           "children": []
18 |         }
19 |       ]
20 |     },
21 |     {
22 |       "label": "count_stair_ways(2)",
23 |       "id": "0x7fdf335cddc0->0x7fdf3548a240->0x7fdf35061440",
24 |       "children": []
25 |     }
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/css/recursive_tree_viz.css:
--------------------------------------------------------------------------------
 1 | .graph .node, .graph .edge, .graph .node text {
 2 |     visibility: hidden;
 3 | }
 4 | .graph .node.activated text:first-of-type {
 5 |     visibility: visible;
 6 | }
 7 | .graph .node.activated path {
 8 |     visibility: visible;
 9 | }
10 | .graph .node text.activated {
11 |     visibility: visible;
12 | }
13 | .graph .edge.activated {
14 |     visibility: visible;
15 | }
16 | .svg-controls {
17 |     width: 600px;
18 |     display: grid;
19 |     grid-template-rows: 1fr;
20 |     grid-template-columns: 100px 1fr 100px;
21 |     grid-gap: 8px;
22 |     background: #80808070;
23 | }
24 | .svg-controls button:first-of-type {
25 |     grid-row: 1;
26 |     grid-column: 1;
27 | }
28 | .svg-controls input {
29 |     grid-row: 1;
30 |     grid-column: 2;
31 | }
32 | .svg-controls button:last-of-type {
33 |     grid-row: 1;
34 |     grid-column: 3;
35 | }


--------------------------------------------------------------------------------
/old/find_zero_binary.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label": "find_zero(1, 20, <function <lambda> at 0x7fb20154bee0>)",
 3 |   "id": "0x7fb20148a240->0x7fb1fff61440",
 4 |   "children": [
 5 |     {
 6 |       "label": "find_zero(1, 9, <function <lambda> at 0x7fb20154bee0>)",
 7 |       "id": "0x7fb201515e40->0x7fb20148a240->0x7fb1fff61440",
 8 |       "children": [
 9 |         {
10 |           "label": "find_zero(1, 4, <function <lambda> at 0x7fb20154bee0>)",
11 |           "id": "0x7fb201556200->0x7fb201515e40->0x7fb20148a240->0x7fb1fff61440",
12 |           "children": [
13 |             {
14 |               "label": "find_zero(3, 4, <function <lambda> at 0x7fb20154bee0>)",
15 |               "id": "0x7fb201556040->0x7fb201556200->0x7fb201515e40->0x7fb20148a240->0x7fb1fff61440",
16 |               "children": []
17 |             }
18 |           ]
19 |         }
20 |       ]
21 |     }
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/old/tree.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Tree visualization</title>
 7 | </head>
 8 | <body>
 9 | 
10 |   <div id="tree"></div>
11 |   <link rel="stylesheet" type="text/css" href="vis.css">
12 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.5/js/jsplumb.min.js"></script>
13 |   <script src="https://unpkg.com/@popperjs/core@2"></script>
14 |   <script src="https://unpkg.com/tippy.js@6"></script>
15 |   <script src="tree.js"></script>  
16 |   <script>
17 | var searchParams = new URLSearchParams(window.location.search);
18 | var filename = searchParams.get("filename") || "simple_tree.json";
19 | var width = parseInt(searchParams.get("width"), 10) || document.body.clientWidth; 
20 | 
21 | fetch(filename)
22 |   .then(response => response.json())
23 |   .then(data => {
24 |     var treeViz = new TreeViz(document.getElementById("tree"), data, {width: width});
25 |     treeViz.draw();
26 | });
27 |   </script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/old/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Recursive tree visualization</title>
 7 | </head>
 8 | <body>
 9 | 
10 |   <div id="tree"></div>
11 |   <link rel="stylesheet" type="text/css" href="vis.css">
12 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.5/js/jsplumb.min.js"></script>
13 |   <script src="vis.js"></script>  
14 |   <script>
15 | var searchParams = new URLSearchParams(window.location.search);
16 | var filename = searchParams.get("filename") || "fib5.json";
17 | var width = parseInt(searchParams.get("width"), 10) || document.body.clientWidth; 
18 | var startStep = parseInt(searchParams.get("start"), 10);
19 | var funcName = searchParams.get("func");
20 | 
21 | fetch(filename)
22 |   .then(response => response.json())
23 |   .then(data => {
24 |     var treeViz = new RecursiveTreeViz(document.getElementById("tree"), data, {width: width, startStep: startStep, funcName: funcName});
25 |     treeViz.draw();
26 | });
27 |   </script>
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/.github/workflows/python.yaml:
--------------------------------------------------------------------------------
 1 | name: Python checks
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v3
11 |       - name: Set up Python 3
12 |         uses: actions/setup-python@v3
13 |         with:
14 |           python-version: 3.9
15 |       - name: Install dependencies
16 |         run: |
17 |           python -m pip install --upgrade pip
18 |           pip install -r requirements-dev.txt 
19 |       - name: Lint with flake8
20 |         run: |
21 |           # stop the build if there are Python syntax errors or undefined names
22 |           flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
23 |           # exit-zero treats all errors as warnings. The GitHub editor is 127 chars wide
24 |           flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
25 |       - name: Check formatting with black
26 |         uses: psf/black@stable
27 |         with:
28 |           src: "python/"
29 |           options: "--check --verbose"
30 |       - name: Run unit tests
31 |         run: |
32 |           pytest
33 | 


--------------------------------------------------------------------------------
/old/fib5.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label":"fib(5)",
 3 |   "children":[
 4 |     {
 5 |       "label":"fib(4)",
 6 |       "children":[
 7 |         {
 8 |           "label":"fib(3)",
 9 |           "children":[
10 |             {
11 |               "label":"fib(2)",
12 |               "children":[
13 |                 {
14 |                   "label":"fib(1)"
15 |                 },
16 |                 {
17 |                   "label":"fib(0)"
18 |                 }
19 |               ]
20 |             },
21 |             {
22 |               "label":"fib(1)"
23 |             }
24 |           ]
25 |         },
26 |         {
27 |           "label":"fib(2)",
28 |           "children":[
29 |             {
30 |               "label":"fib(1)"
31 |             },
32 |             {
33 |               "label":"fib(0)"
34 |             }
35 |           ]
36 |         }
37 |       ]
38 |     },
39 |     {
40 |       "label":"fib(3)",
41 |       "children":[
42 |         {
43 |           "label":"fib(2)",
44 |           "children":[
45 |             {
46 |               "label":"fib(1)"
47 |             },
48 |             {
49 |               "label":"fib(0)"
50 |             }
51 |           ]
52 |         },
53 |         {
54 |           "label":"fib(1)"
55 |         }
56 |       ]
57 |     }
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/old/simple_tree.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label":"20",
 3 |   "id":"0x7ff37c8579f0->0x7ff37c861440",
 4 |   "children":[
 5 |     {
 6 |       "label":"12",
 7 |       "id":"0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
 8 |       "children":[
 9 |         {
10 |           "label":"9",
11 |           "id":"0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
12 |           "children":[
13 |             {
14 |               "label":"7",
15 |               "id":"0x7ff37c976200->0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
16 |               "children":[
17 |                 
18 |               ]
19 |             },
20 |             {
21 |               "label":"2",
22 |               "id":"0x7ff37c976200->0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
23 |               "children":[
24 |                 
25 |               ]
26 |             }
27 |           ]
28 |         },
29 |         {
30 |           "label":"3",
31 |           "id":"0x7ff37c976200->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
32 |           "children":[
33 |             
34 |           ]
35 |         }
36 |       ]
37 |     },
38 |     {
39 |       "label":"8",
40 |       "id":"0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
41 |       "children":[
42 |         {
43 |           "label":"4",
44 |           "id":"0x7ff37c960c10->0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
45 |           "children":[
46 |             
47 |           ]
48 |         },
49 |         {
50 |           "label":"4",
51 |           "id":"0x7ff37c960c10->0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
52 |           "children":[
53 |             
54 |           ]
55 |         }
56 |       ]
57 |     }
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/old/fib4.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label":"fib(4)",
 3 |   "id":"0x7ff37c8579f0->0x7ff37c861440",
 4 |   "children":[
 5 |     {
 6 |       "label":"fib(3)",
 7 |       "id":"0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
 8 |       "children":[
 9 |         {
10 |           "label":"fib(2)",
11 |           "id":"0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
12 |           "children":[
13 |             {
14 |               "label":"fib(1)",
15 |               "id":"0x7ff37c976200->0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
16 |               "children":[
17 |                 
18 |               ]
19 |             },
20 |             {
21 |               "label":"fib(0)",
22 |               "id":"0x7ff37c976200->0x7ff37c9c31f0->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
23 |               "children":[
24 |                 
25 |               ]
26 |             }
27 |           ]
28 |         },
29 |         {
30 |           "label":"fib(1)",
31 |           "id":"0x7ff37c976200->0x7ff37c960c10->0x7ff37c8579f0->0x7ff37c861440",
32 |           "children":[
33 |             
34 |           ]
35 |         }
36 |       ]
37 |     },
38 |     {
39 |       "label":"fib(2)",
40 |       "id":"0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
41 |       "children":[
42 |         {
43 |           "label":"fib(1)",
44 |           "id":"0x7ff37c960c10->0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
45 |           "children":[
46 |             
47 |           ]
48 |         },
49 |         {
50 |           "label":"fib(0)",
51 |           "id":"0x7ff37c960c10->0x7ff37c976200->0x7ff37c8579f0->0x7ff37c861440",
52 |           "children":[
53 |             
54 |           ]
55 |         }
56 |       ]
57 |     }
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/old/make_gasket1.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label": "mg(1, 0, 0, 300)",
 3 |   "id": "0x7fc56f68a240->0x7fc56f459440",
 4 |   "children": [
 5 |     {
 6 |       "label": "mg(0, 0, 0, 150)",
 7 |       "id": "0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
 8 |       "children": [
 9 |         {
10 |           "label": "t(0, 0, 150)",
11 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
12 |           "children": []
13 |         },
14 |         {
15 |           "label": "t(150, 0, 150)",
16 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
17 |           "children": []
18 |         },
19 |         {
20 |           "label": "t(75, 130, 150)",
21 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
22 |           "children": []
23 |         }
24 |       ]
25 |     },
26 |     {
27 |       "label": "mg(0, 150, 0, 150)",
28 |       "id": "0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
29 |       "children": [
30 |         {
31 |           "label": "t(150, 0, 150)",
32 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
33 |           "children": []
34 |         },
35 |         {
36 |           "label": "t(75, 130, 150)",
37 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
38 |           "children": []
39 |         }
40 |       ]
41 |     },
42 |     {
43 |       "label": "mg(0, 75, 130, 150)",
44 |       "id": "0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
45 |       "children": [
46 |         {
47 |           "label": "t(75, 130, 150)",
48 |           "id": "0x7fc56f73ba00->0x7fc56f00efb0->0x7fc56f68a240->0x7fc56f459440",
49 |           "children": []
50 |         }
51 |       ]
52 |     }
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/old/count_k.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "label": "count_k(3, 3)",
 3 |   "id": "0x7f9827c8a240->0x7f9825f61440",
 4 |   "children": [
 5 |     {
 6 |       "label": "count_k(2, 3)",
 7 |       "id": "0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
 8 |       "children": [
 9 |         {
10 |           "label": "count_k(1, 3)",
11 |           "id": "0x7f9827f3ce40->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
12 |           "children": [
13 |             {
14 |               "label": "count_k(0, 3)",
15 |               "id": "0x7f9827f3cc80->0x7f9827f3ce40->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
16 |               "children": []
17 |             },
18 |             {
19 |               "label": "count_k(-1, 3)",
20 |               "id": "0x7f9827f3cc80->0x7f9827f3ce40->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
21 |               "children": []
22 |             },
23 |             {
24 |               "label": "count_k(-2, 3)",
25 |               "id": "0x7f9827f3cc80->0x7f9827f3ce40->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
26 |               "children": []
27 |             }
28 |           ]
29 |         },
30 |         {
31 |           "label": "count_k(0, 3)",
32 |           "id": "0x7f9827f3cc80->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
33 |           "children": []
34 |         },
35 |         {
36 |           "label": "count_k(-1, 3)",
37 |           "id": "0x7f9827f3cc80->0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
38 |           "children": []
39 |         }
40 |       ]
41 |     },
42 |     {
43 |       "label": "count_k(1, 3)",
44 |       "id": "0x7f9827f3cc80->0x7f9827c8a240->0x7f9825f61440",
45 |       "children": [
46 |         {
47 |           "label": "count_k(0, 3)",
48 |           "id": "0x7f9825c1db30->0x7f9827f3cc80->0x7f9827c8a240->0x7f9825f61440",
49 |           "children": []
50 |         },
51 |         {
52 |           "label": "count_k(-1, 3)",
53 |           "id": "0x7f9825c1db30->0x7f9827f3cc80->0x7f9827c8a240->0x7f9825f61440",
54 |           "children": []
55 |         },
56 |         {
57 |           "label": "count_k(-2, 3)",
58 |           "id": "0x7f9825c1db30->0x7f9827f3cc80->0x7f9827c8a240->0x7f9825f61440",
59 |           "children": []
60 |         }
61 |       ]
62 |     },
63 |     {
64 |       "label": "count_k(0, 3)",
65 |       "id": "0x7f9825c1db30->0x7f9827c8a240->0x7f9825f61440",
66 |       "children": []
67 |     }
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/old/tree.js:
--------------------------------------------------------------------------------
 1 | 
 2 | class TreeViz {
 3 |   
 4 |   constructor(div, tree, options) {
 5 |     this.div = div;
 6 |     this.tree = tree;
 7 |     options = options || {};
 8 |     this.width = options.width;
 9 |     this.nodeWidth = 74;
10 |     this.plumber = jsPlumb.getInstance();
11 |     this.maxTop = 0;
12 |     this.nodes = [];
13 |   }
14 |   
15 |   draw() {
16 |     this.drawNode(this.tree, 0, this.width/2);
17 |   }
18 |   
19 |   drawNode(nodeInfo, depth, x, parentDiv) {
20 |     var div = document.createElement("div");
21 |     let label = nodeInfo.label;
22 |     div.innerText = label;
23 |     div.className = "node node-activated";
24 |     var y = depth * 70;
25 |     div.style.top = y + "px";
26 |     this.maxTop = Math.max(y, this.maxTop);
27 |     div.style.left = (x - this.nodeWidth/2) + "px";
28 |     div.addEventListener("click", this.highlightNode.bind(this));
29 |     div.addEventListener("mouseover", this.highlightNode.bind(this));
30 |     this.div.appendChild(div);
31 |     this.nodes.push(div);
32 | 
33 |     var descriptor = "Inner node";    
34 |     if (this.nodes.length == 1) {
35 |       descriptor = "The root node of entire tree";
36 |     } else if (nodeInfo.children.length) {
37 |       descriptor += " and root node of subtree";
38 |     } else {
39 |       descriptor = "A leaf node";
40 |     }
41 | 
42 |     tippy(div, {
43 |       allowHTML: true,
44 |       content: descriptor + '<br>Label: ' + label,
45 |       trigger: 'mouseenter click'
46 |     });
47 | 
48 |     nodeInfo.div = div;
49 |     nodeInfo.parentDiv = parentDiv;;
50 |     
51 |     if (parentDiv) {
52 |       this.plumber.setContainer(this.div);
53 |       this.plumber.connect({
54 |               source: parentDiv, target: div,
55 |               anchor: "Center", endpoint: "Blank",
56 |               connector: ["Straight"],
57 |               paintStyle:{ stroke:"#12bf96", strokeWidth:2 }
58 |           });
59 |     }
60 |     if (nodeInfo.children) {
61 |       var childDepth = depth + 1;
62 |       var maxChildrenAtDepth = Math.pow(nodeInfo.children.length, childDepth);
63 |       var spaceBetween = (this.width - (this.nodeWidth * maxChildrenAtDepth)) / ( maxChildrenAtDepth + 1);
64 |       var theseChildrenSpace = (this.nodeWidth * nodeInfo.children.length) + (spaceBetween * (nodeInfo.children.length + 1));
65 |       var childrenStartX = x - (spaceBetween/2 + this.nodeWidth/2);
66 |       if (nodeInfo.children.length === 3) {
67 |         childrenStartX = x - (spaceBetween + this.nodeWidth);
68 |       }
69 |       nodeInfo.children.forEach((child, i) => 
70 |          this.drawNode(child, childDepth, (childrenStartX + i * (spaceBetween + this.nodeWidth)), div)
71 |       );
72 |     }
73 |   }
74 |   
75 |   highlightNode(event) {
76 |     const node = event.target;
77 |     this.nodes.forEach((node, _) => {
78 |       node.style.zIndex = 1;
79 |     });
80 |     node.style.zIndex = 300;
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/python/rcviz_test.py:
--------------------------------------------------------------------------------
  1 | import pytest
  2 | import pydot
  3 | 
  4 | import rcviz
  5 | 
  6 | 
  7 | virfib_def = """
  8 | def virfib(n):
  9 |   if n == 0:
 10 |     return 0
 11 |   if n == 1:
 12 |     return 1
 13 |   else:
 14 |     return virfib(n - 1) + virfib(n - 2)"""
 15 | 
 16 | 
 17 | def test_visualize():
 18 |     dotgraph_str = rcviz.visualize(virfib_def, "virfib(3)")
 19 |     dotgraph = pydot.graph_from_dot_data(dotgraph_str)[0]
 20 | 
 21 |     assert len(dotgraph.get_nodes()) == 6
 22 |     assert len(dotgraph.get_edges()) == 9
 23 |     assert [n.get_label() for n in dotgraph.get_nodes()] == [
 24 |         '"virfib(3)"',
 25 |         '"virfib(2)"',
 26 |         '"virfib(1)"',
 27 |         '"virfib(0)"',
 28 |         '"virfib(1)"',
 29 |         "Result",
 30 |     ]
 31 |     assert [e.get_label() for e in dotgraph.get_edges()] == [
 32 |         '"(#1)"',
 33 |         '"1 (#6)"',
 34 |         '"(#7)"',
 35 |         '"1 (#8)"',
 36 |         '"(#2)"',
 37 |         '"1 (#3)"',
 38 |         '"(#4)"',
 39 |         '"0 (#5)"',
 40 |         '"2 (#9)"',
 41 |     ]
 42 | 
 43 | 
 44 | def test_error_too_many_nodes(monkeypatch):
 45 |     monkeypatch.setattr(rcviz, "MAX_FRAMES", 10)
 46 | 
 47 |     with pytest.raises(rcviz.TooManyFramesError):
 48 |         rcviz.visualize(virfib_def, "virfib(14)")
 49 | 
 50 | 
 51 | def test_error_too_much_time(monkeypatch):
 52 |     while_def = """
 53 | def inf():
 54 |   while True:
 55 |     inf()
 56 | """
 57 |     monkeypatch.setattr(rcviz, "MAX_TIME", 2)
 58 | 
 59 |     with pytest.raises(rcviz.TooMuchTimeError):
 60 |         rcviz.visualize(while_def, "inf()")
 61 | 
 62 | 
 63 | def test_mutable_args():
 64 |     rev_def = """
 65 | def rev(lst, start, end):
 66 |   if start < end:
 67 |     tmp = lst[end]
 68 |     lst[end] = lst[start]
 69 |     lst[start] = tmp
 70 |     rev(lst, start+1, end-1)
 71 | """
 72 |     dotgraph_str = rcviz.visualize(rev_def, "rev([1, 2, 3, 4, 5], 0, 4)")
 73 |     dotgraph = pydot.graph_from_dot_data(dotgraph_str)[0]
 74 | 
 75 |     assert len(dotgraph.get_nodes()) == 3
 76 |     assert len(dotgraph.get_edges()) == 2
 77 |     assert [n.get_label() for n in dotgraph.get_nodes()] == [
 78 |         '"rev([1, 2, 3, 4, 5], 0, 4)"',
 79 |         '"rev([5, 2, 3, 4, 1], 1, 3)"',
 80 |         '"rev([5, 4, 3, 2, 1], 2, 2)"',
 81 |     ]
 82 |     assert [e.get_label() for e in dotgraph.get_edges()] == ['"(#1)"', '"(#2)"']
 83 | 
 84 | 
 85 | def test_dict_args():
 86 |     # Ensure that curly braces get escaped, since curly braces have meaning in dot graphs.
 87 | 
 88 |     dict_def = """
 89 | def finditem(obj, key):
 90 |     if key in obj:
 91 |       return obj[key]
 92 |     for k, v in obj.items():
 93 |         if isinstance(v, dict):
 94 |             item = finditem(v, key)
 95 |             if item is not None:
 96 |                 return item
 97 |     """
 98 | 
 99 |     dotgraph_str = rcviz.visualize(dict_def, "finditem({'B':1,'A': {'C': 2}},'C')")
100 |     dotgraph = pydot.graph_from_dot_data(dotgraph_str)[0]
101 | 
102 |     assert [n.get_label() for n in dotgraph.get_nodes()] == [
103 |         "\"finditem(\\{'B': 1, 'A': \\{'C': 2\\}\\}, C)\"",
104 |         "\"finditem(\\{'C': 2\\}, C)\"",
105 |         "Result",
106 |     ]
107 | 


--------------------------------------------------------------------------------
/old/num_partitions63.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "label": "num_partitions(6, 3)",
  3 |   "id": "0x7f83c6c8a240->0x7f83c6a61440",
  4 |   "children": [
  5 |     {
  6 |       "label": "num_partitions(3, 3)",
  7 |       "id": "0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
  8 |       "children": [
  9 |         {
 10 |           "label": "num_partitions(0, 3)",
 11 |           "id": "0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 12 |           "children": [
 13 |             {
 14 |               "label": "num_partitions(-3, 3)",
 15 |               "id": "0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 16 |               "children": [
 17 |                 {
 18 |                   "label": "num_partitions(-2, 2)",
 19 |                   "id": "0x7f83c6f713c0->0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 20 |                   "children": []
 21 |                 },
 22 |                 {
 23 |                   "label": "num_partitions(0, 1)",
 24 |                   "id": "0x7f83c6f713c0->0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 25 |                   "children": []
 26 |                 }
 27 |               ]
 28 |             },
 29 |             {
 30 |               "label": "num_partitions(0, 2)",
 31 |               "id": "0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 32 |               "children": [
 33 |                 {
 34 |                   "label": "num_partitions(-2, 2)",
 35 |                   "id": "0x7f83c6f713c0->0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 36 |                   "children": []
 37 |                 },
 38 |                 {
 39 |                   "label": "num_partitions(0, 1)",
 40 |                   "id": "0x7f83c6f713c0->0x7f83c6f3dc80->0x7f83c6f3de40->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 41 |                   "children": []
 42 |                 }
 43 |               ]
 44 |             }
 45 |           ]
 46 |         },
 47 |         {
 48 |           "label": "num_partitions(3, 2)",
 49 |           "id": "0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 50 |           "children": [
 51 |             {
 52 |               "label": "num_partitions(1, 2)",
 53 |               "id": "0x7f83c6f71580->0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 54 |               "children": [
 55 |                 {
 56 |                   "label": "num_partitions(-1, 2)",
 57 |                   "id": "0x7f83c6f3de40->0x7f83c6f71580->0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 58 |                   "children": []
 59 |                 },
 60 |                 {
 61 |                   "label": "num_partitions(1, 1)",
 62 |                   "id": "0x7f83c6f3de40->0x7f83c6f71580->0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 63 |                   "children": []
 64 |                 }
 65 |               ]
 66 |             },
 67 |             {
 68 |               "label": "num_partitions(3, 1)",
 69 |               "id": "0x7f83c6f3de40->0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6c8a240->0x7f83c6a61440",
 70 |               "children": []
 71 |             }
 72 |           ]
 73 |         }
 74 |       ]
 75 |     },
 76 |     {
 77 |       "label": "num_partitions(6, 2)",
 78 |       "id": "0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
 79 |       "children": [
 80 |         {
 81 |           "label": "num_partitions(4, 2)",
 82 |           "id": "0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
 83 |           "children": [
 84 |             {
 85 |               "label": "num_partitions(2, 2)",
 86 |               "id": "0x7f83c6f71200->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
 87 |               "children": [
 88 |                 {
 89 |                   "label": "num_partitions(0, 2)",
 90 |                   "id": "0x7f83c6f71740->0x7f83c6f71200->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
 91 |                   "children": [
 92 |                     {
 93 |                       "label": "num_partitions(-2, 2)",
 94 |                       "id": "0x7f83c6f713c0->0x7f83c6f71740->0x7f83c6f71200->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
 95 |                       "children": []
 96 |                     },
 97 |                     {
 98 |                       "label": "num_partitions(0, 1)",
 99 |                       "id": "0x7f83c6f713c0->0x7f83c6f71740->0x7f83c6f71200->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
100 |                       "children": []
101 |                     }
102 |                   ]
103 |                 },
104 |                 {
105 |                   "label": "num_partitions(2, 1)",
106 |                   "id": "0x7f83c6f713c0->0x7f83c6f71200->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
107 |                   "children": []
108 |                 }
109 |               ]
110 |             },
111 |             {
112 |               "label": "num_partitions(4, 1)",
113 |               "id": "0x7f83c6f713c0->0x7f83c6918c30->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
114 |               "children": []
115 |             }
116 |           ]
117 |         },
118 |         {
119 |           "label": "num_partitions(6, 1)",
120 |           "id": "0x7f83c6f713c0->0x7f83c6f3de40->0x7f83c6c8a240->0x7f83c6a61440",
121 |           "children": []
122 |         }
123 |       ]
124 |     }
125 |   ]
126 | }
127 | 


--------------------------------------------------------------------------------
/javascript/recursive_tree_viz.js:
--------------------------------------------------------------------------------
  1 | export class RecursiveTreeViz {
  2 | 
  3 |     constructor(svg, options) {
  4 |         this.svg = svg;
  5 |         options = options || {};
  6 |         this.startStep = options.startStep;
  7 |         this.steps = [];
  8 |         this.frames = {};
  9 |     }
 10 | 
 11 |     draw() {
 12 |         // Store all the frames
 13 |         const frames = this.svg.querySelectorAll(".node");
 14 |         for (var i = 0; i < frames.length; i++) {
 15 |         const frame = frames[i];
 16 |         const frameId = frame.getElementsByTagName("title")[0].textContent;
 17 |         this.frames[frameId] = frame;
 18 |         }
 19 | 
 20 |         // Determine number of steps
 21 |         const edges = this.svg.querySelectorAll(".edge");
 22 |         for (let i = 0; i < edges.length; i++) {
 23 |             const edge = edges[i];
 24 |             const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
 25 |             // Check for recently introduced bug in Graphviz where some edges have no text
 26 |             if (edge.getElementsByTagName("text").length > 0) {
 27 |                 const edgeText = edge.getElementsByTagName("text")[0].textContent;
 28 |                 let stepNum, isReturn;
 29 |                 stepNum = parseInt(edgeText.split("(#")[1], 10);
 30 |                 if (edgeTitle.endsWith(":c")) {
 31 |                     isReturn = true;
 32 |                     edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
 33 |                 } else {
 34 |                     edge.getElementsByTagName("text")[0].textContent = "";
 35 |                     isReturn = false;
 36 |                 }
 37 |                 const edgeFrames = edgeTitle.split(":c")[0];
 38 |                 const parentFrameId = edgeFrames.split("->")[0];
 39 |                 const childFrameId = edgeFrames.split("->")[1];
 40 |                 this.steps[stepNum] = {
 41 |                     parentFrame: this.frames[parentFrameId],
 42 |                     childFrame: this.frames[childFrameId],
 43 |                     edge: edge,
 44 |                     isReturn: isReturn
 45 |                 };
 46 |             }
 47 |         }
 48 | 
 49 |         if (this.startStep == null || isNaN(this.startStep)) {
 50 |         this.currentStep = this.steps.length - 1;
 51 |         } else {
 52 |         this.currentStep = this.startStep;
 53 |         }
 54 |         this.drawControls();
 55 |         this.toggleSteps();
 56 |     }
 57 | 
 58 | 
 59 |     drawControls() {
 60 |         var controlsDiv = document.createElement("div");
 61 |         controlsDiv.classList.add("svg-controls");
 62 | 
 63 |         this.prevButton = document.createElement("button");
 64 |         this.prevButton.innerText = "< Prev";
 65 |         if (this.currentStep <= 0) {
 66 |         this.prevButton.setAttribute("disabled", "disabled");
 67 |         }
 68 |         this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
 69 |         document.addEventListener("keypress", (e) => {
 70 |             if (e.key == "p" || e.key == "ArrowLeft") {
 71 |             this.onPrevClick();
 72 |             } else if (e.key == "n" || e.key == "ArrowRight") {
 73 |             this.onNextClick();
 74 |             }
 75 |         });
 76 | 
 77 |         this.nextButton = document.createElement("button");
 78 |         this.nextButton.innerText = "> Next";
 79 |         if (this.currentStep >= this.steps.length - 1) {
 80 |         this.nextButton.setAttribute("disabled", "disabled");
 81 |         }
 82 |         this.nextButton.addEventListener("click", this.onNextClick.bind(this));
 83 | 
 84 |         this.slider = document.createElement("input");
 85 |         this.slider.setAttribute("type", "range");
 86 |         this.slider.setAttribute("min", 0);
 87 |         this.slider.setAttribute("max", this.steps.length - 1);
 88 |         this.slider.setAttribute("value", this.currentStep);
 89 |         this.slider.addEventListener("change", this.onSliderChange.bind(this));
 90 | 
 91 |         controlsDiv.appendChild(this.prevButton);
 92 |         controlsDiv.appendChild(this.slider);
 93 |         controlsDiv.appendChild(this.nextButton);
 94 | 
 95 |         this.svg.before(controlsDiv);
 96 |     }
 97 | 
 98 |     toggleSteps() {
 99 |         this.steps.forEach((step, stepI) => {
100 |         if (stepI == 1) {
101 |             step.parentFrame && step.parentFrame.classList.add("activated");
102 |         }
103 |         if (stepI <= this.currentStep) {
104 |             step.edge.classList.add("activated");
105 |             step.childFrame.classList.add("activated");
106 |         } else {
107 |             step.edge.classList.remove("activated");
108 |             !step.isReturn && step.childFrame.classList.remove("activated");
109 |         }
110 |         })
111 |     }
112 | 
113 |     onSliderChange(event) {
114 |         this.currentStep = parseInt(event.target.value, 10);
115 |         this.fixButtons();
116 |         this.toggleSteps();
117 |     }
118 | 
119 |     onPrevClick() {
120 |         this.currentStep--;
121 |         this.fixButtons();
122 |         this.slider.value = this.currentStep;
123 |         this.toggleSteps();
124 |     }
125 | 
126 |     onNextClick() {
127 |         this.currentStep++;
128 |         this.fixButtons();
129 |         this.slider.value = this.currentStep;
130 |         this.toggleSteps();
131 |     }
132 | 
133 |     fixButtons() {
134 |         if (this.currentStep === 0) {
135 |         this.prevButton.setAttribute("disabled", "disabled");
136 |         }
137 |         if (this.currentStep < this.steps.length - 1) {
138 |         this.nextButton.removeAttribute("disabled");
139 |         }
140 |         if (this.currentStep > 0) {
141 |         this.prevButton.removeAttribute("disabled");
142 |         }
143 |         if (this.currentStep === this.steps.length - 1) {
144 |         this.nextButton.setAttribute("disabled", "disabled");
145 |         }
146 |     }
147 | }


--------------------------------------------------------------------------------
/old/vis.js:
--------------------------------------------------------------------------------
  1 | 
  2 | class RecursiveTreeViz {
  3 |   
  4 |   constructor(div, tree, options) {
  5 |     this.div = div;
  6 |     this.tree = tree;
  7 |     options = options || {};
  8 |     this.width = options.width;
  9 |     this.nodeWidth = 74;
 10 |     this.startStep = options.startStep;
 11 |     this.funcName = options.funcName;
 12 |     this.plumber = jsPlumb.getInstance();
 13 |     this.maxTop = 0;
 14 |     this.steps = [];
 15 |   }
 16 |   
 17 |   draw() {
 18 |     this.drawNode(this.tree, 0, this.width/2);
 19 |     if (this.startStep == null || isNaN(this.startStep)) {
 20 |       this.currentStep = this.steps.length - 1;
 21 |     } else {
 22 |       this.currentStep = this.startStep;
 23 |     }
 24 |     this.drawControls();
 25 |     this.toggleSteps();
 26 |   }
 27 |   
 28 |   drawNode(nodeInfo, depth, x, parentDiv) {
 29 |     var div = document.createElement("div");
 30 |     let label = nodeInfo.label;
 31 |     if (this.funcName) {
 32 |       label = this.funcName + "(" + label.split("(")[1]
 33 |     }
 34 |     label = label.replace(", ", ",");
 35 |     div.innerText = label;
 36 |     div.className = "node";
 37 |     var y = depth * 70;
 38 |     div.style.top = y + "px";
 39 |     this.maxTop = Math.max(y, this.maxTop);
 40 |     div.style.left = (x - this.nodeWidth/2) + "px";
 41 |     div.addEventListener("click", this.highlightNode.bind(this));
 42 |     div.addEventListener("mouseover", this.highlightNode.bind(this));
 43 |     this.div.appendChild(div);
 44 |     
 45 |     nodeInfo.div = div;
 46 |     nodeInfo.parentDiv = parentDiv;;
 47 |     this.steps.push(nodeInfo);
 48 |     
 49 |     if (parentDiv) {
 50 |       this.plumber.setContainer(this.div);
 51 |       this.plumber.connect({
 52 |               source: parentDiv, target: div,
 53 |               anchor: "Center", endpoint: "Blank",
 54 |               connector: ["Straight"],
 55 |               paintStyle:{ stroke:"#ccc", strokeWidth:2 }
 56 |           });
 57 |     }
 58 |     if (nodeInfo.children) {
 59 |       var childDepth = depth + 1;
 60 |       var maxChildrenAtDepth = Math.pow(nodeInfo.children.length, childDepth);
 61 |       var spaceBetween = (this.width - (this.nodeWidth * maxChildrenAtDepth)) / ( maxChildrenAtDepth + 1);
 62 |       var theseChildrenSpace = (this.nodeWidth * nodeInfo.children.length) + (spaceBetween * (nodeInfo.children.length + 1));
 63 |       var childrenStartX = x - (spaceBetween/2 + this.nodeWidth/2);
 64 |       if (nodeInfo.children.length === 3) {
 65 |         childrenStartX = x - (spaceBetween + this.nodeWidth);
 66 |       }
 67 |       nodeInfo.children.forEach((child, i) => 
 68 |          this.drawNode(child, childDepth, (childrenStartX + i * (spaceBetween + this.nodeWidth)), div)
 69 |       );
 70 |     }
 71 |   }
 72 |   
 73 |   drawControls() {
 74 |     var controlsDiv = document.createElement("div");
 75 |     controlsDiv.style.position = "absolute";
 76 |     controlsDiv.style.left = (this.width/2 - 125) + "px";
 77 |     controlsDiv.style.top = this.maxTop + 50 + "px";
 78 |     
 79 |     this.prevButton = document.createElement("button");
 80 |     this.prevButton.innerText = "< Prev";
 81 |     if (this.currentStep <= 0) {
 82 |       this.prevButton.setAttribute("disabled", "disabled");
 83 |     }
 84 |     this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
 85 |     
 86 |     this.nextButton = document.createElement("button");
 87 |     this.nextButton.innerText = "> Next";
 88 |     if (this.currentStep >= this.steps.length - 1) {
 89 |       this.nextButton.setAttribute("disabled", "disabled");
 90 |     }
 91 |     this.nextButton.addEventListener("click", this.onNextClick.bind(this));
 92 | 
 93 |     this.slider = document.createElement("input");
 94 |     this.slider.setAttribute("type", "range");
 95 |     this.slider.setAttribute("min", 0);
 96 |     this.slider.setAttribute("max", this.steps.length - 1);
 97 |     this.slider.setAttribute("value", this.currentStep);
 98 |     this.slider.addEventListener("change", this.onSliderChange.bind(this));
 99 | 
100 |     controlsDiv.appendChild(this.prevButton);
101 |     controlsDiv.appendChild(this.slider);
102 |     controlsDiv.appendChild(this.nextButton);
103 |     this.div.appendChild(controlsDiv);
104 |   }
105 | 
106 |   highlightNode(event) {
107 |     const node = event.target;
108 |     this.steps.forEach((step, stepI) => {
109 |       step.div.style.zIndex = 1;
110 |     });
111 |     node.style.zIndex = 300;
112 |   }
113 | 
114 |   toggleSteps() {
115 |     
116 |     let prevDiv;
117 |     this.steps.forEach((step, stepI) => {
118 |       var connectors =  this.plumber.getConnections(
119 |         {source: step.parentDiv, target: step.div});
120 |       if (stepI <= this.currentStep) {
121 |         step.div.className = "node node-activated";
122 |         connectors.forEach((connection) => {
123 |           connection.setPaintStyle({ stroke:"#12bf96", strokeWidth:2 })
124 |         });
125 |       } else {
126 |         step.div.className = "node";
127 |         connectors.forEach((connection) => {
128 |           connection.setPaintStyle({ stroke:"#ccc", strokeWidth:2 })
129 |         });
130 |       }
131 |       prevDiv = step.div;
132 |     })
133 |   }
134 |   
135 |   onSliderChange(event) {
136 |     this.currentStep = parseInt(event.target.value, 10);
137 |     this.toggleSteps();
138 |   }
139 |   
140 |   onPrevClick(event) {
141 |     this.currentStep--;
142 |     if (this.currentStep === 0) {
143 |       this.prevButton.setAttribute("disabled", "disabled");
144 |     }
145 |     if (this.currentStep < this.steps.length - 1) {
146 |       this.nextButton.removeAttribute("disabled");
147 |     }
148 |     this.slider.value = this.currentStep;
149 |     this.toggleSteps();
150 |   }
151 |   
152 |   onNextClick(event) {
153 |     this.currentStep++;
154 |     if (this.currentStep > 0) {
155 |       this.prevButton.removeAttribute("disabled");
156 |     }
157 |     if (this.currentStep === this.steps.length - 1) {
158 |       this.nextButton.setAttribute("disabled", "disabled");
159 |     }
160 |     this.slider.value = this.currentStep;
161 |     this.toggleSteps();
162 |   }
163 |   
164 | }
165 | 


--------------------------------------------------------------------------------
/.github/code_of_conduct.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, caste, color, religion, or sexual
 10 | identity and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the overall
 26 |   community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or advances of
 31 |   any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email address,
 35 |   without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at kjaymiller@gmail.com.
 63 | All complaints will be reviewed and investigated promptly and fairly.
 64 | 
 65 | All community leaders are obligated to respect the privacy and security of the
 66 | reporter of any incident.
 67 | 
 68 | ## Enforcement Guidelines
 69 | 
 70 | Community leaders will follow these Community Impact Guidelines in determining
 71 | the consequences for any action they deem in violation of this Code of Conduct:
 72 | 
 73 | ### 1. Correction
 74 | 
 75 | **Community Impact**: Use of inappropriate language or other behavior deemed
 76 | unprofessional or unwelcome in the community.
 77 | 
 78 | **Consequence**: A private, written warning from community leaders, providing
 79 | clarity around the nature of the violation and an explanation of why the
 80 | behavior was inappropriate. A public apology may be requested.
 81 | 
 82 | ### 2. Warning
 83 | 
 84 | **Community Impact**: A violation through a single incident or series of
 85 | actions.
 86 | 
 87 | **Consequence**: A warning with consequences for continued behavior. No
 88 | interaction with the people involved, including unsolicited interaction with
 89 | those enforcing the Code of Conduct, for a specified period of time. This
 90 | includes avoiding interactions in community spaces as well as external channels
 91 | like social media. Violating these terms may lead to a temporary or permanent
 92 | ban.
 93 | 
 94 | ### 3. Temporary Ban
 95 | 
 96 | **Community Impact**: A serious violation of community standards, including
 97 | sustained inappropriate behavior.
 98 | 
 99 | **Consequence**: A temporary ban from any sort of interaction or public
100 | communication with the community for a specified period of time. No public or
101 | private interaction with the people involved, including unsolicited interaction
102 | with those enforcing the Code of Conduct, is allowed during this period.
103 | Violating these terms may lead to a permanent ban.
104 | 
105 | ### 4. Permanent Ban
106 | 
107 | **Community Impact**: Demonstrating a pattern of violation of community
108 | standards, including sustained inappropriate behavior, harassment of an
109 | individual, or aggression toward or disparagement of classes of individuals.
110 | 
111 | **Consequence**: A permanent ban from any sort of public interaction within the
112 | community.
113 | 
114 | ## Attribution
115 | 
116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
117 | version 2.1, available at
118 | [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
119 | 
120 | Community Impact Guidelines were inspired by
121 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
122 | 
123 | For answers to common questions about this code of conduct, see the FAQ at
124 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
125 | [https://www.contributor-covenant.org/translations][translations].
126 | 
127 | [homepage]: https://www.contributor-covenant.org
128 | [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
129 | [Mozilla CoC]: https://github.com/mozilla/diversity
130 | [FAQ]: https://www.contributor-covenant.org/faq
131 | [translations]: https://www.contributor-covenant.org/translations
132 | 


--------------------------------------------------------------------------------
/python/rcviz.py:
--------------------------------------------------------------------------------
  1 | # rcviz : a small recursion call graph vizualization decorator
  2 | # Copyright (c) Ran Dugal 2014
  3 | # Licensed under the GPLv2, which is available at
  4 | # http://www.gnu.org/licenses/gpl-2.0.html
  5 | from time import time
  6 | import inspect
  7 | import copy
  8 | from typing import Dict, List, Any
  9 | 
 10 | import pydot
 11 | 
 12 | MAX_FRAMES = 1000
 13 | MAX_TIME = 10
 14 | 
 15 | 
 16 | class TooManyFramesError(Exception):
 17 |     pass
 18 | 
 19 | 
 20 | class TooMuchTimeError(Exception):
 21 |     pass
 22 | 
 23 | 
 24 | class callgraph(object):
 25 |     """singleton class that stores global graph data
 26 |     draw graph using pygraphviz
 27 |     """
 28 | 
 29 |     _callers: Dict[int, Any] = {}  # caller_fn_id : node_data
 30 |     _counter = 1  # track call order
 31 |     _unwindcounter = 1  # track unwind order
 32 |     _step = 1  # track overall steps
 33 |     _frames: List[int] = []  # keep frame objects reference
 34 | 
 35 |     @staticmethod
 36 |     def reset():
 37 |         callgraph._callers = {}
 38 |         callgraph._counter = 1
 39 |         callgraph._frames = []
 40 |         callgraph._unwindcounter = 1
 41 |         callgraph._step = 1
 42 | 
 43 |     @staticmethod
 44 |     def get_callers():
 45 |         return callgraph._callers
 46 | 
 47 |     @staticmethod
 48 |     def increment():
 49 |         callgraph._counter += 1
 50 |         callgraph._step += 1
 51 | 
 52 |     @staticmethod
 53 |     def increment_unwind():
 54 |         callgraph._unwindcounter += 1
 55 |         callgraph._step += 1
 56 | 
 57 |     @staticmethod
 58 |     def get_frames():
 59 |         return callgraph._frames
 60 | 
 61 |     @staticmethod
 62 |     def render():
 63 |         dotgraph = pydot.Dot("rc-graph", graph_type="digraph", strict=False)
 64 | 
 65 |         # Create nodes
 66 |         for frame_id, node in callgraph.get_callers().items():
 67 |             label = f"{node.fn_name}({node.argstr()})"
 68 |             dotgraph.add_node(pydot.Node(frame_id, label=label, shape="Mrecord"))
 69 | 
 70 |         # Create edges
 71 |         for frame_id, node in callgraph.get_callers().items():
 72 |             child_nodes = []
 73 |             for child_id, counter in node.child_methods:
 74 |                 child_nodes.append(child_id)
 75 |                 label = f"(#{counter})"
 76 |                 dotgraph.add_edge(pydot.Edge(frame_id, child_id, color="black", label=label))
 77 | 
 78 |             # Order edges left to right
 79 |             if len(child_nodes) > 1:
 80 |                 subgraph = pydot.Subgraph(rank="same")
 81 |                 prev_node = None
 82 |                 for child_node in child_nodes:
 83 |                     subgraph.add_node(pydot.Node(child_node))
 84 |                     if prev_node:
 85 |                         subgraph.add_edge(pydot.Edge(prev_node, child_node))
 86 |                     prev_node = child_node
 87 |                 dotgraph.add_subgraph(subgraph)
 88 | 
 89 |         parent_frame = None
 90 |         for frame_id, node in callgraph.get_callers().items():
 91 |             for child_id, counter in node.child_methods:
 92 |                 child_node = callgraph.get_callers().get(child_id)
 93 |                 if child_node and child_node.ret is not None:
 94 |                     ret_label = f"{child_node.ret} (#{child_node.ret_step})"
 95 |                     dotgraph.add_edge(
 96 |                         pydot.Edge(
 97 |                             frame_id,
 98 |                             child_id,
 99 |                             dir="back",
100 |                             label=ret_label,
101 |                             color="green",
102 |                             headport="c",
103 |                         )
104 |                     )
105 |             if parent_frame is None:
106 |                 parent_frame = frame_id
107 |                 if node.ret is not None:
108 |                     ret_label = f"{node.ret} (#{node.ret_step})"
109 |                     dotgraph.add_node(pydot.Node(99999999, shape="Mrecord", label="Result"))
110 |                     dotgraph.add_edge(
111 |                         pydot.Edge(
112 |                             99999999,
113 |                             frame_id,
114 |                             dir="back",
115 |                             label=ret_label,
116 |                             color="Green",
117 |                             headport="c",
118 |                         )
119 |                     )
120 | 
121 |         return dotgraph.to_string()
122 | 
123 | 
124 | class node_data(object):
125 |     def __init__(self, _args=None, _kwargs=None, _fn_name=""):
126 |         self.args = _args
127 |         self.kwargs = _kwargs
128 |         self.fn_name = _fn_name
129 |         self.ret = None
130 |         self.child_methods = []
131 | 
132 |     def argstr(self):
133 |         s_args = ", ".join([str(arg) for arg in self.args])
134 |         s_kwargs = ", ".join([(str(k), str(v)) for (k, v) in self.kwargs.items()])
135 |         return f"{s_args}{s_kwargs}".replace("{", "\{").replace("}", "\}")
136 | 
137 | 
138 | class viz(object):
139 |     """decorator to construct the call graph with args and return values as labels"""
140 | 
141 |     def __init__(self, wrapped):
142 |         self.wrapped = wrapped
143 |         self.max_frames = MAX_FRAMES
144 |         self.max_time = MAX_TIME  # in seconds
145 |         self.start_time = time()
146 | 
147 |     def __call__(self, *args, **kwargs):
148 | 
149 |         g_callers = callgraph.get_callers()
150 |         g_frames = callgraph.get_frames()
151 | 
152 |         # find the caller frame, and add self as a child node
153 |         caller_frame_id = None
154 | 
155 |         fullstack = inspect.stack()
156 | 
157 |         this_frame_id = id(fullstack[0][0])
158 |         if fullstack[2].function == "__call__":
159 |             caller_frame_id = id(fullstack[2][0])
160 | 
161 |         if this_frame_id not in g_frames:
162 |             g_frames.append(fullstack[0][0])
163 | 
164 |         if this_frame_id not in g_callers.keys():
165 |             g_callers[this_frame_id] = node_data(
166 |                 copy.deepcopy(args), copy.deepcopy(kwargs), self.wrapped.__name__
167 |             )
168 | 
169 |         edgeinfo = None
170 |         if caller_frame_id:
171 |             edgeinfo = [this_frame_id, callgraph._step]
172 |             g_callers[caller_frame_id].child_methods.append(edgeinfo)
173 |             callgraph.increment()
174 | 
175 |         if len(g_frames) > self.max_frames:
176 |             raise TooManyFramesError(
177 |                 f"Encountered more than ${self.max_frames} while executing function"
178 |             )
179 |         if (time() - self.start_time) > self.max_time:
180 |             raise TooMuchTimeError(f"Took more than ${self.max_time} seconds to run function")
181 | 
182 |         # Invoke the wrapped
183 |         ret = self.wrapped(*args, **kwargs)
184 | 
185 |         g_callers[this_frame_id].ret_step = callgraph._step
186 | 
187 |         if edgeinfo:
188 |             callgraph.increment_unwind()
189 | 
190 |         g_callers[this_frame_id].ret = copy.deepcopy(ret)
191 | 
192 |         return ret
193 | 
194 | 
195 | def decorate_funcs(func_source: str):
196 |     outlines = []
197 |     for line in func_source.split("\n"):
198 |         if line.startswith("def "):
199 |             outlines.append("@viz")
200 |         outlines.append(line)
201 |     return "\n".join(outlines)
202 | 
203 | 
204 | def visualize(function_definition, function_call):
205 |     """Either returns generated SVG or generates an error."""
206 |     callgraph.reset()
207 |     function_definition = decorate_funcs(function_definition)
208 |     exec(function_definition, globals())
209 |     eval(function_call)
210 |     return callgraph.render()
211 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width">
  6 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  7 |     <title>Recursion Visualizer</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 10 |     <link rel="stylesheet" href="css/recursive_tree_viz.css">
 11 |     <style>
 12 | textarea,input[type=text] {
 13 |   font-family: monospace;
 14 |   font-weight: normal;
 15 | }
 16 |     </style>
 17 |     <style>
 18 | 
 19 |       </style>
 20 |   </head>
 21 |   <body>
 22 |     <div class="container">
 23 | 
 24 |     <h1>Visualize a recursive function</h1>
 25 |     <div id="function-code-container">
 26 |     <label>Try one of these functions:
 27 |       <select id="function-select">
 28 |         <option value="none">Choose one...</option>
 29 |         <option value="virfib">virfib</option>
 30 |         <option value="count_partitions">count_partitions</option>
 31 |         <option value="luhn_sum">luhn_sum</option>
 32 |       </select>
 33 |      </label>
 34 |     <label>Or paste the function definition here (starting with <code>def</code>):
 35 |     <br>
 36 |     <textarea id="function-definition-textarea" rows="10" cols="120" name="function_definition"></textarea>
 37 |     </label>
 38 |     <br>
 39 |     <label>Type your function call here:
 40 |     <br>
 41 |     <input id="function-call-input" type="text" placeholder="func(1, 2)" name="function_call" size="120"/>
 42 |     </label>
 43 |     <br>
 44 |     <br>
 45 |     <button id="visualize-button" type="button" class="btn btn-primary" disabled>Visualize!</button>
 46 |     </div>
 47 | 
 48 |     <span id="visualize-status">Loading libraries...</span>
 49 |     <pre style="display:none" id="virfib-definition">
 50 | def virfib(n):
 51 |   if n == 0:
 52 |     return 0
 53 |   if n == 1:
 54 |     return 1
 55 |   else:
 56 |     return virfib(n - 1) + virfib(n - 2)
 57 |     </pre>
 58 |     <code style="display:none" id="virfib-call">virfib(3)</code>
 59 |     <pre style="display:none" id="count_partitions-definition">
 60 | def count_partitions(n, m):
 61 |     if n == 0:
 62 |         return 1
 63 |     elif n < 0:
 64 |         return 0
 65 |     elif m == 0:
 66 |         return 0
 67 |     else:
 68 |         with_m = count_partitions(n-m, m)
 69 |         without_m = count_partitions(n, m-1)
 70 |         return with_m + without_m
 71 | </pre>
 72 |     <code style="display:none" id="count_partitions-call">count_partitions(4, 2)</code>
 73 |     <pre style="display:none" id="luhn_sum-definition">
 74 | def sum_digits(n):
 75 |     if n < 10:
 76 |         return n
 77 |     else:
 78 |         last = n % 10
 79 |         all_but_last = n // 10
 80 |         return last + sum_digits(all_but_last)
 81 | 
 82 | def luhn_sum(n):
 83 |     if n < 10:
 84 |         return n
 85 |     else:
 86 |         last = n % 10
 87 |         all_but_last = n // 10
 88 |         return last + luhn_sum_double(all_but_last)
 89 | 
 90 | def luhn_sum_double(n):
 91 |     last = n % 10
 92 |     all_but_last = n // 10
 93 |     luhn_digit = sum_digits(last * 2)
 94 |     if n < 10:
 95 |         return luhn_digit
 96 |     else:
 97 |         return luhn_digit + luhn_sum(all_but_last)
 98 |     </pre>
 99 |     <code style="display:none" id="luhn_sum-call">luhn_sum(5106)</code>
100 |     <br>
101 | 
102 |     <div id="placeholder" style="margin-top: 80px;"></div>
103 | 
104 |     <div id="permalink-area" style="margin-top:12px; display:none;">
105 |     <label for="permalink-input">Permalink:</label> <input type="url" id="permalink-input" style="width: 600px;">
106 |     <br>
107 |     Tip: Add &hide_function=true to hide the function code.
108 |     </div>
109 | 
110 |     <div style="margin-top:80px;">
111 |     <p>👋🏻 Are you comfortable publicly sharing your visualizations? I'd love to see how folks are using this tool.
112 |     Post a link in the <a target="_blank" href="https://github.com/pamelafox/recursive-visualizations/discussions">discussions</a>
113 |     or @ me on social media (<a target="_blank" href="https://twitter.com/pamelafox">Twitter</a>, <a target="_blank" href="https://fosstodon.org/@pamelafox">Mastodon</a>)
114 |     </p>
115 |     <p>Source code on <a href="https://github.com/pamelafox/recursive-visualizations" target="_blank">Github</a>. Thank you <a href="https://github.com/carlsborg">@carlsborg</a> for the <a href="https://github.com/carlsborg/rcviz">rcviz</a> library.</p>
116 |     </div>
117 | 
118 |     </div>
119 |     <!-- GraphViz WASM -->
120 |     <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm@2.18.0/dist/graphviz.umd.js"></script>
121 |     <!-- Python WASM -->
122 |     <script src="https://cdn.jsdelivr.net/pyodide/v0.19.0/full/pyodide.js"></script>
123 |     <!-- Form functionality-->
124 |     <script>
125 |     function prefillFunction(event) {
126 |       const functionName = event.target.value;
127 |       const functionPre = document.getElementById(functionName + "-definition");
128 |       if (!functionPre) return;
129 |       document.getElementById('function-definition-textarea').value = functionPre.textContent;
130 |       const functionCall = document.getElementById(functionName + "-call");
131 |       if (!functionCall) return;
132 |       document.getElementById('function-call-input').value = functionCall.textContent;
133 |     }
134 | 
135 |     document.getElementById("function-select").addEventListener("change", prefillFunction);
136 | 
137 |     const urlParams = new URLSearchParams(window.location.search);
138 |     const funcDef = urlParams.get('function_definition');
139 |     const funcCall = urlParams.get('function_call');
140 |     const hideFunc = urlParams.get('hide_function');
141 |     if (funcDef) document.getElementById('function-definition-textarea').value = funcDef;
142 |     if (funcCall) document.getElementById('function-call-input').value = funcCall;
143 |     if (hideFunc == 'true') document.getElementById('function-code-container').style.display = "none";
144 |     const readyToViz = funcDef && funcCall;
145 |     </script>
146 |     <!-- Python callgraph computation + Graphviz rendering-->
147 |     <script type="module">
148 |     import {RecursiveTreeViz} from './javascript/recursive_tree_viz.js';
149 | 
150 |     var GraphViz = window["Graphviz"];
151 |     var pyodide;
152 | 
153 |     function computeVisualization() {
154 |         document.getElementById("visualize-status").innerHTML = "Computing call graph...";
155 |         const functionDef = document.getElementById('function-definition-textarea').value;
156 |         const functionCall = document.getElementById('function-call-input').value;
157 |         const dotGraph = pyodide.runPython(`visualize('''${functionDef}''', '''${functionCall}''')`);
158 |         document.getElementById("visualize-status").innerHTML = "Rendering call graph...";
159 |         GraphViz.load().then(graphviz => {
160 |               const div = document.getElementById("placeholder");
161 |               div.innerHTML = graphviz.layout(dotGraph, "svg", "dot");
162 |               new RecursiveTreeViz(div.querySelector('svg')).draw()
163 |               document.getElementById("visualize-status").innerHTML = "";
164 |               const permalink = `${window.location.origin}/?function_definition=${encodeURIComponent(functionDef)}&function_call=${encodeURIComponent(functionCall)}`.replace(/\(/g, '%28').replace(/\)/g, '%29');
165 |               document.getElementById("permalink-area").style.display = "block";
166 |               document.getElementById("permalink-input").value = permalink;
167 |         });
168 |     }
169 | 
170 |     async function main() {
171 |       pyodide = await loadPyodide({
172 |         indexURL : "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/"
173 |       });
174 |       await pyodide.loadPackage("micropip");
175 |       await pyodide.runPythonAsync(`
176 |       import micropip
177 |       micropip.install('python/pydot-1.4.1-py2.py3-none-any.whl')
178 |       `);
179 |       pyodide.runPython(await (await fetch("python/rcviz.py")).text());
180 |       document.getElementById("visualize-status").innerHTML = "";
181 |       document.getElementById("visualize-button").removeAttribute("disabled");
182 |       document.getElementById("visualize-button").addEventListener("click", computeVisualization);
183 |       readyToViz && computeVisualization();
184 |     };
185 | 
186 |     main();
187 |    </script>
188 |   </body>
189 | </html>
190 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
  1 | import globals from "globals";
  2 | import path from "node:path";
  3 | import { fileURLToPath } from "node:url";
  4 | import js from "@eslint/js";
  5 | import { FlatCompat } from "@eslint/eslintrc";
  6 | 
  7 | const __filename = fileURLToPath(import.meta.url);
  8 | const __dirname = path.dirname(__filename);
  9 | const compat = new FlatCompat({
 10 |     baseDirectory: __dirname,
 11 |     recommendedConfig: js.configs.recommended,
 12 |     allConfig: js.configs.all
 13 | });
 14 | 
 15 | export default [...compat.extends("eslint:recommended"), {
 16 |     languageOptions: {
 17 |         globals: {
 18 |             ...globals.browser,
 19 |         },
 20 | 
 21 |         ecmaVersion: 2015,
 22 |         sourceType: "module",
 23 |     },
 24 | 
 25 |     rules: {
 26 |         "accessor-pairs": "error",
 27 |         "array-bracket-newline": "error",
 28 |         "array-bracket-spacing": "error",
 29 |         "array-callback-return": "error",
 30 |         "array-element-newline": "error",
 31 |         "arrow-body-style": "error",
 32 |         "arrow-parens": ["error", "always"],
 33 | 
 34 |         "arrow-spacing": ["error", {
 35 |             after: true,
 36 |             before: true,
 37 |         }],
 38 | 
 39 |         "block-scoped-var": "error",
 40 |         "block-spacing": "error",
 41 |         "brace-style": ["error", "1tbs"],
 42 |         "callback-return": "error",
 43 |         camelcase: "error",
 44 |         "capitalized-comments": ["error", "always"],
 45 |         "class-methods-use-this": "error",
 46 |         "comma-dangle": "error",
 47 | 
 48 |         "comma-spacing": ["error", {
 49 |             after: true,
 50 |             before: false,
 51 |         }],
 52 | 
 53 |         "comma-style": ["error", "last"],
 54 |         complexity: "error",
 55 |         "computed-property-spacing": ["error", "never"],
 56 |         "consistent-return": "error",
 57 |         "consistent-this": "error",
 58 |         curly: "error",
 59 |         "default-case": "error",
 60 |         "dot-location": "error",
 61 |         "dot-notation": "error",
 62 |         "eol-last": ["error", "never"],
 63 |         eqeqeq: "off",
 64 |         "for-direction": "error",
 65 |         "func-call-spacing": "error",
 66 |         "func-name-matching": "error",
 67 |         "func-names": "error",
 68 |         "func-style": "error",
 69 |         "function-paren-newline": "error",
 70 |         "generator-star-spacing": "error",
 71 |         "getter-return": "error",
 72 |         "global-require": "error",
 73 |         "guard-for-in": "error",
 74 |         "handle-callback-err": "error",
 75 |         "id-blacklist": "error",
 76 |         "id-length": "off",
 77 |         "id-match": "error",
 78 |         "implicit-arrow-linebreak": ["error", "beside"],
 79 |         indent: "off",
 80 |         "indent-legacy": "off",
 81 |         "init-declarations": "off",
 82 |         "jsx-quotes": "error",
 83 |         "key-spacing": "error",
 84 | 
 85 |         "keyword-spacing": ["error", {
 86 |             after: true,
 87 |             before: true,
 88 |         }],
 89 | 
 90 |         "line-comment-position": "error",
 91 |         "linebreak-style": ["error", "unix"],
 92 |         "lines-around-comment": "error",
 93 |         "lines-around-directive": "error",
 94 |         "lines-between-class-members": ["error", "always"],
 95 |         "max-depth": "error",
 96 |         "max-len": "off",
 97 |         "max-lines": "error",
 98 |         "max-nested-callbacks": "error",
 99 |         "max-params": "error",
100 |         "max-statements": "off",
101 |         "max-statements-per-line": "error",
102 |         "multiline-comment-style": "error",
103 |         "multiline-ternary": "error",
104 |         "new-cap": "error",
105 |         "new-parens": "error",
106 |         "newline-after-var": ["error", "never"],
107 |         "newline-before-return": "error",
108 |         "newline-per-chained-call": "error",
109 |         "no-alert": "error",
110 |         "no-array-constructor": "error",
111 |         "no-await-in-loop": "error",
112 |         "no-bitwise": "error",
113 |         "no-buffer-constructor": "error",
114 |         "no-caller": "error",
115 |         "no-catch-shadow": "error",
116 |         "no-confusing-arrow": "error",
117 |         "no-continue": "error",
118 |         "no-div-regex": "error",
119 |         "no-duplicate-imports": "error",
120 |         "no-else-return": "error",
121 |         "no-empty-function": "error",
122 |         "no-eq-null": "off",
123 |         "no-eval": "error",
124 |         "no-extend-native": "error",
125 |         "no-extra-bind": "error",
126 |         "no-extra-label": "error",
127 |         "no-extra-parens": "error",
128 |         "no-floating-decimal": "error",
129 |         "no-implicit-coercion": "error",
130 |         "no-implicit-globals": "error",
131 |         "no-implied-eval": "error",
132 |         "no-inline-comments": "error",
133 |         "no-inner-declarations": ["error", "functions"],
134 |         "no-invalid-this": "error",
135 |         "no-iterator": "error",
136 |         "no-label-var": "error",
137 |         "no-labels": "error",
138 |         "no-lone-blocks": "error",
139 |         "no-lonely-if": "error",
140 |         "no-loop-func": "error",
141 |         "no-magic-numbers": "off",
142 |         "no-mixed-operators": "error",
143 |         "no-mixed-requires": "error",
144 |         "no-multi-assign": "error",
145 |         "no-multi-spaces": "error",
146 |         "no-multi-str": "error",
147 |         "no-multiple-empty-lines": "error",
148 |         "no-native-reassign": "error",
149 |         "no-negated-condition": "error",
150 |         "no-negated-in-lhs": "error",
151 |         "no-nested-ternary": "error",
152 |         "no-new": "error",
153 |         "no-new-func": "error",
154 |         "no-new-object": "error",
155 |         "no-new-require": "error",
156 |         "no-new-wrappers": "error",
157 |         "no-octal-escape": "error",
158 |         "no-param-reassign": "off",
159 |         "no-path-concat": "error",
160 |         "no-plusplus": "off",
161 |         "no-process-env": "error",
162 |         "no-process-exit": "error",
163 |         "no-proto": "error",
164 |         "no-prototype-builtins": "error",
165 |         "no-restricted-globals": "error",
166 |         "no-restricted-imports": "error",
167 |         "no-restricted-modules": "error",
168 |         "no-restricted-properties": "error",
169 |         "no-restricted-syntax": "error",
170 |         "no-return-assign": "error",
171 |         "no-return-await": "error",
172 |         "no-script-url": "error",
173 |         "no-self-compare": "error",
174 |         "no-sequences": "error",
175 |         "no-shadow": "off",
176 |         "no-shadow-restricted-names": "error",
177 |         "no-spaced-func": "error",
178 |         "no-sync": "error",
179 |         "no-tabs": "error",
180 |         "no-template-curly-in-string": "error",
181 |         "no-ternary": "error",
182 |         "no-throw-literal": "error",
183 |         "no-trailing-spaces": "error",
184 |         "no-undef-init": "error",
185 |         "no-undefined": "error",
186 |         "no-underscore-dangle": "error",
187 |         "no-unmodified-loop-condition": "error",
188 |         "no-unneeded-ternary": "error",
189 |         "no-use-before-define": "error",
190 |         "no-useless-call": "error",
191 |         "no-useless-computed-key": "error",
192 |         "no-useless-concat": "error",
193 |         "no-useless-constructor": "error",
194 |         "no-useless-rename": "error",
195 |         "no-useless-return": "error",
196 |         "no-var": "off",
197 |         "no-void": "error",
198 |         "no-warning-comments": "error",
199 |         "no-whitespace-before-property": "error",
200 |         "no-with": "error",
201 |         "nonblock-statement-body-position": "error",
202 |         "object-curly-newline": "error",
203 |         "object-curly-spacing": "error",
204 |         "object-property-newline": "error",
205 |         "object-shorthand": "off",
206 |         "one-var": "off",
207 |         "one-var-declaration-per-line": ["error", "initializations"],
208 |         "operator-assignment": "error",
209 |         "operator-linebreak": "error",
210 |         "padded-blocks": "off",
211 |         "padding-line-between-statements": "error",
212 |         "prefer-arrow-callback": "error",
213 |         "prefer-const": "off",
214 |         "prefer-destructuring": "off",
215 |         "prefer-numeric-literals": "error",
216 |         "prefer-promise-reject-errors": "error",
217 |         "prefer-reflect": "error",
218 |         "prefer-rest-params": "error",
219 |         "prefer-spread": "error",
220 |         "prefer-template": "error",
221 |         "quote-props": "off",
222 |         quotes: ["error", "double"],
223 |         radix: ["error", "always"],
224 |         "require-await": "error",
225 |         "rest-spread-spacing": "error",
226 |         semi: "off",
227 | 
228 |         "semi-spacing": ["error", {
229 |             after: true,
230 |             before: false,
231 |         }],
232 | 
233 |         "semi-style": ["error", "last"],
234 |         "sort-imports": "error",
235 |         "sort-keys": "off",
236 |         "sort-vars": "off",
237 |         "space-before-blocks": "error",
238 |         "space-before-function-paren": "off",
239 |         "space-in-parens": ["error", "never"],
240 |         "space-infix-ops": "error",
241 |         "space-unary-ops": "error",
242 |         "spaced-comment": ["error", "always"],
243 |         strict: "error",
244 |         "switch-colon-spacing": "error",
245 |         "symbol-description": "error",
246 |         "template-curly-spacing": "error",
247 |         "template-tag-spacing": "error",
248 |         "unicode-bom": ["error", "never"],
249 |         "vars-on-top": "off",
250 |         "wrap-iife": "error",
251 |         "wrap-regex": "error",
252 |         "yield-star-spacing": "error",
253 |         yoda: ["error", "never"],
254 |     },
255 | }];


--------------------------------------------------------------------------------
/rendered/sprout_leaves1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width">
  6 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  7 |     <title>Recursion Visualizer</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 10 |     <style>
 11 |     .node, .edge, .node text {
 12 |       visibility: hidden;
 13 |     }
 14 |     .node.activated text:first-of-type {
 15 |       visibility: visible;
 16 |     }
 17 |     .node.activated path {
 18 |       visibility: visible;
 19 |     }
 20 |     .node text.activated {
 21 |       visibility: visible;
 22 |     }
 23 |     .edge.activated {
 24 |       visibility: visible;
 25 |     }
 26 |     .svg-controls {
 27 |       width: 600px;
 28 |       display: grid;
 29 |       grid-template-rows: 1fr;
 30 |       grid-template-columns: 100px 1fr 100px;
 31 |       grid-gap: 8px;
 32 |       position: fixed;
 33 |       right: 0;
 34 |       top: 0;
 35 |       background: #80808070;
 36 |     }
 37 |     .svg-controls button:first-of-type {
 38 |       grid-row: 1;
 39 |       grid-column: 1;
 40 |     }
 41 |     .svg-controls input {
 42 |       grid-row: 1;
 43 |       grid-column: 2;
 44 |     }
 45 |     .svg-controls button:last-of-type {
 46 |       grid-row: 1;
 47 |       grid-column: 3;
 48 |     }
 49 |     </style>
 50 |   </head>
 51 |   <body>
 52 |    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 53 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 54 |  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 55 | <!-- Generated by graphviz version 2.49.0 (20210828.1703)
 56 |  -->
 57 | <!-- Pages: 1 -->
 58 | <svg width="356pt" height="224pt"
 59 |  viewBox="0.00 0.00 356.00 224.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 60 | <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 220)">
 61 | <polygon fill="white" stroke="transparent" points="-4,4 -4,-220 352,-220 352,4 -4,4"/>
 62 | <!-- 140252381745632 -->
 63 | <g id="node1" class="node">
 64 | <title>140252381745632</title>
 65 | <path fill="none" stroke="black" d="M12,-0.5C12,-0.5 134,-0.5 134,-0.5 140,-0.5 146,-6.5 146,-12.5 146,-12.5 146,-25.5 146,-25.5 146,-31.5 140,-37.5 134,-37.5 134,-37.5 12,-37.5 12,-37.5 6,-37.5 0,-31.5 0,-25.5 0,-25.5 0,-12.5 0,-12.5 0,-6.5 6,-0.5 12,-0.5"/>
 66 | <text text-anchor="middle" x="73" y="-15.6" font-family="Times,serif" font-size="13.00">sprout_leaves([2], [4, 5])</text>
 67 | </g>
 68 | <!-- 140251306129104 -->
 69 | <g id="node2" class="node">
 70 | <title>140251306129104</title>
 71 | <path fill="none" stroke="black" d="M194,-0.5C194,-0.5 316,-0.5 316,-0.5 322,-0.5 328,-6.5 328,-12.5 328,-12.5 328,-25.5 328,-25.5 328,-31.5 322,-37.5 316,-37.5 316,-37.5 194,-37.5 194,-37.5 188,-37.5 182,-31.5 182,-25.5 182,-25.5 182,-12.5 182,-12.5 182,-6.5 188,-0.5 194,-0.5"/>
 72 | <text text-anchor="middle" x="255" y="-15.6" font-family="Times,serif" font-size="13.00">sprout_leaves([3], [4, 5])</text>
 73 | </g>
 74 | <!-- 140251842498304 -->
 75 | <g id="node3" class="node">
 76 | <title>140251842498304</title>
 77 | <path fill="none" stroke="black" d="M81,-89.5C81,-89.5 247,-89.5 247,-89.5 253,-89.5 259,-95.5 259,-101.5 259,-101.5 259,-114.5 259,-114.5 259,-120.5 253,-126.5 247,-126.5 247,-126.5 81,-126.5 81,-126.5 75,-126.5 69,-120.5 69,-114.5 69,-114.5 69,-101.5 69,-101.5 69,-95.5 75,-89.5 81,-89.5"/>
 78 | <text text-anchor="middle" x="164" y="-104.6" font-family="Times,serif" font-size="13.00">sprout_leaves([1, [2], [3]], [4, 5])</text>
 79 | </g>
 80 | <!-- 140251842498304&#45;&gt;140252381745632 -->
 81 | <g id="edge2" class="edge">
 82 | <title>140251842498304&#45;&gt;140252381745632</title>
 83 | <path fill="none" stroke="black" d="M92.31,-89.42C84.33,-84.67 77.22,-78.65 72,-71 67.37,-64.21 66.22,-55.64 66.65,-47.47"/>
 84 | <polygon fill="black" stroke="black" points="70.13,-47.86 67.89,-37.51 63.18,-47 70.13,-47.86"/>
 85 | <text text-anchor="middle" x="79" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#1)</text>
 86 | </g>
 87 | <!-- 140251842498304&#45;&gt;140252381745632 -->
 88 | <g id="edge3" class="edge">
 89 | <title>140251842498304&#45;&gt;140252381745632:c</title>
 90 | <path fill="none" stroke="green" d="M124.06,-83.54C118.74,-79.66 113.56,-75.44 109,-71 98.93,-61.19 89.93,-48.19 83.45,-37.64"/>
 91 | <polygon fill="green" stroke="green" points="122.25,-86.53 132.46,-89.33 126.22,-80.77 122.25,-86.53"/>
 92 | <text text-anchor="middle" x="154" y="-59.8" font-family="Times,serif" font-size="14.00">[2, [4], [5]] (#2)</text>
 93 | </g>
 94 | <!-- 140251842498304&#45;&gt;140251306129104 -->
 95 | <g id="edge4" class="edge">
 96 | <title>140251842498304&#45;&gt;140251306129104</title>
 97 | <path fill="none" stroke="black" d="M182.42,-89.39C195.86,-76.54 214.26,-58.94 229.18,-44.69"/>
 98 | <polygon fill="black" stroke="black" points="231.8,-47.02 236.61,-37.58 226.97,-41.96 231.8,-47.02"/>
 99 | <text text-anchor="middle" x="222" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#3)</text>
100 | </g>
101 | <!-- 140251842498304&#45;&gt;140251306129104 -->
102 | <g id="edge5" class="edge">
103 | <title>140251842498304&#45;&gt;140251306129104:c</title>
104 | <path fill="none" stroke="green" d="M217.33,-84.16C223.06,-80.32 228.45,-75.94 233,-71 241.64,-61.63 247.18,-48.37 250.54,-37.58"/>
105 | <polygon fill="green" stroke="green" points="215.45,-81.21 208.76,-89.43 219.11,-87.18 215.45,-81.21"/>
106 | <text text-anchor="middle" x="288" y="-59.8" font-family="Times,serif" font-size="14.00">[3, [4], [5]] (#4)</text>
107 | </g>
108 | <!-- 99999999 -->
109 | <g id="node4" class="node">
110 | <title>99999999</title>
111 | <path fill="none" stroke="black" d="M149,-178.5C149,-178.5 179,-178.5 179,-178.5 185,-178.5 191,-184.5 191,-190.5 191,-190.5 191,-203.5 191,-203.5 191,-209.5 185,-215.5 179,-215.5 179,-215.5 149,-215.5 149,-215.5 143,-215.5 137,-209.5 137,-203.5 137,-203.5 137,-190.5 137,-190.5 137,-184.5 143,-178.5 149,-178.5"/>
112 | <text text-anchor="middle" x="164" y="-193.6" font-family="Times,serif" font-size="13.00">Result</text>
113 | </g>
114 | <!-- 99999999&#45;&gt;140251842498304 -->
115 | <g id="edge6" class="edge">
116 | <title>99999999&#45;&gt;140251842498304:c</title>
117 | <path fill="none" stroke="green" d="M164,-167.99C164,-154.5 164,-138.69 164,-126.69"/>
118 | <polygon fill="green" stroke="green" points="160.5,-168.19 164,-178.19 167.5,-168.19 160.5,-168.19"/>
119 | <text text-anchor="middle" x="256" y="-148.8" font-family="Times,serif" font-size="14.00">[1, [2, [4], [5]], [3, [4], [5]]] (#5)</text>
120 | </g>
121 | </g>
122 | </svg>
123 | 
124 | 
125 | 
126 |     <script>
127 |     
128 |         class RecursiveTreeViz {
129 |           
130 |           constructor(svg, options) {
131 |             this.svg = svg;
132 |             options = options || {};
133 |             this.startStep = options.startStep;
134 |             this.steps = [];
135 |             this.frames = {};
136 |           }
137 |           
138 |           draw() {
139 |             // Store all the frames
140 |             const frames = this.svg.querySelectorAll(".node");
141 |             for (var i = 0; i < frames.length; i++) {
142 |               const frame = frames[i];
143 |               const frameId = frame.getElementsByTagName("title")[0].textContent;
144 |               this.frames[frameId] = frame;
145 |             }
146 |         
147 |             // Determine number of steps
148 |             const edges = this.svg.querySelectorAll(".edge");
149 |             for (let i = 0; i < edges.length; i++) {
150 |               const edge = edges[i];
151 |               const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
152 |               const edgeText = edge.getElementsByTagName("text")[0].textContent;
153 | 
154 |               let stepNum, isReturn;
155 |               stepNum = parseInt(edgeText.split("(#")[1], 10); 
156 |               if (edgeTitle.endsWith(":c")) {
157 |                 isReturn = true;
158 |                 edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
159 |               } else {
160 |                 edge.getElementsByTagName("text")[0].textContent = "";
161 |                 isReturn = false;
162 |               }
163 |               const edgeFrames = edgeTitle.split(":c")[0];
164 |               const parentFrameId = edgeFrames.split("->")[0];
165 |               const childFrameId = edgeFrames.split("->")[1];
166 |               this.steps[stepNum] = {
167 |                 parentFrame: this.frames[parentFrameId],
168 |                 childFrame: this.frames[childFrameId],
169 |                 edge: edge,
170 |                 isReturn: isReturn
171 |               };
172 |             }
173 |               
174 |             if (this.startStep == null || isNaN(this.startStep)) {
175 |               this.currentStep = this.steps.length - 1;
176 |             } else {
177 |               this.currentStep = this.startStep;
178 |             }
179 |             this.drawControls();
180 |             this.toggleSteps();
181 |           }
182 |           
183 |           
184 |           drawControls() {
185 |             var controlsDiv = document.createElement("div");
186 |             controlsDiv.classList.add("svg-controls");
187 |             
188 |             this.prevButton = document.createElement("button");
189 |             this.prevButton.innerText = "< Prev";
190 |             if (this.currentStep <= 0) {
191 |               this.prevButton.setAttribute("disabled", "disabled");
192 |             }
193 |             this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
194 |             
195 |             this.nextButton = document.createElement("button");
196 |             this.nextButton.innerText = "> Next";
197 |             if (this.currentStep >= this.steps.length - 1) {
198 |               this.nextButton.setAttribute("disabled", "disabled");
199 |             }
200 |             this.nextButton.addEventListener("click", this.onNextClick.bind(this));
201 |         
202 |             this.slider = document.createElement("input");
203 |             this.slider.setAttribute("type", "range");
204 |             this.slider.setAttribute("min", 0);
205 |             this.slider.setAttribute("max", this.steps.length - 1);
206 |             this.slider.setAttribute("value", this.currentStep);
207 |             this.slider.addEventListener("change", this.onSliderChange.bind(this));
208 |         
209 |             controlsDiv.appendChild(this.prevButton);
210 |             controlsDiv.appendChild(this.slider);
211 |             controlsDiv.appendChild(this.nextButton);
212 |         
213 |             this.svg.after(controlsDiv);
214 |           }
215 |         
216 |           toggleSteps() {
217 |             console.log(this.steps);
218 |             this.steps.forEach((step, stepI) => {
219 |               if (stepI == 1) {
220 |                  step.parentFrame && step.parentFrame.classList.add("activated");
221 |               }
222 |               if (stepI <= this.currentStep) {
223 |                  step.edge.classList.add("activated");
224 |                  step.childFrame.classList.add("activated");
225 |               } else {
226 |                  step.edge.classList.remove("activated");
227 |                  !step.isReturn && step.childFrame.classList.remove("activated");
228 |               }
229 |             })
230 |           }
231 |           
232 |           onSliderChange(event) {
233 |             this.currentStep = parseInt(event.target.value, 10);
234 |             this.fixButtons();
235 |             this.toggleSteps();
236 |           }
237 |         
238 |           onPrevClick(event) {
239 |             this.currentStep--;
240 |             this.fixButtons();
241 |             this.slider.value = this.currentStep;
242 |             this.toggleSteps();
243 |           }
244 | 
245 |           onNextClick(event) {
246 |             this.currentStep++;
247 |             this.fixButtons();
248 |             this.slider.value = this.currentStep;
249 |             this.toggleSteps();
250 |           }
251 |           
252 |           fixButtons() {
253 |             if (this.currentStep === 0) {
254 |               this.prevButton.setAttribute("disabled", "disabled");
255 |             }
256 |             if (this.currentStep < this.steps.length - 1) {
257 |               this.nextButton.removeAttribute("disabled");
258 |             }
259 |             if (this.currentStep > 0) {
260 |               this.prevButton.removeAttribute("disabled");
261 |             }
262 |             if (this.currentStep === this.steps.length - 1) {
263 |               this.nextButton.setAttribute("disabled", "disabled");
264 |             }
265 |           }
266 |         }
267 |         
268 |         new RecursiveTreeViz(document.getElementsByTagName("svg")[0]).draw()
269 | 
270 |         </script>
271 |   </body>
272 | </html>
273 | 


--------------------------------------------------------------------------------
/rendered/sprout_leaves2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width">
  7 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  8 |     <title>Recursion Visualizer</title>
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 10 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 11 |     <style>
 12 |     .node, .edge, .node text {
 13 |       visibility: hidden;
 14 |     }
 15 |     .node.activated text:first-of-type {
 16 |       visibility: visible;
 17 |     }
 18 |     .node.activated path {
 19 |       visibility: visible;
 20 |     }
 21 |     .node text.activated {
 22 |       visibility: visible;
 23 |     }
 24 |     .edge.activated {
 25 |       visibility: visible;
 26 |     }
 27 |     .svg-controls {
 28 |       width: 600px;
 29 |       display: grid;
 30 |       grid-template-rows: 1fr;
 31 |       grid-template-columns: 100px 1fr 100px;
 32 |       grid-gap: 8px;
 33 |       position: fixed;
 34 |       right: 0;
 35 |       top: 0;
 36 |       background: #80808070;
 37 |     }
 38 |     .svg-controls button:first-of-type {
 39 |       grid-row: 1;
 40 |       grid-column: 1;
 41 |     }
 42 |     .svg-controls input {
 43 |       grid-row: 1;
 44 |       grid-column: 2;
 45 |     }
 46 |     .svg-controls button:last-of-type {
 47 |       grid-row: 1;
 48 |       grid-column: 3;
 49 |     }
 50 |     </style>
 51 |   </head>
 52 |   <body>
 53 |    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 54 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 55 |  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 56 | <!-- Generated by graphviz version 2.49.0 (20210828.1703)
 57 |  -->
 58 | <!-- Pages: 1 -->
 59 | <svg width="270pt" height="313pt"
 60 |  viewBox="0.00 0.00 269.50 313.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 61 | <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 309)">
 62 | <polygon fill="white" stroke="transparent" points="-4,4 -4,-309 265.5,-309 265.5,4 -4,4"/>
 63 | <!-- 140251306112112 -->
 64 | <g id="node1" class="node">
 65 | <title>140251306112112</title>
 66 | <path fill="none" stroke="black" d="M12,-178.5C12,-178.5 191,-178.5 191,-178.5 197,-178.5 203,-184.5 203,-190.5 203,-190.5 203,-203.5 203,-203.5 203,-209.5 197,-215.5 191,-215.5 191,-215.5 12,-215.5 12,-215.5 6,-215.5 0,-209.5 0,-203.5 0,-203.5 0,-190.5 0,-190.5 0,-184.5 6,-178.5 12,-178.5"/>
 67 | <text text-anchor="middle" x="101.5" y="-193.6" font-family="Times,serif" font-size="13.00">sprout_leaves([1, [2, [3]]], [6, 1, 2])</text>
 68 | </g>
 69 | <!-- 140251842495488 -->
 70 | <g id="node2" class="node">
 71 | <title>140251842495488</title>
 72 | <path fill="none" stroke="black" d="M23,-89.5C23,-89.5 180,-89.5 180,-89.5 186,-89.5 192,-95.5 192,-101.5 192,-101.5 192,-114.5 192,-114.5 192,-120.5 186,-126.5 180,-126.5 180,-126.5 23,-126.5 23,-126.5 17,-126.5 11,-120.5 11,-114.5 11,-114.5 11,-101.5 11,-101.5 11,-95.5 17,-89.5 23,-89.5"/>
 73 | <text text-anchor="middle" x="101.5" y="-104.6" font-family="Times,serif" font-size="13.00">sprout_leaves([2, [3]], [6, 1, 2])</text>
 74 | </g>
 75 | <!-- 140251306112112&#45;&gt;140251842495488 -->
 76 | <g id="edge1" class="edge">
 77 | <title>140251306112112&#45;&gt;140251842495488</title>
 78 | <path fill="none" stroke="black" d="M91.22,-178.25C88.48,-172.6 85.89,-166.2 84.5,-160 82.72,-152.06 84.12,-143.61 86.75,-135.92"/>
 79 | <polygon fill="black" stroke="black" points="89.98,-137.27 90.58,-126.69 83.52,-134.58 89.98,-137.27"/>
 80 | <text text-anchor="middle" x="91.5" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#1)</text>
 81 | </g>
 82 | <!-- 140251306112112&#45;&gt;140251842495488 -->
 83 | <g id="edge2" class="edge">
 84 | <title>140251306112112&#45;&gt;140251842495488:c</title>
 85 | <path fill="none" stroke="green" d="M101.5,-167.99C101.5,-154.5 101.5,-138.69 101.5,-126.69"/>
 86 | <polygon fill="green" stroke="green" points="98,-168.19 101.5,-178.19 105,-168.19 98,-168.19"/>
 87 | <text text-anchor="middle" x="170" y="-148.8" font-family="Times,serif" font-size="14.00">[2, [3, [6], [1], [2]]] (#4)</text>
 88 | </g>
 89 | <!-- 140251306113168 -->
 90 | <g id="node3" class="node">
 91 | <title>140251306113168</title>
 92 | <path fill="none" stroke="black" d="M34,-0.5C34,-0.5 169,-0.5 169,-0.5 175,-0.5 181,-6.5 181,-12.5 181,-12.5 181,-25.5 181,-25.5 181,-31.5 175,-37.5 169,-37.5 169,-37.5 34,-37.5 34,-37.5 28,-37.5 22,-31.5 22,-25.5 22,-25.5 22,-12.5 22,-12.5 22,-6.5 28,-0.5 34,-0.5"/>
 93 | <text text-anchor="middle" x="101.5" y="-15.6" font-family="Times,serif" font-size="13.00">sprout_leaves([3], [6, 1, 2])</text>
 94 | </g>
 95 | <!-- 140251842495488&#45;&gt;140251306113168 -->
 96 | <g id="edge3" class="edge">
 97 | <title>140251842495488&#45;&gt;140251306113168</title>
 98 | <path fill="none" stroke="black" d="M91.22,-89.25C88.48,-83.6 85.89,-77.2 84.5,-71 82.72,-63.06 84.12,-54.61 86.75,-46.92"/>
 99 | <polygon fill="black" stroke="black" points="89.98,-48.27 90.58,-37.69 83.52,-45.58 89.98,-48.27"/>
100 | <text text-anchor="middle" x="91.5" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#2)</text>
101 | </g>
102 | <!-- 140251842495488&#45;&gt;140251306113168 -->
103 | <g id="edge4" class="edge">
104 | <title>140251842495488&#45;&gt;140251306113168:c</title>
105 | <path fill="none" stroke="green" d="M101.5,-78.99C101.5,-65.5 101.5,-49.69 101.5,-37.69"/>
106 | <polygon fill="green" stroke="green" points="98,-79.19 101.5,-89.19 105,-79.19 98,-79.19"/>
107 | <text text-anchor="middle" x="158.5" y="-59.8" font-family="Times,serif" font-size="14.00">[3, [6], [1], [2]] (#3)</text>
108 | </g>
109 | <!-- 99999999 -->
110 | <g id="node4" class="node">
111 | <title>99999999</title>
112 | <path fill="none" stroke="black" d="M86.5,-267.5C86.5,-267.5 116.5,-267.5 116.5,-267.5 122.5,-267.5 128.5,-273.5 128.5,-279.5 128.5,-279.5 128.5,-292.5 128.5,-292.5 128.5,-298.5 122.5,-304.5 116.5,-304.5 116.5,-304.5 86.5,-304.5 86.5,-304.5 80.5,-304.5 74.5,-298.5 74.5,-292.5 74.5,-292.5 74.5,-279.5 74.5,-279.5 74.5,-273.5 80.5,-267.5 86.5,-267.5"/>
113 | <text text-anchor="middle" x="101.5" y="-282.6" font-family="Times,serif" font-size="13.00">Result</text>
114 | </g>
115 | <!-- 99999999&#45;&gt;140251306112112 -->
116 | <g id="edge5" class="edge">
117 | <title>99999999&#45;&gt;140251306112112:c</title>
118 | <path fill="none" stroke="green" d="M101.5,-256.99C101.5,-243.5 101.5,-227.69 101.5,-215.69"/>
119 | <polygon fill="green" stroke="green" points="98,-257.19 101.5,-267.19 105,-257.19 98,-257.19"/>
120 | <text text-anchor="middle" x="181.5" y="-237.8" font-family="Times,serif" font-size="14.00">[1, [2, [3, [6], [1], [2]]]] (#5)</text>
121 | </g>
122 | </g>
123 | </svg>
124 | 
125 | 
126 | 
127 |     <script>
128 |     
129 |         class RecursiveTreeViz {
130 |           
131 |           constructor(svg, options) {
132 |             this.svg = svg;
133 |             options = options || {};
134 |             this.startStep = options.startStep;
135 |             this.steps = [];
136 |             this.frames = {};
137 |           }
138 |           
139 |           draw() {
140 |             // Store all the frames
141 |             const frames = this.svg.querySelectorAll(".node");
142 |             for (var i = 0; i < frames.length; i++) {
143 |               const frame = frames[i];
144 |               const frameId = frame.getElementsByTagName("title")[0].textContent;
145 |               this.frames[frameId] = frame;
146 |             }
147 |         
148 |             // Determine number of steps
149 |             const edges = this.svg.querySelectorAll(".edge");
150 |             for (let i = 0; i < edges.length; i++) {
151 |               const edge = edges[i];
152 |               const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
153 |               const edgeText = edge.getElementsByTagName("text")[0].textContent;
154 | 
155 |               let stepNum, isReturn;
156 |               stepNum = parseInt(edgeText.split("(#")[1], 10); 
157 |               if (edgeTitle.endsWith(":c")) {
158 |                 isReturn = true;
159 |                 edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
160 |               } else {
161 |                 edge.getElementsByTagName("text")[0].textContent = "";
162 |                 isReturn = false;
163 |               }
164 |               const edgeFrames = edgeTitle.split(":c")[0];
165 |               const parentFrameId = edgeFrames.split("->")[0];
166 |               const childFrameId = edgeFrames.split("->")[1];
167 |               this.steps[stepNum] = {
168 |                 parentFrame: this.frames[parentFrameId],
169 |                 childFrame: this.frames[childFrameId],
170 |                 edge: edge,
171 |                 isReturn: isReturn
172 |               };
173 |             }
174 |               
175 |             if (this.startStep == null || isNaN(this.startStep)) {
176 |               this.currentStep = this.steps.length - 1;
177 |             } else {
178 |               this.currentStep = this.startStep;
179 |             }
180 |             this.drawControls();
181 |             this.toggleSteps();
182 |           }
183 |           
184 |           
185 |           drawControls() {
186 |             var controlsDiv = document.createElement("div");
187 |             controlsDiv.classList.add("svg-controls");
188 |             
189 |             this.prevButton = document.createElement("button");
190 |             this.prevButton.innerText = "< Prev";
191 |             if (this.currentStep <= 0) {
192 |               this.prevButton.setAttribute("disabled", "disabled");
193 |             }
194 |             this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
195 |             
196 |             this.nextButton = document.createElement("button");
197 |             this.nextButton.innerText = "> Next";
198 |             if (this.currentStep >= this.steps.length - 1) {
199 |               this.nextButton.setAttribute("disabled", "disabled");
200 |             }
201 |             this.nextButton.addEventListener("click", this.onNextClick.bind(this));
202 |         
203 |             this.slider = document.createElement("input");
204 |             this.slider.setAttribute("type", "range");
205 |             this.slider.setAttribute("min", 0);
206 |             this.slider.setAttribute("max", this.steps.length - 1);
207 |             this.slider.setAttribute("value", this.currentStep);
208 |             this.slider.addEventListener("change", this.onSliderChange.bind(this));
209 |         
210 |             controlsDiv.appendChild(this.prevButton);
211 |             controlsDiv.appendChild(this.slider);
212 |             controlsDiv.appendChild(this.nextButton);
213 |         
214 |             this.svg.after(controlsDiv);
215 |           }
216 |         
217 |           toggleSteps() {
218 |             console.log(this.steps);
219 |             this.steps.forEach((step, stepI) => {
220 |               if (stepI == 1) {
221 |                  step.parentFrame && step.parentFrame.classList.add("activated");
222 |               }
223 |               if (stepI <= this.currentStep) {
224 |                  step.edge.classList.add("activated");
225 |                  step.childFrame.classList.add("activated");
226 |               } else {
227 |                  step.edge.classList.remove("activated");
228 |                  !step.isReturn && step.childFrame.classList.remove("activated");
229 |               }
230 |             })
231 |           }
232 |           
233 |           onSliderChange(event) {
234 |             this.currentStep = parseInt(event.target.value, 10);
235 |             this.fixButtons();
236 |             this.toggleSteps();
237 |           }
238 |         
239 |           onPrevClick(event) {
240 |             this.currentStep--;
241 |             this.fixButtons();
242 |             this.slider.value = this.currentStep;
243 |             this.toggleSteps();
244 |           }
245 | 
246 |           onNextClick(event) {
247 |             this.currentStep++;
248 |             this.fixButtons();
249 |             this.slider.value = this.currentStep;
250 |             this.toggleSteps();
251 |           }
252 |           
253 |           fixButtons() {
254 |             if (this.currentStep === 0) {
255 |               this.prevButton.setAttribute("disabled", "disabled");
256 |             }
257 |             if (this.currentStep < this.steps.length - 1) {
258 |               this.nextButton.removeAttribute("disabled");
259 |             }
260 |             if (this.currentStep > 0) {
261 |               this.prevButton.removeAttribute("disabled");
262 |             }
263 |             if (this.currentStep === this.steps.length - 1) {
264 |               this.nextButton.setAttribute("disabled", "disabled");
265 |             }
266 |           }
267 |         }
268 |         
269 |         new RecursiveTreeViz(document.getElementsByTagName("svg")[0]).draw()
270 | 
271 |         </script>
272 |   </body>
273 | </html>
274 | 


--------------------------------------------------------------------------------
/old/make_gasket2.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "label": "mg(2, 0, 0, 300)",
  3 |   "id": "0x7f888ca8a240->0x7f888b761440",
  4 |   "children": [
  5 |     {
  6 |       "label": "mg(1, 0, 0, 150.0)",
  7 |       "id": "0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
  8 |       "children": [
  9 |         {
 10 |           "label": "mg(0, 0, 0, 75.0)",
 11 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 12 |           "children": [
 13 |             {
 14 |               "label": "t(0, 0, 75.0)",
 15 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 16 |               "children": []
 17 |             },
 18 |             {
 19 |               "label": "t(75.0, 0, 75.0)",
 20 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 21 |               "children": []
 22 |             },
 23 |             {
 24 |               "label": "t(37.5, 64.9519052838329, 75.0)",
 25 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 26 |               "children": []
 27 |             },
 28 |             {
 29 |               "label": "t(75.0, 129.9038105676658, 75.0)",
 30 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 31 |               "children": []
 32 |             },
 33 |             {
 34 |               "label": "t(150.0, 129.9038105676658, 75.0)",
 35 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 36 |               "children": []
 37 |             },
 38 |             {
 39 |               "label": "t(112.5, 194.8557158514987, 75.0)",
 40 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 41 |               "children": []
 42 |             }
 43 |           ]
 44 |         },
 45 |         {
 46 |           "label": "mg(0, 75.0, 0, 75.0)",
 47 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 48 |           "children": [
 49 |             {
 50 |               "label": "t(75.0, 0, 75.0)",
 51 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 52 |               "children": []
 53 |             },
 54 |             {
 55 |               "label": "t(37.5, 64.9519052838329, 75.0)",
 56 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 57 |               "children": []
 58 |             },
 59 |             {
 60 |               "label": "t(75.0, 129.9038105676658, 75.0)",
 61 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 62 |               "children": []
 63 |             },
 64 |             {
 65 |               "label": "t(150.0, 129.9038105676658, 75.0)",
 66 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 67 |               "children": []
 68 |             },
 69 |             {
 70 |               "label": "t(112.5, 194.8557158514987, 75.0)",
 71 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 72 |               "children": []
 73 |             }
 74 |           ]
 75 |         },
 76 |         {
 77 |           "label": "mg(0, 37.5, 64.9519052838329, 75.0)",
 78 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 79 |           "children": [
 80 |             {
 81 |               "label": "t(37.5, 64.9519052838329, 75.0)",
 82 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 83 |               "children": []
 84 |             },
 85 |             {
 86 |               "label": "t(75.0, 129.9038105676658, 75.0)",
 87 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 88 |               "children": []
 89 |             },
 90 |             {
 91 |               "label": "t(150.0, 129.9038105676658, 75.0)",
 92 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 93 |               "children": []
 94 |             },
 95 |             {
 96 |               "label": "t(112.5, 194.8557158514987, 75.0)",
 97 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
 98 |               "children": []
 99 |             }
100 |           ]
101 |         },
102 |         {
103 |           "label": "mg(0, 75.0, 129.9038105676658, 75.0)",
104 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
105 |           "children": [
106 |             {
107 |               "label": "t(75.0, 129.9038105676658, 75.0)",
108 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
109 |               "children": []
110 |             },
111 |             {
112 |               "label": "t(75.0, 129.9038105676658, 75.0)",
113 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
114 |               "children": []
115 |             },
116 |             {
117 |               "label": "t(150.0, 129.9038105676658, 75.0)",
118 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
119 |               "children": []
120 |             },
121 |             {
122 |               "label": "t(150.0, 129.9038105676658, 75.0)",
123 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
124 |               "children": []
125 |             },
126 |             {
127 |               "label": "t(112.5, 194.8557158514987, 75.0)",
128 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
129 |               "children": []
130 |             },
131 |             {
132 |               "label": "t(112.5, 194.8557158514987, 75.0)",
133 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
134 |               "children": []
135 |             }
136 |           ]
137 |         },
138 |         {
139 |           "label": "mg(0, 150.0, 129.9038105676658, 75.0)",
140 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
141 |           "children": [
142 |             {
143 |               "label": "t(150.0, 129.9038105676658, 75.0)",
144 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
145 |               "children": []
146 |             },
147 |             {
148 |               "label": "t(150.0, 129.9038105676658, 75.0)",
149 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
150 |               "children": []
151 |             },
152 |             {
153 |               "label": "t(112.5, 194.8557158514987, 75.0)",
154 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
155 |               "children": []
156 |             },
157 |             {
158 |               "label": "t(112.5, 194.8557158514987, 75.0)",
159 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
160 |               "children": []
161 |             }
162 |           ]
163 |         },
164 |         {
165 |           "label": "mg(0, 112.5, 194.8557158514987, 75.0)",
166 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
167 |           "children": [
168 |             {
169 |               "label": "t(112.5, 194.8557158514987, 75.0)",
170 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
171 |               "children": []
172 |             },
173 |             {
174 |               "label": "t(112.5, 194.8557158514987, 75.0)",
175 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
176 |               "children": []
177 |             }
178 |           ]
179 |         }
180 |       ]
181 |     },
182 |     {
183 |       "label": "mg(1, 150.0, 0, 150.0)",
184 |       "id": "0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
185 |       "children": [
186 |         {
187 |           "label": "mg(0, 150.0, 0, 75.0)",
188 |           "id": "0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
189 |           "children": [
190 |             {
191 |               "label": "t(150.0, 0, 75.0)",
192 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
193 |               "children": []
194 |             },
195 |             {
196 |               "label": "t(225.0, 0, 75.0)",
197 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
198 |               "children": []
199 |             },
200 |             {
201 |               "label": "t(187.5, 64.9519052838329, 75.0)",
202 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
203 |               "children": []
204 |             }
205 |           ]
206 |         },
207 |         {
208 |           "label": "mg(0, 225.0, 0, 75.0)",
209 |           "id": "0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
210 |           "children": [
211 |             {
212 |               "label": "t(225.0, 0, 75.0)",
213 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
214 |               "children": []
215 |             },
216 |             {
217 |               "label": "t(187.5, 64.9519052838329, 75.0)",
218 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
219 |               "children": []
220 |             }
221 |           ]
222 |         },
223 |         {
224 |           "label": "mg(0, 187.5, 64.9519052838329, 75.0)",
225 |           "id": "0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
226 |           "children": [
227 |             {
228 |               "label": "t(187.5, 64.9519052838329, 75.0)",
229 |               "id": "0x7f888cc3cc80->0x7f888b41f560->0x7f888cc74040->0x7f888ca8a240->0x7f888b761440",
230 |               "children": []
231 |             }
232 |           ]
233 |         }
234 |       ]
235 |     },
236 |     {
237 |       "label": "mg(1, 75.0, 129.9038105676658, 150.0)",
238 |       "id": "0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
239 |       "children": [
240 |         {
241 |           "label": "mg(0, 75.0, 129.9038105676658, 75.0)",
242 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
243 |           "children": [
244 |             {
245 |               "label": "t(75.0, 129.9038105676658, 75.0)",
246 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
247 |               "children": []
248 |             },
249 |             {
250 |               "label": "t(75.0, 129.9038105676658, 75.0)",
251 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
252 |               "children": []
253 |             },
254 |             {
255 |               "label": "t(150.0, 129.9038105676658, 75.0)",
256 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
257 |               "children": []
258 |             },
259 |             {
260 |               "label": "t(150.0, 129.9038105676658, 75.0)",
261 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
262 |               "children": []
263 |             },
264 |             {
265 |               "label": "t(112.5, 194.8557158514987, 75.0)",
266 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
267 |               "children": []
268 |             },
269 |             {
270 |               "label": "t(112.5, 194.8557158514987, 75.0)",
271 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
272 |               "children": []
273 |             }
274 |           ]
275 |         },
276 |         {
277 |           "label": "mg(0, 150.0, 129.9038105676658, 75.0)",
278 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
279 |           "children": [
280 |             {
281 |               "label": "t(150.0, 129.9038105676658, 75.0)",
282 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
283 |               "children": []
284 |             },
285 |             {
286 |               "label": "t(150.0, 129.9038105676658, 75.0)",
287 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
288 |               "children": []
289 |             },
290 |             {
291 |               "label": "t(112.5, 194.8557158514987, 75.0)",
292 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
293 |               "children": []
294 |             },
295 |             {
296 |               "label": "t(112.5, 194.8557158514987, 75.0)",
297 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
298 |               "children": []
299 |             }
300 |           ]
301 |         },
302 |         {
303 |           "label": "mg(0, 112.5, 194.8557158514987, 75.0)",
304 |           "id": "0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
305 |           "children": [
306 |             {
307 |               "label": "t(112.5, 194.8557158514987, 75.0)",
308 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
309 |               "children": []
310 |             },
311 |             {
312 |               "label": "t(112.5, 194.8557158514987, 75.0)",
313 |               "id": "0x7f888cc3cc80->0x7f888cc74040->0x7f888b41f560->0x7f888ca8a240->0x7f888b761440",
314 |               "children": []
315 |             }
316 |           ]
317 |         }
318 |       ]
319 |     }
320 |   ]
321 | }
322 | 


--------------------------------------------------------------------------------
/rendered/fact3.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width">
  7 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  8 |     <title>Recursion Visualizer</title>
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 10 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 11 |     <style>
 12 |     .node, .edge, .node text {
 13 |       visibility: hidden;
 14 |     }
 15 |     .node.activated text:first-of-type {
 16 |       visibility: visible;
 17 |     }
 18 |     .node.activated path {
 19 |       visibility: visible;
 20 |     }
 21 |     .node text.activated {
 22 |       visibility: visible;
 23 |     }
 24 |     .edge.activated {
 25 |       visibility: visible;
 26 |     }
 27 |     .svg-controls {
 28 |       width: 600px;
 29 |       display: grid;
 30 |       grid-template-rows: 1fr;
 31 |       grid-template-columns: 100px 1fr 100px;
 32 |       grid-gap: 8px;
 33 |       position: fixed;
 34 |       right: 0;
 35 |       top: 0;
 36 |       background: #80808070;
 37 |     }
 38 |     .svg-controls button:first-of-type {
 39 |       grid-row: 1;
 40 |       grid-column: 1;
 41 |     }
 42 |     .svg-controls input {
 43 |       grid-row: 1;
 44 |       grid-column: 2;
 45 |     }
 46 |     .svg-controls button:last-of-type {
 47 |       grid-row: 1;
 48 |       grid-column: 3;
 49 |     }
 50 |     </style>
 51 |   </head>
 52 |   <body>
 53 |    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 54 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 55 |  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 56 | <!-- Generated by graphviz version 2.49.0 (20210828.1703)
 57 |  -->
 58 | <!-- Pages: 1 -->
 59 | <svg width="69pt" height="402pt"
 60 |  viewBox="0.00 0.00 69.00 402.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 61 | <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 398)">
 62 | <polygon fill="white" stroke="transparent" points="-4,4 -4,-398 65,-398 65,4 -4,4"/>
 63 | <!-- 140268176730032 -->
 64 | <g id="node1" class="node">
 65 | <title>140268176730032</title>
 66 | <path fill="none" stroke="black" d="M12,-267.5C12,-267.5 42,-267.5 42,-267.5 48,-267.5 54,-273.5 54,-279.5 54,-279.5 54,-292.5 54,-292.5 54,-298.5 48,-304.5 42,-304.5 42,-304.5 12,-304.5 12,-304.5 6,-304.5 0,-298.5 0,-292.5 0,-292.5 0,-279.5 0,-279.5 0,-273.5 6,-267.5 12,-267.5"/>
 67 | <text text-anchor="middle" x="27" y="-282.6" font-family="Times,serif" font-size="13.00">fact(3)</text>
 68 | </g>
 69 | <!-- 140268176708800 -->
 70 | <g id="node2" class="node">
 71 | <title>140268176708800</title>
 72 | <path fill="none" stroke="black" d="M12,-178.5C12,-178.5 42,-178.5 42,-178.5 48,-178.5 54,-184.5 54,-190.5 54,-190.5 54,-203.5 54,-203.5 54,-209.5 48,-215.5 42,-215.5 42,-215.5 12,-215.5 12,-215.5 6,-215.5 0,-209.5 0,-203.5 0,-203.5 0,-190.5 0,-190.5 0,-184.5 6,-178.5 12,-178.5"/>
 73 | <text text-anchor="middle" x="27" y="-193.6" font-family="Times,serif" font-size="13.00">fact(2)</text>
 74 | </g>
 75 | <!-- 140268176730032&#45;&gt;140268176708800 -->
 76 | <g id="edge1" class="edge">
 77 | <title>140268176730032&#45;&gt;140268176708800</title>
 78 | <path fill="none" stroke="black" d="M16.08,-267.31C11.38,-257.61 7.47,-245.29 10,-234 10.67,-230.99 11.63,-227.94 12.75,-224.96"/>
 79 | <polygon fill="black" stroke="black" points="15.97,-226.32 16.72,-215.75 9.54,-223.55 15.97,-226.32"/>
 80 | <text text-anchor="middle" x="17" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#1)</text>
 81 | </g>
 82 | <!-- 140268176730032&#45;&gt;140268176708800 -->
 83 | <g id="edge2" class="edge">
 84 | <title>140268176730032&#45;&gt;140268176708800:c</title>
 85 | <path fill="none" stroke="green" d="M27,-256.99C27,-243.5 27,-227.69 27,-215.69"/>
 86 | <polygon fill="green" stroke="green" points="23.5,-257.19 27,-267.19 30.5,-257.19 23.5,-257.19"/>
 87 | <text text-anchor="middle" x="44" y="-237.8" font-family="Times,serif" font-size="14.00">2 (#6)</text>
 88 | </g>
 89 | <!-- 140268176651776 -->
 90 | <g id="node3" class="node">
 91 | <title>140268176651776</title>
 92 | <path fill="none" stroke="black" d="M12,-89.5C12,-89.5 42,-89.5 42,-89.5 48,-89.5 54,-95.5 54,-101.5 54,-101.5 54,-114.5 54,-114.5 54,-120.5 48,-126.5 42,-126.5 42,-126.5 12,-126.5 12,-126.5 6,-126.5 0,-120.5 0,-114.5 0,-114.5 0,-101.5 0,-101.5 0,-95.5 6,-89.5 12,-89.5"/>
 93 | <text text-anchor="middle" x="27" y="-104.6" font-family="Times,serif" font-size="13.00">fact(1)</text>
 94 | </g>
 95 | <!-- 140268176708800&#45;&gt;140268176651776 -->
 96 | <g id="edge3" class="edge">
 97 | <title>140268176708800&#45;&gt;140268176651776</title>
 98 | <path fill="none" stroke="black" d="M16.72,-178.25C13.98,-172.6 11.39,-166.2 10,-160 8.22,-152.06 9.62,-143.61 12.25,-135.92"/>
 99 | <polygon fill="black" stroke="black" points="15.48,-137.27 16.08,-126.69 9.02,-134.58 15.48,-137.27"/>
100 | <text text-anchor="middle" x="17" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#2)</text>
101 | </g>
102 | <!-- 140268176708800&#45;&gt;140268176651776 -->
103 | <g id="edge4" class="edge">
104 | <title>140268176708800&#45;&gt;140268176651776:c</title>
105 | <path fill="none" stroke="green" d="M27,-167.99C27,-154.5 27,-138.69 27,-126.69"/>
106 | <polygon fill="green" stroke="green" points="23.5,-168.19 27,-178.19 30.5,-168.19 23.5,-168.19"/>
107 | <text text-anchor="middle" x="44" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#5)</text>
108 | </g>
109 | <!-- 140269251428992 -->
110 | <g id="node4" class="node">
111 | <title>140269251428992</title>
112 | <path fill="none" stroke="black" d="M12,-0.5C12,-0.5 42,-0.5 42,-0.5 48,-0.5 54,-6.5 54,-12.5 54,-12.5 54,-25.5 54,-25.5 54,-31.5 48,-37.5 42,-37.5 42,-37.5 12,-37.5 12,-37.5 6,-37.5 0,-31.5 0,-25.5 0,-25.5 0,-12.5 0,-12.5 0,-6.5 6,-0.5 12,-0.5"/>
113 | <text text-anchor="middle" x="27" y="-15.6" font-family="Times,serif" font-size="13.00">fact(0)</text>
114 | </g>
115 | <!-- 140268176651776&#45;&gt;140269251428992 -->
116 | <g id="edge5" class="edge">
117 | <title>140268176651776&#45;&gt;140269251428992</title>
118 | <path fill="none" stroke="black" d="M16.72,-89.25C13.98,-83.6 11.39,-77.2 10,-71 8.22,-63.06 9.62,-54.61 12.25,-46.92"/>
119 | <polygon fill="black" stroke="black" points="15.48,-48.27 16.08,-37.69 9.02,-45.58 15.48,-48.27"/>
120 | <text text-anchor="middle" x="17" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#3)</text>
121 | </g>
122 | <!-- 140268176651776&#45;&gt;140269251428992 -->
123 | <g id="edge6" class="edge">
124 | <title>140268176651776&#45;&gt;140269251428992:c</title>
125 | <path fill="none" stroke="green" d="M27,-78.99C27,-65.5 27,-49.69 27,-37.69"/>
126 | <polygon fill="green" stroke="green" points="23.5,-79.19 27,-89.19 30.5,-79.19 23.5,-79.19"/>
127 | <text text-anchor="middle" x="44" y="-59.8" font-family="Times,serif" font-size="14.00">1 (#4)</text>
128 | </g>
129 | <!-- 99999999 -->
130 | <g id="node5" class="node">
131 | <title>99999999</title>
132 | <path fill="none" stroke="black" d="M12,-356.5C12,-356.5 42,-356.5 42,-356.5 48,-356.5 54,-362.5 54,-368.5 54,-368.5 54,-381.5 54,-381.5 54,-387.5 48,-393.5 42,-393.5 42,-393.5 12,-393.5 12,-393.5 6,-393.5 0,-387.5 0,-381.5 0,-381.5 0,-368.5 0,-368.5 0,-362.5 6,-356.5 12,-356.5"/>
133 | <text text-anchor="middle" x="27" y="-371.6" font-family="Times,serif" font-size="13.00">Result</text>
134 | </g>
135 | <!-- 99999999&#45;&gt;140268176730032 -->
136 | <g id="edge7" class="edge">
137 | <title>99999999&#45;&gt;140268176730032:c</title>
138 | <path fill="none" stroke="green" d="M27,-345.99C27,-332.5 27,-316.69 27,-304.69"/>
139 | <polygon fill="green" stroke="green" points="23.5,-346.19 27,-356.19 30.5,-346.19 23.5,-346.19"/>
140 | <text text-anchor="middle" x="44" y="-326.8" font-family="Times,serif" font-size="14.00">6 (#7)</text>
141 | </g>
142 | </g>
143 | </svg>
144 | 
145 | 
146 | 
147 |     <script>
148 |     
149 |         class RecursiveTreeViz {
150 |           
151 |           constructor(svg, options) {
152 |             this.svg = svg;
153 |             options = options || {};
154 |             this.startStep = options.startStep;
155 |             this.steps = [];
156 |             this.frames = {};
157 |           }
158 |           
159 |           draw() {
160 |             // Store all the frames
161 |             const frames = this.svg.querySelectorAll(".node");
162 |             for (var i = 0; i < frames.length; i++) {
163 |               const frame = frames[i];
164 |               const frameId = frame.getElementsByTagName("title")[0].textContent;
165 |               this.frames[frameId] = frame;
166 |             }
167 |         
168 |             // Determine number of steps
169 |             const edges = this.svg.querySelectorAll(".edge");
170 |             for (let i = 0; i < edges.length; i++) {
171 |               const edge = edges[i];
172 |               const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
173 |               const edgeText = edge.getElementsByTagName("text")[0].textContent;
174 | 
175 |               let stepNum, isReturn;
176 |               stepNum = parseInt(edgeText.split("(#")[1], 10); 
177 |               if (edgeTitle.endsWith(":c")) {
178 |                 isReturn = true;
179 |                 edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
180 |               } else {
181 |                 edge.getElementsByTagName("text")[0].textContent = "";
182 |                 isReturn = false;
183 |               }
184 |               const edgeFrames = edgeTitle.split(":c")[0];
185 |               const parentFrameId = edgeFrames.split("->")[0];
186 |               const childFrameId = edgeFrames.split("->")[1];
187 |               this.steps[stepNum] = {
188 |                 parentFrame: this.frames[parentFrameId],
189 |                 childFrame: this.frames[childFrameId],
190 |                 edge: edge,
191 |                 isReturn: isReturn
192 |               };
193 |             }
194 |               
195 |             if (this.startStep == null || isNaN(this.startStep)) {
196 |               this.currentStep = this.steps.length - 1;
197 |             } else {
198 |               this.currentStep = this.startStep;
199 |             }
200 |             this.drawControls();
201 |             this.toggleSteps();
202 |           }
203 |           
204 |           
205 |           drawControls() {
206 |             var controlsDiv = document.createElement("div");
207 |             controlsDiv.classList.add("svg-controls");
208 |             
209 |             this.prevButton = document.createElement("button");
210 |             this.prevButton.innerText = "< Prev";
211 |             if (this.currentStep <= 0) {
212 |               this.prevButton.setAttribute("disabled", "disabled");
213 |             }
214 |             this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
215 |             document.addEventListener("keypress", (e) => {
216 |                 if (e.key == "p" || e.key == "ArrowLeft") {
217 |                   this.onPrevClick();
218 |                 } else if (e.key == "n" || e.key == "ArrowRight") {
219 |                   this.onNextClick();
220 |                 }
221 |             }); 
222 |             
223 |             this.nextButton = document.createElement("button");
224 |             this.nextButton.innerText = "> Next";
225 |             if (this.currentStep >= this.steps.length - 1) {
226 |               this.nextButton.setAttribute("disabled", "disabled");
227 |             }
228 |             this.nextButton.addEventListener("click", this.onNextClick.bind(this));
229 |         
230 |             this.slider = document.createElement("input");
231 |             this.slider.setAttribute("type", "range");
232 |             this.slider.setAttribute("min", 0);
233 |             this.slider.setAttribute("max", this.steps.length - 1);
234 |             this.slider.setAttribute("value", this.currentStep);
235 |             this.slider.addEventListener("change", this.onSliderChange.bind(this));
236 |         
237 |             controlsDiv.appendChild(this.prevButton);
238 |             controlsDiv.appendChild(this.slider);
239 |             controlsDiv.appendChild(this.nextButton);
240 |         
241 |             this.svg.after(controlsDiv);
242 |           }
243 |         
244 |           toggleSteps() {
245 |             this.steps.forEach((step, stepI) => {
246 |               if (stepI == 1) {
247 |                  step.parentFrame && step.parentFrame.classList.add("activated");
248 |               }
249 |               if (stepI <= this.currentStep) {
250 |                  step.edge.classList.add("activated");
251 |                  step.childFrame.classList.add("activated");
252 |               } else {
253 |                  step.edge.classList.remove("activated");
254 |                  !step.isReturn && step.childFrame.classList.remove("activated");
255 |               }
256 |             })
257 |           }
258 |           
259 |           onSliderChange(event) {
260 |             this.currentStep = parseInt(event.target.value, 10);
261 |             this.fixButtons();
262 |             this.toggleSteps();
263 |           }
264 |         
265 |           onPrevClick(event) {
266 |             this.currentStep--;
267 |             this.fixButtons();
268 |             this.slider.value = this.currentStep;
269 |             this.toggleSteps();
270 |           }
271 | 
272 |           onNextClick(event) {
273 |             this.currentStep++;
274 |             this.fixButtons();
275 |             this.slider.value = this.currentStep;
276 |             this.toggleSteps();
277 |           }
278 |           
279 |           fixButtons() {
280 |             if (this.currentStep === 0) {
281 |               this.prevButton.setAttribute("disabled", "disabled");
282 |             }
283 |             if (this.currentStep < this.steps.length - 1) {
284 |               this.nextButton.removeAttribute("disabled");
285 |             }
286 |             if (this.currentStep > 0) {
287 |               this.prevButton.removeAttribute("disabled");
288 |             }
289 |             if (this.currentStep === this.steps.length - 1) {
290 |               this.nextButton.setAttribute("disabled", "disabled");
291 |             }
292 |           }
293 |         }
294 |         
295 |         new RecursiveTreeViz(document.getElementsByTagName("svg")[0]).draw()
296 | 
297 |         </script>
298 |   </body>
299 | </html>
300 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 | 
280 |                      END OF TERMS AND CONDITIONS
281 | 
282 |             How to Apply These Terms to Your New Programs
283 | 
284 |   If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 | 
288 |   To do so, attach the following notices to the program.  It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 | 
293 |     <one line to give the program's name and a brief idea of what it does.>
294 |     Copyright (C) <year>  <name of author>
295 | 
296 |     This program is free software; you can redistribute it and/or modify
297 |     it under the terms of the GNU General Public License as published by
298 |     the Free Software Foundation; either version 2 of the License, or
299 |     (at your option) any later version.
300 | 
301 |     This program is distributed in the hope that it will be useful,
302 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
303 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
304 |     GNU General Public License for more details.
305 | 
306 |     You should have received a copy of the GNU General Public License along
307 |     with this program; if not, write to the Free Software Foundation, Inc.,
308 |     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 | 
310 | Also add information on how to contact you by electronic and paper mail.
311 | 
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 | 
315 |     Gnomovision version 69, Copyright (C) year name of author
316 |     Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 |     This is free software, and you are welcome to redistribute it
318 |     under certain conditions; type `show c' for details.
319 | 
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License.  Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 | 
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary.  Here is a sample; alter the names:
328 | 
329 |   Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 |   `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 | 
332 |   <signature of Ty Coon>, 1 April 1989
333 |   Ty Coon, President of Vice
334 | 
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs.  If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library.  If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 | 


--------------------------------------------------------------------------------
/rendered/fib5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width">
  6 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  7 |     <title>Recursion Visualizer</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 10 |     <style>
 11 |     .node, .edge, .node text {
 12 |       visibility: hidden;
 13 |     }
 14 |     .node.activated text:first-of-type {
 15 |       visibility: visible;
 16 |     }
 17 |     .node.activated path {
 18 |       visibility: visible;
 19 |     }
 20 |     .node text.activated {
 21 |       visibility: visible;
 22 |     }
 23 |     .edge.activated {
 24 |       visibility: visible;
 25 |     }
 26 |     .svg-controls {
 27 |       width: 600px;
 28 |       display: grid;
 29 |       grid-template-rows: 1fr;
 30 |       grid-template-columns: 100px 1fr 100px;
 31 |       grid-gap: 8px;
 32 |       position: fixed;
 33 |       right: 0;
 34 |       top: 0;
 35 |       background: #80808070;
 36 |     }
 37 |     .svg-controls button:first-of-type {
 38 |       grid-row: 1;
 39 |       grid-column: 1;
 40 |     }
 41 |     .svg-controls input {
 42 |       grid-row: 1;
 43 |       grid-column: 2;
 44 |     }
 45 |     .svg-controls button:last-of-type {
 46 |       grid-row: 1;
 47 |       grid-column: 3;
 48 |     }
 49 |     </style>
 50 |   </head>
 51 |   <body>
 52 |    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 53 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 54 |  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 55 | <!-- Generated by graphviz version 2.49.0 (20210828.1703)
 56 |  -->
 57 | <!-- Pages: 1 -->
 58 | <svg width="618pt" height="491pt"
 59 |  viewBox="0.00 0.00 618.00 491.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 60 | <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 487)">
 61 | <polygon fill="white" stroke="transparent" points="-4,4 -4,-487 614,-487 614,4 -4,4"/>
 62 | <!-- 140268980491808 -->
 63 | <g id="node1" class="node">
 64 | <title>140268980491808</title>
 65 | <path fill="none" stroke="black" d="M286,-267.5C286,-267.5 316,-267.5 316,-267.5 322,-267.5 328,-273.5 328,-279.5 328,-279.5 328,-292.5 328,-292.5 328,-298.5 322,-304.5 316,-304.5 316,-304.5 286,-304.5 286,-304.5 280,-304.5 274,-298.5 274,-292.5 274,-292.5 274,-279.5 274,-279.5 274,-273.5 280,-267.5 286,-267.5"/>
 66 | <text text-anchor="middle" x="301" y="-282.6" font-family="Times,serif" font-size="13.00">fib(4)</text>
 67 | </g>
 68 | <!-- 140268176759856 -->
 69 | <g id="node2" class="node">
 70 | <title>140268176759856</title>
 71 | <path fill="none" stroke="black" d="M428,-267.5C428,-267.5 458,-267.5 458,-267.5 464,-267.5 470,-273.5 470,-279.5 470,-279.5 470,-292.5 470,-292.5 470,-298.5 464,-304.5 458,-304.5 458,-304.5 428,-304.5 428,-304.5 422,-304.5 416,-298.5 416,-292.5 416,-292.5 416,-279.5 416,-279.5 416,-273.5 422,-267.5 428,-267.5"/>
 72 | <text text-anchor="middle" x="443" y="-282.6" font-family="Times,serif" font-size="13.00">fib(3)</text>
 73 | </g>
 74 | <!-- 140269251436976 -->
 75 | <g id="node3" class="node">
 76 | <title>140269251436976</title>
 77 | <path fill="none" stroke="black" d="M168,-178.5C168,-178.5 198,-178.5 198,-178.5 204,-178.5 210,-184.5 210,-190.5 210,-190.5 210,-203.5 210,-203.5 210,-209.5 204,-215.5 198,-215.5 198,-215.5 168,-215.5 168,-215.5 162,-215.5 156,-209.5 156,-203.5 156,-203.5 156,-190.5 156,-190.5 156,-184.5 162,-178.5 168,-178.5"/>
 78 | <text text-anchor="middle" x="183" y="-193.6" font-family="Times,serif" font-size="13.00">fib(3)</text>
 79 | </g>
 80 | <!-- 140268980491808&#45;&gt;140269251436976 -->
 81 | <g id="edge8" class="edge">
 82 | <title>140268980491808&#45;&gt;140269251436976</title>
 83 | <path fill="none" stroke="black" d="M273.65,-284.58C247.03,-282.56 207.66,-275 187,-249 181.87,-242.55 179.94,-234.07 179.55,-225.88"/>
 84 | <polygon fill="black" stroke="black" points="183.05,-225.92 179.77,-215.85 176.05,-225.77 183.05,-225.92"/>
 85 | <text text-anchor="middle" x="194" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#2)</text>
 86 | </g>
 87 | <!-- 140268980491808&#45;&gt;140269251436976 -->
 88 | <g id="edge9" class="edge">
 89 | <title>140268980491808&#45;&gt;140269251436976:c</title>
 90 | <path fill="none" stroke="green" d="M265.26,-264.57C257.43,-259.72 249.3,-254.38 242,-249 228.15,-238.79 213.64,-226.04 202.48,-215.71"/>
 91 | <polygon fill="green" stroke="green" points="263.56,-267.63 273.92,-269.83 267.19,-261.65 263.56,-267.63"/>
 92 | <text text-anchor="middle" x="262.5" y="-237.8" font-family="Times,serif" font-size="14.00">2 (#11)</text>
 93 | </g>
 94 | <!-- 140269251443360 -->
 95 | <g id="node4" class="node">
 96 | <title>140269251443360</title>
 97 | <path fill="none" stroke="black" d="M273,-178.5C273,-178.5 303,-178.5 303,-178.5 309,-178.5 315,-184.5 315,-190.5 315,-190.5 315,-203.5 315,-203.5 315,-209.5 309,-215.5 303,-215.5 303,-215.5 273,-215.5 273,-215.5 267,-215.5 261,-209.5 261,-203.5 261,-203.5 261,-190.5 261,-190.5 261,-184.5 267,-178.5 273,-178.5"/>
 98 | <text text-anchor="middle" x="288" y="-193.6" font-family="Times,serif" font-size="13.00">fib(2)</text>
 99 | </g>
100 | <!-- 140268980491808&#45;&gt;140269251443360 -->
101 | <g id="edge10" class="edge">
102 | <title>140268980491808&#45;&gt;140269251443360</title>
103 | <path fill="none" stroke="black" d="M293.26,-267.39C291.12,-261.64 289.08,-255.15 288,-249 286.69,-241.53 286.26,-233.35 286.26,-225.77"/>
104 | <polygon fill="black" stroke="black" points="289.77,-225.68 286.51,-215.6 282.77,-225.51 289.77,-225.68"/>
105 | <text text-anchor="middle" x="297" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#12)</text>
106 | </g>
107 | <!-- 140268980491808&#45;&gt;140269251443360 -->
108 | <g id="edge11" class="edge">
109 | <title>140268980491808&#45;&gt;140269251443360:c</title>
110 | <path fill="none" stroke="green" d="M306.94,-257.43C307.72,-249.78 307.73,-241.51 306,-234 304.56,-227.73 301.9,-221.3 299.07,-215.59"/>
111 | <polygon fill="green" stroke="green" points="303.47,-256.95 305.51,-267.35 310.4,-257.96 303.47,-256.95"/>
112 | <text text-anchor="middle" x="328.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#17)</text>
113 | </g>
114 | <!-- 140269249079072 -->
115 | <g id="node11" class="node">
116 | <title>140269249079072</title>
117 | <path fill="none" stroke="black" d="M455,-178.5C455,-178.5 485,-178.5 485,-178.5 491,-178.5 497,-184.5 497,-190.5 497,-190.5 497,-203.5 497,-203.5 497,-209.5 491,-215.5 485,-215.5 485,-215.5 455,-215.5 455,-215.5 449,-215.5 443,-209.5 443,-203.5 443,-203.5 443,-190.5 443,-190.5 443,-184.5 449,-178.5 455,-178.5"/>
118 | <text text-anchor="middle" x="470" y="-193.6" font-family="Times,serif" font-size="13.00">fib(2)</text>
119 | </g>
120 | <!-- 140268176759856&#45;&gt;140269249079072 -->
121 | <g id="edge12" class="edge">
122 | <title>140268176759856&#45;&gt;140269249079072</title>
123 | <path fill="none" stroke="black" d="M428.66,-267.22C422.46,-257.27 417.7,-244.75 423,-234 425.87,-228.19 430.17,-223.06 435.03,-218.63"/>
124 | <polygon fill="black" stroke="black" points="437.38,-221.23 442.99,-212.24 433,-215.77 437.38,-221.23"/>
125 | <text text-anchor="middle" x="432" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#20)</text>
126 | </g>
127 | <!-- 140268176759856&#45;&gt;140269249079072 -->
128 | <g id="edge13" class="edge">
129 | <title>140268176759856&#45;&gt;140269249079072:c</title>
130 | <path fill="none" stroke="green" d="M451.47,-257.39C455.64,-243.82 460.55,-227.81 464.26,-215.69"/>
131 | <polygon fill="green" stroke="green" points="448.05,-256.61 448.46,-267.19 454.74,-258.66 448.05,-256.61"/>
132 | <text text-anchor="middle" x="479.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#25)</text>
133 | </g>
134 | <!-- 140268176766640 -->
135 | <g id="node12" class="node">
136 | <title>140268176766640</title>
137 | <path fill="none" stroke="black" d="M545,-178.5C545,-178.5 575,-178.5 575,-178.5 581,-178.5 587,-184.5 587,-190.5 587,-190.5 587,-203.5 587,-203.5 587,-209.5 581,-215.5 575,-215.5 575,-215.5 545,-215.5 545,-215.5 539,-215.5 533,-209.5 533,-203.5 533,-203.5 533,-190.5 533,-190.5 533,-184.5 539,-178.5 545,-178.5"/>
138 | <text text-anchor="middle" x="560" y="-193.6" font-family="Times,serif" font-size="13.00">fib(1)</text>
139 | </g>
140 | <!-- 140268176759856&#45;&gt;140268176766640 -->
141 | <g id="edge14" class="edge">
142 | <title>140268176759856&#45;&gt;140268176766640</title>
143 | <path fill="none" stroke="black" d="M470.18,-270.55C481.02,-264.39 493.41,-256.81 504,-249 514.74,-241.07 525.78,-231.4 535.18,-222.63"/>
144 | <polygon fill="black" stroke="black" points="537.82,-224.95 542.65,-215.52 532.99,-219.88 537.82,-224.95"/>
145 | <text text-anchor="middle" x="530" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#26)</text>
146 | </g>
147 | <!-- 140268176759856&#45;&gt;140268176766640 -->
148 | <g id="edge15" class="edge">
149 | <title>140268176759856&#45;&gt;140268176766640:c</title>
150 | <path fill="none" stroke="green" d="M480.22,-279.81C501.19,-275.07 526.43,-266.07 543,-249 551.67,-240.07 555.92,-226.67 558,-215.7"/>
151 | <polygon fill="green" stroke="green" points="479.43,-276.4 470.32,-281.81 480.82,-283.26 479.43,-276.4"/>
152 | <text text-anchor="middle" x="572.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#27)</text>
153 | </g>
154 | <!-- 140268176708800 -->
155 | <g id="node5" class="node">
156 | <title>140268176708800</title>
157 | <path fill="none" stroke="black" d="M57,-89.5C57,-89.5 87,-89.5 87,-89.5 93,-89.5 99,-95.5 99,-101.5 99,-101.5 99,-114.5 99,-114.5 99,-120.5 93,-126.5 87,-126.5 87,-126.5 57,-126.5 57,-126.5 51,-126.5 45,-120.5 45,-114.5 45,-114.5 45,-101.5 45,-101.5 45,-95.5 51,-89.5 57,-89.5"/>
158 | <text text-anchor="middle" x="72" y="-104.6" font-family="Times,serif" font-size="13.00">fib(2)</text>
159 | </g>
160 | <!-- 140269251436976&#45;&gt;140268176708800 -->
161 | <g id="edge16" class="edge">
162 | <title>140269251436976&#45;&gt;140268176708800</title>
163 | <path fill="none" stroke="black" d="M155.92,-192.37C121.6,-187.14 65.41,-176.31 53,-160 47.6,-152.9 48.77,-144.09 52.4,-135.81"/>
164 | <polygon fill="black" stroke="black" points="55.6,-137.25 57.32,-126.8 49.45,-133.9 55.6,-137.25"/>
165 | <text text-anchor="middle" x="60" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#3)</text>
166 | </g>
167 | <!-- 140269251436976&#45;&gt;140268176708800 -->
168 | <g id="edge17" class="edge">
169 | <title>140269251436976&#45;&gt;140268176708800:c</title>
170 | <path fill="none" stroke="green" d="M146.54,-183.44C133.16,-177.67 118.49,-169.88 107,-160 96.27,-150.77 87.42,-137.51 81.3,-126.69"/>
171 | <polygon fill="green" stroke="green" points="145.41,-186.75 155.99,-187.28 148.04,-180.27 145.41,-186.75"/>
172 | <text text-anchor="middle" x="124" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#8)</text>
173 | </g>
174 | <!-- 140269251421952 -->
175 | <g id="node6" class="node">
176 | <title>140269251421952</title>
177 | <path fill="none" stroke="black" d="M147,-89.5C147,-89.5 177,-89.5 177,-89.5 183,-89.5 189,-95.5 189,-101.5 189,-101.5 189,-114.5 189,-114.5 189,-120.5 183,-126.5 177,-126.5 177,-126.5 147,-126.5 147,-126.5 141,-126.5 135,-120.5 135,-114.5 135,-114.5 135,-101.5 135,-101.5 135,-95.5 141,-89.5 147,-89.5"/>
178 | <text text-anchor="middle" x="162" y="-104.6" font-family="Times,serif" font-size="13.00">fib(1)</text>
179 | </g>
180 | <!-- 140269251436976&#45;&gt;140269251421952 -->
181 | <g id="edge18" class="edge">
182 | <title>140269251436976&#45;&gt;140269251421952</title>
183 | <path fill="none" stroke="black" d="M159.93,-178.37C154.69,-173.09 149.84,-166.86 147,-160 143.87,-152.45 144.7,-144.01 147.13,-136.21"/>
184 | <polygon fill="black" stroke="black" points="150.44,-137.37 150.88,-126.79 143.93,-134.78 150.44,-137.37"/>
185 | <text text-anchor="middle" x="154" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#9)</text>
186 | </g>
187 | <!-- 140269251436976&#45;&gt;140269251421952 -->
188 | <g id="edge19" class="edge">
189 | <title>140269251436976&#45;&gt;140269251421952:c</title>
190 | <path fill="none" stroke="green" d="M176.41,-168.39C173.17,-154.82 169.35,-138.81 166.46,-126.69"/>
191 | <polygon fill="green" stroke="green" points="173.02,-169.28 178.75,-178.19 179.83,-167.65 173.02,-169.28"/>
192 | <text text-anchor="middle" x="195.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#10)</text>
193 | </g>
194 | <!-- 140268980505424 -->
195 | <g id="node9" class="node">
196 | <title>140268980505424</title>
197 | <path fill="none" stroke="black" d="M260,-89.5C260,-89.5 290,-89.5 290,-89.5 296,-89.5 302,-95.5 302,-101.5 302,-101.5 302,-114.5 302,-114.5 302,-120.5 296,-126.5 290,-126.5 290,-126.5 260,-126.5 260,-126.5 254,-126.5 248,-120.5 248,-114.5 248,-114.5 248,-101.5 248,-101.5 248,-95.5 254,-89.5 260,-89.5"/>
198 | <text text-anchor="middle" x="275" y="-104.6" font-family="Times,serif" font-size="13.00">fib(1)</text>
199 | </g>
200 | <!-- 140269251443360&#45;&gt;140268980505424 -->
201 | <g id="edge20" class="edge">
202 | <title>140269251443360&#45;&gt;140268980505424</title>
203 | <path fill="none" stroke="black" d="M262,-178.41C256.34,-173.21 251.12,-167 248,-160 244.33,-151.75 246.58,-143 251.05,-135.11"/>
204 | <polygon fill="black" stroke="black" points="254.08,-136.87 256.84,-126.64 248.3,-132.92 254.08,-136.87"/>
205 | <text text-anchor="middle" x="257" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#13)</text>
206 | </g>
207 | <!-- 140269251443360&#45;&gt;140268980505424 -->
208 | <g id="edge21" class="edge">
209 | <title>140269251443360&#45;&gt;140268980505424:c</title>
210 | <path fill="none" stroke="green" d="M283.86,-167.99C281.87,-154.5 279.53,-138.69 277.76,-126.69"/>
211 | <polygon fill="green" stroke="green" points="280.45,-168.81 285.37,-178.19 287.37,-167.79 280.45,-168.81"/>
212 | <text text-anchor="middle" x="303.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#14)</text>
213 | </g>
214 | <!-- 140269251434896 -->
215 | <g id="node10" class="node">
216 | <title>140269251434896</title>
217 | <path fill="none" stroke="black" d="M350,-89.5C350,-89.5 380,-89.5 380,-89.5 386,-89.5 392,-95.5 392,-101.5 392,-101.5 392,-114.5 392,-114.5 392,-120.5 386,-126.5 380,-126.5 380,-126.5 350,-126.5 350,-126.5 344,-126.5 338,-120.5 338,-114.5 338,-114.5 338,-101.5 338,-101.5 338,-95.5 344,-89.5 350,-89.5"/>
218 | <text text-anchor="middle" x="365" y="-104.6" font-family="Times,serif" font-size="13.00">fib(0)</text>
219 | </g>
220 | <!-- 140269251443360&#45;&gt;140269251434896 -->
221 | <g id="edge22" class="edge">
222 | <title>140269251443360&#45;&gt;140269251434896</title>
223 | <path fill="none" stroke="black" d="M309.14,-178.47C315.47,-172.84 322.25,-166.39 328,-160 334.95,-152.28 341.84,-143.26 347.75,-134.98"/>
224 | <polygon fill="black" stroke="black" points="350.68,-136.9 353.52,-126.69 344.94,-132.9 350.68,-136.9"/>
225 | <text text-anchor="middle" x="350" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#15)</text>
226 | </g>
227 | <!-- 140269251443360&#45;&gt;140269251434896 -->
228 | <g id="edge23" class="edge">
229 | <title>140269251443360&#45;&gt;140269251434896:c</title>
230 | <path fill="none" stroke="green" d="M324.97,-187.14C339.29,-181.75 354.31,-173.24 363,-160 369.35,-150.33 369.85,-137.33 368.76,-126.75"/>
231 | <polygon fill="green" stroke="green" points="323.62,-183.9 315.26,-190.4 325.85,-190.54 323.62,-183.9"/>
232 | <text text-anchor="middle" x="389.5" y="-148.8" font-family="Times,serif" font-size="14.00">0 (#16)</text>
233 | </g>
234 | <!-- 140268176651776 -->
235 | <g id="node7" class="node">
236 | <title>140268176651776</title>
237 | <path fill="none" stroke="black" d="M12,-0.5C12,-0.5 42,-0.5 42,-0.5 48,-0.5 54,-6.5 54,-12.5 54,-12.5 54,-25.5 54,-25.5 54,-31.5 48,-37.5 42,-37.5 42,-37.5 12,-37.5 12,-37.5 6,-37.5 0,-31.5 0,-25.5 0,-25.5 0,-12.5 0,-12.5 0,-6.5 6,-0.5 12,-0.5"/>
238 | <text text-anchor="middle" x="27" y="-15.6" font-family="Times,serif" font-size="13.00">fib(1)</text>
239 | </g>
240 | <!-- 140268176708800&#45;&gt;140268176651776 -->
241 | <g id="edge24" class="edge">
242 | <title>140268176708800&#45;&gt;140268176651776</title>
243 | <path fill="none" stroke="black" d="M44.87,-99.04C31.25,-93.52 15.98,-84.65 8,-71 3.61,-63.5 4.83,-54.8 8.19,-46.74"/>
244 | <polygon fill="black" stroke="black" points="11.4,-48.16 12.92,-37.67 5.19,-44.92 11.4,-48.16"/>
245 | <text text-anchor="middle" x="15" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#4)</text>
246 | </g>
247 | <!-- 140268176708800&#45;&gt;140268176651776 -->
248 | <g id="edge25" class="edge">
249 | <title>140268176708800&#45;&gt;140268176651776:c</title>
250 | <path fill="none" stroke="green" d="M51.09,-81.06C48.88,-77.77 46.79,-74.37 45,-71 39.44,-60.54 35.05,-48.01 31.99,-37.87"/>
251 | <polygon fill="green" stroke="green" points="48.43,-83.34 57.11,-89.42 54.11,-79.26 48.43,-83.34"/>
252 | <text text-anchor="middle" x="62" y="-59.8" font-family="Times,serif" font-size="14.00">1 (#5)</text>
253 | </g>
254 | <!-- 140269249078544 -->
255 | <g id="node8" class="node">
256 | <title>140269249078544</title>
257 | <path fill="none" stroke="black" d="M102,-0.5C102,-0.5 132,-0.5 132,-0.5 138,-0.5 144,-6.5 144,-12.5 144,-12.5 144,-25.5 144,-25.5 144,-31.5 138,-37.5 132,-37.5 132,-37.5 102,-37.5 102,-37.5 96,-37.5 90,-31.5 90,-25.5 90,-25.5 90,-12.5 90,-12.5 90,-6.5 96,-0.5 102,-0.5"/>
258 | <text text-anchor="middle" x="117" y="-15.6" font-family="Times,serif" font-size="13.00">fib(0)</text>
259 | </g>
260 | <!-- 140268176708800&#45;&gt;140269249078544 -->
261 | <g id="edge26" class="edge">
262 | <title>140268176708800&#45;&gt;140269249078544</title>
263 | <path fill="none" stroke="black" d="M81.11,-89.39C87.45,-77.13 96.03,-60.55 103.21,-46.67"/>
264 | <polygon fill="black" stroke="black" points="106.42,-48.07 107.91,-37.58 100.2,-44.85 106.42,-48.07"/>
265 | <text text-anchor="middle" x="105" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#6)</text>
266 | </g>
267 | <!-- 140268176708800&#45;&gt;140269249078544 -->
268 | <g id="edge27" class="edge">
269 | <title>140268176708800&#45;&gt;140269249078544:c</title>
270 | <path fill="none" stroke="green" d="M106.68,-84C110.41,-80.11 113.69,-75.76 116,-71 120.97,-60.77 121.29,-48.01 120.33,-37.69"/>
271 | <polygon fill="green" stroke="green" points="104.11,-81.61 99.07,-90.93 108.82,-86.79 104.11,-81.61"/>
272 | <text text-anchor="middle" x="138" y="-59.8" font-family="Times,serif" font-size="14.00">0 (#7)</text>
273 | </g>
274 | <!-- 140269249079600 -->
275 | <g id="node13" class="node">
276 | <title>140269249079600</title>
277 | <path fill="none" stroke="black" d="M470,-89.5C470,-89.5 500,-89.5 500,-89.5 506,-89.5 512,-95.5 512,-101.5 512,-101.5 512,-114.5 512,-114.5 512,-120.5 506,-126.5 500,-126.5 500,-126.5 470,-126.5 470,-126.5 464,-126.5 458,-120.5 458,-114.5 458,-114.5 458,-101.5 458,-101.5 458,-95.5 464,-89.5 470,-89.5"/>
278 | <text text-anchor="middle" x="485" y="-104.6" font-family="Times,serif" font-size="13.00">fib(1)</text>
279 | </g>
280 | <!-- 140269249079072&#45;&gt;140269249079600 -->
281 | <g id="edge28" class="edge">
282 | <title>140269249079072&#45;&gt;140269249079600</title>
283 | <path fill="none" stroke="black" d="M461.06,-178.31C457.23,-168.4 454.38,-155.87 458,-145 459.12,-141.64 460.69,-138.34 462.52,-135.18"/>
284 | <polygon fill="black" stroke="black" points="465.52,-136.99 468.19,-126.74 459.71,-133.09 465.52,-136.99"/>
285 | <text text-anchor="middle" x="467" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#21)</text>
286 | </g>
287 | <!-- 140269249079072&#45;&gt;140269249079600 -->
288 | <g id="edge29" class="edge">
289 | <title>140269249079072&#45;&gt;140269249079600:c</title>
290 | <path fill="none" stroke="green" d="M474.77,-167.99C477.07,-154.5 479.77,-138.69 481.81,-126.69"/>
291 | <polygon fill="green" stroke="green" points="471.27,-167.75 473.04,-178.19 478.17,-168.92 471.27,-167.75"/>
292 | <text text-anchor="middle" x="498.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#22)</text>
293 | </g>
294 | <!-- 140269249080128 -->
295 | <g id="node14" class="node">
296 | <title>140269249080128</title>
297 | <path fill="none" stroke="black" d="M560,-89.5C560,-89.5 590,-89.5 590,-89.5 596,-89.5 602,-95.5 602,-101.5 602,-101.5 602,-114.5 602,-114.5 602,-120.5 596,-126.5 590,-126.5 590,-126.5 560,-126.5 560,-126.5 554,-126.5 548,-120.5 548,-114.5 548,-114.5 548,-101.5 548,-101.5 548,-95.5 554,-89.5 560,-89.5"/>
298 | <text text-anchor="middle" x="575" y="-104.6" font-family="Times,serif" font-size="13.00">fib(0)</text>
299 | </g>
300 | <!-- 140269249079072&#45;&gt;140269249080128 -->
301 | <g id="edge30" class="edge">
302 | <title>140269249079072&#45;&gt;140269249080128</title>
303 | <path fill="none" stroke="black" d="M497.09,-178.96C505.62,-173.24 514.91,-166.62 523,-160 532.69,-152.07 542.66,-142.64 551.24,-134.07"/>
304 | <polygon fill="black" stroke="black" points="553.87,-136.39 558.39,-126.81 548.88,-131.48 553.87,-136.39"/>
305 | <text text-anchor="middle" x="548" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#23)</text>
306 | </g>
307 | <!-- 140269249079072&#45;&gt;140269249080128 -->
308 | <g id="edge31" class="edge">
309 | <title>140269249079072&#45;&gt;140269249080128:c</title>
310 | <path fill="none" stroke="green" d="M506.81,-183.21C530.29,-174.75 557.05,-164.43 561,-160 569.09,-150.93 572.58,-137.66 574.04,-126.8"/>
311 | <polygon fill="green" stroke="green" points="505.6,-179.93 497.36,-186.58 507.95,-186.52 505.6,-179.93"/>
312 | <text text-anchor="middle" x="589.5" y="-148.8" font-family="Times,serif" font-size="14.00">0 (#24)</text>
313 | </g>
314 | <!-- 140268176767168 -->
315 | <g id="node15" class="node">
316 | <title>140268176767168</title>
317 | <path fill="none" stroke="black" d="M355,-356.5C355,-356.5 385,-356.5 385,-356.5 391,-356.5 397,-362.5 397,-368.5 397,-368.5 397,-381.5 397,-381.5 397,-387.5 391,-393.5 385,-393.5 385,-393.5 355,-393.5 355,-393.5 349,-393.5 343,-387.5 343,-381.5 343,-381.5 343,-368.5 343,-368.5 343,-362.5 349,-356.5 355,-356.5"/>
318 | <text text-anchor="middle" x="370" y="-371.6" font-family="Times,serif" font-size="13.00">fib(5)</text>
319 | </g>
320 | <!-- 140268176767168&#45;&gt;140268980491808 -->
321 | <g id="edge32" class="edge">
322 | <title>140268176767168&#45;&gt;140268980491808</title>
323 | <path fill="none" stroke="black" d="M342.72,-366.92C327.96,-361.56 310.96,-352.56 302,-338 297.8,-331.18 296.45,-322.82 296.45,-314.86"/>
324 | <polygon fill="black" stroke="black" points="299.95,-314.98 297.1,-304.78 292.96,-314.53 299.95,-314.98"/>
325 | <text text-anchor="middle" x="309" y="-328.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#1)</text>
326 | </g>
327 | <!-- 140268176767168&#45;&gt;140268980491808 -->
328 | <g id="edge33" class="edge">
329 | <title>140268176767168&#45;&gt;140268980491808:c</title>
330 | <path fill="none" stroke="green" d="M347.54,-348.42C344.63,-344.96 341.71,-341.42 339,-338 330.38,-327.14 321.19,-314.6 314.01,-304.56"/>
331 | <polygon fill="green" stroke="green" points="345.11,-350.96 354.26,-356.29 350.43,-346.41 345.11,-350.96"/>
332 | <text text-anchor="middle" x="359.5" y="-326.8" font-family="Times,serif" font-size="14.00">3 (#18)</text>
333 | </g>
334 | <!-- 140268176767168&#45;&gt;140268176759856 -->
335 | <g id="edge34" class="edge">
336 | <title>140268176767168&#45;&gt;140268176759856</title>
337 | <path fill="none" stroke="black" d="M379.93,-356.2C385.99,-346.02 394.24,-333.27 403,-323 406.32,-319.1 410.06,-315.22 413.88,-311.53"/>
338 | <polygon fill="black" stroke="black" points="416.28,-314.07 421.24,-304.71 411.52,-308.94 416.28,-314.07"/>
339 | <text text-anchor="middle" x="412" y="-328.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#19)</text>
340 | </g>
341 | <!-- 140268176767168&#45;&gt;140268176759856 -->
342 | <g id="edge35" class="edge">
343 | <title>140268176767168&#45;&gt;140268176759856:c</title>
344 | <path fill="none" stroke="green" d="M405.56,-352.84C411.2,-348.43 416.61,-343.44 421,-338 428.87,-328.23 434.37,-315.23 437.9,-304.67"/>
345 | <polygon fill="green" stroke="green" points="403.26,-350.18 397.21,-358.89 407.37,-355.85 403.26,-350.18"/>
346 | <text text-anchor="middle" x="451.5" y="-326.8" font-family="Times,serif" font-size="14.00">2 (#28)</text>
347 | </g>
348 | <!-- 99999999 -->
349 | <g id="node16" class="node">
350 | <title>99999999</title>
351 | <path fill="none" stroke="black" d="M355,-445.5C355,-445.5 385,-445.5 385,-445.5 391,-445.5 397,-451.5 397,-457.5 397,-457.5 397,-470.5 397,-470.5 397,-476.5 391,-482.5 385,-482.5 385,-482.5 355,-482.5 355,-482.5 349,-482.5 343,-476.5 343,-470.5 343,-470.5 343,-457.5 343,-457.5 343,-451.5 349,-445.5 355,-445.5"/>
352 | <text text-anchor="middle" x="370" y="-460.6" font-family="Times,serif" font-size="13.00">Result</text>
353 | </g>
354 | <!-- 99999999&#45;&gt;140268176767168 -->
355 | <g id="edge36" class="edge">
356 | <title>99999999&#45;&gt;140268176767168:c</title>
357 | <path fill="none" stroke="green" d="M370,-434.99C370,-421.5 370,-405.69 370,-393.69"/>
358 | <polygon fill="green" stroke="green" points="366.5,-435.19 370,-445.19 373.5,-435.19 366.5,-435.19"/>
359 | <text text-anchor="middle" x="390.5" y="-415.8" font-family="Times,serif" font-size="14.00">5 (#29)</text>
360 | </g>
361 | </g>
362 | </svg>
363 | 
364 | 
365 | 
366 |     <script>
367 |     
368 |         class RecursiveTreeViz {
369 |           
370 |           constructor(svg, options) {
371 |             this.svg = svg;
372 |             options = options || {};
373 |             this.startStep = options.startStep;
374 |             this.steps = [];
375 |             this.frames = {};
376 |           }
377 |           
378 |           draw() {
379 |             // Store all the frames
380 |             const frames = this.svg.querySelectorAll(".node");
381 |             for (var i = 0; i < frames.length; i++) {
382 |               const frame = frames[i];
383 |               const frameId = frame.getElementsByTagName("title")[0].textContent;
384 |               this.frames[frameId] = frame;
385 |             }
386 |         
387 |             // Determine number of steps
388 |             const edges = this.svg.querySelectorAll(".edge");
389 |             for (let i = 0; i < edges.length; i++) {
390 |               const edge = edges[i];
391 |               const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
392 |               const edgeText = edge.getElementsByTagName("text")[0].textContent;
393 | 
394 |               let stepNum, isReturn;
395 |               stepNum = parseInt(edgeText.split("(#")[1], 10); 
396 |               if (edgeTitle.endsWith(":c")) {
397 |                 isReturn = true;
398 |                 edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
399 |               } else {
400 |                 edge.getElementsByTagName("text")[0].textContent = "";
401 |                 isReturn = false;
402 |               }
403 |               const edgeFrames = edgeTitle.split(":c")[0];
404 |               const parentFrameId = edgeFrames.split("->")[0];
405 |               const childFrameId = edgeFrames.split("->")[1];
406 |               this.steps[stepNum] = {
407 |                 parentFrame: this.frames[parentFrameId],
408 |                 childFrame: this.frames[childFrameId],
409 |                 edge: edge,
410 |                 isReturn: isReturn
411 |               };
412 |             }
413 |               
414 |             if (this.startStep == null || isNaN(this.startStep)) {
415 |               this.currentStep = this.steps.length - 1;
416 |             } else {
417 |               this.currentStep = this.startStep;
418 |             }
419 |             this.drawControls();
420 |             this.toggleSteps();
421 |           }
422 |           
423 |           
424 |           drawControls() {
425 |             var controlsDiv = document.createElement("div");
426 |             controlsDiv.classList.add("svg-controls");
427 |             
428 |             this.prevButton = document.createElement("button");
429 |             this.prevButton.innerText = "< Prev";
430 |             if (this.currentStep <= 0) {
431 |               this.prevButton.setAttribute("disabled", "disabled");
432 |             }
433 |             this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
434 |             document.addEventListener("keypress", (e) => {
435 |                 if (e.key == "p" || e.key == "ArrowLeft") {
436 |                   this.onPrevClick();
437 |                 } else if (e.key == "n" || e.key == "ArrowRight") {
438 |                   this.onNextClick();
439 |                 }
440 |             }); 
441 |             
442 |             this.nextButton = document.createElement("button");
443 |             this.nextButton.innerText = "> Next";
444 |             if (this.currentStep >= this.steps.length - 1) {
445 |               this.nextButton.setAttribute("disabled", "disabled");
446 |             }
447 |             this.nextButton.addEventListener("click", this.onNextClick.bind(this));
448 |         
449 |             this.slider = document.createElement("input");
450 |             this.slider.setAttribute("type", "range");
451 |             this.slider.setAttribute("min", 0);
452 |             this.slider.setAttribute("max", this.steps.length - 1);
453 |             this.slider.setAttribute("value", this.currentStep);
454 |             this.slider.addEventListener("change", this.onSliderChange.bind(this));
455 |         
456 |             controlsDiv.appendChild(this.prevButton);
457 |             controlsDiv.appendChild(this.slider);
458 |             controlsDiv.appendChild(this.nextButton);
459 |         
460 |             this.svg.after(controlsDiv);
461 |           }
462 |         
463 |           toggleSteps() {
464 |             this.steps.forEach((step, stepI) => {
465 |               if (stepI == 1) {
466 |                  step.parentFrame && step.parentFrame.classList.add("activated");
467 |               }
468 |               if (stepI <= this.currentStep) {
469 |                  step.edge.classList.add("activated");
470 |                  step.childFrame.classList.add("activated");
471 |               } else {
472 |                  step.edge.classList.remove("activated");
473 |                  !step.isReturn && step.childFrame.classList.remove("activated");
474 |               }
475 |             })
476 |           }
477 |           
478 |           onSliderChange(event) {
479 |             this.currentStep = parseInt(event.target.value, 10);
480 |             this.fixButtons();
481 |             this.toggleSteps();
482 |           }
483 |         
484 |           onPrevClick(event) {
485 |             this.currentStep--;
486 |             this.fixButtons();
487 |             this.slider.value = this.currentStep;
488 |             this.toggleSteps();
489 |           }
490 | 
491 |           onNextClick(event) {
492 |             this.currentStep++;
493 |             this.fixButtons();
494 |             this.slider.value = this.currentStep;
495 |             this.toggleSteps();
496 |           }
497 |           
498 |           fixButtons() {
499 |             if (this.currentStep === 0) {
500 |               this.prevButton.setAttribute("disabled", "disabled");
501 |             }
502 |             if (this.currentStep < this.steps.length - 1) {
503 |               this.nextButton.removeAttribute("disabled");
504 |             }
505 |             if (this.currentStep > 0) {
506 |               this.prevButton.removeAttribute("disabled");
507 |             }
508 |             if (this.currentStep === this.steps.length - 1) {
509 |               this.nextButton.setAttribute("disabled", "disabled");
510 |             }
511 |           }
512 |         }
513 |         
514 |         new RecursiveTreeViz(document.getElementsByTagName("svg")[0]).draw()
515 | 
516 |         </script>
517 |   </body>
518 | </html>
519 | 


--------------------------------------------------------------------------------
/rendered/virfib5.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width">
  6 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  7 |     <title>Recursion Visualizer</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
 10 |     <style>
 11 |     .node, .edge, .node text {
 12 |       visibility: hidden;
 13 |     }
 14 |     .node.activated text:first-of-type {
 15 |       visibility: visible;
 16 |     }
 17 |     .node.activated path {
 18 |       visibility: visible;
 19 |     }
 20 |     .node text.activated {
 21 |       visibility: visible;
 22 |     }
 23 |     .edge.activated {
 24 |       visibility: visible;
 25 |     }
 26 |     .svg-controls {
 27 |       width: 600px;
 28 |       display: grid;
 29 |       grid-template-rows: 1fr;
 30 |       grid-template-columns: 100px 1fr 100px;
 31 |       grid-gap: 8px;
 32 |       position: fixed;
 33 |       right: 0;
 34 |       top: 0;
 35 |       background: #80808070;
 36 |     }
 37 |     .svg-controls button:first-of-type {
 38 |       grid-row: 1;
 39 |       grid-column: 1;
 40 |     }
 41 |     .svg-controls input {
 42 |       grid-row: 1;
 43 |       grid-column: 2;
 44 |     }
 45 |     .svg-controls button:last-of-type {
 46 |       grid-row: 1;
 47 |       grid-column: 3;
 48 |     }
 49 |     </style>
 50 |   </head>
 51 |   <body>
 52 |    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 53 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 54 |  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 55 | <!-- Generated by graphviz version 2.49.0 (20210828.1703)
 56 |  -->
 57 | <!-- Pages: 1 -->
 58 | <svg width="620pt" height="491pt"
 59 |  viewBox="0.00 0.00 620.00 491.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 60 | <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 487)">
 61 | <polygon fill="white" stroke="transparent" points="-4,4 -4,-487 616,-487 616,4 -4,4"/>
 62 | <!-- 140269251475920 -->
 63 | <g id="node1" class="node">
 64 | <title>140269251475920</title>
 65 | <path fill="none" stroke="black" d="M284,-267.5C284,-267.5 320,-267.5 320,-267.5 326,-267.5 332,-273.5 332,-279.5 332,-279.5 332,-292.5 332,-292.5 332,-298.5 326,-304.5 320,-304.5 320,-304.5 284,-304.5 284,-304.5 278,-304.5 272,-298.5 272,-292.5 272,-292.5 272,-279.5 272,-279.5 272,-273.5 278,-267.5 284,-267.5"/>
 66 | <text text-anchor="middle" x="302" y="-282.6" font-family="Times,serif" font-size="13.00">virfib(4)</text>
 67 | </g>
 68 | <!-- 140268980535344 -->
 69 | <g id="node2" class="node">
 70 | <title>140268980535344</title>
 71 | <path fill="none" stroke="black" d="M426,-267.5C426,-267.5 462,-267.5 462,-267.5 468,-267.5 474,-273.5 474,-279.5 474,-279.5 474,-292.5 474,-292.5 474,-298.5 468,-304.5 462,-304.5 462,-304.5 426,-304.5 426,-304.5 420,-304.5 414,-298.5 414,-292.5 414,-292.5 414,-279.5 414,-279.5 414,-273.5 420,-267.5 426,-267.5"/>
 72 | <text text-anchor="middle" x="444" y="-282.6" font-family="Times,serif" font-size="13.00">virfib(3)</text>
 73 | </g>
 74 | <!-- 140269249142688 -->
 75 | <g id="node3" class="node">
 76 | <title>140269249142688</title>
 77 | <path fill="none" stroke="black" d="M166,-178.5C166,-178.5 202,-178.5 202,-178.5 208,-178.5 214,-184.5 214,-190.5 214,-190.5 214,-203.5 214,-203.5 214,-209.5 208,-215.5 202,-215.5 202,-215.5 166,-215.5 166,-215.5 160,-215.5 154,-209.5 154,-203.5 154,-203.5 154,-190.5 154,-190.5 154,-184.5 160,-178.5 166,-178.5"/>
 78 | <text text-anchor="middle" x="184" y="-193.6" font-family="Times,serif" font-size="13.00">virfib(3)</text>
 79 | </g>
 80 | <!-- 140269251475920&#45;&gt;140269249142688 -->
 81 | <g id="edge8" class="edge">
 82 | <title>140269251475920&#45;&gt;140269249142688</title>
 83 | <path fill="none" stroke="black" d="M271.86,-284.35C245.34,-282.02 207.95,-274.1 188,-249 182.87,-242.55 180.94,-234.07 180.55,-225.88"/>
 84 | <polygon fill="black" stroke="black" points="184.05,-225.92 180.77,-215.85 177.05,-225.77 184.05,-225.92"/>
 85 | <text text-anchor="middle" x="195" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#2)</text>
 86 | </g>
 87 | <!-- 140269251475920&#45;&gt;140269249142688 -->
 88 | <g id="edge9" class="edge">
 89 | <title>140269251475920&#45;&gt;140269249142688:c</title>
 90 | <path fill="none" stroke="green" d="M263.31,-262.73C256.4,-258.38 249.38,-253.71 243,-249 229.15,-238.79 214.64,-226.04 203.48,-215.71"/>
 91 | <polygon fill="green" stroke="green" points="261.58,-265.77 271.93,-268.04 265.25,-259.81 261.58,-265.77"/>
 92 | <text text-anchor="middle" x="263.5" y="-237.8" font-family="Times,serif" font-size="14.00">2 (#11)</text>
 93 | </g>
 94 | <!-- 140268176651776 -->
 95 | <g id="node4" class="node">
 96 | <title>140268176651776</title>
 97 | <path fill="none" stroke="black" d="M271,-178.5C271,-178.5 307,-178.5 307,-178.5 313,-178.5 319,-184.5 319,-190.5 319,-190.5 319,-203.5 319,-203.5 319,-209.5 313,-215.5 307,-215.5 307,-215.5 271,-215.5 271,-215.5 265,-215.5 259,-209.5 259,-203.5 259,-203.5 259,-190.5 259,-190.5 259,-184.5 265,-178.5 271,-178.5"/>
 98 | <text text-anchor="middle" x="289" y="-193.6" font-family="Times,serif" font-size="13.00">virfib(2)</text>
 99 | </g>
100 | <!-- 140269251475920&#45;&gt;140268176651776 -->
101 | <g id="edge10" class="edge">
102 | <title>140269251475920&#45;&gt;140268176651776</title>
103 | <path fill="none" stroke="black" d="M294.26,-267.39C292.12,-261.64 290.08,-255.15 289,-249 287.69,-241.53 287.26,-233.35 287.26,-225.77"/>
104 | <polygon fill="black" stroke="black" points="290.77,-225.68 287.51,-215.6 283.77,-225.51 290.77,-225.68"/>
105 | <text text-anchor="middle" x="298" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#12)</text>
106 | </g>
107 | <!-- 140269251475920&#45;&gt;140268176651776 -->
108 | <g id="edge11" class="edge">
109 | <title>140269251475920&#45;&gt;140268176651776:c</title>
110 | <path fill="none" stroke="green" d="M307.94,-257.43C308.72,-249.78 308.73,-241.51 307,-234 305.56,-227.73 302.9,-221.3 300.07,-215.59"/>
111 | <polygon fill="green" stroke="green" points="304.47,-256.95 306.51,-267.35 311.4,-257.96 304.47,-256.95"/>
112 | <text text-anchor="middle" x="329.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#17)</text>
113 | </g>
114 | <!-- 140269251419344 -->
115 | <g id="node11" class="node">
116 | <title>140269251419344</title>
117 | <path fill="none" stroke="black" d="M453,-178.5C453,-178.5 489,-178.5 489,-178.5 495,-178.5 501,-184.5 501,-190.5 501,-190.5 501,-203.5 501,-203.5 501,-209.5 495,-215.5 489,-215.5 489,-215.5 453,-215.5 453,-215.5 447,-215.5 441,-209.5 441,-203.5 441,-203.5 441,-190.5 441,-190.5 441,-184.5 447,-178.5 453,-178.5"/>
118 | <text text-anchor="middle" x="471" y="-193.6" font-family="Times,serif" font-size="13.00">virfib(2)</text>
119 | </g>
120 | <!-- 140268980535344&#45;&gt;140269251419344 -->
121 | <g id="edge12" class="edge">
122 | <title>140268980535344&#45;&gt;140269251419344</title>
123 | <path fill="none" stroke="black" d="M431.4,-267.12C426,-257.15 421.96,-244.63 427,-234 428.95,-229.87 431.64,-226.07 434.73,-222.59"/>
124 | <polygon fill="black" stroke="black" points="437.26,-225.01 442,-215.53 432.39,-219.99 437.26,-225.01"/>
125 | <text text-anchor="middle" x="436" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#20)</text>
126 | </g>
127 | <!-- 140268980535344&#45;&gt;140269251419344 -->
128 | <g id="edge13" class="edge">
129 | <title>140268980535344&#45;&gt;140269251419344:c</title>
130 | <path fill="none" stroke="green" d="M452.47,-257.39C456.64,-243.82 461.55,-227.81 465.26,-215.69"/>
131 | <polygon fill="green" stroke="green" points="449.05,-256.61 449.46,-267.19 455.74,-258.66 449.05,-256.61"/>
132 | <text text-anchor="middle" x="480.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#25)</text>
133 | </g>
134 | <!-- 140268980504848 -->
135 | <g id="node12" class="node">
136 | <title>140268980504848</title>
137 | <path fill="none" stroke="black" d="M549,-178.5C549,-178.5 585,-178.5 585,-178.5 591,-178.5 597,-184.5 597,-190.5 597,-190.5 597,-203.5 597,-203.5 597,-209.5 591,-215.5 585,-215.5 585,-215.5 549,-215.5 549,-215.5 543,-215.5 537,-209.5 537,-203.5 537,-203.5 537,-190.5 537,-190.5 537,-184.5 543,-178.5 549,-178.5"/>
138 | <text text-anchor="middle" x="567" y="-193.6" font-family="Times,serif" font-size="13.00">virfib(1)</text>
139 | </g>
140 | <!-- 140268980535344&#45;&gt;140268980504848 -->
141 | <g id="edge14" class="edge">
142 | <title>140268980535344&#45;&gt;140268980504848</title>
143 | <path fill="none" stroke="black" d="M474.05,-268.51C484.1,-262.67 495.23,-255.84 505,-249 516.74,-240.78 529.05,-230.94 539.57,-222.11"/>
144 | <polygon fill="black" stroke="black" points="541.89,-224.73 547.24,-215.59 537.35,-219.4 541.89,-224.73"/>
145 | <text text-anchor="middle" x="533" y="-239.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#26)</text>
146 | </g>
147 | <!-- 140268980535344&#45;&gt;140268980504848 -->
148 | <g id="edge15" class="edge">
149 | <title>140268980535344&#45;&gt;140268980504848:c</title>
150 | <path fill="none" stroke="green" d="M484.09,-278.96C504.81,-274.01 529.21,-265.06 546,-249 555.29,-240.12 560.58,-226.57 563.53,-215.53"/>
151 | <polygon fill="green" stroke="green" points="483.3,-275.55 474.27,-281.09 484.78,-282.4 483.3,-275.55"/>
152 | <text text-anchor="middle" x="576.5" y="-237.8" font-family="Times,serif" font-size="14.00">1 (#27)</text>
153 | </g>
154 | <!-- 140269251476448 -->
155 | <g id="node5" class="node">
156 | <title>140269251476448</title>
157 | <path fill="none" stroke="black" d="M60,-89.5C60,-89.5 96,-89.5 96,-89.5 102,-89.5 108,-95.5 108,-101.5 108,-101.5 108,-114.5 108,-114.5 108,-120.5 102,-126.5 96,-126.5 96,-126.5 60,-126.5 60,-126.5 54,-126.5 48,-120.5 48,-114.5 48,-114.5 48,-101.5 48,-101.5 48,-95.5 54,-89.5 60,-89.5"/>
158 | <text text-anchor="middle" x="78" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(2)</text>
159 | </g>
160 | <!-- 140269249142688&#45;&gt;140269251476448 -->
161 | <g id="edge16" class="edge">
162 | <title>140269249142688&#45;&gt;140269251476448</title>
163 | <path fill="none" stroke="black" d="M153.92,-191.91C119.42,-186.52 66.05,-175.84 54,-160 48.28,-152.49 50.29,-143.39 55,-134.97"/>
164 | <polygon fill="black" stroke="black" points="58,-136.79 60.68,-126.54 52.19,-132.88 58,-136.79"/>
165 | <text text-anchor="middle" x="61" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#3)</text>
166 | </g>
167 | <!-- 140269249142688&#45;&gt;140269251476448 -->
168 | <g id="edge17" class="edge">
169 | <title>140269249142688&#45;&gt;140269251476448:c</title>
170 | <path fill="none" stroke="green" d="M144.58,-182.29C132.24,-176.7 119.2,-169.32 109,-160 98.91,-150.78 91.08,-137.52 85.81,-126.69"/>
171 | <polygon fill="green" stroke="green" points="143.25,-185.52 153.82,-186.21 145.99,-179.08 143.25,-185.52"/>
172 | <text text-anchor="middle" x="126" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#8)</text>
173 | </g>
174 | <!-- 140268980590160 -->
175 | <g id="node6" class="node">
176 | <title>140268980590160</title>
177 | <path fill="none" stroke="black" d="M156,-89.5C156,-89.5 192,-89.5 192,-89.5 198,-89.5 204,-95.5 204,-101.5 204,-101.5 204,-114.5 204,-114.5 204,-120.5 198,-126.5 192,-126.5 192,-126.5 156,-126.5 156,-126.5 150,-126.5 144,-120.5 144,-114.5 144,-114.5 144,-101.5 144,-101.5 144,-95.5 150,-89.5 156,-89.5"/>
178 | <text text-anchor="middle" x="174" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(1)</text>
179 | </g>
180 | <!-- 140269249142688&#45;&gt;140268980590160 -->
181 | <g id="edge18" class="edge">
182 | <title>140269249142688&#45;&gt;140268980590160</title>
183 | <path fill="none" stroke="black" d="M160.93,-178.37C155.69,-173.09 150.84,-166.86 148,-160 144.57,-151.73 146.78,-142.96 151.08,-135.07"/>
184 | <polygon fill="black" stroke="black" points="154.07,-136.89 156.63,-126.61 148.22,-133.05 154.07,-136.89"/>
185 | <text text-anchor="middle" x="155" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#9)</text>
186 | </g>
187 | <!-- 140269249142688&#45;&gt;140268980590160 -->
188 | <g id="edge19" class="edge">
189 | <title>140269249142688&#45;&gt;140268980590160:c</title>
190 | <path fill="none" stroke="green" d="M180.82,-167.99C179.28,-154.5 177.49,-138.69 176.12,-126.69"/>
191 | <polygon fill="green" stroke="green" points="177.37,-168.65 181.98,-178.19 184.32,-167.86 177.37,-168.65"/>
192 | <text text-anchor="middle" x="200.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#10)</text>
193 | </g>
194 | <!-- 140268176860608 -->
195 | <g id="node9" class="node">
196 | <title>140268176860608</title>
197 | <path fill="none" stroke="black" d="M249,-89.5C249,-89.5 285,-89.5 285,-89.5 291,-89.5 297,-95.5 297,-101.5 297,-101.5 297,-114.5 297,-114.5 297,-120.5 291,-126.5 285,-126.5 285,-126.5 249,-126.5 249,-126.5 243,-126.5 237,-120.5 237,-114.5 237,-114.5 237,-101.5 237,-101.5 237,-95.5 243,-89.5 249,-89.5"/>
198 | <text text-anchor="middle" x="267" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(1)</text>
199 | </g>
200 | <!-- 140268176651776&#45;&gt;140268176860608 -->
201 | <g id="edge20" class="edge">
202 | <title>140268176651776&#45;&gt;140268176860608</title>
203 | <path fill="none" stroke="black" d="M263,-178.41C257.34,-173.21 252.12,-167 249,-160 245.58,-152.32 246.75,-143.77 249.73,-135.9"/>
204 | <polygon fill="black" stroke="black" points="252.95,-137.27 254.07,-126.74 246.62,-134.28 252.95,-137.27"/>
205 | <text text-anchor="middle" x="258" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#13)</text>
206 | </g>
207 | <!-- 140268176651776&#45;&gt;140268176860608 -->
208 | <g id="edge21" class="edge">
209 | <title>140268176651776&#45;&gt;140268176860608:c</title>
210 | <path fill="none" stroke="green" d="M282.1,-168.39C278.7,-154.82 274.7,-138.81 271.67,-126.69"/>
211 | <polygon fill="green" stroke="green" points="278.73,-169.34 284.55,-178.19 285.52,-167.64 278.73,-169.34"/>
212 | <text text-anchor="middle" x="300.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#14)</text>
213 | </g>
214 | <!-- 140269251461696 -->
215 | <g id="node10" class="node">
216 | <title>140269251461696</title>
217 | <path fill="none" stroke="black" d="M345,-89.5C345,-89.5 381,-89.5 381,-89.5 387,-89.5 393,-95.5 393,-101.5 393,-101.5 393,-114.5 393,-114.5 393,-120.5 387,-126.5 381,-126.5 381,-126.5 345,-126.5 345,-126.5 339,-126.5 333,-120.5 333,-114.5 333,-114.5 333,-101.5 333,-101.5 333,-95.5 339,-89.5 345,-89.5"/>
218 | <text text-anchor="middle" x="363" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(0)</text>
219 | </g>
220 | <!-- 140268176651776&#45;&gt;140269251461696 -->
221 | <g id="edge22" class="edge">
222 | <title>140268176651776&#45;&gt;140269251461696</title>
223 | <path fill="none" stroke="black" d="M307.85,-178.18C313.54,-172.53 319.68,-166.15 325,-160 331.75,-152.19 338.64,-143.28 344.67,-135.12"/>
224 | <polygon fill="black" stroke="black" points="347.55,-137.1 350.59,-126.96 341.89,-132.99 347.55,-137.1"/>
225 | <text text-anchor="middle" x="347" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#15)</text>
226 | </g>
227 | <!-- 140268176651776&#45;&gt;140269251461696 -->
228 | <g id="edge23" class="edge">
229 | <title>140268176651776&#45;&gt;140269251461696:c</title>
230 | <path fill="none" stroke="green" d="M328.63,-184.58C340.67,-179.11 352.65,-171.22 360,-160 366.34,-150.32 367.09,-137.32 366.25,-126.74"/>
231 | <polygon fill="green" stroke="green" points="326.99,-181.46 319.04,-188.46 329.62,-187.95 326.99,-181.46"/>
232 | <text text-anchor="middle" x="386.5" y="-148.8" font-family="Times,serif" font-size="14.00">0 (#16)</text>
233 | </g>
234 | <!-- 140268712074336 -->
235 | <g id="node7" class="node">
236 | <title>140268712074336</title>
237 | <path fill="none" stroke="black" d="M12,-0.5C12,-0.5 48,-0.5 48,-0.5 54,-0.5 60,-6.5 60,-12.5 60,-12.5 60,-25.5 60,-25.5 60,-31.5 54,-37.5 48,-37.5 48,-37.5 12,-37.5 12,-37.5 6,-37.5 0,-31.5 0,-25.5 0,-25.5 0,-12.5 0,-12.5 0,-6.5 6,-0.5 12,-0.5"/>
238 | <text text-anchor="middle" x="30" y="-15.6" font-family="Times,serif" font-size="13.00">virfib(1)</text>
239 | </g>
240 | <!-- 140269251476448&#45;&gt;140268712074336 -->
241 | <g id="edge24" class="edge">
242 | <title>140269251476448&#45;&gt;140268712074336</title>
243 | <path fill="none" stroke="black" d="M47.88,-97.78C35.07,-92.21 21.4,-83.66 14,-71 9.74,-63.71 10.53,-55.16 13.31,-47.16"/>
244 | <polygon fill="black" stroke="black" points="16.61,-48.37 17.5,-37.81 10.22,-45.51 16.61,-48.37"/>
245 | <text text-anchor="middle" x="21" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#4)</text>
246 | </g>
247 | <!-- 140269251476448&#45;&gt;140268712074336 -->
248 | <g id="edge25" class="edge">
249 | <title>140269251476448&#45;&gt;140268712074336:c</title>
250 | <path fill="none" stroke="green" d="M57.26,-80.97C55.02,-77.69 52.88,-74.33 51,-71 45.07,-60.49 39.96,-47.96 36.26,-37.83"/>
251 | <polygon fill="green" stroke="green" points="54.6,-83.27 63.3,-89.31 60.27,-79.16 54.6,-83.27"/>
252 | <text text-anchor="middle" x="68" y="-59.8" font-family="Times,serif" font-size="14.00">1 (#5)</text>
253 | </g>
254 | <!-- 140269249143216 -->
255 | <g id="node8" class="node">
256 | <title>140269249143216</title>
257 | <path fill="none" stroke="black" d="M108,-0.5C108,-0.5 144,-0.5 144,-0.5 150,-0.5 156,-6.5 156,-12.5 156,-12.5 156,-25.5 156,-25.5 156,-31.5 150,-37.5 144,-37.5 144,-37.5 108,-37.5 108,-37.5 102,-37.5 96,-31.5 96,-25.5 96,-25.5 96,-12.5 96,-12.5 96,-6.5 102,-0.5 108,-0.5"/>
258 | <text text-anchor="middle" x="126" y="-15.6" font-family="Times,serif" font-size="13.00">virfib(0)</text>
259 | </g>
260 | <!-- 140269251476448&#45;&gt;140269249143216 -->
261 | <g id="edge26" class="edge">
262 | <title>140269251476448&#45;&gt;140269249143216</title>
263 | <path fill="none" stroke="black" d="M87.71,-89.39C94.48,-77.13 103.63,-60.55 111.29,-46.67"/>
264 | <polygon fill="black" stroke="black" points="114.53,-48.03 116.3,-37.58 108.41,-44.64 114.53,-48.03"/>
265 | <text text-anchor="middle" x="112" y="-61.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#6)</text>
266 | </g>
267 | <!-- 140269251476448&#45;&gt;140269249143216 -->
268 | <g id="edge27" class="edge">
269 | <title>140269251476448&#45;&gt;140269249143216:c</title>
270 | <path fill="none" stroke="green" d="M113.96,-82.25C117.1,-78.81 119.89,-75.05 122,-71 127.28,-60.89 128.33,-48.13 128.04,-37.78"/>
271 | <polygon fill="green" stroke="green" points="111.42,-79.83 106.62,-89.28 116.26,-84.89 111.42,-79.83"/>
272 | <text text-anchor="middle" x="144" y="-59.8" font-family="Times,serif" font-size="14.00">0 (#7)</text>
273 | </g>
274 | <!-- 140268714094112 -->
275 | <g id="node13" class="node">
276 | <title>140268714094112</title>
277 | <path fill="none" stroke="black" d="M465,-89.5C465,-89.5 501,-89.5 501,-89.5 507,-89.5 513,-95.5 513,-101.5 513,-101.5 513,-114.5 513,-114.5 513,-120.5 507,-126.5 501,-126.5 501,-126.5 465,-126.5 465,-126.5 459,-126.5 453,-120.5 453,-114.5 453,-114.5 453,-101.5 453,-101.5 453,-95.5 459,-89.5 465,-89.5"/>
278 | <text text-anchor="middle" x="483" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(1)</text>
279 | </g>
280 | <!-- 140269251419344&#45;&gt;140268714094112 -->
281 | <g id="edge28" class="edge">
282 | <title>140269251419344&#45;&gt;140268714094112</title>
283 | <path fill="none" stroke="black" d="M462.29,-178.39C458.53,-168.5 455.68,-155.97 459,-145 459.98,-141.76 461.36,-138.55 462.96,-135.46"/>
284 | <polygon fill="black" stroke="black" points="466.12,-136.99 468.28,-126.62 460.13,-133.38 466.12,-136.99"/>
285 | <text text-anchor="middle" x="468" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#21)</text>
286 | </g>
287 | <!-- 140269251419344&#45;&gt;140268714094112 -->
288 | <g id="edge29" class="edge">
289 | <title>140269251419344&#45;&gt;140268714094112:c</title>
290 | <path fill="none" stroke="green" d="M475.74,-168.41C476.19,-165.57 476.62,-162.73 477,-160 478.55,-149.02 479.98,-136.7 481.06,-126.8"/>
291 | <polygon fill="green" stroke="green" points="472.26,-168.02 474.11,-178.45 479.17,-169.14 472.26,-168.02"/>
292 | <text text-anchor="middle" x="498.5" y="-148.8" font-family="Times,serif" font-size="14.00">1 (#22)</text>
293 | </g>
294 | <!-- 140268176857392 -->
295 | <g id="node14" class="node">
296 | <title>140268176857392</title>
297 | <path fill="none" stroke="black" d="M561,-89.5C561,-89.5 597,-89.5 597,-89.5 603,-89.5 609,-95.5 609,-101.5 609,-101.5 609,-114.5 609,-114.5 609,-120.5 603,-126.5 597,-126.5 597,-126.5 561,-126.5 561,-126.5 555,-126.5 549,-120.5 549,-114.5 549,-114.5 549,-101.5 549,-101.5 549,-95.5 555,-89.5 561,-89.5"/>
298 | <text text-anchor="middle" x="579" y="-104.6" font-family="Times,serif" font-size="13.00">virfib(0)</text>
299 | </g>
300 | <!-- 140269251419344&#45;&gt;140268176857392 -->
301 | <g id="edge30" class="edge">
302 | <title>140269251419344&#45;&gt;140268176857392</title>
303 | <path fill="none" stroke="black" d="M497.95,-178.35C506.16,-172.71 515.1,-166.29 523,-160 533.29,-151.81 544.09,-142.24 553.42,-133.61"/>
304 | <polygon fill="black" stroke="black" points="555.96,-136.03 560.88,-126.64 551.18,-130.91 555.96,-136.03"/>
305 | <text text-anchor="middle" x="549" y="-150.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#23)</text>
306 | </g>
307 | <!-- 140269251419344&#45;&gt;140268176857392 -->
308 | <g id="edge31" class="edge">
309 | <title>140269251419344&#45;&gt;140268176857392:c</title>
310 | <path fill="none" stroke="green" d="M511.03,-183.9C531.88,-176.89 554.56,-167.9 562,-160 570.53,-150.94 574.78,-137.53 576.9,-126.61"/>
311 | <polygon fill="green" stroke="green" points="509.74,-180.64 501.32,-187.07 511.91,-187.29 509.74,-180.64"/>
312 | <text text-anchor="middle" x="591.5" y="-148.8" font-family="Times,serif" font-size="14.00">0 (#24)</text>
313 | </g>
314 | <!-- 140269249142160 -->
315 | <g id="node15" class="node">
316 | <title>140269249142160</title>
317 | <path fill="none" stroke="black" d="M353,-356.5C353,-356.5 389,-356.5 389,-356.5 395,-356.5 401,-362.5 401,-368.5 401,-368.5 401,-381.5 401,-381.5 401,-387.5 395,-393.5 389,-393.5 389,-393.5 353,-393.5 353,-393.5 347,-393.5 341,-387.5 341,-381.5 341,-381.5 341,-368.5 341,-368.5 341,-362.5 347,-356.5 353,-356.5"/>
318 | <text text-anchor="middle" x="371" y="-371.6" font-family="Times,serif" font-size="13.00">virfib(5)</text>
319 | </g>
320 | <!-- 140269249142160&#45;&gt;140269251475920 -->
321 | <g id="edge32" class="edge">
322 | <title>140269249142160&#45;&gt;140269251475920</title>
323 | <path fill="none" stroke="black" d="M340.93,-365.87C326.87,-360.41 311.4,-351.65 303,-338 298.8,-331.18 297.45,-322.82 297.45,-314.86"/>
324 | <polygon fill="black" stroke="black" points="300.95,-314.98 298.1,-304.78 293.96,-314.53 300.95,-314.98"/>
325 | <text text-anchor="middle" x="310" y="-328.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#1)</text>
326 | </g>
327 | <!-- 140269249142160&#45;&gt;140269251475920 -->
328 | <g id="edge33" class="edge">
329 | <title>140269249142160&#45;&gt;140269251475920:c</title>
330 | <path fill="none" stroke="green" d="M348.54,-348.42C345.63,-344.96 342.71,-341.42 340,-338 331.38,-327.14 322.19,-314.6 315.01,-304.56"/>
331 | <polygon fill="green" stroke="green" points="346.11,-350.96 355.26,-356.29 351.43,-346.41 346.11,-350.96"/>
332 | <text text-anchor="middle" x="360.5" y="-326.8" font-family="Times,serif" font-size="14.00">3 (#18)</text>
333 | </g>
334 | <!-- 140269249142160&#45;&gt;140268980535344 -->
335 | <g id="edge34" class="edge">
336 | <title>140269249142160&#45;&gt;140268980535344</title>
337 | <path fill="none" stroke="black" d="M380.93,-356.2C386.99,-346.02 395.24,-333.27 404,-323 407.32,-319.1 411.06,-315.22 414.88,-311.53"/>
338 | <polygon fill="black" stroke="black" points="417.28,-314.07 422.24,-304.71 412.52,-308.94 417.28,-314.07"/>
339 | <text text-anchor="middle" x="413" y="-328.6" font-family="Times,serif" font-size="8.00" fill="#999999">(#19)</text>
340 | </g>
341 | <!-- 140269249142160&#45;&gt;140268980535344 -->
342 | <g id="edge35" class="edge">
343 | <title>140269249142160&#45;&gt;140268980535344:c</title>
344 | <path fill="none" stroke="green" d="M409.17,-350.74C413.86,-346.86 418.3,-342.6 422,-338 429.87,-328.23 435.37,-315.23 438.9,-304.67"/>
345 | <polygon fill="green" stroke="green" points="406.96,-348.03 401.13,-356.87 411.2,-353.59 406.96,-348.03"/>
346 | <text text-anchor="middle" x="452.5" y="-326.8" font-family="Times,serif" font-size="14.00">2 (#28)</text>
347 | </g>
348 | <!-- 99999999 -->
349 | <g id="node16" class="node">
350 | <title>99999999</title>
351 | <path fill="none" stroke="black" d="M356,-445.5C356,-445.5 386,-445.5 386,-445.5 392,-445.5 398,-451.5 398,-457.5 398,-457.5 398,-470.5 398,-470.5 398,-476.5 392,-482.5 386,-482.5 386,-482.5 356,-482.5 356,-482.5 350,-482.5 344,-476.5 344,-470.5 344,-470.5 344,-457.5 344,-457.5 344,-451.5 350,-445.5 356,-445.5"/>
352 | <text text-anchor="middle" x="371" y="-460.6" font-family="Times,serif" font-size="13.00">Result</text>
353 | </g>
354 | <!-- 99999999&#45;&gt;140269249142160 -->
355 | <g id="edge36" class="edge">
356 | <title>99999999&#45;&gt;140269249142160:c</title>
357 | <path fill="none" stroke="green" d="M371,-434.99C371,-421.5 371,-405.69 371,-393.69"/>
358 | <polygon fill="green" stroke="green" points="367.5,-435.19 371,-445.19 374.5,-435.19 367.5,-435.19"/>
359 | <text text-anchor="middle" x="391.5" y="-415.8" font-family="Times,serif" font-size="14.00">5 (#29)</text>
360 | </g>
361 | </g>
362 | </svg>
363 | 
364 | 
365 | 
366 |     <script>
367 |     
368 |         class RecursiveTreeViz {
369 |           
370 |           constructor(svg, options) {
371 |             this.svg = svg;
372 |             options = options || {};
373 |             this.startStep = options.startStep;
374 |             this.steps = [];
375 |             this.frames = {};
376 |           }
377 |           
378 |           draw() {
379 |             // Store all the frames
380 |             const frames = this.svg.querySelectorAll(".node");
381 |             for (var i = 0; i < frames.length; i++) {
382 |               const frame = frames[i];
383 |               const frameId = frame.getElementsByTagName("title")[0].textContent;
384 |               this.frames[frameId] = frame;
385 |             }
386 |         
387 |             // Determine number of steps
388 |             const edges = this.svg.querySelectorAll(".edge");
389 |             for (let i = 0; i < edges.length; i++) {
390 |               const edge = edges[i];
391 |               const edgeTitle = edge.getElementsByTagName("title")[0].textContent;
392 |               const edgeText = edge.getElementsByTagName("text")[0].textContent;
393 | 
394 |               let stepNum, isReturn;
395 |               stepNum = parseInt(edgeText.split("(#")[1], 10); 
396 |               if (edgeTitle.endsWith(":c")) {
397 |                 isReturn = true;
398 |                 edge.getElementsByTagName("text")[0].textContent = edgeText.split("(#")[0];
399 |               } else {
400 |                 edge.getElementsByTagName("text")[0].textContent = "";
401 |                 isReturn = false;
402 |               }
403 |               const edgeFrames = edgeTitle.split(":c")[0];
404 |               const parentFrameId = edgeFrames.split("->")[0];
405 |               const childFrameId = edgeFrames.split("->")[1];
406 |               this.steps[stepNum] = {
407 |                 parentFrame: this.frames[parentFrameId],
408 |                 childFrame: this.frames[childFrameId],
409 |                 edge: edge,
410 |                 isReturn: isReturn
411 |               };
412 |             }
413 |               
414 |             if (this.startStep == null || isNaN(this.startStep)) {
415 |               this.currentStep = this.steps.length - 1;
416 |             } else {
417 |               this.currentStep = this.startStep;
418 |             }
419 |             this.drawControls();
420 |             this.toggleSteps();
421 |           }
422 |           
423 |           
424 |           drawControls() {
425 |             var controlsDiv = document.createElement("div");
426 |             controlsDiv.classList.add("svg-controls");
427 |             
428 |             this.prevButton = document.createElement("button");
429 |             this.prevButton.innerText = "< Prev";
430 |             if (this.currentStep <= 0) {
431 |               this.prevButton.setAttribute("disabled", "disabled");
432 |             }
433 |             this.prevButton.addEventListener("click", this.onPrevClick.bind(this));
434 |             document.addEventListener("keypress", (e) => {
435 |                 if (e.key == "p" || e.key == "ArrowLeft") {
436 |                   this.onPrevClick();
437 |                 } else if (e.key == "n" || e.key == "ArrowRight") {
438 |                   this.onNextClick();
439 |                 }
440 |             }); 
441 |             
442 |             this.nextButton = document.createElement("button");
443 |             this.nextButton.innerText = "> Next";
444 |             if (this.currentStep >= this.steps.length - 1) {
445 |               this.nextButton.setAttribute("disabled", "disabled");
446 |             }
447 |             this.nextButton.addEventListener("click", this.onNextClick.bind(this));
448 |         
449 |             this.slider = document.createElement("input");
450 |             this.slider.setAttribute("type", "range");
451 |             this.slider.setAttribute("min", 0);
452 |             this.slider.setAttribute("max", this.steps.length - 1);
453 |             this.slider.setAttribute("value", this.currentStep);
454 |             this.slider.addEventListener("change", this.onSliderChange.bind(this));
455 |         
456 |             controlsDiv.appendChild(this.prevButton);
457 |             controlsDiv.appendChild(this.slider);
458 |             controlsDiv.appendChild(this.nextButton);
459 |         
460 |             this.svg.after(controlsDiv);
461 |           }
462 |         
463 |           toggleSteps() {
464 |             this.steps.forEach((step, stepI) => {
465 |               if (stepI == 1) {
466 |                  step.parentFrame && step.parentFrame.classList.add("activated");
467 |               }
468 |               if (stepI <= this.currentStep) {
469 |                  step.edge.classList.add("activated");
470 |                  step.childFrame.classList.add("activated");
471 |               } else {
472 |                  step.edge.classList.remove("activated");
473 |                  !step.isReturn && step.childFrame.classList.remove("activated");
474 |               }
475 |             })
476 |           }
477 |           
478 |           onSliderChange(event) {
479 |             this.currentStep = parseInt(event.target.value, 10);
480 |             this.fixButtons();
481 |             this.toggleSteps();
482 |           }
483 |         
484 |           onPrevClick(event) {
485 |             this.currentStep--;
486 |             this.fixButtons();
487 |             this.slider.value = this.currentStep;
488 |             this.toggleSteps();
489 |           }
490 | 
491 |           onNextClick(event) {
492 |             this.currentStep++;
493 |             this.fixButtons();
494 |             this.slider.value = this.currentStep;
495 |             this.toggleSteps();
496 |           }
497 |           
498 |           fixButtons() {
499 |             if (this.currentStep === 0) {
500 |               this.prevButton.setAttribute("disabled", "disabled");
501 |             }
502 |             if (this.currentStep < this.steps.length - 1) {
503 |               this.nextButton.removeAttribute("disabled");
504 |             }
505 |             if (this.currentStep > 0) {
506 |               this.prevButton.removeAttribute("disabled");
507 |             }
508 |             if (this.currentStep === this.steps.length - 1) {
509 |               this.nextButton.setAttribute("disabled", "disabled");
510 |             }
511 |           }
512 |         }
513 |         
514 |         new RecursiveTreeViz(document.getElementsByTagName("svg")[0]).draw()
515 | 
516 |         </script>
517 |   </body>
518 | </html>
519 | 


--------------------------------------------------------------------------------