From 9c1455ccf6084adea7ef4b457c561ac6d9e63120 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 20 Nov 2020 17:34:16 +0100
Subject: [PATCH] chore: added dedicated spinner cmp bugfix: when dataentry has
not method field defined chore: added citation/contributor for side nav
dataset card chore: added spinner when loading: feature/dataset/etc
---
src/components/components.module.ts | 3 +
src/components/spinner/spinner.component.ts | 8 ++
src/components/spinner/spinner.template.html | 1 +
.../databrowserModule/databrowser.service.ts | 2 +-
.../databrowser/databrowser.template.html | 8 +-
.../datasetPreviewList.template.html | 2 +-
.../detailedView/singleDataset.template.html | 15 ++--
.../singleDatasetListView.template.html | 2 +-
.../sideNavView/sDsSideNavView.template.html | 87 ++++++++++++++-----
.../nehubaContainer/nehubaContainer.style.css | 2 +-
.../nehubaContainer.template.html | 33 ++++---
.../splashScreen/splashScreen.template.html | 2 +-
.../iEEGRecordings.template.html | 2 +-
.../singleFeatures/iEEGRecordings/module.ts | 2 +
14 files changed, 115 insertions(+), 54 deletions(-)
create mode 100644 src/components/spinner/spinner.component.ts
create mode 100644 src/components/spinner/spinner.template.html
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index 7125e8b0f..c03ce4ea9 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 000000000..f35c1edde
--- /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 000000000..ee3cb4a78
--- /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 67ea74300..8a31836a9 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 0621b5e53..7c684c6cd 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 3859c9345..5146c85cb 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 ac830cd4f..d6ebc5aa1 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 926b4a5d8..2e05c5649 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 ba6354fc9..0a64ef91d 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 769f2ab23..956ab1237 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 7cb435de9..8ced2dd46 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 0b2b70ecd..41922dbfd 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 f1389020c..64e66983c 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 6a099cad9..ffb47e1b7 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
--
GitLab