atlasViewer.template.html

<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="mpobileMenuTabs" >
          <tab heading="Template">
            <signin-banner [darktheme] = "darktheme" signinWrapper></signin-banner>
          </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>
            <ng-template #dockedContainer>
            </ng-template>
          </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>
      </div>
    </div>
  </ng-template>
</ng-container>


<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>
    <tab heading="KG ToS">
      <div class="mt-2">
        <kgtos-component>
        </kgtos-component>
      </div>
    </tab>
  </tabset>
</ng-template>
<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>

<ng-template #cookieAgreementComponent>
  <cookie-agreement>
  </cookie-agreement>

  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="cookieClickedOk()">Ok</button>
  </div>
</ng-template>

<!-- 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>
      </menu-icons>
      <signin-banner signinWrapper>
      </signin-banner>
    </div>
  
    <layout-floating-container
      zIndex = "9"
      #floatingOverlayContainer>
      <div floatingContainerDirective>
  
      </div>
      
      <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="onhoverSegmentForFixed$ | async; let onhoverSegmentFixed"
            (click)="searchRegion([onhoverSegmentFixed])"
            class="ws-no-wrap text-left pe-all btn btn-sm btn-secondary btn-block"
            data-toggle="tooltip" 
            data-placement="top" 
            [title]="onhoverSegmentFixed.name">
            Search KG for {{ onhoverSegmentFixed.name }}
          </div>
  
          <div
            *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">
            Search KG for {{ selectedRegions && selectedRegions.length }} selected regions
          </div>
          
          <div
            class="p-2 text-muted"
            *ngIf="!(onhoverSegmentForFixed$ | async) && (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="onhoverSegment$ | async; let onhoverSegment" 
          contextualBlock>
          {{ onhoverSegment.name }} <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>
    </div>
  </div>
</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>
        </div>
        
      </div>
    </div>
    <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>