Codec-Compare version 0.2.5 (#15)

Author: y-guyon

.gitignore

@@ -1,2 +1,3 @@
+dist
 node_modules
 package-lock.json

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v0.2.5
+
+- Add support for cross-batch individual source asset filtering.
+- Add support for cross-batch batch source asset filtering by tag.
+- Add button to set the batch as the reference batch in the batch info panel.
+- Add link to view only two batches in the batch info panel.
+
 ## v0.2.4
 
 - Add the megapixels field.

assets/demo_batch_some_codec_exp.json

@@ -4,7 +4,8 @@
     { "codec": "Name of the codec used to generate this data" },
     { "version": "Version of the codec used to generate this data" },
     { "time": "Timestamp of when this data was generated" },
-    { "source data set": "The origin of the images used as input" },
+    { "source_data_set": "The origin of the images used as input" },
+    { "source_tags": "Input image tags" },
     { "original_path": "The path to the original image" },
     { "preview": "The path to the original image preview" },
     { "encoded_path": "The path to the encoded image" },
@@ -17,6 +18,7 @@
     "experiment",
     "2023-05-22T13:02:15.137053618Z",
     "https://testimages.org/sampling/",
+    "fruits=d040000018&with text=0d88068002",
     "/rainbow.png",
     "assets/rainbow_q0.webp",
     "/rainbow_q50.webp",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codec_compare",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@material/mwc-button": "^0.27.0",
+    "@material/mwc-checkbox": "^0.27.0",
     "@material/mwc-fab": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",

src/batch_merger.ts

@@ -214,6 +214,11 @@ export function mergeHistograms(histograms: SourceCount[][]): SourceCount[] {
     }
   }
 
-  // Sort by decreasing occurrences.
-  return Array.from(aggHisto.values()).sort((a, b) => b.count - a.count);
+  // Sort by name to have a deterministic order that is independent of the
+  // histogram values which can change depending on the comparison parameters.
+  return Array.from(aggHisto.values())
+      .sort(
+          (a, b) => a.sourceName > b.sourceName ? 1 :
+              b.sourceName > a.sourceName       ? -1 :
+                                                  0);
 }

src/batch_selection.ts

@@ -12,9 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {CommonField} from './common_field';
 import {Batch} from './entry';
-import {dispatch, EventType, listen} from './events';
-import {FieldFilter, getFilteredRowIndices} from './filter';
+import {FieldFilter} from './filter';
+import {getFilteredRowIndices} from './filter_row';
 import {MatchedDataPoints} from './matcher';
 import {FieldMetricStats, SourceCount} from './metric';
 
@@ -54,19 +55,11 @@ export class BatchSelection {
       }
       this.fieldFilters.push(fieldFilter);
     }
-
-    listen(EventType.FILTER_CHANGED, (event) => {
-      if (event.detail.batchIndex !== this.batch.index) return;
-      this.updateFilteredRows();
-      dispatch(
-          EventType.FILTERED_DATA_CHANGED,
-          {batchIndex: event.detail.batchIndex});
-    });
   }
 
   /** Updates the filteredRowIndices based on the batch and the fieldFilters. */
-  updateFilteredRows() {
+  updateFilteredRows(commonFields: CommonField[]) {
     this.filteredRowIndices =
-        getFilteredRowIndices(this.batch, this.fieldFilters);
+        getFilteredRowIndices(this.batch, this.fieldFilters, commonFields);
   }
 }

src/batch_selection_actions_ui.ts

@@ -41,6 +41,7 @@ export class BatchSelectionActionsUi extends LitElement {
 
     return html`
       <mwc-icon-button
+          class="batchInfo"
           icon="info"
           title="Show details"
           @click=${() => {

src/batch_selection_test.ts

@@ -37,7 +37,7 @@ describe('BatchSelection', () => {
     expect(batch.fields[1].isNumber).toBeTrue();
 
     selection = new BatchSelection(batch);
-    selection.updateFilteredRows();
+    selection.updateFilteredRows([]);
   });
 
   it('filters rows', () => {
@@ -55,28 +55,13 @@ describe('BatchSelection', () => {
     // Filter out one image.
     selection.fieldFilters[0].enabled = true;
     selection.fieldFilters[0].uniqueValues.delete('path/to/image');
-    dispatch(EventType.FILTER_CHANGED, {batchIndex: batch.index});
+    selection.updateFilteredRows([]);
     expect(selection.filteredRowIndices).toEqual([1, 2]);
 
     // Reduce the range of numeric values.
     selection.fieldFilters[1].enabled = true;
     selection.fieldFilters[1].rangeEnd = 4.6;
-    dispatch(EventType.FILTER_CHANGED, {batchIndex: batch.index});
+    selection.updateFilteredRows([]);
     expect(selection.filteredRowIndices).toEqual([2]);
   });
-
-  it('dispatches an event back', () => {
-    batch.index = 42;
-
-    let eventBatchIndex: number|undefined = undefined;
-    window.addEventListener(EventType.FILTERED_DATA_CHANGED, (event) => {
-      eventBatchIndex = event.detail.batchIndex;
-    }, {once: true});
-    expect(eventBatchIndex).toBeUndefined();
-    dispatch(EventType.FILTER_CHANGED, {batchIndex: batch.index});
-    expect(eventBatchIndex).not.toBeUndefined();
-    if (eventBatchIndex !== undefined) {
-      expect(eventBatchIndex).toBe(batch.index);
-    }
-  });
 });

src/batch_ui.ts

@@ -50,16 +50,28 @@ export class BatchUi extends LitElement {
       this.requestUpdate();
     };
 
+    const refIndex = this.state.referenceBatchSelectionIndex;
     const batchIndex = this.batch.index;
     const onFilteredDataInfoRequest = () => {
       dispatch(EventType.FILTERED_DATA_INFO_REQUEST, {batchIndex});
       onClose();
     };
+    const onSetAsReference = () => {
+      this.state.referenceBatchSelectionIndex = batchIndex;
+      dispatch(EventType.REFERENCE_CHANGED);
+      this.requestUpdate();
+    };
     const onMatchesInfoRequest = () => {
       dispatch(EventType.MATCHES_INFO_REQUEST, {batchIndex});
       onClose();
     };
 
+    // Keep the batches in the same order.
+    const minIndex = Math.min(refIndex, batchIndex);
+    const maxIndex = Math.max(refIndex, batchIndex);
+    const twoBatchLink = `?batch=${this.state.batches[minIndex].url}&batch=${
+        this.state.batches[maxIndex].url}${window.location.hash}`;
+
     return html`
       <div id="background" @click=${onClose}></div>
       <div id="dialog">
@@ -83,6 +95,7 @@ export class BatchUi extends LitElement {
           </mwc-button>
 
           <mwc-button
+            id="showRows"
             raised
             icon="clear_all"
             label="Show rows"
@@ -91,7 +104,32 @@ export class BatchUi extends LitElement {
           </mwc-button>
 
           ${
-        batchIndex === this.state.referenceBatchSelectionIndex ?
+        batchIndex === refIndex ?
+            // disabled mwc-button title does not appear. Use a div.
+            html`
+          <div title="This batch is already the reference batch"
+            class="left-margin">
+            <mwc-button
+              raised
+              icon="center_focus_strong"
+              label="Set as reference"
+              disabled>
+            </mwc-button>
+          </div>
+        ` :
+            html`
+          <mwc-button
+            raised
+            icon="center_focus_weak"
+            label="Set as reference"
+            title="Use this batch as reference to compare other codecs with"
+            @click=${onSetAsReference}
+            class="left-margin">
+          </mwc-button>
+        `}
+
+          ${
+        batchIndex === refIndex ?
             // disabled mwc-button title does not appear. Use a div.
             html`
           <div title="The reference batch cannot be matched with itself">
@@ -105,13 +143,42 @@ export class BatchUi extends LitElement {
         ` :
             html`
           <mwc-button
+            id="showMatches"
             raised
             icon="join_inner"
             label="Show matches"
             title="Display the matches between this batch and the reference batch"
             @click=${onMatchesInfoRequest}>
           </mwc-button>
         `}
+
+          ${
+        this.state.batches.length < 3 ?
+            html`` :
+            batchIndex === refIndex ?
+            // disabled mwc-button title does not appear. Use a div.
+            html`
+          <div title="Only available with another batch as reference">
+            <mwc-button
+              raised
+              icon="filter_2"
+              label="Two-batch view"
+              disabled>
+              <mwc-icon>open_in_new</mwc-icon>
+            </mwc-button>
+          </div>
+        ` :
+            html`
+          <a href="${twoBatchLink}" target="_blank">
+            <mwc-button
+              raised
+              icon="filter_2"
+              label="Two-batch view"
+              title="Compare only this batch and the reference batch">
+              <mwc-icon>open_in_new</mwc-icon>
+            </mwc-button>
+          </a>
+        `}
         </div>
 
         <mwc-fab id="closeButton" icon="close" title="Close" @click=${onClose}>
@@ -172,6 +239,16 @@ export class BatchUi extends LitElement {
       display: flex;
       flex-direction: row;
       justify-content: space-evenly;
+      gap: 20px;
+    }
+
+    .left-margin {
+      margin-left: auto;
+    }
+
+    mwc-icon {
+      margin-left: 8px;
+      font-size: 16px;
     }
   `;
 }

src/codec_compare.ts

@@ -34,6 +34,7 @@ import './help_ui';
 import {css, html, LitElement} from 'lit';
 import {customElement, query} from 'lit/decorators.js';
 
+import {sourceTagsFromBatchesAndCommonFields} from './common_field';
 import {Batch} from './entry';
 import {loadBatchJson, loadJsonContainingBatchJsonPaths} from './entry_loader';
 import {dispatch, EventType, listen} from './events';
@@ -44,13 +45,17 @@ import {SettingsUi} from './settings_ui';
 import {State} from './state';
 import {Tab} from './tab';
 import {UrlState} from './url_state';
+import {reverseMap} from './utils';
 
 /** Main component of the codec comparison static viewer. */
 @customElement('codec-compare')
 export class CodecCompare extends LitElement {
   /** The root data object containing the full state. */
   private readonly state = new State();
   private readonly urlState = new UrlState();
+  /** Maps asset tags to the set of source asset names that have them. */
+  private tagToAssetNames = new Map<string, Set<string>>();
+  private assetNameToTags = new Map<string, Set<string>>();
   /** True if all batches are loaded into the state. */
   private isLoaded = false;
   /** True if at least one batch failed to load. */
@@ -74,18 +79,20 @@ export class CodecCompare extends LitElement {
   }
 
   private renderSentence() {
-    // #sentenceContainer is an overlay of the whole #comparisons block.
     return html`
       <div id="sentenceContainer">
         <sentence-ui .state=${this.state}></sentence-ui>
       </div>`;
   }
 
   private renderGallery() {
-    // #galleryContainer is an overlay of the whole #comparisons block.
     return html`
       <div id="galleryContainer">
-        <gallery-ui .state=${this.state}></gallery-ui>
+        <gallery-ui
+          .state=${this.state}
+          .tagToAssetNames=${this.tagToAssetNames}
+          .assetNameToTags=${this.assetNameToTags}>
+        </gallery-ui>
       </div>`;
   }
 
@@ -201,7 +208,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare beta version 0.2.4<br>
+            Codec Compare beta version 0.2.5<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>
@@ -241,6 +248,9 @@ export class CodecCompare extends LitElement {
 
   private async onAllBatchesLoaded() {
     this.state.initialize();
+    this.tagToAssetNames = sourceTagsFromBatchesAndCommonFields(
+        this.state.batches, this.state.commonFields);
+    this.assetNameToTags = reverseMap(this.tagToAssetNames);
     this.urlState.setDefaultValues(this.state);
     this.state.initializePostUrlStateDefaultValues();
     this.urlState.load(this.state);