From 42a2d64f3a6f3eaffd310b5409c5fd9805d14837 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Mon, 5 Sep 2022 17:28:13 +0200
Subject: [PATCH] select layers with chips

---
 .../core/atlas/chip/atlas.chip.component.ts   |  24 ++++
 .../core/atlas/chip/atlas.chip.stories.ts     |   0
 .../core/atlas/chip/atlas.chip.template.html  |  14 +++
 .../sapiViews/core/atlas/module.ts            |  12 +-
 .../smartChip/atlas.smartChip.components.ts   |  33 ++++++
 .../smartChip/atlas.smartChip.stories.ts      |   0
 .../atlas/smartChip/atlas.smartChip.style.css |  34 ++++++
 .../smartChip/atlas.smartChip.template.html   |  28 +++++
 .../parcellation.smartChip.component.ts       |  26 ++++-
 .../parcellation.smartChip.template.html      | 106 ++++++++++++------
 .../core/space/chip/space.chip.component.ts   |  24 ++++
 .../core/space/chip/space.chip.stories.ts     |   0
 .../core/space/chip/space.chip.template.html  |  14 +++
 .../sapiViews/core/space/module.ts            |  16 ++-
 .../smartChip/space.smartChip.components.ts   |  33 ++++++
 .../smartChip/space.smartChip.stories.ts      |   0
 .../space/smartChip/space.smartChip.style.css |   0
 .../smartChip/space.smartChip.template.html   |  44 ++++++++
 .../viewerCmp/viewerCmp.component.ts          |  25 ++++-
 .../viewerCmp/viewerCmp.style.css             |   5 +
 .../viewerCmp/viewerCmp.template.html         |  52 ++++++---
 21 files changed, 440 insertions(+), 50 deletions(-)
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.stories.ts
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.style.css
 create mode 100644 src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
 create mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
 create mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts
 create mode 100644 src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
 create mode 100644 src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
 create mode 100644 src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.stories.ts
 create mode 100644 src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.style.css
 create mode 100644 src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html

diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
new file mode 100644
index 000000000..e1be7e4a8
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component.ts
@@ -0,0 +1,24 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {SapiAtlasModel} from "src/atlasComponents/sapi/type";
+
+@Component({
+  selector: 'sxplr-sapiviews-core-atlas-chip',
+  templateUrl: './atlas.chip.template.html'
+})
+
+export class SapiViewCoreAtlasChip {
+
+  @Input('sxplr-sapiviews-core-atlas-chip-atlas')
+  atlas: SapiAtlasModel
+
+  @Input('sxplr-sapiviews-core-atlas-chip-color')
+  color: 'default' | 'primary' | 'accent' | 'warn' = "default"
+
+  @Output('sxplr-sapiviews-core-atlas-chip-onclick')
+  onClick = new EventEmitter<MouseEvent>()
+
+  click(event: MouseEvent) {
+    this.onClick.emit(event)
+  }
+
+}
diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
new file mode 100644
index 000000000..90cb1fa3e
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.template.html
@@ -0,0 +1,14 @@
+<mat-chip-list *ngIf="atlas">
+    <mat-chip [selected]="color !== 'default'" (click)="click($event)" [color]="color">
+
+        <ng-content select="[prefix]">
+        </ng-content>
+
+        <span class="mat-body sxplr-white-space-nowrap">
+            {{ atlas.name }}
+        </span>
+
+        <ng-content select="[suffix]">
+        </ng-content>
+    </mat-chip>
+</mat-chip-list>
diff --git a/src/atlasComponents/sapiViews/core/atlas/module.ts b/src/atlasComponents/sapiViews/core/atlas/module.ts
index 691d41303..046871de0 100644
--- a/src/atlasComponents/sapiViews/core/atlas/module.ts
+++ b/src/atlasComponents/sapiViews/core/atlas/module.ts
@@ -9,6 +9,11 @@ import { SapiViewsCoreSpaceModule } from "../space";
 import { SapiViewsCoreAtlasAtlasDropdownSelector } from "./dropdownAtlasSelector/dropdownAtlasSelector.component";
 import { SapiViewsCoreAtlasSplashScreen } from "./splashScreen/splashScreen.component";
 import { SapiViewsCoreAtlasAtlasTmplParcSelector } from "./tmplParcSelector/tmplParcSelector.component";
+import {DialogModule} from "src/ui/dialogInfo/module";
+import {
+  SapiViewCoreAtlasSmartChip
+} from "src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components";
+import {SapiViewCoreAtlasChip} from "src/atlasComponents/sapiViews/core/atlas/chip/atlas.chip.component";
 
 @NgModule({
   imports: [
@@ -19,17 +24,22 @@ import { SapiViewsCoreAtlasAtlasTmplParcSelector } from "./tmplParcSelector/tmpl
     QuickTourModule,
     SpinnerModule,
     SapiViewsUtilModule,
+    DialogModule,
   ],
   declarations: [
     SapiViewsCoreAtlasAtlasDropdownSelector,
     SapiViewsCoreAtlasAtlasTmplParcSelector,
     SapiViewsCoreAtlasSplashScreen,
+    SapiViewCoreAtlasSmartChip,
+    SapiViewCoreAtlasChip,
   ],
   exports: [
     SapiViewsCoreAtlasAtlasDropdownSelector,
     SapiViewsCoreAtlasAtlasTmplParcSelector,
     SapiViewsCoreAtlasSplashScreen,
+    SapiViewCoreAtlasSmartChip,
+    SapiViewCoreAtlasChip,
   ]
 })
 
-export class SapiViewsCoreAtlasModule{}
\ No newline at end of file
+export class SapiViewsCoreAtlasModule{}
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
new file mode 100644
index 000000000..8bf031a3d
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.components.ts
@@ -0,0 +1,33 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {SapiAtlasModel} from "src/atlasComponents/sapi";
+
+@Component({
+  selector: 'sxplr-sapiviews-core-atlas-smartchip',
+  templateUrl: './atlas.smartChip.template.html',
+  styleUrls: ['./atlas.smartChip.style.css']
+})
+
+export class SapiViewCoreAtlasSmartChip {
+
+  @Input('sxplr-sapiviews-core-atlas-smartchip-atlas')
+  atlas: SapiAtlasModel
+
+  @Input('sxplr-sapiviews-core-atlas-smartchip-all-atlases')
+  atlases: SapiAtlasModel[]
+
+  @Output('sxplr-sapiviews-core-atlas-smartchip-select-atlas')
+  onSelectAtlas = new EventEmitter<SapiAtlasModel>()
+
+  // constructor() {}
+
+
+  selectAtlas(atlas: SapiAtlasModel){
+    if (this.trackByFn(atlas) === this.trackByFn(this.atlas)) return
+    this.onSelectAtlas.emit(atlas)
+  }
+
+  trackByFn(atlas: SapiAtlasModel){
+    return atlas["@id"]
+  }
+
+}
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.stories.ts b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.style.css b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.style.css
new file mode 100644
index 000000000..514406d32
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.style.css
@@ -0,0 +1,34 @@
+.otherversion-wrapper
+{
+    position: relative;
+    overflow: hidden;
+    margin: 0.5rem;
+}
+
+.otherversion-wrapper.loading > .spinner-container
+{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+}
+
+.otherversion-wrapper.loading > .spinner-container > spinner-cmp
+{
+    margin: 0.5rem;
+}
+
+.icons-container
+{
+    /*transform: scale(0.7);*/
+    margin-right: -1.5rem;
+}
+
+.icons-container > *
+{
+    margin: auto 0.2rem;
+}
diff --git a/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
new file mode 100644
index 000000000..90da2b2a5
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/atlas/smartChip/atlas.smartChip.template.html
@@ -0,0 +1,28 @@
+<sxplr-sapiviews-core-atlas-chip
+  class="sxplr-d-inline-block"
+  [sxplr-sapiviews-core-atlas-chip-atlas]="atlas"
+  [sxplr-sapiviews-core-atlas-chip-color]="'default'"
+  (sxplr-sapiviews-core-atlas-chip-onclick)="menuTrigger.toggleMenu()"
+  [matMenuTriggerFor]="atlasesMenu"
+  #menuTrigger="matMenuTrigger">
+  <div class="sxplr-scale-70"
+       suffix
+       iav-stop="mousedown click"></div>
+</sxplr-sapiviews-core-atlas-chip>
+
+<mat-menu #atlasesMenu="matMenu"
+  [hasBackdrop]="false"
+  class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
+  <div (iav-outsideClick)="menuTrigger.closeMenu()">
+
+    <div *ngFor="let atl of atlases"
+      class="otherversion-wrapper"> 
+      <sxplr-sapiviews-core-atlas-chip
+        [sxplr-sapiviews-core-atlas-chip-atlas]="atl"
+        [sxplr-sapiviews-core-atlas-chip-color]="(atl | equality : atlas : trackByFn) ? 'primary' : 'default'"
+        (sxplr-sapiviews-core-atlas-chip-onclick)="selectAtlas(atl)">
+      </sxplr-sapiviews-core-atlas-chip>
+    </div> 
+  </div>
+  
+</mat-menu>
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
index 27d4a53cc..94e60af8c 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.component.ts
@@ -1,10 +1,22 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output, QueryList,
+  SimpleChange,
+  SimpleChanges,
+  ViewChild,
+  ViewChildren
+} from "@angular/core";
 import { BehaviorSubject, concat, Observable, of, timer } from "rxjs";
 import { SapiParcellationModel } from "src/atlasComponents/sapi/type";
 import { ParcellationVisibilityService } from "../parcellationVis.service";
 import { ARIA_LABELS } from "common/constants"
 import { getTraverseFunctions } from "../parcellationVersion.pipe";
 import { mapTo, shareReplay, switchMap } from "rxjs/operators";
+import {GroupedParcellation} from "src/atlasComponents/sapiViews/core/parcellation/groupedParcellation";
+import {MatMenu, MatMenuTrigger} from "@angular/material/menu";
 
 @Component({
   selector: `sxplr-sapiviews-core-parcellation-smartchip`,
@@ -30,6 +42,8 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
   @Output('sxplr-sapiviews-core-parcellation-smartchip-select-parcellation')
   onSelectParcellation = new EventEmitter<SapiParcellationModel>()
 
+  @ViewChildren('subParcMenuTrigger') subParcMenuTrigger: QueryList<MatMenuTrigger>;
+
   constructor(
     private svc: ParcellationVisibilityService
   ){
@@ -100,5 +114,15 @@ export class SapiViewsCoreParcellationParcellationSmartChip implements OnChanges
     return parc["@id"]
   }
 
+  openParcellationGroup(index) {
+    const children = this.subParcMenuTrigger.toArray()
+    children[index].openMenu()
+  }
+
+  closeParcellationGroup(index) {
+    const children = this.subParcMenuTrigger.toArray()
+    children[index].closeMenu()
+  }
+
   onDismissClicked$ = new BehaviorSubject<boolean>(false)
 }
diff --git a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
index 4dac11789..cf6a1a79a 100644
--- a/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
+++ b/src/atlasComponents/sapiViews/core/parcellation/smartChip/parcellation.smartChip.template.html
@@ -3,47 +3,88 @@
   class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
   <div (iav-outsideClick)="menuTrigger.closeMenu()">
 
-    <div *ngFor="let parc of otherVersions"
+
+    <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs"
       class="otherversion-wrapper"
-      [ngClass]="{
-        'loading': (loadingParc$ | async) === parc
-      }">
+      [ngClass]="{'loading': (loadingParc$ | async) === parc}">
+      <ng-container [ngTemplateOutlet]="parcellationChip"
+                    [ngTemplateOutletContext]="{ parc }"></ng-container>
+    </div>
 
+    <div *ngFor="let parc of parcellations | filterUnsupportedParc | filterGroupedParcs : true | filterUnsupportedParc; let i = index"
+      class="otherversion-wrapper"
+      [ngClass]="{'loading': (loadingParc$ | async) === parc}">
+      <ng-container [ngTemplateOutlet]="parcellationChip"
+                    [ngTemplateOutletContext]="{ parc, grouped: true, i }"></ng-container>
+    </div>
+  </div>
+  
+</mat-menu>
 
-      <sxplr-sapiviews-core-parcellation-chip
-        [ngClass]="{
-          'sxplr-blink': (loadingParc$ | async) === parc
+<mat-menu #subParcMenu="matMenu" class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw" >
+  <ng-template matMenuContent let-group="group">
+    <div *ngFor="let parc of group.parcellations"
+         class="otherversion-wrapper"
+         [ngClass]="{'loading': (loadingParc$ | async) === parc}">
+      <ng-container [ngTemplateOutlet]="parcellationChip"
+                    [ngTemplateOutletContext]="{ parc }"></ng-container>
+    </div>
+
+  </ng-template>
+</mat-menu>
+
+<ng-template #parcellationChip let-parc="parc" let-grouped="grouped" let-index="i">
+  <sxplr-sapiviews-core-parcellation-chip
+          [ngClass]="{
+          'sxplr-blink': (loadingParc$ | async) === parc,
+          'sxplr-muted': !grouped && !(parc | parcellationSupportedInCurrentSpace | async)
         }"
-        [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc"
-        [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'"
-        (sxplr-sapiviews-core-parcellation-chip-onclick)="selectParcellation(parc)">
-
-        <div class="sxplr-scale-70"
-          suffix 
-          iav-stop="mousedown click">
-
-          <ng-template #otherParcDesc>
-            <ng-template [ngTemplateOutlet]="parcDescTmpl"
-              [ngTemplateOutletContext]="{ parcellation: parc }">
-            </ng-template>
+          [sxplr-sapiviews-core-parcellation-chip-parcellation]="parc"
+          [sxplr-sapiviews-core-parcellation-chip-color]="(parcellation | equality : parc : trackByFn) ? 'primary' : 'default'"
+          (sxplr-sapiviews-core-parcellation-chip-onclick)="grouped? openParcellationGroup(index) : selectParcellation(parc)">
+
+    <div *ngIf="!grouped && !(parc | parcellationSupportedInCurrentSpace | async)" prefix matTooltip="Changes space">
+      <i class="fas fa-sync mr-2"></i>
+    </div>
+
+    <div class="sxplr-scale-70"
+         suffix
+         iav-stop="mousedown click">
+
+      <div *ngIf="!grouped; else groupedParcTmp">
+        <ng-template #otherParcDesc>
+          <ng-template [ngTemplateOutlet]="parcDescTmpl"
+                       [ngTemplateOutletContext]="{ parcellation: parc }">
           </ng-template>
+        </ng-template>
 
-          <button mat-mini-fab color="default"
-            [sxplr-dialog]="otherParcDesc"
-            [sxplr-dialog-size]="null">
-            <i class="fas fa-info"></i>
-          </button>
-        </div>
-      </sxplr-sapiviews-core-parcellation-chip>
-
-      <div class="spinner-container" *ngIf="(loadingParc$ | async) === parc">
-        <spinner-cmp>
-        </spinner-cmp>
+        <button mat-mini-fab color="default"
+                [sxplr-dialog]="otherParcDesc"
+                [sxplr-dialog-size]="null">
+          <i class="fas fa-info"></i>
+        </button>
       </div>
+
+      <ng-template #groupedParcTmp>
+        <button mat-mini-fab color="default"
+                #subParcMenuTrigger="matMenuTrigger"
+                [matMenuTriggerFor]="subParcMenu"
+                [matMenuTriggerData]="{group: parc}">
+          <i class="fas fa-angle-right"></i>
+        </button>
+      </ng-template>
+
     </div>
+
+
+  </sxplr-sapiviews-core-parcellation-chip>
+
+  <div class="spinner-container" *ngIf="(loadingParc$ | async) === parc">
+    <spinner-cmp>
+    </spinner-cmp>
   </div>
-  
-</mat-menu>
+</ng-template>
+
 
 <sxplr-sapiviews-core-parcellation-chip
   [ngClass]="{
@@ -134,3 +175,4 @@
     <button mat-button mat-dialog-close>Close</button>
   </mat-dialog-actions>
 </ng-template>
+
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts b/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
new file mode 100644
index 000000000..9a7aa1a0e
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/space/chip/space.chip.component.ts
@@ -0,0 +1,24 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { SapiSpaceModel } from "src/atlasComponents/sapi/type";
+
+@Component({
+  selector: 'sxplr-sapiviews-core-space-chip',
+  templateUrl: './space.chip.template.html'
+})
+
+export class SapiViewCoreSpaceChip {
+
+  @Input('sxplr-sapiviews-core-space-chip-space')
+  space: SapiSpaceModel
+
+  @Input('sxplr-sapiviews-core-space-chip-color')
+  color: 'default' | 'primary' | 'accent' | 'warn' = "default"
+
+  @Output('sxplr-sapiviews-core-space-chip-onclick')
+  onClick = new EventEmitter<MouseEvent>()
+
+  click(event: MouseEvent) {
+    this.onClick.emit(event)
+  }
+
+}
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts b/src/atlasComponents/sapiViews/core/space/chip/space.chip.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html b/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
new file mode 100644
index 000000000..c13681f29
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/space/chip/space.chip.template.html
@@ -0,0 +1,14 @@
+<mat-chip-list *ngIf="space">
+    <mat-chip [selected]="color !== 'default'" (click)="click($event)" [color]="color">
+
+        <ng-content select="[prefix]">
+        </ng-content>
+
+        <span class="mat-body sxplr-white-space-nowrap">
+            {{ space.fullName }}
+        </span>
+
+        <ng-content select="[suffix]">
+        </ng-content>
+    </mat-chip>
+</mat-chip-list>
diff --git a/src/atlasComponents/sapiViews/core/space/module.ts b/src/atlasComponents/sapiViews/core/space/module.ts
index 35b96ce90..93ec8449a 100644
--- a/src/atlasComponents/sapiViews/core/space/module.ts
+++ b/src/atlasComponents/sapiViews/core/space/module.ts
@@ -4,21 +4,35 @@ import { ComponentsModule } from "src/components";
 import { SapiViewsCoreSpaceBoundingBox } from "./boundingBox.directive";
 import { PreviewSpaceUrlPipe } from "./previewSpaceUrl.pipe";
 import { SapiViewsCoreSpaceSpaceTile } from "./tile/space.tile.component";
+import {
+  SapiViewCoreSpaceSmartChip
+} from "src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components";
+import {SapiViewCoreSpaceChip} from "src/atlasComponents/sapiViews/core/space/chip/space.chip.component";
+import { AngularMaterialModule } from "src/sharedModules";
+import { DialogModule } from "src/ui/dialogInfo/module";
+import { SapiViewsUtilModule } from "../../util";
 
 @NgModule({
   imports: [
     CommonModule,
     ComponentsModule,
+    AngularMaterialModule,
+    DialogModule,
+    SapiViewsUtilModule,
   ],
   declarations: [
     SapiViewsCoreSpaceSpaceTile,
     PreviewSpaceUrlPipe,
     SapiViewsCoreSpaceBoundingBox,
+    SapiViewCoreSpaceSmartChip,
+    SapiViewCoreSpaceChip
   ],
   exports: [
     SapiViewsCoreSpaceSpaceTile,
     SapiViewsCoreSpaceBoundingBox,
+    SapiViewCoreSpaceSmartChip,
+    SapiViewCoreSpaceChip
   ]
 })
 
-export class SapiViewsCoreSpaceModule{}
\ No newline at end of file
+export class SapiViewsCoreSpaceModule{}
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
new file mode 100644
index 000000000..4c7fc420e
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.components.ts
@@ -0,0 +1,33 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import { SapiSpaceModel } from "src/atlasComponents/sapi/type";
+
+@Component({
+  selector: 'sxplr-sapiviews-core-space-smartchip',
+  templateUrl: './space.smartChip.template.html',
+  styleUrls: ['./space.smartChip.style.css']
+})
+
+export class SapiViewCoreSpaceSmartChip {
+
+  @Input('sxplr-sapiviews-core-space-smartchip-space')
+  space: SapiSpaceModel
+
+  @Input('sxplr-sapiviews-core-space-smartchip-all-spaces')
+  spaces: SapiSpaceModel[]
+
+  @Output('sxplr-sapiviews-core-space-smartchip-select-space')
+  onSelectSpace = new EventEmitter<SapiSpaceModel>()
+
+  // constructor() {}
+
+
+  selectSpace(space: SapiSpaceModel){
+    if (this.trackByFn(space) === this.trackByFn(this.space)) return
+    this.onSelectSpace.emit(space)
+  }
+
+  trackByFn(space: SapiSpaceModel){
+    return space["@id"]
+  }
+
+}
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.stories.ts b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.stories.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.style.css b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html
new file mode 100644
index 000000000..3090ab7e8
--- /dev/null
+++ b/src/atlasComponents/sapiViews/core/space/smartChip/space.smartChip.template.html
@@ -0,0 +1,44 @@
+<sxplr-sapiviews-core-space-chip
+  class="sxplr-d-inline-block"
+  [sxplr-sapiviews-core-space-chip-space]="space"
+  [sxplr-sapiviews-core-space-chip-color]="'default'"
+  (sxplr-sapiviews-core-space-chip-onclick)="menuTrigger.toggleMenu()"
+  [matMenuTriggerFor]="spacesMenu"
+  #menuTrigger="matMenuTrigger"
+  >
+
+  <div class="sxplr-scale-70"
+       suffix
+       iav-stop="mousedown click"></div>
+
+
+</sxplr-sapiviews-core-space-chip>
+
+<mat-menu #spacesMenu="matMenu"
+  [hasBackdrop]="false"
+  class="parc-smart-chip-menu-panel sxplr-bg-none sxplr-of-x-hidden sxplr-box-shadow-none sxplr-mxw-80vw">
+  <div (iav-outsideClick)="menuTrigger.closeMenu()">
+
+    <div *ngFor="let spc of spaces"
+      class="otherversion-wrapper"> 
+
+      <sxplr-sapiviews-core-space-chip
+
+        [sxplr-sapiviews-core-space-chip-space]="spc"
+        [sxplr-sapiviews-core-space-chip-color]="(spc | equality : space : trackByFn) ? 'primary' : 'default'"
+        (sxplr-sapiviews-core-space-chip-onclick)="selectSpace(spc)">
+
+      </sxplr-sapiviews-core-space-chip>
+
+    </div> 
+  </div>
+  
+</mat-menu>
+
+<!-- space description template -->
+<ng-template #spaceDescTmpl let-space="space">
+    <h1 mat-dialog-title>
+      {{ space.fullName }}
+    </h1>
+
+</ng-template>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index f0b32efea..5801d51eb 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -8,7 +8,7 @@ import { IQuickTourData } from "src/ui/quickTour";
 import { EnumViewerEvt, TContextArg, TSupportedViewers, TViewerEvent } from "../viewer.interface";
 import { ContextMenuService, TContextMenuReg } from "src/contextMenuModule";
 import { DialogService } from "src/services/dialogService.service";
-import { SAPI, SapiRegionModel } from "src/atlasComponents/sapi";
+import {SAPI, SapiAtlasModel, SapiRegionModel} from "src/atlasComponents/sapi";
 import { atlasSelection, userInteraction, } from "src/state";
 import { SapiSpatialFeatureModel, SapiFeatureModel, SapiParcellationModel, SapiSpaceModel } from "src/atlasComponents/sapi/type";
 import { getUuid } from "src/util/fn";
@@ -94,6 +94,8 @@ export class ViewerCmp implements OnDestroy {
     shareReplay(1)
   )
 
+  public fetchedAtlases$: Observable<SapiAtlasModel[]> = this.sapi.atlases$
+
   public selectedAtlas$ = this.selectedATP.pipe(
     map(({ atlas }) => atlas)
   )
@@ -104,6 +106,13 @@ export class ViewerCmp implements OnDestroy {
     map(({ parcellation }) => parcellation)
   )
 
+  public allAvailableAtlas$ = this.store$.pipe(
+    atlasSelection.fromRootStore.allAvailSpaces(this.sapi)
+  )
+  public allAvailableSpaces$ = this.store$.pipe(
+    atlasSelection.fromRootStore.allAvailSpaces(this.sapi)
+  )
+
   public allAvailableParcellations$ = this.store$.pipe(
     atlasSelection.fromRootStore.allAvailParcs(this.sapi)
   )
@@ -405,6 +414,20 @@ export class ViewerCmp implements OnDestroy {
       atlasSelection.actions.clearNonBaseParcLayer()
     )
   }
+  onSelectAtlas(atlas: SapiAtlasModel): void{
+    this.store$.dispatch(
+      atlasSelection.actions.selectAtlas({
+        atlas
+      })
+    )
+  }
+  onSelectSpace(template: SapiSpaceModel): void{
+    this.store$.dispatch(
+      atlasSelection.actions.selectTemplate({
+        template
+      })
+    )
+  }
   onSelectParcellation(parcellation: SapiParcellationModel): void{
     this.store$.dispatch(
       atlasSelection.actions.selectParcellation({
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index e5a409a28..311bd4a4d 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -140,3 +140,8 @@ mat-list[dense].contextual-block
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+.arrow-between-chips {
+  margin: 0 -30px;
+  padding: 0 30px;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index b0e06fdaa..360a4f368 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -376,12 +376,12 @@
     [viewerLoaded]="viewerLoaded">
   </top-menu-cmp>
 
-  <sxplr-sapiviews-core-atlas-dropdown-selector
-    class="v-align-top sxplr-pt-2 pe-all mt-2 sxplr-custom-cmp bg card m-2 mat-elevation-z2 d-inline-block"
-    quick-tour
-    [quick-tour-description]="quickTourAtlasSelector.description"
-    [quick-tour-order]="quickTourAtlasSelector.order">
-  </sxplr-sapiviews-core-atlas-dropdown-selector>
+<!--  <sxplr-sapiviews-core-atlas-dropdown-selector-->
+<!--    class="v-align-top sxplr-pt-2 pe-all mt-2 sxplr-custom-cmp bg card m-2 mat-elevation-z2 d-inline-block"-->
+<!--    quick-tour-->
+<!--    [quick-tour-description]="quickTourAtlasSelector.description"-->
+<!--    [quick-tour-order]="quickTourAtlasSelector.order">-->
+<!--  </sxplr-sapiviews-core-atlas-dropdown-selector>-->
 
 </ng-template>
 
@@ -403,14 +403,14 @@
 <!-- bottom left -->
 <ng-template #bottomLeftTmpl let-showFullSideNav="showFullSideNav">
 
-  <!-- atlas selector -->
-  <sxplr-sapiviews-core-atlas-tmplparcselector
-    *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"
-    [iav-key-listener]="[{'type': 'keydown', 'key': 'Escape'}]"
-    (iav-key-event)="tmplParcSelector.closeSelector()"
-    (iav-outsideClick)="tmplParcSelector.closeSelector()"
-    #tmplParcSelector="sxplrSapiViewsCoreAtlasTmplparcselector">
-  </sxplr-sapiviews-core-atlas-tmplparcselector>
+<!--  &lt;!&ndash; atlas selector &ndash;&gt;-->
+<!--  <sxplr-sapiviews-core-atlas-tmplparcselector-->
+<!--    *ngIf="viewerLoaded && !(isStandaloneVolumes$ | async)"-->
+<!--    [iav-key-listener]="[{'type': 'keydown', 'key': 'Escape'}]"-->
+<!--    (iav-key-event)="tmplParcSelector.closeSelector()"-->
+<!--    (iav-outsideClick)="tmplParcSelector.closeSelector()"-->
+<!--    #tmplParcSelector="sxplrSapiViewsCoreAtlasTmplparcselector">-->
+<!--  </sxplr-sapiviews-core-atlas-tmplparcselector>-->
 
   <!-- scroll container -->
   <div class="sxplr-d-inline-flex
@@ -420,6 +420,30 @@
     sxplr-of-x-auto
     sxplr-of-y-hidden">
 
+    <!-- selected atlas chip -->
+    <sxplr-sapiviews-core-atlas-smartchip
+      class="sxplr-z-2 sxplr-ml-2"
+      [sxplr-sapiviews-core-atlas-smartchip-atlas]="selectedAtlas$ | async"
+      [sxplr-sapiviews-core-atlas-smartchip-all-atlases]="fetchedAtlases$ | async"
+      (sxplr-sapiviews-core-atlas-smartchip-select-atlas)="onSelectAtlas($event)"
+      >
+    </sxplr-sapiviews-core-atlas-smartchip>
+
+    <mat-chip class="pe-all sxplr-z-1 arrow-between-chips">></mat-chip>
+
+
+    <!-- selected space chip -->
+    <sxplr-sapiviews-core-space-smartchip
+      class="sxplr-z-2"
+      [sxplr-sapiviews-core-space-smartchip-space]="templateSelected$ | async"
+      [sxplr-sapiviews-core-space-smartchip-all-spaces]="allAvailableSpaces$ | async"
+      (sxplr-sapiviews-core-space-smartchip-select-space)="onSelectSpace($event)"
+      >
+    </sxplr-sapiviews-core-space-smartchip>
+
+    <mat-chip class="pe-all sxplr-z-1 arrow-between-chips">></mat-chip>
+
+
     <!-- selected parcellation chip -->
     <sxplr-sapiviews-core-parcellation-smartchip
       class="sxplr-z-2 sxplr-mr-1"
-- 
GitLab