Merge branch 'dev' into chore/regionId

.github/workflows/e2e.yml

@@ -8,8 +8,6 @@ on:
 env:
   DOCKER_IMAGE_NAME: interactive-viewer
   DOCKER_IMAGE_TAG: ${{ github.sha }}
-  DOCKER_SAVE_FILENAME: iav.tar.gz
-  ARTEFACT_NAME: iav_docker_image
   DOCKER_CONTAINER_NAME: github-actions-iav-dkr-container
 
 jobs:
@@ -26,7 +24,7 @@ jobs:
       run: |
         docker build --build-arg BACKEND_URL=${BACKEND_URL} -t ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG} .
       env:
-        BACKEND_URL: http://localhost:3001
+        BACKEND_URL: http://localhost:3001/
 
   test:
     runs-on: self-hosted
@@ -39,15 +37,25 @@ jobs:
     - name: Install dependencies
       run: |
         npm i
-    - name: run docker image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }} as ${{ env.DOCKER_CONTAINER_NAME }}
-      run: docker run -p 3001:3000 --rm --name ${DOCKER_CONTAINER_NAME} -dit ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG}
-    - name: run pptr tests
+    - name: run docker image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }}
+      run: |
+        docker run -p 3001:3000 \
+          --rm \
+          --name ${DOCKER_CONTAINER_NAME} \
+          --env HBP_CLIENTID=${{ secrets.HBP_CLIENTID }} \
+          --env HBP_CLIENTSECRET=${{ secrets.HBP_CLIENTSECRET }} \
+          --env REFRESH_TOKEN=${{ secrets.REFRESH_TOKEN }} \
+          -dit \
+          ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG}
+    - name: sleep for 60s
+      run: sleep 60s
+    - name: run pptr tests - ${{ env.TEST_URL }}
       run: node ./node_modules/.bin/mocha ./test/databrowser.spec.js --timeout 1800000 
+      env:
+        TEST_URL: http://localhost:3001
     - name: cleanup, stop container ${{ env.DOCKER_CONTAINER_NAME }}
       if: always()
-      run: |
-        docker ps | grep ${{ env.DOCKER_CONTAINER_NAME }}
-        docker stop ${DOCKER_CONTAINER_NAME}
-    - name: cleanup, rm image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }}
-      if: always()
-      run: docker rmi ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG}
+      run: docker stop ${DOCKER_CONTAINER_NAME}
+    - name: cleanup, remove image ${{ env.DOCKER_IMAGE_NAME }}:${{ env.DOCKER_IMAGE_TAG }}
+      if: success()
+      run: docker rmi ${DOCKER_IMAGE_NAME}:${DOCKER_IMAGE_TAG}
\ No newline at end of file

package.json

@@ -92,6 +92,6 @@
     "zone.js": "^0.9.1"
   },
   "dependencies": {
-    "hbp-connectivity-component": "0.0.17"
+    "hbp-connectivity-component": "0.0.23"
   }
 }

src/atlasViewer/atlasViewer.apiService.service.spec.ts

+import {} from 'jasmine'
+import {AtlasViewerAPIServices} from "src/atlasViewer/atlasViewer.apiService.service";
+import {async, TestBed} from "@angular/core/testing";
+import {provideMockActions} from "@ngrx/effects/testing";
+import {provideMockStore} from "@ngrx/store/testing";
+import {defaultRootState} from "src/services/stateStore.service";
+import {Observable, of} from "rxjs";
+import {Action} from "@ngrx/store";
+import {AngularMaterialModule} from "src/ui/sharedModules/angularMaterial.module";
+const actions$: Observable<Action> = of({type: 'TEST'})
+
+
+
+describe('atlasViewer.apiService.service.ts', () => {
+    describe('getUserToSelectARegion', () => {
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [
+                    AngularMaterialModule,
+                ],
+                providers: [
+                    AtlasViewerAPIServices,
+                    provideMockActions(() => actions$),
+                    provideMockStore({initialState: defaultRootState})
+                ]
+            })
+        }))
+
+        it('should return value on resolve', async () => {
+            const regionToSend = 'test-region'
+            let sentData: any
+            const apiService = TestBed.get(AtlasViewerAPIServices)
+            const callApi = apiService.interactiveViewer.uiHandle.getUserToSelectARegion('selecting Region mode message')
+            apiService.getUserToSelectARegionResolve(regionToSend)
+            await callApi.then(r => {
+                sentData = r
+            })
+            expect(sentData).toEqual(regionToSend)
+        })
+
+        it('pluginRegionSelectionEnabled should false after resolve', async () => {
+            const { uiState } = defaultRootState
+            const regionToSend = 'test-region'
+            let sentData: any
+            const apiService = TestBed.get(AtlasViewerAPIServices)
+            const callApi = apiService.interactiveViewer.uiHandle.getUserToSelectARegion('selecting Region mode message')
+            apiService.getUserToSelectARegionResolve(regionToSend)
+            await callApi.then(r => {
+                sentData = r
+            })
+            expect(uiState.pluginRegionSelectionEnabled).toBe(false)
+        })
+    })
+})
\ No newline at end of file

src/atlasViewer/atlasViewer.apiService.service.ts

@@ -4,10 +4,17 @@ import { Observable } from "rxjs";
 import { distinctUntilChanged, map, filter } from "rxjs/operators";
 import { DialogService } from "src/services/dialogService.service";
 import { LoggingService } from "src/services/logging.service";
-import { getLabelIndexMap, getMultiNgIdsRegionsLabelIndexMap, IavRootStoreInterface, safeFilter } from "src/services/stateStore.service";
+import {
+  DISABLE_PLUGIN_REGION_SELECTION,
+  getLabelIndexMap,
+  getMultiNgIdsRegionsLabelIndexMap,
+  IavRootStoreInterface,
+  safeFilter
+} from "src/services/stateStore.service";
 import { ModalHandler } from "../util/pluginHandlerClasses/modalHandler";
 import { ToastHandler } from "../util/pluginHandlerClasses/toastHandler";
 import { IPluginManifest } from "./atlasViewer.pluginService.service";
+import {ENABLE_PLUGIN_REGION_SELECTION} from "src/services/state/uiState.store";
 
 declare let window
 
@@ -23,6 +30,9 @@ export class AtlasViewerAPIServices {
 
   public loadedLibraries: Map<string, {counter: number, src: HTMLElement|null}> = new Map()
 
+  public getUserToSelectARegionResolve
+  public getUserToSelectARegionReject
+
   constructor(
     private store: Store<IavRootStoreInterface>,
     private dialogService: DialogService,
@@ -118,8 +128,27 @@ export class AtlasViewerAPIServices {
           return Promise.reject('Needs to be overwritted')
         },
 
-        getUserInput: config => this.dialogService.getUserInput(config),
+        getUserInput: config => this.dialogService.getUserInput(config) ,
         getUserConfirmation: config => this.dialogService.getUserConfirm(config),
+
+        getUserToSelectARegion: (selectingMessage) => new Promise((resolve, reject) => {
+          this.store.dispatch({
+            type: ENABLE_PLUGIN_REGION_SELECTION,
+            payload: selectingMessage
+          })
+
+          this.getUserToSelectARegionResolve = resolve
+          this.getUserToSelectARegionReject = reject
+        }),
+
+        // ToDo Method should be able to cancel any pending promise.
+        cancelPromise: (pr) => {
+          if (pr === this.interactiveViewer.uiHandle.getUserToSelectARegion) {
+            if (this.getUserToSelectARegionReject) this.getUserToSelectARegionReject('Rej')
+            this.store.dispatch({type: DISABLE_PLUGIN_REGION_SELECTION})
+          }
+        }
+
       },
       pluginControl : {
         loadExternalLibraries : () => Promise.reject('load External Library method not over written')
@@ -205,6 +234,8 @@ export interface IInteractiveViewerInterface {
     launchNewWidget: (manifest: IPluginManifest) => Promise<any>
     getUserInput: (config: IGetUserInputConfig) => Promise<string>
     getUserConfirmation: (config: IGetUserConfirmation) => Promise<any>
+    getUserToSelectARegion: (selectingMessage: any) => Promise<any>
+    cancelPromise: (pr) => void
   }
 
   pluginControl: {

src/atlasViewer/atlasViewer.component.ts

 import {
-  AfterViewInit,
+  AfterViewInit, ChangeDetectorRef,
   Component,
   HostBinding,
   OnDestroy,
@@ -117,6 +117,11 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   public onhoverSegmentsForFixed$: Observable<string[]>
 
+  private pluginRegionSelectionEnabled$: Observable<boolean>
+  private pluginRegionSelectionEnabled: boolean = false
+  private persistentStateNotifierTemplate$: Observable<string>
+  // private pluginRegionSelectionEnabled: boolean = false
+
   constructor(
     private store: Store<IavRootStoreInterface>,
     private widgetServices: WidgetServices,
@@ -129,6 +134,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     private snackbar: MatSnackBar,
     private bottomSheet: MatBottomSheet,
     private log: LoggingService,
+    private changeDetectorRef: ChangeDetectorRef,
   ) {
 
     this.snackbarMessage$ = this.store.pipe(
@@ -136,6 +142,17 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       select("snackbarMessage"),
     )
 
+    this.pluginRegionSelectionEnabled$ = this.store.pipe(
+      select('uiState'),
+      select("pluginRegionSelectionEnabled"),
+      distinctUntilChanged(),
+    )
+    this.persistentStateNotifierTemplate$ = this.store.pipe(
+      select('uiState'),
+      select("persistentStateNotifierTemplate"),
+      distinctUntilChanged(),
+    )
+
     this.bottomSheet$ = this.store.pipe(
       select('uiState'),
       select('bottomSheetTemplate'),
@@ -279,6 +296,10 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
         }
       }),
     )
+
+    this.onhoverSegments$.subscribe(hr => {
+      this.hoveringRegions = hr
+    })
   }
 
   private selectedParcellation$: Observable<any>
@@ -361,6 +382,13 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
         this.rd.setAttribute(document.body, 'darktheme', flag.toString())
       }),
     )
+
+    this.subscriptions.push(
+      this.pluginRegionSelectionEnabled$.subscribe(PRSE => {
+        this.pluginRegionSelectionEnabled = PRSE
+        this.changeDetectorRef.detectChanges()
+      })
+    )
   }
 
   public ngAfterViewInit() {
@@ -409,21 +437,26 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       withLatestFrom(this.onhoverSegments$),
       map(([_flag, onhoverSegments]) => onhoverSegments || []),
     )
-
   }
 
+  private hoveringRegions = []
+
   public mouseDownNehuba(_event) {
     this.rClContextualMenu.hide()
   }
 
-  public mouseUpNehuba(event) {
+  public mouseClickNehuba(event) {
     // if (this.mouseUpLeftPosition === event.pageX && this.mouseUpTopPosition === event.pageY) {}
     if (!this.rClContextualMenu) { return }
     this.rClContextualMenu.mousePos = [
       event.clientX,
       event.clientY,
     ]
-    this.rClContextualMenu.show()
+    if (!this.pluginRegionSelectionEnabled) {
+      this.rClContextualMenu.show()
+    } else {
+      if (this.hoveringRegions) this.apiService.getUserToSelectARegionResolve(this.hoveringRegions)
+    }
   }
 
   public toggleSideNavMenu(opened) {

src/atlasViewer/atlasViewer.template.html

@@ -47,7 +47,7 @@
                          [currentOnHover]="iavMouseHoverEl.currentOnHoverObs$ | async"
                          iav-captureClickListenerDirective
                          (iav-captureClickListenerDirective-onMousedown)="mouseDownNehuba($event)"
-                         (iav-captureClickListenerDirective-onClick)="mouseUpNehuba($event)">
+                         (iav-captureClickListenerDirective-onClick)="mouseClickNehuba($event)">
     </ui-nehuba-container>
 
     <div class="z-index-10 position-absolute pe-none w-100 h-100">
@@ -108,6 +108,11 @@
         </ng-container>
       </div>
 
+      <div class="fixed-top pe-none d-flex justify-content-center m-4" *ngIf="pluginRegionSelectionEnabled">
+        <ng-container *ngTemplateOutlet="persistentStateNotifierTemplate">
+        </ng-container>
+      </div>
+
       <div floatingMouseContextualContainerDirective>
 
         <div *ngIf="!ismobile"
@@ -204,4 +209,9 @@
 <!-- logo tmpl -->
 <ng-template #logoTmpl>
   <logo-container></logo-container>
-</ng-template>
+</ng-template>
\ No newline at end of file
+
+<ng-template #persistentStateNotifierTemplate>
+  <mat-card>{{persistentStateNotifierTemplate$ | async}}</mat-card>
+</ng-template>
+

src/main-aot.ts

-import { enableProdMode } from '@angular/core';
-
-enableProdMode()
-
 import './main-common'
-
-/* aot === production mode */
-
-if (PRODUCTION) { console.log(`Interactive Atlas Viewer: ${VERSION}`) }

src/main-common.ts

 import 'zone.js'
-
 import 'third_party/testSafari.js'
+import { enableProdMode } from '@angular/core';
 
 import { defineCustomElements } from 'hbp-connectivity-component/dist/loader'
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { MainModule } from './main.module';
 
+if (PRODUCTION) enableProdMode()
+if (PRODUCTION) { console.log(`Interactive Atlas Viewer: ${VERSION}`) }
+
 const requireAll = (r: any) => {r.keys().forEach(r)}
 requireAll(require.context('./res/ext', false, /\.json$/))
 requireAll(require.context('./res/images', true, /\.jpg$|\.png$|\.svg$/))

src/services/state/uiState.store.ts

@@ -23,6 +23,9 @@ export const defaultState: StateInterface = {
 
   bottomSheetTemplate: null,
 
+  pluginRegionSelectionEnabled: false,
+  persistentStateNotifierTemplate: null,
+
   /**
    * replace with server side logic (?)
    */
@@ -105,6 +108,22 @@ export const getStateStore = ({ state = defaultState } = {}) => (prevState: Stat
       ...prevState,
       sidePanelCurrentViewContent: 'Dataset',
     }
+
+  case ENABLE_PLUGIN_REGION_SELECTION: {
+    return {
+      ...prevState,
+      pluginRegionSelectionEnabled: true,
+      persistentStateNotifierTemplate: action.payload
+    }
+  }
+  case DISABLE_PLUGIN_REGION_SELECTION: {
+    return {
+      ...prevState,
+      pluginRegionSelectionEnabled: false,
+      persistentStateNotifierTemplate: null
+    }
+  }
+
   case AGREE_COOKIE: {
     /**
        * TODO replace with server side logic
@@ -168,6 +187,9 @@ export interface StateInterface {
 
   snackbarMessage: symbol
 
+  pluginRegionSelectionEnabled: boolean
+  persistentStateNotifierTemplate: TemplateRef<any>
+
   agreedCookies: boolean
   agreedKgTos: boolean
 
@@ -243,6 +265,9 @@ export const HIDE_SIDE_PANEL_CONNECTIVITY = `HIDE_SIDE_PANEL_CONNECTIVITY`
 export const COLLAPSE_SIDE_PANEL_CURRENT_VIEW = `COLLAPSE_SIDE_PANEL_CURRENT_VIEW`
 export const EXPAND_SIDE_PANEL_CURRENT_VIEW = `EXPAND_SIDE_PANEL_CURRENT_VIEW`
 
+export const ENABLE_PLUGIN_REGION_SELECTION = `ENABLE_PLUGIN_REGION_SELECTION`
+export const DISABLE_PLUGIN_REGION_SELECTION = `DISABLE_PLUGIN_REGION_SELECTION`
+
 export const AGREE_COOKIE = `AGREE_COOKIE`
 export const AGREE_KG_TOS = `AGREE_KG_TOS`
 export const SHOW_KG_TOS = `SHOW_KG_TOS`

src/services/stateStore.service.ts

@@ -52,7 +52,7 @@ export { userConfigState,  USER_CONFIG_ACTION_TYPES}
 export { ADD_NG_LAYER, FORCE_SHOW_SEGMENT, HIDE_NG_LAYER, REMOVE_NG_LAYER, SHOW_NG_LAYER } from './state/ngViewerState.store'
 export { CHANGE_NAVIGATION, DESELECT_LANDMARKS, FETCHED_TEMPLATE, NEWVIEWER, SELECT_LANDMARKS, SELECT_PARCELLATION, SELECT_REGIONS, USER_LANDMARKS } from './state/viewerState.store'
 export { IDataEntry, IParcellationRegion, FETCHED_DATAENTRIES, FETCHED_SPATIAL_DATA, ILandmark, IOtherLandmarkGeometry, IPlaneLandmarkGeometry, IPointLandmarkGeometry, IProperty, IPublication, IReferenceSpace, IFile, IFileSupplementData } from './state/dataStore.store'
-export { CLOSE_SIDE_PANEL, MOUSE_OVER_LANDMARK, MOUSE_OVER_SEGMENT, OPEN_SIDE_PANEL, SHOW_SIDE_PANEL_CONNECTIVITY, HIDE_SIDE_PANEL_CONNECTIVITY, COLLAPSE_SIDE_PANEL_CURRENT_VIEW, EXPAND_SIDE_PANEL_CURRENT_VIEW } from './state/uiState.store'
+export { CLOSE_SIDE_PANEL, MOUSE_OVER_LANDMARK, MOUSE_OVER_SEGMENT, OPEN_SIDE_PANEL, SHOW_SIDE_PANEL_CONNECTIVITY, HIDE_SIDE_PANEL_CONNECTIVITY, COLLAPSE_SIDE_PANEL_CURRENT_VIEW, EXPAND_SIDE_PANEL_CURRENT_VIEW, ENABLE_PLUGIN_REGION_SELECTION, DISABLE_PLUGIN_REGION_SELECTION } from './state/uiState.store'
 export { UserConfigStateUseEffect } from './state/userConfigState.store'
 
 export const GENERAL_ACTION_TYPES = {

src/ui/connectivityBrowser/connectivityBrowser.component.ts

@@ -8,9 +8,11 @@ import {
 import {select, Store} from "@ngrx/store";
 import {fromEvent, Observable, Subscription} from "rxjs";
 import {distinctUntilChanged, filter, map} from "rxjs/operators";
-import {AtlasViewerConstantsServices} from "src/atlasViewer/atlasViewer.constantService.service";
 import {CLEAR_CONNECTIVITY_REGION, SET_CONNECTIVITY_REGION} from "src/services/state/viewerState.store";
 import {HIDE_SIDE_PANEL_CONNECTIVITY, isDefined, safeFilter} from "src/services/stateStore.service";
+import {VIEWERSTATE_CONTROLLER_ACTION_TYPES} from "src/ui/viewerStateController/viewerState.base";
+
+const compareFn = (it, item) => it.name === item.name
 
 @Component({
   selector: 'connectivity-browser',
@@ -23,14 +25,18 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
 
     private connectivityRegion$: Observable<any>
     private selectedParcellation$: Observable<any>
+    public selectedRegions$: Observable<any[]>
+
     private subscriptions: Subscription[] = []
     public expandMenuIndex = -1
     public allRegions = []
     public defaultColorMap: Map<string, Map<number, {red: number, green: number, blue: number}>>
     public parcellationHasConnectivityData = true
     private areaHemisphere: string
-
     public math = Math
+    public compareFn = compareFn
+
+
 
     @ViewChild('connectivityComponent', {read: ElementRef}) public connectivityComponentElement: ElementRef
 
@@ -51,6 +57,12 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
         map(state => state.connectivityRegion),
       )
 
+      this.selectedRegions$ = this.store$.pipe(
+        select('viewerState'),
+        filter(state => isDefined(state) && isDefined(state.regionsSelected)),
+        map(state => state.regionsSelected),
+        distinctUntilChanged(),
+      )
     }
 
     public ngAfterViewInit(): void {
@@ -102,6 +114,24 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
       })
     }
 
+    navigateToRegion(region) {
+      this.store$.dispatch({
+        type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.NAVIGATETO_REGION,
+        payload: { region: this.getRegionWithName(region) },
+      })
+    }
+
+    toggleRegionSelection(region) {
+      this.store$.dispatch({
+        type: VIEWERSTATE_CONTROLLER_ACTION_TYPES.TOGGLE_REGION_SELECT,
+        payload: { region: this.getRegionWithName(region) },
+      })
+    }
+
+    getRegionWithName(region) {
+      return this.allRegions.find(ar => ar.name === region)
+    }
+
     public closeConnectivityView() {
       this.setDefaultMap()
 
@@ -127,11 +157,9 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
       this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
 
       const existingMap: Map<string, Map<number, {red: number, green: number, blue: number}>> = (getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
-
       const colorMap = new Map(existingMap)
 
       this.allRegions.forEach(r => {
-
         if (r.ngId) {
           colorMap.get(r.ngId).set(r.labelIndex, {red: 255, green: 255, blue: 255})
         }
@@ -139,7 +167,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
 
       this.connectedAreas.forEach(area => {
         const areaAsRegion = this.allRegions
-          .filter(r => r.name === area.name + this.areaHemisphere)
+          .filter(r => r.name === area.name)
           .map(r => r)
 
         if (areaAsRegion && areaAsRegion.length && areaAsRegion[0].ngId) {

src/ui/connectivityBrowser/connectivityBrowser.template.html

@@ -6,10 +6,13 @@
             loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
             show-export="true"
             show-source="true"
-            show-title="true"
-            show-toolbar="true">
-        <div slot="header" class="w-100 d-flex justify-content-end mt-3"><span
-                class="cursorPointer" (click)="closeConnectivityView()">X</span></div>
+            show-title="false"
+            show-toolbar="true"
+            show-description="true">
+        <div slot="header" class="w-100 d-flex justify-content-between mt-3">
+            <span>Connectivity Browser</span>
+            <i (click)="closeConnectivityView()" class="far fa-times-circle cursorPointer"></i>
+        </div>
 
         <div slot="connectedRegionMenu">
 
@@ -24,35 +27,28 @@
                 </span>
                 <div class="d-flex align-items-center justify-content-around">
                     <small class="d-flex flex-column align-items-center w-100">
-                        <!--ToDo Implement function when Hemisphere information will be available -->
-                        <!--                        *ngIf="(selectedRegions$ | async) as selectedRegions"-->
-                        <!--                        (click)="toggleRegionWithId(region.ngId, region.labelIndex, regionIsSelected(selectedRegions, region.ngId, region.labelIndex))">-->
-
-                        <button mat-icon-button class="border">
-                            <!--                            <i class="fas fa-hand-pointer mt-n1"></i>-->
+                        <button mat-icon-button class="border" (click)="toggleRegionSelection(connectedAreas[expandMenuIndex].name)">
                             <span class="fa-stack fa-1x ">
                                 <i class="fas fa-hand-pointer fa-stack-1x"></i>
-                                <!--ToDo Implement function when Hemisphere information will be available -->
-                                <!--                    <i class="fas fa-slash fa-stack-1x fa-inverse"-->
-                                <!--                       *ngIf="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)"></i>-->
+                                <i class="fas fa-slash fa-stack-1x fa-inverse"
+                                   *ngIf="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn)"></i>
                             </span>
                         </button>
-                        <!--                        <span [innerText]="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)? 'Deselect' : 'Select'"></span>-->
-                        <span>Select</span>
+                        <span [innerText]="(selectedRegions$ | async | includes : getRegionWithName(connectedAreas[expandMenuIndex].name) : compareFn) ? 'Deselect' : 'Select'"></span>
                     </small>
 
                     <small class="d-flex flex-column align-items-center w-100">
-                        <button mat-icon-button class="border">
+                        <button mat-icon-button class="border" (click)="navigateToRegion(connectedAreas[expandMenuIndex].name)">
                             <i class="fas fa-crosshairs  mt-n1"></i>
                         </button>
-                        Navigate
+                        Go To
                     </small>
 
                     <small class="d-flex flex-column align-items-center w-100">
                         <button mat-icon-button class="border" (click)="updateConnevtivityRegion(connectedAreas[expandMenuIndex].name)">
                             <i class="fab fa-connectdevelop  mt-n1"></i>
                         </button>
-                        Connectivity
+                        Set as Source
                     </small>
                 </div>
             </div>

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

@@ -20,11 +20,25 @@
         Navigate
       </span>
     </button>
-    <button *ngIf="hasConnectivity" mat-button (click)="showConnectivity(region.name)">
+    <button *ngIf="hasConnectivity"
+            mat-button
+            [matMenuTriggerFor]="connectivitySourceDatasets"
+            #connectivityMenuButton="matMenuTrigger">
       <i class="fab fa-connectdevelop"></i>
       <span>
         Connectivity
       </span>
+      <i class="fas fa-angle-right"></i>
     </button>
+
+    <!-- ToDo make dynamic with AVAILABLE CONNECTIVITY DATASETS data - get info from atlas viewer core -->
+    <mat-menu #connectivitySourceDatasets="matMenu" xPosition="before" (click)="$event.stopPropagation()" hasBackdrop="false">
+      <div>
+        <button mat-menu-item
+                (click)="showConnectivity(region.name)">
+          <span>1000 Brains Study</span>
+        </button>
+      </div>
+    </mat-menu>
   </mat-card-actions>
 </mat-card>
\ No newline at end of file