chore: use combined modal to display help and ToU

chore: restore clear all selected regions

src/atlasViewer/atlasViewer.component.ts

@@ -33,7 +33,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
 
   @ViewChild('floatingMouseContextualContainer', { read: ViewContainerRef }) floatingMouseContextualContainer: ViewContainerRef
   @ViewChild('helpComponent', {read: TemplateRef}) helpComponent : TemplateRef<any>
-  @ViewChild('viewerConfigComponent', {read: TemplateRef}) viewerConfigComponent : TemplateRef<any>
   @ViewChild('signinModalComponent', {read: TemplateRef}) signinModalComponent : TemplateRef<any>
   @ViewChild('cookieAgreementComponent', {read: TemplateRef}) cookieAgreementComponent : TemplateRef<any>
   @ViewChild(LayoutMainSide) layoutMainSide: LayoutMainSide
@@ -55,7 +54,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
   public selectedRegions$: Observable<any[]>
   public selectedPOI$ : Observable<any[]>
   private showHelp$: Observable<any>
-  private showConfig$: Observable<any>
 
   public dedicatedView$: Observable<string | null>
   public onhoverSegment$: Observable<string>
@@ -106,10 +104,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       debounceTime(170)
     )
 
-    this.showConfig$ = this.constantsService.showConfigSubject$.pipe(
-      debounceTime(170)
-    )
-
     this.selectedRegions$ = this.store.pipe(
       select('viewerState'),
       filter(state=>isDefined(state)&&isDefined(state.regionsSelected)),
@@ -245,17 +239,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
       })
     )
 
-    this.subscriptions.push(
-      this.showConfig$.subscribe(() => {
-        this.modalService.show(ModalUnit, {
-          initialState: {
-            title: this.constantsService.showConfigTitle,
-            template: this.viewerConfigComponent
-          }
-        })
-      })
-    )
-
     this.subscriptions.push(
       this.ngLayerNames$.pipe(
         concatMap(data => this.constantsService.loadExportNehubaPromise.then(data))

src/atlasViewer/atlasViewer.constantService.service.ts

@@ -172,13 +172,12 @@ Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float
   /**
    * Observable for showing config modal
    */
-  public showConfigSubject$: Subject<null> = new Subject()
   public showConfigTitle: String = 'Settings'
   /**
    * Observable for showing help modal
    */
   public showHelpSubject$: Subject<null> = new Subject()
-  public showHelpTitle: String = 'Help: Controls and Shortcuts'
+  public showHelpTitle: String = 'About'
 
   private showHelpGeneralMobile = [
     ['hold 🌏 + ↕', 'change oblique slice mode'],

src/atlasViewer/atlasViewer.template.html

@@ -78,12 +78,24 @@
 </div>
 
 <ng-template #helpComponent>
-  <help-component>
-  </help-component>
-</ng-template>
-<ng-template #viewerConfigComponent>
-  <config-component>
-  </config-component>
+  <tabset>
+    <tab heading="Help">
+      <help-component>
+      </help-component>
+    </tab>
+    <tab heading="Settings">
+      <div class="mt-2">
+        <config-component>
+        </config-component>
+      </div>
+    </tab>
+    <tab heading="Privacy Policy">
+      <div class="mt-2">
+        <cookie-agreement>
+        </cookie-agreement>
+      </div>
+    </tab>
+  </tabset>
 </ng-template>
 <ng-template #signinModalComponent>
   <signin-modal>

src/components/flatTree/flatTree.template.html

@@ -26,8 +26,7 @@
     
         </span>
       </span>
-      <span 
-        class="test"
+      <span
         *ngIf="findChildren(flattenedItem).length > 0; else noChildren"
         (click)="$event.stopPropagation(); toggleCollapse(flattenedItem)" >
         <i [ngClass]="isCollapsed(flattenedItem) ? 'r-270' : ''" class="fas fa-chevron-down"></i>

src/main.module.ts

@@ -15,6 +15,7 @@ import { WidgetUnit } from "./atlasViewer/widgetUnit/widgetUnit.component";
 import { WidgetServices } from './atlasViewer/widgetUnit/widgetService.service'
 import { fasTooltipScreenshotDirective,fasTooltipInfoSignDirective,fasTooltipLogInDirective,fasTooltipNewWindowDirective,fasTooltipQuestionSignDirective,fasTooltipRemoveDirective,fasTooltipRemoveSignDirective } from "./util/directives/glyphiconTooltip.directive";
 import { TooltipModule } from "ngx-bootstrap/tooltip";
+import { TabsModule } from 'ngx-bootstrap/tabs'
 import { ModalModule } from 'ngx-bootstrap/modal'
 import { ModalUnit } from "./atlasViewer/modalUnit/modalUnit.component";
 import { AtlasViewerURLService } from "./atlasViewer/atlasViewer.urlService.service";
@@ -46,6 +47,7 @@ import { DatabrowserService } from "./ui/databrowserModule/databrowser.service";
     
     ModalModule.forRoot(),
     TooltipModule.forRoot(),
+    TabsModule.forRoot(),
     StoreModule.forRoot({
       pluginState,
       viewerConfigState,

src/ui/regionHierachy/regionHierarchy.component.ts

@@ -32,6 +32,9 @@ export class RegionHierarchy implements OnInit{
   @Output()
   private doubleClickRegion: EventEmitter<any> = new EventEmitter()
 
+  @Output()
+  private clearAllRegions: EventEmitter<null> = new EventEmitter()
+
   public searchTerm: string = ''
   private subscriptions: Subscription[] = []
 
@@ -56,6 +59,11 @@ export class RegionHierarchy implements OnInit{
   ){
   }
 
+  clearRegions(event:MouseEvent){
+    event.stopPropagation()
+    this.clearAllRegions.emit()
+  }
+
   get showRegionTree(){
     return this._showRegionTree
   }

src/ui/regionHierachy/regionHierarchy.style.css

 
-div[treeHeader]
-{
-  height: 55px;
-}
-
-div[treeHeader] > span 
-{
-  display:inline-block;
-  padding: 12px 0px;
-  line-height:2em;
-  border:none;
-}
-
-div[treeHeader] > span.btn.btn-link
-{
-  margin-left:2em;
-}
-
 div[treeContainer]
 {
   padding:1em;

src/ui/regionHierachy/regionHierarchy.template.html

@@ -17,9 +17,16 @@
   hideScrollbarContainer>
 
   <div treeContainer #treeContainer>
-    <div treeHeader>
-      <span>{{ selectedRegions.length }} {{ selectedRegions.length > 1 ? 'regions' : 'region' }} selected</span> 
-      <span (click)="clearRegions($event)" *ngIf="selectedRegions.length > 0" class="btn btn-link">clear all</span>
+    <div class="d-inline-flex align-items-center">
+      <div>
+        {{ selectedRegions.length }} {{ selectedRegions.length > 1 ? 'regions' : 'region' }} selected
+      </div>
+      <div
+        (click)="clearRegions($event)"
+        [ngClass]="{ 'invisible': selectedRegions.length === 0 }"
+        class="btn btn-link">
+        clear all
+      </div>
     </div>
     
     <ng-container *ngIf="selectedParcellation && selectedParcellation.regions as regions">

src/ui/signinBanner/signinBanner.components.ts

@@ -121,14 +121,17 @@ export class SigninBanner implements OnInit, OnDestroy{
     this.constantService.showHelpSubject$.next()
   }
 
-  showConfig() {
-    this.constantService.showConfigSubject$.next()
-  }
-
   showSignin() {
     this.constantService.showSigninSubject$.next(this.user)
   }
 
+  clearAllRegions(){
+    this.store.dispatch({
+      type: SELECT_REGIONS,
+      selectRegions: []
+    })
+  }
+
   get isMobile(){
     return this.constantService.mobile
   }

src/ui/signinBanner/signinBanner.template.html

@@ -20,6 +20,7 @@
     [selectedRegions]="selectedRegions$ | async | filterNull"
     (singleClickRegion)="handleRegionClick({ mode: 'single', region: $event })"
     (doubleClickRegion)="handleRegionClick({ mode: 'double', region: $event })"
+    (clearAllRegions)="clearAllRegions()"
     *ngIf="selectedParcellation$ | async as selectedParcellation"
     [selectedParcellation]="selectedParcellation">
 
@@ -34,21 +35,11 @@
   <i class="fas fa-question-circle"></i>
 </div>
 
-<!-- config btn -->
+<!-- signin -->
 <div
-  *ngIf="!isMobile" 
-  (click)="showConfig()"
+  (click)="showSignin()"
   class="btn btn-outline-secondary btn-sm rounded-circle">
-  <i class="fas fa-cog"></i>
-</div>
-
-<!-- signin -->
-<div class="btnWrapper">
-  <div
-    (click)="showSignin()"
-    class="btn btn-outline-secondary btn-sm rounded-circle">
-    <i
-      [ngClass]="user ? 'fa-user' : 'fa-sign-in-alt'"
-      class="fas"></i>
-  </div>
+  <i
+    [ngClass]="user ? 'fa-user' : 'fa-sign-in-alt'"
+    class="fas"></i>
 </div>
\ No newline at end of file