Merge pull request #668 from HumanBrainProject/dev_small_api_fixes

small api fixes

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}`)

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

+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

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]

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
+}