diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index 7125e8b0f63c309f2a4c985b7fedb0cce971ddd4..c03ce4ea93d2f1ab6f1954f0f75e50218462c21c 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -33,6 +33,7 @@ import { TreeComponent } from './tree/tree.component';
import { TreeBaseDirective } from './tree/treeBase.directive';
import { IAVVerticalButton } from './vButton/vButton.component';
import { DynamicMaterialBtn } from './dynamicMaterialBtn/dynamicMaterialBtn.component';
+import { SpinnerCmp } from './spinner/spinner.component';
@NgModule({
imports : [
@@ -60,6 +61,7 @@ import { DynamicMaterialBtn } from './dynamicMaterialBtn/dynamicMaterialBtn.comp
ConfirmDialogComponent,
IAVVerticalButton,
DynamicMaterialBtn,
+ SpinnerCmp,
/* directive */
HoverableBlockDirective,
@@ -94,6 +96,7 @@ import { DynamicMaterialBtn } from './dynamicMaterialBtn/dynamicMaterialBtn.comp
ConfirmDialogComponent,
IAVVerticalButton,
DynamicMaterialBtn,
+ SpinnerCmp,
SearchResultPaginationPipe,
TreeSearchPipe,
diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f35c1edde4821ee2bd340a6d33bf98034d087c4a
--- /dev/null
+++ b/src/components/spinner/spinner.component.ts
@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector: 'spinner-cmp',
+ templateUrl: './spinner.template.html'
+})
+
+export class SpinnerCmp{}
diff --git a/src/components/spinner/spinner.template.html b/src/components/spinner/spinner.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..ee3cb4a78cf02753d14a53ca12282435530bdd8a
--- /dev/null
+++ b/src/components/spinner/spinner.template.html
@@ -0,0 +1 @@
+<div class="spinnerAnimationCircle" aria-busy="true"></div>
diff --git a/src/ui/databrowserModule/databrowser.service.ts b/src/ui/databrowserModule/databrowser.service.ts
index 67ea743005e076fb9028bc676f193ac44058b6d5..8a31836a996a484a615e4aad726e124b6be23906 100644
--- a/src/ui/databrowserModule/databrowser.service.ts
+++ b/src/ui/databrowserModule/databrowser.service.ts
@@ -346,7 +346,7 @@ export class DatabrowserService implements OnDestroy {
}
export function reduceDataentry(accumulator: Array<{name: string, occurance: number}>, dataentry: IDataEntry) {
- const methods = dataentry.methods
+ const methods = (dataentry.methods || [])
.reduce((acc, item) => acc.concat(
item.length > 0
? item
diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index 0621b5e538c5e4b3f8afb84083b15331a9b2c991..7c684c6cdf0fbe4332c4488c551b4caf63c98e17 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/src/ui/databrowserModule/databrowser/databrowser.template.html
@@ -43,11 +43,9 @@
</ng-content>
<ng-template #loadingSpinner>
- <mat-card-content class="h-100">
- <div class="m-2 d-flex flex-row align-items-center justify-content star">
- <div class="d-inline-block mr-2 spinnerAnimationCircle"></div>
- <span>Fetching datasets...</span>
- </div>
+ <mat-card-content class="h-100 d-flex justify-content-start p-2">
+ <spinner-cmp class="mr-2"></spinner-cmp>
+ <span>Fetching datasets...</span>
</mat-card-content>
</ng-template>
diff --git a/src/ui/databrowserModule/preview/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html b/src/ui/databrowserModule/preview/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
index 3859c93453d7782a3affafbdf80d0cfb872a226e..5146c85cb1b26cdaf1cabc1f4f4b687edfd631e4 100644
--- a/src/ui/databrowserModule/preview/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
+++ b/src/ui/databrowserModule/preview/datasetPreviews/datasetPreviewsList/datasetPreviewList.template.html
@@ -6,7 +6,7 @@
</kg-dataset-list>
-<div *ngIf="loadingDatasetPreviewList; else datasetList" class="spinnerAnimationCircle"></div>
+<spinner-cmp *ngIf="loadingDatasetPreviewList; else datasetList"></spinner-cmp>
<ng-template #datasetList>
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
index ac830cd4fe151e232b2e4963ed661dccd5090257..d6ebc5aa1d406650a95e42f7bf40db960559b024 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
@@ -1,12 +1,9 @@
<!-- title -->
<mat-card-subtitle *ngIf="!hideTitle">
- <span *ngIf="name; else nameLoading">
+ <span *ngIf="name; else isLoadingTmpl">
{{ name }}
</span>
- <ng-template #nameLoading>
- <div class="spinnerAnimationCircle"></div>
- </ng-template>
</mat-card-subtitle>
<mat-card-content mat-dialog-content>
@@ -14,15 +11,11 @@
<!-- description -->
<small>
<markdown-dom
- *ngIf="description; else descriptionLoading"
+ *ngIf="description; else isLoadingTmpl"
class="d-block"
[markdown]="description">
</markdown-dom>
-
- <ng-template #descriptionLoading>
- <div class="d-inline-block spinnerAnimationCircle"></div>
- </ng-template>
</small>
<!-- publications -->
@@ -162,4 +155,8 @@
</iav-dynamic-mat-button>
</ng-template>
+</ng-template>
+
+<ng-template #isLoadingTmpl>
+ <spinner-cmp></spinner-cmp>
</ng-template>
\ No newline at end of file
diff --git a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
index 926b4a5d855e64afbcc5df7b3408416b6855e0f5..2e05c56499b603d95d7cc38c03bd588c9630455e 100644
--- a/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
+++ b/src/ui/databrowserModule/singleDataset/listView/singleDatasetListView.template.html
@@ -11,7 +11,7 @@
{{ name }}
</small>
<ng-template #loadingName>
- <div class="spinnerAnimationCircle"></div>
+ <spinner-cmp></spinner-cmp>
</ng-template>
</div>
diff --git a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
index ba6354fc96315db3206186e7a152d01ffee08516..0a64ef91df8cf25d0f2c594298dd7f0511078285 100644
--- a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
+++ b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
@@ -12,7 +12,7 @@
[style.backgroundColor]="'rgba(128,128,128, 0.2)'">
<mat-card-title>
<ng-content select="[region-of-interest]"></ng-content>
- <div>
+ <div *ngIf="!fetchFlag; else isLoadingTmpl">
{{ name }}
</div>
</mat-card-title>
@@ -56,20 +56,48 @@
<mat-card-content class="mt-2 ml-15px-n mr-15px-n">
<mat-accordion>
- <!-- Details -->
+ <!-- Description -->
<mat-expansion-panel hideToggle
[expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
- Details
+ Description
</mat-panel-title>
</mat-expansion-panel-header>
-
-
<ng-template matExpansionPanelContent>
- <small class="m-1">
+ <small *ngIf="!fetchFlag; else isLoadingTmpl" class="m-1">
+
+ <!-- desc -->
<markdown-dom [markdown]="description">
</markdown-dom>
+
+ <mat-divider></mat-divider>
+
+ <!-- citations -->
+ <div class="d-block mb-2 "
+ [ngClass]="{'mt-2': first}"
+ *ngFor="let publication of publications; let first = first">
+ <a *ngIf="publication.doi; else plainText"
+ iav-stop="click mousedown"
+ [href]="publication.doi | doiParserPipe"
+ target="_blank">
+ {{ publication.cite }}
+ </a>
+ <ng-template #plainText>
+ {{ publication.cite }}
+ </ng-template>
+ </div>
+
+ <!-- contributors, if publications not available -->
+ <ng-container *ngIf="publications && publications.length == 0 && contributors && contributors.length > 0">
+ <ng-container *ngFor="let contributor of contributors; let lastFlag = last;">
+ <a [href]="contributor | getContributorKgLink" class="iv-custom-comp" target="_blank">
+ {{ contributor['schema.org/shortName'] || contributor['shortName'] || contributor['name'] }}
+ </a>
+ <span *ngIf="!lastFlag">,</span>
+ </ng-container>
+ </ng-container>
+
</small>
</ng-template>
</mat-expansion-panel>
@@ -82,23 +110,33 @@
#rfGetAllFeatures="rfGetAllFeatures">
</div>
- <ng-container *ngFor="let feature of (rfGetAllFeatures.features | filterRegionFeaturesById : fullId)">
- <mat-expansion-panel hideToggle
- #matExpansionPanel>
- <mat-expansion-panel-header>
- <mat-panel-title>
- {{ feature.type }}
- </mat-panel-title>
- </mat-expansion-panel-header>
-
- <ng-template [ngIf]="matExpansionPanel.expanded">
- <feature-container
- [feature]="feature"
- [region]="region$ | async">
- </feature-container>
- </ng-template>
- </mat-expansion-panel>
- </ng-container>
+ <!-- loading tmpl -->
+ <ng-template [ngIf]="rfGetAllFeatures.isLoading$ | async" [ngIfElse]="featureTmpl">
+ <div class="d-flex justify-content-center">
+ <ng-container *ngTemplateOutlet="isLoadingTmpl"></ng-container>
+ </div>
+ </ng-template>
+
+ <!-- feature tmpl -->
+ <ng-template #featureTmpl>
+ <ng-container *ngFor="let feature of (rfGetAllFeatures.features | filterRegionFeaturesById : fullId)">
+ <mat-expansion-panel hideToggle
+ #matExpansionPanel>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{ feature.type }}
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ <ng-template [ngIf]="matExpansionPanel.expanded">
+ <feature-container
+ [feature]="feature"
+ [region]="region$ | async">
+ </feature-container>
+ </ng-template>
+ </mat-expansion-panel>
+ </ng-container>
+ </ng-template>
</mat-accordion>
</mat-card-content>
@@ -121,3 +159,6 @@
</ng-template>
</ng-template>
+<ng-template #isLoadingTmpl>
+ <spinner-cmp></spinner-cmp>
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 769f2ab231dfb056ba38112cf443bb597c6da101..956ab12378101e5faacc1e606db186e7a95c68e3 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -37,7 +37,7 @@ div.loadingIndicator
flex-direction: row-reverse;
}
-div.loadingIndicator div.spinnerAnimationCircle
+div.loadingIndicator >>> div.spinnerAnimationCircle
{
font-size:150%;
}
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 7cb435de9468301db8cb8fb32adb891d93bd7df0..8ced2dd4687ad88468f3a7e3103b4d907ae8bb1d 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -509,14 +509,26 @@
#iavDbDirective="iavDatabrowserDirective">
</div>
- <!-- place holder content, if no regional features or connectivity or change ref space options are available -->
- <ng-template [ngIf]="iavDbDirective?.dataentries?.length === 0
- && !(selectedParcellation?.hasAdditionalViewMode?.includes('connectivity'))">
- <div class="p-4">
- {{ CONST.NO_ADDIONTAL_INFO_AVAIL }}
+ <!-- if dataset is loading -->
+ <ng-template [ngIf]="iavDbDirective?.fetchingFlag" [ngIfElse]="featureLoadedTmpl">
+ <div class="d-flex justify-content-center">
+ <spinner-cmp></spinner-cmp>
</div>
</ng-template>
+ <ng-template #featureLoadedTmpl>
+
+ <!-- place holder content, if no regional features or connectivity or change ref space options are available -->
+ <ng-template [ngIf]="iavDbDirective?.dataentries?.length === 0
+ && !(selectedParcellation?.hasAdditionalViewMode?.includes('connectivity'))">
+ <div class="p-4">
+ {{ CONST.NO_ADDIONTAL_INFO_AVAIL }}
+ </div>
+ </ng-template>
+
+ </ng-template>
+
+
<ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
title: CONST.REGIONAL_FEATURES,
desc: iavDbDirective?.dataentries?.length,
@@ -576,8 +588,9 @@
[attr.id]="ID_MESH_LOADING_STATUS"
role="status">
- <div [ngClass]="{spinnerAnimationCircle: !!(showPerpsectiveScreen$ | async)}">
- </div>
+ <spinner-cmp *ngIf="showPerpsectiveScreen$ | async">
+ </spinner-cmp>
+
<mat-list>
<mat-list-item>
{{ showPerpsectiveScreen$ | async }}
@@ -595,7 +608,7 @@
<!-- mesh loading is still weird -->
<!-- if the precomputed server does not have the necessary fragment file, then the numberws will not collate -->
<div *ngIf="false && (perspectiveViewLoading$ | async)" class="loadingIndicator">
- <div class="spinnerAnimationCircle"></div>
+ <spinner-cmp></spinner-cmp>
<div *ngIf="false" perspectiveLoadingText>
{{ perspectiveViewLoading$ | async }}
@@ -642,9 +655,7 @@
</ng-container>
<div *ngIf="(sliceViewLoadingMain$ | async)[panelIndex]" class="loadingIndicator">
- <div class="spinnerAnimationCircle">
-
- </div>
+ <spinner-cmp></spinner-cmp>
</div>
</layout-floating-container>
</ng-template>
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index 0b2b70ecd19e8cd9f81fdeb51da9adb9fc1d7793..41922dbfd31ffc03218ae3c13ca87c7af726ce82 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -23,7 +23,7 @@
<ng-container *ngIf="stillLoadingAtlases$ | async as stillLoadingTemplates">
<div class="d-flex align-items-center p-4 loadingIndicator" *ngFor="let t of stillLoadingTemplates">
<h1 class="mat-h1">
- <div class="spinnerAnimationCircle"></div>
+ <spinner-cmp></spinner-cmp>
</h1>
</div>
</ng-container>
diff --git a/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/iEEGRecordings/iEEGRecordings.template.html b/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/iEEGRecordings/iEEGRecordings.template.html
index f1389020cd588b1c507aef061ef62464bb7cfcc1..64e66983c69b605a34b4a1fa918ed532cfc31fb1 100644
--- a/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/iEEGRecordings/iEEGRecordings.template.html
+++ b/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/iEEGRecordings/iEEGRecordings.template.html
@@ -49,5 +49,5 @@
<!-- loading template -->
<ng-template #loadingTmpl>
- <div class="spinnerAnimationCircle"></div>
+ <spinner-cmp></spinner-cmp>
</ng-template>
diff --git a/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/module.ts b/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/module.ts
index 6a099cad95c2c4500b8737f1a52f25e8ac12f626..ffb47e1b7916dacf843d41bf90f27fc25e8f8dc5 100644
--- a/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/module.ts
+++ b/src/ui/regionalFeatures/singleFeatures/iEEGRecordings/module.ts
@@ -1,5 +1,6 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
+import { ComponentsModule } from "src/components";
import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
import { UtilModule } from "src/util";
import { RegionalFeaturesService } from "../../regionalFeature.service";
@@ -10,6 +11,7 @@ import { IEEGRecordingsCmp } from "./iEEGRecordings/iEEGRecordings.component";
CommonModule,
UtilModule,
AngularMaterialModule,
+ ComponentsModule,
],
declarations: [
IEEGRecordingsCmp