Fix preview image discrepancy in RD-mode (#40)

Instead of passing around the selected batch as the reference batch
when in absolute or RD-mode, leave the reference batch undefined to
avoid wrongly referencing into the selected batch with rightIndex.

When there is a reference:
  leftIndex points to selected row (correct)
  rightIndex points to reference row (correct)

Otherwise, before this change:
  leftIndex pointed to selected row (correct)
  rightIndex pointed to selected row (which is wrongly indexed)
Otherwise, after this change:
  leftIndex points to selected row (correct)
  rightIndex cannot point to undefined (caught by typescript)

The data shown in the table was correct. Only some cell coloring and
the preview image were sometimes stale.

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.6.5
+
+- Fix the MatchImageUi component displaying the wrong image when there is no
+  reference batch.
+- Support two-way on top of three-way image comparisons in the visualizer.
+
 ## v0.6.4
 
 - Fix the MatchImageUi component displaying the wrong image when filtering out

package.json

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

src/codec_compare.ts

@@ -252,7 +252,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare version 0.6.4<br>
+            Codec Compare version 0.6.5<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>

src/match_image_ui.ts

@@ -23,57 +23,60 @@ import {customElement, property} from 'lit/decorators.js';
 import {BatchSelection} from './batch_selection';
 import {getFinalValue} from './constant';
 import {FieldId} from './entry';
-import {State} from './state';
 
 /** Component displaying the source image of one selected Match. */
 @customElement('match-image-ui')
 export class MatchImageUi extends LitElement {
-  @property({attribute: false}) referenceSelection!: BatchSelection;
+  @property({attribute: false}) referenceSelection!: BatchSelection|undefined;
   /** The selected batch and the index of the Match. */
   @property({attribute: false}) batchSelection!: BatchSelection;
-  @property({attribute: false}) matchIndex!: number;
+  @property({attribute: false}) matchIndex!: number|undefined;
 
   override render() {
-    if (!this.referenceSelection) return html``;
-    if (!this.batchSelection) return html``;
-    const reference = this.referenceSelection.batch;
+    if (this.batchSelection === undefined) return html``;
+    if (this.matchIndex === undefined) return html``;
     const match = this.batchSelection.matchedDataPoints.rows[this.matchIndex];
+    const leftBatch = this.batchSelection.batch;
+    const leftIndex = match.leftIndex;
+    let rightBatch;
+    let rightIndex;
+    if (this.referenceSelection !== undefined) {
+      rightBatch = this.referenceSelection.batch;
+      rightIndex = match.rightIndex;
+    } else {
+      rightBatch = leftBatch;
+      rightIndex = leftIndex;
+    }
 
     const sourceImagePath = getFinalValue(
-        reference, reference.rows[match.rightIndex], FieldId.SOURCE_IMAGE_PATH);
+        rightBatch, rightBatch.rows[rightIndex], FieldId.SOURCE_IMAGE_PATH);
     if (sourceImagePath === undefined) return html``;
 
-    let referenceImagePath = getFinalValue(
-        reference, reference.rows[match.rightIndex],
-        FieldId.DECODED_IMAGE_PATH);
-    if (referenceImagePath === undefined) {
-      referenceImagePath = getFinalValue(
-          reference, reference.rows[match.rightIndex],
-          FieldId.ENCODED_IMAGE_PATH);
+    let rightImagePath = getFinalValue(
+        rightBatch, rightBatch.rows[rightIndex], FieldId.DECODED_IMAGE_PATH);
+    if (rightImagePath === undefined) {
+      rightImagePath = getFinalValue(
+          rightBatch, rightBatch.rows[rightIndex], FieldId.ENCODED_IMAGE_PATH);
     }
 
-    let selectionImagePath = getFinalValue(
-        this.batchSelection.batch,
-        this.batchSelection.batch.rows[match.leftIndex],
-        FieldId.DECODED_IMAGE_PATH);
-    if (selectionImagePath === undefined) {
-      selectionImagePath = getFinalValue(
-          this.batchSelection.batch,
-          this.batchSelection.batch.rows[match.leftIndex],
+    let leftImagePath = getFinalValue(
+        leftBatch, leftBatch.rows[match.leftIndex], FieldId.DECODED_IMAGE_PATH);
+    if (leftImagePath === undefined) {
+      leftImagePath = getFinalValue(
+          leftBatch, leftBatch.rows[match.leftIndex],
           FieldId.ENCODED_IMAGE_PATH);
     }
 
     let link;
-    const compare =
-        referenceImagePath !== undefined && selectionImagePath !== undefined;
+    const compare = rightImagePath !== undefined && leftImagePath !== undefined;
     if (compare) {
       const params = new URLSearchParams();
       params.set('bimg', String(sourceImagePath));
       params.set('btxt', 'original');
-      params.set('rimg', String(referenceImagePath));
-      params.set('rtxt', reference.name);
-      params.set('limg', String(selectionImagePath));
-      params.set('ltxt', this.batchSelection.batch.name);
+      params.set('rimg', String(rightImagePath));
+      params.set('rtxt', rightBatch.name);
+      params.set('limg', String(leftImagePath));
+      params.set('ltxt', leftBatch.name);
       link = `visualizer.html?${params.toString()}`;
     } else {
       link = String(sourceImagePath);