Error shown for wrong user input in filter

cypress/e2e/debug_filterTable.cy.js

@@ -8,7 +8,7 @@ describe('Table size and toggle filter', () => {
 
   afterEach(() => {
     cy.clearDebugStore();
-  })
+  });
 
   it('Typing in a table size and retyping it', () => {
     // We only assume here that the default is two or more.
@@ -25,49 +25,57 @@ describe('Table size and toggle filter', () => {
     cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
     cy.get('[data-cy-debug="displayAmount"]').type('{backspace}{enter}');
     cy.get('[data-cy-debug="tableBody"]').find('tr').should('not.exist');
-    cy.get('[data-cy-debug="displayAmount"]').type('{selectAll}9{enter}')
-    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2)
-  })
+    cy.get('[data-cy-debug="displayAmount"]').type('{selectAll}9{enter}');
+    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
+  });
 
   it('After clicking filter button, the filter side drawer should appear', () => {
-    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist')
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="filter-side-drawer"]').should('be.visible')
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist')
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="filter-side-drawer"]').should('be.visible')
-    cy.get('[data-cy-debug="close-filter-btn"]').click()
-    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist')
-  })
+    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist');
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="filter-side-drawer"]').should('be.visible');
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist');
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="filter-side-drawer"]').should('be.visible');
+    cy.get('[data-cy-debug="close-filter-btn"]').click();
+    cy.get('[data-cy-debug="filter-side-drawer"]').should('not.exist');
+  });
 
   it('Type in a filter parameter should limit the records viewed in the record table', () => {
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('(Simple report){enter}')
-    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 1)
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).clear().type('{enter}')
-    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2)
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('(Simple report){enter}')
-    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 1)
-    cy.get('[data-cy-debug="clear-filter-btn"').click()
-    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2)
-  })
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('(Simple report){enter}');
+    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 1);
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).clear().type('{enter}');
+    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('(Simple report){enter}');
+    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 1);
+    cy.get('[data-cy-debug="clear-filter-btn"').click();
+    cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
+  });
 
   it('After clicking or typing in the filter text field, an autocomplete menu should show that displays the options of the current filter', () => {
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test')
-    cy.get('[data-cy-debug="matAutocompleteOption"]').should('be.visible')
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test');
+    cy.get('[data-cy-debug="matAutocompleteOption"]').should('be.visible');
     cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
-  })
+  });
+
+  it('Giving a wrong type for the filter field should display an error', () => {
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="tableFilter"]').eq(0).type('test');
+    cy.get('[data-cy-debug="filter-error-message"]').should('be.visible');
+    cy.contains('Filter Error: Search value \'test\' is not a valid \'number\' ');
+    cy.get('[data-cy-debug="filter"]').click();
+  });
 
   it('Selecting an option should update the table and selecting the empty option should reset the text field of the selected filter', () => {
-    cy.get('[data-cy-debug="filter"]').click()
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test')
-    cy.get('[data-cy-debug="matAutocompleteOption"]').first().click()
+    cy.get('[data-cy-debug="filter"]').click();
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test');
+    cy.get('[data-cy-debug="matAutocompleteOption"]').first().click();
     cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 1);
-    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test')
-    cy.get('[data-cy-debug="filterClearButton"]').eq(3).click()
+    cy.get('[data-cy-debug="tableFilter"]').eq(3).type('test');
+    cy.get('[data-cy-debug="filterClearButton"]').eq(3).click();
     cy.get('[data-cy-debug="tableBody"]').find('tr').should('have.length', 2);
-    cy.get('[data-cy-debug="filter"]').click()
-  })
-})
+    cy.get('[data-cy-debug="filter"]').click();
+  });
+});

src/app/debug/filter-side-drawer/filter-side-drawer.component.html

@@ -3,7 +3,7 @@
     <div class="panel-container">
       <h1 class="h1 filter-label">Filter</h1>
       <div class="filter-input-container">
-        @for (metadataName of metadataNames; track metadataName) {
+        @for (metadataName of metadataLabels; track metadataName) {
           <div class="input-container">
             <label class="metadata-input-label">{{ metadataName | titlecase }}</label>
             <div class="metadata-input-container input-group">

src/app/debug/filter-side-drawer/filter-side-drawer.component.ts

@@ -24,14 +24,14 @@ import { TitleCasePipe } from '@angular/common';
 })
 export class FilterSideDrawerComponent implements OnDestroy, OnInit {
   protected shouldShowFilter!: boolean;
-  protected metadataNames!: string[];
-  protected filters: Map<string, string> = new Map<string, string>();
+  protected metadataLabels!: string[];
   protected currentRecords: Map<string, Array<string>> = new Map<string, Array<string>>();
+  protected metadataTypes!: Map<string, string>;
 
   shouldShowFilterSubscriber!: Subscription;
-  metadataNamesSubscriber!: Subscription;
-  filterSubscriber!: Subscription;
+  metadataLabelsSubscriber!: Subscription;
   currentRecordsSubscriber!: Subscription;
+  metadataTypesSubscriber!: Subscription;
 
   constructor(protected filterService: FilterService) {}
 
@@ -47,27 +47,29 @@ export class FilterSideDrawerComponent implements OnDestroy, OnInit {
     this.shouldShowFilterSubscriber = this.filterService.showFilter$.subscribe((show: boolean): void => {
       this.shouldShowFilter = show;
     });
-    this.metadataNamesSubscriber = this.filterService.metadataNames$.subscribe((metadataNames: string[]): void => {
-      this.metadataNames = metadataNames;
-    });
-    this.filterSubscriber = this.filterService.filterContext$.subscribe((filterContext: Map<string, string>): void => {
-      this.filters = filterContext;
+    this.metadataLabelsSubscriber = this.filterService.metadataLabels$.subscribe((metadataLabels: string[]): void => {
+      this.metadataLabels = metadataLabels;
     });
     this.currentRecordsSubscriber = this.filterService.currentRecords$.subscribe(
       (records: Map<string, Array<string>>): void => {
         this.currentRecords = records;
       },
     );
+    this.metadataTypesSubscriber = this.filterService.metadataTypes$.subscribe(
+      (metadataTypes: Map<string, string>): void => {
+        this.metadataTypes = metadataTypes;
+      },
+    );
   }
 
   unsubscribeAll(): void {
     this.shouldShowFilterSubscriber.unsubscribe();
-    this.metadataNamesSubscriber.unsubscribe();
-    this.filterSubscriber.unsubscribe();
+    this.metadataLabelsSubscriber.unsubscribe();
     this.currentRecordsSubscriber.unsubscribe();
+    this.metadataTypesSubscriber.unsubscribe();
   }
 
-  closeFilter() {
+  closeFilter(): void {
     this.filterService.setShowFilter(false);
   }
 

src/app/debug/filter-side-drawer/filter.service.ts

@@ -1,27 +1,55 @@
 import { Injectable } from '@angular/core';
-import { debounceTime, Observable, Subject } from 'rxjs';
+import { debounceTime, filter, Observable, Subject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FilterService {
   private showFilterSubject: Subject<boolean> = new Subject();
-  private metadataNamesSubject: Subject<string[]> = new Subject();
+  private metadataLabelsSubject: Subject<string[]> = new Subject();
   private filterContextSubject: Subject<Map<string, string>> = new Subject();
   private currentRecordsSubject: Subject<Map<string, Array<string>>> = new Subject();
+  private metadataTypesSubject: Subject<Map<string, string>> = new Subject();
+  private filterErrorSubject: Subject<[boolean, Map<string, string>]> = new Subject();
   private filters: Map<string, string> = new Map<string, string>();
+  private metadataTypes: Map<string, string> = new Map<string, string>();
+  private filterErrors: Map<string, string> = new Map<string, string>();
 
   showFilter$: Observable<boolean> = this.showFilterSubject.asObservable();
-  metadataNames$: Observable<string[]> = this.metadataNamesSubject.asObservable();
-  filterContext$: Observable<Map<string, string>> = this.filterContextSubject.pipe(debounceTime(300));
+  metadataLabels$: Observable<string[]> = this.metadataLabelsSubject.asObservable();
   currentRecords$: Observable<Map<string, Array<string>>> = this.currentRecordsSubject.asObservable();
+  metadataTypes$: Observable<Map<string, string>> = this.metadataTypesSubject.asObservable();
+  filterError$: Observable<[boolean, Map<string, string>]> = this.filterErrorSubject.asObservable();
+  filterContext$: Observable<Map<string, string>> = this.filterContextSubject.pipe(
+    debounceTime(300),
+    filter((context: Map<string, string>): boolean => {
+      if (context.size === 0) {
+        this.disableFilterError();
+        return true;
+      }
+      let errorFound: boolean = false;
+      this.filterErrors.clear();
+      for (let [key, value] of context) {
+        if (!this.filterValidator(key, value)) {
+          this.filterErrors.set(<string>this.metadataTypes.get(key), value);
+          errorFound = true;
+        }
+      }
+      if (errorFound) {
+        this.enableFilterError(this.filterErrors);
+      } else {
+        this.disableFilterError();
+      }
+      return !errorFound;
+    }),
+  );
 
   setShowFilter(show: boolean): void {
     this.showFilterSubject.next(show);
   }
 
-  setMetadataNames(metadataNames: string[]): void {
-    this.metadataNamesSubject.next(metadataNames);
+  setMetadataLabels(metadataLabels: string[]): void {
+    this.metadataLabelsSubject.next(metadataLabels);
   }
 
   updateFilterContext(filterName: string, filterContext: string): void {
@@ -42,4 +70,32 @@ export class FilterService {
   setCurrentRecords(records: Map<string, Array<string>>): void {
     this.currentRecordsSubject.next(records);
   }
+
+  setMetadataTypes(metadataTypes: Map<string, string>): void {
+    this.metadataTypes = new Map<string, string>(Object.entries(metadataTypes));
+    this.metadataTypesSubject.next(this.metadataTypes);
+  }
+
+  disableFilterError(): void {
+    this.filterErrors.clear();
+    this.filterErrorSubject.next([false, this.filterErrors]);
+  }
+
+  enableFilterError(inputFilter: Map<string, string>): void {
+    this.filterErrors = inputFilter;
+    this.filterErrorSubject.next([true, this.filterErrors]);
+  }
+
+  filterValidator(metadataName: string, userInput: string): boolean {
+    if (this.metadataTypes.get(metadataName) == 'timestamp' && Number.isNaN(Date.parse(userInput))) {
+      return false;
+    }
+    if (
+      (this.metadataTypes.get(metadataName) == 'int' || this.metadataTypes.get(metadataName) == 'long') &&
+      (Number.isNaN(Number.parseFloat(userInput)) || !/^-?\d+(\.\d+)?$/.test(userInput))
+    ) {
+      return false;
+    }
+    return true;
+  }
 }

src/app/debug/table/table.component.css

@@ -85,3 +85,7 @@ th {
   width: 100%;
   margin-left: 1vw;
 }
+
+.alert-danger {
+  margin-bottom: 0;
+}

src/app/debug/table/table.component.html

@@ -1,5 +1,10 @@
 <div data-cy-debug="root" class="row" id="tableContent" *ngIf="tableSettings.tableLoaded">
   <app-filter-side-drawer></app-filter-side-drawer>
+  @if (this.showFilterError) {
+    <div class="alert alert-danger" role="alert" data-cy-debug="filter-error-message">
+      Filter Error: {{ this.handleFilterErrorContext() }}
+    </div>
+  }
   <div class="row d-flex align-items-center">
     <app-button data-cy-debug="refresh" icon="fa fa-refresh" title="Refresh" (click)="refresh()"></app-button>
     <app-button data-cy-debug="openSettings" icon="fa fa-cog" title="Settings" (click)="openSettingsModal()"></app-button>