Skip to content

Commit 469012a

Browse files
mdtuszmdtusz
committed
Merge pull request #386 from plotly/devtools-refresh
Devtools overhaul - now with reloadng and search!
2 parents caea2aa + 3cf0f55 commit 469012a

File tree

12 files changed

+392
-412
lines changed

12 files changed

+392
-412
lines changed

‎devtools/.eslintrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
"env": {
44
"node": true,
55
"browser": true
6+
},
7+
"globals": {
8+
"Promise": true
69
}
710
}

‎devtools/test_dashboard/buttons.js

Lines changed: 0 additions & 158 deletions
This file was deleted.

‎devtools/test_dashboard/devtools.js

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
var Fuse = require('fuse.js');
2+
var mocks = require('../../build/test_dashboard_mocks.json');
3+
4+
5+
// Our gracious testing object
6+
var Tabs = {
7+
8+
// Return the specified plot container (or default one)
9+
getGraph: function(id) {
10+
id = id || 'graph';
11+
return document.getElementById(id);
12+
},
13+
14+
// Create a new plot container
15+
fresh: function(id) {
16+
id = id || 'graph';
17+
18+
var graphDiv = Tabs.getGraph(id);
19+
20+
if(graphDiv) {
21+
graphDiv.remove();
22+
}
23+
24+
graphDiv = document.createElement('div');
25+
graphDiv.className = 'dashboard-plot';
26+
graphDiv.id = id;
27+
28+
var plotArea = document.getElementById('plots');
29+
plotArea.appendChild(graphDiv);
30+
31+
return graphDiv;
32+
},
33+
34+
// Plot a mock by name (without .json) to the default or specified container
35+
plotMock: function(mockName, id) {
36+
var mockURL = '/test/image/mocks/' + mockName + '.json';
37+
38+
window.Plotly.d3.json(mockURL, function(err, fig) {
39+
window.Plotly.plot(Tabs.fresh(id), fig.data, fig.layout);
40+
41+
console.warn('Plotting:', mockURL);
42+
});
43+
},
44+
45+
// Save a png snapshot and display it below the plot
46+
snapshot: function(id) {
47+
var gd = Tabs.getGraph(id);
48+
49+
if(!gd._fullLayout || !gd._fullData) {
50+
return;
51+
}
52+
53+
var image = new Image();
54+
55+
window.Plotly.Snapshot.toImage(gd, { format: 'png' }).on('success', function(img) {
56+
image.src = img;
57+
58+
var imageDiv = document.getElementById('snapshot');
59+
imageDiv.appendChild(image);
60+
61+
console.warn('Snapshot complete!');
62+
});
63+
},
64+
65+
// Remove all plots and snapshots from the page
66+
purge: function() {
67+
var plots = document.getElementsByClassName('dashboard-plot');
68+
var images = document.getElementById('snapshot');
69+
70+
while(images.firstChild) {
71+
images.removeChild(images.firstChild);
72+
}
73+
74+
for(var i = 0; i < plots.length; i++) {
75+
window.Plotly.purge(plots[i]);
76+
}
77+
},
78+
79+
// Specify what to do after each plotly.js script reload
80+
onReload: function() {
81+
return;
82+
},
83+
84+
// Refreshes the plotly.js source without needing to refresh the page
85+
reload: function() {
86+
var source = document.getElementById('source');
87+
var reloaded = document.getElementById('reload-time');
88+
89+
source.remove();
90+
91+
window.Plotly = null;
92+
93+
source = document.createElement('script');
94+
source.id = 'source';
95+
source.src = '../../build/plotly.js';
96+
97+
document.body.appendChild(source);
98+
99+
var reloadTime = new Date().toLocaleTimeString();
100+
console.warn('plotly.js reloaded at ' + reloadTime);
101+
reloaded.textContent = 'last reload at ' + reloadTime;
102+
103+
Tabs.onReload();
104+
}
105+
};
106+
107+
108+
// Bind things to the window
109+
window.Tabs = Tabs;
110+
setInterval(function() {
111+
window.gd = Tabs.getGraph() || Tabs.fresh();
112+
window.fullLayout = window.gd._fullLayout;
113+
window.fullData = window.gd._fullData;
114+
}, 1000);
115+
116+
117+
// Mocks search and plotting
118+
var f = new Fuse(mocks, {
119+
keys: [{
120+
name: 'name',
121+
weight: 0.7
122+
}, {
123+
name: 'keywords',
124+
weight: 0.3
125+
}]
126+
});
127+
128+
var searchBar = document.getElementById('mocks-search');
129+
var mocksList = document.getElementById('mocks-list');
130+
var plotArea = document.getElementById('plots');
131+
132+
searchBar.addEventListener('keyup', function(e) {
133+
134+
// Clear results.
135+
while(mocksList.firstChild) {
136+
mocksList.removeChild(mocksList.firstChild);
137+
}
138+
139+
140+
var results = f.search(e.target.value);
141+
142+
results.forEach(function(r) {
143+
var result = document.createElement('span');
144+
result.className = 'search-result';
145+
result.innerText = r.name;
146+
147+
result.addEventListener('click', function() {
148+
149+
// Clear plots and plot selected.
150+
Tabs.purge();
151+
Tabs.plotMock(r.file.slice(0, -5));
152+
});
153+
154+
mocksList.appendChild(result);
155+
156+
var listWidth = mocksList.getBoundingClientRect().width;
157+
var plotAreaWidth = Math.floor(window.innerWidth - listWidth);
158+
plotArea.setAttribute('style', 'width: ' + plotAreaWidth + 'px;');
159+
});
160+
});

‎devtools/test_dashboard/index.html

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,25 @@
11
<!DOCTYPE html>
2+
<html>
23
<head>
3-
<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" />
4+
<title>Plotly.js Devtools</title>
5+
<link rel="stylesheet" type="text/css" href="./style.css">
46
</head>
57
<body>
8+
<header>
9+
<img src="http://images.plot.ly/logo/[email protected]" onClick="Tabs.reload();">
10+
<span id="reload-time"></span>
611

7-
<div id="plot-list" style="overflow:auto; height:100px;"></div>
8-
<div id="status-info" style="display:block; position:absolute; top:150px;"></div>
9-
<div id="embedded-graph"></div>
10-
<div id="embedded-image" style="display:block; position:absolute; top:800px;"></div>
12+
<input id="mocks-search" type="text" placeholder="mocks search"></input>
13+
</header>
1114

12-
<script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
13-
14-
<!-- use dev plotly.js build -->
15-
<script type="text/javascript" src="../../build/plotly.js" charset="utf-8"></script>
16-
17-
<!-- use local topojson files -->
18-
<script>Plotly.setPlotConfig({ topojsonURL: '../../dist/topojson/' });</script>
19-
20-
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
21-
22-
<!-- helper functions to manipulate the graph div -->
23-
<script>
24-
var d3 = Plotly.d3;
25-
26-
var Tabs = {
27-
getGraph: function() {
28-
return document.getElementById('embedded-graph').children[0];
29-
},
30-
31-
fresh: function() {
32-
var anchor = document.getElementById('embedded-graph'),
33-
graphDiv = Tabs.getGraph();
34-
35-
if(graphDiv) anchor.removeChild(graphDiv);
36-
graphDiv = document.createElement('div');
37-
anchor.appendChild(graphDiv);
38-
39-
return graphDiv;
40-
},
41-
42-
plotMock: function(mockName) {
43-
var mockURL = '../../test/image/mocks/' + mockName + '.json';
44-
45-
d3.json(mockURL, function(err, fig) {
46-
Plotly.plot(Tabs.fresh(), fig.data, fig.layout);
47-
});
48-
}
49-
};
50-
</script>
15+
<section id="mocks-list"></section>
16+
<div id="plots">
17+
<div id="graph"></div>
18+
</div>
19+
<div id="snapshot"></div>
5120

21+
<script id="source" type="text/javascript" src="../../build/plotly.js"></script>
22+
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
5223
</body>
5324
</html>
25+

0 commit comments

Comments
 (0)