Andrew/c2m dashboard improvements

devtools/test_dashboard/index.html

@@ -10,19 +10,36 @@
   <header>
     <img src="http://images.plot.ly/logo/[email protected]" onClick="Tabs.reload();" />
     <span id="reload-time"></span>
-
-    <input id="mocks-search" type="text" placeholder="mocks search" />
+    <div></div> <!-- spacer -->
     <input id="css-transform" type="text" placeholder="css transform" />
+    <input id="mocks-search" type="text" placeholder="mocks search" />
   </header>
 
   <section id="mocks-list"></section>
-  <div id="plots">
-    <div id="graph"></div>
+  <div id="plots" tabindex="-1"> <!-- Don't focus the container -->
+    <div id="graph" tabindex="0"></div> <!-- focus the graph -->
   </div>
   <div id="snapshot"></div>
-
+  <div id="focus-display"
+       aria-hidden="true"
+       tabindex="-1"
+       style="pointer-events: none; margin: .5em; padding: .5em; border: 1px solid gray">
+    Focused element will appear here. Helpful for debugging &lt;tab&gt; behavior.
+  </div>
   <script src="../../node_modules/@plotly/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
   <script charset="utf-8" id="source" src="../../build/plotly.js"></script>
   <script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
+  <script>
+  const display = document.getElementById('focus-display');
+  document.addEventListener('focusin', () => {
+    const el = document.activeElement;
+    const tag = el.tagName.toLowerCase();
+    const id = el.id ? `#${el.id}` : '';
+    const cls = el.className ? `.${el.className.replace(/\s+/g, '.')}` : '';
+    const type = el.type ? ` type="${el.type}"` : '';
+    display.textContent = `Focused: <${tag}${id}${cls}${type}>`;
+  });
+</script>
+
 </body>
 </html>

devtools/test_dashboard/style.css

@@ -6,6 +6,10 @@ html, body{
 }
 header{
   position: fixed;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto auto;
+  align-items: center;
+  gap: 0.5em;
   top: 0;
   height: 40px;
   width: 100%;
@@ -19,7 +23,6 @@ header img{
   vertical-align: top;
 }
 header input{
-  float: right;
   background-color: none;
   border: none;
   border-bottom: 1px solid #ddd;

test/image/mocks/line_scatter_4y.json

@@ -0,0 +1,109 @@
+{
+ "data": [
+  {
+   "name":"x1 on y1 1",
+   "x": [1, 2, 3, 4],
+   "y": [10, 15, 13, 17],
+   "mode": "markers",
+   "type": "scatter",
+   "marker": {
+    "opacity": 0.5
+   }
+  },
+  {
+   "name":"x1 on y1 2",
+   "x": [2, 3, 4, 5],
+   "y": [16, 5, 11, 9],
+   "mode": "lines",
+   "type": "scatter",
+   "opacity": 0.5
+  },
+  {
+   "name":"x1 on y2 1",
+   "x": [1, 2, 3, 4],
+   "y": [12, 9, 15, 12],
+   "mode": "lines+markers",
+   "type": "scatter",
+   "opacity": 0.707,
+   "marker": {
+    "opacity": 0.707
+   },
+   "yaxis": "y2"
+  },
+  {
+   "name":"x1 on y2 2",
+   "x": [1, 2, 3],
+   "y": [1, 2, 3],
+   "opacity": 0.2,
+   "line": { "width": 10, "color": "red" },
+   "marker": { "size": 20, "color": "blue" },
+   "yaxis": "y2"
+  },
+  {
+   "name":"x1 on y3 1",
+   "x": [1, 2, 3, 4],
+   "y": [4, 5, 6, 7],
+   "type": "scatter",
+   "yaxis": "y3"
+  },
+  {
+   "name":"x1 on y3 2",
+   "x": [2, 3, 4, 5],
+   "y": [8, 9, 10, 11],
+   "type": "scatter",
+   "yaxis": "y3"
+  },
+  {
+   "name":"x1 on y4 1",
+   "x": [1, 2, 3, 4],
+   "y": [12, 9, 15, 12],
+   "type": "scatter",
+   "yaxis": "y4"
+  },
+  {
+   "name":"x1 on y4 2",
+   "x": [1, 2, 3],
+   "y": [11, 12, 13],
+   "type": "scatter",
+   "yaxis": "y4"
+  }
+ ],
+  "layout": {
+    "showlegend": false,
+    "yaxis": {
+      "anchor": "x",
+      "title": {
+        "text": "<b>First</b> yaxis title"
+      }
+    },
+    "yaxis2": {
+      "anchor": "x",
+      "overlaying": "y",
+      "side": "right",
+      "title": {
+        "text": "<b>Second</b> yaxis title"
+      }
+    },
+    "yaxis3": {
+      "anchor": "free",
+      "overlaying": "y",
+      "side": "right",
+      "title": {
+        "text": "<b>Third</b> yaxis title"
+      },
+      "position": 0.98
+    },
+    "yaxis4": {
+      "anchor": "free",
+      "overlaying": "y",
+      "side": "left",
+      "title": {
+        "text": "<b>Fourth</b> yaxis title"
+      },
+      "position": 0.02
+    },
+    "title": {
+      "text": "4 Y Axis Example"
+    }
+  }
+}