switch between template spaces to explore region

src/ui/parcellationRegion/region.base.ts

 import {EventEmitter, Input, Output} from "@angular/core";
-import { Store } from "@ngrx/store";
+import {select, Store} from "@ngrx/store";
 import {SET_CONNECTIVITY_REGION} from "src/services/state/viewerState.store";
 import {
   EXPAND_SIDE_PANEL_CURRENT_VIEW,
@@ -7,6 +7,8 @@ import {
   SHOW_SIDE_PANEL_CONNECTIVITY,
 } from "src/services/stateStore.service";
 import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "../viewerStateController/viewerState.base";
+import {distinctUntilChanged, shareReplay} from "rxjs/operators";
+import {Observable} from "rxjs";
 
 export class RegionBase {
 
@@ -20,10 +22,40 @@ export class RegionBase {
 
   @Output() public closeRegionMenu: EventEmitter<boolean> = new EventEmitter()
 
+  public loadedTemplate$: Observable<any[]>
+  public templateSelected$: Observable<any[]>
+  public parcellationSelected$: Observable<any[]>
+
+  protected loadedTemplates: any[]
+  protected selectedTemplate: any
+  protected selectedParcellation: any
+  protected sameRegionTemplate: any[] = []
+
+  private parcellationRegions: any[] = []
+
   constructor(
     private store$: Store<IavRootStoreInterface>,
   ) {
 
+    const viewerState$ = this.store$.pipe(
+      select('viewerState'),
+      shareReplay(1),
+    )
+
+    this.loadedTemplate$ = viewerState$.pipe(
+      select('fetchedTemplates'),
+      distinctUntilChanged()
+    )
+
+    this.templateSelected$ = viewerState$.pipe(
+      select('templateSelected'),
+      distinctUntilChanged(),
+    )
+
+    this.parcellationSelected$ = viewerState$.pipe(
+      select('parcellationSelected'),
+      distinctUntilChanged(),
+    )
   }
 
   public navigateToRegion() {
@@ -56,4 +88,71 @@ export class RegionBase {
       connectivityRegion: regionName,
     })
   }
+
+  getSameParcellationTemplates = () => {
+    // Get All the templates which includes parcellation equal to selected parcellation
+    // (E.g. if MNI 152 ICBM Jubrain is selected method returns MNI Colin 27)
+    this.loadedTemplates.forEach(template => {
+      if (this.selectedTemplate.name !== template.name
+          && template.parcellations.map(p => p.name).includes(this.selectedParcellation.name)) {
+        this.sameRegionTemplate.push(template.name)
+      }
+    })
+    return null
+  }
+
+  bigBrainJubrainSwitch = () => {
+    // If Jubrain or bigbrain is selected and clicked region is included in both of them
+    // push template name to sameRegionTemplate to change template from menu
+    this.loadedTemplates.forEach(template => {
+      if(this.selectedTemplate.name === 'Big Brain (Histology)'
+          && template.parcellations.map( p => p.name).includes('JuBrain Cytoarchitectonic Atlas')) {
+
+        this.parcellationRegions = []
+
+        this.getAllRegionsFromParcellation(template.parcellations.filter(p => p.name === 'JuBrain Cytoarchitectonic Atlas')[0].regions)
+        this.parcellationRegions.forEach(pr => {
+          if (!pr.name.includes(' - left hemisphere')) {
+            if (pr.name.includes(' - right hemisphere')) pr.name = pr.name.replace(' - right hemisphere','')
+            if (!this.sameRegionTemplate.includes(template.name)) this.sameRegionTemplate.push(template.name)
+          }
+        })
+      }
+      else if(this.selectedParcellation.name === 'JuBrain Cytoarchitectonic Atlas'
+          && template.name === 'Big Brain (Histology)') {
+        let exploreRegion = this.region.name
+        if (exploreRegion.includes(' - right hemisphere')) exploreRegion = exploreRegion.replace(' - right hemisphere','')
+        if (exploreRegion.includes(' - left hemisphere')) exploreRegion = exploreRegion.replace(' - left hemisphere','')
+        this.getAllRegionsFromParcellation(template.parcellations.filter(p => p.name === 'Cytoarchitectonic Maps')[0].regions)
+        if (this.parcellationRegions.map(pr => pr.name).includes(exploreRegion)) this.sameRegionTemplate.push(template.name)
+      }
+    })
+  }
+
+  selectTemplate(templateName) {
+    this.closeRegionMenu.emit()
+    this.store$.dispatch({
+      type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.SELECT_TEMPLATE_WITH_NAME,
+      payload: {
+        name: templateName,
+      },
+    })
+  }
+
+
+  public getAllRegionsFromParcellation = (regions) => {
+    for (const region of regions) {
+      if (region.children && region.children.length) {
+        this.getAllRegionsFromParcellation(region.children)
+      } else {
+        this.parcellationRegions.push(region)
+      }
+    }
+  }
+
+
+
+
+
+
 }

src/ui/parcellationRegion/regionMenu/regionMenu.component.ts

-import { Component } from "@angular/core";
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
 import { Store } from "@ngrx/store";
+import {MatMenuTrigger} from "@angular/material/menu";
+import {Subscription} from "rxjs";
 
 import { IavRootStoreInterface } from "src/services/stateStore.service";
 import { RegionBase } from '../region.base'
+import {VIEWERSTATE_CONTROLLER_ACTION_TYPES} from "src/ui/viewerStateController/viewerState.base";
 
 @Component({
   selector: 'region-menu',
   templateUrl: './regionMenu.template.html',
   styleUrls: ['./regionMenu.style.css'],
 })
-export class RegionMenuComponent extends RegionBase {
+export class RegionMenuComponent extends RegionBase implements OnInit, OnDestroy {
+
+  @ViewChild('additionalActionsMenuButton', {read: MatMenuTrigger}) actionsMenuTriggerButton: MatMenuTrigger
+  @ViewChild('additionalActionsPanel', {read: ElementRef}) additionalActionsPanelElement: ElementRef
+
+  private subscriptions: Subscription[] = []
 
   constructor(
     store$: Store<IavRootStoreInterface>,
   ) {
     super(store$)
   }
+
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.templateSelected$.subscribe(template => {
+        this.selectedTemplate = template
+      }),
+      this.parcellationSelected$.subscribe(parcellation => {
+        this.selectedParcellation = parcellation
+      }),
+      this.loadedTemplate$.subscribe(templates => {
+        this.loadedTemplates = templates
+        this.bigBrainJubrainSwitch()
+        this.getSameParcellationTemplates()
+      }),
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(s => s.unsubscribe())
+  }
+
 }

src/ui/parcellationRegion/regionMenu/regionMenu.template.html

@@ -5,7 +5,7 @@
   <mat-card-content>
     {{ region.description }}
   </mat-card-content>
-  <mat-card-actions class="d-flex flex-row flex-wrap">
+  <div class="d-flex flex-row flex-wrap" #actionCard>
     <button mat-button
       (click)="toggleRegionSelected()"
       [color]="isSelected ? 'primary': 'basic'">
@@ -20,11 +20,34 @@
         Navigate
       </span>
     </button>
+
     <button *ngIf="hasConnectivity" mat-button (click)="showConnectivity(region.name)">
       <i class="fab fa-connectdevelop"></i>
       <span>
-        Connectivity
-      </span>
+          Connectivity
+        </span>
     </button>
-  </mat-card-actions>
+
+    <!-- Menu to navigate between template spaces to explore same region -->
+    <div #additionalActions>
+      <button mat-icon-button
+              *ngIf="sameRegionTemplate.length"
+              [matMenuTriggerFor]="additionalActions"
+              #additionalActionsMenuButton="matMenuTrigger"
+              (mouseenter)="$event.stopPropagation(); actionsMenuTriggerButton.openMenu()">
+        <i class="fas fa-angle-right"></i>
+      </button>
+    </div>
+
+    <mat-menu #additionalActions="matMenu" xPosition="before" (click)="$event.stopPropagation()" hasBackdrop="false">
+      <div>
+        <button mat-menu-item *ngFor="let templateName of sameRegionTemplate" (click)="selectTemplate(templateName)">
+          <span>
+            Explore in {{templateName}}
+          </span>
+        </button>
+      </div>
+    </mat-menu>
+
+  </div>
 </mat-card>
\ No newline at end of file