regionMenu.template.html

<mat-card>
  <mat-card-title>
    <div class="position-relative region-name">
      {{ region.name }}
    </div>
  </mat-card-title>
  <mat-card-subtitle>
    <i class="fas fa-brain"></i>
    <span>
      Brain region
    </span>
  </mat-card-subtitle>
  
  <mat-card-content>
    <mat-divider></mat-divider>
    
    <ng-template #safeHarbour>
        
      <!-- enlarged region actions -->
      <mat-grid-list cols="2" rowHeight="6rem" gutterSize="0px">

        <mat-grid-tile>
          <iav-v-button
            class="h-100 w-100"
            mat-ripple
            [color]="isSelected ? 'primary' : 'default'"
            (click)="toggleRegionSelected()">
            <i iav-v-button-icon class="far" [ngClass]="{'fa-check-square': isSelected, 'fa-square': !isSelected}"></i>
            <span iav-v-button-text>Select</span>
          </iav-v-button>
        </mat-grid-tile>
  
        <mat-grid-tile>
          <iav-v-button
            class="h-100 w-100"
            mat-ripple
            (click)="navigateToRegion()">
            <i class="fas fa-map-marked-alt" iav-v-button-icon></i>
            <span iav-v-button-text>Navigate</span>
          </iav-v-button>
        </mat-grid-tile>
  
        <ng-container *ngFor="let originDataset of (region.originDatasets || [])">
          <mat-grid-tile class="iv-custom-comp">
            <iav-v-button
              iav-dataset-preview-dataset-file
              [iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
              [iav-dataset-preview-dataset-file-filename]="originDataset.filename"
              #previewDirective="iavDatasetPreviewDatasetFile"
              class="h-100 w-100"
              mat-ripple>
              <i class="far fa-eye" iav-v-button-icon></i>
              <span iav-v-button-text [class]="previewDirective.active ? 'iv-custom-comp primary' : ''">Probability Map {{ previewDirective.active }}</span>
            </iav-v-button>
          </mat-grid-tile>
        </ng-container> 
        
        <mat-grid-tile>
          <iav-v-button *ngIf="hasConnectivity"
            class="h-100 w-100"
            mat-ripple
            [matMenuTriggerFor]="connectivitySourceDatasets"
            #connectivityMenuButton="matMenuTrigger"
            iav-captureClickListenerDirective
            [iav-captureClickListenerDirective-captureDocument]="true"
            (iav-captureClickListenerDirective-onMousedown)="connectivityMenuButton.closeMenu()">
            <i class="fab fa-connectdevelop" iav-v-button-icon></i>
            <span iav-v-button-text>Connectivity</span>
            <i class="fas fa-chevron-down" iav-v-button-footer></i>
          </iav-v-button>
        </mat-grid-tile>
  
        <mat-grid-tile>
          <iav-v-button *ngIf="sameRegionTemplate.length"
            class="h-100 w-100"
            mat-ripple
            [matMenuTriggerFor]="additionalActions"
            #changeTmplTrigger="matMenuTrigger"
            iav-captureClickListenerDirective
            [iav-captureClickListenerDirective-captureDocument]="true"
            (iav-captureClickListenerDirective-onMousedown)="changeTmplTrigger.closeMenu()">
            <i class="fas fa-brain" iav-v-button-icon></i>
            <span iav-v-button-text>Change template</span>
            <i class="fas fa-chevron-down" iav-v-button-footer></i>
          </iav-v-button>
        </mat-grid-tile> 
      </mat-grid-list>
    </ng-template>

    <!-- region desc -->
    <ng-container *ngIf="region?.description?.length > 0">
      <mat-divider></mat-divider>
      <div>
        {{ region.description }}
    </div>
    </ng-container>

    <mat-divider></mat-divider>

    <mat-list class="action-list sm">

      <!-- selected -->
      <mat-list-item
        mat-ripple
        iv-custom-comp
        [attr.primary]="isSelected || null"
        (click)="toggleRegionSelected()">
        <mat-icon scaled-down="" fontSet="far" [fontIcon]="isSelected ? 'fa-check-square' : 'fa-square'"  mat-list-icon></mat-icon>
        <div mat-line>
          Select
        </div>
      </mat-list-item>
      
      <!-- position -->
      <mat-list-item *ngIf="region?.position" (click)="navigateToRegion()" mat-ripple>
        <mat-icon scaled-down fontSet="fas" fontIcon="fa-map-marked-alt" mat-list-icon></mat-icon>
        <div mat-line>
          {{ region.position | nmToMm | addUnitAndJoin : 'mm' }}
        </div>
      </mat-list-item>

      <!-- originData -->
      <mat-list-item *ngFor="let originDataset of (region.originDatasets || [])"
        iav-dataset-preview-dataset-file
        [iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
        [iav-dataset-preview-dataset-file-filename]="originDataset.filename"
        #previewDirective="iavDatasetPreviewDatasetFile"
        iv-custom-comp
        [attr.primary]="previewDirective.active || null"
        role="switch"
        [attr.aria-checked]="previewDirective.active"
        [attr.aria-label]="SHOW_ORIGIN_DATASET"
        mat-ripple>
        <mat-icon fontSet="fas" fontIcon="fa-eye" mat-list-icon></mat-icon>
        <div mat-line>
          View probability map
        </div>
      </mat-list-item>

      <!-- connectivity -->
      <div *ngIf="hasConnectivity" iav-switch #connectivitySwitch="iavSwitch">

        <mat-list-item mat-ripple
          (click)="connectivitySwitch.toggle()"
          [attr.aria-label]="SHOW_CONNECTIVITY_DATA">
          <mat-icon fontSet="fab" fontIcon="fa-connectdevelop" mat-list-icon></mat-icon >
          <div mat-line>
            <span>
              Connectivity
            </span>
            <span class="muted">
             ({{ 1 }})
            </span>
          </div>
          <mat-icon fontSet="fas" [fontIcon]="connectivitySwitch.switchState ? 'fa-chevron-up' : 'fa-chevron-down'"></mat-icon>
        </mat-list-item>
  
        <!-- connectivity -->
        <mat-list-item *ngIf="connectivitySwitch.switchState" mat-ripple (click)="showConnectivity(region.name)">
          <mat-icon fontSet="fas" fontIcon="fa-none" mat-list-icon></mat-icon>
          <div mat-line>1000 Brain Study - DTI connectivity</div>
        </mat-list-item>

      </div>

      <!-- change template -->
      <div iav-switch #changeTmplSwitch="iavSwitch">

        <mat-list-item *ngIf="sameRegionTemplate.length"
          mat-ripple
          [attr.aria-label]="SHOW_IN_OTHER_REF_SPACE"
          (click)="changeTmplSwitch && changeTmplSwitch.toggle()">
          <mat-icon fontSet="fas" fontIcon="fa-brain" mat-list-icon></mat-icon>
          <div mat-line>
            <span>
              Explore in other templates
            </span>
            <span class="muted">
              ({{ sameRegionTemplate.length }})
            </span>
          </div>
          <mat-icon fontSet="fas" [fontIcon]="changeTmplSwitch.switchState ? 'fa-chevron-up' : 'fa-chevron-down'"></mat-icon>
        </mat-list-item>

        <!-- change template items -->
        <div *ngIf="changeTmplSwitch.switchState"
          [attr.aria-label]="AVAILABILITY_IN_OTHER_REF_SPACE">
          <mat-list-item *ngFor="let sameRegion of sameRegionTemplate; let i = index"
            [attr.aria-label]="SHOW_IN_OTHER_REF_SPACE + ': ' + sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '') "
            (click)="changeView(i)"
            mat-ripple>
            <mat-icon fontSet="fas" fontIcon="fa-none" mat-list-icon></mat-icon>
            <div mat-line>
              <span class="overflow-x-hidden text-truncate"> {{ sameRegion.template.name }} </span>
              <span *ngIf="sameRegion.hemisphere"> - {{ sameRegion.hemisphere }}</span>
            </div>
          </mat-list-item>
        </div>
      
      </div>
    </mat-list>
  </mat-card-content>
</mat-card>

<!-- ToDo make dynamic with AVAILABLE CONNECTIVITY DATASETS data - get info from atlas viewer core -->
<mat-menu
  #connectivitySourceDatasets="matMenu"
  xPosition="before"
  hasBackdrop="false">
  <div>
    <button mat-menu-item (mousedown)="showConnectivity(region.name)">
      <span>1000 Brain Study - DTI connectivity</span>
    </button>
  </div>
</mat-menu>


<mat-menu
  #additionalActions="matMenu"
  xPosition="before"
  hasBackdrop="false">
  <div>
    <button mat-menu-item *ngFor="let sameRegion of sameRegionTemplate; let i = index" (mousedown)="changeView(i)" class="d-flex">
      <span class="overflow-x-hidden text-truncate"> {{sameRegion.template.name}} </span>
      <span *ngIf="sameRegion.hemisphere"> - {{sameRegion.hemisphere}}</span>
    </button>
  </div>
</mat-menu>