Merge pull request #188 from wtrgjadmw/modify-layout

This PR modified the layout of serial console to the side of the power graph to make the graphs of two iterations visible without scrolling the page. Also, d3area was deleted because it is not used.

docs/servo_power_test/index.css

@@ -158,19 +158,24 @@ body {
 }
 
 #backlog {
-  margin-top: 1rem;
-  width: 100vw;
+  width: 25%;
   padding: 0;
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
 }
 
 #backlog span {
   display: inline-block;
   border: 1px solid #aaa;
-  padding: 1rem;
+  padding: 16px;
+  width: auto;
   min-height: 100px;
-  height: 300px;
+  height: 448px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: scroll;
 }
 
 .log {
@@ -179,18 +184,11 @@ body {
   width: 26%;
 }
 
-#d3area {
-  width: 50%;
-  overflow-y: scroll;
-}
-
-#dut-console {
-  height: 100%;
-  width: 24%;
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-y: scroll;
+#graph-list {
+  width: 75%;
+  left: 0;
+  right: 0;
+  margin: 0;
 }
 
 #popup-overlay {

docs/servo_power_test/index.html

@@ -18,24 +18,25 @@
     <button id='halt-button'>Cancel</button>
     <button id='download-button'>Download</button>
     <span>number of iterations: <input id="iteration-input" type="number" placeholder="1"></span>
+    <span>margin: <input id="margin-time-input" type="number" value="300" autocomplete="off" />ms</span>
   </div>
   <div id="config">
     <button id="add-config-button">Add config</button>
     <ul id="shell-script-list"></ul>
   </div>
-  <p>margin: <input id="margin-time-input" type="number" value="300" autocomplete="off" />ms</p>
   <div id="total-histogram"></div>
-  <div id="backlog">
-    <span id="serial-output" class="log"></span>
-    <span id="d3area"></span>
-    <span id="dut-console"></span>
-  </div>
   <div class="flex">
     <p>current iteration: </p>
     <select id="iteration-selector" class="hidden"></select>
     <p id="current-iteration"></p>
   </div>
-  <ul id="graph-list"></ul>
+  <div class="flex">
+    <div id="backlog">
+      <span id="serial-output" class="log"></span>
+      <span id="dut-console"></span>
+    </div>
+    <ul id="graph-list"></ul>
+  </div>
   <span id="drop-zone">Drop .json here</span>
   <script src='./dist/index.js'></script>
 </body>

docs/servo_power_test/src/graph.ts

@@ -12,7 +12,7 @@ export class Graph {
   constructor(ui: Ui, graphDiv: HTMLElement, histogramDiv: HTMLElement) {
     this.ui = ui;
     this.g = new Dygraph(graphDiv, [], {
-      height: 500,
+      height: 480,
     });
     const parentElementSize = d3
       .select(histogramDiv)
@@ -45,6 +45,7 @@ export class Graph {
         file: powerDataList,
         labels: ['t', 'ina0'],
         showRoller: true,
+        height: 480,
         xlabel: 'Relative Time (s)',
         ylabel: 'Power (mW)',
         legend: 'always',