e2e for region exploring

e2e/src/navigating/navigateFromRegion.e2e-spec.js

+const {AtlasPage} = require('../util')
+
+const TEST_DATA = [
+  {
+    url: "/?templateSelected=MNI+152+ICBM+2009c+Nonlinear+Asymmetric&parcellationSelected=JuBrain+Cytoarchitectonic+Atlas",
+    templateName: 'MNI 152 ICBM 2009c Nonlinear Asymmetric',
+    position: [600, 490],
+    expectedRegion: 'Area 6ma (preSMA, mesial SFG) - left hemisphere',
+    expectedTemplateLabels: [
+      {
+        buttonText: 'Big Brain (Histology)',
+        expectedPosition: [-9349145, 27783956, 38734628]
+      },
+      {
+        buttonText: 'MNI Colin 27',
+        afterSelectNavigation: [-4083913, 4296092, 58555023]
+      },
+    ],
+  },
+  {
+    url: "/?templateSelected=Big+Brain+%28Histology%29&parcellationSelected=Cytoarchitectonic+Maps&cNavigation=0.0.0.-W000.._eCwg.2-FUe3._-s_W.2_evlu..7LIx..1n5q~.1FYC.2Is-..1B9C",
+    templateName: 'Big Brain (Histology)',
+    position: [370, 150],
+    expectedRegion: 'Area STS1 (STS)',
+    expectedTemplateLabels: [
+      {
+        buttonText: 'MNI Colin 27',
+        hemisphere:'Left',
+        afterSelectNavigation: [-54514755, -16753913, -5260713]
+      },
+      {
+        buttonText: 'MNI Colin 27 - Right',
+        afterSelectNavigation: [54536567, -17992636, -5712544]
+      },
+      {
+        buttonText: 'MNI 152 ICBM 2009c Nonlinear Asymmetric - Left',
+        afterSelectNavigation: [-55442669, -18314601, -6381831]
+      },
+      {
+        buttonText: 'MNI 152 ICBM 2009c Nonlinear Asymmetric - Right',
+        afterSelectNavigation: [52602966, -18339402, -5666868]
+      },
+    ],
+  },
+]
+
+
+describe('explore same region in different templates', () => {
+
+  let iavPage
+  beforeAll(async () => {
+    iavPage = new AtlasPage()
+    await iavPage.init()
+  })
+
+  TEST_DATA.forEach(template => {
+    template.expectedTemplateLabels.forEach(expectedTemplate => {
+      it (`testing ${template.expectedRegion} exploring at: ${template.templateName}`, async () => {
+        if (template.url) {
+          await iavPage.goto(template.url)
+        } else {
+          await iavPage.goto()
+          await iavPage.selectTitleTemplateParcellation(template.templateName)
+        }
+        const {position} = template
+
+        const tag = await iavPage.getSideNavTag()
+        await tag.click()
+        await iavPage.wait(1000)
+        await iavPage.waitUntilAllChunksLoaded()
+        await iavPage.showRegionMenu( {position} )
+        await iavPage.wait(5000)
+        await iavPage.wait(5000)
+        await iavPage.wait(5000)
+
+        await iavPage.changeTemplateFromRegionMenu(expectedTemplate.buttonText, expectedTemplate.hemisphere && expectedTemplate.hemisphere)
+
+        await iavPage.wait(1000)
+        await iavPage.waitUntilAllChunksLoaded()
+
+        const navState = await iavPage.getNavigationState()
+
+        expect(navState.position).toEqual(expectedTemplate.expectedPosition)
+
+      })
+    })
+
+  })
+
+})

e2e/src/util.js

@@ -95,6 +95,30 @@ class WdBase{
       .perform()
   }
 
+  async showRegionMenu({position}) {
+    if (!position) throw new Error(`cursorGoto: position must be defined!`)
+    const x = Array.isArray(position) ? position[0] : position.x
+    const y = Array.isArray(position) ? position[1] : position.y
+    if (!x) throw new Error(`cursorGoto: position.x or position[0] must be defined`)
+    if (!y) throw new Error(`cursorGoto: position.y or position[1] must be defined`)
+
+    const atlasViewer = await this._driver.findElement(By.tagName('atlas-viewer'))
+
+    console.log(x + ',' + y)
+
+    return this._driver.actions()
+      .move()
+      .move({
+        x,
+        y,
+        duration: 1000,
+      })
+      .click()
+      .perform()
+
+    console.log(1)
+  }
+
   async initHttpInterceptor(){
     await this._browser.executeScript(() => {
       if (window.__isIntercepting__) return
@@ -686,6 +710,16 @@ class WdIavPage extends WdLayoutPage{
     }
   }
 
+  async changeTemplateFromRegionMenu(templateName, hemisphere) {
+    const regionMenu = await this._driver.findElement(By.tagName('region-menu'))
+    const changeTemplate = await regionMenu.findElement(By.xpath("//button[contains(.,'Change template')]"))
+    await changeTemplate.click()
+    await this.wait(200)
+    const templateToChange = hemisphere? await regionMenu.findElement(By.xpath(`//button[contains(.,'${templateName}') and contains(.,'${hemisphere}')]`))
+      : await regionMenu.findElement(By.xpath(`//button[contains(.,'${templateName}')]`))
+    await templateToChange.click()
+  }
+
   async getNavigationState() {
     const actualNav = await this._browser.executeScript(async () => {
       let returnObj, sub
@@ -745,4 +779,4 @@ class PptrIAVPage{
 exports.waitMultiple = process.env.WAIT_ULTIPLE || 1
 
 exports.AtlasPage = WdIavPage
-exports.LayoutPage = WdLayoutPage
\ No newline at end of file
+exports.LayoutPage = WdLayoutPage

src/services/state/viewerState.store.ts

@@ -106,7 +106,7 @@ export const getStateStore = ({ state = defaultState } = {}) => (prevState: Part
 
       // taken care of by effect.ts
       // landmarksSelected : [],
-      // navigation : {},
+      navigation : action.navigation,
       dedicatedView : null,
     }
   }

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

-import { Component } from "@angular/core";
+import {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'
 
@@ -9,11 +10,38 @@ import { RegionBase } from '../region.base'
   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.getDifferentTemplatesSameRegion()
+        // this.bigBrainJubrainSwitch()
+        // this.getSameParcellationTemplates()
+      }),
+    )
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(s => s.unsubscribe())
+  }
+
 }

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

@@ -11,7 +11,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'">
@@ -46,5 +46,30 @@
         </button>
       </div>
     </mat-menu>
-  </mat-card-actions>
-</mat-card>
\ No newline at end of file
+
+
+    <!-- Menu to navigate between template spaces to explore same region -->
+    <div>
+      <button mat-button
+              *ngIf="sameRegionTemplate.length"
+              [matMenuTriggerFor]="additionalActions"
+              #additionalActionsMenuButton="matMenuTrigger">
+        <i class="fas fa-brain"></i>
+        <span>
+          Change template
+        </span>
+        <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 sameRegion of sameRegionTemplate; let i = index" (click)="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>
+
+  </div>
+</mat-card>