diff --git a/src/atlasComponents/sapiViews/core/region/region/region.base.directive.ts b/src/atlasComponents/sapiViews/core/region/region/region.base.directive.ts
index 39c1ccc4aa4429380aeae48ded57df5e68dfd3ac..96f374b267ced1fb700333654b7e62a39a9e311a 100644
--- a/src/atlasComponents/sapiViews/core/region/region/region.base.directive.ts
+++ b/src/atlasComponents/sapiViews/core/region/region/region.base.directive.ts
@@ -2,7 +2,7 @@ import { Directive, EventEmitter, Input, OnDestroy, Output } from "@angular/core
import { SapiAtlasModel, SapiParcellationModel, SapiRegionModel, SapiSpaceModel } from "src/atlasComponents/sapi";
import { rgbToHsl } from 'common/util'
import { SAPI } from "src/atlasComponents/sapi/sapi.service";
-import { Subject } from "rxjs";
+import { BehaviorSubject, Subject } from "rxjs";
import { SAPIRegion } from "src/atlasComponents/sapi/core";
@Directive({
@@ -13,7 +13,8 @@ export class SapiViewsCoreRegionRegionBase {
@Input('sxplr-sapiviews-core-region-detail-flag')
shouldFetchDetail = false
- public fetchInProgress = false
+
+ public fetchInProgress$ = new BehaviorSubject<boolean>(false)
@Input('sxplr-sapiviews-core-region-atlas')
atlas: SapiAtlasModel
@@ -37,7 +38,7 @@ export class SapiViewsCoreRegionRegionBase {
this.setupRegionDarkmode()
return
}
- this.fetchInProgress = true
+ this.fetchInProgress$.next(true)
this._region = null
this.fetchDetail(val)
@@ -49,7 +50,7 @@ export class SapiViewsCoreRegionRegionBase {
this._region = val
})
.finally(() => {
- this.fetchInProgress = false
+ this.fetchInProgress$.next(false)
this.setupRegionDarkmode()
})
}
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
index 22ebc5640a5a7c9787f51d44e4cdfd9068558018..8884f0786d55340b4e389cd1b47ddaaec1d08f85 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
@@ -4,128 +4,129 @@
<ng-template [ngIf]="region">
-<mat-card class="mat-elevation-z4">
- <div
- [style.backgroundColor]="regionRgbString"
- class="vanishing-border"
- [ngClass]="{
- 'darktheme': regionDarkmode === true,
- 'lighttheme': regionDarkmode === false
- }">
+ <mat-card class="mat-elevation-z4">
+ <div
+ [style.backgroundColor]="regionRgbString"
+ class="vanishing-border"
+ [ngClass]="{
+ 'darktheme': regionDarkmode === true,
+ 'lighttheme': regionDarkmode === false
+ }">
- <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
-
- <mat-card-title class="sxplr-custom-cmp text">
- {{ region.name }}
- </mat-card-title>
-
-
- <!-- subtitle on what it is -->
- <mat-card-subtitle class="d-inline-flex align-items-center flex-wrap">
- <mat-icon fontSet="fas" fontIcon="fa-brain"></mat-icon>
- <span>
- Brain region
- </span>
-
- <!-- origin datas format -->
-
- <mat-divider vertical="true" class="sxplr-pl-2 h-2rem"></mat-divider>
-
- <!-- position -->
- <button mat-icon-button *ngIf="regionPosition"
- (click)="navigateTo(regionPosition)"
- [matTooltip]="ARIA_LABELS.GO_TO_REGION_CENTROID + ': ' + (regionPosition | numbers | addUnitAndJoin : 'mm')">
- <mat-icon fontSet="fas" fontIcon="fa-map-marked-alt">
- </mat-icon>
- </button>
-
- <!-- explore doi -->
- <a *ngFor="let doi of dois"
- [href]="doi | parseDoi"
- [matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
- target="_blank"
- mat-icon-button>
- <i class="fas fa-external-link-alt"></i>
- </a>
-
- </mat-card-subtitle>
-
- </div>
-</mat-card>
-
-
-<!-- kg regional features list -->
-<ng-template #kgRegionalFeatureList>
- <div sxplr-sapiviews-core-region-regional-feature
- [sxplr-sapiviews-core-region-atlas]="atlas"
- [sxplr-sapiviews-core-region-template]="template"
- [sxplr-sapiviews-core-region-parcellation]="parcellation"
- [sxplr-sapiviews-core-region-region]="region"
- #rfDir="sapiViewsRegionalFeature"
- class="feature-list-container"
- >
-
- <spinner-cmp *ngIf="rfDir.busy$ | async"></spinner-cmp>
-
- <sxplr-sapiviews-features-entry-list-item
- *ngFor="let feat of rfDir.listOfFeatures$ | async"
- [sxplr-sapiviews-features-entry-list-item-feature]="feat"
- (click)="handleRegionalFeatureClicked(feat)">
- </sxplr-sapiviews-features-entry-list-item>
- </div>
-
-</ng-template>
+ <ng-template [ngTemplateOutlet]="headerTmpl"></ng-template>
+ <mat-card-title class="sxplr-custom-cmp text">
+ {{ region.name }}
+ </mat-card-title>
+ <!-- subtitle on what it is -->
+ <mat-card-subtitle class="d-inline-flex align-items-center flex-wrap">
+ <mat-icon fontSet="fas" fontIcon="fa-brain"></mat-icon>
+ <span>
+ Brain region
+ </span>
-<mat-accordion class="d-block mt-2">
+ <!-- origin datas format -->
+
+ <mat-divider vertical="true" class="sxplr-pl-2 h-2rem"></mat-divider>
+
+ <!-- position -->
+ <button mat-icon-button *ngIf="regionPosition"
+ (click)="navigateTo(regionPosition)"
+ [matTooltip]="ARIA_LABELS.GO_TO_REGION_CENTROID + ': ' + (regionPosition | numbers | addUnitAndJoin : 'mm')">
+ <mat-icon fontSet="fas" fontIcon="fa-map-marked-alt">
+ </mat-icon>
+ </button>
+
+ <!-- explore doi -->
+ <a *ngFor="let doi of dois"
+ [href]="doi | parseDoi"
+ [matTooltip]="ARIA_LABELS.EXPLORE_DATASET_IN_KG"
+ target="_blank"
+ mat-icon-button>
+ <i class="fas fa-external-link-alt"></i>
+ </a>
+
+ </mat-card-subtitle>
+
+ </div>
+ </mat-card>
+
+
+ <!-- kg regional features list -->
+ <ng-template #kgRegionalFeatureList>
+ <div sxplr-sapiviews-core-region-regional-feature
+ [sxplr-sapiviews-core-region-atlas]="atlas"
+ [sxplr-sapiviews-core-region-template]="template"
+ [sxplr-sapiviews-core-region-parcellation]="parcellation"
+ [sxplr-sapiviews-core-region-region]="region"
+ #rfDir="sapiViewsRegionalFeature"
+ class="feature-list-container"
+ >
+
+ <spinner-cmp *ngIf="rfDir.busy$ | async"></spinner-cmp>
+
+ <sxplr-sapiviews-features-entry-list-item
+ *ngFor="let feat of rfDir.listOfFeatures$ | async"
+ [sxplr-sapiviews-features-entry-list-item-feature]="feat"
+ (click)="handleRegionalFeatureClicked(feat)">
+ </sxplr-sapiviews-features-entry-list-item>
+ </div>
+
+ </ng-template>
- <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
- title: CONST.REGIONAL_FEATURES,
- iconClass: 'fas fa-database',
- content: kgRegionalFeatureList,
- desc: '',
- iconTooltip: 'Regional Features',
- iavNgIf: true
- }">
- </ng-container>
-</mat-accordion>
-<mat-accordion class="d-block mt-2">
- <!-- connectivity -->
- <ng-template #sxplrSapiviewsFeaturesConnectivityBrowser>
- <sxplr-sapiviews-features-connectivity-browser class="pe-all flex-shrink-1"
- [region]="region"
- [types]="hasConnectivityDirective.availableModalities"
- [defaultProfile]="hasConnectivityDirective.defaultProfile"
- [sxplr-sapiviews-features-connectivity-browser-atlas]="atlas"
- [sxplr-sapiviews-features-connectivity-browser-parcellation]="parcellation"
- [accordionExpanded]="expandedPanel === CONST.CONNECTIVITY"
- >
- </sxplr-sapiviews-features-connectivity-browser>
- </ng-template>
+ <mat-accordion class="d-block mt-2">
+
+ <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
+ title: CONST.REGIONAL_FEATURES,
+ iconClass: 'fas fa-database',
+ content: kgRegionalFeatureList,
+ desc: '',
+ iconTooltip: 'Regional Features',
+ iavNgIf: true
+ }">
+ </ng-container>
+
+ </mat-accordion>
+
+ <mat-accordion class="d-block mt-2">
+
+ <!-- connectivity -->
+ <ng-template #sxplrSapiviewsFeaturesConnectivityBrowser>
+ <sxplr-sapiviews-features-connectivity-browser
+ class="pe-all flex-shrink-1"
+ [region]="region"
+ [types]="hasConnectivityDirective.availableModalities"
+ [defaultProfile]="hasConnectivityDirective.defaultProfile"
+ [sxplr-sapiviews-features-connectivity-browser-atlas]="atlas"
+ [sxplr-sapiviews-features-connectivity-browser-parcellation]="parcellation"
+ [accordionExpanded]="expandedPanel === CONST.CONNECTIVITY"
+ >
+ </sxplr-sapiviews-features-connectivity-browser>
+ </ng-template>
+
+ <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
+ title: CONST.CONNECTIVITY,
+ iconClass: 'fab fa-connectdevelop',
+ content: sxplrSapiviewsFeaturesConnectivityBrowser,
+ desc: hasConnectivityDirective.connectivityNumber,
+ iconTooltip: hasConnectivityDirective.connectivityNumber + 'Connections',
+ iavNgIf: hasConnectivityDirective.hasConnectivity
+ }">
+ </ng-container>
+
+ <div sxplr-sapiviews-features-connectivity-check
+ [sxplr-sapiviews-features-connectivity-check-atlas]="atlas"
+ [sxplr-sapiviews-features-connectivity-check-parcellation]="parcellation"
+ [region]="region"
+ #hasConnectivityDirective="hasConnectivityDirective">
+ </div>
- <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
- title: CONST.CONNECTIVITY,
- iconClass: 'fab fa-connectdevelop',
- content: sxplrSapiviewsFeaturesConnectivityBrowser,
- desc: hasConnectivityDirective.connectivityNumber,
- iconTooltip: hasConnectivityDirective.connectivityNumber + 'Connections',
- iavNgIf: hasConnectivityDirective.hasConnectivity
- }">
- </ng-container>
-
- <div sxplr-sapiviews-features-connectivity-check
- [sxplr-sapiviews-features-connectivity-check-atlas]="atlas"
- [sxplr-sapiviews-features-connectivity-check-parcellation]="parcellation"
- [region]="region"
- #hasConnectivityDirective="hasConnectivityDirective">
- </div>
-
-</mat-accordion>
+ </mat-accordion>
</ng-template>
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 519b6399029113f72c558fe7e187ed6938cc8271..2012afcff01d3121e46f30ddca9ceff8faebb46d 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -683,7 +683,7 @@
<!-- see https://github.com/HumanBrainProject/interactive-viewer/issues/698 -->
- <ng-template [ngIf]="regionDirective.fetchInProgress">
+ <ng-template [ngIf]="regionDirective.fetchInProgress$ | async">
<spinner-cmp class="sxplr-mt-10 fs-200"></spinner-cmp>
</ng-template>
<sxplr-sapiviews-core-region-region-rich