Quick tour changes

common/constants.js

@@ -101,7 +101,7 @@
     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.`,
+    PERSPECTIVE_VIEW: `The 3D view gives an overview of the brain with limited resolution. It can be independently rotated. On the 3d view you can find additional settings.`,
     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.`,

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 {LOCAL_STORAGE_CONST} from "src/util/constants";
 
 @Directive({
   selector: '[quick-tour]',
@@ -14,7 +15,8 @@ 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-check-auto-start') quickTourCheckAutoStart: boolean
+
   private attachedTmpl: ElementRef
 
   constructor(
@@ -29,6 +31,14 @@ export class QuickTourThis implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     this.quickTourService.register(this)
+
+    if (this.quickTourCheckAutoStart) {
+      if (!localStorage.getItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED)) {
+        this.quickTourService.startTour()
+        localStorage.setItem(LOCAL_STORAGE_CONST.QUICK_TOUR_VIEWED, 'true')
+      }
+    }
+
   }
 
   ngOnChanges() {

src/util/constants.ts

@@ -7,6 +7,7 @@ export const LOCAL_STORAGE_CONST = {
   MOBILE_UI: 'fzj.xg.iv.MOBILE_UI',
   AGREE_COOKIE: 'fzj.xg.iv.AGREE_COOKIE',
   AGREE_KG_TOS: 'fzj.xg.iv.AGREE_KG_TOS',
+  QUICK_TOUR_VIEWED: 'fzj.dg.iv.QUICK_TOUR_VIEWED',
 
   FAV_DATASET: 'fzj.xg.iv.FAV_DATASET_V2',
 }
@@ -41,7 +42,7 @@ export const appendScriptFactory = (document: Document) => {
   })
 }
 
-export const REMOVE_SCRIPT_TOKEN: InjectionToken<(el: HTMLScriptElement) => void> = new InjectionToken(`REMOVE_SCRIPT_TOKEN`) 
+export const REMOVE_SCRIPT_TOKEN: InjectionToken<(el: HTMLScriptElement) => void> = new InjectionToken(`REMOVE_SCRIPT_TOKEN`)
 
 export const removeScriptFactory = (document: Document) => {
   return (srcEl: HTMLScriptElement) => {
@@ -73,10 +74,10 @@ import { EnumColorMapName, mapKeyColorMap } from './colorMaps'
 import { InjectionToken } from "@angular/core"
 
 export const getShader = ({
-  colormap = EnumColorMapName.GREYSCALE, 
+  colormap = EnumColorMapName.GREYSCALE,
   lowThreshold = 0,
   highThreshold = 1,
-  brightness = 0, 
+  brightness = 0,
   contrast = 0,
   removeBg = false
 } = {}): string => {

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -32,7 +32,7 @@
               }">
               </ng-container>
             </div>
-  
+
             <annotating-tools-panel class="z-index-10">
             </annotating-tools-panel>
           </div>
@@ -52,7 +52,7 @@
             </mat-card>
           </div>
         </iav-layout-fourcorners>
-  
+
 
       </mat-drawer-content>
     </mat-drawer-container>
@@ -154,7 +154,8 @@
               class="iv-custom-comp bg card m-2 mat-elevation-z2"
               quick-tour
               [quick-tour-description]="quickTourAtlasSelector.description"
-              [quick-tour-order]="quickTourAtlasSelector.order">
+              [quick-tour-order]="quickTourAtlasSelector.order"
+              [quick-tour-check-auto-start]="true">
               <atlas-dropdown-selector class="pe-all mt-2">
               </atlas-dropdown-selector>
             </div>
@@ -1090,12 +1091,12 @@
         [ngTemplateOutlet]="tmplRef.tmpl"
         [ngTemplateOutletContext]="{$implicit: tmplRef.data}">
       </ng-template>
-      
+
       <!-- template not provided -->
       <ng-template #fallbackTmpl>
         {{ tmplRef.data.message || 'test' }}
       </ng-template>
-      
+
       <mat-divider></mat-divider>
     </mat-card-content>
   </mat-card>