src/app/modules/left-sidebar/left-sidebar.component.ts
The left sidebar
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-left-sidebar |
| styleUrls | ./left-sidebar.component.scss |
| templateUrl | ./left-sidebar.component.html |
Properties |
|
Methods |
Inputs |
HostBindings |
constructor(page: PageState, model: ModelState, registration: RegistrationState)
|
||||||||||||
|
Parameters :
|
| modalClosed | |
Type : boolean
|
|
Default value : false
|
|
|
Whether or not the initial registration modal has been closed |
|
| class |
Type : "ccf-left-sidebar"
|
Default value : 'ccf-left-sidebar'
|
|
HTML class name |
| updateExtractionSiteTooltip | ||||||||
updateExtractionSiteTooltip(item: VisibilityItem | undefined)
|
||||||||
|
Updates extraction site tooltip to either the VisibilityItem passed in's tooltip property, or an empty string if undefined. undefined.
Parameters :
Returns :
void
|
| Readonly clsName |
Type : string
|
Default value : 'ccf-left-sidebar'
|
Decorators :
@HostBinding('class')
|
|
HTML class name |
| extractionSiteTooltip |
Type : string
|
Default value : ''
|
|
Variable that keeps track of the extraction site tooltip to display on the stage when hovered. |
| Readonly organSelected$ |
Default value : this.model.organ$.pipe(map((organ) => (organ === undefined ? false : true)))
|
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { map } from 'rxjs/operators';
import { VisibilityItem } from '../../core/models/visibility-item';
import { ModelState } from '../../core/store/model/model.state';
import { PageState } from '../../core/store/page/page.state';
import { RegistrationState } from '../../core/store/registration/registration.state';
/**
* The left sidebar
*/
@Component({
selector: 'ccf-left-sidebar',
templateUrl: './left-sidebar.component.html',
styleUrls: ['./left-sidebar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LeftSidebarComponent {
/** HTML class name */
@HostBinding('class') readonly clsName = 'ccf-left-sidebar';
/** Whether or not the initial registration modal has been closed */
@Input() modalClosed = false;
readonly organSelected$ = this.model.organ$.pipe(map((organ) => (organ === undefined ? false : true)));
/**
* Variable that keeps track of the extraction site tooltip to display on
* the stage when hovered.
*/
extractionSiteTooltip = '';
constructor(
readonly page: PageState,
readonly model: ModelState,
readonly registration: RegistrationState,
) {}
/**
* Updates extraction site tooltip to either the VisibilityItem passed in's
* tooltip property, or an empty string if undefined.
*
* @param item The VisibilityItem which we want to show the tooltip of, or
* undefined.
*/
updateExtractionSiteTooltip(item: VisibilityItem | undefined): void {
if (item?.tooltip) {
this.extractionSiteTooltip = item.tooltip;
} else {
this.extractionSiteTooltip = '';
}
}
}
<div class="scroll-wrapper">
<div class="container">
<mat-expansion-panel class="anatomical-structures-menu" [expanded]="organSelected$ | async">
<mat-expansion-panel-header class="expansion-header">
<mat-panel-title
class="expansion-title"
matTooltip="Use opacity icons to change visibility of anatomical structures"
>Anatomical Structures</mat-panel-title
>
</mat-expansion-panel-header>
<div class="expansion-content">
<ccf-visibility-menu
[items]="$any(model.anatomicalStructures$ | async) ?? []"
(itemsChange)="model.setAnatomicalStructures($event)"
>
</ccf-visibility-menu>
</div>
</mat-expansion-panel>
<mat-divider></mat-divider>
<mat-expansion-panel class="extraction-menu" [expanded]="organSelected$ | async">
<mat-expansion-panel-header class="expansion-header">
<mat-panel-title
matTooltip="Some organs have predefined landmarks to guide manual tissue registration--you can turn these on/off."
class="expansion-title"
>Landmarks</mat-panel-title
>
</mat-expansion-panel-header>
<div *ngIf="organSelected$ | async" class="expansion-content">
<ccf-extraction-set-dropdown
[sets]="$any(model.extractionSets$ | async)"
(setChange)="model.setExtractionSites($event.sites)"
#dropdown
>
</ccf-extraction-set-dropdown>
<ccf-visibility-menu
[items]="$any(model.extractionSites$ | async)"
(itemsChange)="model.setExtractionSites($event)"
(hover)="updateExtractionSiteTooltip($event)"
>
</ccf-visibility-menu>
</div>
</mat-expansion-panel>
<div class="extraction-site-tooltip mat-elevation-z8" *ngIf="extractionSiteTooltip.length > 0">
{{ extractionSiteTooltip }}
</div>
</div>
</div>
./left-sidebar.component.scss
:host {
display: block;
height: calc(100% - 2.5rem);
margin-top: 1rem;
margin-bottom: 1.5rem;
.scroll-wrapper {
overflow-y: scroll;
height: 100%;
margin-right: 0.375rem;
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 0.75rem;
}
.container {
display: flex;
flex-direction: column;
margin-left: 1.5rem;
margin-right: 0.375rem;
min-height: 100%;
mat-divider {
border-top-width: 3px;
}
.ccf-organ-selector {
margin-top: 1.5rem;
}
.organ-sliders {
.slider-label {
font-weight: 600;
}
display: flex;
height: 3rem;
align-items: center;
}
mat-expansion-panel {
box-shadow: none;
mat-expansion-panel-header {
.expansion-title {
font-size: 1rem;
font-weight: 600;
}
}
}
::ng-deep .mat-expansion-panel-body {
padding: 0;
}
.extraction-menu,
.anatomical-structures-menu {
::ng-deep .expansion-header {
-webkit-user-select: none;
-moz-user-select: none;
padding: 0;
font-weight: bold;
height: 3rem;
.mat-expansion-indicator {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
width: 24px;
}
}
.expansion-content {
margin-bottom: 0.75rem;
text-align: center;
margin-top: 1.75rem;
.expansion-placeholder {
width: 100%;
font-size: 0.9rem;
font-weight: 400;
}
}
}
.extraction-site-tooltip {
position: absolute;
top: 4rem;
left: 27rem;
width: 21rem;
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid;
z-index: 2;
}
}
}
.filler {
flex-grow: 1;
}
}