diff --git a/common/constants.js b/common/constants.js
index 9fccab3c49eeb850c49215c406be68178fe878fb..0c5cda5ab7e3a0b9e5229b3d19afafd3d70c98cd 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -94,6 +94,11 @@
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.`,
+ QUICKTOUR_HEADER: `Welcome to ebrains siibra explorer`,
+ PERMISSION_TO_QUICKTOUR: `Would you like a quick tour?`,
+ QUICKTOUR_OK: `Start`,
+ QUICKTOUR_NEXTTIME: `Not now`,
+ QUICKTOUR_CANCEL: `Dismiss`,
}
exports.QUICKTOUR_DESC ={
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 1f2f2f9ead5674c3365a8ce25ae499d2ee829732..01d2391c3916c8e6eeb1706c711aab6ee4df3825 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -48,7 +48,7 @@
[quick-tour-description-md]="quickTourFinale.descriptionMd"
[quick-tour-order]="quickTourFinale.order"
[quick-tour-overwrite-arrow]="emptyArrowTmpl"
- [quick-tour-severity]="'low'"
+ quick-tour-severity="low"
#media="iavMediaQuery">
<!-- prevent default is required so that user do not zoom in on UI or scroll on mobile UI -->
<iav-cmp-viewer-container
diff --git a/src/ui/quickTour/constrants.ts b/src/ui/quickTour/constrants.ts
index 1a09f2d060ce55b0033a2855b59bd90567857cb7..8665999ebe617b33784475feb55c025ad4ab4a2a 100644
--- a/src/ui/quickTour/constrants.ts
+++ b/src/ui/quickTour/constrants.ts
@@ -23,3 +23,15 @@ export interface IQuickTourOverwritePosition {
export type TQuickTourPosition = TPosition
export const QUICK_TOUR_CMP_INJTKN = new InjectionToken('QUICK_TOUR_CMP_INJTKN')
+
+export enum EnumQuickTourSeverity {
+ LOW = 'low',
+ MEDIUM = 'medium',
+ HIGH = 'hight',
+}
+
+export const PERMISSION_DIALOG_ACTIONS = {
+ START: `start`,
+ CANCEL: `cancel`,
+ NOTNOW: `notnow`
+}
\ No newline at end of file
diff --git a/src/ui/quickTour/quickTour.service.ts b/src/ui/quickTour/quickTour.service.ts
index 31fe272ae196a25b22eb0b6ed1c102767ee0f3f0..b804fae643aaade8e94f7c79f236c941b8718779 100644
--- a/src/ui/quickTour/quickTour.service.ts
+++ b/src/ui/quickTour/quickTour.service.ts
@@ -1,14 +1,13 @@
-import {ComponentRef, Inject, Injectable, OnDestroy} from "@angular/core";
-import {BehaviorSubject, Subject, Subscription} from "rxjs";
+import { ComponentRef, Inject, Injectable } from "@angular/core";
+import { BehaviorSubject, Subject } from "rxjs";
import { Overlay, OverlayRef } from "@angular/cdk/overlay";
import { ComponentPortal } from "@angular/cdk/portal";
import { QuickTourThis } from "./quickTourThis.directive";
import { DoublyLinkedList, IDoublyLinkedItem } from 'src/util'
-import { QUICK_TOUR_CMP_INJTKN } from "./constrants";
-import {LOCAL_STORAGE_CONST} from "src/util/constants";
-import {MatDialog, MatDialogRef} from "@angular/material/dialog";
-import {StartTourDialogDialog} from "src/ui/quickTour/startTourDialog/startTourDialog.component";
-import {take} from "rxjs/operators";
+import { EnumQuickTourSeverity, PERMISSION_DIALOG_ACTIONS, QUICK_TOUR_CMP_INJTKN } from "./constrants";
+import { LOCAL_STORAGE_CONST } from "src/util/constants";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+import { StartTourDialogDialog } from "src/ui/quickTour/startTourDialog/startTourDialog.component";
export function findInLinkedList<T extends object>(first: IDoublyLinkedItem<T>, predicate: (linkedObj: IDoublyLinkedItem<T>) => boolean): IDoublyLinkedItem<T>{
let compareObj = first,
@@ -65,6 +64,11 @@ export class QuickTourService {
return linkedItem.thisObj.order < dir.order
}
)
+
+
+ if (dir.quickTourSeverity === EnumQuickTourSeverity.MEDIUM || dir.quickTourSeverity === EnumQuickTourSeverity.HIGH) {
+ this.autoStart()
+ }
}
public unregister(dir: QuickTourThis){
@@ -72,19 +76,24 @@ export class QuickTourService {
}
autoStart() {
+
+ // if already viewed quick tour, return
+ if (localStorage.getItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED)){
+ return
+ }
+ // if auto start already triggered, return
+ if (this.autoStartTriggered) return
this.autoStartTriggered = true
this.startTourDialogRef = this.matDialog.open(StartTourDialogDialog)
- this.startTourDialogRef.afterClosed().pipe(take(1)).subscribe(res => {
+ this.startTourDialogRef.afterClosed().subscribe(res => {
switch (res) {
- case 'start':
+ case PERMISSION_DIALOG_ACTIONS.START:
this.startTour()
localStorage.setItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED, 'true')
- break;
- case 'close':
+ break
+ case PERMISSION_DIALOG_ACTIONS.CANCEL:
localStorage.setItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED, 'true')
- break;
- default:
- break;
+ break
}
})
diff --git a/src/ui/quickTour/quickTourThis.directive.ts b/src/ui/quickTour/quickTourThis.directive.ts
index be1263111be1f723b4ce38c99c9be462a7107bc8..1908166452147779e29c35e08d9838f60e1479bc 100644
--- a/src/ui/quickTour/quickTourThis.directive.ts
+++ b/src/ui/quickTour/quickTourThis.directive.ts
@@ -1,6 +1,6 @@
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, TemplateRef } from "@angular/core";
import { QuickTourService } from "src/ui/quickTour/quickTour.service";
-import { IQuickTourOverwritePosition, TQuickTourPosition } from "src/ui/quickTour/constrants";
+import { EnumQuickTourSeverity, IQuickTourOverwritePosition, TQuickTourPosition } from "src/ui/quickTour/constrants";
import {LOCAL_STORAGE_CONST} from "src/util/constants";
@Directive({
@@ -15,7 +15,7 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
@Input('quick-tour-position') position: TQuickTourPosition
@Input('quick-tour-overwrite-position') overwritePosition: IQuickTourOverwritePosition
@Input('quick-tour-overwrite-arrow') overWriteArrow: TemplateRef<any> | string
- @Input('quick-tour-severity') quickTourSeverity: 'low' | 'medium' | 'high' = 'medium'
+ @Input('quick-tour-severity') quickTourSeverity: EnumQuickTourSeverity = EnumQuickTourSeverity.MEDIUM
private attachedTmpl: ElementRef
@@ -31,11 +31,6 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
this.quickTourService.register(this)
-
- if (!localStorage.getItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED) && this.quickTourSeverity !== 'low' && !this.quickTourService.autoStartTriggered) {
- this.quickTourService.autoStart()
- }
-
}
ngOnChanges() {
diff --git a/src/ui/quickTour/startTourDialog/startTourDialog.component.ts b/src/ui/quickTour/startTourDialog/startTourDialog.component.ts
index c01390231008f615274e93c194ddd58643f21b67..ac77e1d479fa84a408d228f51ba6d1d65ddc39d7 100644
--- a/src/ui/quickTour/startTourDialog/startTourDialog.component.ts
+++ b/src/ui/quickTour/startTourDialog/startTourDialog.component.ts
@@ -1,10 +1,14 @@
import {Component} from "@angular/core";
import {MatDialogRef} from "@angular/material/dialog";
+import { CONST } from 'common/constants'
+import { PERMISSION_DIALOG_ACTIONS } from "../constrants";
@Component({
selector: 'quick-tour-start-dialog',
templateUrl: './startTourDialog.template.html',
})
export class StartTourDialogDialog {
+ public CONST = CONST
+ public PERMISSION_DIALOG_ACTIONS = PERMISSION_DIALOG_ACTIONS
constructor(public dialogRef: MatDialogRef<StartTourDialogDialog>) {}
}
diff --git a/src/ui/quickTour/startTourDialog/startTourDialog.template.html b/src/ui/quickTour/startTourDialog/startTourDialog.template.html
index b082ec6e294f999eccbcb5f751d03bdd66759318..2f0db03ffac09e383c69ec1d4a62f60b0de33b72 100644
--- a/src/ui/quickTour/startTourDialog/startTourDialog.template.html
+++ b/src/ui/quickTour/startTourDialog/startTourDialog.template.html
@@ -1,9 +1,34 @@
-<div class="d-flex flex-column">
- <h3>Welcome to Ebrains Siibra explorer.</h3>
- <div> Click start to go through quick steps to get familiar with the viewer.</div>
- <div class="d-flex flex-row-reverse justify-content-starts mt-3">
- <button mat-button color="primary" [mat-dialog-close]="'start'">Start</button>
- <button mat-button [mat-dialog-close]="'next time'">Next time</button>
- <button mat-button [mat-dialog-close]="'close'">Close</button>
- </div>
+<h3 mat-dialog-title>
+ {{ CONST.QUICKTOUR_HEADER }}
+</h3>
+
+<div mat-dialog-content>
+ <span>
+ {{ CONST.PERMISSION_TO_QUICKTOUR }}
+ </span>
+</div>
+
+<div mat-dialog-actions class="d-flex">
+ <button
+ mat-raised-button
+ color="primary"
+ [mat-dialog-close]="PERMISSION_DIALOG_ACTIONS.START">
+ <i class="fas fa-play"></i>
+ <span>
+ {{ CONST.QUICKTOUR_OK }}
+ </span>
+ </button>
+ <button
+ mat-stroked-button
+ [mat-dialog-close]="PERMISSION_DIALOG_ACTIONS.NOTNOW">
+ {{ CONST.QUICKTOUR_NEXTTIME }}
+ </button>
+
+ <div class="flex-grow-1 flex-shrink-1"></div>
+
+ <button
+ mat-button
+ [mat-dialog-close]="PERMISSION_DIALOG_ACTIONS.CANCEL">
+ {{ CONST.QUICKTOUR_CANCEL }}
+ </button>
</div>
diff --git a/src/ui/topMenu/topMenuCmp/topMenu.template.html b/src/ui/topMenu/topMenuCmp/topMenu.template.html
index 3341eaaf58f677841ae2becaf5ba37f3626ca46a..cb253e7ecf66bd29d1cb972f7d3f491b1e220f3d 100644
--- a/src/ui/topMenu/topMenuCmp/topMenu.template.html
+++ b/src/ui/topMenu/topMenuCmp/topMenu.template.html
@@ -45,7 +45,7 @@
quick-tour
[quick-tour-description]="quickTourData.description"
[quick-tour-order]="quickTourData.order"
- [quick-tour-severity]="'low'"
+ quick-tour-severity="low"
[iav-key-listener]="keyListenerConfig"
(iav-key-event)="openTmplWithDialog(helperOnePager, helperOnePagerConfig)">