Merge pull request #751 from HumanBrainProject/chore_regionalFeatureFix

chore: cosmetic updates

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,

src/components/spinner/spinner.component.ts

+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'spinner-cmp',
+  templateUrl: './spinner.template.html'
+})
+
+export class SpinnerCmp{}

src/components/spinner/spinner.template.html

+<div class="spinnerAnimationCircle" aria-busy="true"></div>

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

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>
 

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>
 

src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html

 
 <!-- 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

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>
 

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

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%;
 }

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>

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>

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>

src/ui/regionalFeatures/singleFeatures/iEEGRecordings/module.ts

 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