viewerCmp.template.html

                <i class="sxplr-list-like-button-body-line text-muted">
                  (Not selectable at the moment)
                </i>
              </div>    
    
            </button>

          </ng-template>
        </ng-template>
        
      </ng-container>

      <ng-container *ngSwitchDefault>
        DEFAULT
      </ng-container>
    </ng-container>
  </ng-template>
</ng-template>


<!-- viewer state hover ctx menu -->
<ng-template #viewerStatusRegionCtxMenu let-data>
  <!-- hovered ROIs -->
  <ng-template ngFor [ngForOf]="data.metadata.hoveredRegions"
    let-region
    let-first="first">

    <mat-divider class="top-0" *ngIf="!first"></mat-divider>

    <button mat-button
      (click)="$event.ctrlKey ? toggleRoi(region) : selectRoi(region)"
      class="sxplr-list-like-button">
      
      <div class="sxplr-list-like-button-icon">
        <i class="fas fa-brain"></i>
      </div>

      <div class="sxplr-list-like-button-body">

        <span class="sxplr-list-like-button-body-line">
          {{ region.name }}
        </span>
        <span class="sxplr-list-like-button-body-line text-muted">
          Brain region
        </span>
      </div>    
    </button>

  </ng-template>
</ng-template>

<!-- general feature tmpl -->
<ng-template let-feature="feature" #selectedFeatureTmpl>
  <!-- TODO differentiate between features (spatial, regional etc) -->
  
  <sxplr-feature-view class="sxplr-z-2 mat-elevation-z2"
    [feature]="feature">

    <div header>
      <!-- back btn -->
      <button mat-button
        (click)="clearSelectedFeature()"
        [attr.aria-label]="ARIA_LABELS.CLOSE"
        class="sxplr-mb-2"
        >
        <i class="fas fa-chevron-left"></i>
        <span class="ml-1">
          Back
        </span>
      </button>
    </div>

  </sxplr-feature-view>
</ng-template>

<!-- general point tmpl -->
<ng-template let-view="view" #selectedPointTmpl>
  <sxplr-side-panel>
    <div class="sxplr-custom-cmp lighttheme" header>
      
      <!-- back btn -->
      <button mat-button
        (click)="clearPoint()"
        [attr.aria-label]="ARIA_LABELS.CLOSE"
        class="sxplr-mb-2"
        >
        <i class="fas fa-chevron-left"></i>
        <span class="ml-1">
          Back
        </span>
      </button>
    </div>
    <div title>
      {{ view.spatialObjectTitle }}
    </div>
    <div subtitle>
      {{ view.spatialObjectSubtitle }}
    </div>
  </sxplr-side-panel>
  <sxplr-point-assignment
    [point]="view.selectedPoint"
    [template]="view.selectedTemplate"
    [parcellation]="view.selectedParcellation"
    (clickOnRegion)="$event.event.ctrlKey ? toggleRoi($event.target) : selectRoi($event.target)">
  </sxplr-point-assignment>
</ng-template>

<!-- spatial search tmpls -->
<ng-template #spatialFeatureListTmpl let-view="view">
  <mat-card class="sxplr-pe-all"
    [ngClass]="{
      'sxplr-d-none': !(voiSwitch.switchState$ | async) || (voiFeatureEntryCmp.totals$ | async) === 0
    }">
    <mat-card-header>
      <mat-card-title>
        Anchored to current view
      </mat-card-title>
      <mat-card-subtitle>
        <div *ngIf="view.selectedTemplate">
          {{ view.selectedTemplate.name }}
        </div>
        <ng-template [ngIf]="bbox.bbox$ | async | getProperty : 'bbox'" let-bbox>
          <div>
            from {{ bbox[0] | numbers | addUnitAndJoin : '' }}
          </div>
          <div>
            to {{ bbox[1] | numbers | addUnitAndJoin : '' }}
          </div>
        </ng-template>
      </mat-card-subtitle>
    </mat-card-header>

    <div class="loadingText">

      <ng-template [ngIf]="voiFeatureEntryCmp.busy$ | async">
        <spinner-cmp class="sxplr-d-inline-block"></spinner-cmp>
        <span>
          Loading Wireframes ...
        </span>
      </ng-template>
    </div>
  </mat-card>

  <sxplr-feature-entry
    [ngClass]="(voiSwitch.switchState$ | async) ? 'sxplr-d-block' : 'sxplr-d-none'"
    class="sxplr-pe-all mat-elevation-z8"
    [template]="view.selectedTemplate"
    [bbox]="bbox.bbox$ | async | getProperty : 'bbox'"
    [attr.data-feature-length]="((voiFeatureEntryCmp.features$ | async) || []).length"
    #voiFeatureEntryCmp="featureEntryCmp">
  </sxplr-feature-entry>

  <mat-card [ngClass]="{
    'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) > 0
  }">
    No spatial features found.
  </mat-card>

  <button mat-raised-button
    [ngClass]="{
      'sxplr-d-none': (voiFeatureEntryCmp.totals$ | async) === 0
    }"
    class="sxplr-pe-all sxplr-w-100"
    iav-switch
    [iav-switch-state]="false"
    #voiSwitch="iavSwitch"
    (iav-switch-event)="$event && pullAllVoi()"
    (click)="voiSwitch.toggle()">

    <ng-template [ngIf]="voiSwitch.switchState$ | async" [ngIfElse]="chevronCollapseTmpl">
      <i class="fas fa-chevron-up"></i>
      <span>
        Collapse
      </span>
    </ng-template>

    <ng-template #chevronCollapseTmpl>
      <i class="fas fa-chevron-down"></i>
      <span>
        Explore {{ voiFeatureEntryCmp.totals$ | async }} spatial features
      </span>
    </ng-template>
  </button>

  <!-- TODO voiBbox directive is used to draw outlines for VOI
  this has been temporarily disabled, since datasource is paginated 
  and how bounding boxes are drawn needs to be reconsidered -->
  
  <div
    *ngIf="voiSwitch.switchState$| async"
    voiBbox
    [features]="voiFeatureEntryCmp.features$ | async">

  </div>
</ng-template>

<div
  sxplr-sapiviews-core-space-boundingbox
  (sxplr-sapiviews-core-space-boundingbox-changed)="pullAllVoi()"
  [sxplr-sapiviews-core-space-boundingbox-atlas]="selectedAtlas$ | async"
  [sxplr-sapiviews-core-space-boundingbox-space]="templateSelected$ | async"
  [sxplr-sapiviews-core-space-boundingbox-spec]="viewerCtx$ | async | nehubaVCtxToBbox"
  #bbox="sxplrSapiViewsCoreSpaceBoundingBox">
</div>