fix: region hierachy enter resets page

fix: mini region search now shows + n more
chore: fix mini region search style

docs/releases/v2.8.0.md

@@ -3,7 +3,9 @@
 ## Features
 
 - More detailed filter for connectivity
-- Supports arbitrary layer based on URL parameter
+- Supports arbitrary layer based on URL parameter (#1252)
+- Mini region search now shows prompt ... and {n} more (#1249)
+- Minor update of mini region search UI
 
 ## Behind the scenes
 
@@ -13,3 +15,4 @@
 ## Bugfix
 
 - fixed open cheatsheet/quickstart in new window functionality
+- fixed region hierarchy, on hit enter resetting the application (#1240)

src/atlasComponents/sapiViews/core/rich/module.ts

@@ -9,6 +9,7 @@ import { SapiViewsCoreRegionModule } from "../region";
 import { HighlightPipe } from "./regionsHierarchy/highlight.pipe";
 import { SapiViewsCoreRichRegionsHierarchy } from "./regionsHierarchy/regionsHierarchy.component";
 import { SapiViewsCoreRichRegionListSearch } from "./regionsListSearch/regionListSearch.component";
+import { SapiViewsCoreRichRegionListTemplateDirective } from "./regionsListSearch/regionListSearchTmpl.directive";
 
 @NgModule({
   imports: [
@@ -24,9 +25,11 @@ import { SapiViewsCoreRichRegionListSearch } from "./regionsListSearch/regionLis
     SapiViewsCoreRichRegionListSearch,
     SapiViewsCoreRichRegionsHierarchy,
     HighlightPipe,
+    SapiViewsCoreRichRegionListTemplateDirective,
   ],
   exports: [
     SapiViewsCoreRichRegionListSearch,
+    SapiViewsCoreRichRegionListTemplateDirective,
     SapiViewsCoreRichRegionsHierarchy,
   ]
 })

src/atlasComponents/sapiViews/core/rich/regionsHierarchy/regionsHierarchy.template.html

-<form class="sxplr-custom-cmp text sxplr-w-100">
-  <mat-form-field class="sxplr-w-100">
-    <input
-      [placeholder]="placeholderText"
-      type="text"
-      matInput
-      name="searchTerm"
-      [formControl]="searchFormControl"
-      autocomplete="off">
+<mat-form-field class="sxplr-custom-cmp text sxplr-w-100">
+  <input
+    [placeholder]="placeholderText"
+    type="text"
+    matInput
+    name="searchTerm"
+    [formControl]="searchFormControl"
+    autocomplete="off">
 
-    <!-- search input suffix -->
-    <div matSuffix>
-      <ng-content select="[search-input-suffix]"></ng-content>
-    </div>
+  <!-- search input suffix -->
+  <div matSuffix>
+    <ng-content select="[search-input-suffix]"></ng-content>
+  </div>
 
-  </mat-form-field>
-</form>
+</mat-form-field>
 
 <ng-template #tmplRef let-region>
   <div class="mat-body sxplr-d-flex sxplr-align-items-center sxplr-h-100 region-tmpl"

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.component.ts

-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from "@angular/core";
 import { SapiRegionModel } from "src/atlasComponents/sapi/type";
 import { ARIA_LABELS } from "common/constants"
 import { UntypedFormControl } from "@angular/forms";
 import { debounceTime, distinctUntilChanged, map, startWith } from "rxjs/operators";
 import { MatAutocompleteSelectedEvent } from "@angular/material/autocomplete";
+import { SapiViewsCoreRichRegionListTemplateDirective } from "./regionListSearchTmpl.directive";
 
 /**
  * Filter function, which determines whether the region will be included in the list of autocompleted search.
@@ -34,6 +35,8 @@ export class SapiViewsCoreRichRegionListSearch {
 
   ARIA_LABELS = ARIA_LABELS
 
+  showNOptions = 4
+
   private _regions: SapiRegionModel[] = []
   get regions(){
     return this._regions
@@ -43,6 +46,9 @@ export class SapiViewsCoreRichRegionListSearch {
     this._regions = val.filter(filterRegionForListSearch)
   }
 
+  @ContentChild(SapiViewsCoreRichRegionListTemplateDirective)
+  regionTmplDirective: SapiViewsCoreRichRegionListTemplateDirective
+
   @Input('sxplr-sapiviews-core-rich-regionlistsearch-region-template-ref')
   regionTemplateRef: TemplateRef<any>
 
@@ -54,18 +60,22 @@ export class SapiViewsCoreRichRegionListSearch {
 
   public searchFormControl = new UntypedFormControl()
 
-  public autocompleteList$ = this.searchFormControl.valueChanges.pipe(
+  public searchedList$ = this.searchFormControl.valueChanges.pipe(
     startWith(''),
     distinctUntilChanged(),
     debounceTime(160),
     map((searchTerm: string | SapiRegionModel) => {
       if (typeof searchTerm === "string") {
-        return this.regions.filter(filterRegionViaSearch(searchTerm)).slice(0,5)
+        return this.regions.filter(filterRegionViaSearch(searchTerm))
       }
       return []
     })
   )
 
+  public autocompleteList$ = this.searchedList$.pipe(
+    map(list => list.slice(0, this.showNOptions))
+  )
+
   displayFn(region: SapiRegionModel){
     return region?.name || ''
   }

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.stories.ts

@@ -5,9 +5,10 @@ import { SAPI } from "src/atlasComponents/sapi"
 import { atlasId, provideDarkTheme, getParcRegions, parcId, spaceId } from "src/atlasComponents/sapi/stories.base"
 import { SapiViewsCoreRichModule } from "../module"
 import { SapiViewsCoreRichRegionListSearch } from "./regionListSearch.component"
-import { Pipe, PipeTransform, SecurityContext } from "@angular/core"
+import { Pipe, PipeTransform } from "@angular/core"
 import { SapiRegionModel } from "src/atlasComponents/sapi/type"
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser"
+import { DomSanitizer } from "@angular/platform-browser"
+import { SapiViewsCoreRegionModule } from "../../region"
 
 @Pipe({
   name: 'regionTmplPipe',
@@ -38,6 +39,7 @@ export default {
       imports: [
         HttpClientModule,
         SapiViewsCoreRichModule,
+        SapiViewsCoreRegionModule,
       ],
       providers: [
         SAPI,
@@ -63,10 +65,8 @@ const Template: Story<SapiViewsCoreRichRegionListSearch> = (args: SapiViewsCoreR
     tmplRef
   } = parameters
   const template = `
-  ${tmplRef ? ('<ng-template #tmplref let-region>' + tmplRef + '</ng-template>') : ''}
-  <sxplr-sapiviews-core-rich-regionlistsearch
-    ${tmplRef ? '[sxplr-sapiviews-core-rich-regionlistsearch-region-template-ref]="tmplref"' : ''}
-    >
+  <sxplr-sapiviews-core-rich-regionlistsearch>
+    ${tmplRef ? ('<ng-template regionTemplate let-region>' + tmplRef + '</ng-template>') : ''}
     ${contentProjection || ''}
   </sxplr-sapiviews-core-rich-regionlistsearch>
   `
@@ -80,6 +80,9 @@ const Template: Story<SapiViewsCoreRichRegionListSearch> = (args: SapiViewsCoreR
   })
 }
 Template.loaders = []
+Template.parameters = {
+  tmplRef: `<span>{{ region.name }}</span>`
+}
 
 const asyncLoader = async (atlasId: string, parcId: string, spaceId: string) => {
   const regions = await getParcRegions(atlasId, parcId, spaceId)
@@ -97,6 +100,14 @@ const getContentProjection = ({ searchInputSuffix }) => {
 }
 
 export const Default = Template.bind({})
+Default.parameters = {
+  ...Template.parameters,
+  tmplRef: `
+<sxplr-sapiviews-core-region-region-list-item
+  [sxplr-sapiviews-core-region-region]="region">
+</sxplr-sapiviews-core-region-region-list-item>
+`
+}
 Default.loaders = [
   async () => {
     const { regions } = await asyncLoader(atlasId.human, parcId.human.jba29, spaceId.human.mni152)
@@ -112,6 +123,7 @@ InputSuffix.loaders = [
   }
 ]
 InputSuffix.parameters = {
+  ...Template.parameters,
   contentProjection: getContentProjection({
     searchInputSuffix: `SUFFIX`
   })
@@ -125,7 +137,8 @@ TemplatedRegionSuffix.loaders = [
   }
 ]
 TemplatedRegionSuffix.parameters = {
-  tmplRef: `<span [innerHTML]="region | regionTmplPipe"></span>`
+  ...Template.parameters,
+  tmplRef: `<span [innerHTML]="region | regionTmplPipe"></span><span>{{ region.name }}</span>`
 }
 
 

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearch.template.html

@@ -32,21 +32,33 @@
     *ngFor="let region of autocompleteList$ | async"
     [value]="region">
 
-    <div class="sxplr-d-flex sxplr-justify-content-space-between">
+    <ng-template [ngIf]="regionTmplDirective">
 
-      <sxplr-sapiviews-core-region-region-list-item
-        [sxplr-sapiviews-core-region-region]="region">
-      </sxplr-sapiviews-core-region-region-list-item>
-      
       <ng-template
-        [ngIf]="regionTemplateRef"
-        [ngTemplateOutlet]="regionTemplateRef"
+        [ngTemplateOutlet]="regionTmplDirective.tmplRef"
         [ngTemplateOutletContext]="{
           $implicit: region
         }">
-        
       </ng-template>
-    </div>
+    </ng-template>
 
   </mat-option>
+  <ng-template [ngIf]="searchedList$ | async" let-searchedList>
+
+    <mat-option *ngIf="searchedList.length > showNOptions"
+      [disabled]="true">
+
+      <ng-template [ngIf]="regionTmplDirective">
+
+        <ng-template
+          [ngTemplateOutlet]="regionTmplDirective.tmplRef"
+          [ngTemplateOutletContext]="{
+            $implicit: {
+              name: '... and ' + (searchedList.length - showNOptions) + ' more'
+            }
+          }">
+        </ng-template>
+      </ng-template>
+    </mat-option>
+  </ng-template>
 </mat-autocomplete>
\ No newline at end of file

src/atlasComponents/sapiViews/core/rich/regionsListSearch/regionListSearchTmpl.directive.ts

+import { Directive, TemplateRef } from "@angular/core";
+import { SapiRegionModel } from "src/atlasComponents/sapi/type";
+
+@Directive({
+  selector: 'ng-template[region-template],ng-template[regionTemplate]'
+})
+
+export class SapiViewsCoreRichRegionListTemplateDirective{
+  constructor(public tmplRef: TemplateRef<SapiRegionModel>){}
+}

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -515,28 +515,23 @@
 <ng-template #autocompleteTmpl let-showTour="showTour">
   <div class="sxplr-custom-cmp bg card ml-2 mr-2 mat-elevation-z8 pe-all auto-complete-container">
     
-    <ng-template #selectedRegionCheckTmpl let-region>
-      <ng-template #fallbackTmpl>
-        <button mat-icon-button
-          class="sxplr-mt-a sxplr-mb-a">
-          <i class="far fa-square"></i>
-        </button>
-      </ng-template>
-
-      <button *ngIf="selectedRegions$ | async | includes : region; else fallbackTmpl"
-        mat-icon-button
-        color="primary"
-        class="sxplr-mt-a sxplr-mb-a">
-        <i class="far fa-check-square"></i>
-      </button>
-    </ng-template>
-
     <sxplr-sapiviews-core-rich-regionlistsearch
       [sxplr-sapiviews-core-rich-regionlistsearch-regions]="allAvailableRegions$ | async"
       [sxplr-sapiviews-core-rich-regionlistsearch-current-search]="selectedRegions$ | async | getProperty : 0 | getProperty : 'name'"
-      [sxplr-sapiviews-core-rich-regionlistsearch-region-template-ref]="selectedRegionCheckTmpl"
       (sxplr-sapiviews-core-rich-regionlistsearch-region-select)="selectRoi($event)">
-
+      <ng-template regionTemplate let-region>
+        <div class="sxplr-d-flex">
+          <button
+            mat-icon-button
+            class="sxplr-mt-a sxplr-mb-a">
+            <i [ngClass]="(selectedRegions$ | async | includes : region) ? 'fa-circle' : 'fa-none'" class="fas"></i>
+          </button>
+
+          <sxplr-sapiviews-core-region-region-list-item
+            [sxplr-sapiviews-core-region-region]="region">
+          </sxplr-sapiviews-core-region-region-list-item>
+        </div>
+      </ng-template>
       <button mat-icon-button
         search-input-suffix
         *ngIf="selectedRegions$ | async | getProperty : 'length'"