Shorten batch visibility URL hash in codec-compare (#27)

Load default_batches.json instead of demo_batches.json by default.
Move the ref batch's name to the top of the Summary and Advanced tabs.
Replace the focus button by a ref batch dropdown in Advanced tab.
Display the reference batch in the Summary tab in absolute mode.
Display "reference" chip in Advanced tab instead of "-" cells.
Display per-batch match count in Advanced tab, instead of total sum.

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.5.4
+
+- Shorten the URL hash way of storing which batches are displayed.
+- Load default_batches.json instead of demo_batches.json by default.
+- Move the reference batch's name to the top of the Summary and Advanced tabs.
+- Replace the focus icon button by a dropdown to select the reference batch in
+  the Advanced tab.
+- Display the reference batch in the Summary tab in absolute mode.
+- Display a "reference" chip in Advanced tab instead of "-" cells.
+- Display the number of comparisons per batch instead of the sum in the Advanced
+  tab.
+
 ## v0.5.3
 
 - Display the constants-table-ui component when selecting a match.

assets/demo_batches.json assets/default_batches.jsonassets/demo_batches.json renamed to assets/default_batches.json

@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",

package.json

@@ -34,24 +34,7 @@ export class BatchSelectionActionsUi extends LitElement {
 
   override render() {
     const batchSelection = this.state.batchSelections[this.batchSelectionIndex];
-
-    // Note: A span is used because title does not appear on hover when
-    //       mwc-icon-button is disabled.
-    const focusTitle = `${
-        this.isReference ? 'Used' :
-                           'Use'} as reference to compare other codecs with`;
-
     return html`
-      <span title="${focusTitle}">
-        <mwc-icon-button
-          ?disabled=${this.isReference}
-          icon=${this.isReference ? 'center_focus_strong' : 'center_focus_weak'}
-          @click=${() => {
-      this.state.referenceBatchSelectionIndex = this.batchSelectionIndex;
-      dispatch(EventType.REFERENCE_CHANGED);
-    }}>
-        </mwc-icon-button>
-      </span>
       <span title="${batchSelection.isDisplayed ? 'Hide' : 'Show'}">
         <mwc-icon-button
           icon=${batchSelection.isDisplayed ? 'visibility' : 'visibility_off'}

readme_preview.png

@@ -48,15 +48,6 @@ export class BatchSelectionsUi extends LitElement {
     const referenceBatch =
         this.state.batchSelections[this.state.referenceBatchSelectionIndex]
             .batch;
-    if (this.state.showRelativeRatios &&
-        batchSelectionIndex === this.state.referenceBatchSelectionIndex) {
-      const title = referenceBatch.name + ' is used as reference';
-      return html`
-        <td class="stat" title="${title}">
-          -
-        </td>
-      `;
-    }
     if (batchSelection.matchedDataPoints.rows.length === 0) {
       const title = 'There is no data to compare ' + batch.name + ' with ' +
           referenceBatch.name;
@@ -142,7 +133,8 @@ export class BatchSelectionsUi extends LitElement {
   }
 
   private renderBatchSelectionRow(
-      batchSelection: BatchSelection, index: number) {
+      batchSelection: BatchSelection, index: number,
+      numEnabledMetrics: number) {
     const batch = batchSelection.batch;
     return html`
       <tr>
@@ -162,10 +154,20 @@ export class BatchSelectionsUi extends LitElement {
             .isReference=${index === this.state.referenceBatchSelectionIndex}>
           </batch-selection-actions-ui>
         </td>
-        ${this.state.metrics.map((metric: FieldMetric, metricIndex: number) => {
-      return this.renderRowMetric(
-          batchSelection, index, metric, batchSelection.stats[metricIndex]);
-    })}
+        ${
+        (this.state.showRelativeRatios &&
+         index === this.state.referenceBatchSelectionIndex) ?
+            html`
+        <td class="notText" colspan=${numEnabledMetrics}
+          title="${batch.name} is used as reference">
+          <span class="referenceBatchChip">reference</span>
+        </td>` :
+            this.state.metrics.map(
+                (metric: FieldMetric, metricIndex: number) => {
+                  return this.renderRowMetric(
+                      batchSelection, index, metric,
+                      batchSelection.stats[metricIndex]);
+                })}
       </tr>`;
   }
 
@@ -182,7 +184,8 @@ export class BatchSelectionsUi extends LitElement {
         ${
         this.state.batchSelections.map(
             (batchSelection: BatchSelection, index: number) => {
-              return this.renderBatchSelectionRow(batchSelection, index);
+              return this.renderBatchSelectionRow(
+                  batchSelection, index, numEnabledMetrics);
             })}
       </table>
     `;
@@ -267,6 +270,15 @@ export class BatchSelectionsUi extends LitElement {
     #filterChip:hover {
       cursor: pointer;
     }
+
+    .referenceBatchChip {
+      background: var(--mdc-theme-primary);
+      color: var(--mdc-theme-background);
+      border-radius: 16px;
+      padding: 2px 8px;
+      font-size: 12px;
+      margin-left: 8px;
+    }
   `;
 }
 

src/batch_selection_actions_ui.ts

@@ -63,7 +63,7 @@ describe('BatchSelectionsUi', () => {
       expect(stats).toBeDefined();
       if (stats === undefined) return;
 
-      expect(stats).toHaveSize(state.batches.length);
+      expect(stats).toHaveSize(state.batches.length - 1);
       expect(stats).toHaveSize(expectedStats.length);
       for (const [index, stat] of stats.entries()) {
         expect(stat).toBeInstanceOf(HTMLTableCellElement);
@@ -75,20 +75,20 @@ describe('BatchSelectionsUi', () => {
     };
 
     // No stat was computed yet.
-    expectStatsToBe(['-', 'n/a']);
+    expectStatsToBe(['n/a']);
 
     // The first batch is used as the reference so there is no stat compared
     // with itself. The second batch is compared with the first batch based on
     // the values of the field used as a metric.
     expect(state.referenceBatchSelectionIndex).toBe(0);
     dispatch(EventType.MATCHER_OR_METRIC_CHANGED);
     await batchSelectionsEl.updateComplete;
-    expectStatsToBe(['-', '+120.0%']);
+    expectStatsToBe(['+120.0%']);
 
     // Swapping the reference leads to the opposite results.
     state.referenceBatchSelectionIndex = 1;
     dispatch(EventType.REFERENCE_CHANGED);
     await batchSelectionsEl.updateComplete;
-    expectStatsToBe(['-54.5%', '-']);
+    expectStatsToBe(['-54.5%']);
   });
 });

src/batch_selections_ui.ts

@@ -12,7 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import '@material/mwc-button';
 import '@material/mwc-icon';
+import '@material/mwc-menu';
 import '@material/mwc-tab-bar';
 import '@material/mwc-tab';
 import './batch_name_ui';
@@ -27,6 +29,8 @@ import './panel_ui';
 import './sentence_ui';
 import './settings_ui';
 
+import {ActionDetail} from '@material/mwc-list';
+import {Menu} from '@material/mwc-menu';
 import {css, html, LitElement} from 'lit';
 import {customElement, query} from 'lit/decorators.js';
 
@@ -67,14 +71,37 @@ export class CodecCompare extends LitElement {
   @query('help-ui') private readonly helpUi!: HelpUi;
   @query('loading-ui') private readonly loadingUi!: LoadingUi;
 
+  @query('#referenceMenu') private readonly referenceMenu!: Menu;
+
   private renderReference(referenceBatch: Batch) {
     return html`
-      <p id="referenceBatch">
-        compared to <batch-name-ui .batch=${referenceBatch} @click=${() => {
-      dispatch(
-          EventType.BATCH_INFO_REQUEST, {batchIndex: referenceBatch.index});
-    }}></batch-name-ui>.
-      </p>`;
+      <mwc-button icon="arrow_drop_down" trailingIcon raised
+          title="Change the reference batch to compare other codecs with"
+          id="referenceButton" @click=${() => {
+      this.referenceMenu.show();
+    }}>
+        <batch-name-ui .batch=${referenceBatch}></batch-name-ui>
+      </mwc-button>
+      <mwc-menu
+        .anchor=${this.referenceMenu}
+        corner="BOTTOM_LEFT"
+        menuCorner="START"
+        id="referenceMenu"
+        @action=${(e: CustomEvent<ActionDetail>) => {
+      this.state.referenceBatchSelectionIndex = e.detail.index;
+      dispatch(EventType.REFERENCE_CHANGED);
+    }}>
+        ${
+        this.state.batches.map(
+            (batch) => html`
+        <mwc-list-item ?activated=${batch.index === referenceBatch.index}>
+          <batch-name-ui .batch=${batch}></batch-name-ui>
+          ${
+                batch.index === referenceBatch.index ?
+                    html`<span class="referenceBatchChip">reference</span>` :
+                    html``}
+        </mwc-list-item>`)}
+      </mwc-menu>`;
   }
 
   private renderSentence() {
@@ -107,17 +134,27 @@ export class CodecCompare extends LitElement {
   }
 
   override render() {
-    let numComparisons = 0;
+    let minNumComparisons = -1;
+    let maxNumComparisons = -1;
     let truncatedResults = false;
     let hasHistograms = false;
     for (const [index, batchSelection] of this.state.batchSelections
              .entries()) {
       if (index !== this.state.referenceBatchSelectionIndex) {
-        numComparisons += batchSelection.matchedDataPoints.rows.length;
+        const numComparisons = batchSelection.matchedDataPoints.rows.length;
+        minNumComparisons = minNumComparisons === -1 ?
+            numComparisons :
+            Math.min(minNumComparisons, numComparisons);
+        maxNumComparisons = maxNumComparisons === -1 ?
+            numComparisons :
+            Math.max(maxNumComparisons, numComparisons);
         truncatedResults ||= batchSelection.matchedDataPoints.limited;
       }
       hasHistograms ||= batchSelection.histogram.length > 0;
     }
+    const numComparisonsStr = minNumComparisons === maxNumComparisons ?
+        `${Math.max(0, maxNumComparisons)}` :
+        `${minNumComparisons} to ${maxNumComparisons}`;
 
     let referenceBatch: Batch|undefined = undefined;
     if (this.state.referenceBatchSelectionIndex >= 0 &&
@@ -143,11 +180,15 @@ export class CodecCompare extends LitElement {
           <div id="advancedInterface">
             <div class="scrollFriendlyPadding"></div>
             ${truncatedResults ? this.renderTruncatedResults() : ''}
-            <p id="numComparisons">Based on ${numComparisons} comparisons,</p>
+            <p id="numComparisons" style="position: relative;">
+              Based on ${numComparisonsStr} comparisons
+              ${
+        referenceBatch ? html`with ${this.renderReference(referenceBatch)}` :
+                         ''},
+            </p>
             <matchers-ui .state=${this.state} id="matchers"></matchers-ui>
             <metrics-ui .state=${this.state} id="metrics"></metrics-ui>
             <batch-selections-ui .state=${this.state}></batch-selections-ui>
-            ${referenceBatch ? this.renderReference(referenceBatch) : ''}
             <div class="scrollFriendlyPadding"></div>
           </div>
         </div>
@@ -204,7 +245,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare version 0.5.3<br>
+            Codec Compare version 0.5.4<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>
@@ -277,8 +318,8 @@ export class CodecCompare extends LitElement {
       let jsonPaths = url.getAll('batch');
       try {
         if (jsonPaths.length === 0) {
-          const pathOfJsonContaingJsonPaths =
-              decodeURIComponent(url.get('load') ?? '/demo_batches.json');
+          const pathOfJsonContaingJsonPaths = decodeURIComponent(
+              url.get('load') ?? '/default_batches.json');
           jsonPaths = await loadJsonContainingBatchJsonPaths(
               pathOfJsonContaingJsonPaths);
         }
@@ -365,6 +406,29 @@ export class CodecCompare extends LitElement {
     batch-name-ui:hover {
       cursor: pointer;
     }
+    #referenceButton {
+      --mdc-theme-primary: white;
+      --mdc-theme-on-primary: var(--mdc-theme-text);
+      /* Align the following comma to the bottom of the button. */
+      vertical-align: bottom;
+    }
+    #referenceButton batch-name-ui {
+      color: var(--mdc-theme-text);
+      font-size: 16px;
+      white-space: nowrap;
+      text-transform: none;
+    }
+    #referenceMenu {
+      --mdc-menu-item-height: 20px;
+    }
+    .referenceBatchChip {
+      background: var(--mdc-theme-primary);
+      color: var(--mdc-theme-background);
+      border-radius: 16px;
+      padding: 2px 8px;
+      font-size: 12px;
+      margin-left: 8px;
+    }
     #truncatedResults {
       background: orange;
       border-radius: 16px;

src/batch_selections_ui_test.ts

@@ -148,7 +148,7 @@ describe('loadBatchJson', () => {
 describe('loadJsonContainingBatchJsonPaths', () => {
   it('loads a JSON file', async () => {
     const paths =
-        await loadJsonContainingBatchJsonPaths('/assets/demo_batches.json');
+        await loadJsonContainingBatchJsonPaths('/assets/default_batches.json');
     expect(paths).toEqual(jasmine.arrayWithExactContents([
       '/assets/demo_batch_some_codec_exp.json',
       '/assets/demo_batch_some_codec_effort1.json',

src/codec_compare.ts

@@ -100,12 +100,8 @@ export class HelpUi extends LitElement {
           ['codec-compare', 'gallery-ui', '#sourceDataSet']);
     }
 
-    // This is not the description of the #referenceBatch <p> but it is used as
-    // a convenient top anchor to fill the remaining graph area till the bottom
-    // of the screen.
-    positionElementAtTheRightOf(
-        this.graphDescription, ['codec-compare', '#referenceBatch']);
     this.graphDescription.style.bottom = '60px';
+    this.graphDescription.style.left = '600px';
     this.graphDescription.style.height = '';
 
     // Note that the positions above will be stale if the elements used as
@@ -154,7 +150,7 @@ export class HelpUi extends LitElement {
         point is an image compressed then decompressed, with some codec settings
         and some measured information such as encoding duration, visual
         distortion etc. The number of comparisons is the number of matched pairs
-        across all batches.
+        between a batch and the reference batch.
         </p>
       </div>
 
@@ -191,8 +187,6 @@ export class HelpUi extends LitElement {
           target="_blank">
           bits-per-pixel usually seen on the web
           <mwc-icon>open_in_new</mwc-icon></a>.<br>
-        Click the focus button to set a batch as the reference to compare the
-        others against.<br>
         Click the visibility button to show or hide a specific batch in the plot
         and in the SUMMARY tab.<br>
         The statistics relative to the reference batch for the fields selected
@@ -211,7 +205,7 @@ export class HelpUi extends LitElement {
         presented here to compare their relative performance.<br>
         <br>
         The count associated with each asset corresponds to the number of
-        matched pairs based on that asset.<br>
+        matched pairs based on that asset accross all batches.<br>
         Each image can be toggled on or off across all batches.
         </p>
       </div>`;
@@ -276,7 +270,7 @@ export class HelpUi extends LitElement {
       top: 0;
       bottom: 0;
       right: 0;
-      /** Translucid enough to see through, dark enough to read white text.*/
+      /* Translucid enough to see through, dark enough to read white text. */
       background: rgba(0,0,0,0.7);
     }