From a57eca6afddada39b1e838e0862789b77db662c6 Mon Sep 17 00:00:00 2001
From: xgui3783 <xgui3783@gmail.com>
Date: Fri, 24 Jul 2020 11:40:49 +0200
Subject: [PATCH] bugfix: restore mat chip for origin ds (#615)
feat: allow regional features list to be toggled
chore: prettify header banner
feat: show dataset card in iav preview
---
src/atlasViewer/atlasViewer.template.html | 18 +++++++
.../databrowser/databrowser.component.ts | 3 ++
.../databrowser/databrowser.template.html | 35 +++++++++++--
.../preview/previewCard/previewCard.style.css | 2 +-
.../previewCard/previewCard.template.html | 13 ++++-
.../detailedView/singleDataset.component.ts | 10 +++-
.../detailedView/singleDataset.template.html | 46 +++++++++--------
.../nehubaContainer.template.html | 1 +
.../regionMenu/regionMenu.style.css | 2 +-
.../regionMenu/regionMenu.template.html | 50 -------------------
10 files changed, 100 insertions(+), 80 deletions(-)
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 110948e12..f24bb3336 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -205,6 +205,24 @@
</mat-icon>
</mat-chip>
+ <!-- chips for previewing origin datasets -->
+ <ng-container *ngFor="let originDataset of (r.originDatasets || []); let index = index">
+ <div class="hidden"
+ iav-dataset-preview-dataset-file
+ [iav-dataset-preview-dataset-file-kgid]="originDataset.kgId"
+ [iav-dataset-preview-dataset-file-filename]="originDataset.filename"
+ #previewDirective="iavDatasetPreviewDatasetFile">
+ </div>
+ <mat-chip *ngIf="previewDirective.active"
+ (click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()"
+ class="pe-all">
+ {{ regionDirective.regionOriginDatasetLabels$ | async | renderViewOriginDatasetlabel : index }}
+ <mat-icon (click)="previewDirective.onClick()"
+ fontSet="fas"
+ fontIcon="fa-times">
+ </mat-icon>
+ </mat-chip>
+ </ng-container>
</ng-container>
</ng-template>
diff --git a/src/ui/databrowserModule/databrowser/databrowser.component.ts b/src/ui/databrowserModule/databrowser/databrowser.component.ts
index 0227d9092..7a257e749 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.component.ts
+++ b/src/ui/databrowserModule/databrowser/databrowser.component.ts
@@ -20,6 +20,9 @@ const { MODALITY_FILTER, LIST_OF_DATASETS } = ARIA_LABELS
export class DataBrowser implements OnChanges, OnDestroy, OnInit {
+ @Input()
+ disableVirtualScroll: boolean = false
+
@Input()
showList: boolean = true
diff --git a/src/ui/databrowserModule/databrowser/databrowser.template.html b/src/ui/databrowserModule/databrowser/databrowser.template.html
index e25aeee63..f6982a35a 100644
--- a/src/ui/databrowserModule/databrowser/databrowser.template.html
+++ b/src/ui/databrowserModule/databrowser/databrowser.template.html
@@ -30,8 +30,11 @@
<!-- if not error, show dataset template -->
<ng-template [ngIf]="!fetchError">
- <ng-container *ngTemplateOutlet="datasetTemplate">
- </ng-container>
+ <ng-template [ngTemplateOutlet]="datasetListTmpl"
+ [ngIf]="disableVirtualScroll"
+ [ngIfElse]="datasetVirtualScrollTmpl">
+
+ </ng-template>
</ng-template>
</ng-template>
@@ -56,7 +59,7 @@
</mat-card-content>
</ng-template>
-<ng-template #datasetTemplate>
+<ng-template #datasetVirtualScrollTmpl>
<!-- datawrapper -->
<ng-container *ngIf="dataentries | filterDataEntriesByMethods : visibleCountedDataM as filteredDataEntry">
@@ -90,6 +93,32 @@
</ng-container>
</ng-template>
+<ng-template #datasetListTmpl>
+
+ <ng-container *ngIf="dataentries | filterDataEntriesByMethods : visibleCountedDataM as filteredDataEntry">
+ <mat-card-content class="w-100">
+ <!-- TODO export aria labels to common/constants -->
+ <div *ngIf="showList">
+ <div *ngFor="let dataset of filteredDataEntry; trackBy: trackByFn; templateCacheSize: 20; let index = index"
+ class="scroll-element overflow-hidden">
+
+ <mat-divider *ngIf="index !== 0"></mat-divider>
+
+ <single-dataset-list-view
+ class="d-block pt-1 pb-1 h-100"
+ [kgSchema]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[0]"
+ [kgId]="(dataset.fullId | getKgSchemaIdFromFullIdPipe)[1]"
+ [dataset]="dataset"
+ [ripple]="true">
+
+ </single-dataset-list-view>
+
+ </div>
+ </div>
+ </mat-card-content>
+ </ng-container>
+</ng-template>
+
<!-- modality picker / filter -->
<ng-template #modalitySelector>
<mat-accordion class="flex-grow-0 flex-shrink-0">
diff --git a/src/ui/databrowserModule/preview/previewCard/previewCard.style.css b/src/ui/databrowserModule/preview/previewCard/previewCard.style.css
index 9c44ae66d..8d0266fe7 100644
--- a/src/ui/databrowserModule/preview/previewCard/previewCard.style.css
+++ b/src/ui/databrowserModule/preview/previewCard/previewCard.style.css
@@ -1,6 +1,6 @@
.header-container
{
padding: 16px;
- margin: -16px -16px 0 -16px;
+ margin: -16px!important;
padding-top: 6rem;
}
diff --git a/src/ui/databrowserModule/preview/previewCard/previewCard.template.html b/src/ui/databrowserModule/preview/previewCard/previewCard.template.html
index 7b027786b..82a521b2c 100644
--- a/src/ui/databrowserModule/preview/previewCard/previewCard.template.html
+++ b/src/ui/databrowserModule/preview/previewCard/previewCard.template.html
@@ -1,18 +1,27 @@
<mat-card class="mat-elevation-z4">
<div class="header-container">
<mat-card-title>
- {{ file.name || filename }}
+ {{ singleDsView?.name || file.name || filename }}
</mat-card-title>
<mat-card-subtitle>
<mat-icon fontSet="fas" fontIcon="fa-database"></mat-icon>
<span>
- Previewing data
+ Dataset preview
</span>
</mat-card-subtitle>
</div>
</mat-card>
+<mat-card class="mt-4">
+ <single-dataset-view [fullId]="datasetId"
+ [hideTitle]="true"
+ [hidePreview]="true"
+ #singleDsView="singleDatasetView">
+
+ </single-dataset-view>
+</mat-card>
+
<div class="mt-4">
<layer-browser></layer-browser>
</div>
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
index e5ee2a4ae..338eca132 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Inject, Optional} from "@angular/core";
+import { ChangeDetectorRef, Component, Inject, Optional, Input} from "@angular/core";
import {
DatabrowserService,
KgSingleDatasetService,
@@ -12,7 +12,8 @@ import { MatSnackBar } from "@angular/material/snack-bar";
templateUrl: './singleDataset.template.html',
styleUrls: [
`./singleDataset.style.css`,
- ]
+ ],
+ exportAs: 'singleDatasetView'
})
export class SingleDatasetView extends SingleDatasetBase {
@@ -26,5 +27,10 @@ export class SingleDatasetView extends SingleDatasetBase {
) {
super(dbService, singleDatasetService, cdr,snackbar, data)
}
+
+ @Input()
+ hideTitle = false
+ @Input()
+ hidePreview = false
}
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
index c0e0b370f..5113d07d4 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
@@ -1,6 +1,6 @@
<!-- title -->
-<mat-card-subtitle>
+<mat-card-subtitle *ngIf="!hideTitle">
<span *ngIf="name; else nameLoading">
{{ name }}
</span>
@@ -130,26 +130,30 @@
<!-- check if has preview -->
- <kg-dataset-list
- class="d-none"
- [backendUrl]="DS_PREVIEW_URL"
- *ngIf="kgId"
- (kgDsPrvUpdated)="handleKgDsPrvUpdate($event)"
- [kgId]="kgId">
-
- </kg-dataset-list>
- <iav-dynamic-mat-button
- *ngIf="hasPreview"
- mat-dialog-close
- [iav-dynamic-mat-button-style]="mediaBreakPoint < 2 ? 'mat-button' : 'mat-icon-button'"
- [iav-dynamic-mat-button-aria-label]="SHOW_DATASET_PREVIEW_ARIA_LABEL"
- (click)="showPreviewList(previewFilesListTemplate)">
-
- <span *ngIf="mediaBreakPoint < 2">
- Preview
- </span>
- <i class="ml-1 far fa-eye"></i>
- </iav-dynamic-mat-button>
+ <ng-template [ngIf]="!hidePreview">
+
+ <kg-dataset-list
+ class="d-none"
+ [backendUrl]="DS_PREVIEW_URL"
+ *ngIf="kgId"
+ (kgDsPrvUpdated)="handleKgDsPrvUpdate($event)"
+ [kgId]="kgId">
+
+ </kg-dataset-list>
+
+ <iav-dynamic-mat-button
+ *ngIf="hasPreview"
+ mat-dialog-close
+ [iav-dynamic-mat-button-style]="mediaBreakPoint < 2 ? 'mat-button' : 'mat-icon-button'"
+ [iav-dynamic-mat-button-aria-label]="SHOW_DATASET_PREVIEW_ARIA_LABEL"
+ (click)="showPreviewList(previewFilesListTemplate)">
+
+ <span *ngIf="mediaBreakPoint < 2">
+ Preview
+ </span>
+ <i class="ml-1 far fa-eye"></i>
+ </iav-dynamic-mat-button>
+ </ng-template>
</ng-template>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 8b8cba135..6e46e1ee9 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -353,6 +353,7 @@
<ng-template #regionalFeaturesTmpl>
<data-browser [template]="templateSelected$ | async"
[parcellation]="selectedParcellation"
+ [disableVirtualScroll]="true"
[regions]="[region]">
</data-browser>
</ng-template>
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.style.css b/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
index 7cccfc149..ee2db754e 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.style.css
@@ -24,6 +24,6 @@ mat-icon
.header-container
{
padding: 16px;
- margin: -16px -16px 0 -16px;
+ margin: -16px!important;
padding-top: 6rem;
}
diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
index a98832690..7cbfc972b 100644
--- a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
+++ b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html
@@ -53,56 +53,6 @@
</button>
</mat-card-subtitle>
</div>
-
- <mat-card-content>
- <mat-divider></mat-divider>
-
- <!-- region desc -->
- <ng-container *ngIf="region?.description?.length > 0">
- <mat-divider></mat-divider>
- <div>
- {{ region.description }}
- </div>
- </ng-container>
-
- <mat-divider></mat-divider>
-
- <mat-list class="action-list sm cursor-default">
-
- <!-- connectivity -->
- <div *ngIf="hasConnectivity" iav-switch #connectivitySwitch="iavSwitch">
-
- <mat-list-item mat-ripple
- (click)="connectivitySwitch.toggle()"
- [attr.aria-label]="SHOW_CONNECTIVITY_DATA">
- <mat-icon fontSet="fab" fontIcon="fa-connectdevelop" mat-list-icon></mat-icon >
- <div mat-line>
- <span>
- Connectivity
- </span>
- <span class="muted">
- ({{ 1 }})
- </span>
- </div>
- <mat-icon fontSet="fas" [fontIcon]="connectivitySwitch.switchState ? 'fa-chevron-up' : 'fa-chevron-down'"></mat-icon>
- </mat-list-item>
-
- <!-- connectivity -->
- <mat-list-item *ngIf="connectivitySwitch.switchState" mat-ripple (click)="showConnectivity(region.name)">
- <mat-icon fontSet="fas" fontIcon="fa-none" mat-list-icon></mat-icon>
- <div mat-line>1000 Brain Study - DTI connectivity</div>
- </mat-list-item>
-
- </div>
-
- <!-- change template -->
- <ng-container *ngIf="showRegionInOtherTmpl">
- <ng-container *ngTemplateOutlet="regionInOtherTemplatesTmpl; context: { regionInOtherTemplates: regionInOtherTemplates$ | async }">
- </ng-container>
- </ng-container>
-
- </mat-list>
- </mat-card-content>
</mat-card>
<!-- ToDo make dynamic with AVAILABLE CONNECTIVITY DATASETS data - get info from atlas viewer core -->
--
GitLab