codec_compare.ts

// Copyright 2022 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import '@material/web/button/filled-button';
import '@material/web/button/text-button';
import '@material/web/icon/icon';
import '@material/web/menu/menu';
import '@material/web/tabs/tabs';
import '@material/web/tabs/primary-tab';
import './batch_name_ui';
import './batch_selections_ui';
import './help_ui';
import './gallery_ui';
import './loading_ui';
import './matchers_ui';
import './metrics_ui';
import './panel_ui';
import './sentence_ui';
import './settings_ui';

import {MdMenu} from '@material/web/menu/menu';
import {MdTabs} from '@material/web/tabs/tabs';
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';
import {HelpUi} from './help_ui';
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';
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. */
  private failure = false;
  /** Set once the top-level JSON has been parsed. */
  private numExpectedBatches = 0;
  /** Currently displayed component. */
  private currentTab = Tab.SUMMARY;
  /** The object rendering the state into a plot. */
  private readonly plotUi = new PlotUi(this.state);

  @query('settings-ui') private readonly settingsUi!: SettingsUi;
  @query('help-ui') private readonly helpUi!: HelpUi;
  @query('loading-ui') private readonly loadingUi!: LoadingUi;

  @query('#referenceMenu') private readonly referenceMenu!: MdMenu;

  private renderReference(referenceBatch: Batch) {
    // Use a span to avoid breaking the line between the button and the comma.
    return html`
      <span style="text-wrap-mode: nowrap;" id="menuAnchor">
        <md-filled-button trailing-icon
            title="Change the reference batch to compare other codecs with"
            id="referenceButton" @click=${() => {
      this.referenceMenu.show();
    }}>
          <batch-name-ui .batch=${referenceBatch}></batch-name-ui>
          <md-icon slot="icon">arrow_drop_down</md-icon>
        </md-filled-button>,
      </span>
      <md-menu
        anchor="menuAnchor"
        anchor-corner="end-start"
        menu-corner="start-start"
        id="referenceMenu">
        ${
        this.state.batches.map(
            (batch) => html`
        <md-menu-item ?selected=${batch.index === referenceBatch.index}
            @click=${() => {
              this.state.referenceBatchSelectionIndex = batch.index;
              dispatch(EventType.REFERENCE_CHANGED);
            }}>
          <batch-name-ui .batch=${batch}></batch-name-ui>
          ${
                batch.index === referenceBatch.index ?
                    html`<span class="referenceBatchChip">reference</span>` :
                    html``}
        </md-menu-item>`)}
      </md-menu>`;
  }

  private renderSentence() {
    return html`
      <div id="sentenceContainer">
        <sentence-ui .state=${this.state}></sentence-ui>
      </div>`;
  }

  private renderGallery() {
    return html`
      <div id="galleryContainer">
        <gallery-ui
          .state=${this.state}
          .tagToAssetNames=${this.tagToAssetNames}
          .assetNameToTags=${this.assetNameToTags}>
        </gallery-ui>
      </div>`;
  }

  private renderTruncatedResults() {
    return html`
      <div id="truncatedResults">
        <md-icon>warning</md-icon>
        <p>
        The results are partial because there are too many possible comparisons.
        Consider filtering input rows out.
        </p>
      </div>`;
  }

  override render() {
    let minNumComparisons = -1;
    let maxNumComparisons = -1;
    let truncatedResults = false;
    let hasHistograms = false;
    for (const [index, batchSelection] of this.state.batchSelections
             .entries()) {
      if (index !== this.state.referenceBatchSelectionIndex) {
        const numComparisons = batchSelection.matchedDataPoints.rows.length;
        minNumComparisons = minNumComparisons === -1 ?
            numComparisons :
            Math.min(minNumComparisons, numComparisons);
        maxNumComparisons = maxNumComparisons === -1 ?
            numComparisons :
            Math.max(maxNumComparisons, numComparisons);
        truncatedResults ||= batchSelection.matchedDataPoints.limited;
      }
      hasHistograms ||= batchSelection.histogram.length > 0;
    }
    const numComparisonsStr = minNumComparisons === maxNumComparisons ?
        `${Math.max(0, maxNumComparisons)}` :
        `${minNumComparisons} to ${maxNumComparisons}`;

    let referenceBatch: Batch|undefined = undefined;
    if (this.state.referenceBatchSelectionIndex >= 0 &&
        this.state.referenceBatchSelectionIndex <
            this.state.batchSelections.length) {
      referenceBatch =
          this.state.batchSelections[this.state.referenceBatchSelectionIndex]
              .batch;
    }

    const activeIndex: number = this.currentTab;
    const displaySentence = this.currentTab === Tab.SUMMARY;
    const displayGallery = this.currentTab === Tab.GALLERY;
    // The advanced interface is always displayed, hidden by the other
    // components, because drop-down menu anchors are messed up otherwise.

    // The nested divs below seem necessary to have proper scroll bars.
    // Feel free to fix them.

    return html`
      <div id="advancedInterfaceContainerContainer">
        <div id="advancedInterfaceContainer">
          <div id="advancedInterface">
            <div class="scrollFriendlyPadding"></div>
            ${truncatedResults ? this.renderTruncatedResults() : ''}
            <p id="numComparisons" style="position: relative;">${
        this.state.rdMode ?
            html`
              Based on ${numComparisonsStr} data points per batch,` :
            html`
              Based on ${numComparisonsStr} comparisons${
                referenceBatch ?
                    html` with ${this.renderReference(referenceBatch)}` :
                    ','}`}
            </p>
            <matchers-ui .state=${this.state} id="matchers"></matchers-ui>
            <metrics-ui .state=${this.state} id="metrics"></metrics-ui>
            <batch-selections-ui .state=${this.state}></batch-selections-ui>
            <div class="scrollFriendlyPadding"></div>
          </div>
        </div>
      </div>
      ${displaySentence ? this.renderSentence() : ''}
      ${displayGallery ? this.renderGallery() : ''}

      <md-tabs activeIndex=${activeIndex}
        @change=${(event: Event) => {
      if (event.target instanceof MdTabs) {
        this.currentTab = event.target.activeTabIndex;
        this.requestUpdate();
      }
    }}>
        <md-primary-tab id="summaryTab"><md-icon>short_text</md-icon>Summary</md-primary-tab>
        <md-primary-tab id="advancedTab"><md-icon>tune</md-icon>Advanced</md-primary-tab>
        <md-primary-tab id="galleryTab"><md-icon>photo_library</md-icon>Data set</md-primary-tab>
      </md-tabs>

      <div id="leftBar">
        <div id="leftBarContent">
          <md-filled-button @click=${() => {
      navigator.clipboard.writeText(window.location.href);
    }}>
            Copy URL to clipboard
            <md-icon slot="icon">share</md-icon>
          </md-filled-button>

          <md-filled-button disabled>
            Settings
            <md-icon slot="icon">settings</md-icon>
          </md-filled-button>

          <settings-ui .state=${this.state}></settings-ui>

          <md-filled-button id="helpButton" @click=${() => {
      this.helpUi.onOpen();
    }}>
            Help
            <md-icon slot="icon">help</md-icon>
          </md-filled-button>

          <md-filled-button disabled>
            Resources
            <md-icon slot="icon">open_in_new</md-icon>
          </md-filled-button>

          <p id="presets">
            <a target="_blank" href="https://storage.googleapis.com/demos.webmproject.org/webp/cmp/index.html">
              Image format comparison homepage
            </a><br>
            <a target="_blank" href="https://github.com/webmproject/codec-compare/wiki/Bits-per-pixel-of-Internet-images">
              Bits per pixel of Internet images
            </a><br>
            <a target="_blank" href="https://storage.googleapis.com/avif-comparison/index.html">
              Another study of AVIF/WebP/JPG/JXL
            </a><br>
            <!-- Other links can be inserted here. -->
          </p>

          <p id="credits">
            Codec Compare version 0.7.1<br>
            <a href="https://github.com/webmproject/codec-compare">
              Sources on GitHub
            </a>
          </p>
        </div>
      </div>

      <panel-ui .state=${this.state}></panel-ui>
      <help-ui .displayedTab=${this.currentTab} .rdMode=${this.state.rdMode}>
      </help-ui>
      ${this.isLoaded ? html`` : html`<loading-ui></loading-ui>`}
    `;
  }

  private onNumBatchesKnown(numBatches: number) {
    if (this.failure) {
      return;
    }

    this.numExpectedBatches = numBatches;
    this.loadingUi.text = `Loading: Found ${numBatches} batches`;
    this.loadingUi.progress = 0.4;
  }

  private onBatchLoaded(numLoadedBatches: number) {
    if (this.failure) {
      return;
    }

    this.loadingUi.text = `Loading: Downloaded batch ${numLoadedBatches} / ${
        this.numExpectedBatches}`;
    this.loadingUi.progress =
        0.4 + 0.6 * (numLoadedBatches / this.numExpectedBatches);
  }

  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);
    this.state.initializePostUrlStateLoad();
    listen(EventType.MATCHED_DATA_POINTS_CHANGED, () => {
      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);

    await this.plotUi.setupPlot();
    this.loadingUi.style.opacity = '0';

    setTimeout(
        () => {
          this.isLoaded = true;
          this.requestUpdate();
        },
        300  // Shall match "transition: opacity" in LoadingUi css.
    );
  }

  override firstUpdated() {
    this.updateComplete.then(async () => {
      // Load the UI to register all the callbacks first, then fetch the data.
      // updateComplete is used to make sure all override firstUpdated() were
      // called before.
      const url = new URLSearchParams(window.location.search);
      let jsonPaths = url.getAll('batch');
      try {
        if (jsonPaths.length === 0) {
          const pathOfJsonContaingJsonPaths = decodeURIComponent(
              url.get('load') ?? '/default_batches.json');
          jsonPaths = await loadJsonContainingBatchJsonPaths(
              pathOfJsonContaingJsonPaths);
        }
        this.onNumBatchesKnown(jsonPaths.length);
        let numLoadedBatches = 0;
        const promises = jsonPaths.map(async (jsonPath) => {
          const batch = await loadBatchJson(jsonPath);
          this.onBatchLoaded(++numLoadedBatches);
          return batch;
        });
        this.state.batches = await Promise.all(promises);
      } catch (error) {
        this.failure = true;
        this.loadingUi.text = String(error);
        this.loadingUi.progress = 0.5;
        return;
      }

      await this.onAllBatchesLoaded();
    });
  }

  static override styles = css`
    :host {
      margin: 0;
      padding: 0 0;
      overflow: hidden;
    }
    p {
      margin: 0;
      color: var(--md-sys-color-text);
      font-size: 20px;
    }

    md-tabs {
      position: absolute;
      top: 0;
      left: 60px;  /* Width of #leftBar. */
      width: 540px; /* = 600px from index.html - 60px. */
      height: 50px;
    }

    #sentenceContainer, #galleryContainer, #advancedInterfaceContainerContainer {
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
    }
    #sentenceContainer, #galleryContainer {
      width: 506px;  /* = 600px (from index.html) - 20 - 74 (padding below).
                      * width:100% would require host's position:relative
                      * but it messes with the leftBar's overflow. */
    }
    #advancedInterfaceContainerContainer {
      width: 600px;
    }
    #advancedInterfaceContainer {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    #advancedInterface {
      width: 506px;
      min-height: 100%;
    }
    .scrollFriendlyPadding { height: 8px; }
    #sentenceContainer, #galleryContainer, #advancedInterface {
      padding: 0px 20px 0px 74px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    md-tabs, #sentenceContainer, #galleryContainer, #advancedInterfaceContainerContainer {
      background: var(--md-sys-color-surface);
      /* Simulate the shadow of the plot on the right. */
      box-shadow: inset -4px 0 8px 0 rgba(0, 0, 0, 0.2);
    }
    batch-selections-ui {
      overflow-x: auto;
    }
    batch-name-ui:hover {
      cursor: pointer;
    }
    #referenceButton {
      --md-sys-color-primary: var(--md-sys-color-background);
      --md-sys-color-on-primary: var(--md-sys-color-text);
    }
    #referenceButton batch-name-ui {
      color: var(--md-sys-color-text);
      font-size: 16px;
      white-space: nowrap;
      /* text-transform: none; */
    }
    #referenceMenu {
      --md-menu-item-one-line-container-height: 20px;
      --md-menu-item-top-space: 0;
      --md-menu-item-bottom-space: 0;
    }
    .referenceBatchChip {
      background: var(--md-sys-color-primary);
      color: var(--md-sys-color-background);
      border-radius: 16px;
      padding: 2px 8px;
      font-size: 12px;
      margin-left: 8px;
    }
    #truncatedResults {
      background: orange;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      --md-icon-size: 64px;
    }
    #truncatedResults md-icon, #truncatedResults p {
      color: white;
    }

    #leftBar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 60px;
      overflow: hidden;
      box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
      transition: width 0.1s;
    }
    #leftBar:hover,
    #leftBar:has(settings-ui:focus-within) {
      width: 500px;
    }
    #leftBarContent {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 500px;
      background: var(--md-sys-color-primary);
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      /* Otherwise the active tab goes in front of the left bar. */
      z-index: 1;
    }
    #leftBarContent > md-filled-button {
      --md-filled-button-container-height: 50px;
      --md-filled-button-label-text-line-height: 24px;
      --md-filled-button-label-text-size: 24px;
      --md-filled-button-icon-size: 32px;
      --md-filled-button-container-color: var(--md-sys-color-primary);
      --md-filled-button-disabled-container-color: var(--md-sys-color-primary);
      overflow: visible;
      --md-filled-button-container-shape: 0px;
    }

    #presets {
      margin-left: 70px;
      color: var(--md-sys-color-background);
      font-family: Roboto, sans-serif;
      font-size: 16px;
    }
    #presets > a {
      color: var(--md-sys-color-background);
    }

    #credits {
      margin-left: 70px;
      margin-top: auto;
      font-size: 16px;
      color: var(--md-sys-color-background);
    }
    #credits > a {
      color: var(--md-sys-color-background);
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    'codec-compare': CodecCompare;
  }
}