pep8analysis: show annotated CFG in web interface

[nit.git] / contrib / pep8analysis / www / index.html

diff --git a/contrib/pep8analysis/www/index.html b/contrib/pep8analysis/www/index.html
index cda34f4..1e95bf0 100644 (file)
--- a/contrib/pep8analysis/www/index.html
+++ b/contrib/pep8analysis/www/index.html
@@ -7,6 +7,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
+       <script type="text/javascript" src="viz.js"></script>
+       <script>
+               // Both Viz and Pep8 use emscripten
+               // We put aside the module of each program and bring it back before each use
+               var VizModule = null
+       </script>
+
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
@@ -14,6 +21,7 @@
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
+
        <script>
                // Redirect print to HTML
                var Module = {
@@ -37,6 +45,7 @@
                        var input = editor.getValue()
 
                        // Invoke the full Nit program
+                       Module = Pep8Module
                ret = Module['callMain']([input])
 
                        // Shot and set color of output console
@@ -57,6 +66,12 @@
                                editor.setValue(data)
                        })
                }
+
+               function show_graph(source) {
+                       Module = VizModule
+                       var res = Viz(source, "svg", "dot")
+                       VizModule = Module
+                       $("#graph").html(res)
                }
        </script>
 </head>
@@ -139,6 +154,9 @@
                        <div class="panel-heading">Analysis Result</div>
                        <div class="panel-body">
                                <samp id="console"></samp>
+                               <button type="button" class="btn btn-default" onclick="$('#panelGraph').show();$('#panelGraphExp').show();">
+                                       Show control flow graph</button>
+                               <em class="pull-right" id="panelGraphExp" style="display: none;">The graph is at the bottom of the page...</em>
                        </div>
                </div>
          </div>
@@ -203,8 +221,20 @@
                </div>
          </div>
        </div>
+
+         <div class="col-sm-12 col-lg-12">
+               <div class="panel panel-default" id="panelGraph" style="display: none;">
+                       <div class="panel-heading">Control Flow Graph (CFG)
+                               <button type="button" class="close" onClick="$('#panelGraph').hide()" aria-hidden="true">&times;</button>
+                       </div>
+                       <div class="panel-body">
+                               <div id="graph"></div>
+                       </div>
+               </div>
+         </div>
        
        <script src="pep8analysis.js"></script>
+       <script>var Pep8Module = Module</script>
 </div>
 
 </body>