diff --git a/package.json b/package.json
index f8dbd7d7edb68224bb627c46b88a387f4c461459..7a308a21776af00a0f18f4f60594abd9c917e363 100644
--- a/package.json
+++ b/package.json
@@ -85,5 +85,7 @@
     "webpack-merge": "^4.1.2",
     "zone.js": "^0.9.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "hbp-connectivity-component": "0.0.17"
+  }
 }
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 13248f4a0d39349ba8f58b45cbc309246b1c9788..49cb9ca2e258628fb3f952a8a0ebd039c2ca468b 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -1,8 +1,36 @@
-import { Component, HostBinding, ViewChild, ViewContainerRef, OnDestroy, OnInit, TemplateRef, AfterViewInit, Renderer2 } from "@angular/core";
+import {
+  Component,
+  HostBinding,
+  ViewChild,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  AfterViewInit,
+  Renderer2,
+  ElementRef
+} from "@angular/core";
 import { Store, select, ActionsSubject } from "@ngrx/store";
-import { ViewerStateInterface, isDefined, FETCHED_SPATIAL_DATA, UPDATE_SPATIAL_DATA, safeFilter } from "../services/stateStore.service";
-import { Observable, Subscription, combineLatest, interval, merge, of } from "rxjs";
-import { map, filter, distinctUntilChanged, delay, concatMap, withLatestFrom } from "rxjs/operators";
+import {
+  ViewerStateInterface,
+  isDefined,
+  FETCHED_SPATIAL_DATA,
+  UPDATE_SPATIAL_DATA,
+  safeFilter,
+  CHANGE_NAVIGATION,
+  generateLabelIndexId,
+  UIStateInterface,
+  SHOW_SIDE_PANEL_CONNECTIVITY,
+  EXPAND_SIDE_PANEL_CURRENT_VIEW
+} from "../services/stateStore.service";
+import {Observable, Subscription, combineLatest, interval, merge, of, Observer} from "rxjs";
+import {
+  map,
+  filter,
+  distinctUntilChanged,
+  delay,
+  concatMap,
+  withLatestFrom,
+} from "rxjs/operators";
 import { AtlasViewerDataService } from "./atlasViewer.dataService.service";
 import { WidgetServices } from "./widgetUnit/widgetService.service";
 import { LayoutMainSide } from "../layouts/mainside/mainside.component";
@@ -17,6 +45,12 @@ import { AGREE_COOKIE, AGREE_KG_TOS, SHOW_KG_TOS, SHOW_BOTTOM_SHEET } from "src/
 import { TabsetComponent } from "ngx-bootstrap/tabs";
 import { LocalFileService } from "src/services/localFile.service";
 import { MatDialog, MatDialogRef, MatSnackBar, MatSnackBarRef, MatBottomSheet, MatBottomSheetRef } from "@angular/material";
+import {SearchSideNav} from "src/ui/searchSideNav/searchSideNav.component";
+import {CaptureClickListenerDirective} from "src/util/directives/captureClickListener.directive";
+import {
+  CLOSE_SIDE_PANEL,
+  OPEN_SIDE_PANEL
+} from "src/services/state/uiState.store";
 
 /**
  * TODO
@@ -44,9 +78,12 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild(NehubaContainer) nehubaContainer: NehubaContainer
 
   @ViewChild(FixedMouseContextualContainerDirective) rClContextualMenu: FixedMouseContextualContainerDirective
+  @ViewChild(CaptureClickListenerDirective) captureClickListenerDirective: CaptureClickListenerDirective
 
   @ViewChild('mobileMenuTabs') mobileMenuTabs: TabsetComponent
 
+  @ViewChild('searchSideNav') searchSideNav: SearchSideNav
+
   /**
    * required for styling of all child components
    */
@@ -55,7 +92,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   @HostBinding('attr.ismobile')
   public ismobile: boolean = false
-
   meetsRequirement: boolean = true
 
   public sidePanelView$: Observable<string|null>
@@ -71,8 +107,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   public dedicatedView$: Observable<string | null>
   public onhoverSegments$: Observable<string[]>
-  public onhoverSegmentsForFixed$: Observable<string[]>
-  
+
   public onhoverLandmark$ : Observable<{landmarkName: string, datasets: any} | null>
   private subscriptions: Subscription[] = []
 
@@ -90,10 +125,12 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   public sidePanelOpen$: Observable<boolean>
 
-  public toggleMessage = this.constantsService.toggleMessage
+
+  onhoverSegmentsForFixed$: Observable<string[]>
+  regionToolsMenuVisible = false
 
   constructor(
-    private store: Store<ViewerStateInterface>,
+    private store: Store<ViewerStateInterface | UIStateInterface>,
     public dataService: AtlasViewerDataService,
     private widgetServices: WidgetServices,
     private constantsService: AtlasViewerConstantsServices,
@@ -354,7 +391,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    
     /**
      * preload the main bundle after atlas viewer has been loaded. 
      * This should speed up where user first navigate to the home page,
@@ -397,9 +433,38 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     })
 
     this.onhoverSegmentsForFixed$ = this.rClContextualMenu.onShow.pipe(
-      withLatestFrom(this.onhoverSegments$),
-      map(([_flag, onhoverSegments]) => onhoverSegments || [])
+        withLatestFrom(this.onhoverSegments$),
+        map(([_flag, onhoverSegments]) => onhoverSegments || [])
     )
+
+  }
+
+  mouseDownNehuba(event) {
+    this.regionToolsMenuVisible = false
+    this.rClContextualMenu.hide()
+  }
+
+  mouseUpNehuba(event) {
+    // if (this.mouseUpLeftPosition === event.pageX && this.mouseUpTopPosition === event.pageY) {}
+    this.regionToolsMenuVisible = true
+    if (!this.rClContextualMenu) return
+    this.rClContextualMenu.mousePos = [
+      event.clientX,
+      event.clientY
+    ]
+    this.rClContextualMenu.show()
+  }
+
+  toggleSideNavMenu(opened) {
+    this.store.dispatch({type: opened? CLOSE_SIDE_PANEL : OPEN_SIDE_PANEL})
+  }
+
+  showConnectivity(event) {
+    // setTimeout(() => )
+    this.toggleSideNavMenu(false)
+    this.store.dispatch({type: EXPAND_SIDE_PANEL_CURRENT_VIEW})
+    this.store.dispatch({type: SHOW_SIDE_PANEL_CONNECTIVITY})
+    this.searchSideNav.connectivityActive.next(event)
   }
 
   /**
@@ -458,20 +523,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
     })
   }
 
-  nehubaClickHandler(event:MouseEvent){
-    if (!this.rClContextualMenu) return
-    this.rClContextualMenu.mousePos = [
-      event.clientX,
-      event.clientY
-    ]
-    this.rClContextualMenu.show()
-  }
-
-  openLandmarkUrl(dataset) {
-    this.rClContextualMenu.hide()
-    window.open(dataset.externalLink, "_blank")
-  }
-
   @HostBinding('attr.version')
   public _version : string = VERSION
 }
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 20a455ef34dff06334cf514684e342d04a098451..7637a7d4c44ef8498f19110c014a0d1da6c958d8 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -41,7 +41,9 @@
     <ui-nehuba-container iav-mouse-hover #iavMouseHoverEl="iavMouseHover"
       [currentOnHoverObs$]="iavMouseHoverEl.currentOnHoverObs$"
       [currentOnHover]="iavMouseHoverEl.currentOnHoverObs$ | async"
-      (contextmenu)="$event.stopPropagation(); $event.preventDefault();">
+      iav-captureClickListenerDirective
+      (mouseDownEmitter)="mouseDownNehuba($event)"
+      (mapClicked)="mouseUpNehuba($event)">
     </ui-nehuba-container>
 
     <div class="z-index-10 position-absolute pe-none w-100 h-100">
@@ -51,8 +53,8 @@
         class="w-100 h-100 bg-none mat-drawer-content-overflow-visible">
         <mat-drawer mode="push"
           class="col-10 col-sm-10 col-md-4 col-lg-3 col-xl-2 p-2 bg-none box-shadow-none overflow-visible"
-          [disableClose]="true" [autoFocus]="false" [opened]="true" #sideNavDrawer>
-          <search-side-nav (dismiss)="sideNavDrawer.close()" (open)="sideNavDrawer.open()"
+          [disableClose]="true" [autoFocus]="false" [opened]="sidePanelOpen$ | async" #sideNavDrawer>
+          <search-side-nav (dismiss)="toggleSideNavMenu(true)"
             class="h-100 d-block overflow-visible" #searchSideNav>
           </search-side-nav>
 
@@ -65,7 +67,7 @@
             [matBadge]="!sideNavDrawer.opened && (selectedRegions$ | async)?.length ? (selectedRegions$ | async)?.length : null"
             [matTooltip]="!sideNavDrawer.opened ? (selectedRegions$ | async)?.length ?  ('Explore ' + (selectedRegions$ | async)?.length + ' selected regions.') : 'Explore current view' : null"
             [ngClass]="{'translate-x-6-n': !sideNavDrawer.opened, 'translate-x-7-n': sideNavDrawer.opened}"
-            class="pe-all mt-5" (click)="sideNavDrawer.toggle()">
+            class="pe-all mt-5" (click)="toggleSideNavMenu(sideNavDrawer.opened)">
             <i [ngClass]="{'fa-chevron-left': sideNavDrawer.opened, 'fa-chevron-right': !sideNavDrawer.opened}"
               class="fas translate-x-3"></i>
 
@@ -102,53 +104,6 @@
         </ng-container>
       </div>
 
-      <!-- TODO document fixedMouseContextualContainerDirective , then deprecate this -->
-      <!-- TODO move to nehuba overlay container -->
-      <panel-component class="shadow" fixedMouseContextualContainerDirective #rClContextMenu>
-        <div heading>
-          <h5 class="pe-all p-2 m-0">
-            What's here?
-          </h5>
-        </div>
-        <div body>
-
-          <div *ngIf="(onhoverSegmentsForFixed$ | async)?.length > 0 || (selectedRegions$ | async)?.length > 0"
-            class="p-2">
-            Search for data relating to:
-          </div>
-
-          <div *ngFor="let onhoverSegmentFixed of (onhoverSegmentsForFixed$ | async)"
-            (click)="searchRegion([onhoverSegmentFixed])"
-            class="ws-no-wrap text-left pe-all btn btn-sm btn-secondary btn-block mt-0" data-toggle="tooltip"
-            data-placement="top" [title]="onhoverSegmentFixed.name">
-            <small class="text-semi-transparent">(hovering)</small> {{ onhoverSegmentFixed.name }}
-          </div>
-
-          <div *ngIf="(selectedRegions$ | async)?.length > 0 && (selectedRegions$ | async); let selectedRegions"
-            (click)="searchRegion(selectedRegions)"
-            class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
-            <ng-container *ngIf="selectedRegions.length > 1">
-              <small class="text-semi-transparent">(selected)</small> {{ selectedRegions.length }} selected regions
-            </ng-container>
-            <ng-container *ngIf="selectedRegions.length === 1">
-              <small class="text-semi-transparent">(selected)</small> {{ selectedRegions[0].name }}
-            </ng-container>
-          </div>
-
-          <div class="p-2 text-muted"
-            *ngIf="(onhoverSegmentsForFixed$ | async)?.length === 0 && (selectedRegions$ | async)?.length === 0 && (onhoverLandmarksForFixed$ | async)?.length === 0">
-            Right click on a parcellation region or select parcellation regions to search KG for associated datasets.
-          </div>
-
-          <ng-template #noRegionSelected>
-            <div (click)="searchRegion()" class="ws-no-wrap text-left pe-all mt-0 btn btn-sm btn-secondary btn-block">
-              No region selected. Search KG for all datasets in this template space.
-            </div>
-          </ng-template>
-
-        </div>
-      </panel-component>
-
       <div floatingMouseContextualContainerDirective>
 
         <div class="d-inline-block" iav-mouse-hover #iavMouseHoverConetxtualBlock="iavMouseHover" contextualBlock>
@@ -174,6 +129,26 @@
         <!-- TODO Potentially implementing plugin contextual info -->
       </div>
 
+      <panel-component  class="shadow p-0 m-0" fixedMouseContextualContainerDirective [style.width]="selectedParcellation && selectedParcellation.name.includes('JuBrain Cytoarchitectonic Atlas')? '18rem' : '15rem'">
+        <div body class="pe-all" *ngIf="(onhoverSegmentsForFixed$ | async) as onHoverSegments">
+          <mat-card *ngIf="onHoverSegments.length > 0 && regionToolsMenuVisible" class="d-flex flex-column p-0">
+            <div *ngFor="let onHoverRegion of onHoverSegments; let first = first"
+                 class="border-dark rounded">
+              <mat-divider *ngIf="!first"></mat-divider>
+
+              <region-menu
+                                 [selectedRegions$]="selectedRegions$"
+                                 [region]="onHoverRegion"
+                                 [hasConnectivity]="selectedParcellation && selectedParcellation.name.includes('JuBrain Cytoarchitectonic Atlas')"
+                                 (exploreConnectivity) = "showConnectivity($event);">
+              </region-menu>
+
+            </div>
+          </mat-card>
+        </div>
+
+      </panel-component>
+
     </layout-floating-container>
 
     <!-- required for manufacturing plugin templates -->
@@ -222,4 +197,4 @@
 <!-- logo tmpl -->
 <ng-template #logoTmpl>
   <logo-container></logo-container>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/main.module.ts b/src/main.module.ts
index 6dd663fae585edfc1048ea2c5c8d5dc5beece6f9..772d6b75b57655b51ee70f90d3c4343537de7666 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ComponentsModule } from "./components/components.module";
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { UIModule } from "./ui/ui.module";
@@ -30,7 +30,6 @@ import { FloatingContainerDirective } from "./util/directives/floatingContainer.
 import { PluginFactoryDirective } from "./util/directives/pluginFactory.directive";
 import { FloatingMouseContextualContainerDirective } from "./util/directives/floatingMouseContextualContainer.directive";
 import { AuthService } from "./services/auth.service";
-import { FixedMouseContextualContainerDirective } from "./util/directives/FixedMouseContextualContainerDirective.directive";
 import { DatabrowserService } from "./ui/databrowserModule/databrowser.service";
 import { TransformOnhoverSegmentPipe } from "./atlasViewer/onhoverSegment.pipe";
 import {HttpClientModule} from "@angular/common/http";
@@ -54,6 +53,8 @@ import 'hammerjs'
 import 'src/res/css/version.css'
 import 'src/theme.scss'
 import 'src/res/css/extra_styles.css'
+import {CaptureClickListenerDirective} from "src/util/directives/captureClickListener.directive";
+
 
 @NgModule({
   imports : [
@@ -107,8 +108,8 @@ import 'src/res/css/extra_styles.css'
     FloatingContainerDirective,
     PluginFactoryDirective,
     FloatingMouseContextualContainerDirective,
-    FixedMouseContextualContainerDirective,
     DragDropDirective,
+    CaptureClickListenerDirective,
 
     /* pipes */
     GetNamesPipe,
@@ -143,6 +144,9 @@ import 'src/res/css/extra_styles.css'
   ],
   bootstrap : [
     AtlasViewer
+  ],
+  schemas: [
+      CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 
diff --git a/src/main.ts b/src/main.ts
index 479dbb34491927cd7ed00952948534c70cdc698f..831701b2a5093f578acf33da526701c76011cee9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,13 @@ import 'third_party/testSafari.js'
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { MainModule } from './main.module';
+import {defineCustomElements} from 'hbp-connectivity-component/dist/loader'
 
 const requireAll = (r:any) => {r.keys().forEach(r)}
 requireAll(require.context('./res/ext',false, /\.json$/))
 requireAll(require.context('./res/images',true,/\.jpg|\.png/))
 requireAll(require.context(`./plugin_examples`, true))
 
-platformBrowserDynamic().bootstrapModule(MainModule)
\ No newline at end of file
+platformBrowserDynamic().bootstrapModule(MainModule)
+
+defineCustomElements(window)
\ No newline at end of file
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 2781c6cad4bac7c850d42f3e07cecb7d374d9f66..774f1adebd5fe25aee189b0b48c594e0234ff8af 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -679,4 +679,12 @@ body::after
   padding: 0!important;
   overflow: hidden;
   margin-top: 0.25rem;
-}
\ No newline at end of file
+}
+
+.linear-gradient-fade:before {
+  content:'';
+  width:100%;
+  height:100%;
+  position:absolute;
+  background:linear-gradient(transparent 50px, #424242);
+}
diff --git a/src/services/state/uiState.store.ts b/src/services/state/uiState.store.ts
index 396ebfe8ea69d2ccce217f87f6ace0de7536421a..e31af30dd3b68114374449487c61475592c3dbcc 100644
--- a/src/services/state/uiState.store.ts
+++ b/src/services/state/uiState.store.ts
@@ -11,7 +11,9 @@ const defaultState : UIStateInterface = {
   mouseOverUserLandmark: null,
 
   focusedSidePanel: null,
-  sidePanelOpen: false,
+  sidePanelOpen: true,
+  sidePanelManualCollapsibleView: '',
+  sidePanelCurrentViewOpened: false,
 
   snackbarMessage: null,
 
@@ -58,15 +60,6 @@ export function uiState(state:UIStateInterface = defaultState,action:UIAction){
         ...state,
         snackbarMessage: Symbol(snackbarMessage)
       }
-    /**
-     * TODO deprecated
-     * remove ASAP
-     */
-    case TOGGLE_SIDE_PANEL:
-      return {
-        ...state,
-        sidePanelOpen: !state.sidePanelOpen
-      }
     case OPEN_SIDE_PANEL:
       return {
         ...state,
@@ -77,6 +70,29 @@ export function uiState(state:UIStateInterface = defaultState,action:UIAction){
         ...state,
         sidePanelOpen: false
       }
+
+    case EXPAND_SIDE_PANEL_CURRENT_VIEW:
+      return {
+        ...state,
+        sidePanelCurrentViewOpened: true
+      }
+    case COLLAPSE_SIDE_PANEL_CURRENT_VIEW:
+      return {
+        ...state,
+        sidePanelCurrentViewOpened: false
+      }
+
+    case SHOW_SIDE_PANEL_CONNECTIVITY:
+      return {
+        ...state,
+        sidePanelManualCollapsibleView: 'Connectivity'
+      }
+
+    case HIDE_SIDE_PANEL_CONNECTIVITY:
+      return {
+        ...state,
+        sidePanelManualCollapsibleView: ''
+      }
     case AGREE_COOKIE:
       /**
        * TODO replace with server side logic
@@ -114,6 +130,8 @@ export interface UIStateInterface{
     segment: any | null
   }[]
   sidePanelOpen: boolean
+  sidePanelManualCollapsibleView: 'Connectivity' | '' | null
+  sidePanelCurrentViewOpened: boolean
   mouseOverSegment: any | number
 
   mouseOverLandmark: any
@@ -151,9 +169,12 @@ export const MOUSE_OVER_SEGMENTS = `MOUSE_OVER_SEGMENTS`
 export const MOUSE_OVER_LANDMARK = `MOUSE_OVER_LANDMARK`
 export const MOUSEOVER_USER_LANDMARK = `MOUSEOVER_USER_LANDMARK`
 
-export const TOGGLE_SIDE_PANEL = 'TOGGLE_SIDE_PANEL'
 export const CLOSE_SIDE_PANEL = `CLOSE_SIDE_PANEL`
 export const OPEN_SIDE_PANEL = `OPEN_SIDE_PANEL`
+export const SHOW_SIDE_PANEL_CONNECTIVITY = `SHOW_SIDE_PANEL_CONNECTIVITY`
+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 AGREE_COOKIE = `AGREE_COOKIE`
 export const AGREE_KG_TOS = `AGREE_KG_TOS`
diff --git a/src/services/stateStore.service.ts b/src/services/stateStore.service.ts
index 842499c18bcb4d3083a9494fab4f71ca85ca96ad..92950ea166434227b84fd62151ae5f24ada4461f 100644
--- a/src/services/stateStore.service.ts
+++ b/src/services/stateStore.service.ts
@@ -5,7 +5,7 @@ export { pluginState } from './state/pluginState.store'
 export { NgViewerAction, NgViewerStateInterface, ngViewerState, ADD_NG_LAYER, FORCE_SHOW_SEGMENT, HIDE_NG_LAYER, REMOVE_NG_LAYER, SHOW_NG_LAYER } from './state/ngViewerState.store'
 export { CHANGE_NAVIGATION, AtlasAction, DESELECT_LANDMARKS, FETCHED_TEMPLATE, NEWVIEWER, SELECT_LANDMARKS, SELECT_PARCELLATION, SELECT_REGIONS, USER_LANDMARKS, ViewerStateInterface, viewerState } from './state/viewerState.store'
 export { DataEntry, ParcellationRegion, DataStateInterface, DatasetAction, FETCHED_DATAENTRIES, FETCHED_SPATIAL_DATA, Landmark, OtherLandmarkGeometry, PlaneLandmarkGeometry, PointLandmarkGeometry, Property, Publication, ReferenceSpace, dataStore, File, FileSupplementData } from './state/dataStore.store'
-export { CLOSE_SIDE_PANEL, MOUSE_OVER_LANDMARK, MOUSE_OVER_SEGMENT, OPEN_SIDE_PANEL, TOGGLE_SIDE_PANEL, UIAction, UIStateInterface, uiState } 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, UIAction, UIStateInterface, uiState } from './state/uiState.store'
 export { SPATIAL_GOTO_PAGE, SpatialDataEntries, SpatialDataStateInterface, UPDATE_SPATIAL_DATA, spatialSearchState } from './state/spatialSearchState.store'
 export { userConfigState, UserConfigStateUseEffect, USER_CONFIG_ACTION_TYPES } from './state/userConfigState.store'
 
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.component.ts b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f85701a01c24f7325f274ad89afcec9e2691af9
--- /dev/null
+++ b/src/ui/connectivityBrowser/connectivityBrowser.component.ts
@@ -0,0 +1,131 @@
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Inject,
+    Input,
+    OnDestroy,
+    Output,
+    ViewChild
+} from "@angular/core";
+import {AtlasViewerConstantsServices} from "src/atlasViewer/atlasViewer.constantService.service";
+import {Observable, Subject, Subscription} from "rxjs";
+import {select, Store} from "@ngrx/store";
+import {HIDE_SIDE_PANEL_CONNECTIVITY, safeFilter} from "src/services/stateStore.service";
+import {distinctUntilChanged, map} from "rxjs/operators";
+
+@Component({
+    selector: 'connectivity-browser',
+    templateUrl: './connectivityBrowser.template.html',
+})
+export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
+
+    @Input() region: string = ''
+    private connectedAreas = []
+
+
+    private selectedParcellation$: Observable<any>
+    private subscriptions: Subscription[] = []
+    private selectedParcellation: any
+    public collapseMenu = -1
+    public allRegions = []
+    public defaultColorMap
+
+    math = Math
+
+    @ViewChild('connectivityComponent', {read: ElementRef}) connectivityComponentElement: ElementRef
+
+    constructor(private constantService: AtlasViewerConstantsServices, private store$: Store<any> ){
+        this.selectedParcellation$ = this.store$.pipe(
+            select('viewerState'),
+            safeFilter('parcellationSelected'),
+            map(state=>state.parcellationSelected),
+            distinctUntilChanged(),
+        )
+    }
+
+    ngAfterViewInit(): void {
+        this.subscriptions.push(
+            this.selectedParcellation$.subscribe(parcellation => {
+                this.selectedParcellation = parcellation
+                this.getAllRegionsFromParcellation(parcellation.regions)
+            })
+        )
+
+        this.connectivityComponentElement.nativeElement.addEventListener('connectivityDataReceived', e => {
+            this.connectedAreas = e.detail
+            if (this.connectedAreas.length > 0) this.saveAndDisableExistingColorTemplate()
+        })
+
+        this.connectivityComponentElement.nativeElement.addEventListener('collapsedMenuChanged', e => {
+            this.collapseMenu = e.detail
+        })
+     }
+
+     ngOnDestroy(): void {
+        this.subscriptions.forEach(s => s.unsubscribe())
+     }
+
+    public closeConnectivityView() {
+
+        this.allRegions.forEach(r => {
+            if (r && r.ngId && r.rgb) {
+                // @ts-ignore
+                this.defaultColorMap.get(r.ngId).set(r.labelIndex, {red: r.rgb[0], green: r.rgb[1], blue: r.rgb[2]})
+            }
+            getWindow().interactiveViewer.viewerHandle.applyLayersColourMap(this.defaultColorMap)
+        })
+
+        this.store$.dispatch({
+            type: HIDE_SIDE_PANEL_CONNECTIVITY,
+        })
+    }
+
+    saveAndDisableExistingColorTemplate() {
+
+        const hemisphere = this.region.includes('left hemisphere')? ' - left hemisphere' : ' - right hemisphere'
+
+        this.defaultColorMap = new Map(getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
+
+        const existingMap = (getWindow().interactiveViewer.viewerHandle.getLayersSegmentColourMap())
+
+        const map = new Map(existingMap)
+
+        this.allRegions.forEach(r => {
+
+            if (r.ngId) {
+                // @ts-ignore
+                map.get(r.ngId).set(r.labelIndex, {red: 255, green: 255, blue: 255})
+            }
+        })
+
+        this.connectedAreas.forEach(area => {
+            const areaAsRegion = this.allRegions
+                .filter(r => r.name === area.name + hemisphere)
+                .map(r => r)
+
+            if (areaAsRegion && areaAsRegion.length && areaAsRegion[0].ngId)
+                // @ts-ignore
+                map.get(areaAsRegion[0].ngId).set(areaAsRegion[0].labelIndex, {red: area.color.r, green: area.color.g, blue: area.color.b})
+
+            getWindow().interactiveViewer.viewerHandle.applyLayersColourMap(map)
+        })
+    }
+
+    getAllRegionsFromParcellation = (regions) => {
+        for (let i = 0; i<regions.length; i ++) {
+            if (regions[i].children && regions[i].children.length) {
+                this.getAllRegionsFromParcellation(regions[i].children)
+            } else {
+                this.allRegions.push(regions[i])
+            }
+        }
+    }
+
+
+}
+
+function getWindow (): any {
+    return window;
+}
\ No newline at end of file
diff --git a/src/ui/connectivityBrowser/connectivityBrowser.template.html b/src/ui/connectivityBrowser/connectivityBrowser.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..31dba5728019e20c2ae408b7060e1cc7c1bebcfd
--- /dev/null
+++ b/src/ui/connectivityBrowser/connectivityBrowser.template.html
@@ -0,0 +1,63 @@
+<div class="w-100 h-100 overflow-auto d-block d-flex flex-column pb-2" #connectivityComponent>
+    <hbp-connectivity-matrix-row
+            [region]="region"
+            theme="dark"
+            loadurl="https://connectivityquery-connectivity.apps-dev.hbp.eu/connectivity"
+            show-description="true"
+            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>
+
+        <div slot="connectedRegionMenu">
+
+            <div class="d-flex flex-column" *ngIf="collapseMenu >= 0">
+                <mat-divider></mat-divider>
+                <span class="mt-2 mr-2 ml-2">
+                    <small>Region: {{connectedAreas[collapseMenu].name}}</small>
+                    <br>
+                    <small>Number of Connection: {{connectedAreas[collapseMenu].numberOfConnections}}</small>
+                    <br>
+                    <small>Log(123) = {{math.log10(connectedAreas[collapseMenu].numberOfConnections)}}</small>
+                </span>
+                <div class="d-flex align-items-center justify-content-around">
+                    <small class="d-flex flex-column align-items-center w-100">
+
+                        <!--                        *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>-->
+                            <span class="fa-stack fa-1x ">
+                                <i class="fas fa-hand-pointer fa-stack-1x"></i>
+                                <!--                    <i class="fas fa-slash fa-stack-1x fa-inverse"-->
+                                <!--                       *ngIf="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)"></i>-->
+                            </span>
+                        </button>
+                        <!--                        <span [innerText]="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)? 'Deselect' : 'Select'"></span>-->
+                        <span>Select</span>
+                    </small>
+
+                    <small class="d-flex flex-column align-items-center w-100">
+                        <button mat-icon-button class="border">
+                            <i class="fas fa-crosshairs  mt-n1"></i>
+                        </button>
+                        Navigate
+                    </small>
+
+                    <small class="d-flex flex-column align-items-center w-100">
+                        <button mat-icon-button class="border" (click)="region = connectedAreas[collapseMenu].name">
+                            <!--(click)="changeConnectivityRegion('connection.name')"-->
+                            <i class="fab fa-connectdevelop  mt-n1"></i>
+                        </button>
+                        Connectivity
+                    </small>
+                </div>
+            </div>
+
+
+        </div>
+    </hbp-connectivity-matrix-row>
+</div>
\ No newline at end of file
diff --git a/src/ui/regionToolsMenu/regionMenu.component.ts b/src/ui/regionToolsMenu/regionMenu.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86d8dade3297f78df6c619b1005eb6f4d01b6c0b
--- /dev/null
+++ b/src/ui/regionToolsMenu/regionMenu.component.ts
@@ -0,0 +1,58 @@
+import {AfterViewInit, Component, EventEmitter, Input, Output, ViewChild} from "@angular/core";
+import {Observable} from "rxjs";
+import {map, withLatestFrom} from "rxjs/operators";
+import {FixedMouseContextualContainerDirective} from "src/util/directives/FixedMouseContextualContainerDirective.directive";
+import {VIEWER_STATE_ACTION_TYPES} from "src/services/effect/effect";
+import {CHANGE_NAVIGATION, generateLabelIndexId} from "src/services/stateStore.service";
+import {ADD_TO_REGIONS_SELECTION_WITH_IDS} from "src/services/state/viewerState.store";
+import {Store} from "@ngrx/store";
+import {SearchSideNav} from "src/ui/searchSideNav/searchSideNav.component";
+
+@Component({
+    selector: 'region-menu',
+    templateUrl: './regionMenu.template.html',
+    styleUrls: ['./regionMenu.style.css']
+})
+export class RegionMenuComponent {
+    @Input() selectedRegions$: any
+    @Input() region: any
+    @Input() hasConnectivity: boolean
+
+    @Output() exploreConnectivity: EventEmitter<string> = new EventEmitter()
+
+    @ViewChild('searchSideNav') searchSideNav: SearchSideNav
+
+    regionToolsMenuVisible = true
+    collapsedRegionDescription = false
+
+    constructor(private store$: Store<any>) {}
+
+
+    toggleRegionWithId(ngId, labelIndex, removeFlag: any){
+        if (removeFlag) {
+            this.store$.dispatch({
+                type: VIEWER_STATE_ACTION_TYPES.DESELECT_REGIONS_WITH_ID,
+                deselecRegionIds: [generateLabelIndexId({ ngId, labelIndex })]
+            })
+        } else {
+            this.store$.dispatch({
+                type: ADD_TO_REGIONS_SELECTION_WITH_IDS,
+                selectRegionIds : [generateLabelIndexId({ ngId, labelIndex })]
+            })
+        }
+    }
+
+    regionIsSelected(selectedRegions, ngId, labelIndex) {
+        return selectedRegions.map(sr => generateLabelIndexId({ ngId: sr.ngId, labelIndex: sr.labelIndex })).includes(generateLabelIndexId({ ngId, labelIndex }))
+    }
+
+    navigateTo(position){
+        this.store$.dispatch({
+            type: CHANGE_NAVIGATION,
+            navigation: {
+                position,
+                animation: {}
+            }
+        })
+    }
+}
\ No newline at end of file
diff --git a/src/ui/regionToolsMenu/regionMenu.style.css b/src/ui/regionToolsMenu/regionMenu.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..fc202344466f16355a9dd257690a17f7e56c151c
--- /dev/null
+++ b/src/ui/regionToolsMenu/regionMenu.style.css
@@ -0,0 +1,19 @@
+.regionDescriptionTextClass{
+    max-height:100px;
+    transition: max-height 0.15s ease-out;
+}
+.regionDescriptionTextOpened {
+    max-height: 310px;
+    transition: max-height 0.25s ease-in;
+}
+
+[fixedMouseContextualContainerDirective]
+{
+    width: 15rem;
+}
+
+[fixedMouseContextualContainerDirective] div[body]
+{
+    overflow: hidden;
+}
+
diff --git a/src/ui/regionToolsMenu/regionMenu.template.html b/src/ui/regionToolsMenu/regionMenu.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..0d7afd988ce28b6e91b0426986b677b5e0797aae
--- /dev/null
+++ b/src/ui/regionToolsMenu/regionMenu.template.html
@@ -0,0 +1,53 @@
+<div class="text-nowrap text-truncate mt-2 ml-2 mr-2 overflow-hidden" [matTooltip]="region.name"
+     matTooltipShowDelay="1000">{{region.name}}</div>
+<!-- ToDo implement it with Descriptions-->
+              <div > <!--*ngIf="!region.description && !region.description.length"-->
+                <div class="row m-2 position-relative overflow-hidden"
+                     [class.regionDescriptionTextOpened] = "collapsedRegionDescription"
+                     [class.overflow-y-auto] = "collapsedRegionDescription"
+                     [class.regionDescriptionTextClass] = "!collapsedRegionDescription"
+                     [class.linear-gradient-fade] = "(+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight) && !collapsedRegionDescription"
+                     #regionDescriptionText>
+                    {{region.description}}
+                </div>
+                <div (click)="collapsedRegionDescription = true"
+                     *ngIf="+regionDescriptionText.scrollHeight > +regionDescriptionText.clientHeight && !collapsedRegionDescription"
+                     class="w-100 d-flex justify-content-center align-items-center mt-n2 cursorPointer"><i
+                        class="fas fa-angle-down m-1"></i> Read More
+                </div>
+                <div (click)="collapsedRegionDescription = false"
+                     *ngIf="collapsedRegionDescription"
+                     class="w-100 d-flex justify-content-center align-items-center mt-n2 cursorPointer"><i
+                        class="fas fa-angle-up m-1"></i> Collapse
+                </div>
+              </div>
+<div class="d-flex align-items-center justify-content-between">
+    <button mat-button
+            style="font-size: 12px"
+            class="pt-0 pb-0 br-1 pl-1"
+            [ngClass]="!hasConnectivity && 'w-100'"
+            *ngIf="(selectedRegions$ | async) as selectedRegions"
+            (click)="toggleRegionWithId(region.ngId, region.labelIndex, regionIsSelected(selectedRegions, region.ngId, region.labelIndex)); regionToolsMenuVisible = false; collapsedRegionDescription = false">
+                  <span class="fa-stack fa-1x">
+                    <i class="fas fa-hand-pointer fa-stack-1x"></i>
+                    <i class="fas fa-slash fa-stack-1x fa-inverse"
+                       *ngIf="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)"></i>
+                  </span>
+        <span [innerText]="regionIsSelected(selectedRegions, region.ngId, region.labelIndex)? 'Deselect' : 'Select'"></span>
+    </button>
+    <button mat-button
+            style="font-size: 12px"
+            class="pt-0 pb-0 br-1 pl-1"
+            [ngClass]="!hasConnectivity && 'w-100'"
+            (click)="navigateTo(region.position); regionToolsMenuVisible = false; collapsedRegionDescription = false">
+        <i class="fas fa-crosshairs"></i> Navigate
+    </button>
+
+    <button mat-button
+            *ngIf="hasConnectivity"
+            style="font-size: 12px"
+            class="pt-0 pb-0 br-1 pl-1 mr-1"
+            (click)="exploreConnectivity.emit(region.name); regionToolsMenuVisible = false; collapsedRegionDescription = false">
+        <i class="fab fa-connectdevelop"></i> Connectivity
+    </button>
+</div>
\ No newline at end of file
diff --git a/src/ui/searchSideNav/searchSideNav.component.ts b/src/ui/searchSideNav/searchSideNav.component.ts
index 4d12f4cc8665955fadc4e23026cd14048ffc8a62..a35562c89612cea5d3618447bd1e1c9fa01f3e2d 100644
--- a/src/ui/searchSideNav/searchSideNav.component.ts
+++ b/src/ui/searchSideNav/searchSideNav.component.ts
@@ -2,12 +2,19 @@ import { Component, Output, EventEmitter, OnInit, OnDestroy, ViewChild, Template
 import { MatDialogRef, MatDialog, MatSnackBar } from "@angular/material";
 import { NgLayerInterface } from "src/atlasViewer/atlasViewer.component";
 import { LayerBrowser } from "../layerbrowser/layerbrowser.component";
-import { Observable, Subscription } from "rxjs";
+import {Observable, Subject, Subscription} from "rxjs";
 import { Store, select } from "@ngrx/store";
 import { map, startWith, scan, filter, mapTo } from "rxjs/operators";
 import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "../viewerStateController/viewerState.base";
 import { trackRegionBy } from '../viewerStateController/regionHierachy/regionHierarchy.component'
 import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
+import {
+  CLOSE_SIDE_PANEL,
+  COLLAPSE_SIDE_PANEL_CURRENT_VIEW,
+  EXPAND_SIDE_PANEL_CURRENT_VIEW,
+  OPEN_SIDE_PANEL
+} from "src/services/state/uiState.store";
+import {ConnectivityBrowserComponent} from "src/ui/connectivityBrowser/connectivityBrowser.component";
 
 @Component({
   selector: 'search-side-nav',
@@ -18,26 +25,31 @@ import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.consta
 })
 
 export class SearchSideNav implements OnInit, OnDestroy {
-  public showDataset: boolean = false
   public availableDatasets: number = 0
 
+  public connectivityActive = new Subject<string>()
+  public connectivityRegion = ''
+
   private subscriptions: Subscription[] = []
   private layerBrowserDialogRef: MatDialogRef<any>
 
   @Output() dismiss: EventEmitter<any> = new EventEmitter()
-  @Output() open: EventEmitter<any> = new EventEmitter()
 
   @ViewChild('layerBrowserTmpl', {read: TemplateRef}) layerBrowserTmpl: TemplateRef<any>
+  @ViewChild('connectivityBrowser') connectivityBrowser: ConnectivityBrowserComponent
+
+
+  public autoOpenSideNavDataset$: Observable<any>
 
-  public autoOpenSideNav$: Observable<any>
+  sidebarMenuState$: Observable<any>
 
   constructor(
     public dialog: MatDialog,
     private store$: Store<any>,
     private snackBar: MatSnackBar,
-    private constantService: AtlasViewerConstantsServices
+    private constantService: AtlasViewerConstantsServices,
   ){
-    this.autoOpenSideNav$ = this.store$.pipe(
+    this.autoOpenSideNavDataset$ = this.store$.pipe(
       select('viewerState'),
       select('regionsSelected'),
       map(arr => arr.length),
@@ -46,17 +58,49 @@ export class SearchSideNav implements OnInit, OnDestroy {
       filter(([curr, prev]) => prev === 0 && curr > 0),
       mapTo(true)
     )
+
+    this.sidebarMenuState$ = this.store$.pipe(
+        select('uiState'),
+        map(state => {
+          return {
+            sidePanelOpen: state.sidePanelOpen,
+            sidePanelCurrentViewOpened: state.sidePanelCurrentViewOpened,
+            sidePanelManualCollapsibleView: state.sidePanelManualCollapsibleView
+          }
+        })
+    )
   }
 
   ngOnInit(){
     this.subscriptions.push(
-      this.autoOpenSideNav$.subscribe(() => {
-        this.open.emit(true)
-        this.showDataset = true
+        this.connectivityActive.asObservable().subscribe(r => {
+          // this.connectivityService.getConnectivityByRegion(r)
+          this.connectivityRegion = r
+        }),
+
+      this.autoOpenSideNavDataset$.subscribe(() => {
+        this.store$.dispatch({
+          type: OPEN_SIDE_PANEL,
+        })
+        this.expandSidePanelCurrentView()
       })
     )
   }
 
+  collapseSidePanelCurrentView() {
+    this.store$.dispatch({
+      type: COLLAPSE_SIDE_PANEL_CURRENT_VIEW,
+    })
+  }
+
+  expandSidePanelCurrentView() {
+    this.store$.dispatch({
+      type: EXPAND_SIDE_PANEL_CURRENT_VIEW,
+    })
+  }
+
+
+
   ngOnDestroy(){
     while(this.subscriptions.length > 0) {
       this.subscriptions.pop().unsubscribe()
@@ -70,9 +114,11 @@ export class SearchSideNav implements OnInit, OnDestroy {
       return  
     }
     if (this.layerBrowserDialogRef) return
-    
-    this.dismiss.emit(true)
-    
+
+    this.store$.dispatch({
+      type: CLOSE_SIDE_PANEL,
+    })
+
     const dialogToOpen = this.layerBrowserTmpl || LayerBrowser
     this.layerBrowserDialogRef = this.dialog.open(dialogToOpen, {
       hasBackdrop: false,
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index 1230a72321a950f562ca9a3ea778a930b0316ae7..1c512d7d4b7fbf558a327f8e0d42db926c5314c0 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -12,8 +12,8 @@
     <!-- footer content -->
     <div class="d-flex flex-row justify-content-center" card-footer>
       <button mat-stroked-button
-        *ngIf="!showDataset"
-        (click)="showDataset = true"
+        *ngIf="!(sidebarMenuState$ | async)?.sidePanelCurrentViewOpened"
+        (click)="expandSidePanelCurrentView()"
         class="m-1 flex-grow-1 overflow-hidden" >
         <i class="fas fa-chevron-down"></i>
         <ng-container *ngIf="viewerStateController.regionsSelected$ | async as regionsSelected">
@@ -23,9 +23,14 @@
     </div>
   </viewer-state-controller>
 
-  <ng-container *ngIf="showDataset">
+  <ng-container *ngIf="(sidebarMenuState$ | async) as sideBarMenu">
+    <connectivity-browser class="pe-all flex-grow-5 flex-shrink-1" style="max-height: calc(100% - 220px)"
+                          [region]="connectivityRegion"
+                          #connectivityBrowser
+                          *ngIf="sideBarMenu.sidePanelCurrentViewOpened && sideBarMenu.sidePanelManualCollapsibleView === 'Connectivity'">
 
-    <data-browser
+    </connectivity-browser>
+    <data-browser *ngIf="sideBarMenu.sidePanelCurrentViewOpened && !sideBarMenu.sidePanelManualCollapsibleView"
       class="pe-all flex-grow-5 flex-shrink-1"
       [template]="viewerStateController.templateSelected$ | async"
       [parcellation]="viewerStateController.parcellationSelected$ | async"
@@ -39,12 +44,12 @@
 
         <mat-divider class="position-relative mt-2 mb-2 mat-divider-full-width"></mat-divider>
       </ng-container>
-  
+
       <!-- footer content -->
       <div class="d-flex flex-row justify-content-center" card-footer>
         <button mat-stroked-button
           class="m-1"
-          (click)="showDataset = false" >
+          (click)="collapseSidePanelCurrentView()" >
           <i class="fas fa-chevron-up"></i>
         </button>
       </div>
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index 9b8f237729d1bcafe310faab30160358639d16b2..d33fa5fa406eb544ed9a3bdab2caa93ecea12b62 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from "@angular/core";
 import { ComponentsModule } from "src/components/components.module";
 
 import { NehubaViewerUnit } from "./nehubaContainer/nehubaViewer/nehubaViewer.component";
@@ -72,6 +72,9 @@ import { CurrentlySelectedRegions } from './viewerStateController/regionsListVie
 import { RegionTextSearchAutocomplete } from "./viewerStateController/regionSearch/regionSearch.component";
 import { RegionsListView } from "./viewerStateController/regionsListView/simpleRegionsListView/regionListView.component";
 import {TakeScreenshotComponent} from "src/ui/takeScreenshot/takeScreenshot.component";
+import {RegionMenuComponent} from "src/ui/regionToolsMenu/regionMenu.component";
+import {FixedMouseContextualContainerDirective} from "src/util/directives/FixedMouseContextualContainerDirective.directive";
+import {ConnectivityBrowserComponent} from "src/ui/connectivityBrowser/connectivityBrowser.component";
 
 @NgModule({
   imports : [
@@ -119,6 +122,8 @@ import {TakeScreenshotComponent} from "src/ui/takeScreenshot/takeScreenshot.comp
     RegionTextSearchAutocomplete,
     RegionsListView,
     TakeScreenshotComponent,
+    RegionMenuComponent,
+    ConnectivityBrowserComponent,
 
     /* pipes */
     GroupDatasetByRegion,
@@ -146,10 +151,12 @@ import {TakeScreenshotComponent} from "src/ui/takeScreenshot/takeScreenshot.comp
     HumanReadableFileSizePipe,
     ReorderPanelIndexPipe,
 
+
     /* directive */
     DownloadDirective,
     TouchSideClass,
     ElementOutClickDirective,
+    FixedMouseContextualContainerDirective
   ],
   entryComponents : [
 
@@ -179,6 +186,11 @@ import {TakeScreenshotComponent} from "src/ui/takeScreenshot/takeScreenshot.comp
     ElementOutClickDirective,
     SearchSideNav,
     ViewerStateMini,
+    RegionMenuComponent,
+    FixedMouseContextualContainerDirective
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 
diff --git a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
index bf53ed23584df960562ea335dc983a961e102aa0..458d01069897e2654e32b6b51d966711380e6ff1 100644
--- a/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
+++ b/src/util/directives/FixedMouseContextualContainerDirective.directive.ts
@@ -25,10 +25,17 @@ export class FixedMouseContextualContainerDirective {
   }
 
   public show(){
-    if ((window.innerWidth - this.mousePos[0]) < 220) {
-      this.mousePos[0] = window.innerWidth-220
-    }
-    this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
+    setTimeout(() => {
+      if (window.innerHeight - this.mousePos[1] < this.el.nativeElement.clientHeight) {
+        this.mousePos[1] = window.innerHeight - this.el.nativeElement.clientHeight
+      }
+
+      if ((window.innerWidth - this.mousePos[0]) < this.el.nativeElement.clientWidth) {
+        this.mousePos[0] = window.innerWidth-this.el.nativeElement.clientWidth
+      }
+
+      this.transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
+    })
     this.styleDisplay = 'block'
     this.isShown = true
     this.onShow.emit()
@@ -47,14 +54,4 @@ export class FixedMouseContextualContainerDirective {
   @HostBinding('style.transform')
   public transform = `translate(${this.mousePos.map(v => v.toString() + 'px').join(', ')})`
 
-  @HostListener('document:click', ['$event'])
-  documentClick(event: MouseEvent){
-    if (event.button !== 2) {
-      if (this.styleDisplay === 'none')
-        return
-      if (this.el.nativeElement.contains(event.target))
-        return
-      this.hide()
-    }
-  }
 }
\ No newline at end of file
diff --git a/src/util/directives/captureClickListener.directive.ts b/src/util/directives/captureClickListener.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd92d61fe6cf9944e5142078b964c4e31044cd55
--- /dev/null
+++ b/src/util/directives/captureClickListener.directive.ts
@@ -0,0 +1,52 @@
+import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
+import {Observable, Observer, Subscription} from "rxjs";
+import {switchMapTo, takeUntil} from "rxjs/operators";
+import {RegionMenuComponent} from "src/ui/regionToolsMenu/regionMenu.component";
+
+@Directive({
+    selector: '[iav-captureClickListenerDirective]'
+})
+
+export class CaptureClickListenerDirective implements OnInit, OnDestroy {
+
+    private subscriptions: Subscription[] = []
+    @Output() mapClicked: EventEmitter<any> = new EventEmitter()
+    @Output() mouseDownEmitter: EventEmitter<any> = new EventEmitter()
+
+
+    constructor(private el: ElementRef){}
+
+    ngOnInit(): void {
+
+        // Listen click Events
+        const mouseDownObs$ = new Observable((observer: Observer<any>) => {
+            this.el.nativeElement.addEventListener('mousedown', event => observer.next({eventName: 'mousedown', event}), true)
+        })  as Observable<{eventName: string, event: MouseEvent}>
+        const mouseMoveObs$ = new Observable((observer: Observer<any>) => {
+            this.el.nativeElement.addEventListener('mousemove', event => observer.next({eventName: 'mousemove', event}), true)
+        })  as Observable<{eventName: string, event: MouseEvent}>
+        const mouseUpObs$ = new Observable((observer: Observer<any>) => {
+            this.el.nativeElement.addEventListener('mouseup', event => observer.next({eventName: 'mouseup', event}), true)
+        })  as Observable<{eventName: string, event: MouseEvent}>
+
+        this.subscriptions.push(
+            mouseDownObs$.subscribe(e => {
+                this.mouseDownEmitter.emit(e.event)
+            }),
+            mouseDownObs$.pipe(
+                switchMapTo(
+                    mouseUpObs$.pipe(
+                        takeUntil(mouseMoveObs$)
+                    )
+                )
+            ).subscribe(e => {
+                this.mapClicked.emit(e.event)
+            })
+        )
+    }
+
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(s=> s.unsubscribe())
+    }
+
+}
\ No newline at end of file