diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index 7073e92f60c04685964761920c916969cee8c876..0000000000000000000000000000000000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- // Use IntelliSense to learn about possible attributes.
- // Hover to view descriptions of existing attributes.
- // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
- "version": "0.2.0",
- "configurations": [
- {
- "type": "node",
- "request": "launch",
- "name": "Launch Program",
- "program": "${workspaceFolder}/src/ui/databrowserModule/databrowser.service.ts",
- "outFiles": [
- "${workspaceFolder}/**/*.js"
- ]
- }
- ]
-}
\ No newline at end of file
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 5f736ff590d58eb9df5d126cdbd1793914432b11..8c441aab203e4b66cb812d7408381be8e30fd300 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -127,10 +127,11 @@
<ui-nehuba-container (contextmenu)="nehubaClickHandler($event)">
</ui-nehuba-container>
- <div *ngIf="!isMobile && selectedTemplate" bannerWrapper>
+ <div *ngIf="!isMobile" bannerWrapper>
<menu-icons iconWrapper>
</menu-icons>
- <signin-banner signinWrapper>
+
+ <signin-banner signinWrapper [ngStyle]="{'margin-right': !selectedTemplate? '20px': ''}">
</signin-banner>
</div>
diff --git a/src/atlasViewer/widgetUnit/widgetUnit.template.html b/src/atlasViewer/widgetUnit/widgetUnit.template.html
index a7cfd51ef1f2b839190f4cb060b3c4038ee58270..62600cf8ba9b22a3901d84fdb50517fe9ab7badf 100644
--- a/src/atlasViewer/widgetUnit/widgetUnit.template.html
+++ b/src/atlasViewer/widgetUnit/widgetUnit.template.html
@@ -25,7 +25,7 @@
*ngIf="!isMobile"
(click)="widgetServices.minimise(this)"
class="fas fa-window-minimize"
- hoverable>
+ [hoverable] ="{translateY: -1}">
</i>
<i *ngIf = "canBeDocked && state === 'floating' && !isMobile"
@@ -34,12 +34,12 @@
hoverable></i>
<i *ngIf = "state === 'docked' && !isMobile"
(click) = "undock($event)"
- class = "fas fa-window-restore"
+ class = "fas fa-window-restore"
hoverable></i>
<i *ngIf = "exitable"
(click) = "exit($event)"
class = "fas fa-times"
- hoverable></i>
+ [hoverable] ="{translateY: -1}"></i>
</div>
</div>
<div widgetUnitBody body>
diff --git a/src/components/flatTree/flatTree.component.ts b/src/components/flatTree/flatTree.component.ts
index d6002b13089f56e10b96b5b49463b4b3e7694b68..d8cd1d832244fca9882eff9ecc18889a7d9bac79 100644
--- a/src/components/flatTree/flatTree.component.ts
+++ b/src/components/flatTree/flatTree.component.ts
@@ -1,5 +1,6 @@
-import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy } from "@angular/core";
+import {EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, AfterViewChecked} from "@angular/core";
import { FlattenedTreeInterface } from "./flattener.pipe";
+import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
/**
* TODO to be replaced by virtual scrolling when ivy is in stable
@@ -14,7 +15,7 @@ import { FlattenedTreeInterface } from "./flattener.pipe";
changeDetection:ChangeDetectionStrategy.OnPush
})
-export class FlatTreeComponent{
+export class FlatTreeComponent implements AfterViewChecked {
@Input() inputItem : any = {
name : 'Untitled',
children : []
@@ -33,6 +34,10 @@ export class FlatTreeComponent{
@Input() findChildren : (item:any)=>any[] = (item)=>item.children ? item.children : []
@Input() searchFilter : (item:any)=>boolean | null = ()=>true
+ @ViewChild('flatTreeVirtualScrollViewPort') virtualScrollViewPort: CdkVirtualScrollViewport
+ @Output() totalRenderedListChanged = new EventEmitter<{ previous: number, current: number }>()
+ private totalDataLength: number = null
+
public flattenedItems : any[] = []
getClass(level:number){
@@ -42,6 +47,17 @@ export class FlatTreeComponent{
collapsedLevels: Set<string> = new Set()
uncollapsedLevels : Set<string> = new Set()
+ ngAfterViewChecked(){
+ const currentTotalDataLength = this.virtualScrollViewPort.getDataLength()
+ const previousDataLength = this.totalDataLength
+
+ this.totalRenderedListChanged.emit({
+ current: currentTotalDataLength,
+ previous: previousDataLength
+ })
+ this.totalDataLength = currentTotalDataLength
+ }
+
toggleCollapse(flattenedItem:FlattenedTreeInterface){
if (this.isCollapsed(flattenedItem)) {
this.collapsedLevels.delete(flattenedItem.lvlId)
diff --git a/src/components/flatTree/flatTree.template.html b/src/components/flatTree/flatTree.template.html
index 3dc5601046cb636f23482dbe2025df86a6c7c4c1..48ff87a252308c179c0c207b244a9cbb9009a58c 100644
--- a/src/components/flatTree/flatTree.template.html
+++ b/src/components/flatTree/flatTree.template.html
@@ -1,10 +1,11 @@
<cdk-virtual-scroll-viewport
*ngIf="!useDefaultList"
(wheel)="$event.stopPropagation()"
- itemSize="15">
+ itemSize="15"
+ #flatTreeVirtualScrollViewPort>
<div
- *cdkVirtualFor="let flattenedItem of (inputItem | flattenTreePipe : findChildren | filterRowsByVisbilityPipe : findChildren : searchFilter | appendSiblingFlagPipe | filterCollapsePipe : collapsedLevels : uncollapsedLevels : childrenExpanded )"
+ *cdkVirtualFor="let flattenedItem of (inputItem | flattenTreePipe : findChildren | filterRowsByVisbilityPipe : findChildren : searchFilter | appendSiblingFlagPipe | filterCollapsePipe : collapsedLevels : uncollapsedLevels : childrenExpanded )"
[ngClass]="getClass(flattenedItem.flattenedTreeLevel)"
class="text-nowrap"
[attr.flattenedtreelevel]="flattenedItem.flattenedTreeLevel"
diff --git a/src/res/ext/MNI152.json b/src/res/ext/MNI152.json
index 50de3d7b1eebc47657b8311afb5da0ceff441c5d..6f8834347a8cfa0df794a93c7bc84fba569e30ed 100644
--- a/src/res/ext/MNI152.json
+++ b/src/res/ext/MNI152.json
@@ -7043,7 +7043,7 @@
}
],
"properties": {
- "name": "MNI 152 ICBM 2009c Nonlinear Asymmetric",
+ "name": "ICBM 2009c Nonlinear Asymmetric",
"description": "An unbiased non-linear average of multiple subjects from the MNI152 database, which provides high-spatial resolution and signal-to-noise while not being biased towards a single brain (Fonov et al., 2011). This template space is widely used as a reference space in neuroimaging. HBP provides the JuBrain probabilistic cytoarchitectonic atlas (Amunts/Zilles, 2015) as well as a probabilistic atlas of large fibre bundles (Guevara, Mangin et al., 2017) in this space."
}
}
diff --git a/src/ui/cookieAgreement/cookieAgreement.template.html b/src/ui/cookieAgreement/cookieAgreement.template.html
index 316ca3d43c8ea1a97f94e10bfb87e02b0a98560f..d0b6acdf5d2a98b0ec64f94640507d22c283cc91 100644
--- a/src/ui/cookieAgreement/cookieAgreement.template.html
+++ b/src/ui/cookieAgreement/cookieAgreement.template.html
@@ -1,9 +1,9 @@
<div>
- <p>Interactive Viewer uses ‘cookies’ (text files placed on your computer) to verify login details,
+ <p>The HBP Atlas Viewer uses ‘cookies’ (text files placed on your computer) to verify login details,
remember user choices and preferences, and in some instances determine site permissions. Cookies also provide,
in anonymous form, the number of visitors accessing the HBP Public Website, features users access during website
visits, and the general location of the user based on IP address.</p>
- <p>Interactive Viewer uses at least the following cookies:</p>
+ <p>HBP Atlas Viewer uses at least the following cookies:</p>
<p><strong>connect.sid</strong> : verify login details</p>
<p>To find out more about cookies, including how to determine the cookies that have been set on
your computer and how to manage
@@ -23,7 +23,7 @@
<div>
<strong>Data controller(s):</strong>
<span>
- Interactive Viewer is the data controller for your login information.
+ HBP Atlas Viewer is the data controller for your login information.
</span>
</div>
diff --git a/src/ui/menuicons/menuicons.component.ts b/src/ui/menuicons/menuicons.component.ts
index 57250e2b4963c7a15b1685e7b1a5dc32a50b7199..c488a4e5253d88b9e1b5bea7a3abfa438952ac6a 100644
--- a/src/ui/menuicons/menuicons.component.ts
+++ b/src/ui/menuicons/menuicons.component.ts
@@ -8,6 +8,8 @@ import { PluginBannerUI } from "../pluginBanner/pluginBanner.component";
import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.constantService.service";
import { DatabrowserService } from "../databrowserModule/databrowser.service";
import { PluginServices } from "src/atlasViewer/atlasViewer.pluginService.service";
+import { Store, select } from "@ngrx/store";
+import { Observable } from "rxjs";
@Component({
selector: 'menu-icons',
@@ -45,13 +47,16 @@ export class MenuIconsBar{
return this.constantService.mobile
}
+ public selectedTemplate$: Observable<any>
+
constructor(
private widgetServices:WidgetServices,
private injector:Injector,
private constantService:AtlasViewerConstantsServices,
public dbService: DatabrowserService,
cfr: ComponentFactoryResolver,
- public pluginServices:PluginServices
+ public pluginServices:PluginServices,
+ store: Store<any>
){
this.dbService.createDatabrowser = this.clickSearch.bind(this)
@@ -59,6 +64,11 @@ export class MenuIconsBar{
this.dbcf = cfr.resolveComponentFactory(DataBrowser)
this.lbcf = cfr.resolveComponentFactory(LayerBrowser)
this.pbcf = cfr.resolveComponentFactory(PluginBannerUI)
+
+ this.selectedTemplate$ = store.pipe(
+ select('viewerState'),
+ select('templateSelected')
+ )
}
/**
diff --git a/src/ui/menuicons/menuicons.template.html b/src/ui/menuicons/menuicons.template.html
index 4ea766718ce041ddf963a9d880fa55462020d4e8..214281632fa62839e0a9d3d0fa0b27e10ec18cbf 100644
--- a/src/ui/menuicons/menuicons.template.html
+++ b/src/ui/menuicons/menuicons.template.html
@@ -1,93 +1,96 @@
<logo-container *ngIf="!isMobile">
</logo-container>
-<div
- *ngIf="false"
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- class="btnWrapper">
+<!-- hide icons when templates has yet been selected -->
+<ng-template [ngIf]="selectedTemplate$ | async">
<div
- [tooltip]="dataBrowserTitle"
- placement="right"
- (click)="clickSearch($event)"
- [ngClass]="databrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
- class="shadow btn btn-sm rounded-circle">
- <i class="fas fa-search">
-
- </i>
+ *ngIf="false"
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ class="btnWrapper">
+ <div
+ [tooltip]="dataBrowserTitle"
+ placement="right"
+ (click)="clickSearch($event)"
+ [ngClass]="databrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+ class="shadow btn btn-sm rounded-circle">
+ <i class="fas fa-search">
+
+ </i>
+ </div>
</div>
-</div>
-<div
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- class="btnWrapper">
<div
- tooltip="Layer"
- placement="right"
- (click)="clickLayer($event)"
- [ngClass]="layerbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
- class="shadow btn btn-sm rounded-circle">
- <i class="fas fa-layer-group">
-
- </i>
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ class="btnWrapper">
+ <div
+ tooltip="Layer"
+ placement="right"
+ (click)="clickLayer($event)"
+ [ngClass]="layerbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+ class="shadow btn btn-sm rounded-circle">
+ <i class="fas fa-layer-group">
+
+ </i>
+ </div>
</div>
-</div>
-<div
- *ngIf="false"
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- class="btnWrapper">
<div
- tooltip="Plugins"
- (click)="clickPlugins($event)"
- placement="right"
- [ngClass]="pluginbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
- class="shadow btn btn-sm rounded-circle">
- <i class="fas fa-tools">
-
- </i>
+ *ngIf="false"
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ class="btnWrapper">
+ <div
+ tooltip="Plugins"
+ (click)="clickPlugins($event)"
+ placement="right"
+ [ngClass]="pluginbrowserIsShowing ? 'btn-primary' : 'btn-secondary'"
+ class="shadow btn btn-sm rounded-circle">
+ <i class="fas fa-tools">
+
+ </i>
+ </div>
</div>
-</div>
-
-<div
- *ngFor="let manifest of pluginServices.fetchedPluginManifests"
- [tooltip]="manifest.displayName || manifest.name"
- placement="right"
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- class="btnWrapper">
<div
- (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
- [ngClass]="!pluginServices.launchedPlugins.has(manifest.name) ? 'btn-outline-secondary' : pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
- class="shadow btn btn-sm rounded-circle">
- {{ (manifest.displayName || manifest.name).slice(0, 1) }}
- </div>
-</div>
+ *ngFor="let manifest of pluginServices.fetchedPluginManifests"
+ [tooltip]="manifest.displayName || manifest.name"
+ placement="right"
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ class="btnWrapper">
-<div
- *ngFor="let manifest of pluginServices.orphanPlugins"
- [tooltip]="manifest.displayName || manifest.name"
- placement="right"
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- class="btnWrapper">
+ <div
+ (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
+ [ngClass]="!pluginServices.launchedPlugins.has(manifest.name) ? 'btn-outline-secondary' : pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
+ class="shadow btn btn-sm rounded-circle">
+ {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+ </div>
+ </div>
<div
- (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
- [ngClass]="pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
- class="shadow btn btn-sm rounded-circle">
- {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+ *ngFor="let manifest of pluginServices.orphanPlugins"
+ [tooltip]="manifest.displayName || manifest.name"
+ placement="right"
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ class="btnWrapper">
+
+ <div
+ (click)="pluginServices.launchPlugin(manifest).catch(catchError)"
+ [ngClass]="pluginServices.pluginMinimised(manifest) ? 'btn-outline-info' : 'btn-info'"
+ class="shadow btn btn-sm rounded-circle">
+ {{ (manifest.displayName || manifest.name).slice(0, 1) }}
+ </div>
</div>
-</div>
-<div
- *ngFor="let wu of dbService.instantiatedWidgetUnits"
- [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
- placement="right"
- [tooltip]="wu.title"
- class="btnWrapper">
<div
- (click)="widgetServices.minimisedWindow.delete(wu)"
- [ngClass]="widgetServices.minimisedWindow.has(wu) ? 'btn-outline-info' : 'btn-info'"
- class="shadow btn btn-sm rounded-circle">
- <i class="fas fa-search"></i>
+ *ngFor="let wu of dbService.instantiatedWidgetUnits"
+ [ngClass]="isMobile ? 'btnWrapper-lg' : ''"
+ placement="right"
+ [tooltip]="wu.title"
+ class="btnWrapper">
+ <div
+ (click)="widgetServices.minimisedWindow.delete(wu)"
+ [ngClass]="widgetServices.minimisedWindow.has(wu) ? 'btn-outline-info' : 'btn-info'"
+ class="shadow btn btn-sm rounded-circle">
+ <i class="fas fa-search"></i>
+ </div>
</div>
-</div>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
index 23f295b2ea0e74248e2ac37b796d450b8215e034..cea1195130e1a729c44170d5e47fe742595ff3c3 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
@@ -1,54 +1,12 @@
-div[splashScreenContainer]
+.appendMargin
{
- height: 100%;
- display:flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- overflow-y:auto;
+ padding-top:10em;
}
-div[splashScreenHeader] {
- min-height: 90px;
- max-height: 100px;
- width: 100%;
- background-color: #EF5450;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- color: #FFFFFF;
-}
-
-
.splashScreenHeaderTitle {
font-size: 45px;
}
-
-.splashScreenHeaderLogoContainer {
- flex: 1;
-}
-.splashScreenHeaderLogo {
- margin-left: 50px;
- width: 100px;
- height: auto;
-}
-
-.spaceForFill {
- flex: 1;
-}
-
-div[splashScreenTemplate] {
-
- width: 100%;
- margin: 20px 20px;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-
-}
-
div[splashScreenTemplateItem] {
max-width: 600px;
width: 400px;
@@ -61,27 +19,17 @@ div[splashScreenTemplateItem] {
}
div[splashScreenTemplateHeader] {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 70px;
align-self: center;
text-align: center;
font-size: 30px;
- margin: 0 0 20px 0;
+ margin: 5px 0;
}
-div[splashScreenTemplateBody] {
- display: flex;
- flex-direction: column;
-}
-
-div[splashScreenTemplateBodyDescription] {
- flex: 1;
- text-align: justify;
- margin: 0 10px 10px 10px;
-}
-div[splashScreenTemplateBodyImage] {
- flex: 1;
-}
-
.template-image {
width: 100%;
height: auto;
@@ -110,32 +58,4 @@ div[splashScreenTemplateBodyImage] {
div[splashScreenTemplateBody] {
flex-direction: column;
}
-}
-
-/*
-div[templateCardContainer]
-{
- height:100%;
- display:flex;
- flex-direction: row;
- flex-wrap:nowrap;
- align-items: center;
- overflow-x:auto;
-}
-div[templateCard]
-{
- position:relative;
- flex: 0 1 25em;
- min-width: 20em;
- width: 20em;
- max-width: 20em;
- padding: 0em 1em;
- margin : 0em 1em;
- box-sizing: border-box;
- background-color:rgb(242,242,242);
- box-shadow: 0 4px 6px 0 rgba(0,0,0,0.12);
-}
-div[templateCard]:hover
-{
- background-color:rgba(242,242,242,0.8);
-} */
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index a59505918f5c5c1b253d35af8e1bbc244e9a99fb..28ec10df8e43de608f367da127f8ee292524c48a 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -1,62 +1,20 @@
-<div splashScreenContainer>
- <div splashScreenHeader>
- <div class="splashScreenHeaderLogoContainer"><img class="splashScreenHeaderLogo " src="./res/image/HBP_Primary_RGB_WhiteText.png"> </div>
- <span class="splashScreenHeaderTitle" media="screen and (min-width: 670px)">HBP Atlas Viewer</span>
- <div class="spaceForFill">
- <signin-banner *ngIf="!isMobile">
- </signin-banner>
- </div>
- </div>
- <div splashScreenTemplate>
+<div [ngClass]="isMobile ? '' : 'appendMargin'" class="h-100 d-flex flex-column justify-content-start align-items-center overflow-auto">
+
+ <div class="d-flex w-100 flex-wrap justify-content-center">
<div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
<div class="template-card" (click) = "selectTemplate(template)">
-
<div splashScreenTemplateHeader>
{{template.properties.name}}
</div>
- <div splashScreenTemplateBody>
- <div splashScreenTemplateBodyImage>
+ <div class="d-flex flex-column">
+ <div class="flex-grow-1">
<img class="template-image" [src]="'./res/image/' + correctString(template.properties.name) + '.png'">
</div>
- <div splashScreenTemplateBodyDescription>
+ <div class="flex-grow-1 text-justify ml-2 mr-2 mb-2 mt-0">
{{template.properties.description}}
</div>
</div>
-
</div>
</div>
-
- </div>
-</div>
-
-
-
-<!--
-<div class = "container-fluid" splashScreenContainer>
- <div
- class = "row"
- templateCardContainer>
-
- <div
- *ngFor = "let template of loadedTemplate$ | async | filterNull"
- (click) = "selectTemplate(template)"
- templateCard
- hoverable>
-
- <h2>{{ template.properties.name }}</h2>
- <readmore-component>
- <small>{{ template.properties.description }}</small>
- </readmore-component>
- </div>
- <div *ngIf = "(loadedTemplate$ | async).length < totalTemplates">
- <h1 style = "text-align:center;">
- <small>
- Loading Templates
- </small>
- <span class = "homeAnimationDots loadingAnimationDots">•</span>
- <span class = "homeAnimationDots loadingAnimationDots">•</span>
- <span class = "homeAnimationDots loadingAnimationDots">•</span>
- </h1>
- </div>
</div>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/ui/regionHierachy/regionHierarchy.component.ts b/src/ui/regionHierachy/regionHierarchy.component.ts
index f04dc7b1b501c71e5b5cc48ce5181cab4275e896..f8b4fd35dba949a3b4fc7620ad67309a41f0f7c4 100644
--- a/src/ui/regionHierachy/regionHierarchy.component.ts
+++ b/src/ui/regionHierachy/regionHierarchy.component.ts
@@ -62,12 +62,25 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
@ViewChild('searchTermInput', {read: ElementRef})
private searchTermInput: ElementRef
+ /**
+ * set the height to max, bound by max-height
+ */
+ numTotalRenderedRegions: number = 999
+ windowHeight: number
+
@HostListener('document:click', ['$event'])
closeRegion(event: MouseEvent) {
const contains = this.el.nativeElement.contains(event.target)
this.showRegionTree = contains
- if (!this.showRegionTree)
+ if (!this.showRegionTree){
this.searchTerm = ''
+ this.numTotalRenderedRegions = 999
+ }
+ }
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.windowHeight = event.target.innerHeight;
}
get regionsLabelIndexMap() {
@@ -78,7 +91,7 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
private cdr:ChangeDetectorRef,
private el:ElementRef
){
-
+ this.windowHeight = window.innerHeight;
}
ngOnChanges(){
@@ -157,6 +170,18 @@ export class RegionHierarchy implements OnInit, AfterViewInit{
}
+ handleTotalRenderedListChanged(changeEvent: {previous: number, current: number}){
+ const { current } = changeEvent
+ this.numTotalRenderedRegions = current
+ }
+
+ regionHierarchyHeight(){
+ return({
+ 'height' : (this.numTotalRenderedRegions * 15 + 60).toString() + 'px',
+ 'max-height': (this.windowHeight - 100) + 'px'
+ })
+ }
+
focusInput(event?:MouseEvent){
if (event) {
/**
diff --git a/src/ui/regionHierachy/regionHierarchy.template.html b/src/ui/regionHierachy/regionHierarchy.template.html
index 36ab15e5278d6327517df36f71e137fc96c18f33..91d9f552cb194227a8e4462ed6e9b82868e3f40c 100644
--- a/src/ui/regionHierachy/regionHierarchy.template.html
+++ b/src/ui/regionHierachy/regionHierarchy.template.html
@@ -17,6 +17,7 @@
hideScrollbarContainer>
<div
+ [ngStyle]="regionHierarchyHeight()"
class="d-flex flex-column"
treeContainer
#treeContainer>
@@ -37,6 +38,7 @@
class="tree-body">
<flat-tree-component
(treeNodeClick)="handleClickRegion($event)"
+ (totalRenderedListChanged)="handleTotalRenderedListChanged($event)"
[inputItem]="aggregatedRegionTree"
[renderNode]="displayTreeNode"
[searchFilter]="filterTreeBySearch">
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index 01000c0db06f00e056198a820bcde53ddc3397b0..66e68ffef875a91c176bbecaeae45b00c2e3acb5 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -3,7 +3,6 @@
[ngClass]="{ 'flex-column w-100 align-items-stretch' : isMobile}" >
<dropdown-component
- *ngIf="selectedTemplate || isMobile"
(itemSelected)="changeTemplate($event)"
[activeDisplay]="displayActiveTemplate"
[selectedItem]="selectedTemplate$ | async"
@@ -43,7 +42,7 @@
<!-- help btn -->
<div class="btnWrapper">
<div
- *ngIf="!isMobile && selectedTemplate"
+ *ngIf="!isMobile"
(click)="showHelp()"
class="btn btn-outline-secondary btn-sm rounded-circle login-icon">
<i class="fas fa-question-circle"></i>
@@ -55,7 +54,7 @@
<div class="btnWrapper">
<div
- *ngIf="!isMobile && selectedTemplate"
+ *ngIf="!isMobile"
(click)="showSignin()"
class="btn btn-outline-secondary btn-sm rounded-circle login-icon">
<i