chore: cleanup quicktour directive

chore: export texts

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 ={

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

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

src/ui/quickTour/quickTour.service.ts

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

src/ui/quickTour/quickTourThis.directive.ts

 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() {

src/ui/quickTour/startTourDialog/startTourDialog.component.ts

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

src/ui/quickTour/startTourDialog/startTourDialog.template.html

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

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)">