Codec-Compare version 0.4.0 (#22)

Improve navigation.

Author: y-guyon

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.4.0
+
+- Improve navigation by refactoring the BatchUi, BatchSelectionUi, MatchesUi,
+  and MatchUi components into a single PanelUi with tabs Metadata, Filtered
+  rows, and Matches.
+
 ## v0.3.1
 
 - Add setting for displaying 10th and 90th percentiles as error bars.

package.json

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

src/batch_selection_actions_ui.ts

@@ -40,15 +40,6 @@ export class BatchSelectionActionsUi extends LitElement {
                            'Use'} as reference to compare other codecs with`;
 
     return html`
-      <mwc-icon-button
-          class="batchInfo"
-          icon="info"
-          title="Show details"
-          @click=${() => {
-      dispatch(
-          EventType.BATCH_INFO_REQUEST, {batchIndex: this.batchSelectionIndex});
-    }}>
-      </mwc-icon-button>
       <span title="${focusTitle}">
         <mwc-icon-button
           ?disabled=${this.isReference}

src/batch_selection_ui.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import '@material/mwc-fab';
 import '@material/mwc-button';
 import './filtered_images_ui';
 import './filters_ui';
@@ -31,9 +30,7 @@ import {State} from './state';
 @customElement('batch-selection-ui')
 export class BatchSelectionUi extends LitElement {
   @property({attribute: false}) state!: State;
-
-  /** The selected batch. */
-  private batchSelection: BatchSelection|undefined = undefined;
+  @property({attribute: false}) batchSelection!: BatchSelection;
 
   @query('filtered-images-ui')
   private readonly filteredImagesUi: FilteredImagesUi|undefined;
@@ -43,125 +40,36 @@ export class BatchSelectionUi extends LitElement {
     listen(EventType.MATCHED_DATA_POINTS_CHANGED, () => {
       this.filteredImagesUi?.requestUpdate();
     });
-    listen(EventType.FILTERED_DATA_INFO_REQUEST, (event) => {
-      this.batchSelection = this.state.batchSelections[event.detail.batchIndex];
-      this.style.display = 'block';
-      this.requestUpdate();
-    });
   }
 
   override render() {
-    if (!this.batchSelection) return html``;
-
-    const onClose = () => {
-      this.batchSelection = undefined;
-      this.style.display = 'none';
-      this.requestUpdate();
-    };
-
     const batchIndex = this.batchSelection.batch.index;
     const onBatchInfoRequest = () => {
       dispatch(EventType.BATCH_INFO_REQUEST, {batchIndex});
-      onClose();
     };
     const onMatchesInfoRequest = () => {
       dispatch(EventType.MATCHES_INFO_REQUEST, {batchIndex});
-      onClose();
     };
 
     return html`
-      <div id="background" @click=${onClose}></div>
-      <div id="dialog" @click=${(e: Event) => {
-      e.stopImmediatePropagation();
-    }}>
-        <div class="horizontalFlex">
-          <filters-ui .state=${this.state}
-            .batchSelection=${this.batchSelection}>
-          </filters-ui>
-          <filtered-images-ui .state=${this.state}
-            .batchSelection=${this.batchSelection}>
-          </filtered-images-ui>
-        </div>
-
-        <div class="buttons">
-          <mwc-button
-            raised
-            icon="info"
-            label="Show metadata"
-            title="Display the details of the batch"
-            @click=${onBatchInfoRequest}>
-          </mwc-button>
-
-          ${
-        batchIndex === this.state.referenceBatchSelectionIndex ?
-            // disabled mwc-button title does not appear. Use a div.
-            html`
-          <div title="The reference batch cannot be matched with itself">
-            <mwc-button
-              raised
-              icon="join_inner"
-              label="Show matches"
-              disabled>
-            </mwc-button>
-          </div>
-        ` :
-            html`
-          <mwc-button
-            raised
-            icon="join_inner"
-            label="Show matches"
-            title="Display the matches between this batch and the reference batch"
-            @click=${onMatchesInfoRequest}>
-          </mwc-button>
-        `}
-        </div>
-
-        <mwc-fab id="closeButton" icon="close" title="Close" @click=${onClose}>
-        </mwc-fab>
+      <div class="horizontalFlex">
+        <filters-ui .state=${this.state} .batchSelection=${this.batchSelection}>
+        </filters-ui>
+        <filtered-images-ui .state=${this.state}
+          .batchSelection=${this.batchSelection}>
+        </filtered-images-ui>
       </div>`;
   }
 
   static override styles = css`
     :host {
-      display: none;
-      position: absolute;
-      z-index: 5;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    #background {
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.6);
-    }
-
-    #dialog {
-      background-color: var(--mdc-theme-surface);
-      position: absolute;
-      left: 40px;
-      top: 40px;
-      bottom: 40px;
-      right: 40px;
-      padding: 20px;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
-      border-radius: 16px;
       display: flex;
       flex-direction: column;
-      /* Rely on margin:auto for distributing the space. */
       justify-content: flex-start;
       gap: 20px;
       overflow: hidden;
     }
 
-    #closeButton {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-    }
-
     .horizontalFlex {
       display: flex;
       flex-direction: row;
@@ -175,11 +83,5 @@ export class BatchSelectionUi extends LitElement {
       max-height: 100%;
       flex: 1;
     }
-
-    .buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-evenly;
-    }
   `;
 }

src/batch_selections_ui.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import '@material/mwc-icon';
 import './batch_selection_actions_ui';
 
 import {css, html, LitElement} from 'lit';
@@ -78,8 +79,8 @@ export class BatchSelectionsUi extends LitElement {
       let mean = stats.getAbsoluteMean();
       let multiple = '';
       const unit = fieldUnit(field.id);
-      const title = `average ${field.displayName} of ${batch.name} is ${
-          mean} ${unit}`;
+      const title =
+          `average ${field.displayName} of ${batch.name} is ${mean} ${unit}`;
 
       if (mean > 1000000 && unit === 'B') {
         mean /= 1000000;
@@ -147,7 +148,10 @@ export class BatchSelectionsUi extends LitElement {
       <tr>
         <td>
           <div class="batchName">
-            <batch-name-ui .batch=${batch}></batch-name-ui>
+            <batch-name-ui .batch=${batch} class="batchInfo" @click=${() => {
+      dispatch(EventType.BATCH_INFO_REQUEST, {batchIndex: batch.index});
+    }}>
+            </batch-name-ui>
             ${this.renderFilterChips(batchSelection)}
           </div>
         </td>
@@ -234,6 +238,9 @@ export class BatchSelectionsUi extends LitElement {
       align-items: center;
       gap: 5px;
     }
+    batch-name-ui:hover {
+      cursor: pointer;
+    }
     .stat {
       text-align: right;
       /* Keep the table from reshaping itself when percentages vary. */