Merge pull request #922 from rylev/visual-bug

Remove visual bug of non-collapsing benches

Author: rylev

site/static/compare.html

@@ -164,6 +164,24 @@
             border: 1px solid;
             cursor: help;
         }
+
+        #benches tbody::before {
+            content: '';
+            display: block;
+            height: 10px;
+        }
+
+        #benches td {
+            text-align: center;
+        }
+
+        #benches th {
+            border-right: dotted 1px;
+        }
+
+        .benchmark-name {
+            text-align: center;
+        }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 </head>
@@ -302,21 +320,12 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
             </div>
         </fieldset>
         <div v-if="data" id="content" style="margin-top: 15px">
-            <table class="compare" style="width: 80%; margin: 0 auto; font-size: medium !important;">
-                <tbody>
-                    <template v-for="bench in benches">
-                        <tr data-field-start="true">
-                            <th>
-                                <details>
-                                    <summary>{{ trimBenchName(bench.name) }}</summary>
-                                </details>
-                            </th>
-                            <td>min: <span v-bind:class="percentClass(bench.minPct)">{{bench.minPct}}%</span></td>
-                            <td>max: <span v-bind:class="percentClass(bench.maxPct)">{{bench.maxPct}}%</span></td>
-                            <td></td>
-                        </tr>
+            <table id="benches" class="compare" style="width: 80%; margin: 0 auto; font-size: medium !important;">
+                <template v-for="bench in benches">
+                    <tbody>
                         <template v-for="run in bench.variants">
                             <tr>
+                                <th v-if="run.index === 0" v-bind:rowspan="bench.variants.length"> {{bench.name}}</th>
                                 <td>{{ run.casename }}</td>
                                 <td>
                                     <a v-bind:href="detailedQueryLink(data.a.commit, bench.name, run.casename)">
@@ -338,8 +347,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                                 </td>
                             </tr>
                         </template>
-                    </template>
-                </tbody>
+                    </tbody>
+                </template>
             </table>
             <br />
             <table class="compare" style="margin: auto;" v-if="data && Object.keys(data.a.bootstrap).length > 0">
@@ -352,7 +361,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                     <th v-if="bootstrapTotals.b">B: {{bootstrapTotals.b.toFixed(3)}}</th>
                 </tr>
                 <template v-for="bootstrap in bootstraps">
-                    <tr data-field-start="true">
+                    <tr>
                         <th style="width: 19em;">{{bootstrap.name}}</th>
                         <td v-if="bootstrap.a">{{bootstrap.a}}</td>
                         <td v-if="bootstrap.b">{{bootstrap.b}}</td>
@@ -431,6 +440,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                     }
                     function toVariants(name) {
                         let variants = [];
+                        let index = 0;
                         for (let d of data.a.data[name]) {
                             const key = d[0];
                             const datumA = d[1];
@@ -451,11 +461,13 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
                             if (shouldShowBuild(key)) {
                                 variants.push({
                                     casename: key,
+                                    index,
                                     datumA,
                                     datumB,
                                     percent,
                                     isDodgy,
                                 });
+                                index += 1;
                             }
                         }