Skip to content

Commit 3b4bbc3

Browse files
yujin-wuyujin-wu
committed
automated codegen
1 parent d971001 commit 3b4bbc3

18 files changed

+4498
-5
lines changed

‎devtools/regl_codegen/devtools.js

+263
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
'use strict';
2+
3+
/* global Plotly:false */
4+
5+
var Fuse = require('fuse.js/dist/fuse.common.js');
6+
var mocks = require('../../build/test_dashboard_mocks.json');
7+
var reglTraces = require('../../build/regl_traces.json');
8+
var credentials = require('../../build/credentials.json');
9+
var Lib = require('@src/lib');
10+
11+
// Our gracious testing object
12+
var Tabs = {
13+
14+
// Set plot config options
15+
setPlotConfig: function() {
16+
Plotly.setPlotConfig({
17+
18+
// use local topojson files
19+
topojsonURL: '../../node_modules/sane-topojson/dist/',
20+
21+
// register mapbox access token
22+
// run `npm run preset` if you haven't yet
23+
mapboxAccessToken: credentials.MAPBOX_ACCESS_TOKEN,
24+
25+
// show all logs in console
26+
logging: 2
27+
});
28+
},
29+
30+
// Return the specified plot container (or default one)
31+
getGraph: function(id) {
32+
id = id || 'graph';
33+
return document.getElementById(id);
34+
},
35+
36+
// Create a new plot container
37+
fresh: function(id) {
38+
id = id || 'graph';
39+
40+
var graphDiv = Tabs.getGraph(id);
41+
42+
if(graphDiv) {
43+
graphDiv.parentNode.removeChild(graphDiv);
44+
}
45+
46+
graphDiv = document.createElement('div');
47+
graphDiv.className = 'dashboard-plot';
48+
graphDiv.id = id;
49+
50+
var plotArea = document.getElementById('plots');
51+
plotArea.appendChild(graphDiv);
52+
53+
return graphDiv;
54+
},
55+
56+
// Plot a mock by name (without .json) to the default or specified container
57+
plotMock: function(mockName, id) {
58+
return new Promise(function (res, rej) {
59+
60+
var mockURL = '/test/image/mocks/' + mockName + '.json';
61+
62+
console.warn('Plotting:', mockURL);
63+
64+
var request = new XMLHttpRequest();
65+
request.open('GET', mockURL, true);
66+
request.responseType = '';
67+
request.send();
68+
69+
request.onreadystatechange = function() {
70+
if(this.readyState === 4) {
71+
if(this.status === 200) {
72+
var fig = JSON.parse(this.responseText);
73+
var graphDiv = Tabs.fresh(id);
74+
75+
Plotly.newPlot(graphDiv, fig);
76+
77+
graphDiv.on('plotly_afterplot', function() {
78+
res(graphDiv);
79+
});
80+
81+
82+
} else {
83+
console.error(this.statusText);
84+
}
85+
}
86+
};
87+
})
88+
},
89+
90+
// Save a png snapshot and display it below the plot
91+
snapshot: function(id) {
92+
var gd = Tabs.getGraph(id);
93+
94+
if(!gd._fullLayout || !gd._fullData) {
95+
console.error('no graph with id ' + id + ' found.');
96+
return;
97+
}
98+
99+
var image = new Image();
100+
101+
Plotly.Snapshot.toImage(gd, { format: 'png' }).on('success', function(img) {
102+
image.src = img;
103+
104+
var imageDiv = document.getElementById('snapshot');
105+
imageDiv.appendChild(image);
106+
107+
console.warn('Snapshot complete!');
108+
});
109+
},
110+
111+
// Remove all plots and snapshots from the page
112+
purge: function() {
113+
var plots = document.getElementsByClassName('dashboard-plot');
114+
var images = document.getElementById('snapshot');
115+
116+
while(images.firstChild) {
117+
images.removeChild(images.firstChild);
118+
}
119+
120+
for(var i = 0; i < plots.length; i++) {
121+
Plotly.purge(plots[i]);
122+
}
123+
},
124+
125+
// Specify what to do after each plotly.js script reload
126+
onReload: function() {
127+
return;
128+
},
129+
130+
// Refreshes the plotly.js source without needing to refresh the page
131+
reload: function() {
132+
var source = document.getElementById('source');
133+
var reloaded = document.getElementById('reload-time');
134+
135+
source.remove();
136+
137+
window.Plotly = null;
138+
139+
source = document.createElement('script');
140+
source.id = 'source';
141+
source.src = '../../build/plotly.js';
142+
143+
document.body.appendChild(source);
144+
145+
var reloadTime = new Date().toLocaleTimeString();
146+
console.warn('plotly.js reloaded at ' + reloadTime);
147+
reloaded.textContent = 'last reload at ' + reloadTime;
148+
149+
var interval = setInterval(function() {
150+
if(window.Plotly) {
151+
clearInterval(interval);
152+
handleOnLoad();
153+
Tabs.onReload();
154+
}
155+
}, 100);
156+
}
157+
};
158+
159+
160+
// Bind things to the window
161+
window.Tabs = Tabs;
162+
window.Lib = Lib;
163+
window.onload = handleOnLoad;
164+
setInterval(function() {
165+
window.gd = Tabs.getGraph() || Tabs.fresh();
166+
window.fullLayout = window.gd._fullLayout;
167+
window.fullData = window.gd._fullData;
168+
}, 1000);
169+
170+
// Mocks search and plotting
171+
var fuse = new Fuse(mocks, {
172+
// isCaseSensitive: false,
173+
// includeScore: false,
174+
// shouldSort: true,
175+
// includeMatches: false,
176+
// findAllMatches: false,
177+
// minMatchCharLength: 1,
178+
// location: 0,
179+
// threshold: 0.6,
180+
// distance: 100,
181+
// useExtendedSearch: false,
182+
keys: [{
183+
name: 'name',
184+
weight: 0.7
185+
}, {
186+
name: 'keywords',
187+
weight: 0.3
188+
}]
189+
});
190+
191+
var transformInput = document.getElementById('css-transform');
192+
var mockInput = document.getElementById('mocks-search');
193+
var mocksList = document.getElementById('mocks-list');
194+
var plotArea = document.getElementById('plots');
195+
196+
function getNameFromHash() {
197+
return window.location.hash.replace(/^#/, '');
198+
}
199+
200+
function plotFromHash() {
201+
var initialMock = getNameFromHash();
202+
203+
if(initialMock.length > 0) {
204+
Tabs.plotMock(initialMock);
205+
}
206+
}
207+
208+
async function handleOnLoad() {
209+
var mocksByReglTrace = {};
210+
211+
for (var trace of reglTraces) {
212+
mocksByReglTrace[trace] = [];
213+
for (var mock of mocks) {
214+
if (mock.keywords.indexOf(trace) !== -1) {
215+
mocksByReglTrace[trace].push(mock);
216+
}
217+
}
218+
}
219+
220+
for (var trace of Object.keys(mocksByReglTrace)) {
221+
var thisMocks = mocksByReglTrace[trace];
222+
var div = document.createElement('div');
223+
div.className = 'mock-group';
224+
div.innerHTML = '<h3>' + trace + '</h3>';
225+
mocksList.appendChild(div);
226+
for (var mock of thisMocks) {
227+
var a = document.createElement('a');
228+
a.className = 'mock-link';
229+
a.innerHTML = mock.name;
230+
a.href = '#' + mock.name;
231+
a.onclick = function() {
232+
Tabs.plotMock(this.innerHTML);
233+
};
234+
div.appendChild(a);
235+
div.appendChild(document.createElement('br'));
236+
}
237+
}
238+
239+
// visit the mocks one by one.
240+
for (var trace of Object.keys(mocksByReglTrace)) {
241+
var thisMocks = mocksByReglTrace[trace];
242+
for (var mock of thisMocks) {
243+
await Tabs.plotMock(mock.name);
244+
}
245+
246+
console.log(window.__regl_codegen_cache);
247+
var body = JSON.stringify({
248+
generated: Object.entries(window.__regl_codegen_cache).reduce((acc, [key, value]) => {
249+
acc[key] = value.toString();
250+
return acc;
251+
}, {}),
252+
trace: trace
253+
});
254+
window.__regl_codegen_cache = {};
255+
await fetch("/api/submit-code", {
256+
method: "POST",
257+
headers: {
258+
"Content-Type": "application/json"
259+
},
260+
body
261+
});
262+
}
263+
}

‎devtools/regl_codegen/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>REGL Codegen</title>
5+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"/>
6+
<link rel="stylesheet" type="text/css" href="./style.css">
7+
</head>
8+
<body>
9+
<section id="mocks-list"></section>
10+
<div id="plots">
11+
<div id="graph"></div>
12+
</div>
13+
<div id="snapshot"></div>
14+
15+
<script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
16+
<script charset="utf-8" id="source" type="module">import "../../build/plotly.js"</script>
17+
<script charset="utf-8" src="../../build/regl_codegen-bundle.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)