feat: adaptive region search quick tour

src/ui/quickTour/index.ts

+export {
+  QuickTourModule
+} from './module'
+
+export {
+  QuickTourThis
+} from './quickTourThis.directive'
+
+export {
+  IQuickTourData
+} from './constrants'

src/ui/quickTour/quickTourComponent/quickTour.component.ts

@@ -40,8 +40,8 @@ export class QuickTourComponent {
     }
   }
 
-  public tourCardTransform = `translate(0px, 0px)`
-  public customArrowTransform = `translate(0px, 0px)`
+  public tourCardTransform = `translate(-500px, -500px)`
+  public customArrowTransform = `translate(-500px, -500px)`
 
   public arrowFrom: [number, number] = [0, 0]
   public arrowTo: [number, number] = [0, 0]

src/viewerModule/viewerCmp/viewerCmp.component.ts

-import { Component, Inject, Input, OnDestroy, Optional, ViewChild } from "@angular/core";
+import { Component, ElementRef, Inject, Input, OnDestroy, Optional, TemplateRef, ViewChild } from "@angular/core";
 import { select, Store } from "@ngrx/store";
 import { combineLatest, Observable, of, Subject, Subscription } from "rxjs";
 import { distinctUntilChanged, filter, map, startWith } from "rxjs/operators";
@@ -12,7 +12,8 @@ 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 { IQuickTourData } from "src/ui/quickTour/constrants";
+import { QuickTourThis, IQuickTourData } from "src/ui/quickTour";
+import { MatDrawer } from "@angular/material/sidenav";
 
 @Component({
   selector: 'iav-cmp-viewer-container',
@@ -246,4 +247,19 @@ export class ViewerCmp implements OnDestroy {
         : uiActionHideAllDatasets()
     )
   }
+
+  @ViewChild('regionSelRef', { read: ElementRef })
+  regionSelRef: ElementRef<any>
+
+  @ViewChild('regionSearchQuickTour', { read: QuickTourThis })
+  regionSearchQuickTour: QuickTourThis
+
+  @ViewChild('matDrawerLeft', { read: MatDrawer })
+  matDrawerLeft: MatDrawer
+
+  handleSideNavAnimationDone(sideNavExpanded: boolean) {
+    this.regionSearchQuickTour?.attachTo(
+      !sideNavExpanded ? null : this.regionSelRef
+    )
+  }
 }

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -23,10 +23,11 @@
       [opened]="sideNavTopSwitch.switchState"
       [autoFocus]="false"
       [disableClose]="true"
+      (openedChange)="handleSideNavAnimationDone($event)"
       #matDrawerTop="matDrawer">
 
       <div class="h-0 w-100 region-text-search-autocomplete-position">
-        <ng-container *ngTemplateOutlet="autocompleteTmpl; context: { showTour: true, visible: matDrawerTop.opened }">
+        <ng-container *ngTemplateOutlet="autocompleteTmpl; context: { showTour: true }">
         </ng-container>
       </div>
 
@@ -65,7 +66,11 @@
 
             <div *ngIf="viewerLoaded"
               class="pe-all tab-toggle-container"
-              (click)="sideNavTopSwitch && sideNavTopSwitch.toggle();">
+              (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()"
+              quick-tour
+              [quick-tour-description]="quickTourRegionSearch.description"
+              [quick-tour-order]="quickTourRegionSearch.order"
+              #regionSearchQuickTour="quickTour">
               <ng-container *ngTemplateOutlet="tabTmpl; context: {
                 isOpen: sideNavTopSwitch.switchState,
                 regionSelected: selectedRegions$ | async,
@@ -517,16 +522,14 @@
 
 <!-- auto complete search box -->
 
-<ng-template #autocompleteTmpl let-visible="visible" let-showTour="showTour">
+<ng-template #autocompleteTmpl let-showTour="showTour">
   <div class="iv-custom-comp bg card w-100 mat-elevation-z8 pe-all">
     <region-text-search-autocomplete class="w-100 pt-2 flex-shrink-0 flex-grow-0">
     </region-text-search-autocomplete>
 
-    <div class="w-100 h-100 position-absolute"
-      *ngIf="visible && showTour"
-      quick-tour
-      [quick-tour-description]="quickTourRegionSearch.description"
-      [quick-tour-order]="quickTourRegionSearch.order">
+    <div class="w-100 h-100 position-absolute pe-none"
+      *ngIf="showTour"
+      #regionSelRef>
     </div>
   </div>
 </ng-template>