Use orderPreferred tracking variable / bind filtering / input throttling

europeana · Oct 6, 2021 · b1eb594 · b1eb594
1 parent 0fbbb84
commit b1eb594
Show file tree

Hide file tree

Showing 13 changed files with 261 additions and 262 deletions.
diff --git a/cypress/integration/grid.spec.ts b/cypress/integration/grid.spec.ts
@@ -9,7 +9,7 @@ context('statistics-dashboard', () => {
     const selRowName = '[data-e2e="grid-row-name"]';
     const selPageNext = '[data-e2e="grid-page-next"]';
     const selPagePrev = '[data-e2e="grid-page-prev"]';
-    const selColSortCount = '[data-e2e="grid-sort-count"] a';
+    const selColSortCount = '[data-e2e="grid-sort-count"]:nth-of-type(4) a';
     const selFacetSelect = '.facet-param';
     const selFilter = '.search';
 

diff --git a/src/app/_mocked/mock-grid.component.ts b/src/app/_mocked/mock-grid.component.ts
@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
-import { FmtTableData, PagerInfoExtended, SortBy, TableRow } from '../_models';
+import { FmtTableData, SortBy, SortInfo, TableRow } from '../_models';
 
 @Component({
   selector: 'app-grid',
   template: ''
 })
 export class MockGridComponent {
+  sortInfo: SortInfo = {
+    by: SortBy.name,
+    dir: -1
+  };
+
   calculatePages(_: Array<TableRow>): Array<Array<TableRow>> {
     return [];
   }
@@ -25,20 +30,6 @@ export class MockGridComponent {
     };
   }
 
-  getExtendedPagerInfo(): PagerInfoExtended {
-    return {
-      maxPerPage: 0,
-      currentPage: 0,
-      pageCount: 0,
-      pageRows: [],
-      filterTerm: '',
-      sort: {
-        by: SortBy.name,
-        dir: -1
-      }
-    };
-  }
-
   setPage(_: number): void {
     console.log('setPage()');
   }

diff --git a/src/app/_models/chart.ts b/src/app/_models/chart.ts
@@ -29,7 +29,8 @@ export interface CompareDataDescriptor {
   applied: boolean;
   current?: boolean;
   data: IHashNumber;
-  dataOrder?: Array<string>;
+  orderOriginal?: Array<string>;
+  orderPreferred?: Array<string>;
   dataPercent: IHashNumber;
   label: string;
   name: string;
@@ -41,3 +42,7 @@ export interface CompareDataDescriptor {
 export interface CompareData {
   [key: string]: CompareDataDescriptor;
 }
+
+export interface ChartPosition {
+  absoluteIndex: number;
+}
diff --git a/src/app/_models/grid.ts b/src/app/_models/grid.ts
@@ -15,9 +15,3 @@ export interface PagerInfo {
   pageCount: number;
   pageRows: Array<TableRow>;
 }
-
-export interface PagerInfoExtended extends PagerInfo {
-  maxPerPage: number;
-  filterTerm: string;
-  sort?: SortInfo;
-}
diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html
@@ -18,21 +18,36 @@
     ></span>
   </ng-template>
 
+  <ng-template #cellHeader let-label="label" let-sortBy="sortBy" let-e2e="e2e">
+    <span
+      class="cell-header"
+      data-e2e="grid-sort-count"
+      [ngClass]="{
+        active: sortInfo.by === sortBy,
+        ascending: sortInfo.dir === 1,
+        descending: sortInfo.dir === -1,
+        'text-right': sortBy === SortBy.count,
+        'cell-first-wide': sortBy === SortBy.name
+      }"
+      ><a (click)="sort(sortBy)">{{ label }}</a></span
+    >
+  </ng-template>
+
   <div class="data-grid" [ngClass]="{ 'with-series': isShowingSeriesInfo }">
     <span class="search-control container-h cell-first-wide">
       <span class="search-icon"></span>
       <input
         class="search"
         placeholder="Search..."
-        [(ngModel)]="filterString"
-        (keyup)="updateRows()"
+        [(ngModel)]="filterTerm"
+        (keyup)="updateRows($event)"
       />
     </span>
 
     <span class="navigation-controls container-h">
       <span
         class="conditional-controls container-h"
-        *ngIf="pagerInfo && pagerInfo.pageCount > 1"
+        *ngIf="pagerInfo && pagerInfo.pageCount > 0"
       >
         <label for="maxPageSize">Rows per page:</label>
         <select
@@ -62,38 +77,34 @@
       ></app-grid-paginator>
     </span>
 
-    <span
-      class="cell-header cell-first-wide"
-      [ngClass]="{
-        active: sortStates[SortBy.name] !== 0,
-        descending: sortStates[SortBy.name] === -1
-      }"
-    >
-      <a (click)="sort(SortBy.name)">Records by {{ facet | renameApiFacet }}</a>
-    </span>
-
-    <span
-      class="cell-header text-right"
-      data-e2e="grid-sort-count"
-      [ngClass]="{
-        active: sortStates[SortBy.count] !== 0,
-        descending: sortStates[SortBy.count] === -1
-      }"
-      ><a (click)="sort(SortBy.count)">Count</a></span
-    >
-
-    <span
-      class="cell-header text-right"
-      [ngClass]="{
-        active: sortStates[SortBy.count] !== 0,
-        descending: sortStates[SortBy.count] === -1
-      }"
-      ><a (click)="sort(SortBy.count)">Percent</a></span
-    >
+    <ng-content
+      *ngTemplateOutlet="
+        cellHeader;
+        context: { label: 'Records by ' + facet, sortBy: SortBy.name }
+      "
+    ></ng-content>
+
+    <ng-content
+      *ngTemplateOutlet="
+        cellHeader;
+        context: {
+          label: 'Count',
+          sortBy: SortBy.count,
+          e2e: 'grid-sort-count'
+        }
+      "
+    ></ng-content>
+
+    <ng-content
+      *ngTemplateOutlet="
+        cellHeader;
+        context: { label: 'Percent', sortBy: SortBy.count }
+      "
+    ></ng-content>
 
     <span class="cell-header">View in Europeana</span>
 
-    <ng-container *ngIf="pagerInfo && pagerInfo.pageRows">
+    <ng-container>
       <!-- Summary rows -->
       <ng-template #labelTotal><span class="bold">Total</span></ng-template>
 
@@ -126,58 +137,60 @@
 
       <!-- Rows -->
 
-      <ng-container *ngFor="let row of pagerInfo.pageRows; let i = index">
-        <span [ngClass]="{ highlight: row.highlight }">
-          {{ row.displayIndex }}
-        </span>
+      <ng-container *ngIf="pagerInfo">
+        <ng-container *ngFor="let row of pagerInfo.pageRows; let i = index">
+          <span [ngClass]="{ highlight: row.highlight }">
+            {{ row.displayIndex }}
+          </span>
 
-        <span
-          class="cell-name"
-          [ngClass]="{
-            highlight: row.highlight,
-            'highlighting-terms': filterString.length > 0
-          }"
-          data-e2e="grid-row-name"
-          [title]="row.name"
-        >
-          <app-truncate
-            [text]="getPrefix() + row.name | renameRights"
-            [highlightText]="filterString"
-          ></app-truncate>
-        </span>
+          <span
+            class="cell-name"
+            [ngClass]="{
+              highlight: row.highlight,
+              'highlighting-terms': filterTerm.length > 0
+            }"
+            data-e2e="grid-row-name"
+            [title]="row.name"
+          >
+            <app-truncate
+              [text]="getPrefix() + row.name | renameRights"
+              [highlightText]="filterTerm"
+            ></app-truncate>
+          </span>
 
-        <span
-          *ngIf="isShowingSeriesInfo"
-          class="cell-series container-h"
-          [ngClass]="{ highlight: row.highlight }"
-        >
-          <ng-content
-            *ngTemplateOutlet="seriesColour; context: { row: row }"
-          ></ng-content>
-          <!-- TODO: do we need this text or is it redundant and unwieldy?
+          <span
+            *ngIf="isShowingSeriesInfo"
+            class="cell-series container-h"
+            [ngClass]="{ highlight: row.highlight }"
+          >
+            <ng-content
+              *ngTemplateOutlet="seriesColour; context: { row: row }"
+            ></ng-content>
+            <!-- TODO: do we need this text or is it redundant and unwieldy?
           <span class="series-info" [title]="row.series">
             {{ row.series }}
           </span>
           -->
-        </span>
+          </span>
 
-        <span
-          class="text-right"
-          [ngClass]="{
-            highlight: row.highlight,
-            bold: row.isTotal
-          }"
-        >
-          {{ row.count | number }}
-        </span>
+          <span
+            class="text-right"
+            [ngClass]="{
+              highlight: row.highlight,
+              bold: row.isTotal
+            }"
+          >
+            {{ row.count | number }}
+          </span>
 
-        <span class="text-right" [ngClass]="{ highlight: row.highlight }">
-          {{ row.percent }}%
-        </span>
+          <span class="text-right" [ngClass]="{ highlight: row.highlight }">
+            {{ row.percent }}%
+          </span>
 
-        <ng-content
-          *ngTemplateOutlet="linkOut; context: { row: row }"
-        ></ng-content>
+          <ng-content
+            *ngTemplateOutlet="linkOut; context: { row: row }"
+          ></ng-content>
+        </ng-container>
       </ng-container>
     </ng-container>
   </div>

diff --git a/src/app/grid/grid.component.scss b/src/app/grid/grid.component.scss
@@ -15,10 +15,14 @@ label[for="maxPageSize"] {
 
   &.active {
     font-weight: 600;
-    &::before {
-      content: "⌄";
+    &.ascending,
+    &.descending {
+      &::before {
+        content: "⌄";
+      }
     }
   }
+
   &.descending::before {
     transform: translateY(-2px) rotate(0deg);
   }

diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts
@@ -6,7 +6,7 @@ import {
   tick
 } from '@angular/core/testing';
 import { createMockPipe } from '../_mocked';
-import { DimensionName, PagerInfo, TableRow } from '../_models';
+import { DimensionName, PagerInfo, SortBy, TableRow } from '../_models';
 import { GridPaginatorComponent } from '../grid-paginator';
 import { GridComponent } from '.';
 
@@ -81,23 +81,19 @@ describe('GridComponent', () => {
   });
 
   it('should bump the sort state', () => {
-    expect(component.sortStates['count']).toEqual(-1);
-    component.bumpSortState('count');
-    expect(component.sortStates['count']).toEqual(0);
-    component.bumpSortState('count');
-    expect(component.sortStates['count']).toEqual(1);
-    component.bumpSortState('count');
-    expect(component.sortStates['count']).toEqual(-1);
+    expect(component.sortInfo.dir).toEqual(-1);
+    component.bumpSortState(SortBy.count);
+    expect(component.sortInfo.dir).toEqual(0);
+    component.bumpSortState(SortBy.count);
+    expect(component.sortInfo.dir).toEqual(1);
+    component.bumpSortState(SortBy.count);
+    expect(component.sortInfo.dir).toEqual(-1);
   });
 
   it('should get the data', () => {
     expect(component.getData()).toBeTruthy();
   });
 
-  it('should get the extended pager info', () => {
-    expect(component.getExtendedPagerInfo()).toBeTruthy();
-  });
-
   it('should get the prefix', () => {
     expect(component.getPrefix()).toEqual('');
     component.facet = DimensionName.contentTier;
@@ -137,7 +133,7 @@ describe('GridComponent', () => {
   it('should sort', () => {
     spyOn(component, 'bumpSortState');
     spyOn(component.refreshData, 'emit');
-    component.sort('count');
+    component.sort(SortBy.count);
     expect(component.bumpSortState).toHaveBeenCalled();
     expect(component.refreshData.emit).toHaveBeenCalled();
   });