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 @@