diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index ad269e072883fedfb5df745e09cc2bc5e10bace4..a47e50f72a7c9fece33dd6c05e01a236c0054b8a 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -66,7 +66,8 @@
         </signin-banner>
 
         <!-- atlas selector -->
-        <div class="iv-custom-comp bg card m-2 mat-elevation-z2">
+        <div *ngIf="uiNehubaContainer.viewerLoaded"
+          class="iv-custom-comp bg card m-2 mat-elevation-z2">
           <atlas-dropdown-selector class="pe-all mt-2">
           </atlas-dropdown-selector>
         </div>
@@ -75,123 +76,151 @@
 
       <!-- bottom left content transclusion -->
       <div ui-nehuba-container-overlay-bottom-left class="d-inline-flex pe-none w-100 align-items-end m-2 mb-4">
-        <!-- Viewer Selector Container-->
-        <atlas-layer-selector
-          #alSelector="atlasLayerSelector"
-          class="pe-all"
-          (iav-outsideClick)="alSelector.selectorExpanded = false">
-        </atlas-layer-selector>
-        <mat-chip-list class="mb-2">
-          <!-- additional layer -->
-          <ng-container *ngIf="!alSelector.selectorExpanded">
-            <ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: selectedParcellation }">
+
+        <!-- only load atlas layer selector and chips if viewer is loaded -->
+        <ng-template [ngIf]="uiNehubaContainer.viewerLoaded">
+
+          <!-- Viewer Selector Container-->
+          <atlas-layer-selector
+            #alSelector="atlasLayerSelector"
+            class="pe-all"
+            (iav-outsideClick)="alSelector.selectorExpanded = false">
+          </atlas-layer-selector>
+          <mat-chip-list class="mb-2">
+            <!-- additional layer -->
+            <ng-container *ngIf="!alSelector.selectorExpanded">
+              <ng-container *ngTemplateOutlet="currParcellationTmpl; context: { addParc: (selectedAdditionalLayers$ | async), parc: selectedParcellation }">
+              </ng-container>
             </ng-container>
-          </ng-container>
 
-          <!-- any selected region(s) -->
-          <ng-container *ngIf="!uiNehubaContainer.navSideDrawerMainSwitch.switchState || !uiNehubaContainer.navSideDrawerMinorSwitch.switchState">
-            <ng-container *ngTemplateOutlet="selectedRegionTmpl">
+            <!-- any selected region(s) -->
+            <ng-container *ngIf="!uiNehubaContainer.navSideDrawerMainSwitch.switchState || !uiNehubaContainer.navSideDrawerMinorSwitch.switchState">
+              <ng-container *ngTemplateOutlet="selectedRegionTmpl">
+              </ng-container>
             </ng-container>
-          </ng-container>
-        </mat-chip-list>
-        
-        <!-- current layer tmpl -->
-        <ng-template #currParcellationTmpl let-parc="parc" let-addParc="addParc">
-          <ng-template [ngIf]="addParc.length > 0" [ngIfElse]="defaultParcTmpl">
-            <ng-container *ngFor="let p of addParc">
+          </mat-chip-list>
+          
+          <!-- current layer tmpl -->
+          <ng-template #currParcellationTmpl let-parc="parc" let-addParc="addParc">
+            <ng-template [ngIf]="addParc.length > 0" [ngIfElse]="defaultParcTmpl">
+              <ng-container *ngFor="let p of addParc">
+                <ng-container *ngTemplateOutlet="chipTmpl; context: {
+                  parcel: p,
+                  selected: true,
+                  dismissable: true
+                }">
+                </ng-container>
+              </ng-container>
+            </ng-template>
+            <ng-template #defaultParcTmpl>
               <ng-container *ngTemplateOutlet="chipTmpl; context: {
-                parcel: p,
-                selected: true,
-                dismissable: true
+                parcel: parc,
+                selected: false,
+                dismissable: false
               }">
               </ng-container>
-            </ng-container>
-          </ng-template>
-          <ng-template #defaultParcTmpl>
-            <ng-container *ngTemplateOutlet="chipTmpl; context: {
-              parcel: parc,
-              selected: false,
-              dismissable: false
-            }">
-            </ng-container>
-          </ng-template>
-
-          <!-- render parc templ -->
-          <ng-template #chipTmpl
-            let-parcel="parcel"
-            let-selected="selected"
-            let-dismissable="dismissable">
-            <mat-chip class="pe-all"
-              (click)="alSelector.selectorExpanded = true"
-              [selected]="selected">
-              
-              {{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel?.name }}
-
-              <!-- info icon -->
-              <ng-template [ngIf]="parcel?.originDatasets?.length > 0"
-                  [ngIfElse]="infoIconBasic">
-
+            </ng-template>
+
+            <!-- render parc templ -->
+            <ng-template #chipTmpl
+              let-parcel="parcel"
+              let-selected="selected"
+              let-dismissable="dismissable">
+              <mat-chip class="pe-all"
+                (click)="alSelector.selectorExpanded = true"
+                [selected]="selected">
+                
+                {{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel?.name }}
+
+                <!-- info icon -->
+                <ng-template [ngIf]="parcel?.originDatasets?.length > 0"
+                    [ngIfElse]="infoIconBasic">
+
+                  <mat-icon
+                    *ngFor="let ds of parcel.originDatasets"
+                    fontSet="fas"
+                    fontIcon="fa-info-circle"
+                    iav-stop="click"
+                    iav-dataset-show-dataset-dialog
+                    [iav-dataset-show-dataset-dialog-kgid]="ds['kgId']"
+                    [iav-dataset-show-dataset-dialog-kgschema]="ds['kgSchema']"
+                    [iav-dataset-show-dataset-dialog-name]="parcel?.properties?.name"
+                    [iav-dataset-show-dataset-dialog-description]="parcel?.properties?.description">
+                  </mat-icon>
+
+                </ng-template>
+
+                <ng-template #infoIconBasic>
+                  <mat-icon *ngIf="parcel?.properties?.name && parcel?.properties?.description"
+                    fontSet="fas"
+                    fontIcon="fa-info-circle"
+                    iav-stop="click"
+                    iav-dataset-show-dataset-dialog
+                    [iav-dataset-show-dataset-dialog-name]="parcel.properties.name"
+                    [iav-dataset-show-dataset-dialog-description]="parcel.properties.description">
+
+                  </mat-icon>
+                </ng-template>
+
+                <!-- dismiss icon -->
                 <mat-icon
-                  *ngFor="let ds of parcel.originDatasets"
+                  *ngIf="dismissable"
+                  (click)="clearAdditionalLayer(parcel)"
                   fontSet="fas"
-                  fontIcon="fa-info-circle"
-                  iav-stop="click"
-                  iav-dataset-show-dataset-dialog
-                  [iav-dataset-show-dataset-dialog-kgid]="ds['kgId']"
-                  [iav-dataset-show-dataset-dialog-kgschema]="ds['kgSchema']"
-                  [iav-dataset-show-dataset-dialog-name]="parcel?.properties?.name"
-                  [iav-dataset-show-dataset-dialog-description]="parcel?.properties?.description">
+                  fontIcon="fa-times">
                 </mat-icon>
+              </mat-chip>
+            </ng-template>
+          </ng-template>
 
-              </ng-template>
-
-              <ng-template #infoIconBasic>
-                <mat-icon *ngIf="parcel?.properties?.name && parcel?.properties?.description"
+          <ng-template #selectedRegionTmpl>
+            <ng-container *ngFor="let r of (selectedRegions$ | async)">
+
+              <!-- region chip for discrete map -->
+              <mat-chip
+                iav-region
+                (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
+                [region]="r"
+                class="pe-all"
+                [ngClass]="{
+                  'darktheme':regionDirective.rgbDarkmode === true,
+                  'lighttheme': regionDirective.rgbDarkmode === false
+                }"
+                [style.backgroundColor]="regionDirective.rgbString"
+                #regionDirective="iavRegion">
+                <span class="iv-custom-comp text text-truncate d-inline">
+                  {{ r.name }}
+                </span>
+                <mat-icon
+                  class="iv-custom-comp text"
+                  (click)="clearSelectedRegions()"
                   fontSet="fas"
-                  fontIcon="fa-info-circle"
-                  iav-stop="click"
-                  iav-dataset-show-dataset-dialog
-                  [iav-dataset-show-dataset-dialog-name]="parcel.properties.name"
-                  [iav-dataset-show-dataset-dialog-description]="parcel.properties.description">
-
+                  fontIcon="fa-times">
                 </mat-icon>
-              </ng-template>
-
-              <!-- dismiss icon -->
-              <mat-icon
-                *ngIf="dismissable"
-                (click)="clearAdditionalLayer(parcel)"
-                fontSet="fas"
-                fontIcon="fa-times">
-              </mat-icon>
-            </mat-chip>
+              </mat-chip>
+
+              <!-- chips for previewing origin datasets -->
+              <ng-container *ngFor="let originDataset of (r.originDatasets || []); let index = index">
+                <div class="hidden"
+                  iav-dataset-preview-dataset-file
+                  [iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
+                  [iav-dataset-preview-dataset-file-filename]="originDataset.filename"
+                  #previewDirective="iavDatasetPreviewDatasetFile">
+                </div>
+                <mat-chip *ngIf="previewDirective.active"
+                  (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
+                  class="pe-all">
+                  {{ regionDirective.regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
+                  <mat-icon (click)="previewDirective.onClick()"
+                    fontSet="fas"
+                    fontIcon="fa-times">
+                  </mat-icon>
+                </mat-chip>
+              </ng-container>
+            </ng-container>
           </ng-template>
-        </ng-template>
 
-        <ng-template #selectedRegionTmpl>
-          <mat-chip *ngFor="let r of (selectedRegions$ | async)"
-            iav-region
-            (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
-            [region]="r"
-            class="pe-all"
-            [ngClass]="{
-              'darktheme':regionDirective.rgbDarkmode === true,
-              'lighttheme': regionDirective.rgbDarkmode === false
-            }"
-            [style.backgroundColor]="regionDirective.rgbString"
-            #regionDirective="iavRegion">
-            <span class="iv-custom-comp text text-truncate d-inline">
-              {{ r.name }}
-            </span>
-            <mat-icon
-              class="iv-custom-comp text"
-              (click)="clearSelectedRegions()"
-              fontSet="fas"
-              fontIcon="fa-times">
-            </mat-icon>
-          </mat-chip>
         </ng-template>
-
       </div>
 
       <!-- top left content transclusion -->
diff --git a/src/glue.spec.ts b/src/glue.spec.ts
index e3b6d940d851d5dad9e0e5b6da28c044c05e9abc..8db3fe5728f78304f5fec5400dd714f5b6b27e96 100644
--- a/src/glue.spec.ts
+++ b/src/glue.spec.ts
@@ -1,5 +1,5 @@
 import { TestBed, tick, fakeAsync } from "@angular/core/testing"
-import { DatasetPreviewGlue, glueSelectorGetUiStatePreviewingFiles, glueActionRemoveDatasetPreview, datasetPreviewMetaReducer, glueActionAddDatasetPreview } from "./glue"
+import { DatasetPreviewGlue, glueSelectorGetUiStatePreviewingFiles, glueActionRemoveDatasetPreview, datasetPreviewMetaReducer, glueActionAddDatasetPreview, GlueEffects } from "./glue"
 import { ACTION_TO_WIDGET_TOKEN, EnumActionToWidget } from "./widget"
 import { provideMockStore, MockStore } from "@ngrx/store/testing"
 import { getRandomHex } from 'common/util'
@@ -532,4 +532,85 @@ describe('> glue.ts', () => {
       })
     })
   })
-})
\ No newline at end of file
+
+  describe('> GlueEffects', () => {
+
+    const defaultState = {
+      viewerState: {
+        templateSelected: null,
+        parcellationSelected: null,
+        regionsSelected: []
+      },
+      uiState: {
+        previewingDatasetFiles: []
+      }
+    }
+    beforeEach(() => {
+
+      TestBed.configureTestingModule({
+        providers: [
+          GlueEffects,
+          provideMockStore({
+            initialState: defaultState
+          })
+        ]
+      })
+    })
+
+    describe('> regionTemplateParcChange$', () => {
+
+      const copiedState0 = JSON.parse(JSON.stringify(defaultState))
+      copiedState0.viewerState.regionsSelected = [{ name: 'coffee' }]
+      copiedState0.viewerState.parcellationSelected = { name: 'chicken' }
+      copiedState0.viewerState.templateSelected = { name: 'spinach' }
+
+      const generateTest = (m1, m2) => {
+
+        const mockStore = TestBed.inject(MockStore)
+        mockStore.setState(copiedState0)
+        const glueEffects = TestBed.inject(GlueEffects)
+        /**
+         * couldn't get jasmine-marble to coopoerate
+         * TODO test proper with jasmine marble (?)
+         */
+        let numOfEmit = 0
+        const sub = glueEffects.regionTemplateParcChange$.subscribe(() => {
+          numOfEmit += 1
+        })
+
+        const copiedState1 = JSON.parse(JSON.stringify(copiedState0))
+        m1(copiedState1)
+        mockStore.setState(copiedState1)
+        expect(numOfEmit).toEqual(1)
+
+        const copiedState2 = JSON.parse(JSON.stringify(copiedState0))
+        m2(copiedState2)
+        mockStore.setState(copiedState2)
+        expect(numOfEmit).toEqual(2)
+
+        sub.unsubscribe()
+      }
+      
+      it('> on change of region, should emit', () => {
+        generateTest(
+          copiedState1 => copiedState1.viewerState.regionsSelected = [{ name: 'cake' }],
+          copiedState2 => copiedState2.viewerState.regionsSelected = [{ name: 't bone' }]
+        )
+      })
+
+      it('> on change of parcellation, should emit', () => {
+        generateTest(
+          copiedState1 => copiedState1.viewerState.parcellationSelected = { name: 'pizza' },
+          copiedState2 => copiedState2.viewerState.parcellationSelected = { name: 'pizza on pineapple' }
+        )
+      })
+
+      it('> on change of template, should emit', () => {
+        generateTest(
+          copiedState1 => copiedState1.viewerState.templateSelected = { name: 'calzone' },
+          copiedState2 => copiedState2.viewerState.templateSelected = { name: 'calzone on pineapple' }
+        )
+      })
+    })
+  })
+})
diff --git a/src/glue.ts b/src/glue.ts
index 696129f96f5558c4e0c36cd3ce5523c7059bc53b..3dc0ac87c492ed9b8953b3400575e1cd6c5e76c1 100644
--- a/src/glue.ts
+++ b/src/glue.ts
@@ -1,9 +1,9 @@
-import { uiActionSetPreviewingDatasetFiles, TypeOpenedWidget, EnumWidgetTypes, IDatasetPreviewData, uiStateShowBottomSheet } from "./services/state/uiState.store.helper"
+import { uiActionSetPreviewingDatasetFiles, IDatasetPreviewData, uiStateShowBottomSheet, uiStatePreviewingDatasetFilesSelector } from "./services/state/uiState.store.helper"
 import { OnDestroy, Injectable, Optional, Inject, InjectionToken } from "@angular/core"
-import { PreviewComponentWrapper, DatasetPreview, determinePreviewFileType, EnumPreviewFileTypes, IKgDataEntry, getKgSchemaIdFromFullId } from "./ui/databrowserModule"
-import { Subscription, Observable, forkJoin, of } from "rxjs"
+import { PreviewComponentWrapper, DatasetPreview, determinePreviewFileType, EnumPreviewFileTypes, IKgDataEntry, getKgSchemaIdFromFullId } from "./ui/databrowserModule/pure"
+import { Subscription, Observable, forkJoin, of, merge } from "rxjs"
 import { select, Store, ActionReducer, createAction, props, createSelector, Action } from "@ngrx/store"
-import { startWith, map, shareReplay, pairwise, debounceTime, distinctUntilChanged, tap, switchMap, withLatestFrom } from "rxjs/operators"
+import { startWith, map, shareReplay, pairwise, debounceTime, distinctUntilChanged, tap, switchMap, withLatestFrom, mapTo, switchMapTo, filter, skip } from "rxjs/operators"
 import { TypeActionToWidget, EnumActionToWidget, ACTION_TO_WIDGET_TOKEN } from "./widget"
 import { getIdObj } from 'common/util'
 import { MatDialogRef } from "@angular/material/dialog"
@@ -13,6 +13,8 @@ import { ngViewerActionAddNgLayer, ngViewerActionRemoveNgLayer, INgLayerInterfac
 import { ARIA_LABELS } from 'common/constants'
 import { NgLayersService } from "src/ui/layerbrowser/ngLayerService.service"
 import { EnumColorMapName } from "./util/colorMaps"
+import { Effect } from "@ngrx/effects"
+import { viewerStateSelectedRegionsSelector, viewerStateSelectedTemplateSelector, viewerStateSelectedParcellationSelector } from "./services/state/viewerState/selectors"
 
 const PREVIEW_FILE_TYPES_NO_UI = [
   EnumPreviewFileTypes.NIFTI,
@@ -21,11 +23,6 @@ const PREVIEW_FILE_TYPES_NO_UI = [
 
 const DATASET_PREVIEW_ANNOTATION = `DATASET_PREVIEW_ANNOTATION`
 
-export const glueActionPreviewDataset = createAction(
-  '[glue] previewDataset',
-  props<IDatasetPreviewData>()
-)
-
 export const glueActionToggleDatasetPreview = createAction(
   '[glue] toggleDatasetPreview',
   props<{ datasetPreviewFile: IDatasetPreviewData }>()
@@ -55,6 +52,58 @@ export interface IDatasetPreviewGlue{
   providedIn: 'root'
 })
 
+export class GlueEffects {
+  
+  public regionTemplateParcChange$ = merge(
+    this.store$.pipe(
+      select(viewerStateSelectedRegionsSelector),
+      map(rs => (rs || []).map(r => r['name']).sort().join(',')),
+      distinctUntilChanged(),
+      skip(1),
+    ),
+    this.store$.pipe(
+      select(viewerStateSelectedTemplateSelector),
+      map(tmpl => tmpl
+        ? tmpl['@id'] || tmpl['name']
+        : null),
+      distinctUntilChanged(),
+      skip(1)
+    ),
+    this.store$.pipe(
+      select(viewerStateSelectedParcellationSelector),
+      map(parc => parc
+        ? parc['@id'] || parc['name']
+        : null),
+      distinctUntilChanged(),
+      skip(1)
+    )
+  ).pipe(
+    mapTo(true)
+  )
+
+  @Effect()
+  resetDatasetPreview$: Observable<any> = this.store$.pipe(
+    select(uiStatePreviewingDatasetFilesSelector),
+    distinctUntilChanged(),
+    filter(previews => previews?.length > 0),
+    switchMapTo(this.regionTemplateParcChange$)
+  ).pipe(
+    mapTo(uiActionSetPreviewingDatasetFiles({
+      previewingDatasetFiles: []
+    }))
+  )
+
+  constructor(
+    private store$: Store<any>
+  ){
+
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+
 export class DatasetPreviewGlue implements IDatasetPreviewGlue, OnDestroy{
   
   static readonly DEFAULT_DIALOG_OPTION = {
diff --git a/src/main.module.ts b/src/main.module.ts
index 0e86995d887e66cba6ce00957ce908cec51ef3cb..769e816943afb2a5e806e4ea90183dfa1dd93b03 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -54,7 +54,7 @@ import 'hammerjs'
 import 'src/res/css/extra_styles.css'
 import 'src/res/css/version.css'
 import 'src/theme.scss'
-import { DatasetPreviewGlue, datasetPreviewMetaReducer, IDatasetPreviewGlue } from './glue';
+import { DatasetPreviewGlue, datasetPreviewMetaReducer, IDatasetPreviewGlue, GlueEffects } from './glue';
 import { viewerStateHelperReducer, viewerStateFleshOutDetail, viewerStateMetaReducers, ViewerStateHelperEffect } from './services/state/viewerState.store.helper';
 
 export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
@@ -96,7 +96,8 @@ export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
       AtlasViewerHistoryUseEffect,
       UiStateUseEffect,
       NewTemplateUseEffect,
-      ViewerStateHelperEffect
+      ViewerStateHelperEffect,
+      GlueEffects
     ]),
     StoreModule.forRoot({
       pluginState,
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 3c91a3b4665e7f98249b20a0f59f36da62cf3882..2274445cc2a7888affbc3f84f472b1c70eca8790 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -711,6 +711,14 @@ kg-dataset-previewer > img
   margin-right: -1rem!important;
 }
 
+.ml-5-n
+{
+  margin-left: -1.25rem!important;
+}
+.mr-5-n
+{
+  margin-right: -1.25rem!important;
+}
 .mt-4-n
 {
   margin-top: -1rem!important;
diff --git a/src/services/state/uiState.store.helper.ts b/src/services/state/uiState.store.helper.ts
index 8f3ead0a17d7911b8bafedec1612cfc3a2cfa451..376c4d788b2dd1caee61928d39d0175a77eb2eef 100644
--- a/src/services/state/uiState.store.helper.ts
+++ b/src/services/state/uiState.store.helper.ts
@@ -1,38 +1,32 @@
 // TODO merge with uiState.store.ts after refactor completes
 
-import { createAction, props } from '@ngrx/store'
-import { TemplateRef } from '@angular/core'
-import { MatBottomSheetConfig } from '@angular/material/bottom-sheet'
-
-export const uiStateCloseSidePanel = createAction(
-  '[uiState] closeSidePanel'
-)
-
-export const uiStateOpenSidePanel = createAction(
-  '[uiState] openSidePanel'
-)
-
-export const uiStateCollapseSidePanel = createAction(
-  '[uiState] collapseSidePanelCurrentView'
-)
-
-export const uiStateExpandSidePanel = createAction(
-  '[uiState] expandSidePanelCurrentView'
-)
-
-export const uiStateShowBottomSheet = createAction(
-  '[uiState] showBottomSheet',
-  props<{ bottomSheetTemplate: TemplateRef<unknown>, config?: MatBottomSheetConfig }>()
-)
+import {
+  uiActionSetPreviewingDatasetFiles,
+  uiActionShowSidePanelConnectivity,
+  uiStateCloseSidePanel,
+  uiStateCollapseSidePanel,
+  uiStateExpandSidePanel,
+  uiStateOpenSidePanel,
+  uiStateShowBottomSheet
+} from './uiState/actions'
+
+export {
+  uiActionSetPreviewingDatasetFiles,
+  uiActionShowSidePanelConnectivity,
+  uiStateCloseSidePanel,
+  uiStateCollapseSidePanel,
+  uiStateExpandSidePanel,
+  uiStateOpenSidePanel,
+  uiStateShowBottomSheet
+}
 
-export const uiActionSetPreviewingDatasetFiles = createAction(
-  `[uiState] setDatasetPreviews`,
-  props<{previewingDatasetFiles: {datasetId: string, filename: string}[]}>()
-)
+import {
+  uiStatePreviewingDatasetFilesSelector
+} from './uiState/selectors'
 
-export const uiActionShowSidePanelConnectivity = createAction(
-  `[uiState] showSidePanelConnectivity`
-)
+export {
+  uiStatePreviewingDatasetFilesSelector
+}
 
 export enum EnumWidgetTypes{
   DATASET_PREVIEW,
diff --git a/src/services/state/uiState/actions.ts b/src/services/state/uiState/actions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9db6183506e44a67930ee0801f0c4d3c9d8339f4
--- /dev/null
+++ b/src/services/state/uiState/actions.ts
@@ -0,0 +1,34 @@
+
+import { createAction, props } from '@ngrx/store'
+import { TemplateRef } from '@angular/core'
+import { MatBottomSheetConfig } from '@angular/material/bottom-sheet'
+
+export const uiStateCloseSidePanel = createAction(
+  '[uiState] closeSidePanel'
+)
+
+export const uiStateOpenSidePanel = createAction(
+  '[uiState] openSidePanel'
+)
+
+export const uiStateCollapseSidePanel = createAction(
+  '[uiState] collapseSidePanelCurrentView'
+)
+
+export const uiStateExpandSidePanel = createAction(
+  '[uiState] expandSidePanelCurrentView'
+)
+
+export const uiStateShowBottomSheet = createAction(
+  '[uiState] showBottomSheet',
+  props<{ bottomSheetTemplate: TemplateRef<unknown>, config?: MatBottomSheetConfig }>()
+)
+
+export const uiActionSetPreviewingDatasetFiles = createAction(
+  `[uiState] setDatasetPreviews`,
+  props<{previewingDatasetFiles: {datasetId: string, filename: string}[]}>()
+)
+
+export const uiActionShowSidePanelConnectivity = createAction(
+  `[uiState] showSidePanelConnectivity`
+)
diff --git a/src/services/state/uiState/selectors.ts b/src/services/state/uiState/selectors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4db9adfc902235a510a8aa378dd9e7201ff98e8
--- /dev/null
+++ b/src/services/state/uiState/selectors.ts
@@ -0,0 +1,6 @@
+import { createSelector } from "@ngrx/store";
+
+export const uiStatePreviewingDatasetFilesSelector = createSelector(
+  state => state['uiState'],
+  uiState => uiState['previewingDatasetFiles']
+)
diff --git a/src/services/state/viewerState.store.helper.ts b/src/services/state/viewerState.store.helper.ts
index a4a1c2faf92d6f75a47192be1f73b65ba8373095..b9172be04ea57d70d12104f91e9870fe50534d38 100644
--- a/src/services/state/viewerState.store.helper.ts
+++ b/src/services/state/viewerState.store.helper.ts
@@ -44,11 +44,19 @@ export {
   viewreStateRemoveUserLandmarks
 }
 
-export {
+import {
   viewerStateAllParcellationsSelector,
-  viewerStateSelectedRegionsSelector
+  viewerStateSelectedRegionsSelector,
+  viewerStateSelectedTemplateSelector,
+  viewerStateSelectedParcellationSelector
 } from './viewerState/selectors'
 
+export {
+  viewerStateAllParcellationsSelector,
+  viewerStateSelectedRegionsSelector,
+  viewerStateSelectedTemplateSelector,
+  viewerStateSelectedParcellationSelector
+}
 
 interface IViewerStateHelperStore{
   fetchedAtlases: any[]
@@ -88,22 +96,22 @@ export const viewerStateMetaReducers = [
 
 export class ViewerStateHelperEffect{
   @Effect()
-  selectParcellationWithId$: Observable<any>
+  selectParcellationWithId$: Observable<any> = this.actions$.pipe(
+    ofType(viewerStateRemoveAdditionalLayer.type),
+    withLatestFrom(this.store$.pipe(
+      select(viewerStateGetSelectedAtlas)
+    )),
+    map(([ { payload }, selectedAtlas ]) => {
+      const baseLayer = selectedAtlas['parcellations'].find(p => p['baseLayer'])
+      return viewerStateHelperSelectParcellationWithId({ payload: baseLayer })
+    })
+  )
 
   constructor(
     private store$: Store<any>,
     private actions$: Actions
   ){
-    this.selectParcellationWithId$ = this.actions$.pipe(
-      ofType(viewerStateRemoveAdditionalLayer.type),
-      withLatestFrom(this.store$.pipe(
-        select(viewerStateGetSelectedAtlas)
-      )),
-      map(([ { payload }, selectedAtlas ]) => {
-        const baseLayer = selectedAtlas['parcellations'].find(p => p['baseLayer'])
-        return viewerStateHelperSelectParcellationWithId({ payload: baseLayer })
-      })
-    )
+    
   }
 }
 
diff --git a/src/services/state/viewerState/selectors.ts b/src/services/state/viewerState/selectors.ts
index 6d32c879ee234c99fc49aadc62c71770776ac675..8b541af1f2ecb9a8f2ca043499ca9bb4af1cb2f7 100644
--- a/src/services/state/viewerState/selectors.ts
+++ b/src/services/state/viewerState/selectors.ts
@@ -20,4 +20,14 @@ export const viewerStateAllParcellationsSelector = createSelector(
         return acc.concat( parcelations )
       }, [])
   }
-)
\ No newline at end of file
+)
+
+export const viewerStateSelectedTemplateSelector = createSelector(
+  state => state['viewerState'],
+  viewerState => viewerState['templateSelected']
+)
+
+export const viewerStateSelectedParcellationSelector = createSelector(
+  state => state['viewerState'],
+  viewerState => viewerState['parcellationSelected']
+)
diff --git a/src/ui/databrowserModule/constants.ts b/src/ui/databrowserModule/constants.ts
index 43b28ab1066f14e94243bfbc7ebe90ff5e495a9e..36163582e6666bd05746f97a7d495a62a35183e9 100644
--- a/src/ui/databrowserModule/constants.ts
+++ b/src/ui/databrowserModule/constants.ts
@@ -1,6 +1,5 @@
 import { InjectionToken } from "@angular/core";
 import { LOCAL_STORAGE_CONST } from "src/util/constants";
-export { DatasetPreview } from "./databrowser.module";
 
 export const OVERRIDE_IAV_DATASET_PREVIEW_DATASET_FN = new InjectionToken<(file: any, dataset: any) => void>('OVERRIDE_IAV_DATASET_PREVIEW_DATASET_FN')
 export const DATASTORE_DEFAULT_STATE = {
@@ -89,3 +88,8 @@ export interface IKgDataEntry {
   id: string
   fullId: string
 }
+
+export interface DatasetPreview {
+  datasetId: string
+  filename: string
+}
diff --git a/src/ui/databrowserModule/databrowser/databrowser.component.ts b/src/ui/databrowserModule/databrowser/databrowser.component.ts
index 252308bbe725f2eb905c3c4c48246b06860158ed..0227d909293c45f9a1c88272ae65a111eed3c4b5 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.component.ts
+++ b/src/ui/databrowserModule/databrowser/databrowser.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild } from "@angular/core";
 import { merge, Observable, Subscription } from "rxjs";
 import { LoggingService } from "src/logging";
-import { IDataEntry } from "src/services/stateStore.service";
+import { IDataEntry } from "src/services/state/dataStore.store";
 import { CountedDataModality, DatabrowserService } from "../databrowser.service";
 import { ModalityPicker } from "../modalityPicker/modalityPicker.component";
 import { ARIA_LABELS } from 'common/constants.js'
diff --git a/src/ui/databrowserModule/index.ts b/src/ui/databrowserModule/index.ts
index 1c914548b729760c8e2b5cac7fc9a61dce2da8c3..3343f5c8a81f51da9f244c086efb4fb05e0120e1 100644
--- a/src/ui/databrowserModule/index.ts
+++ b/src/ui/databrowserModule/index.ts
@@ -1,11 +1,11 @@
 export {
   DatabrowserModule,
-  DatasetPreview,
   IAV_DATASET_PREVIEW_ACTIVE,
   TypePreviewDispalyed,
-  getKgSchemaIdFromFullId,
 } from './databrowser.module'
 
+export { DataBrowserFeatureStore, DATESTORE_FEATURE_KEY } from './store.module'
+
 export {
   DATASTORE_DEFAULT_STATE,
   OVERRIDE_IAV_DATASET_PREVIEW_DATASET_FN,
@@ -15,8 +15,8 @@ export {
   IKgDataEntry,
   IKgParcellationRegion,
   IKgPublication,
-  IKgReferenceSpace
-} from './constants'
-
-export { PreviewComponentWrapper } from './preview/previewComponentWrapper/previewCW.component'
-export { DataBrowserFeatureStore, DATESTORE_FEATURE_KEY } from './store.module'
\ No newline at end of file
+  IKgReferenceSpace,
+  DatasetPreview,
+  PreviewComponentWrapper,
+  getKgSchemaIdFromFullId
+} from './pure'
diff --git a/src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.component.ts b/src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.component.ts
index 984f89702fc1f4df4e255c4bff4233a607cf300d..379007832268c0b019bac4f35d102873df7524da 100644
--- a/src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.component.ts
+++ b/src/ui/databrowserModule/preview/previewComponentWrapper/previewCW.component.ts
@@ -1,11 +1,11 @@
 import { Component, Input, Inject, ViewChild, ElementRef } from "@angular/core";
 import { MAT_DIALOG_DATA } from "@angular/material/dialog";
-import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
 import { Observable, fromEvent, Subscription, of, throwError } from "rxjs";
 import { switchMapTo, catchError, take, concatMap, map, retryWhen, delay } from "rxjs/operators";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 import { ARIA_LABELS } from 'common/constants'
 import { DS_PREVIEW_URL } from 'src/util/constants'
+import { PureContantService } from "src/util";
 
 const { 
   DOWNLOAD_PREVIEW,
@@ -68,11 +68,11 @@ export class PreviewComponentWrapper{
 
   constructor(
     @Inject(MAT_DIALOG_DATA) data: any,
-    private constantService: AtlasViewerConstantsServices,
+    private pureConstantService: PureContantService,
     private sanitizer: DomSanitizer
   ){
 
-    this.darktheme$ = this.constantService.darktheme$
+    this.darktheme$ = this.pureConstantService.darktheme$
     if (data) {
       const { filename, kgId, backendUrl, datasetName } = data
       this.filename = filename
diff --git a/src/ui/databrowserModule/pure.spec.ts b/src/ui/databrowserModule/pure.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30d3bbf8e308180db32d061fbce6fdc81796a0f8
--- /dev/null
+++ b/src/ui/databrowserModule/pure.spec.ts
@@ -0,0 +1,7 @@
+import * as _ from './pure'
+
+describe('> pure.ts', () => {
+  it('> should be importable without hiccups', () => {
+    console.log(Object.keys(_))
+  })
+})
diff --git a/src/ui/databrowserModule/pure.ts b/src/ui/databrowserModule/pure.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7833a7efa4756cab19e7d37eb23f5f511997793
--- /dev/null
+++ b/src/ui/databrowserModule/pure.ts
@@ -0,0 +1,15 @@
+export { getKgSchemaIdFromFullId } from './util/getKgSchemaIdFromFullId.pipe'
+export {
+  DATASTORE_DEFAULT_STATE,
+  OVERRIDE_IAV_DATASET_PREVIEW_DATASET_FN,
+  EnumPreviewFileTypes,
+  determinePreviewFileType,
+  IKgActivity,
+  IKgDataEntry,
+  IKgParcellationRegion,
+  IKgPublication,
+  IKgReferenceSpace,
+  DatasetPreview
+} from './constants'
+
+export { PreviewComponentWrapper } from './preview/previewComponentWrapper/previewCW.component'
diff --git a/src/ui/nehubaContainer/statusCard/statusCard.template.html b/src/ui/nehubaContainer/statusCard/statusCard.template.html
index 9265d0084ebebd458777315eebefa94e50be0fee..5bcfe73e32674811245c8d4a21e8b333ac32a0c5 100644
--- a/src/ui/nehubaContainer/statusCard/statusCard.template.html
+++ b/src/ui/nehubaContainer/statusCard/statusCard.template.html
@@ -100,7 +100,7 @@
 
 <!-- minimised status bar -->
 <ng-template #showMin>
-  <div class="iv-custom-comp text overflow-visible text-nowrap d-inline-flex align-items-center pb-2"
+  <div class="iv-custom-comp text overflow-visible text-nowrap d-inline-flex align-items-center m-1 mt-3"
     iav-media-query
     #media="iavMediaQuery">
     
diff --git a/src/ui/parcellationRegion/region.base.ts b/src/ui/parcellationRegion/region.base.ts
index 31f3ef3734ac48c0adabb78b283ce55eaaad47f5..5cd0adbee794dbf5f60e7e08e21bb3750df472a4 100644
--- a/src/ui/parcellationRegion/region.base.ts
+++ b/src/ui/parcellationRegion/region.base.ts
@@ -183,9 +183,9 @@ export const getRegionParentParcRefSpace = createSelector(
 export class RenderViewOriginDatasetLabelPipe implements PipeTransform{
   public transform(originDatasetlabels: { name: string }[], index: string|number){
     if (!!originDatasetlabels && !!originDatasetlabels[index] && !!originDatasetlabels[index].name) {
-      return `View ${originDatasetlabels[index]['name']}`
+      return `${originDatasetlabels[index]['name']}`
     }
-    return `View origin dataset`
+    return `origin dataset`
   }
 }
 
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
index b3f5408d37394f6a7d9dd6f704e4b0d2217a01f6..ba865d1c594d25fa17a255fdd80046f31c761f02 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
@@ -11,11 +11,36 @@
         <small *ngIf="region.status"> ({{region.status}})</small>
       </div>
     </mat-card-title>
-    <mat-card-subtitle class="mb-0">
-      <i class="fas fa-brain"></i>
-      <span class="text">
-        Brain region
-      </span>
+
+    <!-- other info about brain region -->
+    <mat-card-subtitle class="mb-0 ml-5-n mr-5-n">
+
+      <!-- origin datas -->
+      <button mat-button 
+        [color]="previewDirective.active ? 'primary' : 'basic'"
+        *ngFor="let originDataset of (region.originDatasets || []); let index = index"
+        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-icon fontSet="fas" fontIcon="fa-eye"></mat-icon>
+        <span>
+          View {{ regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
+        </span>
+      </button>
+
+      <!-- position -->
+      <button mat-icon-button *ngIf="region?.position"
+        (click)="navigateToRegion()"
+        [matTooltip]="region.position | nmToMm | addUnitAndJoin : 'mm'">
+        <mat-icon fontSet="fas" fontIcon="fa-map-marked-alt">
+        </mat-icon>
+      </button>
     </mat-card-subtitle>
   </div>
 
@@ -34,32 +59,6 @@
 
     <mat-list class="action-list sm">
 
-      <!-- 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 || []); let index = index"
-        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>
-          {{ regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
-        </div>
-      </mat-list-item>
-
       <!-- connectivity -->
       <div *ngIf="hasConnectivity" iav-switch #connectivitySwitch="iavSwitch">
 
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index 20b726949972a58d9365f54c269b936cdb6defcf..663c7c961be367feddfc1c8135a6ffeecde4755a 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -234,6 +234,7 @@ import { RenderViewOriginDatasetLabelPipe } from "./parcellationRegion/region.ba
     LandmarkUIComponent,
     NehubaViewerTouchDirective,
     AtlasDropdownSelector,
+    RenderViewOriginDatasetLabelPipe,
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA,