asctb-reporter
  1. Components
  2. FunctionsComponent

File

src/app/modules/functions/functions.component.ts

Metadata

selector app-functions
styleUrls ./functions.component.scss
templateUrl ./functions.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(store: Store, bms: BimodalService, ga: GoogleAnalyticsService)
Defined in src/app/modules/functions/functions.component.ts:35
Parameters :
Name Type Optional
store Store No
bms BimodalService No
ga GoogleAnalyticsService No

Inputs

error
Type : Error
Defined in src/app/modules/functions/functions.component.ts:33

Methods

changeOptions
changeOptions(type: string, field: string, event: MatSelectChange)
Defined in src/app/modules/functions/functions.component.ts:47
Parameters :
Name Type Optional
type string No
field string No
event MatSelectChange No
Returns : void
updateBimodal
updateBimodal()
Defined in src/app/modules/functions/functions.component.ts:57
Returns : void

Properties

bimodalBTypeOptions
Default value : bimodalBTypeOptions
Defined in src/app/modules/functions/functions.component.ts:29
bimodalConfig
Type : BimodalConfig
Defined in src/app/modules/functions/functions.component.ts:30
Public bms
Type : BimodalService
Defined in src/app/modules/functions/functions.component.ts:39
bmSizeOptions
Default value : bimodalBSizeOptions
Defined in src/app/modules/functions/functions.component.ts:26
config$
Type : Observable<BimodalConfig>
Decorators :
@Select(TreeState.getBimodalConfig)
Defined in src/app/modules/functions/functions.component.ts:35
ctSizeOptions
Default value : bimodalCTSizeOptions
Defined in src/app/modules/functions/functions.component.ts:28
faDna
Default value : faDna
Defined in src/app/modules/functions/functions.component.ts:31
Public ga
Type : GoogleAnalyticsService
Defined in src/app/modules/functions/functions.component.ts:40
sortOptions
Default value : bimodalSortOptions
Defined in src/app/modules/functions/functions.component.ts:27
Public store
Type : Store
Defined in src/app/modules/functions/functions.component.ts:38
 
import { Component, Input } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';
import { faDna } from '@fortawesome/free-solid-svg-icons';
import { Select, Store } from '@ngxs/store';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { Observable } from 'rxjs';
import { UpdateBimodalConfig } from '../../actions/tree.actions';
import {
  BimodalConfig,
  bimodalBSizeOptions,
  bimodalBTypeOptions,
  bimodalCTSizeOptions,
  bimodalSortOptions,
} from '../../models/bimodal.model';
import { GaAction, GaCategory } from '../../models/ga.model';
import { Error } from '../../models/response.model';
import { BimodalService } from '../../modules/tree/bimodal.service';
import { TreeState } from '../../store/tree.state';

@Component({
  selector: 'app-functions',
  templateUrl: './functions.component.html',
  styleUrls: ['./functions.component.scss'],
})
export class FunctionsComponent {
  bmSizeOptions = bimodalBSizeOptions;
  sortOptions = bimodalSortOptions;
  ctSizeOptions = bimodalCTSizeOptions;
  bimodalBTypeOptions = bimodalBTypeOptions;
  bimodalConfig!: BimodalConfig;
  faDna = faDna;

  @Input() error!: Error;

  @Select(TreeState.getBimodalConfig) config$!: Observable<BimodalConfig>;

  constructor(
    public store: Store,
    public bms: BimodalService,
    public ga: GoogleAnalyticsService,
  ) {
    this.config$.subscribe((config) => {
      this.bimodalConfig = config;
    });
  }

  changeOptions(type: string, field: string, event: MatSelectChange) {
    (this.bimodalConfig as unknown as Record<string, Record<string, unknown>>)[type][field] = event.value;
    this.updateBimodal();
    this.ga.event(
      GaAction.CLICK,
      GaCategory.CONTROLS,
      `Change Cell Type (CT) or Biomarker (BM) Options: ${field}:${event.value}.toLowerCase()`,
    );
  }

  updateBimodal() {
    this.store.dispatch(new UpdateBimodalConfig(this.bimodalConfig)).subscribe((states) => {
      const data = states.sheetState.data;
      const treeData = states.treeState.treeData;
      const bimodalConfig = states.treeState.bimodal.config;
      const sheetConfig = states.sheetState.sheetConfig;
      const omapConfig = states.treeState.omapConfig;
      const filteredProtiens = states.sheetState.filteredProtiens;
      if (data.length) {
        this.bms.makeBimodalData(data, treeData, bimodalConfig, false, sheetConfig, omapConfig, filteredProtiens);
      }
    });
  }
}

<div>
  <mat-expansion-panel class="mepNoPadding control-title" [expanded]="!error.hasError">
    <mat-expansion-panel-header [expandedHeight]="'3.125rem'">
      <mat-panel-title>
        <div>
          <strong> Cell Types </strong>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div class="py-1">
      <div class="d-flex justify-content-center align-items-center">
        <div class="pr-3 mt-1" #tooltip="matTooltip" matTooltip="Sort Cell Types">
          <mat-icon>sort_by_alpha</mat-icon>
        </div>
        <button
          [disabled]="error.hasError"
          mat-flat-button
          #tooltip="matTooltip"
          matTooltip="Select Order"
          matTooltipPosition="below"
          class="pt-2 w-100 function-button"
        >
          <mat-select
            [disabled]="error.hasError"
            (selectionChange)="changeOptions('CT', 'sort', $event)"
            [value]="(config$ | async)?.CT?.sort"
            [hideSingleSelectionIndicator]="true"
            [panelClass]="'cell-types-panel'"
          >
            <mat-option *ngFor="let option of sortOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </button>
      </div>
    </div>
    <div class="pt-3">
      <div class="d-flex justify-content-center align-items-center">
        <div class="pr-3 mt-1" #tooltip="matTooltip" matTooltip="Size Cell Types">
          <mat-icon>bubble_chart</mat-icon>
        </div>
        <button
          [disabled]="error.hasError"
          mat-flat-button
          #tooltip="matTooltip"
          matTooltip="Select Sizing"
          matTooltipPosition="below"
          class="pt-2 function-button"
        >
          <mat-select
            [disabled]="error.hasError"
            (selectionChange)="changeOptions('CT', 'size', $event)"
            [value]="(config$ | async)?.CT?.size"
            [hideSingleSelectionIndicator]="true"
            [panelClass]="'cell-types-panel'"
          >
            <mat-option *ngFor="let option of ctSizeOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </button>
      </div>
    </div>
  </mat-expansion-panel>

  <mat-expansion-panel class="mepNoPadding mt-4 control-title" [expanded]="!error.hasError">
    <mat-expansion-panel-header [expandedHeight]="'3.125rem'">
      <mat-panel-title>
        <div>
          <strong> Biomarkers </strong>
        </div>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div class="py-1">
      <div class="d-flex justify-content-center align-items-center">
        <div class="pr-3 mt-1" #tooltip="matTooltip" matTooltip="Sort Biomarkers">
          <mat-icon>sort_by_alpha</mat-icon>
        </div>
        <button
          [disabled]="error.hasError"
          mat-flat-button
          #tooltip="matTooltip"
          matTooltip="Select Order"
          matTooltipPosition="below"
          class="pt-2 function-button"
        >
          <mat-select
            [disabled]="error.hasError"
            (selectionChange)="changeOptions('BM', 'sort', $event)"
            [value]="(config$ | async)?.BM?.sort"
            [hideSingleSelectionIndicator]="true"
            [panelClass]="'cell-types-panel'"
          >
            <mat-option *ngFor="let option of sortOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </button>
      </div>
    </div>
    <div class="pt-3">
      <div class="d-flex justify-content-center align-items-center">
        <div class="pr-3 mt-1" #tooltip="matTooltip" matTooltip="Size Biomarkers">
          <mat-icon>bubble_chart</mat-icon>
        </div>
        <button
          [disabled]="error.hasError"
          mat-flat-button
          #tooltip="matTooltip"
          matTooltip="Select Sizing"
          matTooltipPosition="below"
          class="pt-2 function-button"
        >
          <mat-select
            [disabled]="error.hasError"
            (selectionChange)="changeOptions('BM', 'size', $event)"
            [value]="(config$ | async)?.BM?.size"
            [hideSingleSelectionIndicator]="true"
            [panelClass]="'cell-types-panel'"
          >
            <mat-option *ngFor="let option of bmSizeOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </button>
      </div>
    </div>
    <div class="pt-3">
      <div class="d-flex justify-content-center align-items-center">
        <div class="pr-3 mt-1" #tooltip="matTooltip" matTooltip="Select Biomarker Type">
          <fa-icon [icon]="faDna" class="px-1 biomarker-icon-type"></fa-icon>
        </div>
        <button
          [disabled]="error.hasError"
          mat-flat-button
          #tooltip="matTooltip"
          matTooltip="Select Biomarker Type"
          matTooltipPosition="below"
          class="pt-2 function-button"
        >
          <mat-select
            [disabled]="error.hasError"
            (selectionChange)="changeOptions('BM', 'type', $event)"
            [value]="(config$ | async)?.BM?.type"
            [hideSingleSelectionIndicator]="true"
            [panelClass]="'cell-types-panel'"
          >
            <mat-option *ngFor="let option of bimodalBTypeOptions" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </button>
      </div>
    </div>
    <div></div>
  </mat-expansion-panel>
</div>

./functions.component.scss 

@import './../../../assets/stylesheets/_colors.scss';

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: none;
}

.mat-expansion-panel-header:not(.compare) {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

.mat-expansion-panel-header {
  transition: all 0.3s;
  background-color: $secondary !important;
  padding-left: 0.9375rem !important;
  padding-right: 0.9375rem !important;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

.mat-expansion-panel-header:hover {
  background-color: darken($color: $secondary, $amount: 8%) !important;
}

.function-button {
  width: 100% !important;
  background-color: #f5f5f5;
  padding: 0 0.625rem 0 0.625rem !important;

  ::ng-deep {
    .mat-form-field {
      width: auto !important;
    }

    .mat-select-value {
      max-width: 100%;
      width: auto;
    }
  }
}

.biomarker-icon-type {
  font-size: 1.125rem;
}

.d-flex {
  gap: 1rem;
}

mat-select {
  letter-spacing: 0.1px;
  font-size: 14px;
  align-items: center;
}

::ng-deep {
  .cell-types-panel {
    left: 74px;
    position: fixed !important;
    width: 140px !important;
  }

  .mat-mdc-select-arrow-wrapper {
    margin: 14px;
  }
}

.control-title ::ng-deep .mat-mdc-select-trigger {
  .mat-mdc-select-value {
    width: 7rem;
    .mat-mdc-select-value-text {
      padding-left: 1rem;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""