Fix RD-mode and two-batch links (#45)

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.7.3
+
+- Fix RD-curve and two-batch view links.
+
 ## v0.7.2
 
 - Remember the selected tabs, batch, and match as URL parameters.

package.json

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

src/batch_ui.ts

@@ -24,7 +24,7 @@ import {customElement, property} from 'lit/decorators.js';
 import {Batch} from './entry';
 import {EventType, listen} from './events';
 import {State} from './state';
-import {getRdModeHash} from './state_hash';
+import {getRdModeHash, getTwoBatchViewHash} from './state_hash';
 
 /** Component displaying the details of a batch. */
 @customElement('batch-ui')
@@ -46,13 +46,10 @@ export class BatchUi extends LitElement {
     // Keep the batches in the same order.
     const minIndex = Math.min(refIndex, batchIndex);
     const maxIndex = Math.max(refIndex, batchIndex);
-    // Remove any state that depends on batch indices.
-    const stateHash = new URLSearchParams(
-        window.location.hash.length > 3 ? window.location.hash.slice(1) : '');
-    stateHash.delete('shown');
+
     const twoBatchLink = `?batch=${this.state.batches[minIndex].url}&batch=${
-        this.state.batches[maxIndex].url}${
-        stateHash.size > 0 ? `#${stateHash.toString()}` : ''}`;
+        this.state.batches[maxIndex].url}#${
+        getTwoBatchViewHash(this.state, window.location.hash)}`;
 
     const rdModeHash = getRdModeHash(
         this.state, this.batch, this.batch, undefined, window.location.hash);

src/codec_compare.ts

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

src/state_hash.ts

@@ -327,13 +327,28 @@ export function trimDefaultStateMapping(
   return values;
 }
 
-/** Returns the hash part of the URL to a Rate-Distortion curve plot. */
+/** Returns the hash part of the URL for a two-batch view. */
+export function getTwoBatchViewHash(state: State, currentHash: string) {
+  // Get the current hash (the part after the '#' in the URL), if any.
+  const hash =
+      new URLSearchParams(currentHash.length > 3 ? currentHash.slice(1) : '');
+  // Remove any state that depends on indices.
+  hash.delete('shown');
+  hash.delete('panel_batch');
+  hash.delete('panel_match');
+  // Do not open the batch panel on load.
+  hash.delete('panel');
+  return hash.toString();
+}
+
+/** Returns the hash part of the URL for a Rate-Distortion curve plot. */
 export function getRdModeHash(
     state: State, batch: Batch, reference: Batch, rowIndex: number|undefined,
     currentHash: string) {
   // No distortion means no Rate-Distortion curve.
   if (state.batchesAreLikelyLossless) return undefined;
 
+  // Get the current hash (the part after the '#' in the URL), if any.
   const hash =
       new URLSearchParams(currentHash.length > 3 ? currentHash.slice(1) : '');
 
@@ -422,6 +437,11 @@ export function getRdModeHash(
   }
   // Use the default reference because it has no impact in RD mode.
   hash.delete('ref');
+  // Remove any state that depends on indices.
+  hash.delete('panel_batch');
+  hash.delete('panel_match');
+  // Do not open the batch panel on load.
+  hash.delete('panel');
 
   if (rowIndex !== undefined) {
     // Only display the selected image.