viewerCmp.template.html

        <span matListItemLine>
          {{ region.name }}
        </span>
        <span matListItemLine class="text-muted">
          Brain region
        </span>
      </button>
    </mat-action-list>

  </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 overflow-hidden"
    [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>

  </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
  }">
    <mat-card-content>
      No spatial features found.
    </mat-card-content>
  </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>

  <div>
    <mat-progress-bar
      mode="indeterminate"
      *ngIf="(voiFeatureEntryCmp.busy$ | async)">
    </mat-progress-bar>
  </div>

  <!-- 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>