Handle empty result

europeana · Oct 13, 2021 · 429b358 · 429b358
1 parent 904876e
commit 429b358
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 14 deletions.
diff --git a/cypress/integration/filters.spec.ts b/cypress/integration/filters.spec.ts
@@ -4,9 +4,11 @@ context('statistics-dashboard', () => {
   describe('filters', () => {
 
     const force = { force: true };
+    const selCloseDateOverride = '[data-e2e="close-date-override"]';
+    const selDatasetId = '.dataset-name';
     const selDateFrom = '[data-e2e="dateFrom"]';
     const selDateTo = '[data-e2e="dateTo"]';
-    const selCloseDateOverride = '[data-e2e="close-date-override"]';
+
     const selFacetSelect = '.facet-param';
     const selFiltersHeader = '.filters-header';
     const selFilter = `${selFiltersHeader} + .filters .filter`;
@@ -15,7 +17,7 @@ context('statistics-dashboard', () => {
     const selFilterOpened = `${selFilter} .checkboxes-list`;
     const selFilterRemove = `.rm-filter`;
     const selFilterRemoveNav = `.rm-filter-nav`;
-
+    const selNoData = '.no-data';
     const selCheckbox = `${selFilter} .checkbox`;
     const selSearch = `.checkbox-filter-input`;
     const selFilterValueLabel = `${selFilter} .filter-label`;
@@ -130,5 +132,26 @@ context('statistics-dashboard', () => {
       cy.get(selDateFrom).clear();
       cy.get(selCloseDateOverride).should('not.be.visible');
     });
+
+    it('should filter on the dataset id', () => {
+      cy.visit(`/data/${DimensionName.contentTier}`);
+      cy.get(selFilterRemove).should('have.length', 0);
+
+      cy.get(selDatasetId).type('dataset_1{enter}');
+      cy.get(selFilterRemove).should('have.length', 1);
+      cy.get(selDatasetId).type(',dataset_2{enter}');
+      cy.get(selFilterRemove).should('have.length', 2);
+
+      cy.get(selDatasetId).clear();
+      cy.get(selDatasetId).type('{enter}');
+      cy.get(selFilterRemove).should('have.length', 0);
+    });
+
+    it('should report when no results are found', () => {
+      cy.visit(`/data/${DimensionName.contentTier}`);
+      cy.get(selNoData).should('have.length', 0);
+      cy.get(selDatasetId).type('dataset_x{enter}');
+      cy.get(selNoData).should('be.visible');
+    });
   });
 });
diff --git a/src/app/grid-summary/grid-summary.component.html b/src/app/grid-summary/grid-summary.component.html
@@ -1,4 +1,7 @@
-<div class="summary-grid totals" *ngIf="_summaryData && _summaryData.results">
+<div
+  class="summary-grid totals"
+  *ngIf="_summaryData && _summaryData.results && _summaryData.results[0]"
+>
   <span class="total-title"
     >Top {{ _summaryData.breakdownBy | renameApiFacetShort }}</span
   >

diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="gridRows">
+<div *ngIf="isVisible && gridRows">
   <ng-template #linkOut let-row="row" let-total="row.isTotal">
     <span class="cell-link-out" [ngClass]="{ highlight: row.highlight }">
       <a

diff --git a/src/app/grid/grid.component.spec.ts b/src/app/grid/grid.component.spec.ts
@@ -106,6 +106,9 @@ describe('GridComponent', () => {
     };
     component.setRows(testRows.slice(0));
     fixture.detectChanges();
+    expect(component.paginator).toBeFalsy();
+    component.isVisible = true;
+    fixture.detectChanges();
     expect(component.paginator).toBeTruthy();
     tick(1);
     spyOn(component.paginator, 'setPage');
@@ -115,7 +118,6 @@ describe('GridComponent', () => {
       target: { value: 'a' }
     } as unknown as KeyboardEvent);
     expect(component.paginator.setPage).not.toHaveBeenCalled();
-
     component.goToPage({ key: '99' } as unknown as KeyboardEvent);
     component.goToPage({
       key: 'Enter',

diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts
@@ -25,6 +25,7 @@ export class GridComponent {
   @Input() getUrl: (s: string) => string;
   @Input() getUrlRow: (s: string) => string;
   @Input() facet: string;
+  @Input() isVisible: boolean;
   @Output() refreshData = new EventEmitter<void>();
   @Output() chartPositionChanged = new EventEmitter<number>();
   @ViewChild('paginator') paginator: GridPaginatorComponent;

diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html
@@ -190,9 +190,8 @@ <h3 class="header-data">
                 </ng-container>
               </ng-container>
             </ng-container>
-
-            <ng-container *ngIf="form.value.datasetId">
-              <ng-container *ngFor="let id of form.value.datasetId.split(',')">
+            <ng-container *ngIf="queryParams['dataset-id']; let datasets">
+              <ng-container *ngFor="let id of datasets.toString().split(',')">
                 <ng-container
                   *ngIf="form.controls['datasetIds'].get(id.trim())"
                 >
@@ -233,8 +232,19 @@ <h3 class="header-data">
       <!-- Data Area -->
       <div class="data-area">
         <span class="load-bar" [ngClass]="{ showing: isLoading }"></span>
+        <div *ngIf="emptyDataset && !isLoading" class="no-data">
+          No results found!
+          <ul>
+            <li *ngIf="queryParams['dataset-id']">
+              try removing the <span class="param">dataset id</span> parameter
+            </li>
+            <li *ngIf="queryParams['date-from'] && queryParams['date-to']">
+              try removing the <span class="param">date</span> parameters
+            </li>
+          </ul>
+        </div>
         <div class="chart-and-summary">
-          <div class="chart-wrapper">
+          <div class="chart-wrapper" [ngClass]="{ hidden: emptyDataset }">
             <app-bar-chart
               #barChart
               [showPercent]="form.value.showPercent"
@@ -258,7 +268,7 @@ <h3 class="header-data">
           </ng-container>
         </div>
 
-        <label style="position: relative; float: right; top: -4px; right: 4px"
+        <label *ngIf="!emptyDataset" class="toggle-percentage"
           >As percentages
           <input
             type="checkbox"
@@ -273,6 +283,7 @@ <h3 class="header-data">
             [facetName]="form.value.facetParameter"
             (hideItem)="removeSeries($event)"
             (showItems)="addSeries($event)"
+            [isVisible]="!emptyDataset"
           >
           </app-snapshots>
         </ng-container>
@@ -286,9 +297,10 @@ <h3 class="header-data">
           [getUrlRow]="getUrlRow.bind(this)"
           (refreshData)="showAppliedSeriesInGridAndChart()"
           (chartPositionChanged)="chartPositionChanged($event)"
+          [isVisible]="!emptyDataset"
         ></app-grid>
 
-        <div class="export-opener-link-wrapper">
+        <div class="export-opener-link-wrapper" *ngIf="!emptyDataset">
           <a class="export-opener-link" (click)="export.toggleActive()"
             >EXPORT DATA</a
           >

diff --git a/src/app/overview/overview.component.scss b/src/app/overview/overview.component.scss
@@ -134,6 +134,13 @@ $width-left-col: 200px;
   margin-top: $spacing-m;
 }
 
+.toggle-percentage {
+  float: right;
+  position: relative;
+  right: 4px;
+  top: -4px;
+}
+
 input[type="checkbox"] {
   &:enabled {
     cursor: pointer;
@@ -280,6 +287,13 @@ label {
   height: 300px;
   margin: 0 -$spacing-s;
   max-width: 100%;
+
+  &.hidden {
+    overflow: hidden;
+    margin: 0;
+    transition: height ease-in-out 100ms;
+    height: 0;
+  }
 }
 
 .data-area {
@@ -305,6 +319,19 @@ label {
       transition: 0.3s linear width;
     }
   }
+
+  .no-data {
+    font-size: 24px;
+    ul {
+      font-size: 14px;
+      list-style: disc;
+      margin: 12px 0 0 20px;
+
+      .param {
+        font-weight: bold;
+      }
+    }
+  }
 }
 
 .facet-param {

diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts
@@ -57,6 +57,7 @@ export class OverviewComponent extends DataPollingComponent implements OnInit {
   @ViewChild('snapshots') snapshots: SnapshotsComponent;
 
   // Make variables available to template
+  public emptyDataset = true;
   public DimensionName = DimensionName;
   public toInputSafeName = toInputSafeName;
   public fromInputSafeName = fromInputSafeName;
@@ -345,10 +346,12 @@ export class OverviewComponent extends DataPollingComponent implements OnInit {
   processServerResult(results: BreakdownResults): boolean {
     this.dataServerData = results;
     if (results.results && results.results.count) {
+      this.emptyDataset = false;
       this.resultTotal = results.results.count;
       return true;
     } else {
       this.barChart.removeAllSeries();
+      this.emptyDataset = true;
       this.grid.setRows([]);
       if (this.gridSummary) {
         this.gridSummary.summaryData = { breakdownBy: '', results: [] };

diff --git a/src/app/snapshots/snapshots.component.html b/src/app/snapshots/snapshots.component.html
@@ -1,4 +1,4 @@
-<div class="snapshots">
+<div class="snapshots" *ngIf="isVisible">
   <ng-template #comparisonItem let-key="key" let-item="item">
     <ng-container *ngIf="item.current || item.saved">
       <li class="compare-data">

diff --git a/src/app/snapshots/snapshots.component.ts b/src/app/snapshots/snapshots.component.ts
@@ -37,6 +37,7 @@ export class SnapshotsComponent {
     this.compareData = this.compareDataAllFacets[facetName];
   }
 
+  @Input() isVisible: boolean;
   @Output() hideItem: EventEmitter<string> = new EventEmitter();
   @Output() showItems: EventEmitter<Array<string>> = new EventEmitter();
 

diff --git a/test-data/index-x.ts b/test-data/index-x.ts
@@ -123,12 +123,18 @@ new (class extends TestDataServer {
       let res = true;
       Object.keys(breakdownRequest.filters)
         .filter((fName: string) => {
-          return !['createdDate', 'datasetId'].includes(fName);
+          return !['createdDate'].includes(fName);
         })
         .forEach((fName: string) => {
           const filter = breakdownRequest.filters[fName] as RequestFilter;
           if (filter.values) {
-            if (!filter.values.includes(encodeURIComponent(cho[fName]))) {
+            if (fName === 'datasetId') {
+              if (!filter.values.includes(cho.datasetId)) {
+                res = false;
+              }
+            } else if (
+              !filter.values.includes(encodeURIComponent(cho[fName]))
+            ) {
               cho.exclusions.push(fName);
               res = false;
             }