Merge branch 'develop' into feature/parallelize-ngrams

frontend/src/app/filter/ad-hoc-filter/ad-hoc-filter.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { commonTestBed } from '../../common-test-bed';
+
+import { AdHocFilterComponent } from './ad-hoc-filter.component';
+
+describe('AdHocFilterComponent', () => {
+    let component: AdHocFilterComponent;
+    let fixture: ComponentFixture<AdHocFilterComponent>;
+
+    beforeEach(async () => {
+        commonTestBed().testingModule.compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AdHocFilterComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

frontend/src/app/filter/ad-hoc-filter/ad-hoc-filter.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { AdHocFilter, } from '../../models';
+import { BaseFilterComponent } from './../base-filter.component';
+
+@Component({
+    selector: 'ia-ad-hoc-filter',
+    templateUrl: './ad-hoc-filter.component.html',
+    styleUrls: ['./ad-hoc-filter.component.scss']
+})
+export class AdHocFilterComponent extends BaseFilterComponent<AdHocFilter> {
+}

frontend/src/app/filter/boolean-filter.component.spec.ts → frontend/src/app/filter/boolean-filter/boolean-filter.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { mockCorpus3, mockField } from '../../mock-data/corpus';
+import { mockCorpus3, mockField } from '../../../mock-data/corpus';
 
-import { commonTestBed } from '../common-test-bed';
-import { BooleanFilter, QueryModel } from '../models';
+import { commonTestBed } from '../../common-test-bed';
+import { BooleanFilter, QueryModel } from '../../models';
 import { BooleanFilterComponent } from './boolean-filter.component';
 import { By } from '@angular/platform-browser';
 

frontend/src/app/filter/boolean-filter/boolean-filter.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { BaseFilterComponent } from '../base-filter.component';
+import { BooleanFilter } from '../../models';
+
+@Component({
+    selector: 'ia-boolean-filter',
+    templateUrl: './boolean-filter.component.html',
+    styleUrls: ['./boolean-filter.component.scss']
+})
+export class BooleanFilterComponent extends BaseFilterComponent<BooleanFilter> {
+}

frontend/src/app/filter/date-filter.component.scss → frontend/src/app/filter/date-filter/date-filter.component.scss

@@ -1,8 +1,8 @@
-@import "../../_utilities";
+@import "../../../_utilities";
 
 ::ng-deep .p-datepicker {
     margin: 1px 0;
     .p-highlight {
         background-color: $primary !important;
     };
-}
+}

frontend/src/app/filter/date-filter.component.spec.ts → frontend/src/app/filter/date-filter/date-filter.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { mockCorpus3, mockFieldDate } from '../../mock-data/corpus';
+import { mockCorpus3, mockFieldDate } from '../../../mock-data/corpus';
 
-import { commonTestBed } from '../common-test-bed';
-import { DateFilter, DateFilterData, QueryModel } from '../models';
+import { commonTestBed } from '../../common-test-bed';
+import { DateFilter, DateFilterData, QueryModel } from '../../models';
 
 import { DateFilterComponent } from './date-filter.component';
 

frontend/src/app/filter/date-filter.component.ts → frontend/src/app/filter/date-filter/date-filter.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 import * as _ from 'lodash';
 
-import { DateFilter } from '../models';
-import { BaseFilterComponent } from './base-filter.component';
+import { DateFilter } from '../../models';
+import { BaseFilterComponent } from '../base-filter.component';
 import { BehaviorSubject, combineLatest } from 'rxjs';
 
 @Component({
-  selector: 'ia-date-filter',
-  templateUrl: './date-filter.component.html',
-  styleUrls: ['./date-filter.component.scss']
+    selector: 'ia-date-filter',
+    templateUrl: './date-filter.component.html',
+    styleUrls: ['./date-filter.component.scss']
 })
 export class DateFilterComponent extends BaseFilterComponent<DateFilter> {
     public minDate: Date;
@@ -25,7 +25,7 @@ export class DateFilterComponent extends BaseFilterComponent<DateFilter> {
         this.selectedMaxDate = new BehaviorSubject(filter.currentData.max);
 
         combineLatest([this.selectedMinDate, this.selectedMaxDate]).subscribe(([min, max]) =>
-            this.update({min, max})
+            this.update({ min, max })
         );
     }
 

frontend/src/app/filter/filter-box/filter-box.component.html

@@ -0,0 +1,32 @@
+<div class="box filter-container" *ngIf="filter" [ngClass]="{'on': filter.active.value}">
+    <div class="field has-addons">
+        <div class="control is-expanded" iaBalloon="{{ filter.description }}"
+            iaBalloonPosition="up-left" iaBalloonLength="fit">
+            <label class="label" [for]="'filter' + filter.corpusField.name">{{ filter.corpusField.displayName
+                }}</label>
+        </div>
+        <p class="control">
+            <button *ngIf="(filter.isDefault$ | async) === false" class="button icon filter-icon is-primary is-inverted is-round"
+                (click)="filter.reset()" iaBalloon="Reset this filter to its default values"
+                iaBalloonPosition="down-left">
+                <i class="fa fa-trash"></i>
+            </button>
+            <button *ngIf="(filter.isDefault$ | async) === false"
+                class="button icon filter-icon is-primary is-inverted is-round"
+                [ngClass]="{'is-primary': filter.active.value}"
+                (click)="filter.toggle()" iaBalloon="{{filter.active.value ? 'Disable this filter' : 'Enable this filter'}}"
+                iaBalloonPosition="down-left">
+                <i class="fa fa-filter"></i>
+            </button>
+        </p>
+    </div>
+    <ng-container *ngIf="filter.adHoc">
+        <ia-ad-hoc-filter [filter]="filter" [queryModel]="queryModel"></ia-ad-hoc-filter>
+    </ng-container>
+    <ng-container *ngIf="!filter.adHoc" [ngSwitch]="filter.filterType">
+        <ia-boolean-filter *ngSwitchCase="'BooleanFilter'" [filter]="filter" [queryModel]="queryModel"></ia-boolean-filter>
+        <ia-date-filter *ngSwitchCase="'DateFilter'" [filter]="filter" [queryModel]="queryModel"></ia-date-filter>
+        <ia-multiple-choice-filter *ngSwitchCase="'MultipleChoiceFilter'" [filter]="filter" [queryModel]="queryModel"></ia-multiple-choice-filter>
+        <ia-range-filter *ngSwitchCase="'RangeFilter'" [filter]="filter" [queryModel]="queryModel"></ia-range-filter>
+    </ng-container>
+</div>

frontend/src/app/filter/filter-box/filter-box.component.scss

@@ -0,0 +1,16 @@
+@import "../../../_utilities";
+
+.filter-container{
+    &:hover{
+        box-shadow: 0 0 0 1px $primary;
+    }
+    margin-bottom: 5px;
+}
+
+.filter-container.on{
+    box-shadow: 0 0 0 2px $primary;
+}
+
+.control {
+    z-index: 20;
+}

frontend/src/app/filter/filter-box/filter-box.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterBoxComponent } from './filter-box.component';
+import { commonTestBed } from '../../common-test-bed';
+
+describe('FilterBoxComponent', () => {
+    let component: FilterBoxComponent;
+    let fixture: ComponentFixture<FilterBoxComponent>;
+
+    beforeEach(async () => {
+        commonTestBed().testingModule.compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FilterBoxComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

frontend/src/app/filter/filter-box/filter-box.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { QueryModel, SearchFilter } from '../../models';
+
+@Component({
+    selector: 'ia-filter-box',
+    templateUrl: './filter-box.component.html',
+    styleUrls: ['./filter-box.component.scss']
+})
+export class FilterBoxComponent {
+    @Input() filter: SearchFilter;
+    @Input() queryModel: QueryModel;
+
+}

frontend/src/app/filter/filter-manager.component.html

@@ -18,37 +18,8 @@ <h4 class="title">Filters</h4>
         </p>
     </div>
     <ng-container *ngFor="let filter of filters">
-        <div class="box filter-container" *ngIf="!filter.adHoc || filter.active.value" [ngClass]="{'on': filter.active.value}">
-            <div class="field has-addons">
-                <div class="control is-expanded" iaBalloon="{{ filter.description }}"
-                    iaBalloonPosition="up-left" iaBalloonLength="fit">
-                    <label class="label" [for]="'filter' + filter.corpusField.name">{{ filter.corpusField.displayName
-                        }}</label>
-                </div>
-                <p class="control">
-                    <button *ngIf="(filter.isDefault$ | async) === false" class="button icon filter-icon is-primary is-inverted is-round"
-                        (click)="filter.reset()" iaBalloon="Reset this filter to its default values"
-                        iaBalloonPosition="down-left">
-                        <i class="fa fa-trash"></i>
-                    </button>
-                    <button *ngIf="(filter.isDefault$ | async) === false"
-                        class="button icon filter-icon is-primary is-inverted is-round"
-                        [ngClass]="{'is-primary': filter.active.value}"
-                        (click)="filter.toggle()" iaBalloon="{{filter.active.value ? 'Disable this filter' : 'Enable this filter'}}"
-                        iaBalloonPosition="down-left">
-                        <i class="fa fa-filter"></i>
-                    </button>
-                </p>
-            </div>
-            <ng-container *ngIf="filter.adHoc">
-                <ia-ad-hoc-filter [filter]="filter" [queryModel]="queryModel"></ia-ad-hoc-filter>
-            </ng-container>
-            <ng-container *ngIf="!filter.adHoc" [ngSwitch]="filter.filterType">
-                <ia-boolean-filter *ngSwitchCase="'BooleanFilter'" [filter]="filter" [queryModel]="queryModel"></ia-boolean-filter>
-                <ia-date-filter *ngSwitchCase="'DateFilter'" [filter]="filter" [queryModel]="queryModel"></ia-date-filter>
-                <ia-multiple-choice-filter *ngSwitchCase="'MultipleChoiceFilter'" [filter]="filter" [queryModel]="queryModel"></ia-multiple-choice-filter>
-                <ia-range-filter *ngSwitchCase="'RangeFilter'" [filter]="filter" [queryModel]="queryModel"></ia-range-filter>
-            </ng-container>
+        <div class="block" *ngIf="!filter.adHoc || filter.active.value">
+            <ia-filter-box [filter]="filter" [queryModel]="queryModel"></ia-filter-box>
         </div>
     </ng-container>
 </div>

frontend/src/app/filter/filter-manager.component.scss

@@ -1,20 +0,0 @@
-@import "../../_utilities";
-
-.filter-container{
-    &:hover{
-        box-shadow: 0 0 0 1px $primary;
-    }
-    margin-bottom: 5px;
-}
-
-.filter-container.on{
-    box-shadow: 0 0 0 2px $primary;
-}
-
-.filter-icon {
-    border: none;
-}
-
-.control {
-    z-index: 20;
-}

frontend/src/app/filter/filter.module.ts

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
-import { AdHocFilterComponent } from './ad-hoc-filter.component';
-import { BooleanFilterComponent } from './boolean-filter.component';
-import { DateFilterComponent } from './date-filter.component';
+import { AdHocFilterComponent } from './ad-hoc-filter/ad-hoc-filter.component';
+import { BooleanFilterComponent } from './boolean-filter/boolean-filter.component';
+import { DateFilterComponent } from './date-filter/date-filter.component';
 import { FilterManagerComponent } from './filter-manager.component';
-import { MultipleChoiceFilterComponent } from './multiple-choice-filter.component';
-import { RangeFilterComponent } from './range-filter.component';
+import { MultipleChoiceFilterComponent } from './multiple-choice-filter/multiple-choice-filter.component';
+import { RangeFilterComponent } from './range-filter/range-filter.component';
 import { SearchService } from '../services';
 import { SliderModule } from 'primeng/slider';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { CheckboxModule } from 'primeng/checkbox';
+import { FilterBoxComponent } from './filter-box/filter-box.component';
 
 
 
@@ -25,6 +26,7 @@ import { CheckboxModule } from 'primeng/checkbox';
         FilterManagerComponent,
         MultipleChoiceFilterComponent,
         RangeFilterComponent,
+        FilterBoxComponent,
     ],
     imports: [
         CheckboxModule,

frontend/src/app/filter/index.ts

@@ -1,6 +1,6 @@
 export * from './base-filter.component';
-export * from './boolean-filter.component';
-export * from './date-filter.component';
+export * from './boolean-filter/boolean-filter.component';
+export * from './date-filter/date-filter.component';
 export * from './filter-manager.component';
-export * from './multiple-choice-filter.component';
-export * from './range-filter.component';
+export * from './multiple-choice-filter/multiple-choice-filter.component';
+export * from './range-filter/range-filter.component';

frontend/src/app/filter/multiple-choice-filter.component.scss → frontend/src/app/filter/multiple-choice-filter/multiple-choice-filter.component.scss

@@ -1,4 +1,4 @@
-@import "../../_utilities";
+@import "../../../_utilities";
 
 ::ng-deep .p-multiselect-panel {
     max-width: 300px;
@@ -24,4 +24,4 @@
     max-width: 180px;
     vertical-align: top;
     flex-grow: 2;
-}
+}