Impemented a filter component for filtering and reordering all micro-…

…synteny tracks, thus deprecating the order and regexp components previously used for these tasks. This required updating the left slider component to support switching between sub components. The left slider was as updated to no longer require the parent component to have explicit knowledge of its state. Lastly, a button was added to the header in the genes view to toggle the new filter component.

client/src/app/gene/animations/toggle-slider.animation.ts

@@ -4,7 +4,7 @@ import { animate, state, style, transition, trigger }
 
 
 export enum SliderStates {
-  SLIDER_ACTIVE   = 'SLIDER_ACTIVE',
+  SLIDER_ACTIVE = 'SLIDER_ACTIVE',
   SLIDER_INACTIVE = 'SLIDER_INACTIVE'
 }
 

client/src/app/gene/components/forms/filters/filters.component.html

@@ -0,0 +1,22 @@
+<form id="search-parameters" (ngSubmit)="submit()">
+  <fieldset id="micro-filters">
+    <legend>Micro-Synteny<a id="micro-help" class="float-right" (click)="microHelp=!microHelp"><span class="fa fa-question-circle"></span></a></legend>
+    <div class="form-group">
+      <label for="regexp">Filter by name</label>
+      <input class="form-control" type="text" id="regexp" name="regexp"
+        (input)="updateRegexp($event.target.value)"
+        [ngModel]="currentRegexp|async">
+      <small class="form-text text-muted">A regular expression</small>
+      <p class="help-block" *ngIf="microHelp">A regular expression used to filter the micro-synteny tracks by name.</p>
+    </div>
+    <div class="form-group">
+      <label for="order">Track order</label>
+      <select class="form-control" id="order" name="order"
+          (change)="updateOrder($event.target.value)"
+          [ngModel]="(selectedOrderAlgorithm|async).id">
+        <option *ngFor="let alg of orderAlgorithms" [value]="alg.id">{{alg.name}}</option>
+      </select>
+      <p class="help-block" *ngIf="microHelp">What order the micro-synteny tracks should be displayed in.</p>
+    </div>
+  </fieldset>
+</form>

client/src/app/gene/components/forms/filters/filters.component.ts

@@ -0,0 +1,40 @@
+// Angular
+import { Component } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+// app
+import { ORDER_ALGORITHMS } from '@gcv/gene/algorithms';
+import { Algorithm } from '@gcv/gene/models';
+import { FilterService } from '@gcv/gene/services';
+
+
+@Component({
+  selector: 'filters',
+  templateUrl: './filters.component.html',
+})
+export class FiltersComponent {
+
+  orderAlgorithms = ORDER_ALGORITHMS;
+  currentRegexp: Observable<string>;
+  selectedOrderAlgorithm: Observable<Algorithm>;
+
+  microHelp = false;
+
+  private _destroy: Subject<boolean> = new Subject();
+
+  constructor(private _filterService: FilterService) {
+    this.currentRegexp = this._filterService.getRegexp();
+    this.selectedOrderAlgorithm = this._filterService.getOrderAlgorithm();
+  }
+
+  // public
+
+  updateRegexp(regexp: string): void {
+    this._filterService.setRegexp(regexp);
+  }
+
+  updateOrder(id: string): void {
+    this._filterService.setOrder(id);
+  }
+
+}

client/src/app/gene/components/forms/filters/index.ts

@@ -0,0 +1 @@
+export * from './filters.component';

client/src/app/gene/components/forms/index.ts

@@ -0,0 +1,10 @@
+import { FiltersComponent } from './filters';
+import { ParamsComponent } from './params';
+
+export const components: any[] = [
+  FiltersComponent,
+  ParamsComponent,
+];
+
+export * from './filters';
+export * from './params';

client/src/app/gene/components/forms/params/index.ts

@@ -0,0 +1 @@
+export * from './params.component';

client/src/app/gene/components/params.component.ts → client/src/app/gene/components/forms/params/params.component.ts

@@ -1,19 +1,19 @@
 // Angular
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
-import { Subject } from "rxjs";
-import { takeUntil } from "rxjs/operators";
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 // app
-import { AppConfig } from "@gcv/app.config";
-import { ALIGNMENT_ALGORITHMS } from "@gcv/gene/algorithms";
+import { AppConfig } from '@gcv/app.config';
+import { ALIGNMENT_ALGORITHMS } from '@gcv/gene/algorithms';
 import { LINKAGES } from '@gcv/gene/constants';
 import { AlignmentParams, BlockParams, ClusteringParams, Params, QueryParams,
-  SourceParams } from "@gcv/gene/models/params";
-import { ParamsService } from "@gcv/gene/services";
+  SourceParams } from '@gcv/gene/models/params';
+import { ParamsService } from '@gcv/gene/services';
 
 @Component({
-  selector: "params",
-  templateUrl: "./params.component.html",
+  selector: 'params',
+  templateUrl: './params.component.html',
 })
 export class ParamsComponent implements OnDestroy, OnInit {
 
@@ -37,7 +37,7 @@ export class ParamsComponent implements OnDestroy, OnInit {
 
   // form data
   linkages = LINKAGES;
-  sources = AppConfig.SERVERS.filter((s) => s.hasOwnProperty("microSearch"));
+  sources = AppConfig.SERVERS.filter((s) => s.hasOwnProperty('microSearch'));
   algorithms = ALIGNMENT_ALGORITHMS;
 
   // emits when the component is destroyed
@@ -62,8 +62,6 @@ export class ParamsComponent implements OnDestroy, OnInit {
       'alignmentGroup',
       'getAlignmentParams');
     this._initializeGroup(SourceParams, 'sourcesGroup', 'getSourceParams');
-    // submit the updated form
-    this.submit();
   }
 
   ngOnDestroy(): void {

client/src/app/gene/components/gene.component.html

@@ -1,5 +1,3 @@
-<left-slider [open]="showLeftSlider|async" (onClose)="closeLeftSlider()">
-  <params (valid)="closeLeftSlider()" (invalid)="openLeftSlider()"></params>
-</left-slider>
+<left-slider></left-slider>
 <div class="viewers" [gcvGoldenLayout]="layoutComponents" [config]="layoutConfig">
 <div [gcvTooltipFactory]="tooltipComponents"></div>

client/src/app/gene/components/gene.component.ts

@@ -5,7 +5,7 @@ import { takeUntil } from 'rxjs/operators';
 // app
 import { GoldenLayoutDirective, TooltipFactoryDirective }
   from '@gcv/gene/directives';
-import { LayoutService, MicroTracksService } from '@gcv/gene/services';
+import { MicroTracksService } from '@gcv/gene/services';
 import * as fromDetails from './details';
 import * as fromTooltips from './tooltips';
 import * as fromViewers from './viewers';
@@ -38,15 +38,10 @@ export class GeneComponent implements AfterViewInit, OnDestroy {
   tooltipComponents = [...fromTooltips.tooltipComponents];
   showLeftSlider: Observable<boolean>;
 
-  constructor(private _layoutService: LayoutService,
-              private _microTracksService: MicroTracksService) { }
+  constructor(private _microTracksService: MicroTracksService) { }
 
   // Angular hooks
 
-  ngOnInit(): void {
-    this.showLeftSlider = this._layoutService.getLeftSliderState();
-  }
-
   ngAfterViewInit(): void {
     this._microTracksService.getClusterIDs()
       .pipe(takeUntil(this._destroy))
@@ -125,13 +120,4 @@ export class GeneComponent implements AfterViewInit, OnDestroy {
     });
   }
 
-  // public
-
-  closeLeftSlider(): void {
-    this._layoutService.closeLeftSlider();
-  }
-
-  openLeftSlider(): void {
-    this._layoutService.openLeftSlider();
-  }
 }

client/src/app/gene/components/header-left.component.ts

@@ -1,5 +1,6 @@
 // Angular
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
 // app
 import { LayoutService } from '@gcv/gene/services';
 
@@ -15,17 +16,34 @@ import { LayoutService } from '@gcv/gene/services';
     }
   `],
   template: `
-    <a class="btn btn-outline-dark" role="button" (click)="toggleSlider()">Parameters</a>
+    <ul class="navbar-nav mr-auto">
+      <li>
+        <a [class.active]="(visible|async)&&(content|async)=='parameters'" class="btn btn-outline-dark mr-sm-2" role="button" (click)="toggleParameters()">Parameters</a>
+      </li>
+      <li>
+        <a [class.active]="(visible|async)&&(content|async)=='filters'" class="btn btn-outline-dark" role="button" (click)="toggleFilters()">Filters</a>
+      </li>
+    </ul>
   `,
 })
 export class HeaderLeftComponent {
 
-  constructor(private _layoutService: LayoutService) { }
+  visible: Observable<boolean>;
+  content: Observable<string>;
+
+  constructor(private _layoutService: LayoutService) {
+    this.visible = _layoutService.getLeftSliderState();
+    this.content = _layoutService.getLeftSliderContent();
+  }
 
   // public
 
-  toggleSlider(): void {
-    this._layoutService.toggleLeftSlider();
+  toggleParameters(): void {
+    this._layoutService.toggleLeftSliderContent('parameters');
+  }
+
+  toggleFilters(): void {
+    this._layoutService.toggleLeftSliderContent('filters');
   }
 
 }

client/src/app/gene/components/index.ts

@@ -1,19 +1,17 @@
 import { GeneComponent } from './gene.component';
 import { HeaderLeftComponent } from './header-left.component';
 import { LeftSliderComponent } from './left-slider.component';
-import { ParamsComponent } from './params.component';
 import * as fromDetails from './details';
-import * as fromShared from './shared';
+import * as fromForms from './forms';
 import * as fromTooltips from './tooltips';
 import * as fromViewers from './viewers';
 
 export const components: any[] = [
   GeneComponent,
   HeaderLeftComponent,
   LeftSliderComponent,
-  ParamsComponent,
   ...fromDetails.components,
-  ...fromShared.components,
+  ...fromForms.components,
   ...fromTooltips.components,
   ...fromViewers.components,
 ];
@@ -30,8 +28,7 @@ export const tooltipComponents: any[] = [
 export * from './gene.component';
 export * from './header-left.component';
 export * from './left-slider.component';
-export * from './params.component';
 export * from './details';
-export * from './shared';
+export * from './forms';
 export * from './tooltips';
 export * from './viewers';

client/src/app/gene/components/left-slider.component.html

@@ -1,5 +1,5 @@
 <!-- left slider -->
-<div id="left-slider" class="left-slider col-md-3" [@toggleSlider]='state'>
+<div id="left-slider" class="left-slider col-md-3" [@toggleSlider]='state|async'>
   <!-- close slider controls -->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="collapse navbar-collapse">
@@ -14,6 +14,10 @@
   </nav>
   <!-- scrollable content -->
   <div class="left-slider-content">
-    <ng-content></ng-content>
+    <div [ngSwitch]="content|async">
+      <params *ngSwitchCase="'parameters'" (valid)="close()" (invalid)="open()"></params>
+      <filters *ngSwitchCase="'filters'"></filters>
+      <div *ngSwitchDefault>No content selected</div>
+    </div>
   </div>
 </div>

client/src/app/gene/components/left-slider.component.ts

@@ -1,8 +1,10 @@
 // Angular
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges }
-  from '@angular/core';
+import { Component, Output, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 // App
 import { SliderStates, toggleSlider } from '@gcv/gene/animations';
+import { LayoutService } from '@gcv/gene/services';
 
 
 @Component({
@@ -11,26 +13,31 @@ import { SliderStates, toggleSlider } from '@gcv/gene/animations';
   styleUrls: [ './left-slider.component.scss' ],
   templateUrl: './left-slider.component.html',
 })
-export class LeftSliderComponent implements OnChanges {
-
-  @Input() open: boolean;
-  @Output() onClose = new EventEmitter<any>();
-
-  state = SliderStates.SLIDER_INACTIVE;
-
-  // Angular hooks
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.open) {
-      this.state = SliderStates.SLIDER_ACTIVE;
-    } else {
-      this.state = SliderStates.SLIDER_INACTIVE;
-    }
+export class LeftSliderComponent {
+
+  state: Observable<SliderStates>;
+  content: Observable<string>;
+
+  constructor(private _layoutService: LayoutService) {
+    this.state = _layoutService.getLeftSliderState()
+      .pipe(
+        map((showSlider) =>  {
+          if (showSlider) {
+            return SliderStates.SLIDER_ACTIVE;
+          }
+          return SliderStates.SLIDER_INACTIVE;
+        }),
+      );
+    this.content = _layoutService.getLeftSliderContent();
   }
 
   // public
 
   close(): void {
-    this.onClose.emit();
+    this._layoutService.closeLeftSlider();
+  }
+
+  open(): void {
+    this._layoutService.openLeftSlider();
   }
 }