diff --git a/common/constants.js b/common/constants.js
index d94ab3a30d5d7c6fbafb2380aadc40a725e28fed..1849b731b946a42438e8a9be05c6233f2f85bf0a 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -23,6 +23,7 @@
// overlay/layout specific
SELECT_ATLAS: 'Select a different atlas',
CONTEXT_MENU: `Viewer context menu`,
+ TOGGLE_FRONTAL_OCTANT: `Toggle perspective view frontal octant`,
ZOOM_IN: 'Zoom in',
ZOOM_OUT: 'Zoom out',
MAXIMISE_VIEW: 'Maximise this view',
diff --git a/src/services/state/ngViewerState.store.helper.ts b/src/services/state/ngViewerState.store.helper.ts
index 834c5d5d53d4168a08a65c348ffbcf5e51eb5fa0..2d0ca1500648a3654e7108cc7a22588055ac50ba 100644
--- a/src/services/state/ngViewerState.store.helper.ts
+++ b/src/services/state/ngViewerState.store.helper.ts
@@ -22,3 +22,21 @@ export {
ngViewerActionSetPanelOrder,
ngViewerActionForceShowSegment,
}
+
+import {
+ ngViewerSelectorClearView,
+ ngViewerSelectorClearViewEntries,
+ ngViewerSelectorNehubaReady,
+ ngViewerSelectorOctantRemoval,
+ ngViewerSelectorPanelMode,
+ ngViewerSelectorPanelOrder,
+} from './ngViewerState/selectors'
+
+export {
+ ngViewerSelectorClearView,
+ ngViewerSelectorClearViewEntries,
+ ngViewerSelectorNehubaReady,
+ ngViewerSelectorOctantRemoval,
+ ngViewerSelectorPanelMode,
+ ngViewerSelectorPanelOrder,
+}
\ No newline at end of file
diff --git a/src/services/state/ngViewerState.store.ts b/src/services/state/ngViewerState.store.ts
index 2f708a826b8479ec41699b9c2f3528fb78763a5f..bc3b7fb8ce0abfcf2c3c1799a9fccf28238b71e3 100644
--- a/src/services/state/ngViewerState.store.ts
+++ b/src/services/state/ngViewerState.store.ts
@@ -12,6 +12,7 @@ import { PureContantService } from 'src/util';
import { PANELS } from './ngViewerState.store.helper'
import { ngViewerActionToggleMax, ngViewerActionClearView, ngViewerActionSetPanelOrder, ngViewerActionSwitchPanelMode, ngViewerActionForceShowSegment, ngViewerActionNehubaReady } from './ngViewerState/actions';
import { generalApplyState } from '../stateStore.helper';
+import { ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from './ngViewerState/selectors';
export function mixNgLayers(oldLayers: INgLayerInterface[], newLayers: INgLayerInterface|INgLayerInterface[]): INgLayerInterface[] {
if (newLayers instanceof Array) {
@@ -233,14 +234,12 @@ export class NgViewerUseEffect implements OnDestroy {
)
this.panelOrder$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelOrder'),
+ select(ngViewerSelectorPanelOrder),
distinctUntilChanged(),
)
this.panelMode$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
distinctUntilChanged(),
)
@@ -258,10 +257,10 @@ export class NgViewerUseEffect implements OnDestroy {
this.maximiseOrder$ = toggleMaxmimise$.pipe(
withLatestFrom(
- combineLatest(
+ combineLatest([
this.panelOrder$,
this.panelMode$,
- ),
+ ]),
),
filter(([_action, [_panelOrder, panelMode]]) => panelMode !== PANELS.SINGLE_PANEL),
map(([ action, [ oldPanelOrder ] ]) => {
@@ -277,10 +276,10 @@ export class NgViewerUseEffect implements OnDestroy {
this.unmaximiseOrder$ = toggleMaxmimise$.pipe(
withLatestFrom(
- combineLatest(
+ combineLatest([
this.panelOrder$,
this.panelMode$,
- ),
+ ]),
),
scan((acc, curr) => {
const [action, [panelOrders, panelMode]] = curr
@@ -329,10 +328,10 @@ export class NgViewerUseEffect implements OnDestroy {
}),
)
- this.toggleMaximiseCycleMessage$ = combineLatest(
+ this.toggleMaximiseCycleMessage$ = combineLatest([
this.toggleMaximiseMode$,
this.pureConstantService.useTouchUI$,
- ).pipe(
+ ]).pipe(
filter(([_, useMobileUI]) => !useMobileUI),
map(([toggleMaximiseMode, _]) => toggleMaximiseMode),
filter(({ payload }) => payload.panelMode && payload.panelMode === PANELS.SINGLE_PANEL),
diff --git a/src/services/state/ngViewerState/selectors.ts b/src/services/state/ngViewerState/selectors.ts
index 85b992c44c585e5d75b997ba69f8ea908a935275..db84dcdb944e8e9f3d07b80a8d02464a492d4c3b 100644
--- a/src/services/state/ngViewerState/selectors.ts
+++ b/src/services/state/ngViewerState/selectors.ts
@@ -15,3 +15,23 @@ export const ngViewerSelectorClearView = createSelector(
ngViewerSelectorClearViewEntries,
keys => keys.length > 0
)
+
+export const ngViewerSelectorPanelOrder = createSelector(
+ state => state['ngViewerState'],
+ ngViewerState => ngViewerState.panelOrder
+)
+
+export const ngViewerSelectorPanelMode = createSelector(
+ state => state['ngViewerState'],
+ ngViewerState => ngViewerState.panelMode
+)
+
+export const ngViewerSelectorOctantRemoval = createSelector(
+ state => state['ngViewerState'],
+ ngViewerState => ngViewerState.octantRemoval
+)
+
+export const ngViewerSelectorNehubaReady = createSelector(
+ state => state['ngViewerState'],
+ ngViewerState => ngViewerState.nehubaReady
+)
diff --git a/src/services/state/viewerState/selectors.ts b/src/services/state/viewerState/selectors.ts
index d41d1e0aa31ef56d0fef90a9b8fbea6fa8f4f293..44c4c8db76f62baea9ad3a656d7fcad184ed7ad2 100644
--- a/src/services/state/viewerState/selectors.ts
+++ b/src/services/state/viewerState/selectors.ts
@@ -63,6 +63,11 @@ export const viewerStateStandAloneVolumes = createSelector(
viewerState => viewerState['standaloneVolumes']
)
+export const viewerStateSelectorNavigation = createSelector(
+ state => state['viewerState'],
+ viewerState => viewerState['navigation']
+)
+
export const viewerStateGetOverlayingAdditionalParcellations = createSelector(
state => state[viewerStateHelperStoreName],
state => state['viewerState'],
diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts
index 756c15d1a6e80fd4f49a58dc1282642b331bc07f..4127b3bf990e732f1fccd4d94b69a5a0306d18f2 100644
--- a/src/ui/config/config.component.ts
+++ b/src/ui/config/config.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
import { select, Store } from '@ngrx/store';
import { combineLatest, Observable, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs/operators';
-import { NG_VIEWER_ACTION_TYPES, SUPPORTED_PANEL_MODES } from 'src/services/state/ngViewerState.store';
+import { SUPPORTED_PANEL_MODES } from 'src/services/state/ngViewerState.store';
import { ngViewerActionSetPanelOrder } from 'src/services/state/ngViewerState.store.helper';
import { VIEWER_CONFIG_ACTION_TYPES, StateInterface as ViewerConfiguration } from 'src/services/state/viewerConfig.store'
import { IavRootStoreInterface } from 'src/services/stateStore.service';
@@ -11,6 +11,8 @@ import {MatSlideToggleChange} from "@angular/material/slide-toggle";
import {MatSliderChange} from "@angular/material/slider";
import { PureContantService } from 'src/util';
import { ngViewerActionSwitchPanelMode } from 'src/services/state/ngViewerState/actions';
+import { ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from 'src/services/state/ngViewerState/selectors';
+import { viewerStateSelectorNavigation } from 'src/services/state/viewerState/selectors';
const GPU_TOOLTIP = `Higher GPU usage can cause crashes on lower end machines`
const ANIMATION_TOOLTIP = `Animation can cause slowdowns in lower end machines`
@@ -73,19 +75,16 @@ export class ConfigComponent implements OnInit, OnDestroy {
)
this.panelMode$ = this.store.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
startWith(SUPPORTED_PANEL_MODES[0]),
)
this.panelOrder$ = this.store.pipe(
- select('ngViewerState'),
- select('panelOrder'),
+ select(ngViewerSelectorPanelOrder),
)
this.viewerObliqueRotated$ = this.store.pipe(
- select('viewerState'),
- select('navigation'),
+ select(viewerStateSelectorNavigation),
map(navigation => (navigation && navigation.orientation) || [0, 0, 0, 1]),
debounceTime(100),
map(isIdentityQuat),
@@ -93,12 +92,12 @@ export class ConfigComponent implements OnInit, OnDestroy {
distinctUntilChanged(),
)
- this.panelTexts$ = combineLatest(
+ this.panelTexts$ = combineLatest([
this.panelOrder$.pipe(
map(string => string.split('').map(s => Number(s))),
),
this.viewerObliqueRotated$,
- ).pipe(
+ ]).pipe(
map(([arr, isObliqueRotated]) => arr.map(idx => (isObliqueRotated ? OBLIQUE_ROOT_TEXT_ORDER : ROOT_TEXT_ORDER)[idx]) as [string, string, string, string]),
startWith(ROOT_TEXT_ORDER),
)
diff --git a/src/ui/config/currentLayout/currentLayout.component.ts b/src/ui/config/currentLayout/currentLayout.component.ts
index 40e8e8c4943de2fdb9139dc21ee62de4856e7ed7..313f1cd93467cb08955bd92f2dc728568427bf62 100644
--- a/src/ui/config/currentLayout/currentLayout.component.ts
+++ b/src/ui/config/currentLayout/currentLayout.component.ts
@@ -3,6 +3,7 @@ import { select, Store } from "@ngrx/store";
import { Observable } from "rxjs";
import { startWith } from "rxjs/operators";
import { SUPPORTED_PANEL_MODES } from "src/services/state/ngViewerState.store";
+import { ngViewerSelectorPanelMode } from "src/services/state/ngViewerState/selectors";
import { IavRootStoreInterface } from "src/services/stateStore.service";
@Component({
@@ -22,8 +23,7 @@ export class CurrentLayout {
private store$: Store<IavRootStoreInterface>,
) {
this.panelMode$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
startWith(SUPPORTED_PANEL_MODES[0]),
)
}
diff --git a/src/ui/databrowserModule/databrowser.service.ts b/src/ui/databrowserModule/databrowser.service.ts
index 8d3828f0b5cf21b0c9105aeacddc0b1fd62667d9..875daac2488ed97b858083629eb13a6da0269d0b 100644
--- a/src/ui/databrowserModule/databrowser.service.ts
+++ b/src/ui/databrowserModule/databrowser.service.ts
@@ -18,6 +18,7 @@ import { FilterDataEntriesByRegion } from "./util/filterDataEntriesByRegion.pipe
import { datastateActionToggleFav, datastateActionUnfavDataset, datastateActionFavDataset } from "src/services/state/dataState/actions";
import { getIdFromFullId } from 'common/util'
+import { viewerStateSelectorNavigation } from "src/services/state/viewerState/selectors";
const noMethodDisplayName = 'No methods described'
@@ -113,8 +114,7 @@ export class DatabrowserService implements OnDestroy {
)
this.viewportBoundingBox$ = this.store.pipe(
- select('viewerState'),
- select('navigation'),
+ select(viewerStateSelectorNavigation),
distinctUntilChanged(),
debounceTime(SPATIAL_SEARCH_DEBOUNCE),
filter(v => !!v && !!v.position && !!v.zoom),
diff --git a/src/ui/nehubaContainer/maximisePanelButton/maximisePanelButton.component.ts b/src/ui/nehubaContainer/maximisePanelButton/maximisePanelButton.component.ts
index 36b2d9e882bb5a22b939c55902d7ecf84871a012..b3e5745f92e2ea7e9dbb2d95cc2298375b3a49b3 100644
--- a/src/ui/nehubaContainer/maximisePanelButton/maximisePanelButton.component.ts
+++ b/src/ui/nehubaContainer/maximisePanelButton/maximisePanelButton.component.ts
@@ -4,6 +4,7 @@ import { Observable } from "rxjs";
import { distinctUntilChanged, map } from "rxjs/operators";
import { PANELS } from 'src/services/state/ngViewerState.store.helper'
import { ARIA_LABELS } from 'common/constants'
+import { ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from "src/services/state/ngViewerState/selectors";
const {
MAXIMISE_VIEW,
@@ -34,14 +35,12 @@ export class MaximmisePanelButton {
private store$: Store<any>,
) {
this.panelMode$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
distinctUntilChanged(),
)
this.panelOrder$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelOrder'),
+ select(ngViewerSelectorPanelOrder),
distinctUntilChanged(),
)
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.spec.ts b/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
index f187f412fe5eff1019a1828eafc62e9752fe2a64..3e5017b97f3c820dd1637442e736a6505f4edf04 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
@@ -1,5 +1,5 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-import { async, TestBed } from "@angular/core/testing"
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core'
+import { TestBed, async, ComponentFixture, fakeAsync, tick, flush, discardPeriodicTasks } from "@angular/core/testing"
import { NehubaContainer } from "./nehubaContainer.component"
import { provideMockStore, MockStore } from "@ngrx/store/testing"
import { defaultRootState } from 'src/services/stateStore.service'
@@ -39,11 +39,16 @@ import { RegionAccordionTooltipTextPipe } from '../util'
import { hot } from 'jasmine-marbles'
import { of } from 'rxjs'
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
+import { ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from 'src/services/state/ngViewerState/selectors'
+import { PANELS } from 'src/services/state/ngViewerState/constants'
const {
TOGGLE_SIDE_PANEL,
EXPAND,
- COLLAPSE
+ COLLAPSE,
+ ZOOM_IN,
+ ZOOM_OUT,
+ TOGGLE_FRONTAL_OCTANT
} = ARIA_LABELS
const _bigbrainJson = require('!json-loader!src/res/ext/bigbrain.json')
@@ -425,5 +430,211 @@ describe('> nehubaContainer.component.ts', () => {
it('> if something (region features/connectivity) exists, placeh holder text should be hdiden')
})
})
+
+ describe('> panelCtrl', () => {
+ let fixture: ComponentFixture<NehubaContainer>
+ const setViewerLoaded = () => {
+ fixture.componentInstance.viewerLoaded = true
+ }
+ const ctrlElementIsVisible = (el: DebugElement) => {
+ const visible = (el.nativeElement as HTMLElement).getAttribute('data-viewer-controller-visible')
+ return visible === 'true'
+ }
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NehubaContainer)
+ })
+ it('> on start, all four ctrl panels exists', () => {
+ fixture.detectChanges()
+ setViewerLoaded()
+ fixture.detectChanges()
+ for (const idx of [0, 1, 2, 3]) {
+ const el = fixture.debugElement.query(
+ By.css(`[data-viewer-controller-index="${idx}"]`)
+ )
+ expect(el).toBeTruthy()
+ }
+ })
+
+ it('> on start all four ctrl panels are invisible', () => {
+
+ fixture.detectChanges()
+ setViewerLoaded()
+ fixture.detectChanges()
+ for (const idx of [0, 1, 2, 3]) {
+ const el = fixture.debugElement.query(
+ By.css(`[data-viewer-controller-index="${idx}"]`)
+ )
+ expect(ctrlElementIsVisible(el)).toBeFalsy()
+ }
+ })
+
+ describe('> on hover, only the hovered panel have ctrl shown', () => {
+
+ for (const idx of [0, 1, 2, 3]) {
+
+ it(`> on hoveredPanelIndices$ emit ${idx}, the panel index ${idx} ctrl becomes visible`, fakeAsync(() => {
+ fixture.detectChanges()
+ const findPanelIndexSpy = spyOn<any>(fixture.componentInstance, 'findPanelIndex').and.callFake(() => {
+ return idx
+ })
+ setViewerLoaded()
+ fixture.detectChanges()
+ const nativeElement = fixture.componentInstance['elementRef'].nativeElement
+ nativeElement.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }))
+
+ /**
+ * assert findPanelIndex called with event.target, i.e. native element in thsi case
+ */
+ expect(findPanelIndexSpy).toHaveBeenCalledWith(nativeElement)
+ tick(200)
+ fixture.detectChanges()
+
+ /**
+ * every panel index should be non visible
+ * only when idx matches, it can be visible
+ * n.b. this does not test visual visibility (which is controlled by extra-style.css)
+ * (which is also affected by global [ismobile] configuration)
+ *
+ * this merely test the unit logic, and sets the flag appropriately
+ */
+ for (const iterativeIdx of [0, 1, 2, 3]) {
+ const el = fixture.debugElement.query(
+ By.css(`[data-viewer-controller-index="${iterativeIdx}"]`)
+ )
+ if (iterativeIdx === idx) {
+ expect(ctrlElementIsVisible(el)).toBeTruthy()
+ } else {
+ expect(ctrlElementIsVisible(el)).toBeFalsy()
+ }
+ }
+ discardPeriodicTasks()
+ }))
+ }
+
+ })
+
+ describe('> on maximise top right slice panel (idx 1)', () => {
+ beforeEach(() => {
+ const mockStore = TestBed.inject(MockStore)
+ mockStore.overrideSelector(ngViewerSelectorPanelMode, PANELS.SINGLE_PANEL)
+ mockStore.overrideSelector(ngViewerSelectorPanelOrder, '1230')
+
+ fixture.detectChanges()
+ setViewerLoaded()
+ fixture.detectChanges()
+ })
+ it('> toggle front octant btn not visible', () => {
+
+ const toggleBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${TOGGLE_FRONTAL_OCTANT}"]`)
+ )
+ expect(toggleBtn).toBeFalsy()
+ })
+
+ it('> zoom in and out btns are visible', () => {
+
+ const zoomInBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_IN}"]`)
+ )
+
+ const zoomOutBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_OUT}"]`)
+ )
+
+ expect(zoomInBtn).toBeTruthy()
+ expect(zoomOutBtn).toBeTruthy()
+ })
+
+ it('> zoom in btn calls fn with right param', () => {
+ const zoomViewSpy = spyOn(fixture.componentInstance, 'zoomNgView')
+
+ const zoomInBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_IN}"]`)
+ )
+ zoomInBtn.triggerEventHandler('click', null)
+ expect(zoomViewSpy).toHaveBeenCalled()
+ const { args } = zoomViewSpy.calls.first()
+ expect(args[0]).toEqual(1)
+ /**
+ * zoom in < 1
+ */
+ expect(args[1]).toBeLessThan(1)
+ })
+ it('> zoom out btn calls fn with right param', () => {
+ const zoomViewSpy = spyOn(fixture.componentInstance, 'zoomNgView')
+
+ const zoomOutBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_OUT}"]`)
+ )
+ zoomOutBtn.triggerEventHandler('click', null)
+ expect(zoomViewSpy).toHaveBeenCalled()
+ const { args } = zoomViewSpy.calls.first()
+ expect(args[0]).toEqual(1)
+ /**
+ * zoom out > 1
+ */
+ expect(args[1]).toBeGreaterThan(1)
+ })
+ })
+ describe('> on maximise perspective panel', () => {
+ beforeEach(() => {
+ const mockStore = TestBed.inject(MockStore)
+ mockStore.overrideSelector(ngViewerSelectorPanelMode, PANELS.SINGLE_PANEL)
+ mockStore.overrideSelector(ngViewerSelectorPanelOrder, '3012')
+
+ fixture.detectChanges()
+ setViewerLoaded()
+ fixture.detectChanges()
+ })
+ it('> toggle octant btn visible and functional', () => {
+ const setOctantRemovalSpy = spyOn(fixture.componentInstance, 'setOctantRemoval')
+
+ const toggleBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${TOGGLE_FRONTAL_OCTANT}"]`)
+ )
+ expect(toggleBtn).toBeTruthy()
+ toggleBtn.nativeElement.dispatchEvent(
+ new MouseEvent('click', { bubbles: true })
+ )
+ expect(setOctantRemovalSpy).toHaveBeenCalled()
+ })
+
+ it('> zoom in btn visible and functional', () => {
+ const zoomViewSpy = spyOn(fixture.componentInstance, 'zoomNgView')
+
+ const zoomInBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_IN}"]`)
+ )
+ expect(zoomInBtn).toBeTruthy()
+
+ zoomInBtn.triggerEventHandler('click', null)
+ expect(zoomViewSpy).toHaveBeenCalled()
+ const { args } = zoomViewSpy.calls.first()
+ expect(args[0]).toEqual(3)
+ /**
+ * zoom in < 1
+ */
+ expect(args[1]).toBeLessThan(1)
+ })
+ it('> zoom out btn visible and functional', () => {
+ const zoomViewSpy = spyOn(fixture.componentInstance, 'zoomNgView')
+
+ const zoomOutBtn = fixture.debugElement.query(
+ By.css(`[cell-i] [aria-label="${ZOOM_OUT}"]`)
+ )
+ expect(zoomOutBtn).toBeTruthy()
+
+ zoomOutBtn.triggerEventHandler('click', null)
+ expect(zoomViewSpy).toHaveBeenCalled()
+ const { args } = zoomViewSpy.calls.first()
+ expect(args[0]).toEqual(3)
+ /**
+ * zoom in < 1
+ */
+ expect(args[1]).toBeGreaterThan(1)
+ })
+
+ })
+ })
})
-})
\ No newline at end of file
+})
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 8d6726df10e10375c6a52e4a2b72418ca03bfc14..5e13e5789c093cff93384f47b7dcb34b4291e4f3 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -20,6 +20,7 @@ import {
MOUSE_OVER_LANDMARK,
NgViewerStateInterface
} from "src/services/stateStore.service";
+
import { getExportNehuba, isSame, getViewer } from "src/util/fn";
import { API_SERVICE_SET_VIEWER_HANDLE_TOKEN, IUserLandmark } from "src/atlasViewer/atlasViewer.apiService.service";
import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
@@ -33,11 +34,12 @@ import {
viewerStateDblClickOnViewer,
} from "src/services/state/viewerState.store.helper";
-import { getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThree, calculateSliceZoomFactor, scanSliceViewRenderFn as scanFn } from "./util";
+import { getFourPanel, getHorizontalOneThree, getSinglePanel, getVerticalOneThree, calculateSliceZoomFactor, scanSliceViewRenderFn as scanFn, takeOnePipe } from "./util";
import { NehubaViewerContainerDirective } from "./nehubaViewerInterface/nehubaViewerInterface.directive";
import { ITunableProp } from "./mobileOverlay/mobileOverlay.component";
import {ConnectivityBrowserComponent} from "src/ui/connectivityBrowser/connectivityBrowser.component";
import { viewerStateMouseOverCustomLandmark } from "src/services/state/viewerState/actions";
+import { ngViewerSelectorNehubaReady, ngViewerSelectorOctantRemoval, ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from "src/services/state/ngViewerState/selectors";
const { MESH_LOADING_STATUS } = IDS
@@ -97,10 +99,11 @@ const sortByFreshness: (acc: any[], curr: any[]) => any[] = (acc, curr) => {
const {
ZOOM_IN,
ZOOM_OUT,
+ TOGGLE_FRONTAL_OCTANT,
TOGGLE_SIDE_PANEL,
EXPAND,
COLLAPSE,
- ADDITIONAL_VOLUME_CONTROL
+ ADDITIONAL_VOLUME_CONTROL,
} = ARIA_LABELS
@Component({
@@ -149,6 +152,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
public CONST = CONST
public ARIA_LABEL_ZOOM_IN = ZOOM_IN
public ARIA_LABEL_ZOOM_OUT = ZOOM_OUT
+ public ARIA_LABEL_TOGGLE_FRONTAL_OCTANT = TOGGLE_FRONTAL_OCTANT
public ARIA_LABEL_TOGGLE_SIDE_PANEL = TOGGLE_SIDE_PANEL
public ARIA_LABEL_EXPAND = EXPAND
public ARIA_LABEL_COLLAPSE = COLLAPSE
@@ -299,33 +303,29 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
this.useMobileUI$ = this.pureConstantService.useTouchUI$
this.nehubaViewerPerspectiveOctantRemoval$ = this.store.pipe(
- select('ngViewerState'),
- select('octantRemoval')
+ select(ngViewerSelectorOctantRemoval),
)
this.panelMode$ = this.store.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
distinctUntilChanged(),
shareReplay(1),
)
this.panelOrder$ = this.store.pipe(
- select('ngViewerState'),
- select('panelOrder'),
+ select(ngViewerSelectorPanelOrder),
distinctUntilChanged(),
shareReplay(1),
)
this.redrawLayout$ = this.store.pipe(
- select('ngViewerState'),
- select('nehubaReady'),
+ select(ngViewerSelectorNehubaReady),
distinctUntilChanged(),
filter(v => !!v),
- switchMapTo(combineLatest(
+ switchMapTo(combineLatest([
this.panelMode$,
this.panelOrder$,
- )),
+ ])),
)
this.selectedLandmarks$ = this.store.pipe(
@@ -661,7 +661,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
this.subscriptions.push(
- combineLatest(
+ combineLatest([
this.selectedRegions$.pipe(
distinctUntilChanged(),
),
@@ -678,7 +678,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
select('overwrittenColorMap'),
distinctUntilChanged()
)
- ).pipe(
+ ]).pipe(
delayWhen(() => timer())
).subscribe(([regions, hideSegmentFlag, forceShowSegment, selectedParcellation, overwrittenColorMap]) => {
if (!this.nehubaViewer) { return }
@@ -1100,35 +1100,3 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
}
}
}
-
-export const takeOnePipe = () => {
-
- return pipe(
- scan((acc: Event[], event: Event) => {
- const target = (event as Event).target as HTMLElement
- /**
- * 0 | 1
- * 2 | 3
- *
- * 4 ???
- */
- const panels = getViewer()['display']['panels']
- const panelEls = Array.from(panels).map(({ element }) => element)
-
- const identifySrcElement = (element: HTMLElement) => {
- const idx = panelEls.indexOf(element)
- return idx
- }
-
- const key = identifySrcElement(target)
- const _ = {}
- _[key] = event
- return Object.assign({}, acc, _)
- }, []),
- filter(v => {
- const isdefined = (obj) => typeof obj !== 'undefined' && obj !== null
- return (isdefined(v[0]) && isdefined(v[1]) && isdefined(v[2]))
- }),
- take(1),
- )
-}
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 6aee271815eb369c30ee9b753afaf8abc1355963..364093d9b98024013f18dabf06aec67bd51474f7 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -459,7 +459,10 @@
</div>
<!-- maximise/minimise button -->
- <ng-container *ngTemplateOutlet="panelCtrlTmpl; context: { panelIndex: 3, visible: (panelOrder$ | async | reorderPanelIndexPipe : ( hoveredPanelIndices$ | async )) === 3 }">
+ <ng-container *ngTemplateOutlet="panelCtrlTmpl; context: {
+ panelIndex: panelOrder$ | async | getNthElement : 3 | parseAsNumber,
+ visible: (panelOrder$ | async | reorderPanelIndexPipe : ( hoveredPanelIndices$ | async )) === 3
+ }">
</ng-container>
<!-- mesh loading is still weird -->
@@ -505,7 +508,10 @@
</nehuba-2dlandmark-unit>
<!-- maximise/minimise button -->
- <ng-container *ngTemplateOutlet="panelCtrlTmpl; context: { panelIndex: panelIndex, visible: (panelOrder$ | async | reorderPanelIndexPipe : ( hoveredPanelIndices$ | async )) === panelIndex }">
+ <ng-container *ngTemplateOutlet="panelCtrlTmpl; context: {
+ panelIndex: panelOrder$ | async | getNthElement : panelIndex | parseAsNumber,
+ visible: (panelOrder$ | async | reorderPanelIndexPipe : ( hoveredPanelIndices$ | async )) === panelIndex
+ }">
</ng-container>
<div *ngIf="(sliceViewLoadingMain$ | async)[panelIndex]" class="loadingIndicator">
@@ -523,7 +529,9 @@
let-visible="visible">
<div class="opacity-crossfade always-show-touchdevice pe-all overlay-btn-container"
- [ngClass]="{ onHover: visible }">
+ [ngClass]="{ onHover: visible }"
+ [attr.data-viewer-controller-visible]="visible"
+ [attr.data-viewer-controller-index]="panelIndex">
<!-- perspective specific control -->
<ng-container *ngIf="panelIndex === 3">
@@ -559,6 +567,7 @@
<button
(click)="setOctantRemoval(!state)"
mat-icon-button
+ [attr.aria-label]="ARIA_LABEL_TOGGLE_FRONTAL_OCTANT"
color="primary">
<!-- octant removal is true -->
diff --git a/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.spec.ts b/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91c8e5847a0b025b882057e7a2255fcad7bb5f7a
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.spec.ts
@@ -0,0 +1,148 @@
+import { CommonModule } from "@angular/common"
+import { Component } from "@angular/core"
+import { TestBed, async, ComponentFixture } from "@angular/core/testing"
+import { By } from "@angular/platform-browser"
+import { BrowserDynamicTestingModule } from "@angular/platform-browser-dynamic/testing"
+import { MockStore, provideMockStore } from "@ngrx/store/testing"
+import { ngViewerSelectorOctantRemoval } from "src/services/state/ngViewerState/selectors"
+import { NehubaViewerUnit } from "../nehubaViewer/nehubaViewer.component"
+import { NehubaViewerContainerDirective } from "./nehubaViewerInterface.directive"
+import { viewerStateSelectorNavigation, viewerStateStandAloneVolumes } from "src/services/state/viewerState/selectors";
+import { Subject } from "rxjs"
+import { ngViewerActionNehubaReady } from "src/services/state/ngViewerState/actions"
+
+describe('> nehubaViewerInterface.directive.ts', () => {
+ describe('> NehubaViewerContainerDirective', () => {
+
+ @Component({
+ template: ''
+ })
+ class DummyCmp{}
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [
+
+ ],
+ declarations: [
+ NehubaViewerContainerDirective,
+ DummyCmp,
+ NehubaViewerUnit,
+ ],
+ providers: [
+ provideMockStore({ initialState: {} })
+ ]
+ }).overrideModule(BrowserDynamicTestingModule,{
+ set: {
+ entryComponents: [
+ NehubaViewerUnit
+ ]
+ }
+ }).overrideComponent(DummyCmp, {
+ set: {
+ template: `
+ <div iav-nehuba-viewer-container>
+ </div>
+ `
+ }
+ }).compileComponents()
+
+ }))
+
+ beforeEach(() => {
+ const mockStore = TestBed.inject(MockStore)
+ mockStore.overrideSelector(ngViewerSelectorOctantRemoval, true)
+ mockStore.overrideSelector(viewerStateStandAloneVolumes, [])
+ mockStore.overrideSelector(viewerStateSelectorNavigation, null)
+ })
+
+ it('> can be inited', () => {
+
+ const fixture = TestBed.createComponent(DummyCmp)
+ fixture.detectChanges()
+ const directive = fixture.debugElement.query(
+ By.directive(NehubaViewerContainerDirective)
+ )
+
+ expect(directive).toBeTruthy()
+ })
+
+ describe('> on createNehubaInstance', () => {
+ let fixture: ComponentFixture<DummyCmp>
+ let directiveInstance: NehubaViewerContainerDirective
+ let nehubaViewerInstanceSpy: jasmine.Spy
+ let elClearSpy: jasmine.Spy
+ let elCreateComponentSpy: jasmine.Spy
+ const spyNehubaViewerInstance = {
+ config: null,
+ lifecycle: null,
+ templateId: null,
+ errorEmitter: new Subject(),
+ debouncedViewerPositionChange: new Subject(),
+ layersChanged: new Subject(),
+ nehubaReady: new Subject(),
+ mouseoverSegmentEmitter: new Subject(),
+ mouseoverLandmarkEmitter: new Subject(),
+ mouseoverUserlandmarkEmitter: new Subject(),
+ elementRef: {
+ nativeElement: {}
+ }
+ }
+ const spyComRef = {
+ destroy: jasmine.createSpy('destroy')
+ }
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DummyCmp)
+ const directive = fixture.debugElement.query(
+ By.directive(NehubaViewerContainerDirective)
+ )
+
+ directiveInstance = directive.injector.get(NehubaViewerContainerDirective)
+
+ nehubaViewerInstanceSpy = spyOnProperty(directiveInstance, 'nehubaViewerInstance').and.returnValue(spyNehubaViewerInstance)
+ elClearSpy = spyOn(directiveInstance['el'], 'clear')
+ // casting return value to any is not perfect, but since only 2 methods and 1 property is used, it's a quick way
+ // rather than allow component to be created
+ elCreateComponentSpy = spyOn(directiveInstance['el'], 'createComponent').and.returnValue(spyComRef as any)
+ })
+
+ describe('> on createNehubaInstance called', () => {
+ const template = {}
+ const lifecycle = {}
+ beforeEach(() => {
+ directiveInstance.createNehubaInstance(template, lifecycle)
+ })
+ it('> method el.clear gets called before el.createComponent', () => {
+ expect(elClearSpy).toHaveBeenCalledBefore(elCreateComponentSpy)
+ })
+ })
+
+ describe('> on clear called', () => {
+ it('> dispatches nehubaReady: false action', () => {
+ const mockStore = TestBed.inject(MockStore)
+ const mockStoreDispatchSpy = spyOn(mockStore, 'dispatch')
+ directiveInstance.clear()
+ expect(
+ mockStoreDispatchSpy
+ ).toHaveBeenCalledWith(
+ ngViewerActionNehubaReady({
+ nehubaReady: false
+ })
+ )
+ })
+
+ it('> iavNehubaViewerContainerViewerLoading emits false', () => {
+ const emitSpy = spyOn(directiveInstance.iavNehubaViewerContainerViewerLoading, 'emit')
+ directiveInstance.clear()
+ expect(emitSpy).toHaveBeenCalledWith(false)
+ })
+
+ it('> elClear called', () => {
+ directiveInstance.clear()
+ expect(elClearSpy).toHaveBeenCalled()
+ })
+ })
+ })
+ })
+})
diff --git a/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.ts b/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.ts
index 74d8f40197f3b99d1d672888dea30c05ff03028f..49c2e9316963e3e19932f0da6e7af6c868ac91ca 100644
--- a/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.ts
+++ b/src/ui/nehubaContainer/nehubaViewerInterface/nehubaViewerInterface.directive.ts
@@ -5,14 +5,14 @@ import { IavRootStoreInterface } from "src/services/stateStore.service";
import { Subscription, Observable, fromEvent } from "rxjs";
import { distinctUntilChanged, filter, debounceTime, shareReplay, scan, map, throttleTime, switchMapTo } from "rxjs/operators";
import { StateInterface as ViewerConfigStateInterface } from "src/services/state/viewerConfig.store";
-import { getNavigationStateFromConfig } from "../util";
-import { NEHUBA_LAYER_CHANGED, CHANGE_NAVIGATION, VIEWERSTATE_ACTION_TYPES } from "src/services/state/viewerState.store";
+import { getNavigationStateFromConfig, takeOnePipe } from "../util";
+import { NEHUBA_LAYER_CHANGED, CHANGE_NAVIGATION } from "src/services/state/viewerState.store";
import { timedValues } from "src/util/generator";
import { MOUSE_OVER_SEGMENTS, MOUSE_OVER_LANDMARK } from "src/services/state/uiState.store";
-import { takeOnePipe } from "../nehubaContainer.component";
import { ngViewerActionNehubaReady } from "src/services/state/ngViewerState/actions";
import { viewerStateMouseOverCustomLandmarkInPerspectiveView } from "src/services/state/viewerState/actions";
-import { viewerStateStandAloneVolumes } from "src/services/state/viewerState/selectors";
+import { viewerStateStandAloneVolumes, viewerStateSelectorNavigation } from "src/services/state/viewerState/selectors";
+import { ngViewerSelectorOctantRemoval } from "src/services/state/ngViewerState/selectors";
const defaultNehubaConfig = {
"configName": "",
@@ -283,20 +283,14 @@ export class NehubaViewerContainerDirective implements OnInit, OnDestroy{
*/
distinctUntilChanged(),
)
-
- const viewerState$ = this.store$.pipe(
- select('viewerState'),
- shareReplay(1)
- )
-
- this.navigationChanges$ = viewerState$.pipe(
- select('navigation'),
- filter(v => !!v)
+
+ this.navigationChanges$ = this.store$.pipe(
+ select(viewerStateSelectorNavigation),
+ filter(v => !!v),
)
this.nehubaViewerPerspectiveOctantRemoval$ = this.store$.pipe(
- select('ngViewerState'),
- select('octantRemoval')
+ select(ngViewerSelectorOctantRemoval),
)
}
@@ -482,6 +476,13 @@ export class NehubaViewerContainerDirective implements OnInit, OnDestroy{
while(this.nehubaViewerSubscriptions.length > 0) {
this.nehubaViewerSubscriptions.pop().unsubscribe()
}
+
+ this.store$.dispatch(
+ ngViewerActionNehubaReady({
+ nehubaReady: false,
+ })
+ )
+
this.iavNehubaViewerContainerViewerLoading.emit(false)
if(this.cr) this.cr.destroy()
this.el.clear()
diff --git a/src/ui/nehubaContainer/touchSideClass.directive.ts b/src/ui/nehubaContainer/touchSideClass.directive.ts
index f10e11d71845c5f3e61b62ec5140b80079975961..edaa9823ff6af39756e0f51e16c91cee40d91022 100644
--- a/src/ui/nehubaContainer/touchSideClass.directive.ts
+++ b/src/ui/nehubaContainer/touchSideClass.directive.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, Input, OnDestroy, OnInit } from "@angular/core";
import { select, Store } from "@ngrx/store";
import { Observable, Subscription } from "rxjs";
import { distinctUntilChanged, tap } from "rxjs/operators";
+import { ngViewerSelectorPanelMode } from "src/services/state/ngViewerState/selectors";
import { IavRootStoreInterface } from "src/services/stateStore.service";
import { addTouchSideClasses, removeTouchSideClasses } from "./util";
@@ -25,8 +26,7 @@ export class TouchSideClass implements OnDestroy, OnInit {
) {
this.panelMode$ = this.store$.pipe(
- select('ngViewerState'),
- select('panelMode'),
+ select(ngViewerSelectorPanelMode),
distinctUntilChanged(),
tap(mode => this.panelMode = mode),
)
diff --git a/src/ui/nehubaContainer/util.ts b/src/ui/nehubaContainer/util.ts
index 7efb0abcc211bfe381190467509e4d18ecbd2b0b..49d7136412e6d19d67bdf6774d7e6f81e9832988 100644
--- a/src/ui/nehubaContainer/util.ts
+++ b/src/ui/nehubaContainer/util.ts
@@ -1,4 +1,7 @@
+import { pipe } from 'rxjs'
+import { filter, scan, take } from 'rxjs/operators'
import { PANELS } from 'src/services/state/ngViewerState.store.helper'
+import { getViewer } from 'src/util/fn'
const flexContCmnCls = ['w-100', 'h-100', 'd-flex', 'justify-content-center', 'align-items-stretch']
@@ -250,3 +253,35 @@ export const scanSliceViewRenderFn: (acc: [boolean, boolean, boolean], curr: Cus
}
return returnAcc as [boolean, boolean, boolean]
}
+
+export const takeOnePipe = () => {
+
+ return pipe(
+ scan((acc: Event[], event: Event) => {
+ const target = (event as Event).target as HTMLElement
+ /**
+ * 0 | 1
+ * 2 | 3
+ *
+ * 4 ???
+ */
+ const panels = getViewer()['display']['panels']
+ const panelEls = Array.from(panels).map(({ element }) => element)
+
+ const identifySrcElement = (element: HTMLElement) => {
+ const idx = panelEls.indexOf(element)
+ return idx
+ }
+
+ const key = identifySrcElement(target)
+ const _ = {}
+ _[key] = event
+ return Object.assign({}, acc, _)
+ }, []),
+ filter(v => {
+ const isdefined = (obj) => typeof obj !== 'undefined' && obj !== null
+ return (isdefined(v[0]) && isdefined(v[1]) && isdefined(v[2]))
+ }),
+ take(1),
+ )
+}
diff --git a/src/util/pipes/getNthElement.pipe.ts b/src/util/pipes/getNthElement.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4b27720b903731fa8c5cb0526380030854b7d4d
--- /dev/null
+++ b/src/util/pipes/getNthElement.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+ name: 'getNthElement'
+})
+export class GetNthElementPipe<T> implements PipeTransform{
+ public transform(array: T[], idx: number): T{
+ if (!array[idx]) throw new Error(`[GetNthElementPipe] accessor error`)
+ return array[idx]
+ }
+}
diff --git a/src/util/pipes/parseAsNumber.pipe.ts b/src/util/pipes/parseAsNumber.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40688b6b9847f3fafce2d8c1dddfb64e1355550a
--- /dev/null
+++ b/src/util/pipes/parseAsNumber.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+ name: 'parseAsNumber'
+})
+
+export class ParseAsNumberPipe implements PipeTransform{
+ public transform(input: string | string[]): number | number[]{
+ if (input instanceof Array) return input.map(v => Number(v))
+ return Number(input)
+ }
+}
diff --git a/src/util/util.module.ts b/src/util/util.module.ts
index 4c8bf1ce5bc6b597e1bc9229c02f48df74c6d949..f29aa368ea5931808431ac7f5ca87f3761655c04 100644
--- a/src/util/util.module.ts
+++ b/src/util/util.module.ts
@@ -16,6 +16,8 @@ import { LayoutModule } from "@angular/cdk/layout";
import { MapToPropertyPipe } from "./pipes/mapToProperty.pipe";
import {ClickOutsideDirective} from "src/util/directives/clickOutside.directive";
import { CounterDirective } from "./directives/counter.directive";
+import { GetNthElementPipe } from "./pipes/getNthElement.pipe";
+import { ParseAsNumberPipe } from "./pipes/parseAsNumber.pipe";
@NgModule({
imports:[
@@ -36,7 +38,9 @@ import { CounterDirective } from "./directives/counter.directive";
MediaQueryDirective,
MapToPropertyPipe,
ClickOutsideDirective,
- CounterDirective
+ CounterDirective,
+ GetNthElementPipe,
+ ParseAsNumberPipe,
],
exports: [
FilterNullPipe,
@@ -53,7 +57,9 @@ import { CounterDirective } from "./directives/counter.directive";
MediaQueryDirective,
MapToPropertyPipe,
ClickOutsideDirective,
- CounterDirective
+ CounterDirective,
+ GetNthElementPipe,
+ ParseAsNumberPipe,
]
})