index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>Recursion Visualizer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Roboto:300,400,500|Work+Sans:400,700">
    <link rel="stylesheet" href="css/recursive_tree_viz.css">
    <style>
textarea,input[type=text] {
  font-family: monospace;
  font-weight: normal;
}
    </style>
    <style>

      </style>
  </head>
  <body>
    <div class="container">

    <h1>Visualize a recursive function</h1>
    <div id="function-code-container">
    <label>Try one of these functions:
      <select id="function-select">
        <option value="none">Choose one...</option>
        <option value="virfib">virfib</option>
        <option value="count_partitions">count_partitions</option>
        <option value="luhn_sum">luhn_sum</option>
      </select>
     </label>
    <label>Or paste the function definition here (starting with <code>def</code>):
    <br>
    <textarea id="function-definition-textarea" rows="10" cols="120" name="function_definition"></textarea>
    </label>
    <br>
    <label>Type your function call here:
    <br>
    <input id="function-call-input" type="text" placeholder="func(1, 2)" name="function_call" size="120"/>
    </label>
    <br>
    <br>
    <button id="visualize-button" type="button" class="btn btn-primary" disabled>Visualize!</button>
    </div>

    <span id="visualize-status">Loading libraries...</span>
    <pre style="display:none" id="virfib-definition">
def virfib(n):
  if n == 0:
    return 0
  if n == 1:
    return 1
  else:
    return virfib(n - 1) + virfib(n - 2)
    </pre>
    <code style="display:none" id="virfib-call">virfib(3)</code>
    <pre style="display:none" id="count_partitions-definition">
def count_partitions(n, m):
    if n == 0:
        return 1
    elif n < 0:
        return 0
    elif m == 0:
        return 0
    else:
        with_m = count_partitions(n-m, m)
        without_m = count_partitions(n, m-1)
        return with_m + without_m
</pre>
    <code style="display:none" id="count_partitions-call">count_partitions(4, 2)</code>
    <pre style="display:none" id="luhn_sum-definition">
def sum_digits(n):
    if n < 10:
        return n
    else:
        last = n % 10
        all_but_last = n // 10
        return last + sum_digits(all_but_last)

def luhn_sum(n):
    if n < 10:
        return n
    else:
        last = n % 10
        all_but_last = n // 10
        return last + luhn_sum_double(all_but_last)

def luhn_sum_double(n):
    last = n % 10
    all_but_last = n // 10
    luhn_digit = sum_digits(last * 2)
    if n < 10:
        return luhn_digit
    else:
        return luhn_digit + luhn_sum(all_but_last)
    </pre>
    <code style="display:none" id="luhn_sum-call">luhn_sum(5106)</code>
    <br>

    <div id="placeholder" style="margin-top: 80px;"></div>

    <div id="permalink-area" style="margin-top:12px; display:none;">
    <label for="permalink-input">Permalink:</label> <input type="url" id="permalink-input" style="width: 600px;">
    <br>
    Tip: Add &hide_function=true to hide the function code.
    </div>

    <div style="margin-top:80px;">
    <p>👋🏻 Are you comfortable publicly sharing your visualizations? I'd love to see how folks are using this tool.
    Post a link in the <a target="_blank" href="https://github.com/pamelafox/recursive-visualizations/discussions">discussions</a>
    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>)
    </p>
    <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>
    </div>

    </div>
    <!-- GraphViz WASM -->
    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm@2.18.0/dist/graphviz.umd.js"></script>
    <!-- Python WASM -->
    <script src="https://cdn.jsdelivr.net/pyodide/v0.19.0/full/pyodide.js"></script>
    <!-- Form functionality-->
    <script>
    function prefillFunction(event) {
      const functionName = event.target.value;
      const functionPre = document.getElementById(functionName + "-definition");
      if (!functionPre) return;
      document.getElementById('function-definition-textarea').value = functionPre.textContent;
      const functionCall = document.getElementById(functionName + "-call");
      if (!functionCall) return;
      document.getElementById('function-call-input').value = functionCall.textContent;
    }

    document.getElementById("function-select").addEventListener("change", prefillFunction);

    const urlParams = new URLSearchParams(window.location.search);
    const funcDef = urlParams.get('function_definition');
    const funcCall = urlParams.get('function_call');
    const hideFunc = urlParams.get('hide_function');
    if (funcDef) document.getElementById('function-definition-textarea').value = funcDef;
    if (funcCall) document.getElementById('function-call-input').value = funcCall;
    if (hideFunc == 'true') document.getElementById('function-code-container').style.display = "none";
    const readyToViz = funcDef && funcCall;
    </script>
    <!-- Python callgraph computation + Graphviz rendering-->
    <script type="module">
    import {RecursiveTreeViz} from './javascript/recursive_tree_viz.js';

    var GraphViz = window["Graphviz"];
    var pyodide;

    function computeVisualization() {
        document.getElementById("visualize-status").innerHTML = "Computing call graph...";
        const functionDef = document.getElementById('function-definition-textarea').value;
        const functionCall = document.getElementById('function-call-input').value;
        const dotGraph = pyodide.runPython(`visualize('''${functionDef}''', '''${functionCall}''')`);
        document.getElementById("visualize-status").innerHTML = "Rendering call graph...";
        GraphViz.load().then(graphviz => {
              const div = document.getElementById("placeholder");
              div.innerHTML = graphviz.layout(dotGraph, "svg", "dot");
              new RecursiveTreeViz(div.querySelector('svg')).draw()
              document.getElementById("visualize-status").innerHTML = "";
              const permalink = `${window.location.origin}/?function_definition=${encodeURIComponent(functionDef)}&function_call=${encodeURIComponent(functionCall)}`.replace(/\(/g, '%28').replace(/\)/g, '%29');
              document.getElementById("permalink-area").style.display = "block";
              document.getElementById("permalink-input").value = permalink;
        });
    }

    async function main() {
      pyodide = await loadPyodide({
        indexURL : "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/"
      });
      await pyodide.loadPackage("micropip");
      await pyodide.runPythonAsync(`
      import micropip
      micropip.install('python/pydot-1.4.1-py2.py3-none-any.whl')
      `);
      pyodide.runPython(await (await fetch("python/rcviz.py")).text());
      document.getElementById("visualize-status").innerHTML = "";
      document.getElementById("visualize-button").removeAttribute("disabled");
      document.getElementById("visualize-button").addEventListener("click", computeVisualization);
      readyToViz && computeVisualization();
    };

    main();
   </script>
  </body>
</html>