Codec-Compare version 0.1.10 (#4)

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.1.10
+
+- Fix swapped data point display toggle setting when off by default.
+- Improve matches table presentation.
+
 ## v0.1.9
 
 - Use bits-per-pixel instead of bytes-per-pixel for the "bpp" metric.

README.md

@@ -15,6 +15,15 @@ page can understand what is shown, but also useful to experts, by offering a
 convenient interactive user interface with matcher, metric and filter settings.
 The presented data should be easily reproducible and up-to-date.
 
+In contrast to more traditional
+[comparative benchmarks](https://storage.googleapis.com/avif-comparison/index.html),
+Codec-Compare aims to aggregate statistics after comparing pairs of two
+similarly encoded images, to avoid some of the bias brought by comparing already
+aggregated metrics. Most absolute metrics heavily depend on the dimensions and
+content of the source image and may not reflect the strengths of a codec when
+averaged; relative metrics can bring another perspective, at the expense of a
+reduced data point count due to discarded unmatched encoded images.
+
 Feel free to file an issue for any question, suggestion or bug report.
 Contributions are also welcome, see [CONTRIBUTING](CONTRIBUTING.md).
 

package.json

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

src/codec_compare.ts

@@ -143,7 +143,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare beta version 0.1.9<br>
+            Codec Compare beta version 0.1.10<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>
@@ -191,6 +191,7 @@ export class CodecCompare extends LitElement {
       this.urlState.save(this.state);
       this.requestUpdate();
     });
+    this.settingsUi.requestUpdate();  // Settings may have changed.
     // Trigger the computation of matches and stats.
     dispatch(EventType.REFERENCE_CHANGED);
 

src/matches_table_ui.ts

@@ -14,9 +14,10 @@
 
 import {css, html, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
 
 import {BatchSelection} from './batch_selection';
-import {areFieldsComparable, Batch, Field} from './entry';
+import {areFieldsComparable, Batch, Field, FieldId} from './entry';
 import {dispatch, EventType} from './events';
 import {FieldMatcher, Match} from './matcher';
 import {FieldMetric, getRatio} from './metric';
@@ -47,20 +48,37 @@ export class MatchesTableUi extends LitElement {
       selection: Batch, selectionFieldIndex: number, selectionRowIndex: number,
       reference: Batch, referenceFieldIndex: number,
       referenceRowIndex: number) {
+    const selectionField = selection.fields[selectionFieldIndex];
     const selectionValue =
         selection.rows[selectionRowIndex][selectionFieldIndex];
     const referenceValue =
         reference.rows[referenceRowIndex][referenceFieldIndex];
-    if (selection.fields[selectionFieldIndex].isNumber &&
-        reference.fields[referenceFieldIndex].isNumber) {
+    if (selectionField.id === FieldId.EFFORT ||
+        selectionField.id === FieldId.QUALITY) {
+      const referenceStyle = {'color': reference.color};
+      const selectionStyle = {'color': selection.color};
+      return html`
+          <td class="encodingSettingCell">
+            <span style=${styleMap(referenceStyle)}>${referenceValue}</span>
+            <span style=${styleMap(selectionStyle)}>${selectionValue}</span>
+          </td>`;
+    }
+
+    const referenceField = reference.fields[referenceFieldIndex];
+    const isNumber = selectionField.isNumber && referenceField.isNumber;
+    const cssClass = isNumber ? 'numberCell' : '';
+
+    if (isNumber && selectionField.id !== FieldId.WIDTH &&
+        selectionField.id !== FieldId.HEIGHT) {
       const ratio =
           getRatio(selectionValue as number, referenceValue as number);
-      return html`<td>${getRelativePercent(ratio)}</td>`;
+      return html`<td class="${cssClass}">${getRelativePercent(ratio)}</td>`;
     }
     if (selectionValue === referenceValue) {
-      return html`<td>${selectionValue}</td>`;
+      return html`<td class="${cssClass}">${selectionValue}</td>`;
     }
-    return html`<td>${selectionValue} ≠ ${referenceValue}</td>`;
+    return html`
+        <td class="${cssClass}">${selectionValue} ≠ ${referenceValue}</td>`;
   }
 
   // Header rows (two needed because some cells use a rowspan)
@@ -201,7 +219,7 @@ export class MatchesTableUi extends LitElement {
           ${metricIndices.map((metricIndex) => {
       const mean =
           this.batchSelection.stats[metricIndex].getMean(/*geometric=*/ false);
-      return html`<td>${getRelativePercent(mean)}</td>`;
+      return html`<td class="numberCell">${getRelativePercent(mean)}</td>`;
     })}
           <td colspan=${selectionSharedFieldIndices.length} class="missing">
           </td>
@@ -215,7 +233,7 @@ export class MatchesTableUi extends LitElement {
           ${metricIndices.map((metricIndex) => {
       const mean =
           this.batchSelection.stats[metricIndex].getMean(/*geometric=*/ true);
-      return html`<td>${getRelativePercent(mean)}</td>`;
+      return html`<td class="numberCell">${getRelativePercent(mean)}</td>`;
     })}
           <td colspan=${selectionSharedFieldIndices.length} class="missing">
           </td>
@@ -258,6 +276,12 @@ export class MatchesTableUi extends LitElement {
       font-family: monospace;
       font-size: 10px;
     }
+    .numberCell {
+      text-align: right;
+    }
+    .encodingSettingCell {
+      text-align: center;
+    }
 
     tr {
       background: var(--mdc-theme-background);