mirror of
https://github.com/facebookarchive/prepack.git
synced 2024-08-17 02:20:31 +03:00
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 https://github.com/facebook/prepack/pull/1265 Differential Revision: D6571860 Pulled By: JWZ2018 fbshipit-source-id: 4c2d9bae91eaffff58df8909214d4c7bc56d1359
This commit is contained in:
parent
78deba64a1
commit
45383c8785
@ -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 {
|
||||
|
@ -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 });
|
||||
|
@ -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";
|
||||
}
|
||||
});
|
||||
|
@ -3,8 +3,10 @@
|
||||
<head>
|
||||
<title>Prepack · 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>
|
||||
|
||||
|
||||
|
BIN
website/static/images/blue_box.png
Normal file
BIN
website/static/images/blue_box.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.7 KiB |
BIN
website/static/images/green_diamond.png
Normal file
BIN
website/static/images/green_diamond.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
website/static/images/grey_ellipse.png
Normal file
BIN
website/static/images/grey_ellipse.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
website/static/images/orange_triangle.png
Normal file
BIN
website/static/images/orange_triangle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
BIN
website/static/images/red_circle.png
Normal file
BIN
website/static/images/red_circle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
BIN
website/static/images/yellow_star.png
Normal file
BIN
website/static/images/yellow_star.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
Loading…
Reference in New Issue
Block a user