viewerCmp.template.html

      <ng-template [ngIf]="data.face && data.vertices">
        
        <span class="sxplr-list-like-button-body-line">
          Face Index: {{ data.face }}, Vertices Index: {{ data.vertices | addUnitAndJoin : '' }}
        </span>
        <span class="sxplr-list-like-button-body-line text-muted">
          Mesh Face
        </span>
      </ng-template>

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

        <ng-template [ngIf]="templateSelected$ | async" let-templateSelected>
          <ng-template [ngIf]="templateSelected.id !== data.template.id">
            <mat-icon fontSet="fas" fontIcon="fa-exclamation-triangle"
              color="warn"
              matTooltip="Different template spaces detected.">
            </mat-icon>
          </ng-template>
        </ng-template>
        
      </span>
    </div>

    <!-- {{ data.point | json }} -->
  </button>
</ng-template>
</ng-template>


<!-- viewer status ctx menu -->
<ng-template #viewerStatusCtxMenu let-data>
  <ng-template [ngIf]="data.context" let-context>

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

      <!-- volumetric i.e. nehuba -->
      <ng-container *ngSwitchCase="'nehuba'">
        <button mat-button class="sxplr-list-like-button"
          (click)="selectPoint({ point: context.payload.mouse.real }, data.metadata.template)">

          <div class="sxplr-list-like-button-icon">
            <i class="fas fa-map"></i>
          </div>
    
          <div class="sxplr-list-like-button-body">
    
            <span class="sxplr-list-like-button-body-line">
              {{ context.payload.mouse.real | nmToMm | numbers | addUnitAndJoin : '' }} (mm)
            </span>
            <span class="sxplr-list-like-button-body-line text-muted">
              Point
            </span>
            <span class="sxplr-list-like-button-body-line text-muted">
              {{ data.metadata.template.name }}
            </span>
          </div>    

        </button>
      </ng-container>

      <ng-container *ngSwitchCase="'threeSurfer'">

        <ng-template [ngIf]="context.payload?.faceIndex" let-faceIndex>
          <ng-template [ngIf]="context.payload?.vertexIndices" let-vertexIndices>
            <button mat-button class="sxplr-list-like-button"
            (click)="selectPoint({ face: faceIndex, vertices: vertexIndices }, data.metadata.template)">
    
              <div class="sxplr-list-like-button-icon">
                <i class="fas fa-map"></i>
              </div>
        
              <div class="sxplr-list-like-button-body">
        
                <span class="sxplr-list-like-button-body-line">
                  Face Index: {{ faceIndex }}, Vertices Index: {{ vertexIndices | addUnitAndJoin : '' }}
                </span>
                <span class="sxplr-list-like-button-body-line text-muted">
                  Mesh Face
                </span>
                <span class="sxplr-list-like-button-body-line text-muted">
                  {{ data.metadata.template.name }}
                </span>
              </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>

<!-- feature tmpls -->
<ng-template #sapiBaseFeatureTmpl
  let-backCb="backCb"
  let-feature="feature">

  <sxplr-feature-view class="sxplr-z-2 mat-elevation-z2"
    [feature]="feature">

    <div header>
      <!-- back btn -->
      <button mat-button
        *ngIf="backCb"
        (click)="backCb()"
        [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 feature tmpl -->
<ng-template let-feature="feature" #selectedFeatureTmpl>
  <!-- TODO differentiate between features (spatial, regional etc) -->
  
  <!-- spatial feature tmpl -->
  <ng-container *ngTemplateOutlet="sapiBaseFeatureTmpl; context: {
    backCb: clearSelectedFeature.bind(this),
    feature: feature
  }">
  </ng-container>

  <ng-layer-ctl *ngFor="let vol of feature.volumes"
    class="d-block"
    [ng-layer-ctl-name]="vol.metadata.fullName"
    [ng-layer-ctl-src]="vol.data.url"
    [ng-layer-ctl-transform]="vol.data | getProperty : 'detail' | getProperty: 'neuroglancer/precomputed' | getProperty : 'transform'">
  </ng-layer-ctl>
  <ng-template #sapiVOITmpl>
  </ng-template>
</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>