Codec-Compare version 0.2.4 (#14)

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.2.4
+
+- Add the megapixels field.
+- Fix Help text.
+- Add axis scale mode in Settings.
+
 ## v0.2.3
 
 - No longer limit JPEG XL input quality range to [75:99] by default (introduced

package.json

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

readme_preview.png

@@ -14,7 +14,7 @@
 
 import {Batch} from './entry';
 import {dispatch, EventType, listen} from './events';
-import {enableDefaultFilters, FieldFilter, getFilteredRowIndices} from './filter';
+import {FieldFilter, getFilteredRowIndices} from './filter';
 import {MatchedDataPoints} from './matcher';
 import {FieldMetricStats, SourceCount} from './metric';
 
@@ -55,8 +55,6 @@ export class BatchSelection {
       this.fieldFilters.push(fieldFilter);
     }
 
-    enableDefaultFilters(this.batch, this.fieldFilters);
-
     listen(EventType.FILTER_CHANGED, (event) => {
       if (event.detail.batchIndex !== this.batch.index) return;
       this.updateFilteredRows();

src/batch_selection.ts

@@ -42,14 +42,9 @@ import {LoadingUi} from './loading_ui';
 import {PlotUi} from './plot_ui';
 import {SettingsUi} from './settings_ui';
 import {State} from './state';
+import {Tab} from './tab';
 import {UrlState} from './url_state';
 
-enum Tab {
-  SUMMARY = 0,  // A simple sentence to describe the plot.
-  STATS = 1,    // Advanced interface with tunable comparison parameters.
-  GALLERY = 2,  // Source data set grid.
-}
-
 /** Main component of the codec comparison static viewer. */
 @customElement('codec-compare')
 export class CodecCompare extends LitElement {
@@ -179,8 +174,7 @@ export class CodecCompare extends LitElement {
 
           <settings-ui .state=${this.state}></settings-ui>
 
-          <mwc-button-fit id="helpButton"
-            ?disabled=${this.currentTab === Tab.GALLERY} @click=${() => {
+          <mwc-button-fit id="helpButton" @click=${() => {
       this.helpUi.onOpen();
     }}>
             <mwc-icon>help</mwc-icon> Help
@@ -207,7 +201,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare beta version 0.2.3<br>
+            Codec Compare beta version 0.2.4<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>
@@ -219,7 +213,7 @@ export class CodecCompare extends LitElement {
       <batch-selection-ui .state=${this.state}></batch-selection-ui>
       <matches-ui .state=${this.state}></matches-ui>
       <match-ui .state=${this.state}></match-ui>
-      <help-ui .displaySentence=${this.currentTab === Tab.SUMMARY}></help-ui>
+      <help-ui .displayedTab=${this.currentTab}></help-ui>
       ${this.isLoaded ? html`` : html`<loading-ui></loading-ui>`}
     `;
   }

src/codec_compare.ts

@@ -52,6 +52,7 @@ export enum FieldId {
   P3NORM,                  // Difference between original and decoded images.
   ENCODED_SIZE,            // In bytes.
   ENCODED_BITS_PER_PIXEL,  // Should be ENCODED_SIZE / (WIDTH * HEIGHT).
+  MEGAPIXELS,              // Should be (WIDTH * HEIGHT) / 1,000,000.
   ENCODING_DURATION,       // In seconds.
   DECODING_DURATION,       // In seconds.
   RAW_DECODING_DURATION,   // Should be DECODING_DURATION exclusive of the color
@@ -110,6 +111,7 @@ const NAME_TO_FIELD_ID = new Map<string, FieldId>([
   ['p3-norm', FieldId.P3NORM],
   ['encoded size', FieldId.ENCODED_SIZE],
   ['bpp', FieldId.ENCODED_BITS_PER_PIXEL],
+  ['megapixels', FieldId.MEGAPIXELS],
   ['encoding time', FieldId.ENCODING_DURATION],
   ['decoding time', FieldId.DECODING_DURATION],
   ['raw decoding time', FieldId.RAW_DECODING_DURATION],

src/entry.ts

@@ -237,6 +237,31 @@ function jsonToBatch(
       processField(field, fieldIndex);
     }
   }
+
+  // Compute megapixels if possible.
+  const megapixelsField =
+      batch.fields.find(field => field.id === FieldId.MEGAPIXELS);
+  if (megapixelsField === undefined) {
+    const widthFieldIndex =
+        batch.fields.findIndex(field => field.id === FieldId.WIDTH);
+    const heightFieldIndex =
+        batch.fields.findIndex(field => field.id === FieldId.HEIGHT);
+    if (widthFieldIndex !== -1 && heightFieldIndex !== -1 &&
+        batch.fields[widthFieldIndex].isInteger &&
+        batch.fields[heightFieldIndex].isInteger) {
+      const fieldIndex = batch.fields.length;
+      const field = new Field('megapixels', 'millions of pixels');
+      batch.fields.push(field);
+      uniqueValuesSets.push(new Set<string>());
+      for (const row of batch.rows) {
+        const megapixels = (row[widthFieldIndex] as number) *
+            (row[heightFieldIndex] as number) / 1000000;
+        row.push(megapixels);
+        field.addValue(String(megapixels), uniqueValuesSets[fieldIndex]);
+      }
+      processField(field, fieldIndex);
+    }
+  }
   return batch;
 }
 

src/entry_loader.ts

@@ -68,12 +68,19 @@ describe('loadBatchJson', () => {
     expect(response.ok).toBeTrue();
     if (!response.ok) return;
 
+    const batch = await loadBatchJson(response.url);
+    const widthFieldIndex =
+        batch.fields.findIndex((field) => field.id === FieldId.WIDTH);
+    const heightFieldIndex =
+        batch.fields.findIndex((field) => field.id === FieldId.HEIGHT);
+    expect(widthFieldIndex).not.toBe(-1);
+    expect(heightFieldIndex).not.toBe(-1);
+
     // No bits-per-pixel data in the input file.
     const text = await response.text();
     expect(text).not.toContain('bpp');
 
-    // The bits-per-pixel field still exists because it was computed.
-    const batch = await loadBatchJson(response.url);
+    // The bits-per-pixel field exists anyway because it was computed.
     const bppFieldIndex = batch.fields.findIndex(
         (field) => field.id === FieldId.ENCODED_BITS_PER_PIXEL);
     expect(bppFieldIndex).not.toBe(-1);
@@ -90,13 +97,7 @@ describe('loadBatchJson', () => {
       // Make sure the computation is correct.
       const encodedSizeFieldIndex =
           batch.fields.findIndex((field) => field.id === FieldId.ENCODED_SIZE);
-      const widthFieldIndex =
-          batch.fields.findIndex((field) => field.id === FieldId.WIDTH);
-      const heightFieldIndex =
-          batch.fields.findIndex((field) => field.id === FieldId.HEIGHT);
       expect(encodedSizeFieldIndex).not.toBe(-1);
-      expect(widthFieldIndex).not.toBe(-1);
-      expect(heightFieldIndex).not.toBe(-1);
       if (encodedSizeFieldIndex !== -1 && widthFieldIndex !== -1 &&
           heightFieldIndex !== -1) {
         for (const row of batch.rows) {
@@ -109,6 +110,21 @@ describe('loadBatchJson', () => {
         }
       }
     }
+
+    // Same for megapixels.
+    expect(text).not.toContain('megapixels');
+    const megapixelsFieldIndex =
+        batch.fields.findIndex((field) => field.id === FieldId.MEGAPIXELS);
+    expect(megapixelsFieldIndex).not.toBe(-1);
+    expect(megapixelsFieldIndex).toBeLessThan(batch.rows[0].length);
+    if (megapixelsFieldIndex !== -1 &&
+        megapixelsFieldIndex < batch.rows[0].length) {
+      // Make sure the computation is correct.
+      expect(batch.rows[0][megapixelsFieldIndex] as number)
+          .toBe(
+              (batch.rows[0][widthFieldIndex] as number) *
+              (batch.rows[0][heightFieldIndex] as number) / 1000000);
+    }
   });
 
   it('loads a JSON file where bpp cannot be computed', async () => {

src/entry_loader_test.ts

@@ -18,6 +18,8 @@ import '@material/mwc-icon';
 import {css, html, LitElement} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
 
+import {Tab} from './tab';
+
 /** Returns the element at domPath or null. */
 function getShadowElement(domPath: string[]): Element|null {
   let element: Element|null|undefined = null;
@@ -32,13 +34,12 @@ function getShadowElement(domPath: string[]): Element|null {
 /** Overlay element describing the other elements behind it. */
 @customElement('help-ui')
 export class HelpUi extends LitElement {
-  @property() displaySentence!: boolean;
+  @property() displayedTab!: Tab;
 
   // Always returned by render() so cannot be null.
   @query('#closeButton') private readonly closeButton!: HTMLElement;
 
   // Containers of descriptive text blocks.
-  // Always returned by render() so cannot be null.
   @query('#numComparisonsDescription')
   private readonly numComparisonsDescription!: HTMLElement;
   @query('#matchersDescription')
@@ -48,6 +49,8 @@ export class HelpUi extends LitElement {
   @query('#batchSelectionsDescription')
   private readonly batchSelectionsDescription!: HTMLElement;
   @query('#graphDescription') private readonly graphDescription!: HTMLElement;
+  @query('#galleryDescription')
+  private readonly galleryDescription!: HTMLElement;
 
   onOpen() {
     // Position the closing button on top of the home page's help button
@@ -74,14 +77,14 @@ export class HelpUi extends LitElement {
     // The main interactive user interface elements are on the fixed left menu.
     // Position the "tooltips" on the right of them to keep them visible.
     // The "tooltips" cover parts of the graph but this works visually.
-    if (this.displaySentence) {
+    if (this.displayedTab === Tab.SUMMARY) {
       positionElementAtTheRightOf(
           this.matchersDescription,
           ['codec-compare', 'sentence-ui', '#matchers']);
       positionElementAtTheRightOf(
           this.batchSelectionsDescription,
           ['codec-compare', 'sentence-ui', '#batches']);
-    } else {
+    } else if (this.displayedTab === Tab.STATS) {
       positionElementAtTheRightOf(
           this.numComparisonsDescription, ['codec-compare', '#numComparisons']);
       positionElementAtTheRightOf(
@@ -91,6 +94,10 @@ export class HelpUi extends LitElement {
       positionElementAtTheRightOf(
           this.batchSelectionsDescription,
           ['codec-compare', 'batch-selections-ui']);
+    } else if (this.displayedTab === Tab.GALLERY) {
+      positionElementAtTheRightOf(
+          this.galleryDescription,
+          ['codec-compare', 'gallery-ui', '#sourceDataSet']);
     }
 
     // This is not the description of the #referenceBatch <p> but it is used as
@@ -109,7 +116,7 @@ export class HelpUi extends LitElement {
     this.requestUpdate();
   }
 
-  private renderSentenceHelp() {
+  private renderSummaryHelp() {
     return html`
       <div class="descriptionHolder" id="numComparisonsDescription">
       </div>
@@ -130,12 +137,13 @@ export class HelpUi extends LitElement {
         <div class="bracket"></div>
         <p>
         Batches are aggregated by codec.<br>
-        The advanced interface can be enabled in the settings (left bar).
+        See the ADVANCED tab for more information and to change the comparison
+        reference, criteria and shown metrics.
         </p>
       </div>`;
   }
 
-  private renderTuneableComparisonHelp() {
+  private renderAdvancedHelp() {
     return html`
       <div class="descriptionHolder" id="numComparisonsDescription">
         <div class="bracket"></div>
@@ -152,10 +160,11 @@ export class HelpUi extends LitElement {
       <div class="descriptionHolder" id="matchersDescription">
         <div class="bracket"></div>
         <p>
-        Pairs are selected so that these constraints are respected. Objective
-        visual distortion metrics such as PSNR and SSIM can be used as matchers
-        to compare formats and codecs on other metrics such as compression rate
-        and encoding duration.<br>
+        Pairs are selected so that these constraints are respected. When
+        comparing lossy compression methods, objective visual distortion metrics
+        such as PSNR and SSIM can be used as matchers to compare formats and
+        codecs on other metrics such as compression rate and encoding duration.
+        <br>
         Numerical fields can be matched with a relative tolerance. If so, pairs
         are selected to minimize the difference of the values of these fields.
         </p>
@@ -175,7 +184,12 @@ export class HelpUi extends LitElement {
         different codecs, or the same codec with different settings. Each batch
         has an associated color.<br>
         Click the info button to see batch metadata and data points. Some data
-        points may be filtered out.<br>
+        points may be filtered out. When comparing lossy compression methods, it
+        is recommended to filter based on
+        <a href="https://github.com/webmproject/codec-compare/wiki/Bits-per-pixel-of-Internet-images"
+          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>
         The statistics relative to the reference batch for the fields selected
@@ -185,6 +199,20 @@ export class HelpUi extends LitElement {
       </div>`;
   }
 
+  private renderDatasetHelp() {
+    return html`
+      <div class="descriptionHolder" id="galleryDescription">
+        <div class="bracket"></div>
+        <p>
+        These media assets were compressed and decompressed with the codecs
+        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.
+        </p>
+      </div>`;
+  }
+
   override render() {
     const onClose = () => {
       this.style.display = 'none';
@@ -196,17 +224,18 @@ export class HelpUi extends LitElement {
       </div>
 
       ${
-        this.displaySentence ? this.renderSentenceHelp() :
-                               this.renderTuneableComparisonHelp()}
+        this.displayedTab === Tab.SUMMARY   ? this.renderSummaryHelp() :
+            this.displayedTab === Tab.STATS ? this.renderAdvancedHelp() :
+                                              this.renderDatasetHelp()}
 
       <div class="descriptionHolder" id="graphDescription">
         <p>
         The codecs are plotted on this graph as large disks, with the metric
         fields as axes. If any, batches sharing the same codec are linked with
         straight lines, usually to represent multiple encoding efforts.<br>
-        If enabled in the Settings page, each matched pair is displayed as a
-        tiny dot. Click on any to display the details of the reference batch and
-        of the compared batch.<br>
+        If enabled in the Settings, each matched pair is displayed as a tiny
+        dot. Click on any to display the details of the reference batch and of
+        the compared batch.<br>
         <br>
         For an introduction to image file formats, please see this
         <a href="https://en.wikipedia.org/wiki/Image_file_format"

src/help_ui.ts

@@ -101,6 +101,7 @@ export function createMatchers(batches: Batch[]): FieldMatcher[] {
     // Same source image, so these will always match. Remove them from the UI.
     if (field.id === FieldId.WIDTH || field.id === FieldId.HEIGHT) continue;
     if (field.id === FieldId.FRAME_COUNT) continue;
+    if (field.id === FieldId.MEGAPIXELS) continue;
     // If bpp values are available, encoded sizes probably are too.
     // Skip the former which brings nothing as a matcher over the latter.
     if (field.id === FieldId.ENCODED_BITS_PER_PIXEL) continue;
@@ -241,6 +242,7 @@ export function isLossless(firstBatch: Batch, matchers: FieldMatcher[]) {
       return false;
     }
   }
+  // Assume other batches to be lossless too.
   return true;
 }