factors.service.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { FACTORS } from 'src/app/mocks/mock-factors';
import { FACTORTREES } from 'src/app/mocks/mock-factortree';
import { FactorEntry } from 'src/app/models/factor-entry';
import { FactorEntryTree } from 'src/app/models/factor-entry-tree';
import { ComplexesSpeciesTree, AdvancedSearchQueryJsonModel } from 'src/app/models/postproc-component-classes';
import { environment } from '../../environments/environment';

/**
 * Service to retrieve factor-related information by calling the FactorController in cellx-web-rest
 */
@Injectable({
  providedIn: 'root'
})
export class FactorsService {

  private complexesSpeciesTreeSearchUrl: string = environment.complexSpeciesTreeSearchUrl;
  private complexesSpeciesTreeAllUrl: string = environment.complexSpeciesTreeAllUrl;
  private complexesSpeciesTreeAccessibleUrl: string = environment.complexSpeciesTreeAccessibleUrl;
  private complexesSpeciesTreePublicUrl: string = environment.complexSpeciesTreePublicUrl;
  private complexesSpeciesTreeGroupUrl: string = environment.complexSpeciesTreeGroupUrl;
  private complexesSpeciesTreeStudyUrl: string = environment.complexSpeciesTreeStudyUrl;

  constructor(private http: HttpClient) { }

  /**
   * Retrieve the mock factors
   * TODO: Create admin and public factor methods. Start with public
   * @mock
   * @deprecated
   */
  public getFactors(): Observable<FactorEntry[]> {
    return of(FACTORS);
  }

  /**
   * Retrieve the mock factor tree
   * @mock
   * @deprecated
   */
  public getFactorEntryTree(speciesName: String, complexes: String[]): Observable<FactorEntryTree> {
    return of(FACTORTREES.find(entry => entry.factorEntry.speciesName === speciesName && entry.factorEntry.complexes === complexes));
  }

  public getAdvancedSearchComplexesTree(queriesJsonUriEncoded: string): Observable<ComplexesSpeciesTree> {
    let params = new HttpParams();
    if(queriesJsonUriEncoded != null && queriesJsonUriEncoded != undefined){
      params = params.append('queries', queriesJsonUriEncoded);
    }
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreeSearchUrl, {withCredentials: true, params: params});
  }
  /**
   * Retrieve the accessible complexSpeciesTree from cellx-web-rest
   */
  public getAccessibleComplexesSpeciesTree(): Observable<ComplexesSpeciesTree> {
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreeAccessibleUrl, {withCredentials: true});
  }

  /**
   * Retrieve the public's complexSpeciesTree from cellx-web-rest
   */
  public getPublicComplexesSpeciesTree(): Observable<ComplexesSpeciesTree> {
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreePublicUrl, {withCredentials: true});
  }

  /**
   * Retrieve a group's complexSpeciesTree from cellx-web-rest
   */
  public getGroupComplexesSpeciesTree(labId: number): Observable<ComplexesSpeciesTree> {
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreeGroupUrl + `/${labId}`, {withCredentials: true});
  }

  /**
   * Retrieve a study's complexSpeciesTree from cellx-web-rest
   */
  public getStudyComplexesSpeciesTree(studyName: string): Observable<ComplexesSpeciesTree> {
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreeStudyUrl + `/${studyName}`, {withCredentials: true});
  }

  /**
   * Retrieve all complexSpeciesTree from cellx-web-rest
   */
  public getAllComplexesSpeciesTree(): Observable<ComplexesSpeciesTree> {
    return this.http.get<ComplexesSpeciesTree>(this.complexesSpeciesTreeAllUrl, {withCredentials: true});
  }
}

public-view.component.html

<ng-container *ngIf="fitViewComponentModel.pageComplexesSpeciesTree | async; else spinner">
  <mat-drawer-container [hasBackdrop]="true">
    <mat-drawer #drawer style="max-height: 100vh; width: fit-content;" mode="push">
      <div class="container-fluid" style="padding-top: 50px; ">
        <ng-container *ngIf="this.userPrincipal && this.userPrincipal.isAdmin()">
          <div class="row">
            <div class="col-xs-12">
              <mat-card style="margin-top: 10px;">
                <mat-card-title>
                  Admin Control
                </mat-card-title>
                <mat-card-content>
                  <mat-checkbox [(ngModel)]="this.adminViewEnabled" [checked]="this.adminViewEnabled"
                    [disabled]="false && (this.userPrincipal == null || this.userPrincipal == undefined)"
                    (change)="adminModeButtonClickEvent($event.checked)">Admin Curation View
                  </mat-checkbox>
                </mat-card-content>
              </mat-card>
            </div>
          </div>
        </ng-container>
        <div class="row">
          <div class="col-xs-12">
            <app-factor-table-filter [fullComplexSpeciesTree]="fitViewComponentModel.pageComplexesSpeciesTree"
              [uniqueFitTags]=" fitViewComponentModel.uniqueFitTags"
              [filteredDataSource]="fitViewComponentModel.filteredDataSource"
              [complexAndExperimentFilteredDataSource]="fitViewComponentModel.complexAndExperimentFilteredDataSource"
              [nonExperimentFilteredDataSource]="fitViewComponentModel.nonExperimentFilteredDataSource"
              [adminViewEnabled]="this.adminViewEnabled"
              (selectedStudiesAndSpeciesListChange)="fitViewComponentModel.selectedStudiesAndSpeciesListChangeHandler($event)"
              (selectedExperimentListChange)="fitViewComponentModel.selectedExperimentListChangeHandler($event)"
              (selectedTagListChange)="fitViewComponentModel.selectedTagListChangeHandler($event)">
            </app-factor-table-filter>
          </div>
        </div>
      </div>
    </mat-drawer>

    <mat-drawer-content style="min-height: 70vh;">
      <button mat-flat-button (click)="drawer.toggle()" color="primary" class="filter-button"
        [class.mat-elevation-z8]="true">
        Table Filtering
      </button>
      <div class="container-fluid">
        <div class="row">
          <div [ngClass]="fitViewComponentModel.selectedFitId ? 'col-xs-12 col-xl-7' : 'col-xs-12'" #fitTableView>
            <div id="app-factor-table" style="margin-left: 20px;">
              <app-factor-table (filteredDataSourceChange)="fitViewComponentModel.filterDataSourceChangeHandler($event)"
                (complexAndExperimentFilteredDataSourceChange)="fitViewComponentModel.complexAndExperimentFilteredDataSourceChangeHandler($event)"
                (nonExperimentFilteredDataSourceChange)="fitViewComponentModel.nonExperimentFilteredDataSourceChangeHandler($event)"
                (selectedFitIdChange)="fitViewComponentModel.selectedFitIdChangeHandler($event)"
                [selectedFitId]="fitViewComponentModel.selectedFitId"
                [complexesSpeciesTree]="fitViewComponentModel.pageComplexesSpeciesTree"
                [fitCurationEntryStackKey]="fitViewComponentModel.fitCurationEntryStackKey"
                [selectedStudiesAndSpeciesList]="fitViewComponentModel.selectedStudiesAndSpeciesList"
                [selectedExperimentList]="fitViewComponentModel.selectedExperimentList"
                [selectedTagList]="fitViewComponentModel.selectedTagList" [adminViewEnabled]="this.adminViewEnabled">
              </app-factor-table>
            </div>
          </div>
          <div class="col-xs-12 col-xl-5 left-divider" *ngIf="fitViewComponentModel.selectedFitId">
            <div id="app-fits-detail" [ngStyle]="screenWidth <= 1200 ? {'margin-left': '20px'} : {}">
              <app-fits-detail [fitId]="fitViewComponentModel.selectedFitId" [adminViewEnabled]="this.adminViewEnabled"
                (selectedFitIdChange)="fitViewComponentModel.selectedFitIdChangeHandler($event)"></app-fits-detail>
            </div>
          </div>
        </div>
      </div>
    </mat-drawer-content>
  </mat-drawer-container>
  <div class="get-curated-fits container-fluid" *ngIf="this.adminViewEnabled">
    <a mat-icon-button [color]="'primary'"
    [href]="this.apiRetrieveCuratedFits" target="_blank">
    <mat-icon style="vertical-align: middle;">cloud_download</mat-icon>&nbsp;<span>Download Curated Fit IDs</span>
  </a>
  </div>
</ng-container>


<ng-template #spinner>
  <div class="container-fluid" style="width: 100%; height: 500px !important; margin-top: 200px;">
    <!--TODO: Not completely centered. Fix-->
    <app-loading-indicator [size]=100 [color]="'primary'" [ellipsis]="false"
      [text]="'Retrieving data from the repository. Please wait'">
    </app-loading-indicator>
  </div>
</ng-template>

public-view.component.ts

import { Component, OnInit, OnDestroy, ChangeDetectorRef, HostListener } from '@angular/core';
import { FitsService } from 'src/app/services/fits.service';
import { Fit } from 'src/app/models/fit';
import { Observable, of, Subscription } from 'rxjs';
import { FactorEntry } from 'src/app/models/factor-entry';
import { FactorsService } from 'src/app/services/factors.service';
import { ComplexesSpeciesTree, ComplexesSpeciesEntry, ComplexesSpeciesStudyTree } from 'src/app/models/postproc-component-classes';
import { NavItem } from 'src/app/models/nav-item';
import { FitCurationStackService } from 'src/app/services/fit-curation-stack.service';
import { MatSnackBar } from '@angular/material';
import { CurationCommitSnackbarComponent } from 'src/app/components/app-module/cellx-interface-module/curation-commit-snackbar-component/curation-commit-snackbar-component.component';
import { FitViewComponentModel } from 'src/app/models/fits-view-component-model';
import { UserPrincipalService } from 'src/app/services/user-principal.service';
import { UserPrincipal } from 'src/app/models/user-principal';
import { shareReplay } from 'rxjs/operators';
import { FitDetailsService } from 'src/app/services/fit-details.service';
import { UniqueTagsService } from 'src/app/services/unique-tags.service';
import { environment } from 'src/environments/environment';

/**
 * PublicViewComponent
 *
 * Retrieve all public-level factors and pass to the FactorTreeComponent for visualization
 *
 */
@Component({
  selector: 'app-public-view',
  templateUrl: './public-view.component.html',
  styleUrls: ['./public-view.component.css']
})
export class PublicFitsViewComponent implements OnInit, OnDestroy {

  public userPrincipal: UserPrincipal;
  public adminViewEnabled: boolean;
  public apiRetrieveCuratedFits: string = environment.apiRetrieveCuratedFits;

  public fitViewComponentModel: FitViewComponentModel = new FitViewComponentModel("public-view");

  public screenWidth: any;
  public screenHeight: any;

  constructor(
    private userPrincipalService: UserPrincipalService,
    private factorsService: FactorsService,
    private fitCurationStackService: FitCurationStackService,
    private fitDetailsService: FitDetailsService,
    private uniqueTagsService: UniqueTagsService,
    private _snackBar: MatSnackBar
  ) { }

  ngOnInit() {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;

    this.userPrincipalService.userPrincipal$.subscribe(userPrincipal => {
      this.userPrincipal = userPrincipal;
      console.log(this.userPrincipal);
      this.adminViewEnabled = this.userPrincipal ? this.userPrincipal.isAdmin() : false;
      if (this.userPrincipal && this.userPrincipal.isAdmin()) {
        this.uniqueTagsService.setUniqueTags(this.fitDetailsService.getAllUniqueTags().pipe(shareReplay()));
        this.uniqueTagsService.uniqueTags$.subscribe(uniqueTagsObservable => this.fitViewComponentModel.uniqueFitTags = uniqueTagsObservable);
      }
    });

    this.fitViewComponentModel.pageComplexesSpeciesTree = this.factorsService.getPublicComplexesSpeciesTree().pipe(shareReplay());
    this.fitViewComponentModel.ngOnInit(this.fitCurationStackService, this._snackBar);
    console.log(this.fitViewComponentModel.selectedFitId);

  }

  ngOnDestroy(): void {
    this.fitViewComponentModel.ngOnDestroy(this._snackBar);
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;
  }


  adminModeButtonClickEvent($event_clicked): void {
    if (this.adminViewEnabled == false) {
      this.fitCurationStackService.clearFitCurationEntryStack(this.fitViewComponentModel.fitCurationEntryStackKey, false);
      this._snackBar.dismiss();
    }
  }
}