File
Implements
|
treeData
|
Type : TNode[]
|
Default value : []
|
|
|
|
legends
|
Type : Legend[]
|
Default value : []
|
|
|
import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { BimodalData } from '../../models/bimodal.model';
import { Legend } from '../../models/legend.model';
import { Error } from '../../models/response.model';
import { CompareData } from '../../models/sheet.model';
import { TNode } from '../../models/tree.model';
import { LegendService } from './legend.service';
import { delay } from 'rxjs';
@Component({
selector: 'app-legend',
templateUrl: './legend.component.html',
styleUrls: ['./legend.component.scss'],
})
export class LegendComponent implements OnInit, OnChanges {
legends: Legend[] = [];
@Input() treeData: TNode[] = [];
@Input() bimodalData!: BimodalData;
@Input() compareData: CompareData[] = [];
@Input() error!: Error;
constructor(public ls: LegendService) {}
ngOnInit(): void {
this.ls.legendData$.pipe(delay(0)).subscribe((data) => {
if (data.length) {
this.legends = data;
}
});
}
ngOnChanges() {
if (this.treeData && this.bimodalData) {
if (this.treeData.length && this.bimodalData.nodes.length) {
this.ls.makeLegendData(this.treeData, this.bimodalData.nodes, this.compareData);
}
}
}
}
<div>
<mat-expansion-panel class="mepNoPadding" [expanded]="!error.hasError">
<mat-expansion-panel-header [expandedHeight]="'3.125rem'">
<mat-panel-title>
<div>
<strong> Legend </strong>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="py-1 legend-div">
<div *ngFor="let l of legends | orderBy: 'sortOrder'" class="py-1">
<div class="d-flex align-items-center">
<div
[ngStyle]="{
'background-color': l.style === 'stroke' ? 'transparent' : l.color,
border: l.style === 'stroke' ? '3px solid ' + l.color : 'none',
'border-style': l.style === 'stroke' ? 'dotted' : 'none'
}"
[ngClass]="{
rect:
l.name === 'Protein Presence' ||
l.name === 'Protein Absence' ||
l.name === 'AS-AS, AS-CT, CT-BM Paths' ||
l.name === 'Intermediate Protein',
circle:
l.name === 'Gene Biomarkers' ||
(!l.bmType &&
l.name !== 'Protein Presence' &&
l.name !== 'Protein Absence' &&
l.name !== 'AS-AS, AS-CT, CT-BM Paths' &&
l.name !== 'Intermediate Protein'),
protein: l.name === 'Protein Biomarkers',
lipids: l.name === 'Lipids Biomarkers',
metabolites: l.name === 'Metabolites Biomarkers',
proteoforms: l.name === 'Proteoforms Biomarkers',
'mr-2': true
}"
></div>
<span class="legend-label">{{ l.name }}</span>
</div>
</div>
</div>
</mat-expansion-panel>
</div>
@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;
}
.mat-expansion-panel-header:hover {
background-color: darken($color: $secondary, $amount: 8%) !important;
}
.circle {
height: 0.9375rem;
width: 0.9375rem;
border-radius: 50%;
display: inline-block;
}
.rect {
height: 0.125rem;
width: 0.9375rem;
display: inline-block;
}
.protein {
height: 1.063rem;
width: 1.063rem;
background-image: url(../../../assets/legends/diamondSymbol.svg);
background-repeat: no-repeat;
background-position: -0.438rem -0.438rem;
background-color: unset !important;
}
.lipids {
height: 1.063rem;
width: 1.063rem;
background-image: url(../../../assets/legends/squareSymbol.svg);
background-repeat: no-repeat;
background-color: unset !important;
background-position: -0.438rem -0.438rem;
}
.metabolites {
height: 1.063rem;
width: 1.063rem;
background-image: url(../../../assets/legends/triangleSymbol.svg);
background-color: unset !important;
background-repeat: no-repeat;
background-position: -0.438rem -0.438rem;
}
.proteoforms {
height: 1.063rem;
width: 1.063rem;
background-image: url(../../../assets/legends/crossSymbol.svg);
background-color: unset !important;
background-repeat: no-repeat;
background-position: -0.438rem -0.438rem;
}
.legend-div {
max-height: 11.25rem;
overflow-y: auto;
.legend-label {
padding-left: 0.5rem;
letter-spacing: 0.1px;
font-size: 14px;
}
}
Legend
Html element with directive