viewerCmp.template.html

      </ng-container>

      <!-- Multi regions include -->
      <ng-template #multiRegionInclTmpl>
        <mat-chip-list>
          <mat-chip *ngFor="let r of regions"
            iav-region
            [region]="r"
            [ngClass]="{
              'darktheme':regionDirective.rgbDarkmode === true,
              'lighttheme': regionDirective.rgbDarkmode === false
            }"
            [style.backgroundColor]="regionDirective.rgbString"
            #regionDirective="iavRegion">
            <span class="iv-custom-comp text text-truncate d-inline pl-4">
              {{ r.name }}
            </span>
          </mat-chip>
        </mat-chip-list>
      </ng-template>

      <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
        title: 'Brain regions',
        desc: regions.length,
        iconClass: 'fas fa-brain',
        iavNgIf: true,
        content: multiRegionInclTmpl
      }">
      </ng-container>

    </mat-accordion>
  </ng-template>
</ng-template>

<!-- collapse btn -->
<ng-template #collapseBtn>

  <div class="h-0 w-100 collapse-position d-flex flex-column justify-content-end align-items-center">

    <button mat-raised-button class="mat-elevation-z8"
      [attr.aria-label]="ARIA_LABELS.COLLAPSE"
      (click)="sideNavFullLeftSwitch.close()"
      color="basic">
      <i class="fas fa-chevron-up"></i>
      <span>
        collapse
      </span>
    </button>
  </div>
</ng-template>

<!-- region tmpl placeholder -->
<ng-template #regionPlaceholderTmpl>
  <div class="placeholder-region-detail bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
    <span class="text-muted">
      Select a region by clicking on the viewer or search from above
    </span>
  </div>
</ng-template>

<!-- context menu template -->
<ng-template #viewerCtxMenuTmpl let-tmplRefs="tmplRefs">
  <mat-card class="p-0"
    [iav-key-listener]="[{type: 'keydown', target: 'document', capture: true}]"
    (iav-key-event)="disposeCtxMenu()"
    (iav-outsideClick)="disposeCtxMenu()">
    <mat-card-content *ngFor="let tmplRef of tmplRefs">

      <!-- template provided -->
      <ng-template [ngIf]="tmplRef.tmpl"
        [ngIfElse]="fallbackTmpl"
        [ngTemplateOutlet]="tmplRef.tmpl"
        [ngTemplateOutletContext]="{$implicit: tmplRef.data}">
      </ng-template>
      
      <!-- template not provided -->
      <ng-template #fallbackTmpl>
        {{ tmplRef.data.message || 'test' }}
      </ng-template>
    </mat-card-content>
  </mat-card>
</ng-template>

<!-- viewer status ctx menu -->
<ng-template #viewerStatusCtxMenu let-data>
  <mat-list>

    <!-- ref space & position -->
    <ng-container [ngSwitch]="data.context.viewerType">

      <!-- volumetric i.e. nehuba -->
      <ng-container *ngSwitchCase="'nehuba'">
        <mat-list-item>
          <span mat-line>
            {{ data.context.payload.mouse.real | nmToMm | addUnitAndJoin : '' }} (mm)
          </span>
          <span mat-line class="text-muted">
            <i class="fas fa-map"></i>
            <span>
              {{ data.metadata.template.displayName || data.metadata.template.name }}
            </span>
          </span>
        </mat-list-item>
      </ng-container>

      <ng-container *ngSwitchCase="'threeSurfer'">
        <mat-list-item>
          <span mat-line>
            face#{{ data.context.payload.faceIndex }}
          </span>
          <span mat-line>
            vertices#{{ data.context.payload.vertexIndices | addUnitAndJoin : '' }}
          </span>
          <span mat-line class="text-muted">
            <i class="fas fa-map"></i>
            <span>
              {{ data.context.payload.fsversion }}
            </span>
          </span>
        </mat-list-item>
      </ng-container>

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

    <!-- hovered ROIs -->
    <ng-template [ngIf]="data.metadata.hoveredRegions.length > 0">
      <mat-divider></mat-divider>

      <mat-list-item *ngFor="let hoveredR of data.metadata.hoveredRegions">
        <span mat-line>
          {{ hoveredR.displayName || hoveredR.name }}
        </span>
        <span mat-line class="text-muted">
          <i class="fas fa-brain"></i>
          <span>
            Brain region
          </span>
        </span>

        <!-- lookup region -->
        <button mat-icon-button
          (click)="selectRoi(hoveredR)"
          ctx-menu-dismiss>
          <i class="fas fa-search"></i>
        </button>
      </mat-list-item>
    </ng-template>
  </mat-list>
</ng-template>