feat: reorganise hierarchy

src/ui/viewerStateController/regionSearch/regionSearch.component.ts

-import { Component, EventEmitter, Output, ViewChild, ElementRef, TemplateRef } from "@angular/core";
+import { Component, EventEmitter, Output, ViewChild, ElementRef, TemplateRef, Input } from "@angular/core";
 import { Store, select } from "@ngrx/store";
 import { Observable } from "rxjs";
-import { map, distinctUntilChanged, startWith, withLatestFrom, filter, debounceTime, tap, share, shareReplay, take } from "rxjs/operators";
+import { map, distinctUntilChanged, startWith, withLatestFrom, debounceTime, shareReplay, take } from "rxjs/operators";
 import { getMultiNgIdsRegionsLabelIndexMap, generateLabelIndexId } from "src/services/stateStore.service";
 import { FormControl } from "@angular/forms";
-import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatDialog } from "@angular/material";
+import { MatAutocompleteSelectedEvent, MatDialog } from "@angular/material";
 import { ADD_TO_REGIONS_SELECTION_WITH_IDS, SELECT_REGIONS } from "src/services/state/viewerState.store";
 import { VIEWERSTATE_ACTION_TYPES } from "../viewerState.component";
 
@@ -20,6 +20,9 @@ const filterRegionBasedOnText = searchTerm => region => region.name.toLowerCase(
 
 export class RegionTextSearchAutocomplete{
 
+  @Input()
+  public showAutoComplete: boolean = true
+
   @ViewChild('autoTrigger', {read: ElementRef}) autoTrigger: ElementRef 
   @ViewChild('regionHierarchy', {read:TemplateRef}) regionHierarchyTemplate: TemplateRef<any>
   constructor(

src/ui/viewerStateController/regionSearch/regionSearch.template.html

-<div class="d-flex flex-row align-items-center">
+<div class="d-inline-flex flex-row align-items-center">
 
-  <form class="flex-grow-1 flex-shrink-1">
+  <form *ngIf="showAutoComplete" class="flex-grow-1 flex-shrink-1">
     <mat-form-field class="w-100">
       <input
         placeholder="Regions"

src/ui/viewerStateController/viewerState.template.html

@@ -17,6 +17,9 @@
     </mat-select>
   </mat-form-field>
 
+  <!-- padding so that info icon lines up -->
+  <button mat-icon-button class="pe-none invisible"></button>
+
   <ng-container *ngIf="templateSelected$ | async as templateSelected">
     <!-- show on hover component -->
     <sleight-of-hand
@@ -75,6 +78,12 @@
     </mat-select>
   </mat-form-field>
 
+  <!-- selected regions -->
+  <region-text-search-autocomplete
+    [showAutoComplete]="false"
+    (focusedStateChanged)="focused = $event">
+  </region-text-search-autocomplete>
+
   <ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
     <!-- show on hover component -->
     <sleight-of-hand
@@ -119,14 +128,6 @@
   <!-- divider -->
   <mat-divider></mat-divider>
 
-  <!-- selected regions -->
-
-  <div class="d-flex">
-    <region-text-search-autocomplete
-      (focusedStateChanged)="focused = $event">
-    </region-text-search-autocomplete>
-  </div>
-
   <!-- chips -->
   <mat-card class="w-20em mh-10em overflow-auto overflow-x-hidden">
     <mat-chip-list class="mat-chip-list-stacked" #selectedRegionsChipList>