feat: only show full panel if region info exists (#610)

common/constants.js

 (function(exports){
 
   exports.ARIA_LABELS = {
+    // generic
+    CLOSE: 'Close',
+    OPEN: 'Open',
+    EXPAND: 'Expand',
+    COLLAPSE: 'Collapse',
+
     // dataset specific
     SHOW_DATASET_PREVIEW: 'Show dataset preview',
     TOGGLE_EXPLORE_PANEL: `Toggle explore panel`,
@@ -21,6 +27,7 @@
     STATUS_PANEL: 'Viewre status panel',
     SHOW_FULL_STATUS_PANEL: 'Show full status panel',
     HIDE_FULL_STATUS_PANEL: 'Hide full status panel',
+    TOGGLE_SIDE_PANEL: 'Toggle side panel',
 
     // sharing module
     SHARE_BTN: `Share this view`,

src/ui/databrowserModule/databrowser/databrowser.component.ts

@@ -76,7 +76,7 @@ export class DataBrowser implements OnChanges, OnDestroy, OnInit {
        * TODO to be replaced with properly region UUIDs from KG
        */
       return {
-        id: `${this.parcellation.name}/${r.name}`,
+        id: `${this.parcellation?.name || 'untitled_parcellation'}/${r.name}`,
         ...r,
       }
     })

src/ui/nehubaContainer/nehubaContainer.component.spec.ts

@@ -34,6 +34,15 @@ import { CommonModule } from '@angular/common'
 import { IMPORT_NEHUBA_INJECT_TOKEN } from './nehubaViewer/nehubaViewer.component'
 import { viewerStateHelperStoreName } from 'src/services/state/viewerState.store.helper'
 import { RenderViewOriginDatasetLabelPipe } from '../parcellationRegion/region.base'
+import { By } from '@angular/platform-browser'
+import { ARIA_LABELS } from 'common/constants'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+
+const { 
+  TOGGLE_SIDE_PANEL,
+  EXPAND,
+  COLLAPSE
+} = ARIA_LABELS
 
 const _bigbrainJson = require('!json-loader!src/res/ext/bigbrain.json')
 const _bigbrainNehubaConfigJson = require('!json-loader!src/res/ext/bigbrainNehubaConfig.json')
@@ -52,6 +61,7 @@ describe('> nehubaContainer.component.ts', () => {
 
       TestBed.configureTestingModule({
         imports: [
+          NoopAnimationsModule,
           PluginModule,
           WidgetModule,
           ComponentsModule,
@@ -185,5 +195,202 @@ describe('> nehubaContainer.component.ts', () => {
         
       })
     })
+
+    describe('> extended sidepanel hides and shows as expected', () => {
+      describe('> on start, if nothing is selected', () => {
+        beforeEach(() => {
+          const mockStore = TestBed.inject(MockStore)
+          const newState = {
+            ...defaultRootState,
+            viewerState: {
+              ...defaultRootState.viewerState,
+              fetchedTemplates: [ bigbrainJson ],
+              templateSelected: bigbrainJson,
+              parcellationSelected: bigbrainJson.parcellations[0]
+            },
+            [viewerStateHelperStoreName]: {
+              fetchedAtlases: [ humanAtlas ],
+              selectedAtlasId: humanAtlas['@id']
+            }
+          }
+
+          mockStore.setState(newState)
+        })
+
+        it('> both should be shut', () => {
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(false)
+          expect(
+            fixture.componentInstance.matDrawerMinor.opened
+          ).toEqual(false)
+        })
+
+        it('> opening via tab should result in only top drawer open', () => {
+
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const toggleBtn = fixture.debugElement.query( By.css(`[aria-label="${TOGGLE_SIDE_PANEL}"]`) )
+          toggleBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(true)
+          expect(
+            fixture.componentInstance.matDrawerMinor.opened
+          ).toEqual(false)
+        })
+
+        it('> on opening top drawer, explore features should not be present', () => {
+
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const toggleBtn = fixture.debugElement.query( By.css(`[aria-label="${TOGGLE_SIDE_PANEL}"]`) )
+          toggleBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          const expandRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${EXPAND}"]`) )
+          expect(expandRegionFeatureBtn).toBeNull()
+        })
+        it('> collapse btn should not be visible', () => {
+
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const toggleBtn = fixture.debugElement.query( By.css(`[aria-label="${TOGGLE_SIDE_PANEL}"]`) )
+          toggleBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          const expandRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${COLLAPSE}"]`) )
+          expect(expandRegionFeatureBtn).toBeNull()
+        })
+      })
+
+      describe('> on start, if something is selected', () => {
+        beforeEach(() => {
+          const mockStore = TestBed.inject(MockStore)
+          const newState = {
+            ...defaultRootState,
+            viewerState: {
+              ...defaultRootState.viewerState,
+              fetchedTemplates: [ bigbrainJson ],
+              templateSelected: bigbrainJson,
+              parcellationSelected: bigbrainJson.parcellations[0],
+              regionsSelected: [{
+                name: "foobar"
+              }]
+            },
+            [viewerStateHelperStoreName]: {
+              fetchedAtlases: [ humanAtlas ],
+              selectedAtlasId: humanAtlas['@id']
+            }
+          }
+
+          mockStore.setState(newState)
+        })
+        it('> both should be open', () => {
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(true)
+          expect(
+            fixture.componentInstance.matDrawerMinor.opened
+          ).toEqual(true)
+
+          expect(
+            fixture.componentInstance.navSideDrawerMainSwitch.switchState
+          ).toEqual(true)
+          expect(
+            fixture.componentInstance.navSideDrawerMinorSwitch.switchState
+          ).toEqual(true)
+        })
+
+        it('> closing main drawer via tag should close both', () => {
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const toggleBtn = fixture.debugElement.query( By.css(`[aria-label="${TOGGLE_SIDE_PANEL}"]`) )
+          toggleBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(false)
+
+          /**
+           * TODO investigate why openedStart/closedStart events fail to fire
+           */
+          // expect(
+          //   fixture.componentInstance.matDrawerMinor.opened
+          // ).toEqual(false)
+
+          // expect(
+          //   fixture.componentInstance.navSideDrawerMainSwitch.switchState
+          // ).toEqual(false)
+          // expect(
+          //   fixture.componentInstance.navSideDrawerMinorSwitch.switchState
+          // ).toEqual(false)
+        })
+        it('> collapse btn should be visible', () => {
+
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const collapseRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${COLLAPSE}"]`) )
+          expect(collapseRegionFeatureBtn).not.toBeNull()
+        })
+        it('> clicking on collapse btn should minimize 1 drawer', () => {
+
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const collapseRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${COLLAPSE}"]`) )
+          collapseRegionFeatureBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(true)
+
+          /**
+           * TODO investigate why property does not get updated
+           */
+          // expect(
+          //   fixture.componentInstance.matDrawerMinor.opened
+          // ).toEqual(false)
+
+          expect(
+            fixture.componentInstance.navSideDrawerMainSwitch.switchState
+          ).toEqual(true)
+          expect(
+            fixture.componentInstance.navSideDrawerMinorSwitch.switchState
+          ).toEqual(false)
+        })
+
+        it('> on minimize drawer, clicking expand btn should expand everything', () => {
+          const fixture = TestBed.createComponent(NehubaContainer)
+          fixture.detectChanges()
+          const collapseRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${COLLAPSE}"]`) )
+          collapseRegionFeatureBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+          const expandRegionFeatureBtn = fixture.debugElement.query( By.css(`mat-drawer[data-mat-drawer-open="true"] [aria-label="${EXPAND}"]`) )
+          expandRegionFeatureBtn.triggerEventHandler('click', null)
+          fixture.detectChanges()
+
+          expect(
+            fixture.componentInstance.matDrawerMain.opened
+          ).toEqual(true)
+          expect(
+            fixture.componentInstance.matDrawerMinor.opened
+          ).toEqual(true)
+
+          expect(
+            fixture.componentInstance.navSideDrawerMainSwitch.switchState
+          ).toEqual(true)
+          /**
+           * TODO figoure out why switch state is updated async, and karma can't force update state
+           */
+          // expect(
+          //   fixture.componentInstance.navSideDrawerMinorSwitch.switchState
+          // ).toEqual(true)
+        })
+      })
+    })
   })
 })
\ No newline at end of file

src/ui/nehubaContainer/nehubaContainer.component.ts

@@ -84,6 +84,9 @@ const sortByFreshness: (acc: any[], curr: any[]) => any[] = (acc, curr) => {
 const { 
   ZOOM_IN,
   ZOOM_OUT,
+  TOGGLE_SIDE_PANEL,
+  EXPAND,
+  COLLAPSE
 } = ARIA_LABELS
 
 @Component({
@@ -129,8 +132,13 @@ const {
 
 export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
 
+  public _tmp: number = 0
   public ARIA_LABEL_ZOOM_IN = ZOOM_IN
   public ARIA_LABEL_ZOOM_OUT = ZOOM_OUT
+  public ARIA_LABEL_TOGGLE_SIDE_PANEL = TOGGLE_SIDE_PANEL
+  public ARIA_LABEL_EXPAND = EXPAND
+  public ARIA_LABEL_COLLAPSE = COLLAPSE
+
   public ID_MESH_LOADING_STATUS = MESH_LOADING_STATUS
 
   @ViewChild(NehubaViewerContainerDirective,{static: true})

src/ui/nehubaContainer/nehubaContainer.style.css

@@ -180,3 +180,8 @@ div#scratch-pad
   margin-right: 1rem;
   text-align: right;
 }
+
+.tab-toggle-container
+{
+  margin-top: 1.5rem;
+}

src/ui/nehubaContainer/nehubaContainer.template.html

@@ -48,6 +48,7 @@
     <!-- sidenav-content -->
     <mat-drawer class="box-shadow-none border-0 pe-none bg-none col-10 col-sm-10 col-md-5 col-lg-4 col-xl-3 col-xxl-2"
       mode="side"
+      [attr.data-mat-drawer-open]="matDrawerMaster.opened"
       [opened]="sideNavMasterSwitch.switchState"
       [autoFocus]="false"
       (closedStart)="sideNavSwitch.switchState && matDrawerMinor.close()"
@@ -61,9 +62,11 @@
       </div>
 
       <button mat-raised-button
+        *ngIf="selectedRegions.length > 0"
+        [attr.aria-label]="ARIA_LABEL_EXPAND"
         (click)="matDrawerMinor.open()"
         class="explore-btn pe-all"
-        [color]="selectedRegions.length > 0 ? 'accent' : 'basic'">
+        color="accent">
         Explore regional features & connectivity
       </button>
     </mat-drawer>
@@ -81,8 +84,9 @@
         </ng-content>
       </div>
 
-      <div *ngIf="viewerLoaded" class="position-absolute z-index-6 top-0 left-0 pe-none m-2">
+      <div *ngIf="viewerLoaded" class="position-absolute z-index-6 top-0 left-0 pe-none tab-toggle-container">
         <button mat-raised-button
+          [attr.aria-label]="ARIA_LABEL_TOGGLE_SIDE_PANEL"
           class="pe-all tab-toggle"
           (click)="sideNavMasterSwitch.toggle()"
           [color]="!sideNavMasterSwitch.switchState && selectedRegions.length > 0 ? 'accent' : 'basic'">
@@ -95,7 +99,7 @@
 
   <!-- drawer #2 -->
   <mat-drawer-container
-    [iav-switch-initstate]="true"
+    [iav-switch-initstate]="selectedRegions.length > 0"
     iav-switch
     #sideNavSwitch="iavSwitch"
     class="mat-drawer-content-overflow-visible w-100 h-100 position-absolute invisible"
@@ -104,11 +108,13 @@
     <!-- sidenav-content -->
     <mat-drawer class="darker-bg iv-custom-comp visible col-10 col-sm-10 col-md-5 col-lg-4 col-xl-3 col-xxl-2 d-flex flex-column pe-all"
       mode="push"
+      [attr.data-mat-drawer-open]="matDrawerMinor.opened"
       [autoFocus]="false"
       #matDrawerMinor="matDrawer"
       (openedChange)="$event && sideNavSwitch.open()"
       [disableClose]="true"
       [@openClose]="sideNavMasterSwitch.switchState && sideNavSwitch.switchState ? 'open' : 'closed'"
+      (@openClose.start)="_tmp=1"
       (@openClose.done)="$event.toState === 'closed' && matDrawerMinor.close()">
 
       <div class="position-relative d-flex flex-column h-100">
@@ -167,6 +173,7 @@
   <!-- collapse btn -->
   <div class="h-0 w-100 collapse-position d-flex flex-column justify-content-end align-items-center">
     <button mat-raised-button class="mat-elevation-z8"
+      [attr.aria-label]="ARIA_LABEL_COLLAPSE"
       (click)="sideNavSwitch.close()"
       [color]="selectedRegions.length > 0 ? 'accent' : 'basic'">
       <i class="fas fa-chevron-up"></i>