diff --git a/website/css/style.css b/website/css/style.css
index dbf83558e..821e004c9 100644
--- a/website/css/style.css
+++ b/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 {
diff --git a/website/js/repl-worker.js b/website/js/repl-worker.js
index d57df2979..689791834 100644
--- a/website/js/repl-worker.js
+++ b/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 });
diff --git a/website/js/repl.js b/website/js/repl.js
index 90a4d12aa..16acbb090 100644
--- a/website/js/repl.js
+++ b/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";
+ }
+});
diff --git a/website/repl.html b/website/repl.html
index 637b4cea3..0961c021b 100644
--- a/website/repl.html
+++ b/website/repl.html
@@ -3,8 +3,10 @@
Prepack · Partial evaluator for JavaScript
+
+