File
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
changeTab
|
changeTab(tabIndex: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| tabIndex |
number
|
No
|
|
|
isAllSelected
|
isAllSelected()
|
|
|
|
|
|
masterToggle
|
masterToggle()
|
|
|
|
|
|
componentActive
|
Type : number
|
Default value : 0
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : ['select', 'name', 'version']
|
|
|
|
Public
ga
|
Type : GoogleAnalyticsService
|
|
|
|
omapdisplayedColumns
|
Type : string[]
|
Default value : [
'select',
'Organs',
'Multiplexed antibody-based imaging method',
'Tissue presevation method',
'OMAP-ID',
'Version',
]
|
|
|
|
omapOrgans
|
Type : string[]
|
Default value : []
|
|
|
|
omapselection
|
Default value : new SelectionModel<SheetDetails>(true, [])
|
|
|
|
omapSheetOptions
|
Type : SheetDetails[]
|
Default value : []
|
|
|
Sheet configs of Omap config file
|
|
onClose
|
Type : OrganTableOnClose
|
Default value : {
organs: false,
cache: true,
}
|
|
|
Data to emit when dialog is closed
|
|
organs
|
Type : string[]
|
Default value : []
|
|
|
|
selectedSheetOption
|
Type : string
|
Default value : ''
|
|
|
|
|
|
selection
|
Default value : new SelectionModel<SheetDetails>(true, [])
|
|
|
|
sheetOptions
|
Type : SheetDetails[]
|
Default value : []
|
|
|
|
|
|
window
|
Type : Window
|
Default value : window
|
|
|
|
|
Accessors
|
hasSomeOrgans
|
gethasSomeOrgans()
|
|
|
|
|
import { SelectionModel } from '@angular/cdk/collections';
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { ConfigService } from '../../app-config.service';
import { GaAction, GaCategory, GaOrgansInfo } from '../../models/ga.model';
import { OrganTableOnClose, OrganTableSelect, SheetDetails } from '../../models/sheet.model';
@Component({
selector: 'app-organ-table-selector',
templateUrl: './organ-table-selector.component.html',
styleUrls: ['./organ-table-selector.component.scss'],
})
export class OrganTableSelectorComponent {
/**
* Sheet configs
*/
sheetOptions: SheetDetails[] = [];
/**
* Sheet configs of Omap config file
*/
omapSheetOptions: SheetDetails[] = [];
/**
* Has some selected organs
*/
get hasSomeOrgans(): boolean {
if (!this.omapselection.isEmpty() || !this.selection.isEmpty()) {
return true;
}
return false;
}
/**
* Document window object
*/
window: Window = window;
/**
* Organ sheet selected
*/
selectedSheetOption = '';
organs: string[] = [];
omapOrgans: string[] = [];
getFromCache: boolean;
displayedColumns: string[] = ['select', 'name', 'version'];
omapdisplayedColumns: string[] = [
'select',
'Organs',
'Multiplexed antibody-based imaging method',
'Tissue presevation method',
'OMAP-ID',
'Version',
];
selection = new SelectionModel<SheetDetails>(true, []);
omapselection = new SelectionModel<SheetDetails>(true, []);
componentActive = 0;
/**
* Data to emit when dialog is closed
*/
onClose: OrganTableOnClose = {
organs: false,
cache: true,
};
dataSource!: MatTableDataSource<SheetDetails>;
omapdataSource!: MatTableDataSource<SheetDetails>;
constructor(
public configService: ConfigService,
public dialogRef: MatDialogRef<OrganTableSelectorComponent>,
@Inject(MAT_DIALOG_DATA) public data: OrganTableSelect,
public ga: GoogleAnalyticsService,
) {
this.configService.omapsheetConfiguration$.subscribe((sheetOptions) => {
this.omapSheetOptions = sheetOptions.filter((o) => o.name !== 'some');
this.omapdataSource = new MatTableDataSource(this.omapSheetOptions);
this.omapdataSource.data?.forEach((de: SheetDetails) => {
de.version?.forEach((v) => {
de.symbol = v.value;
});
});
});
this.configService.sheetConfiguration$.subscribe((sheetOptions) => {
this.sheetOptions = sheetOptions.filter((o) => o.name !== 'some');
this.dataSource = new MatTableDataSource(this.sheetOptions);
});
this.getFromCache = data.getFromCache;
this.onClose.cache = data.getFromCache;
this.organs = data.organs ? data.organs : [];
this.omapOrgans = data.omapOrgans ? data.omapOrgans : [];
this.dataSource.data.forEach((dataElement) => {
dataElement.version?.forEach((v) => {
dataElement.symbol = v.value;
});
});
this.organs.forEach((item) => {
this.dataSource.data.forEach((dataElement) => {
dataElement?.version?.forEach((v) => {
if (v.value === item) {
dataElement.symbol = item;
this.selection.select(dataElement);
}
});
});
});
this.omapOrgans.forEach((item) => {
this.omapdataSource.data.forEach((dataElement) => {
dataElement?.version?.forEach((v) => {
if (v.value === item) {
dataElement.symbol = item;
this.omapselection.select(dataElement);
}
});
});
});
}
addSheets() {
const ga_details: GaOrgansInfo = {
selectedOrgans: [],
numOrgans: 0,
};
this.organs = [];
this.selection.selected.map((item) => {
if (item.name === 'all') {
return;
}
if (item.symbol) {
this.organs.push(item.symbol);
ga_details.selectedOrgans.push({
organ: item.display,
version: item.symbol.split('-').slice(1).join('-'),
});
}
});
ga_details.numOrgans = ga_details.selectedOrgans.length;
if (this.data.isIntilalSelect === true) {
this.ga.event(GaAction.CLICK, GaCategory.NAVBAR, `SELECTED ORGANS INITIAL: ${JSON.stringify(ga_details)}`, 0);
} else {
this.ga.event(GaAction.CLICK, GaCategory.NAVBAR, `SELECTED ORGANS EDIT: ${JSON.stringify(ga_details)}`, 0);
}
const omapOrgans: string[] = [];
this.omapselection.selected.forEach((element) => {
omapOrgans.push(element.symbol ?? '');
});
this.dialogRef.close({
organs: this.organs,
cache: this.getFromCache,
omapOrgans: omapOrgans,
});
}
isAllSelected() {
const selection = this.componentActive === 0 ? this.selection : this.omapselection;
const dataSource = this.componentActive === 0 ? this.dataSource : this.omapdataSource;
const numSelected = selection.selected.length;
const numRows = dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
const selection = this.componentActive === 0 ? this.selection : this.omapselection;
const dataSource = this.componentActive === 0 ? this.dataSource : this.omapdataSource;
if (this.isAllSelected()) {
selection.clear();
return;
}
selection.select(...dataSource.data);
}
checkboxLabel(row?: SheetDetails): string {
if (!row) {
return `${this.isAllSelected() ? 'deselect' : 'select'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${(row.position ?? 0) + 1}`;
}
changeVersion(value: string, row: SheetDetails): void {
if (row.name === 'all') {
row.symbol = value;
this.selectByHraVersion(row);
} else {
row.symbol = value;
}
}
selectByHraVersion(row: SheetDetails): void {
const selectedVersion = row.symbol?.split('-')[1] ?? row.version?.slice(-1)[0].hraVersion;
this.dataSource.data.forEach((dataElement) => {
const version = dataElement.version?.find((v) => v.hraVersion?.includes(selectedVersion ?? ''));
if (version) {
dataElement.symbol = version.value;
this.selection.select(dataElement);
} else {
this.selection.deselect(dataElement);
}
});
}
selectRow(row: SheetDetails): void {
if (this.componentActive === 0) {
if (row.name === 'all') {
if (this.selection.isSelected(row)) {
this.selection.clear();
} else {
this.selectByHraVersion(row);
}
} else {
this.selection.toggle(row);
}
} else {
this.omapselection.toggle(row);
}
}
changeTab(tabIndex: number) {
this.componentActive = tabIndex;
}
}
<div class="selector-title-container">
<h2 class="title" mat-dialog-title>Select one or more ASCT+B Tables</h2>
<div class="toggle-container">
<mat-slide-toggle
[checked]="getFromCache"
color="primary"
(change)="getFromCache = !getFromCache"
matTooltip="Toggle to get data from Cache"
matTooltipPosition="below"
>
<span class="cache-slider">Cache</span>
</mat-slide-toggle>
</div>
</div>
<mat-tab-group
[selectedIndex]="componentActive"
(selectedIndexChange)="changeTab($event)"
[mat-stretch-tabs]="false"
[fitInkBarToContent]="false"
>
<mat-tab [tabIndex]="0" label="ASCT+B Tables">
<ng-template matTabContent>
<div class="table-container">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<caption class="sr-only">
Select one or more Organs
</caption>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef id="check-box">
<mat-checkbox
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selectRow(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef id="organ-name">Organs</th>
<td class="organ-name-label" mat-cell *matCellDef="let element">
{{ element.display }}
</td>
</ng-container>
<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef id="version">Version</th>
<td mat-cell *matCellDef="let element">
<div *ngIf="element.version.length > 1">
<mat-form-field class="version-dropdown" appearance="fill">
<mat-select (selectionChange)="changeVersion($event.value, element)" [(ngModel)]="element.symbol">
<mat-option *ngFor="let option of element.version" [value]="option.value">
{{ option.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="element.version.length === 1">
<mat-label
>{{ element.version[0].viewValue }} {{ changeVersion(element.version[0].value, element) }}</mat-label
>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
</ng-template>
</mat-tab>
<mat-tab [tabIndex]="1" label="OMAP">
<ng-template matTabContent>
<div class="table-container">
<table mat-table [dataSource]="omapdataSource" class="mat-elevation-z8">
<caption class="sr-only">
Select one or more Organs
</caption>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef id="check-box">
<mat-checkbox
(change)="$event ? masterToggle() : null"
[checked]="omapselection.hasValue() && isAllSelected()"
[indeterminate]="omapselection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selectRow(row) : null"
[checked]="omapselection.isSelected(row)"
[aria-label]="checkboxLabel(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="Organs">
<th mat-header-cell *matHeaderCellDef id="organ-name">Organs</th>
<td class="organ-name-label" mat-cell *matCellDef="let element">
{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="Multiplexed antibody-based imaging method">
<th mat-header-cell *matHeaderCellDef id="imagingMethod">Multiplexed antibody-based imaging method</th>
<td class="organ-name-label imaging-method" mat-cell *matCellDef="let element">
{{ element.imagingMethod }}
</td>
</ng-container>
<ng-container matColumnDef="Tissue presevation method">
<th mat-header-cell *matHeaderCellDef id="tissuePreservationMethod">Tissue presevation method</th>
<td class="organ-name-label" mat-cell *matCellDef="let element">
{{ element.tissuePreservationMethod }}
</td>
</ng-container>
<ng-container matColumnDef="OMAP-ID">
<th mat-header-cell *matHeaderCellDef id="omapId">OMAP-ID</th>
<td class="organ-name-label" mat-cell *matCellDef="let element">
{{ element.omapId }}
</td>
</ng-container>
<ng-container matColumnDef="Version">
<th mat-header-cell *matHeaderCellDef id="version">Version</th>
<td mat-cell *matCellDef="let element">
<div *ngIf="element.version.length > 1">
<mat-form-field class="version-dropdown" appearance="fill">
<mat-select (selectionChange)="changeVersion($event.value, element)" [(ngModel)]="element.symbol">
<mat-option *ngFor="let option of element.version" [value]="option.value">
{{ option.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="element.version.length === 1">
<mat-label>{{ element.version[0].viewValue }}</mat-label>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="omapdisplayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: omapdisplayedColumns"></tr>
</table>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
<div footer>
<div class="mt-2" class="button-container">
<button mat-flat-button color="primary" class="add-cancel-button" [mat-dialog-close]="onClose">Cancel</button>
<button mat-flat-button color="primary" class="add-cancel-button" [disabled]="!hasSomeOrgans" (click)="addSheets()">
Submit
</button>
</div>
</div>
.button-container {
width: 100%;
justify-content: space-between;
display: flex;
margin-top: 1rem;
height: 3.8rem;
padding: 0.5rem 1rem 0rem 1rem;
}
.version-dropdown {
position: relative;
top: 0.525rem;
}
.organ-name-label {
font-size: 0.9rem;
padding: unset;
}
.imaging-method {
padding-left: 0.5rem;
}
.select-deselect-all {
display: flex;
justify-content: space-between;
padding-bottom: 0.938rem;
}
.add-cancel-button {
border: 0.063rem solid rgb(196, 196, 196);
border-radius: 0.5rem !important;
}
.orgon-selection-box {
margin-bottom: 0;
}
.orgon-selection-button {
width: 100%;
}
::ng-deep .orgon-selection-box .mat-form-field-underline {
display: none;
}
.mat-table {
overflow-x: scroll;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0rem 0.625rem;
line-break: auto;
width: fit-content;
white-space: normal;
overflow: hidden;
vertical-align: middle;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.table-container {
margin-top: 0.625rem;
max-height: 18.75rem;
overflow: auto;
}
.selector-title-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 0.75rem;
padding: 0.5rem 1rem 0 1rem;
}
.title {
margin-bottom: 0rem !important;
}
.toggle-container {
display: flex;
align-items: center;
}
.cache-slider {
font-weight: 500;
}
mat-tab-group {
padding: 0rem 1rem 0rem 1rem;
::ng-deep mat-tab-header {
border-style: solid;
border-width: 0px 0px 1px 0px;
}
}
.version-dropdown ::ng-deep .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
padding-top: unset;
padding-bottom: unset;
// padding: 0.432rem 0;
min-height: 2.375rem;
}
th {
font-size: 0.8rem;
color: #7588a1;
font-weight: 400;
}
::ng-deep .mat-mdc-select-trigger .mat-mdc-select-value .mat-mdc-select-value-text {
padding: unset;
}
Legend
Html element with directive