Skip to content

Commit bac7535

Browse files
mdtuszmdtusz
committed
Devtools overhaul - now with reloadng and search!
1 parent f382f46 commit bac7535

File tree

5 files changed

+421
-0
lines changed

5 files changed

+421
-0
lines changed

‎devtools/test_dashboard_v2/devtools.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
// Our gracious testing object
2+
var Tabs = {
3+
4+
getGraph: function(id) {
5+
id = id || 'default-plot';
6+
return document.getElementById(id);
7+
},
8+
9+
fresh: function(id) {
10+
id = id || 'default-plot';
11+
12+
var graphDiv = Tabs.getGraph(id);
13+
14+
if(graphDiv) {
15+
graphDiv.remove();
16+
}
17+
18+
graphDiv = document.createElement('div');
19+
graphDiv.className = 'dashboard-plot';
20+
graphDiv.id = id;
21+
22+
var plotArea = document.getElementById('plots');
23+
plotArea.appendChild(graphDiv);
24+
25+
return graphDiv;
26+
},
27+
28+
plotMock: function(mockName, id) {
29+
var mockURL = '/test/image/mocks/' + mockName + '.json';
30+
31+
window.Plotly.d3.json(mockURL, function(err, fig) {
32+
window.Plotly.plot(Tabs.fresh(id), fig.data, fig.layout);
33+
});
34+
},
35+
36+
snapshot: function(id) {
37+
var gd = Tabs.getGraph(id);
38+
39+
if(!gd._fullLayout || !gd._fullData) {
40+
return;
41+
}
42+
43+
var image = new Image();
44+
45+
window.Plotly.Snapshot.toImage(gd, { format: 'png' }).on('success', function(img) {
46+
image.src = img;
47+
48+
var imageDiv = document.getElementById('snapshot');
49+
imageDiv.appendChild(image);
50+
51+
console.warn('Snapshot complete!');
52+
});
53+
},
54+
55+
purge: function() {
56+
var plots = document.getElementsByClassName('dashboard-plot');
57+
var images = document.getElementsById('snapshot');
58+
59+
while(images.firstChild) {
60+
images.removeChild(images.firstChild);
61+
}
62+
63+
for(var i = 0; i < plots.length; i++) {
64+
window.Plotly.purge(plots[i]);
65+
}
66+
},
67+
68+
onReload: function() {
69+
return;
70+
},
71+
72+
reload: function() {
73+
var source = document.getElementById('source');
74+
var reloaded = document.getElementById('reload-time');
75+
76+
source.remove();
77+
78+
window.Plotly = null;
79+
80+
source = document.createElement('script');
81+
source.id = 'source';
82+
source.src = '../../build/plotly.js';
83+
84+
document.body.appendChild(source);
85+
86+
var reloadTime = new Date().toLocaleTimeString();
87+
console.warn('plotly.js reloaded at ' + reloadTime);
88+
reloaded.textContent = 'last reload at ' + reloadTime;
89+
90+
Tabs.onReload();
91+
}
92+
};
93+
94+
95+
setInterval(function() {
96+
window.gd = Tabs.getGraph() || Tabs.fresh();
97+
window.fullLayout = window.gd._fullLayout;
98+
window.fullData = window.gd._fullData;
99+
}, 1000);
100+
101+
102+
// Mocks search and plotting
103+
var f = new window.Fuse(window.MOCKS, { keys: ['name'] });
104+
105+
var searchBar = document.getElementById('mocks-search');
106+
var mocksList = document.getElementById('mocks-list');
107+
searchBar.addEventListener('keyup', function(e) {
108+
109+
// Clear results.
110+
while(mocksList.firstChild) {
111+
mocksList.removeChild(mocksList.firstChild);
112+
}
113+
114+
115+
var results = f.search(e.target.value);
116+
117+
results.forEach(function(r) {
118+
var result = document.createElement('span');
119+
result.className = 'search-result';
120+
result.innerText = r.name;
121+
122+
result.addEventListener('click', function() {
123+
// Clear plots and plot selected.
124+
Tabs.purge();
125+
Tabs.plotMock(r.file.slice(0, -5));
126+
console.warn('Plotting:', r.file);
127+
128+
// Clear results.
129+
while(mocksList.firstChild) {
130+
mocksList.removeChild(mocksList.firstChild);
131+
}
132+
133+
e.target.value = '';
134+
});
135+
136+
mocksList.appendChild(result);
137+
});
138+
});

‎devtools/test_dashboard_v2/fuse.min.js‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎devtools/test_dashboard_v2/index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools</title>
5+
<style type="text/css">
6+
html, body{
7+
margin: 0;
8+
padding: 0;
9+
font-family: helvetica, arial, sans-serif;
10+
}
11+
header{
12+
height: 40px;
13+
border-bottom: 1px solid #4983EC;
14+
}
15+
header img{
16+
height: 100%;
17+
display: inline-block;
18+
vertical-align: top;
19+
}
20+
header input{
21+
float: right;
22+
background-color: none;
23+
border: none;
24+
border-bottom: 1px solid #ddd;
25+
padding: 5px;
26+
outline: none;
27+
margin-top: 6px;
28+
margin-right: 10px;
29+
}
30+
#reload-time{
31+
color: #bbb;
32+
font-size: 10px;
33+
line-height: 40px;
34+
}
35+
#mocks-list{
36+
position: absolute;
37+
right: 0px;
38+
top: 40px;
39+
z-index: 1000;
40+
background-color: #fff;
41+
border-left: 1px solid #4983EC;
42+
border-bottom: 1px solid #4983EC;
43+
border-top: 1px solid #4983EC;
44+
}
45+
.search-result{
46+
display: block;
47+
margin-bottom: 2px;
48+
padding: 5px 10px;
49+
text-align: right;
50+
font-size: 12px;
51+
}
52+
.search-result:hover{
53+
color: #fff;
54+
background-color: #4983EC;
55+
}
56+
.dashboard-plot{
57+
margin-bottom: 30px;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<header>
63+
<img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();">
64+
<span id="reload-time"></span>
65+
66+
<input id="mocks-search" type="text" placeholder="mocks search"></input>
67+
</header>
68+
69+
<section id="mocks-list"></section>
70+
<div id="plots"></div>
71+
<div id="snapshot"></div>
72+
73+
<script id="source" type="text/javascript" src="../../build/plotly.js"></script>
74+
<script type="text/javascript" src="./fuse.min.js"></script>
75+
<script type="text/javascript" src="./mocks.js"></script>
76+
<script type="text/javascript" src="./devtools.js"></script>
77+
</body>
78+
</html>
79+

0 commit comments

Comments
 (0)