Display heap graph in website

Summary:
Release note: add heap graph visualization to website
Moved from #1243

- read in the heap graph data from prepackSources result
- display the graph using [visjs](http://visjs.org/)
Closes #1265

Differential Revision: D6571860

Pulled By: JWZ2018

fbshipit-source-id: 4c2d9bae91eaffff58df8909214d4c7bc56d1359

website/css/style.css

@@ -142,7 +142,9 @@ header, .repl-container {
 .record-container .record-button.delete:hover{
   background-color:#ef5b5b;
 }
-
+.record-container .record-button.graphBtn{
+  background-color: blue;
+}
 
 .record-container .record-input{
   right: 0px;
@@ -568,7 +570,7 @@ a.nav-item.is-brand {
 
 /* REPL */
 
-.input, .output {
+.input, .output, .graph {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -582,7 +584,43 @@ a.nav-item.is-brand {
 }
 
 .output {
-  right: 0;
+  left: 50%;
+}
+
+.graph {
+  display: none;
+  left: 66%;
+  background-color: white;
+  border-left: 1px solid #ddd;
+}
+.graphBar {
+  background-color: white;
+  height: 3%;
+  padding-top: 0;
+  vertical-align: center;
+}
+
+.graphBox {
+  background-color: #ddd;
+  height: 85%;
+}
+
+.graphLegend {
+  padding-top: 2%;
+  height: 15%;
+}
+
+.legend-header {
+  text-align: center;
+  align: center;
+}
+
+.legend-table {
+  text-align: center;
+  align: center;
+  margin: 0 auto;
+  padding-bottom: 3%;
+  border-spacing: 5%;
 }
 
 .repl, .error {

website/js/repl-worker.js

@@ -25,6 +25,7 @@ onmessage = function(e) {
       filename: 'repl',
       timeout: 1000,
       serialize: true,
+      heapGraphFilePath: "/tmp/foo.txt", /* this path will not be used, it is needed to trigger the graph computation */
       errorHandler,
     };
     for (var property in e.data.options) {
@@ -34,7 +35,7 @@ onmessage = function(e) {
     }
     var result = Prepack.prepackSources(sources, options);
     if (result && !buffer.length) {
-      postMessage({ type: 'success', data: result.code });
+      postMessage({ type: 'success', data: result.code, graph: result.heapGraph });
     } else {
       // A well-defined error occurred.
       postMessage({ type: 'error', data: buffer });

website/js/repl.js

@@ -49,7 +49,7 @@ var optionsConfig = [
     name: "reactEnabled",
     defaultVal: false,
     description: "Enables experimental support for React features, such as JSX syntax."
-  },  
+  },
 ];
 
 var demos = [];
@@ -147,6 +147,19 @@ function compile() {
           code =
             '// Your code was all dead code and thus eliminated.\n' + '// Try storing a property on the global object.';
         }
+        drawGraphCallback = () => {
+          var graphData = JSON.parse(result.graph);
+          var visData = {
+            nodes: graphData.nodes,
+            edges: graphData.edges
+          }
+
+          var visOptions = {};
+          var boxNetwork = new vis.Network(graphBox, visData, visOptions);
+        }
+        if (showGraphDiv) {
+          drawGraphCallback();
+        }
         output.setValue(code, -1);
       } else if (result.type === 'error') {
         let errors = result.data;
@@ -182,6 +195,7 @@ function compile() {
 
     worker.postMessage({code: input.getValue(), options: options});
   }, 500);
+
 }
 
 var output = createEditor(replOutput);
@@ -203,6 +217,15 @@ var saveButton = document.querySelector('#saveBtn');
 var deleteButton = document.querySelector('#deleteBtn');
 var storage = window.localStorage;
 
+/** graph **/
+var graphButton = document.querySelector('#graphBtn');
+var graphBox = document.getElementById('graphBox');
+var graphDiv = document.querySelector('#graph');
+var inputDiv = document.getElementById('inputDiv');
+var outputDiv = document.getElementById('outputDiv');
+var showGraphDiv = false;
+var drawGraphCallback = null;
+
 function changeDemosSelect(val) {
   if (!val.value) return;
   selectInput.value = val.value;
@@ -432,3 +455,27 @@ saveButton.addEventListener('click', () => {
     demoSelector.change(name);
   });
 });
+
+graphButton.addEventListener('click', () => {
+  if (!showGraphDiv) {
+    inputDiv.style.width = "33%";
+    outputDiv.style.width = "33%";
+    graphDiv.style.width = "34%";
+    outputDiv.style.left = "33%";
+    graphDiv.style.display = "block";
+    showGraphDiv = true;
+    graphButton.innerHTML = "HIDE HEAP";
+    if (drawGraphCallback !== null) {
+      drawGraphCallback();
+      drawGraphCallback = null;
+    }
+  } else {
+    inputDiv.style.width = "50%";
+    outputDiv.style.width = "50%";
+    graphDiv.style.width = "50%";
+    outputDiv.style.left = "50%";
+    graphDiv.style.display = "none";
+    showGraphDiv = false;
+    graphButton.innerHTML = "SHOW HEAP";
+  }
+});

website/repl.html

@@ -3,8 +3,10 @@
   <head>
     <title>Prepack &middot; Partial evaluator for JavaScript</title>
     <script src="js/prism.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
     <link rel="stylesheet" href="css/style.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/css/select-theme-dark.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"/>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -41,7 +43,6 @@
 
       </div>
     </nav>
-
     <div class="record-container">
       <div class="select-record-input">
         <select class="select-record">
@@ -59,17 +60,34 @@
         <input id="recordName" placeholder="demo name"/>
         <div id="saveBtn" class="record-button save">SAVE</div>
         <div id="deleteBtn" class="record-button delete">DELETE</div>
+        <div id="graphBtn" class="record-button graphBtn">SHOW HEAP</div>
       </div>
     </div>
     <div class="repl-container">
-      <div class="input">
+      <div id="inputDiv" class="input">
         <div class="repl"></div>
       </div>
 
-      <div class="output">
+      <div id="outputDiv" class="output">
         <div class="repl"></div>
         <div class="error"></div>
       </div>
+      <div id="graph" class ="graph">
+        <div id="graphBox" class="graphBox"></div>
+        <div class="graphLegend">
+          <h3 class="legend-header">Legend</h3>
+          <table class = "legend-table" cellspacing="10px">
+            <tr>
+              <td><img src="static/images/red_circle.png" height=42 width=42> <div>Function Value </div></td>
+              <td><img src="static/images/blue_box.png" height=42 width=42><div>Object Value </div></td>
+              <td><img src="static/images/green_diamond.png" height=42 width=42><div>Abstract Value </div></td>
+              <td><img src="static/images/yellow_star.png" height=42 width=42><div>Symbol Value</div></td>
+              <td><img src="static/images/orange_triangle.png" height=42 width=42><div>Proxy Value</div></td>
+              <td><img src="static/images/grey_ellipse.png" height=42 width=42><div>Other</div></td>
+            </tr>
+          </table>
+        </div>
+      </div>
     </div>