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