Fix sometimes wrong preview (#39)

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v0.6.4
+
+- Fix the MatchImageUi component displaying the wrong image when filtering out
+  the first match, then clicking on the first new match.
+
 ## v0.6.3
 
 - Fix the alignment in the first paragraph of the Advanced tab.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "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.3<br>
+            Codec Compare version 0.6.4<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>

src/matches_ui.ts

@@ -19,11 +19,11 @@ import './match_image_ui';
 import './matches_table_ui';
 
 import {css, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import {customElement, property, query} from 'lit/decorators.js';
 
 import {BatchSelection} from './batch_selection';
-import {Batch, FieldId} from './entry';
 import {EventType, listen} from './events';
+import {MatchImageUi} from './match_image_ui';
 import {State} from './state';
 import {getRdModeHash} from './state_hash';
 
@@ -38,9 +38,15 @@ export class MatchesUi extends LitElement {
   @property({attribute: false}) batchSelection!: BatchSelection;
   @property({attribute: false}) matchIndex!: number|undefined;
 
+  @query('match-image-ui') private readonly matchImageUi!: MatchImageUi;
+
   override connectedCallback() {
     super.connectedCallback();
     listen(EventType.MATCHED_DATA_POINTS_CHANGED, () => {
+      // batchSelection and matchIndex may stay the same, while the underlying
+      // data points changed, so this.matchImageUi could display the wrong
+      // image. Explicitly update it in this case.
+      this.matchImageUi.requestUpdate();
       this.requestUpdate();
     });
   }