Skip to content
Snippets Groups Projects
Unverified Commit 5a4fe99b authored by xgui3783's avatar xgui3783 Committed by GitHub
Browse files

Merge pull request #309 from HumanBrainProject/feat/regionSelection 

reorganised region selectionn + save selected region(s)
parents fa6ee2be 8a1d6497
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/res/css/extra_styles.css
+ 5
− 0
View file @ 5a4fe99b
......@@ -476,3 +476,8 @@ bs-modal-backdrop.modal-backdrop
.cursorPointer {
cursor: pointer;
}
cdk-virtual-scroll-viewport > .cdk-virtual-scroll-content-wrapper
{
width: 100%;
}
\ No newline at end of file
src/ui/viewerStateController/viewerState.style.css
+ 0
− 8
View file @ 5a4fe99b
......@@ -5,14 +5,6 @@
overflow: hidden;
}
.virtual-scroll-viewport-container > cdk-virtual-scroll-viewport
{
width: 100%;
height: 100%;
box-sizing: content-box;
padding-right: 3em;
}
.virtual-scroll-row
{
width: 20em;
......
src/ui/viewerStateController/viewerState.template.html
+ 159
− 144
View file @ 5a4fe99b
<mat-card>
<!-- template selection -->
<mat-form-field>
<mat-label>
Template
</mat-label>
<mat-select
[value]="(templateSelected$ | async)?.name"
(selectionChange)="handleTemplateChange($event)"
(openedChange)="focused = $event">
<mat-option
*ngFor="let template of (availableTemplates$ | async)"
[value]="template.name">
{{ template.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- padding so that info icon lines up -->
<button mat-icon-button class="pe-none invisible"></button>
<ng-container *ngIf="templateSelected$ | async as templateSelected">
<!-- show on hover component -->
<sleight-of-hand
class="d-inline-block"
*ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front>
<button
mat-icon-button>
<i class="fas fa-info"></i>
</button>
</div>
<!-- shown on hover -->
<div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<mat-card-content class="d-inline-flex flex-nowrap">
<mat-form-field>
<mat-label>
Template
</mat-label>
<mat-select
[value]="(templateSelected$ | async)?.name"
(selectionChange)="handleTemplateChange($event)"
(openedChange)="focused = $event">
<mat-option
*ngFor="let template of (availableTemplates$ | async)"
[value]="template.name">
{{ template.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- padding so that info icon lines up -->
<button mat-icon-button class="pe-none invisible"></button>
<ng-container *ngIf="templateSelected$ | async as templateSelected">
<!-- show on hover component -->
<sleight-of-hand
class="d-inline-block"
*ngIf="templateSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front>
<button
mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
<!-- shown on hover -->
<div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
</mat-card-content>
<!-- parcellation selection -->
<mat-form-field *ngIf="templateSelected$ | async as templateSelected">
<mat-label>
Parcellation
</mat-label>
<mat-select
(selectionChange)="handleParcellationChange($event)"
[value]="(parcellationSelected$ | async)?.name"
(openedChange)="focused = $event">
<mat-option
*ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
[value]="parcellation.name">
{{ parcellation.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- selected regions -->
<region-text-search-autocomplete
[showAutoComplete]="false"
(focusedStateChanged)="focused = $event">
</region-text-search-autocomplete>
<mat-card-content class="d-inline-flex flex-nowrap">
<ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
<!-- show on hover component -->
<sleight-of-hand
class="d-inline-block"
*ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front>
<button
mat-icon-button>
<i class="fas fa-info"></i>
</button>
</div>
<!-- shown on hover -->
<div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<mat-form-field
*ngIf="templateSelected$ | async as templateSelected"
class="d-inline-flex flex-nowrap">
<mat-label>
Parcellation
</mat-label>
<mat-select
(selectionChange)="handleParcellationChange($event)"
[value]="(parcellationSelected$ | async)?.name"
(openedChange)="focused = $event">
<mat-option
*ngFor="let parcellation of (templateSelected.parcellations | appendTooltipTextPipe)"
[value]="parcellation.name">
{{ parcellation.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- selected regions -->
<region-text-search-autocomplete
[showAutoComplete]="false"
(focusedStateChanged)="focused = $event">
</region-text-search-autocomplete>
<ng-container *ngIf="parcellationSelected$ | async as parcellationSelected">
<!-- show on hover component -->
<sleight-of-hand
class="d-inline-block"
*ngIf="parcellationSelected | templateParcellationHasMoreInfoPipe as moreInfo">
<!-- shown when off -->
<div sleight-of-hand-front>
<button
mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
<!-- divider -->
<mat-divider></mat-divider>
<!-- shown on hover -->
<div class="d-flex flex-row align-items-start" sleight-of-hand-back>
<button class="flex-grow-0 flex-shrink-0" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<div class="position-relative">
<button class="position-relative invisible pe-none" mat-icon-button>
<i class="fas fa-info"></i>
</button>
<single-dataset-view
*ngFor="let originDataset of moreInfo.originDatasets"
class="position-absolute left-0 top-0 w-40em"
[name]="moreInfo.name"
[description]="moreInfo.description"
[publications]="moreInfo.publications"
[kgSchema]="originDataset && originDataset.kgSchema"
[kgId]="originDataset && originDataset.kgId">
</single-dataset-view>
</div>
</div>
</sleight-of-hand>
</ng-container>
</mat-card-content>
<!-- chips -->
<mat-card class="w-20em mh-10em overflow-auto overflow-x-hidden">
<mat-chip-list class="mat-chip-list-stacked" #selectedRegionsChipList>
<mat-chip class="w-100" *ngFor="let region of (regionsSelected$ | async)">
<span class="flex-grow-1 flex-shrink-1 text-truncate">
{{ region.name }}
</span>
<button
*ngIf="region.position"
(click)="gotoRegion($event, region)"
mat-icon-button>
<i class="fas fa-map-marked-alt"></i>
</button>
<button
(click)="deselectRegion($event, region)"
mat-icon-button>
<i class="fas fa-trash"></i>
</button>
</mat-chip>
<!-- selected regions -->
<mat-card-content>
<mat-chip-list>
<cdk-virtual-scroll-viewport
class="w-100 h-10em overflow-x-hidden"
[itemSize]="32">
<mat-chip
*cdkVirtualFor="let region of (regionsSelected$ | async)"
class="w-100">
<span class="flex-grow-1 flex-shrink-1 text-truncate">
{{ region.name }}
</span>
<button
*ngIf="region.position"
(click)="gotoRegion($event, region)"
mat-icon-button>
<i class="fas fa-map-marked-alt"></i>
</button>
<button
(click)="deselectRegion($event, region)"
mat-icon-button>
<i class="fas fa-trash"></i>
</button>
</mat-chip>
</cdk-virtual-scroll-viewport>
</mat-chip-list>
<!-- place holder when no regions has been selected -->
<span class="muted" *ngIf="(regionsSelected$ | async).length === 0">
No regions selected. Double click on any regions in the viewer, or use the search tool to select regions of interest.
</span>
</mat-card>
</mat-card-content>
<!-- control btns -->
<div class="mt-2 mb-2 d-flex justify-content-between">
<mat-card-actions class="d-flex justify-content-between">
<div class="d-flex">
<!-- save -->
<button
matTooltip="Save this selection of regions"
matTooltip="Bookmark this selection of regions"
matTooltipPosition="below"
mat-button
(click)="saveSelection($event)"
color="primary">
<i class="fas fa-save"></i>
<i class="far fa-bookmark"></i>
</button>
<!-- load -->
<button
(click)="loadSelection($event)"
matTooltip="Load a selection of regions"
matTooltip="Load a bookmarked region selection"
matTooltipPosition="below"
mat-button
color="primary"
......@@ -197,7 +208,11 @@
[disabled]="(regionsSelected$ | async)?.length === 0">
<i class="fas fa-trash"></i>
</button>
</div>
</mat-card-actions>
<mat-card-footer>
</mat-card-footer>
</mat-card>
<!-- bottom sheet for saved regions -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment