Newer
Older
<ng-container *ngIf="meetsRequirement; else doesNotMeetReqTemplate">
<!-- if not mobile -->
<ng-template [ngIf]="!isMobile" [ngIfElse]="mobileTemplate">
<ng-container *ngTemplateOutlet="viewerBody">
</ng-container>
</ng-template>
<!-- if mobile -->
<ng-template #mobileTemplate>
<mat-sidenav-container
(backdropClick)="changeMenuState({close: true})"
class="w-100 h-100">
<mat-sidenav
#sidenav
[fixedInViewport]="true"
[disableClose]="true"
[opened]="sidePanelOpen$ | async"
class="mobileNavigationPanel p-2"
[ngStyle]="{'background-color': darktheme? '#404040' : '#F2F2F2'}" >
<!-- 'absorbs' the auto-focus behavior -->
<button mat-button style="height: 0; position: absolute;"></button>
<logo-container class="logoContainerMobile"></logo-container>
<tabset #mobileMenuTabs [justified]="true" class="mobileMenuTabs" >
<tab heading="Template">
<signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
<layout-floating-container *ngIf="this.nehubaContainer && this.nehubaContainer.nehubaViewer">
<ui-status-card
[selectedTemplate]="selectedTemplate"
[isMobile]="isMobile"
[onHoverSegmentName]="this.nehubaContainer.onHoverSegmentName$ | async"
[nehubaViewer]="this.nehubaContainer.nehubaViewer">
</ui-status-card>
</layout-floating-container>
</tab>
<tab heading="Containers">
<menu-icons iconWrapper hidden #MenuIcons>
</menu-icons>
<panel-component>
<div class="m-2" heading>
Layer Browser
</div>
<div class="m-2" body>
<layer-browser></layer-browser>
</div>
</panel-component>
</tab>
</tabset>
</mat-sidenav>
<mat-sidenav-content>
<ng-container *ngTemplateOutlet="viewerBody">
</ng-container>
</mat-sidenav-content>
</mat-sidenav-container>
<div class="btnWrapper btnWrapper-lg menuButtonMobile m-2" (click)="changeMenuState()">
<div
class="shadow btn btn-sm btn-secondary rounded-circle">
<i class="fas fa-bars"></i>
Xiao Gui
committed
</div>
<ng-template #helpComponent>
<tabset>
<tab heading="Help">
<help-component>
</help-component>
</tab>
<tab heading="Settings">
<div class="mt-2">
<config-component>
</config-component>
</div>
</tab>
<tab heading="Privacy Policy">
<div class="mt-2">
<cookie-agreement>
</cookie-agreement>
</div>
</tab>
<div class="mt-2">
<kgtos-component>
</kgtos-component>
</div>
</tab>
<ng-template #signinModalComponent>
<signin-modal>
</signin-modal>
</ng-template>
<ng-template #kgToS>
<kgtos-component>
</kgtos-component>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="kgTosClickedOk()">Ok</button>
</div>
</ng-template>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="cookieClickedOk()">Ok</button>
</div>
<!-- atlas template -->
<ng-template #viewerBody>
<div class="atlas-container" helpdirective>
<ui-nehuba-container (contextmenu)="nehubaClickHandler($event)">
</ui-nehuba-container>
<div *ngIf="!isMobile" bannerWrapper>
<menu-icons iconWrapper *ngIf="selectedTemplate">
<div *ngIf="!selectedTemplate"></div>
<signin-banner signinWrapper [ngStyle]="{'margin-right': !selectedTemplate? '20px': ''}">
</signin-banner>
</div>
<layout-floating-container
#floatingOverlayContainer>
<div floatingContainerDirective>
<panel-component class="shadow" fixedMouseContextualContainerDirective #rClContextMenu>
<div heading>
<h5 class="pe-all p-2 m-0">
What's here?
</h5>
</div>
<div body>
<div
*ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 || (selectedRegions$ | async)?.length > 0"
class="p-2">
Search for data relating to:
</div>
*ngFor="let onhoverSegmentFixed of (onhoverSegmentsForFixed$ | async)"
class="ws-no-wrap text-left pe-all btn btn-sm btn-secondary btn-block mt-0"
data-toggle="tooltip"
data-placement="top"
[title]="onhoverSegmentFixed.name">
<small class="text-semi-transparent">(hovering)</small> {{ onhoverSegmentFixed.name }}
*ngIf="(selectedRegions$ | async)?.length > 0 && (selectedRegions$ | async); let selectedRegions"
(click)="searchRegion(selectedRegions)"
class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
<ng-container *ngIf="selectedRegions.length > 1">
<small class="text-semi-transparent">(selected)</small> {{ selectedRegions.length }} selected regions
</ng-container>
<ng-container *ngIf="selectedRegions.length === 1">
<small class="text-semi-transparent">(selected)</small> {{ selectedRegions[0].name }}
</ng-container>
*ngIf="(onhoverSegmentsForFixed$ | async)?.length === 0 && (selectedRegions$ | async)?.length === 0">
Right click on a parcellation region or select parcellation regions to search KG for associated datasets.
</div>
<ng-template #noRegionSelected>
<div
(click)="searchRegion()"
class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
No region selected. Search KG for all datasets in this template space.
</div>
</ng-template>
</div>
</panel-component>
<div floatingMouseContextualContainer floatingMouseContextualContainerDirective>
<div
*ngIf="onhoverLandmark$ | async"
contextualBlock>
{{ onhoverLandmark$ | async }} <i><small class = "mute-text">{{ toggleMessage }}</small></i>
</div>
<div
*ngIf="onhoverSegments$ | async; let onhoverSegments"
<div
*ngFor="let segment of onhoverSegments"
[innerHtml]="segment | transformOnhoverSegment">
</div>
<i><small class = "mute-text">{{ toggleMessage }}</small></i>
</div>
<!-- TODO Potentially implementing plugin contextual info -->
</div>
<div toastContainer>
<div toastDirective>
</div>
</div>
</layout-floating-container>
<div pluginFactoryDirective>
</ng-template>
<!-- does not meet req template -->
<ng-template #doesNotMeetReqTemplate>
<div class="d-flex flex-column" minReq *ngIf="!meetsRequirement">
<div class="jumbotron bg-light text-center mb-0">
<div>
<h1 class="mb-3">
<i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
</h1>
<p>
We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google Chrome</a>
or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox)</a> for viewing the interactive viewer.
</p>
<div class="col-6 d-inline-block text-left">
<readmore-component
[collapsedHeight]="0">
<markdown-dom [markdown]="constantsService.minReqExplaner">
</markdown-dom>
</readmore-component>
<ng-container *ngFor="let preview of unsupportedPreviews; let idx = index">
<div [hidden]="idx !== unsupportedPreviewIdx" class="text-center mb-3" imageContainer [style.backgroundImage]="'url(' + preview.previewSrc + ')'" >
<div class="mt-2 card d-inline-block displayCard">
<div class="card-body">
{{ preview.text }}
</div>
</div>
</div>
</ng-container>
</div>
</ng-template>
<ng-template #publications >
<reference-toast-component *ngIf="selectedTemplate['properties'] || selectedParcellation['properties']"
[templateName] = "selectedTemplate['name']? selectedTemplate['name'] : null"
[parcellationName] = "selectedParcellation['name']? selectedParcellation['name'] : null"
[templateDescription] = "selectedTemplate['properties'] && selectedTemplate['properties']['description']? selectedTemplate['properties']['description'] : null"
[parcellationDescription] = "selectedParcellation['properties'] && selectedParcellation['properties']['description']? selectedParcellation['properties']['description'] : null"
[templatePublications] = "selectedTemplate['properties'] && selectedTemplate['properties']['publications']? selectedTemplate['properties']['publications']: null"
[parcellationPublications] = "selectedParcellation['properties'] && selectedParcellation['properties']['publications']? selectedParcellation['properties']['publications']: null"
[parcellationNifti] = "selectedParcellation['properties'] && selectedParcellation['properties']['nifti']? selectedParcellation['properties']['nifti'] : null"
[templateExternalLink] ="selectedTemplate['properties'] && selectedTemplate['properties']['externalLink']? selectedTemplate['properties']['externalLink']: null"
[parcellationExternalLink] ="selectedParcellation['properties'] && selectedParcellation['properties']['externalLink']? selectedParcellation['properties']['externalLink']: null">
</reference-toast-component>