diff --git a/src/atlasViewer/mouseOver.directive.ts b/src/atlasViewer/mouseOver.directive.ts
index e648b53ba1c847f7610ae55d9ce1deb546313758..9ba058431e326445fe97014d2decf15bbca6dabf 100644
--- a/src/atlasViewer/mouseOver.directive.ts
+++ b/src/atlasViewer/mouseOver.directive.ts
@@ -193,7 +193,7 @@ export class MouseOverTextPipe implements PipeTransform {
case 'segments':
return obj.map(({ segment }) => this.transformOnHoverSegmentPipe.transform(segment))
case 'userLandmark':
- return [this.sanitizer.sanitize(SecurityContext.HTML, obj.id)]
+ return [this.sanitizer.sanitize(SecurityContext.HTML, obj.name)]
default:
// ts-lint:disable-next-line
console.warn(`mouseOver.directive.ts#mouseOverTextPipe: Cannot be displayed: label: ${label}`)
diff --git a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..582f3f183379b5c8d65e5de6bac52f09e32a986d
--- /dev/null
+++ b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.spec.ts
@@ -0,0 +1,124 @@
+import { Component, ViewChild } from "@angular/core"
+import { async, TestBed } from "@angular/core/testing"
+import { SafeStylePipe } from "src/util/pipes/safeStyle.pipe"
+import { HOVER_COLOR, LandmarkUnit, NORMAL_COLOR } from "./landmarkUnit.component"
+
+
+/**
+ * need to use a dummy component for input/ngOnChanges life cycle hook to be called properly
+ * see https://github.com/angular/angular/issues/35614
+ */
+@Component({
+ template: ``
+})
+class DummyCmp{
+ @ViewChild(LandmarkUnit) public landmarkUnit: LandmarkUnit
+
+ public positionX: number = 0
+ public positionY: number = 0
+ public positionZ: number = 0
+ public color: [number, number, number] // = NORMAL_COLOR as [number, number, number]
+ public highlight: boolean = false
+ public flatProjection: boolean = false
+ public fasClass: string = 'fa-map-marker'
+}
+
+describe('> landmarkUnit.component.ts', () => {
+ describe('> LandmarkUnit', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [
+ DummyCmp,
+ LandmarkUnit,
+ SafeStylePipe
+ ]
+ }).overrideComponent(DummyCmp, {
+ set: {
+ template: `
+ <nehuba-2dlandmark-unit
+ [positionX]="positionX"
+ [positionY]="positionY"
+ [positionZ]="positionZ"
+ [color]="color"
+ [highlight]="highlight"
+ [flatProjection]="flatProjection"
+ [fasClass]="fasClass"
+ >
+ </nehuba-2dlandmark-unit>
+ `
+ }
+ }).compileComponents()
+ }))
+
+ it('> should be able to be created', () => {
+ const fixture = TestBed.createComponent(DummyCmp)
+ fixture.detectChanges()
+ const el = fixture.debugElement.componentInstance
+ expect(el.landmarkUnit).toBeTruthy()
+ })
+
+ describe('> color', () => {
+
+ describe('> without any color inputs', () => {
+
+ it('> at rest, NORMAL_COLOR will be used', () => {
+ const fixture = TestBed.createComponent(DummyCmp)
+ const el = fixture.debugElement.componentInstance
+ fixture.detectChanges()
+ const lmUnit = el.landmarkUnit
+ fixture.detectChanges()
+ expect(lmUnit.nodeStyle).toEqual({
+ color: `rgb(${NORMAL_COLOR.join(',')})`,
+ 'z-index': 0
+ })
+ })
+
+ it('> if highlight is set to true, HOVER_COLOR will be used', () => {
+
+ const fixture = TestBed.createComponent(DummyCmp)
+ const el = fixture.debugElement.componentInstance
+ fixture.detectChanges()
+ const lmUnit = el.landmarkUnit
+ el.highlight = true
+ fixture.detectChanges()
+ expect(lmUnit.nodeStyle).toEqual({
+ color: `rgb(${HOVER_COLOR.join(',')})`,
+ 'z-index': 0
+ })
+ })
+ })
+
+ describe('> color input is defined', () => {
+ const INPUT_COLOR = [123,233, 100]
+
+ it('> at rest, INPUT_COLOR will be used', () => {
+ const fixture = TestBed.createComponent(DummyCmp)
+ const el = fixture.debugElement.componentInstance
+ fixture.detectChanges()
+ el.color = INPUT_COLOR
+ const lmUnit = el.landmarkUnit
+ fixture.detectChanges()
+ expect(lmUnit.nodeStyle).toEqual({
+ color: `rgb(${INPUT_COLOR.join(',')})`,
+ 'z-index': 0
+ })
+ })
+
+ it('> if highlight is set to true, HOVER_COLOR will be used', () => {
+
+ const fixture = TestBed.createComponent(DummyCmp)
+ const el = fixture.debugElement.componentInstance
+ fixture.detectChanges()
+ el.color = INPUT_COLOR
+ const lmUnit = el.landmarkUnit
+ el.highlight = true
+ fixture.detectChanges()
+ expect(lmUnit.nodeStyle).toEqual({
+ color: `rgb(${HOVER_COLOR.join(',')})`,
+ 'z-index': 0
+ })
+ })
+ })
+ })
+ })
+})
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts
index d74268491c942c014947035c33ffe2ea11460016..5a9880a066b96a7f7d5f6a0ea26e62c739937460 100644
--- a/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts
+++ b/src/ui/nehubaContainer/landmarkUnit/landmarkUnit.component.ts
@@ -75,21 +75,17 @@ export class LandmarkUnit implements OnChanges {
if (positionX || positionY) {
this.transform = `translate(${positionX?.currentValue || this.positionX}px, ${positionY?.currentValue || this.positionY}px)`
}
-
if (color || positionZ || highlight) {
- const zIndex = (positionZ.currentValue || this.positionZ) >= 0 ? 0 : -2
- const nColor = color?.currentValue
- || this.color
- || (highlight?.currentValue || this.highlight)
+ const zIndex = (positionZ?.currentValue || this.positionZ) >= 0 ? 0 : -2
+ const nColor = (highlight?.currentValue || this.highlight) === true
? HOVER_COLOR
- : this.color? this.color : NORMAL_COLOR
+ : color?.currentValue || this.color || NORMAL_COLOR
this.nodeStyle = {
color: `rgb(${nColor.join(',')})`,
'z-index': zIndex
}
-
const shadowStyleBackground = `radial-gradient(
circle at center,
rgba(${nColor.join(',')},0.3) 10%,
@@ -108,17 +104,17 @@ export class LandmarkUnit implements OnChanges {
if (flatProjection || highlight || positionZ) {
- const flatProjectionVal = typeof flatProjection === 'undefined'
- ? this.flatProjection
- : flatProjection.currentValue
+ const flatProjectionVal = flatProjection
+ ? flatProjection.currentValue
+ : this.flatProjection
- const highlightVal = typeof highlight === 'undefined'
- ? this.highlight
- : flatProjection.currentValue
+ const highlightVal = highlight
+ ? highlight.currentValue
+ : this.highlight
- const positionZVal = typeof positionZ === 'undefined'
- ? this.positionZ
- : positionZ.currentValue
+ const positionZVal = positionZ
+ ? positionZ.currentValue
+ : this.positionZ
this.opacity = flatProjectionVal
? highlightVal
@@ -135,7 +131,6 @@ export class LandmarkUnit implements OnChanges {
}
if (highlight) {
- console.log('highlight change')
this.beamDashedColor = {
'border-left-color' : `rgba(${highlight.currentValue ? HOVER_COLOR.join(',') : NORMAL_COLOR.join(',')}, 0.8)`,
}
@@ -143,5 +138,5 @@ export class LandmarkUnit implements OnChanges {
}
}
-const NORMAL_COLOR: number[] = [201,54,38]
-const HOVER_COLOR: number[] = [250,150,80]
+export const NORMAL_COLOR: number[] = [201,54,38]
+export const HOVER_COLOR: number[] = [250,150,80]
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 5311900fa28253eb2589ef785caab95906f95437..36126aa35f494a9f60d5578cdfde1a3e79589592 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -7,7 +7,19 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
import { MatDrawer } from "@angular/material/sidenav";
import { LoggingService } from "src/logging";
-import { generateLabelIndexId, getMultiNgIdsRegionsLabelIndexMap, getNgIds, ILandmark, IOtherLandmarkGeometry, IPlaneLandmarkGeometry, IPointLandmarkGeometry, isDefined, MOUSE_OVER_LANDMARK, NgViewerStateInterface } from "src/services/stateStore.service";
+import {
+ CHANGE_NAVIGATION,
+ generateLabelIndexId,
+ getMultiNgIdsRegionsLabelIndexMap,
+ getNgIds,
+ ILandmark,
+ IOtherLandmarkGeometry,
+ IPlaneLandmarkGeometry,
+ IPointLandmarkGeometry,
+ isDefined,
+ MOUSE_OVER_LANDMARK,
+ NgViewerStateInterface
+} from "src/services/stateStore.service";
import { getExportNehuba, isSame, getViewer } from "src/util/fn";
import { AtlasViewerAPIServices, IUserLandmark } from "src/atlasViewer/atlasViewer.apiService.service";
import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
@@ -82,7 +94,7 @@ const sortByFreshness: (acc: any[], curr: any[]) => any[] = (acc, curr) => {
return [...newEntries, ...changed, ...unchanged]
}
-const {
+const {
ZOOM_IN,
ZOOM_OUT,
TOGGLE_SIDE_PANEL,
@@ -164,7 +176,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
public viewerLoaded: boolean = false
- private sliceRenderEvent$: Observable<CustomEvent>
+ private sliceRenderEvent$: Observable<CustomEvent>
public sliceViewLoadingMain$: Observable<[boolean, boolean, boolean]>
public perspectiveViewLoading$: Observable<string|null>
public showPerpsectiveScreen$: Observable<string>
@@ -196,7 +208,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
select(viewerStateCustomLandmarkSelector),
map(lms => lms.map(lm => ({
...lm,
- geometry: {
+ geometry: {
position: lm.position
}
})))
@@ -381,7 +393,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
startWith('Loading ...'),
throttleTime(100, asyncScheduler, { leading: true, trailing: true })
))
- )
+ )
/* missing chunk perspective view */
this.perspectiveViewLoading$ = fromEvent(this.elementRef.nativeElement, 'perpspectiveRenderEvent')
@@ -722,13 +734,13 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
}
}),
)
-
+
this.subscriptions.push(
this.selectedParcellation$.subscribe(this.handleParcellation.bind(this))
)
/* setup init view state */
-
+
this.subscriptions.push(
this.selectedRegions$.pipe(
filter(() => !!this.nehubaViewer),
@@ -804,7 +816,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
this.currOnHoverObsSub = this.currentOnHoverObs$.subscribe(({ segments }) => this.onHoverSegments$.next(segments))
}
}
-
+
public ngOnDestroy() {
this.subscriptions.forEach(s => s.unsubscribe())
}
@@ -817,7 +829,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
public tunableMobileProperties: ITunableProp[] = []
-
+
public selectedProp = null
public returnTruePos(quadrant: number, data: any) {
@@ -929,10 +941,15 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
positionReal : typeof realSpace !== 'undefined' ? realSpace : true,
}),
/* TODO introduce animation */
- moveToNavigationLoc : (coord, realSpace?) => this.nehubaViewer.setNavigationState({
- position : coord,
- positionReal : typeof realSpace !== 'undefined' ? realSpace : true,
- }),
+ moveToNavigationLoc : (coord, realSpace?) => {
+ this.store.dispatch({
+ type: CHANGE_NAVIGATION,
+ navigation: {
+ position: coord,
+ animation: {},
+ },
+ })
+ },
setNavigationOri : (quat) => this.nehubaViewer.setNavigationState({
orientation : quat,
}),
@@ -1008,7 +1025,7 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
for (const [key, colormap] of this.nehubaViewer.multiNgIdColorMap.entries()) {
const newColormap = new Map()
newMainMap.set(key, newColormap)
-
+
for (const [lableIndex, entry] of colormap.entries()) {
newColormap.set(lableIndex, JSON.parse(JSON.stringify(entry)))
}
@@ -1097,7 +1114,7 @@ export const takeOnePipe = () => {
const idx = panelEls.indexOf(element)
return idx
}
-
+
const key = identifySrcElement(target)
const _ = {}
_[key] = event
@@ -1109,4 +1126,4 @@ export const takeOnePipe = () => {
}),
take(1),
)
-}
\ No newline at end of file
+}