Provide regl-based traces in the strict bundle

devtools/regl_codegen/devtools.js

@@ -0,0 +1,145 @@
+'use strict';
+
+/* global Plotly:false */
+
+var mocks = require('../../build/test_dashboard_mocks.json');
+var reglTraces = require('../../build/regl_traces.json');
+var Lib = require('@src/lib');
+
+// 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.parentNode.removeChild(graphDiv);
+        }
+
+        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) {
+        return new Promise(function (res, rej) {
+
+            var mockURL = '/test/image/mocks/' + mockName + '.json';
+
+            console.warn('Plotting:', mockURL);
+
+            var request = new XMLHttpRequest();
+            request.open('GET', mockURL, true);
+            request.responseType = '';
+            request.send();
+
+            request.onreadystatechange = function() {
+                if(this.readyState === 4) {
+                    if(this.status === 200) {
+                        var fig = JSON.parse(this.responseText);
+                        var graphDiv = Tabs.fresh(id);
+
+                        Plotly.newPlot(graphDiv, fig);
+
+                        graphDiv.on('plotly_afterplot', function() {
+                            res(graphDiv);
+                        });
+
+
+                    } else {
+                        console.error(this.statusText);
+                    }
+                }
+            };
+        })
+    },
+};
+
+
+// Bind things to the window
+window.Tabs = Tabs;
+window.Lib = Lib;
+window.onload = handleOnLoad;
+setInterval(function() {
+    window.gd = Tabs.getGraph() || Tabs.fresh();
+    window.fullLayout = window.gd._fullLayout;
+    window.fullData = window.gd._fullData;
+}, 1000);
+
+var mocksList = document.getElementById('mocks-list');
+
+async function handleOnLoad() {
+    var mocksByReglTrace = {};
+
+    for (var trace of reglTraces) {
+        mocksByReglTrace[trace] = [];
+        for (var mock of mocks) {
+            if (mock.keywords.indexOf(trace) !== -1) {
+                mocksByReglTrace[trace].push(mock);
+            }
+        }
+    }
+
+    for (var trace of Object.keys(mocksByReglTrace)) {
+        var thisMocks = mocksByReglTrace[trace];
+        var div = document.createElement('div');
+        div.className = 'mock-group';
+        div.innerHTML = '<h3>' + trace + '</h3>';
+        mocksList.appendChild(div);
+        for (var mock of thisMocks) {
+            var a = document.createElement('a');
+            a.className = 'mock-link';
+            a.innerHTML = mock.name;
+            a.href = '#' + mock.name;
+            a.onclick = function() {
+                Tabs.plotMock(this.innerHTML);
+            };
+            div.appendChild(a);
+            div.appendChild(document.createElement('br'));
+        }
+    }
+
+    // visit the mocks one by one.
+    for (var trace of Object.keys(mocksByReglTrace)) {
+        var thisMocks = mocksByReglTrace[trace];
+        for (var mock of thisMocks) {
+            await Tabs.plotMock(mock.name);
+        }
+
+        console.log(window.__regl_codegen_cache);
+        var body = JSON.stringify({
+            generated: Object.entries(window.__regl_codegen_cache).reduce((acc, [key, value]) => {
+                acc[key] = value.toString();
+                return acc;
+            }, {}),
+            trace: trace
+        });
+        window.__regl_codegen_cache = {};
+        await fetch("/api/submit-code", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body
+        });
+    }
+
+    // close
+    await fetch("/api/codegen-done");
+    window.close();
+}

devtools/regl_codegen/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>REGL Codegen</title>
+  <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"/>
+  <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+  <section id="mocks-list"></section>
+  <div id="plots">
+    <div id="graph"></div>
+  </div>
+  <div id="snapshot"></div>
+
+  <script src="../../node_modules/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
+  <script charset="utf-8" id="source"  type="module">import "../../build/plotly.js"</script>
+  <script charset="utf-8" src="../../build/regl_codegen-bundle.js"></script>
+</body>
+</html>