src/app/modules/results-browser/tissue-section-vis/tissue-section-vis.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
selector | ccf-tissue-section-vis |
styleUrls | ./tissue-section-vis.component.scss |
templateUrl | ./tissue-section-vis.component.html |
Properties |
|
Methods |
Inputs |
HostBindings |
tissueSections | |
Type : TissueSectionResult[]
|
|
Tissue section data, used to determine which tissues to color on the graph |
totalTissueSections | |
Type : number
|
|
The total numebr of tissue sections, used for end label |
class |
Type : "ccf-tissue-section-vis"
|
Default value : 'ccf-tissue-section-vis'
|
HTML Class Name |
tissueSectionExists | ||||||
tissueSectionExists(sectionNumber: number)
|
||||||
Returns whether or not the given section number exists in the tissueSection array
Parameters :
Returns :
boolean
|
Readonly clsName |
Type : string
|
Default value : 'ccf-tissue-section-vis'
|
Decorators :
@HostBinding('class')
|
HTML Class Name |
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { TissueSectionResult } from 'ccf-database';
@Component({
selector: 'ccf-tissue-section-vis',
templateUrl: './tissue-section-vis.component.html',
styleUrls: ['./tissue-section-vis.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TissueSectionVisComponent {
/** HTML Class Name */
@HostBinding('class') readonly clsName = 'ccf-tissue-section-vis';
/** The total numebr of tissue sections, used for end label */
@Input() totalTissueSections!: number;
/** Tissue section data, used to determine which tissues to color on the graph */
@Input() tissueSections!: TissueSectionResult[];
/** Returns whether or not the given section number exists in the tissueSection array */
tissueSectionExists(sectionNumber: number): boolean {
if (this.tissueSections.filter((section) => section.sectionNumber === sectionNumber).length > 0) {
return true;
}
return false;
}
}
<div>0</div>
<div class="container">
<div
*ngFor="let item of [].constructor(totalTissueSections); let i = index"
class="line-tick"
[class.line-tick-visible]="tissueSectionExists(i + 1)"
></div>
<div class="x-axis"></div>
</div>
<div>{{ totalTissueSections }}</div>
./tissue-section-vis.component.scss
:host {
width: 100%;
height: 2.5rem;
padding: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
.container {
margin-right: 0.5rem;
margin-left: 0.5rem;
flex-grow: 1;
display: flex;
position: relative;
justify-content: space-evenly;
.line-tick {
height: 100%;
width: 1px;
z-index: 2;
}
.x-axis {
width: 100%;
height: 2px;
position: absolute;
top: calc(50% - 1px);
right: 0;
z-index: 1;
}
}
}