From e7d4c1a2773f7bcd7b7c06f008e70e82bf86de10 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Wed, 31 Mar 2021 00:20:16 +0200
Subject: [PATCH] Next changes of quick tour
---
common/constants.js | 12 ++
.../atlasLayerSelector.component.ts | 27 ++-
.../atlasLayerSelector.template.html | 3 +-
src/ui/quickTour/constrants.ts | 20 ++
src/ui/quickTour/quickTour.service.ts | 31 ++-
src/ui/quickTour/quickTourThis.directive.ts | 26 +--
.../quickToutComponent/quickTour.component.ts | 196 +++++++++---------
.../quickToutComponent/quickTour.temlate.html | 53 ++---
.../topMenu/topMenuCmp/topMenu.components.ts | 8 +-
.../topMenu/topMenuCmp/topMenu.template.html | 2 -
.../nehubaViewerGlue.component.ts | 25 +--
.../nehubaViewerGlue.template.html | 10 +-
.../nehuba/statusCard/statusCard.component.ts | 14 +-
.../statusCard/statusCard.template.html | 9 +-
.../viewerCmp/viewerCmp.component.ts | 30 ++-
.../viewerCmp/viewerCmp.template.html | 14 +-
16 files changed, 247 insertions(+), 233 deletions(-)
create mode 100644 src/ui/quickTour/constrants.ts
diff --git a/common/constants.js b/common/constants.js
index 24e3792ad..d827b1361 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -79,4 +79,16 @@
RECEPTOR_PR_CAPTION: `For a single tissue sample, an exemplary density distribution for a single receptor from the pial surface to the border between layer VI and the white matter.`,
RECEPTOR_AR_CAPTION: `An exemplary density distribution of a single receptor for one laminar cross-section in a single tissue sample.`,
}
+
+ exports.QUICKTOUR_DESC ={
+ REGION_SEARCH: `Use the region quick search for finding, selecting and navigating brain regions in the selected parcellation map.`,
+ ATLAS_SELECTOR: `This is the atlas selector. Click here to choose between EBRAINS reference atlases of different species.`,
+ CHIPS: `These „chips“ indicate the currently selected parcellation map as well as selected region. Click the chip to see different versions, if any. Click (i) to read more about a selected item. Click (x) to clear a selection.`,
+ SLICE_VIEW: `The planar views allow you to zoom in to full resolution (mouse wheel), pan the view (click+drag), and select oblique sections (shift+click+drag). You can double-click brain regions to select them.`,
+ PERSPECTIVE_VIEW: `The 3D view gives an overview of the brain with limited resolution. It can be independently rotated. Click the „eye“ icon on the bottom left to toggle pure surface view.`,
+ VIEW_ICONS: `Use these icons in any of the views to maximize it and zoom in/out.`,
+ TOP_MENU: `These icons provide access to plugins, pinned datasets, and user documentation. Use the profile icon to login with your EBRAINS account.`,
+ LAYER_SELECTOR: `This is the atlas layer browser. If an atlas supports multiple template spaces or parcellation maps, you will find them here.`,
+ STATUS_CARD: `This is the coordinate navigator. Expand it to manipulate voxel and physical coordinates, to reset the view, or to create persistent links to the current view for sharing.`,
+ }
})(typeof exports === 'undefined' ? module.exports : exports)
diff --git a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
index a7256da6d..eccfa00f6 100644
--- a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
+++ b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.component.ts
@@ -5,7 +5,8 @@ import {Observable, Subscription, from, zip, of, combineLatest, BehaviorSubject}
import { viewerStateSelectTemplateWithId, viewerStateToggleLayer } from "src/services/state/viewerState.store.helper";
import { MatMenuTrigger } from "@angular/material/menu";
import { viewerStateGetSelectedAtlas, viewerStateAtlasLatestParcellationSelector, viewerStateSelectedTemplateFullInfoSelector, viewerStateSelectedTemplatePureSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors";
-import { ARIA_LABELS } from 'common/constants'
+import { ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
+import {QuickTourData, QuickTourPosition} from "src/ui/quickTour/constrants";
@Component({
selector: 'atlas-layer-selector',
@@ -92,16 +93,15 @@ export class AtlasLayerSelector implements OnInit {
public selectedTemplatePreviewUrl: string = ''
@ViewChild('expandedSelectorCard', {read: ElementRef}) expandedSelectorCard: ElementRef<HTMLElement>
- public quickTourData = {
+ quickTourCollapsedPosition: QuickTourPosition = {position: 'top-right', arrow: 'arrow2', arrowPosition: 'left', arrowAlign: 'bottom', arrowMargin: {left: -20}}
+ quickTourExpandedPosition: QuickTourPosition = {position: 'right', arrow: 'arrow5', arrowPosition: 'left', arrowAlign: 'center',
+ top: document.body.offsetHeight - this.expandedSelectorCard?.nativeElement.offsetHeight/2,
+ left: this.expandedSelectorCard?.nativeElement.offsetWidth}
+ public quickTourData: QuickTourData = {
order: 4,
- description: 'This is the atlas layer browser. If an atlas supports multiple template spaces or parcellation maps, you will find them here.',
- position: 'top-right',
- overwritePos: {
- collapsed: {arrow: 'arrow2', arrowPosition: 'left', arrowAlign: 'bottom', arrowMargin: {left: -20}},
- expanded: {arrow: 'arrow5', arrowPosition: 'left', arrowAlign: 'center', left: this.expandedSelectorCard?.nativeElement.offsetWidth, margin: '-150px 0 0 0'}
- }
+ description: QUICKTOUR_DESC.LAYER_SELECTOR,
+ position: this.quickTourCollapsedPosition
}
- public quickTourPosition$: BehaviorSubject<any> = new BehaviorSubject(this.quickTourData.overwritePos.collapsed)
public availableTemplates$ = this.store$.pipe<any[]>(
select(viewerStateSelectedTemplateFullInfoSelector)
@@ -158,8 +158,13 @@ export class AtlasLayerSelector implements OnInit {
toggleSelector() {
this.selectorExpanded = !this.selectorExpanded
- this.quickTourData.overwritePos.expanded.left = this.expandedSelectorCard?.nativeElement.offsetWidth
- this.quickTourPosition$.next(this.selectorExpanded? this.quickTourData.overwritePos.expanded : this.quickTourData.overwritePos.collapsed)
+ if (this.selectorExpanded) {
+ this.quickTourExpandedPosition.left = this.expandedSelectorCard?.nativeElement.offsetWidth
+ this.quickTourExpandedPosition.top = document.body.offsetHeight - this.expandedSelectorCard?.nativeElement.offsetHeight/2
+ this.quickTourData.position = this.quickTourExpandedPosition
+ } else {
+ this.quickTourData.position = this.quickTourCollapsedPosition
+ }
}
selectTemplateWithName(template) {
diff --git a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html
index 1380db7c8..da8913482 100644
--- a/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html
+++ b/src/atlasComponents/uiSelectors/atlasLayerSelector/atlasLayerSelector.template.html
@@ -67,8 +67,7 @@
quick-tour
[quick-tour-description]="quickTourData.description"
[quick-tour-order]="quickTourData.order"
- [quick-tour-position]="quickTourData.position"
- [quick-tour-overwrite-pos]="quickTourPosition$">
+ [quick-tour-position]="quickTourData.position">
<button color="primary"
matTooltip="Select layer"
mat-mini-fab
diff --git a/src/ui/quickTour/constrants.ts b/src/ui/quickTour/constrants.ts
new file mode 100644
index 000000000..2e4b8c2f3
--- /dev/null
+++ b/src/ui/quickTour/constrants.ts
@@ -0,0 +1,20 @@
+export interface QuickTourData {
+ order: number
+ description: string
+ position?: QuickTourPosition
+}
+
+export interface QuickTourPosition {
+ // Position of tip
+ position?: 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'
+ align?: 'right' | 'left' | 'top' | 'bottom' | 'center'
+ left?: number
+ top?: number
+
+ // Position of arrow
+ arrow?: string
+ arrowPosition?: 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'
+ arrowAlign?: 'right' | 'left' | 'top' | 'bottom' | 'center'
+ arrowMargin?: {top?: number, right?: number, bottom?: number, left?: number}
+ arrowTransform?: string
+}
diff --git a/src/ui/quickTour/quickTour.service.ts b/src/ui/quickTour/quickTour.service.ts
index c3fb92b6d..db3460a59 100644
--- a/src/ui/quickTour/quickTour.service.ts
+++ b/src/ui/quickTour/quickTour.service.ts
@@ -1,6 +1,6 @@
import {Injectable} from "@angular/core";
import {QuickTourThis} from "src/ui/quickTour/quickTourThis.directive";
-import {BehaviorSubject, Subject} from "rxjs";
+import {BehaviorSubject} from "rxjs";
@Injectable()
export class QuickTourService {
@@ -11,14 +11,29 @@ export class QuickTourService {
public quickTourThisDirectives: QuickTourThis[] = []
public register(dir: QuickTourThis) {
- if (this.quickTourThisDirectives.indexOf(dir) < 0) {
+ if (!this.quickTourThisDirectives.length) {
this.quickTourThisDirectives.push(dir)
- this.quickTourThisDirectives.sort((a, b) => +a.order - +b.order)
+ } else {
+ this.insertSorted(0, dir)
+ }
+ }
+
+ insertSorted(i, dir) {
+ if (dir.order > this.quickTourThisDirectives[i].order) {
+ if (!this.quickTourThisDirectives[i+1]) {
+ return this.quickTourThisDirectives.push(dir)
+ } else if (dir.order <= this.quickTourThisDirectives[i+1].order) {
+ return this.quickTourThisDirectives.splice(i+1, 0, dir)
+ } else {
+ this.insertSorted(i+1, dir)
+ }
+ } else {
+ this.quickTourThisDirectives.splice(i, 0, dir)
}
}
public unregister (dir: QuickTourThis) {
- this.quickTourThisDirectives = this.quickTourThisDirectives.filter(d => d.order !== dir.order)
+ this.quickTourThisDirectives = this.quickTourThisDirectives.filter(d => d !== dir)
}
public startTour() {
@@ -32,8 +47,14 @@ export class QuickTourService {
}
- public backSlide() {
+ public previousSlide() {
this.currSlideNum--
this.currentTip$.next(this.quickTourThisDirectives[this.currSlideNum])
}
+
+ changeDetected(order) {
+ if (this.currentTip$.value && order === this.currentTip$.value.order) {
+ this.currentTip$.next(this.quickTourThisDirectives[this.currSlideNum])
+ }
+ }
}
diff --git a/src/ui/quickTour/quickTourThis.directive.ts b/src/ui/quickTour/quickTourThis.directive.ts
index 262f0a0b9..bda24c7a9 100644
--- a/src/ui/quickTour/quickTourThis.directive.ts
+++ b/src/ui/quickTour/quickTourThis.directive.ts
@@ -1,32 +1,20 @@
-import {Directive, ElementRef, Input, OnDestroy, OnInit} from "@angular/core";
-import {Observable} from "rxjs";
+import {Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from "@angular/core";
import {QuickTourService} from "src/ui/quickTour/quickTour.service";
+import {QuickTourPosition} from "src/ui/quickTour/constrants";
@Directive({
selector: '[quick-tour]'
})
-export class QuickTourThis implements OnInit, OnDestroy {
-
- @Input('quick-tour-overwrite-pos') overwritePos$: Observable<{
- left?: number
- top?: number
- arrowPosition?: 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'
- arrowAlign?: 'right' | 'left' | 'top' | 'bottom' | 'center'
- arrowMargin?: any
- arrowTransform?: string
- arrow?: string
- recalculate?: boolean
- }>
+export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
@Input('quick-tour-order') order: number = 0
@Input('quick-tour-description') description: string = 'No description'
- @Input('quick-tour-position') position: 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left'
- @Input('quick-tour-align') align: 'right' | 'left' | 'top' | 'bottom' | 'center'
+ @Input('quick-tour-position') position: QuickTourPosition
constructor(private quickTourService: QuickTourService,
private el: ElementRef) {}
- public calcPos() {
+ public getHostPos() {
const { x, y, width, height } = (this.el.nativeElement as HTMLElement).getBoundingClientRect()
return {x, y, width, height}
}
@@ -35,6 +23,10 @@ export class QuickTourThis implements OnInit, OnDestroy {
this.quickTourService.register(this)
}
+ ngOnChanges(changes: SimpleChanges) {
+ this.quickTourService.changeDetected(this.order)
+ }
+
ngOnDestroy() {
this.quickTourService.unregister(this)
}
diff --git a/src/ui/quickTour/quickToutComponent/quickTour.component.ts b/src/ui/quickTour/quickToutComponent/quickTour.component.ts
index b5055decc..648fe1f12 100644
--- a/src/ui/quickTour/quickToutComponent/quickTour.component.ts
+++ b/src/ui/quickTour/quickToutComponent/quickTour.component.ts
@@ -3,14 +3,13 @@ import {
Component,
ElementRef,
EventEmitter,
- HostListener,
- OnDestroy,
OnInit,
Output, ViewChild
} from "@angular/core";
-import {Observable, of, Subscription} from "rxjs";
+import {Subscription} from "rxjs";
import {QuickTourService} from "src/ui/quickTour/quickTour.service";
-import {map, switchMap} from "rxjs/operators";
+import {map} from "rxjs/operators";
+import {QuickTourPosition} from "src/ui/quickTour/constrants";
@Component({
selector : 'quick-tour',
@@ -19,25 +18,25 @@ import {map, switchMap} from "rxjs/operators";
})
export class QuickTourComponent implements OnInit, AfterViewInit {
- slideWidth = 300
+ public slideWidth = 300
+ private tip: any
- private tip
+ public isLast = false
+ public left: number
+ public top: number
+ private topHardcoded = false
+ private leftHardcoded = false
+ public description: string
+ public order: number
- public left
- public top
- public leftBeforeHardcodeChange
- public topBeforeHardcodeChange
- public description
- public order
+ private targetElWidth: number
+ private targetElHeight: number
- private targetElWidth
- private targetElHeight
- private currentTip
-
- public overwritePos$: Observable<any>
- public overwritePos: any
+ public position: QuickTourPosition
public tipHidden = true
+ public flexClass: string
+ public positionChangedByArrow = false
private subscriptions: Subscription[] = []
@@ -52,117 +51,107 @@ export class QuickTourComponent implements OnInit, AfterViewInit {
this.subscriptions.push(
this.quickTourService.currentTip$.pipe(
- switchMap(tip => {
+ map(tip => {
if (!tip) return
- this.tip = null
+ this.clear()
this.tip = tip
+ this.description = tip.description
+ this.position = tip.position
+ this.order = tip.order
+ this.isLast = tip === [...this.quickTourService.quickTourThisDirectives].pop()
+ this.setFlexClass()
- this.clear()
this.calculate()
+ if (tip.position.left) {
+ this.leftHardcoded = true
+ this.left = tip.position.left
+ }
+ if (tip.position.top) {
+ this.topHardcoded = true
+ this.top = tip.position.top
+ }
- return tip.overwritePos$ || of(null)
+ setTimeout(() => this.calculateArrowPosition())
- }),
- map((op: any) => {
- if (op) {
- this.tipHidden = true
-
- setTimeout(() => {
- if (op.recalculate) {
- this.clear()
- this.calculate()
- }
- this.overwritePos = null
- this.overwritePos = op
-
- if (op.left) {
- this.leftBeforeHardcodeChange = this.left
- this.left = op.left
- } else if (this.leftBeforeHardcodeChange) {
- this.left = this.leftBeforeHardcodeChange
- }
- if (op.top) {
- this.topBeforeHardcodeChange = this.top
- this.top = op.top
- } else if (this.topBeforeHardcodeChange) {
- this.top = this.topBeforeHardcodeChange
- }
- setTimeout(() => this.calculateArrowPosition())
- })
- }
- })
- ).subscribe(),
+ }),
+ ).subscribe()
)
}
-
ngAfterViewInit() {
- this.calculatePosition(this.currentTip, this.targetElWidth, this.targetElHeight)
+ this.calculate()
}
clear() {
+ this.tip = null
this.left = null
+ this.topHardcoded = false
+ this.leftHardcoded = false
this.top = null
- this.leftBeforeHardcodeChange = null
- this.topBeforeHardcodeChange = null
this.description = null
- this.overwritePos$ = null
- this.overwritePos = null
+ this.position = null
this.order = null
this.targetElWidth = null
this.targetElHeight = null
this.positionChangedByArrow = false
+ this.tipHidden = true
+ this.flexClass = null
}
calculate() {
const tip = this.tip
if (tip === null) return
- const { x, y, width, height } = tip.calcPos()
- this.left = x
- this.top = y
- this.description = tip.description
- this.overwritePos$ = tip.overwritePos$
- this.order = tip.order
+ const { x, y, width, height } = tip.getHostPos()
this.targetElWidth = width
this.targetElHeight = height
- this.currentTip = tip
- if (this.tipCardEl) setTimeout(() =>this.calculatePosition(tip, width, height))
+ if (this.tipCardEl) setTimeout(() => {
+ if (!this.leftHardcoded) {
+ this.left = x
+ this.calculatePosition('left', tip, width, height)
+ }
+ if (!this.topHardcoded) {
+ this.top = y
+ this.calculatePosition('top', tip, width, height)
+ }
+ })
}
- calculatePosition(tip, elementWidth, elementHeight) {
+ calculatePosition(calculate: 'top' | 'left', tip, elementWidth, elementHeight) {
const cardWidth = this.tipCardEl.nativeElement.offsetWidth
const cardHeight = this.tipCardEl.nativeElement.offsetHeight
+ const calculateTop = calculate === 'top'
+ const calculateLeft = calculate === 'left'
- if (tip.position) {
- if (tip.position.includes('top')) {
+ if (tip.position?.position) {
+ if (tip.position.position.includes('top') && calculateTop) {
this.top -= cardHeight
}
- if (tip.position.includes('right')) {
+ if (tip.position.position.includes('right') && calculateLeft) {
this.left += elementWidth
}
- if (tip.position.includes('bottom')) {
+ if (tip.position.position.includes('bottom') && calculateTop) {
this.top += elementHeight
}
- if (tip.position.includes('left')) {
+ if (tip.position.position.includes('left') && calculateLeft) {
this.left -= cardWidth
}
}
- if (tip.align) {
- if (tip.align === 'right') {
+ if (tip.position.align) {
+ if (tip.position.align === 'right' && calculateLeft) {
this.left -= cardWidth - elementWidth
}
- if (tip.align === 'bottom') {
+ if (tip.position.align === 'bottom' && calculateTop) {
this.top -= cardHeight - elementHeight
}
- if (tip.align === 'center') {
- if (['right', 'left'].includes(tip.position)) {
+ if (tip.position.align === 'center') {
+ if (['right', 'left'].includes(tip.position.position) && calculateTop) {
this.top -= (cardHeight - elementHeight)/2
}
- if (['bottom', 'top'].includes(tip.position)) {
+ if (['bottom', 'top'].includes(tip.position.position) && calculateLeft) {
this.left -= (cardWidth - elementWidth)/2
}
}
@@ -170,26 +159,26 @@ export class QuickTourComponent implements OnInit, AfterViewInit {
}
calculateArrowPosition() {
- if (['top-left', 'top-right'].includes(this.overwritePos.arrowPosition)) {
- if (!this.overwritePos.arrowMargin || !this.overwritePos.arrowMargin.top) {
- this.overwritePos.arrowMargin = {}
- this.overwritePos.arrowMargin.top = 0
+ if (['top-left', 'top-right'].includes(this.position.arrowPosition)) {
+ if (!this.position.arrowMargin || !this.position.arrowMargin.top) {
+ this.position.arrowMargin = {}
+ this.position.arrowMargin.top = 0
}
- this.overwritePos.arrowMargin.top += -this.arrowEl.nativeElement.offsetHeight
+ this.position.arrowMargin.top += -this.tipCardEl.nativeElement.offsetHeight
- if (!this.positionChangedByArrow) this.top += this.arrowEl.nativeElement.offsetHeight
+ if (!this.positionChangedByArrow) this.top += this.tipCardEl.nativeElement.offsetHeight
this.positionChangedByArrow = true
}
- if (['bottom-left', 'bottom-right'].includes(this.overwritePos.arrowPosition)) {
- if (!this.overwritePos.arrowMargin || !this.overwritePos.arrowMargin.top) {
- this.overwritePos.arrowMargin = {}
- this.overwritePos.arrowMargin.top = 0
+ if (['bottom-left', 'bottom-right'].includes(this.position.arrowPosition)) {
+ if (!this.position.arrowMargin || !this.position.arrowMargin.top) {
+ this.position.arrowMargin = {}
+ this.position.arrowMargin.top = 0
}
- this.overwritePos.arrowMargin.top += this.tipCardEl.nativeElement.offsetHeight
+ this.position.arrowMargin.top += this.tipCardEl.nativeElement.offsetHeight
}
- if (['bottom-left', 'bottom-right', 'bottom'].includes(this.overwritePos.arrowPosition)) {
+ if (['bottom-left', 'bottom-right', 'bottom'].includes(this.position.arrowPosition)) {
if (!this.positionChangedByArrow) this.top -= this.arrowEl.nativeElement.offsetHeight
this.positionChangedByArrow = true
}
@@ -197,10 +186,27 @@ export class QuickTourComponent implements OnInit, AfterViewInit {
this.tipHidden = false
}
- positionChangedByArrow = false
-
- get isLast() {
- return this.quickTourService.currentTip$.value === [...this.quickTourService.quickTourThisDirectives].pop()
+ setFlexClass() {
+ const position = this.tip.position
+ this.flexClass = position?.arrowPosition.includes('right')?
+ position?.arrowAlign === 'top'? 'flex-row-reverse align-items-start' :
+ position?.arrowAlign === 'center'? 'flex-row-reverse align-items-center' :
+ position?.arrowAlign === 'bottom'? 'flex-row-reverse align-items-end' :
+ position?.arrowPosition.includes('top')? 'align-items-start' : 'flex-row-reverse align-items-end'
+ :position?.arrowPosition.includes('left')?
+ position?.arrowAlign === 'top'? 'flex-row align-items-start' :
+ position?.arrowAlign === 'center'? 'flex-row align-items-center' :
+ position?.arrowAlign === 'bottom'? 'flex-row align-items-end' :
+ position?.arrowPosition.includes('top')? 'align-items-start' : 'align-items-end'
+ :position?.arrowPosition.includes('top')?
+ position?.arrowAlign === 'left'? 'flex-column align-items-start' :
+ position?.arrowAlign === 'center'? 'flex-column align-items-center' :
+ position?.arrowAlign === 'right'? 'flex-column align-items-end' :
+ position?.arrowPosition.includes('left')? 'align-items-start' : 'align-items-end'
+ :position?.arrowPosition.includes('bottom')?
+ position?.arrowAlign === 'left'? 'flex-column-reverse align-items-end' :
+ position?.arrowAlign === 'center'? 'flex-column-reverse align-items-center' :
+ position?.arrowAlign === 'right'? 'flex-column-reverse align-items-end' :
+ position?.arrowPosition.includes('left')? 'align-items-start' : 'align-items-end' : ''
}
-
}
diff --git a/src/ui/quickTour/quickToutComponent/quickTour.temlate.html b/src/ui/quickTour/quickToutComponent/quickTour.temlate.html
index fcd981fe9..d78a10c98 100644
--- a/src/ui/quickTour/quickToutComponent/quickTour.temlate.html
+++ b/src/ui/quickTour/quickToutComponent/quickTour.temlate.html
@@ -3,43 +3,20 @@
visibility: tipHidden? 'hidden' : 'visible',
top: top + 'px',
left: left + 'px'}"
- [ngClass]="[overwritePos?.arrowPosition.includes('right')?
- overwritePos?.arrowAlign === 'top'? 'flex-row-reverse align-items-start' :
- overwritePos?.arrowAlign === 'center'? 'flex-row-reverse align-items-center' :
- overwritePos?.arrowAlign === 'bottom'? 'flex-row-reverse align-items-end' :
- overwritePos?.arrowPosition.includes('top')? 'align-items-start' : 'flex-row-reverse align-items-end'
- :overwritePos?.arrowPosition.includes('left')?
- overwritePos?.arrowAlign === 'top'? 'flex-row align-items-start' :
- overwritePos?.arrowAlign === 'center'? 'flex-row align-items-center' :
- overwritePos?.arrowAlign === 'bottom'? 'flex-row align-items-end' :
- overwritePos?.arrowPosition.includes('top')? 'align-items-start' : 'align-items-end'
- :overwritePos?.arrowPosition.includes('top')?
- overwritePos?.arrowAlign === 'left'? 'flex-column align-items-start' :
- overwritePos?.arrowAlign === 'center'? 'flex-column align-items-center' :
- overwritePos?.arrowAlign === 'right'? 'flex-column align-items-end' :
- overwritePos?.arrowPosition.includes('left')? 'align-items-start' : 'align-items-end'
- :overwritePos?.arrowPosition.includes('bottom')?
- overwritePos?.arrowAlign === 'left'? 'flex-column-reverse align-items-end' :
- overwritePos?.arrowAlign === 'center'? 'flex-column-reverse align-items-center' :
- overwritePos?.arrowAlign === 'right'? 'flex-column-reverse align-items-end' :
- overwritePos?.arrowPosition.includes('left')? 'align-items-start' : 'align-items-end'
- : '']">
+ [ngClass]="[flexClass || '']">
<div #arrowEl [ngStyle]="{
- marginLeft: this.overwritePos?.arrowMargin?.left && this.overwritePos.arrowMargin.left + 'px',
- marginRight: this.overwritePos?.arrowMargin?.right && this.overwritePos.arrowMargin.right + 'px',
- marginTop: this.overwritePos?.arrowMargin?.top && this.overwritePos.arrowMargin.top + 'px',
- marginBottom: this.overwritePos?.arrowMargin?.bottom && this.overwritePos.arrowMargin.bottom + 'px'}">
+ marginLeft: this.position?.arrowMargin?.left && this.position.arrowMargin.left + 'px',
+ marginRight: this.position?.arrowMargin?.right && this.position.arrowMargin.right + 'px',
+ marginTop: this.position?.arrowMargin?.top && this.position.arrowMargin.top + 'px',
+ marginBottom: this.position?.arrowMargin?.bottom && this.position.arrowMargin.bottom + 'px'}">
<ng-content *ngTemplateOutlet="arrow"></ng-content>
</div>
<div #tipCard class="d-flex align-items-center justify-content-center h-100 tipCard pt-3 pr-3 pl-3"
[ngStyle]="{width: slideWidth + 'px'}">
-<!-- [ngStyle]="{margin: slides[currentTip]?.textMargin? slides[currentTip].textMargin : null,-->
-<!-- maxWidth: slides[currentTip]?.textWidth? slides[currentTip].textWidth : null}">-->
-
<div class="iv-custom-comp d-flex flex-column">
<h6 class="mb-2">
{{description}}
@@ -47,7 +24,7 @@
<div class="text-center">
<button mat-button iav-stop="mousedown mouseup"
- (click)="quickTourService.backSlide()"
+ (click)="quickTourService.previousSlide()"
*ngIf="order > 0">
<i class="fas fa-angle-left"></i>
<span class="ml-1">BACK</span>
@@ -80,15 +57,15 @@
<ng-template #arrow>
- <ng-content *ngTemplateOutlet="overwritePos?.arrow === 'arrow2'? arrow2:
- overwritePos?.arrow === 'arrow3'? arrow3:
- overwritePos?.arrow === 'arrow4'? arrow4:
- overwritePos?.arrow === 'arrow5'? arrow5:
+ <ng-content *ngTemplateOutlet="position?.arrow === 'arrow2'? arrow2:
+ position?.arrow === 'arrow3'? arrow3:
+ position?.arrow === 'arrow4'? arrow4:
+ position?.arrow === 'arrow5'? arrow5:
arrow1"></ng-content>
</ng-template>
<ng-template #arrow1>
- <svg [ngStyle]="{transform: overwritePos?.arrowTransform? overwritePos?.arrowTransform : null}"
+ <svg [ngStyle]="{transform: position?.arrowTransform? position?.arrowTransform : null}"
height="80px" class="overflow-visible" viewBox="166.586 231.427 12.015 71.497" xmlns="http://www.w3.org/2000/svg">
<path class="stokeColor" style="fill-opacity: 0; paint-order: stroke markers; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px;" d="M 183.239 326.14 C 176.831 309.209 176.634 285.376 182.647 254.643" transform="matrix(1, 0, 0, 1, -9.368863, -23.215925)"/>
<path class="stokeColor" d="M 187.97 263.39 C 187.12 262.245 184.536 259.536 182.665 254.732" transform="matrix(1, 0, 0, 1, -9.368863, -23.215925)"/>
@@ -97,7 +74,7 @@
</ng-template>
<ng-template #arrow2>
- <svg [ngStyle]="{transform: overwritePos?.arrowTransform? overwritePos?.arrowTransform : null}"
+ <svg [ngStyle]="{transform: position?.arrowTransform? position?.arrowTransform : null}"
width="80px" height="50px" class="overflow-visible" viewBox="150.239 144.229 67.46 40.886" xmlns="http://www.w3.org/2000/svg">
<path class="stokeColor" d="M 296.081 265.092 Q 302.545 229.649 359.476 224.337" transform="matrix(1, 0, 0, 1, -141.776566, -80.108154)"/>
<path class="stokeColor" d="M 292.065 265.677 C 294.922 265.86 297.891 264.941 300.918 262.844 C 302.986 261.411 299.162 257.842 295.976 253.078" transform="matrix(0, 1, -1, 0, 415.938782, -116.389183)"/>
@@ -105,7 +82,7 @@
</ng-template>
<ng-template #arrow3>
- <svg [ngStyle]="{transform: overwritePos?.arrowTransform? overwritePos?.arrowTransform : null}"
+ <svg [ngStyle]="{transform: position?.arrowTransform? position?.arrowTransform : null}"
height="100px"
viewBox="23.011 51.12 86.091 84.486" xmlns="http://www.w3.org/2000/svg">
<path class="stokeColor" d="M 42.372 135.275 C 39.099 72.198 70.666 69.778 107.477 70.17"/>
@@ -120,7 +97,7 @@
</ng-template>
<ng-template #arrow4>
- <svg [ngStyle]="{transform: overwritePos?.arrowTransform? overwritePos?.arrowTransform : null}"
+ <svg [ngStyle]="{transform: position?.arrowTransform? position?.arrowTransform : null}"
height="50px" class="overflow-visible" viewBox="88.429 331.463 16.292 53.247" xmlns="http://www.w3.org/2000/svg">
<path class="stokeColor" style="fill-rule: evenodd; fill: rgba(0, 0, 0, 0); stroke-width: 3px;" d="M 96.649 384.71 L 96.649 332.904"/>
<path class="stokeColor" style="fill-rule: evenodd; fill: rgba(0, 0, 0, 0); paint-order: fill; stroke-linejoin: round; stroke-linecap: round; stroke-width: 3px;" d="M 88.708 343.497 C 86.828 341.857 94.988 329.978 96.868 331.618 C 99.945 331.127 106.222 342.826 104.392 343.118"/>
@@ -128,7 +105,7 @@
</ng-template>
<ng-template #arrow5>
- <svg [ngStyle]="{transform: overwritePos?.arrowTransform? overwritePos?.arrowTransform : null}"
+ <svg [ngStyle]="{transform: position?.arrowTransform? position?.arrowTransform : null}"
width="50px" viewBox="140.601 179.981 53.247 16.292" xmlns="http://www.w3.org/2000/svg">
<path class="stokeColor" style="fill-rule: evenodd; fill: rgba(0, 0, 0, 0); stroke-width: 3px;" d="M 167.945 213.956 L 167.945 162.15" transform="matrix(0, -1, 1, 0, -20.107986, 355.997986)"/>
<path class="stokeColor" style="fill-rule: evenodd; fill: rgba(0, 0, 0, 0); paint-order: fill; stroke-linejoin: round; stroke-linecap: round; stroke-width: 3px;" d="M 138.751 194.144 C 136.871 192.504 145.031 180.625 146.911 182.265 C 149.988 181.774 156.265 193.473 154.435 193.765" transform="matrix(0, -1, 1, 0, -41.509438, 334.744568)"/>
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.components.ts b/src/ui/topMenu/topMenuCmp/topMenu.components.ts
index 8c2234961..0dfa246f1 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.components.ts
+++ b/src/ui/topMenu/topMenuCmp/topMenu.components.ts
@@ -12,7 +12,7 @@ import { AuthService } from "src/auth";
import { IavRootStoreInterface, IDataEntry } from "src/services/stateStore.service";
import { MatDialog, MatDialogConfig, MatDialogRef } from "@angular/material/dialog";
import { MatBottomSheet } from "@angular/material/bottom-sheet";
-import { CONST } from 'common/constants'
+import { CONST, QUICKTOUR_DESC } from 'common/constants'
@Component({
selector: 'top-menu-cmp',
@@ -52,11 +52,9 @@ export class TopMenuCmp {
public screenshotTooltipText: string = 'Take screenshot'
quickTourData = {
- description: 'These icons provide access to plugins, pinned datasets, and user documentation. Use the profile icon to login with your EBRAINS account.',
+ description: QUICKTOUR_DESC.TOP_MENU,
order: 8,
- position: 'bottom',
- align: 'center',
- overwritePos: of({arrowPosition: 'top', arrowAlign: 'center', arrowTransform: 'scaleX(-1)'})
+ position: {position: 'bottom', align: 'center', arrowPosition: 'top', arrowAlign: 'center', arrowTransform: 'scaleX(-1)'}
}
constructor(
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index bbd9a4a8f..8b4f55c35 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -46,8 +46,6 @@
[quick-tour-description]="quickTourData.description"
[quick-tour-order]="quickTourData.order"
[quick-tour-position]="quickTourData.position"
- [quick-tour-align]="quickTourData.align"
- [quick-tour-overwrite-pos]="quickTourData.overwritePos"
[iav-key-listener]="keyListenerConfig"
(iav-key-event)="openTmplWithDialog(helperOnePager)">
diff --git a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
index 75747f62a..2e09e2117 100644
--- a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
+++ b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.component.ts
@@ -9,7 +9,7 @@ import { viewerStateAddUserLandmarks, viewerStateChangeNavigation, viewerStateMo
import { ngViewerSelectorLayers, ngViewerSelectorClearView, ngViewerSelectorPanelOrder, ngViewerSelectorOctantRemoval, ngViewerSelectorPanelMode } from "src/services/state/ngViewerState/selectors";
import { viewerStateCustomLandmarkSelector, viewerStateNavigationStateSelector, viewerStateSelectedRegionsSelector } from "src/services/state/viewerState/selectors";
import { serialiseParcellationRegion } from 'common/util'
-import { ARIA_LABELS, IDS } from 'common/constants'
+import { ARIA_LABELS, IDS, QUICKTOUR_DESC } from 'common/constants'
import { PANELS } from "src/services/state/ngViewerState/constants";
import { LoggingService } from "src/logging";
@@ -21,6 +21,7 @@ import { cvtNavigationObjToNehubaConfig, getFourPanel, getHorizontalOneThree, ge
import { API_SERVICE_SET_VIEWER_HANDLE_TOKEN, TSetViewerHandle } from "src/atlasViewer/atlasViewer.apiService.service";
import { MouseHoverDirective } from "src/mouseoverModule";
import { NehubaMeshService } from "../mesh.service";
+import {QuickTourData} from "src/ui/quickTour/constrants";
interface INgLayerInterface {
name: string // displayName
@@ -91,26 +92,22 @@ export class NehubaGlueCmp implements IViewer, OnChanges, OnDestroy{
private findPanelIndex = (panel: HTMLElement) => this.viewPanelWeakMap.get(panel)
public nanometersToOffsetPixelsFn: Array<(...arg) => any> = []
- public quickTourSliceViewSlide = {
+ public quickTourSliceViewSlide: QuickTourData = {
order: 1,
- description: 'The planar views allow you to zoom in to full resolution (mouse wheel), pan the view (click+drag), and select oblique sections (shift+click+drag). You can double-click brain regions to select them.',
- position: 'bottom-right',
- overwritePos: of({arrow: 'arrow3', arrowPosition: 'left', arrowMargin: {right: -50, bottom: 130}})
+ description: QUICKTOUR_DESC.SLICE_VIEW,
+ position: {position: 'bottom-right', arrow: 'arrow3', arrowPosition: 'left', arrowMargin: {right: -50, bottom: 130}},
}
- public quickTour3dViewSlide = {
+ public quickTour3dViewSlide: QuickTourData = {
order: 2,
- description: 'The 3D view gives an overview of the brain with limited resolution. It can be independently rotated. Click the „eye“ icon on the bottom left to toggle pure surface view.',
- position: 'top-left',
- overwritePos: of({arrow: 'arrow5', arrowPosition: 'right', arrowAlign: 'bottom', arrowMargin: {bottom: -25, left: -10}, arrowTransform: 'rotate(-130deg)'})
+ description: QUICKTOUR_DESC.PERSPECTIVE_VIEW,
+ position: {position: 'top-left', arrow: 'arrow5', arrowPosition: 'right', arrowAlign: 'bottom', arrowMargin: {bottom: -25, left: -10}, arrowTransform: 'rotate(-130deg)'},
}
- public quickTourIconsSlide = {
+ public quickTourIconsSlide: QuickTourData = {
order: 3,
- description: 'Use these icons in any of the views to maximize it and zoom in/out.',
- position: 'bottom',
- align: 'right',
- overwritePos: of({arrow: 'arrow4', arrowPosition: 'top', arrowAlign: 'right', arrowMargin: {right: 50}})
+ description: QUICKTOUR_DESC.VIEW_ICONS,
+ position: {position: 'bottom', align: 'right', arrow: 'arrow4', arrowPosition: 'top', arrowAlign: 'right', arrowMargin: {right: 50}},
}
public customLandmarks$: Observable<any> = this.store$.pipe(
diff --git a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
index 6c4d101e2..13990f167 100644
--- a/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
+++ b/src/viewerModule/nehuba/nehubaViewerGlue/nehubaViewerGlue.template.html
@@ -20,17 +20,14 @@
quick-tour
[quick-tour-description]="quickTourSliceViewSlide.description"
[quick-tour-order]="quickTourSliceViewSlide.order"
- [quick-tour-position]="quickTourSliceViewSlide.position"
- [quick-tour-overwrite-pos]="quickTourSliceViewSlide.overwritePos">
+ [quick-tour-position]="quickTourSliceViewSlide.position">
<ng-content *ngTemplateOutlet="ngPanelOverlayTmpl; context: { panelIndex: panelOrder$ | async | getNthElement : 0 | parseAsNumber }"></ng-content>
</div>
<div class="w-100 h-100 position-relative" cell-ii
quick-tour
[quick-tour-description]="quickTourIconsSlide.description"
[quick-tour-order]="quickTourIconsSlide.order"
- [quick-tour-position]="quickTourIconsSlide.position"
- [quick-tour-align]="quickTourIconsSlide.align"
- [quick-tour-overwrite-pos]="quickTourIconsSlide.overwritePos">
+ [quick-tour-position]="quickTourIconsSlide.position">
<ng-content *ngTemplateOutlet="ngPanelOverlayTmpl; context: { panelIndex: panelOrder$ | async | getNthElement : 1 | parseAsNumber }"></ng-content>
</div>
<div class="w-100 h-100 position-relative" cell-iii>
@@ -40,8 +37,7 @@
quick-tour
[quick-tour-description]="quickTour3dViewSlide.description"
[quick-tour-order]="quickTour3dViewSlide.order"
- [quick-tour-position]="quickTour3dViewSlide.position"
- [quick-tour-overwrite-pos]="quickTour3dViewSlide.overwritePos">
+ [quick-tour-position]="quickTour3dViewSlide.position">
<ng-content *ngTemplateOutlet="ngPanelOverlayTmpl; context: { panelIndex: panelOrder$ | async | getNthElement : 3 | parseAsNumber }"></ng-content>
</div>
</current-layout>
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.component.ts b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
index 0ee28e859..4691b93cd 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.component.ts
+++ b/src/viewerModule/nehuba/statusCard/statusCard.component.ts
@@ -14,12 +14,13 @@ import {Observable, Subscription, of, combineLatest, BehaviorSubject} from "rxjs
import { map, filter, startWith } from "rxjs/operators";
import { MatBottomSheet } from "@angular/material/bottom-sheet";
import { MatDialog } from "@angular/material/dialog";
-import { ARIA_LABELS } from 'common/constants'
+import { ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
import { FormControl } from "@angular/forms";
import { viewerStateNavigationStateSelector, viewerStateSelectedTemplatePureSelector } from "src/services/state/viewerState/selectors";
import { viewerStateChangeNavigation } from "src/services/state/viewerState/actions";
import { getNavigationStateFromConfig, NEHUBA_INSTANCE_INJTKN } from '../util'
+import {QuickTourData, QuickTourPosition} from "src/ui/quickTour/constrants";
@Component({
selector : 'iav-cmp-viewer-nehuba-status',
@@ -51,13 +52,12 @@ export class StatusCardComponent implements OnInit, OnChanges{
public useTouchInterface$: Observable<boolean>
- public quickTourPosition$: BehaviorSubject<any> = new BehaviorSubject({arrowPosition: 'top', arrowAlign: 'center'})
- public quickTourData = {
- description: 'This is the coordinate navigator. Expand it to manipulate voxel and physical coordinates, to reset the view, or to create persistent links to the current view for sharing.',
+ public quickTourExpandedPosition: QuickTourPosition = {position: 'bottom', align: 'left', top: 150, arrow: 'arrow4', arrowPosition: 'top', arrowAlign: 'center'}
+ public quickTourCollapsedPosition: QuickTourPosition = {position: 'bottom', align: 'left', top: 60, arrowPosition: 'top', arrowAlign: 'center'}
+ public quickTourData: QuickTourData = {
+ description: QUICKTOUR_DESC.STATUS_CARD,
order: 6,
- position: 'bottom',
- align: 'left',
- overwritePos: this.quickTourPosition$
+ position: this.quickTourCollapsedPosition
}
public SHARE_BTN_ARIA_LABEL = ARIA_LABELS.SHARE_BTN
diff --git a/src/viewerModule/nehuba/statusCard/statusCard.template.html b/src/viewerModule/nehuba/statusCard/statusCard.template.html
index a27bd519c..d3639b7da 100644
--- a/src/viewerModule/nehuba/statusCard/statusCard.template.html
+++ b/src/viewerModule/nehuba/statusCard/statusCard.template.html
@@ -1,9 +1,7 @@
<div quick-tour
[quick-tour-description]="quickTourData.description"
[quick-tour-order]="quickTourData.order"
- [quick-tour-position]="quickTourData.position"
- [quick-tour-align]="quickTourData.align"
- [quick-tour-overwrite-pos]="quickTourData.overwritePos">
+ [quick-tour-position]="quickTourData.position">
<mat-card class="expandedContainer p-2 pt-1" *ngIf="showFull; else showMin"
>
@@ -42,7 +40,7 @@
<button mat-icon-button
[attr.aria-label]="HIDE_FULL_STATUS_PANEL_ARIA_LABEL"
- (click)="showFull = false; quickTourPosition$.next({arrowPosition: 'top', arrowAlign: 'center', recalculate: true})">
+ (click)="showFull = false; quickTourData.position = quickTourCollapsedPosition">
<i class="fas fa-angle-up"></i>
</button>
</div>
@@ -132,8 +130,7 @@
<button mat-icon-button
[attr.aria-label]="SHOW_FULL_STATUS_PANEL_ARIA_LABEL"
- (click)="showFull = true;
- quickTourPosition$.next({arrow: 'arrow4', arrowPosition: 'top', arrowAlign: 'center', recalculate: true})">
+ (click)="showFull = true; quickTourData.position = quickTourExpandedPosition">
<i class="fas fa-angle-down"></i>
</button>
</div>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index 69ee96fb9..49a5d3b10 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -4,7 +4,7 @@ import {BehaviorSubject, combineLatest, Observable, of, Subject, Subscription} f
import { distinctUntilChanged, filter, map, startWith } from "rxjs/operators";
import { viewerStateHelperSelectParcellationWithId, viewerStateRemoveAdditionalLayer, viewerStateSetSelectedRegions } from "src/services/state/viewerState/actions";
import { viewerStateContextedSelectedRegionsSelector, viewerStateGetOverlayingAdditionalParcellations, viewerStateParcVersionSelector, viewerStateSelectedParcellationSelector, viewerStateSelectedTemplateSelector, viewerStateStandAloneVolumes } from "src/services/state/viewerState/selectors"
-import { CONST, ARIA_LABELS } from 'common/constants'
+import { CONST, ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
import { ngViewerActionClearView } from "src/services/state/ngViewerState/actions";
import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState/selectors";
import { uiActionHideAllDatasets, uiActionHideDatasetWithId } from "src/services/state/uiState/actions";
@@ -12,6 +12,7 @@ import { REGION_OF_INTEREST } from "src/util/interfaces";
import { animate, state, style, transition, trigger } from "@angular/animations";
import { SwitchDirective } from "src/util/directives/switch.directive";
import { TSupportedViewer } from "../constants";
+import {QuickTourData, QuickTourPosition} from "src/ui/quickTour/constrants";
@Component({
selector: 'iav-cmp-viewer-container',
@@ -77,25 +78,22 @@ export class ViewerCmp implements OnDestroy {
@ViewChild('sideNavFullLeftSwitch', { static: true })
private sidenavLeftSwitch: SwitchDirective
- public sidebarQuickTourPosition$: BehaviorSubject<any> = new BehaviorSubject({arrow: 'arrow5', left: 30, top: 50, arrowPosition: 'top-right', arrowTransform: 'rotate(25deg)'})
- quickTourRegionSearch = {
+ public quickTourRegionSearchCollapsedPosition: QuickTourPosition = {arrow: 'arrow5', left: 30, top: 60, arrowPosition: 'left', arrowAlign: 'top', arrowMargin: {top: -20}, arrowTransform: 'rotate(25deg)'}
+ public quickTourRegionSearchExpandedPosition: QuickTourPosition = {left: 30, top: 70, arrowPosition: 'top', arrowAlign: 'center'}
+ public quickTourRegionSearch: QuickTourData = {
order: 7,
- description: 'Use the region quick search for finding, selecting and navigating brain regions in the selected parcellation map.',
- overwritePos: this.sidebarQuickTourPosition$
+ description: QUICKTOUR_DESC.REGION_SEARCH,
+ position: this.quickTourRegionSearchCollapsedPosition
}
- quickTourAtlasSelector = {
+ public quickTourAtlasSelector: QuickTourData = {
order: 0,
- description: 'This is the atlas selector. Click here to choose between EBRAINS reference atlases of different species.',
- position: 'bottom',
- align: 'right',
- overwritePos: of({arrowPosition: 'top', arrowAlign: 'center'})
+ description: QUICKTOUR_DESC.ATLAS_SELECTOR,
+ position: {position: 'bottom', align: 'right', arrowPosition: 'top', arrowAlign: 'center'}
}
- quickTourChips = {
+ public quickTourChips: QuickTourData = {
order: 5,
- description: 'These „chips“ indicate the currently selected parcellation map as well as selected region. Click the chip to see different versions, if any. Click (i) to read more about a selected item. Click (x) to clear a selection.',
- position: 'top',
- align: 'center',
- overwritePos: of({arrowPosition: 'bottom', arrowAlign: 'center', arrowTransform: 'scaleX(-1) rotate(180deg)', recalculate: true})
+ description: QUICKTOUR_DESC.CHIPS,
+ position: {position: 'top', align: 'center', arrowPosition: 'bottom', arrowAlign: 'center', arrowTransform: 'scaleX(-1) rotate(180deg)'}
}
@@ -231,7 +229,7 @@ export class ViewerCmp implements OnDestroy {
}
private openSideNavs() {
- this.sidebarQuickTourPosition$.next({left: 30, top: 70, arrowPosition: 'top', arrowAlign: 'center', recalculate: true})
+ this.quickTourRegionSearch.position = this.quickTourRegionSearchExpandedPosition
this.sidenavLeftSwitch && this.sidenavLeftSwitch.open()
this.sidenavTopSwitch && this.sidenavTopSwitch.open()
}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 4933f1db8..725d50a5f 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -9,7 +9,9 @@
<mat-drawer-container
[iav-switch-initstate]="false"
iav-switch
- (iav-switch-event)="sidebarQuickTourPosition$.next(sideNavTopSwitch.switchState? {left: 30, top: 70, arrowPosition: 'top', arrowAlign: 'center', recalculate: true} : {arrow: 'arrow5', left: 30, top: 50, arrowPosition: 'top-right', arrowTransform: 'rotate(25deg)'})"
+ (iav-switch-event)="quickTourRegionSearch.position =
+ sideNavTopSwitch.switchState? quickTourRegionSearchExpandedPosition
+ : quickTourRegionSearchCollapsedPosition"
#sideNavTopSwitch="iavSwitch"
class="mat-drawer-content-overflow-visible w-100 h-100 position-absolute invisible"
[hasBackdrop]="false">
@@ -30,7 +32,7 @@
quick-tour
[quick-tour-description]="quickTourRegionSearch.description"
[quick-tour-order]="quickTourRegionSearch.order"
- [quick-tour-overwrite-pos]="quickTourRegionSearch.overwritePos">
+ [quick-tour-position]="quickTourRegionSearch.position">
<ng-container *ngTemplateOutlet="autocompleteTmpl">
</ng-container>
</div>
@@ -100,9 +102,7 @@
quick-tour
[quick-tour-description]="quickTourAtlasSelector.description"
[quick-tour-order]="quickTourAtlasSelector.order"
- [quick-tour-position]="quickTourAtlasSelector.position"
- [quick-tour-align]="quickTourAtlasSelector.align"
- [quick-tour-overwrite-pos]="quickTourAtlasSelector.overwritePos">
+ [quick-tour-position]="quickTourAtlasSelector.position">
<atlas-dropdown-selector class="pe-all mt-2">
</atlas-dropdown-selector>
</div>
@@ -213,9 +213,7 @@
quick-tour
[quick-tour-description]="quickTourChips.description"
[quick-tour-order]="quickTourChips.order"
- [quick-tour-position]="quickTourChips.position"
- [quick-tour-align]="quickTourChips.align"
- [quick-tour-overwrite-pos]="quickTourChips.overwritePos">
+ [quick-tour-position]="quickTourChips.position">
<!-- additional layer -->
<ng-container>
--
GitLab