Devtools overhaul - now with reloadng and search!

devtools/.eslintrc

@@ -3,5 +3,8 @@
   "env": {
     "node": true,
     "browser": true
+  },
+  "globals": {
+    "Promise": true
   }
 }

devtools/test_dashboard/devtools.js

@@ -0,0 +1,160 @@
+var Fuse = require('fuse.js');
+var mocks = require('../../build/test_dashboard_mocks.json');
+
+
+// Our gracious testing object
+var Tabs = {
+
+    // Return the specified plot container (or default one)
+    getGraph: function(id) {
+        id = id || 'graph';
+        return document.getElementById(id);
+    },
+
+    // Create a new plot container
+    fresh: function(id) {
+        id = id || 'graph';
+
+        var graphDiv = Tabs.getGraph(id);
+
+        if(graphDiv) {
+            graphDiv.remove();
+        }
+
+        graphDiv = document.createElement('div');
+        graphDiv.className = 'dashboard-plot';
+        graphDiv.id = id;
+
+        var plotArea = document.getElementById('plots');
+        plotArea.appendChild(graphDiv);
+
+        return graphDiv;
+    },
+
+    // Plot a mock by name (without .json) to the default or specified container
+    plotMock: function(mockName, id) {
+        var mockURL = '/test/image/mocks/' + mockName + '.json';
+
+        window.Plotly.d3.json(mockURL, function(err, fig) {
+            window.Plotly.plot(Tabs.fresh(id), fig.data, fig.layout);
+
+            console.warn('Plotting:', mockURL);
+        });
+    },
+
+    // Save a png snapshot and display it below the plot
+    snapshot: function(id) {
+        var gd = Tabs.getGraph(id);
+
+        if(!gd._fullLayout || !gd._fullData) {
+            return;
+        }
+
+        var image = new Image();
+
+        window.Plotly.Snapshot.toImage(gd, { format: 'png' }).on('success', function(img) {
+            image.src = img;
+
+            var imageDiv = document.getElementById('snapshot');
+            imageDiv.appendChild(image);
+
+            console.warn('Snapshot complete!');
+        });
+    },
+
+    // Remove all plots and snapshots from the page
+    purge: function() {
+        var plots = document.getElementsByClassName('dashboard-plot');
+        var images = document.getElementById('snapshot');
+
+        while(images.firstChild) {
+            images.removeChild(images.firstChild);
+        }
+
+        for(var i = 0; i < plots.length; i++) {
+            window.Plotly.purge(plots[i]);
+        }
+    },
+
+    // Specify what to do after each plotly.js script reload
+    onReload: function() {
+        return;
+    },
+
+    // Refreshes the plotly.js source without needing to refresh the page
+    reload: function() {
+        var source = document.getElementById('source');
+        var reloaded = document.getElementById('reload-time');
+
+        source.remove();
+
+        window.Plotly = null;
+
+        source = document.createElement('script');
+        source.id = 'source';
+        source.src = '../../build/plotly.js';
+
+        document.body.appendChild(source);
+
+        var reloadTime = new Date().toLocaleTimeString();
+        console.warn('plotly.js reloaded at ' + reloadTime);
+        reloaded.textContent = 'last reload at ' + reloadTime;
+
+        Tabs.onReload();
+    }
+};
+
+
+// Bind things to the window
+window.Tabs = Tabs;
+setInterval(function() {
+    window.gd = Tabs.getGraph() || Tabs.fresh();
+    window.fullLayout = window.gd._fullLayout;
+    window.fullData = window.gd._fullData;
+}, 1000);
+
+
+// Mocks search and plotting
+var f = new Fuse(mocks, {
+    keys: [{
+        name: 'name',
+        weight: 0.7
+    }, {
+        name: 'keywords',
+        weight: 0.3
+    }]
+});
+
+var searchBar = document.getElementById('mocks-search');
+var mocksList = document.getElementById('mocks-list');
+var plotArea = document.getElementById('plots');
+
+searchBar.addEventListener('keyup', function(e) {
+
+    // Clear results.
+    while(mocksList.firstChild) {
+        mocksList.removeChild(mocksList.firstChild);
+    }
+
+
+    var results = f.search(e.target.value);
+
+    results.forEach(function(r) {
+        var result = document.createElement('span');
+        result.className = 'search-result';
+        result.innerText = r.name;
+
+        result.addEventListener('click', function() {
+
+            // Clear plots and plot selected.
+            Tabs.purge();
+            Tabs.plotMock(r.file.slice(0, -5));
+        });
+
+        mocksList.appendChild(result);
+
+        var listWidth = mocksList.getBoundingClientRect().width;
+        var plotAreaWidth = Math.floor(window.innerWidth - listWidth);
+        plotArea.setAttribute('style', 'width: ' + plotAreaWidth + 'px;');
+    });
+});

devtools/test_dashboard/index.html

@@ -1,53 +1,25 @@
 <!DOCTYPE html>
+<html>
 <head>
-    <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" />
+  <title>Plotly.js Devtools</title>
+  <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 <body>
+  <header>
+    <img src="http://images.plot.ly/logo/plotlyjs-logo@2x.png" onClick="Tabs.reload();">
+    <span id="reload-time"></span>
 
-    <div id="plot-list" style="overflow:auto; height:100px;"></div>
-    <div id="status-info" style="display:block; position:absolute; top:150px;"></div>
-    <div id="embedded-graph"></div>
-    <div id="embedded-image" style="display:block; position:absolute; top:800px;"></div>
+    <input id="mocks-search" type="text" placeholder="mocks search"></input>
+  </header>
 
-    <script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
-
-    <!-- use dev plotly.js build -->
-    <script type="text/javascript" src="../../build/plotly.js" charset="utf-8"></script>
-
-    <!-- use local topojson files -->
-    <script>Plotly.setPlotConfig({ topojsonURL: '../../dist/topojson/' });</script>
-
-    <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
-
-    <!-- helper functions to manipulate the graph div -->
-    <script>
-    var d3 = Plotly.d3;
-
-    var Tabs = {
-        getGraph: function() {
-            return document.getElementById('embedded-graph').children[0];
-        },
-
-        fresh: function() {
-            var anchor = document.getElementById('embedded-graph'),
-                graphDiv = Tabs.getGraph();
-
-            if(graphDiv) anchor.removeChild(graphDiv);
-            graphDiv = document.createElement('div');
-            anchor.appendChild(graphDiv);
-
-            return graphDiv;
-        },
-
-        plotMock: function(mockName) {
-            var mockURL = '../../test/image/mocks/' + mockName + '.json';
-
-            d3.json(mockURL, function(err, fig) {
-                Plotly.plot(Tabs.fresh(), fig.data, fig.layout);
-            });
-        }
-    };
-    </script>
+  <section id="mocks-list"></section>
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
 
+  <script id="source" type="text/javascript" src="../../build/plotly.js"></script>
+  <script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
 </body>
 </html>
+