Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 469012a

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

File tree

Expand file treeCollapse file tree

12 files changed

+392
-412
lines changed
Filter options
Expand file treeCollapse file tree

12 files changed

+392
-412
lines changed

‎devtools/.eslintrc

Copy file name to clipboardExpand all lines: devtools/.eslintrc
+3Lines 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

Copy file name to clipboardExpand all lines: devtools/test_dashboard/buttons.js
-158Lines changed: 0 additions & 158 deletions
This file was deleted.

‎devtools/test_dashboard/devtools.js

Copy file name to clipboard
+160Lines 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

Copy file name to clipboard
+16-44Lines 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/plotlyjs-logo@2x.png" 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.