diff --git a/e2e/src/layout/layout.prod.e2e-spec.js b/e2e/src/layout/layout.prod.e2e-spec.js
index a61af6e9e2a28239cab77959ebbe801ec887c55e..e3fcfde8465be3e1cf1251d2e72d414cd2a8b831 100644
--- a/e2e/src/layout/layout.prod.e2e-spec.js
+++ b/e2e/src/layout/layout.prod.e2e-spec.js
@@ -98,3 +98,11 @@ describe('> status panel', () => {
expect(expectVisible).toEqual(true)
})
})
+
+describe('> double mat drawer', () => {
+ describe('> on user interaction', () => {
+ describe('> when user closes region chip', () => {
+ it('> mat drawers should remain closed')
+ })
+ })
+})
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 820e3bdffa8f54032efac9a9c7215f4126e4a575..8b4f9d41ea7f1688cccf8b1001e3bb8d19eff658 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -173,6 +173,7 @@
*ngIf="dismissable"
(click)="clearAdditionalLayer(parcel)"
fontSet="fas"
+ iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
@@ -201,6 +202,7 @@
class="iv-custom-comp text"
(click)="clearSelectedRegions()"
fontSet="fas"
+ iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
@@ -221,6 +223,7 @@
</span>
<mat-icon (click)="previewDirective.onClick()"
fontSet="fas"
+ iav-stop="click"
fontIcon="fa-times">
</mat-icon>
</mat-chip>
@@ -242,7 +245,8 @@
(click)="uiNehubaContainer.matDrawerMinor.open() && uiNehubaContainer.navSideDrawerMainSwitch.open()">
{{ layer.file?.name || layer.filename || 'Unknown data preview' }}
<mat-icon fontSet="fas" fontIcon="fa-times"
- (click)="preview.onClick()">
+ (click)="preview.onClick()"
+ iav-stop="click">
</mat-icon>
</mat-chip>
</ng-container>
diff --git a/src/res/ext/bigbrain.json b/src/res/ext/bigbrain.json
index 4af8e77006c9a108bebfed0e9d74ad39230a0efa..6e30f0d99168c97e203968a5fdff58780dd2264e 100644
--- a/src/res/ext/bigbrain.json
+++ b/src/res/ext/bigbrain.json
@@ -658,6 +658,7 @@
{
"@id": "juelich/iav/atlas/v1.0.0/3",
"name": "Cortical Layers Segmentation",
+ "displayName": "Cortical layers",
"ngId": "cortical layers",
"originDatasets": [
{
@@ -756,7 +757,7 @@
{
"@id": "juelich/iav/atlas/v1.0.0/4",
"name": "Grey/White matter",
- "displayName": "Isocortical/Non-isocortical structures",
+ "displayName": "Isocortex",
"type": "parcellation",
"ngData": null,
"ngId": " tissue type: ",
diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html
index f7e4daf09b8e5658f64d6d154426da0deb09e6ee..38d62308306440aeb27e9123d6616edfe99cec82 100644
--- a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html
+++ b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html
@@ -124,7 +124,7 @@
<!-- text container -->
<div class="d-flex justify-content-center">
- <small class="iv-custom-comp text ml-1 mr-1 mt-2 text-break">{{ tileSrc.displayName || tileSrc.name }}</small>
+ <small class="iv-custom-comp text ml-1 mr-1 mt-2 text-break text-center">{{ tileSrc.displayName || tileSrc.name }}</small>
</div>
</div>
</ng-template>
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.spec.ts b/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
index 7bad2e4453a1e8c9feaf24e22dd4577180b96c5c..250171ffee131e82a87a399174b5ff9db37c41e5 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.spec.ts
@@ -37,6 +37,7 @@ import { RenderViewOriginDatasetLabelPipe } from '../parcellationRegion/region.b
import { By } from '@angular/platform-browser'
import { ARIA_LABELS } from 'common/constants'
import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { RegionAccordionTooltipTextPipe } from '../util'
const {
TOGGLE_SIDE_PANEL,
@@ -96,7 +97,8 @@ describe('> nehubaContainer.component.ts', () => {
MobileControlNubStylePipe,
ReorderPanelIndexPipe,
SafeStylePipe,
- RenderViewOriginDatasetLabelPipe
+ RenderViewOriginDatasetLabelPipe,
+ RegionAccordionTooltipTextPipe,
],
providers: [
provideMockStore({ initialState: defaultRootState }),
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
index 64ab6f2c942dcd68be5d1a8549e1978e803582e4..06c46df2e627a487551a83aed8ccd32a62efade0 100644
--- a/src/ui/nehubaContainer/nehubaContainer.component.ts
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -740,7 +740,9 @@ export class NehubaContainer implements OnInit, OnChanges, OnDestroy {
/** switch side nav */
this.subscriptions.push(
- this.alwaysHideMinorPanel$.subscribe(flag => {
+ this.alwaysHideMinorPanel$.pipe(
+ distinctUntilChanged()
+ ).subscribe(flag => {
if (!flag) {
this.matDrawerMinor && this.matDrawerMinor.open()
this.navSideDrawerMainSwitch && this.navSideDrawerMainSwitch.open()
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index ef857d221260faa750454650437f1aff23993a1d..e1fc904fa03c6aeac24c39616cf1f855119df0cc 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -175,7 +175,7 @@ div#scratch-pad
.tab-toggle
{
- margin-left: -2.5rem;
+ margin-left: -2rem;
padding-right: 0.75rem;
margin-right: 1rem;
text-align: right;
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 7f2195f4a9982d5f4f9ca991860b763a4c15db2e..8492ba346724ac3590d73f3c5644943029736cf5 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -85,13 +85,13 @@
</div>
<div *ngIf="viewerLoaded" class="position-absolute z-index-6 top-0 left-0 pe-none tab-toggle-container">
- <button mat-raised-button
- [attr.aria-label]="ARIA_LABEL_TOGGLE_SIDE_PANEL"
- class="pe-all tab-toggle"
- (click)="sideNavMasterSwitch.toggle()"
- [color]="!sideNavMasterSwitch.switchState && !(alwaysHideMinorPanel$ | async) ? 'accent' : 'basic'">
- <i class="fas" [ngClass]="sideNavMasterSwitch.switchState ? 'fa-chevron-left' : 'fa-chevron-right'"></i>
- </button>
+ <ng-container *ngTemplateOutlet="tabTmpl; context: {
+ isOpen: sideNavMasterSwitch.switchState,
+ regionSelected: selectedRegions$ | async,
+ iavAdditionallayers: iavAdditionalLayers$ | async
+ }">
+
+ </ng-container>
</div>
</mat-drawer-content>
@@ -291,6 +291,7 @@
let-title="title"
let-desc="desc"
let-iconClass="iconClass"
+ let-iconTooltip="iconTooltip"
let-iavNgIf="iavNgIf"
let-content="content">
<mat-expansion-panel class="mt-1 mb-1"
@@ -305,7 +306,8 @@
</mat-panel-title>
<!-- desc + icon -->
- <mat-panel-description class="d-flex align-items-center justify-content-end">
+ <mat-panel-description class="d-flex align-items-center justify-content-end"
+ [matTooltip]="iconTooltip">
<span class="mr-3">{{ desc }}</span>
<span class="accordion-icon d-inline-flex justify-content-center">
<i [class]="iconClass"></i>
@@ -340,6 +342,7 @@
title: 'Explore in other templates',
desc: regionInOtherTemplates.length,
iconClass: 'fas fa-brain',
+ iconTooltip: regionInOtherTemplates.length | regionAccordionTooltipTextPipe : 'regionInOtherTmpl',
iavNgIf: regionInOtherTemplates.length,
content: exploreInOtherTmpl
}">
@@ -368,7 +371,8 @@
title: 'Regional features',
desc: iavDbDirective?.dataentries?.length,
iconClass: 'fas fa-database',
- iavNgIf: true,
+ iconTooltip: iavDbDirective?.dataentries?.length | regionAccordionTooltipTextPipe : 'regionalFeatures',
+ iavNgIf: iavDbDirective?.dataentries?.length,
content: regionalFeaturesTmpl
}">
</ng-container>
@@ -385,6 +389,7 @@
title: 'Connectivity',
desc: connectedCounterDir.value,
iconClass: 'fas fa-braille',
+ iconTooltip: connectedCounterDir.value | regionAccordionTooltipTextPipe : 'connectivity',
iavNgIf: selectedParcellation
&& selectedParcellation.hasAdditionalViewMode
&& selectedParcellation.hasAdditionalViewMode.includes('connectivity'),
@@ -528,3 +533,91 @@
</ng-template>
</button>
</ng-template>
+
+
+<!-- template for rendering tab -->
+<ng-template #tabTmpl
+ let-isOpen="isOpen"
+ let-regionSelected="regionSelected"
+ let-iavAdditionallayers="iavAdditionallayers">
+
+ <!-- if mat drawer is open -->
+ <ng-template [ngIf]="isOpen" [ngIfElse]="tabTmpl_closedTmpl">
+ <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
+ matColor: 'basic',
+ fontIcon: 'fa-chevron-left'
+ }">
+ </ng-container>
+ </ng-template>
+
+ <!-- if matdrawer is closed -->
+ <ng-template #tabTmpl_closedTmpl>
+
+ <!-- if additional layers are being shown -->
+ <ng-template [ngIf]="iavAdditionallayers?.length > 0" [ngIfElse]="tabTmpl_noAdditionalLayers">
+ <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
+ matColor: 'accent',
+ fontIcon: 'fa-database',
+ tooltip: 'Explore dataset preview'
+ }">
+ </ng-container>
+ </ng-template>
+
+ <!-- if additional layers not not being shown -->
+ <ng-template #tabTmpl_noAdditionalLayers>
+
+ <!-- if region selected > 0 -->
+ <ng-template [ngIf]="regionSelected?.length > 0" [ngIfElse]="tabTmpl_nothingSelected">
+ <div class="hidden"
+ iav-region
+ [region]="regionSelected[0]"
+ #tabTmpl_iavRegion="iavRegion">
+ </div>
+
+ <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
+ matColor: 'accent',
+ customColor: tabTmpl_iavRegion.rgbString,
+ customColorDarkmode: tabTmpl_iavRegion.rgbDarkmode,
+ fontIcon: 'fa-brain',
+ tooltip: 'Explore ' + tabTmpl_iavRegion.region.name
+ }">
+
+ </ng-container>
+ </ng-template>
+
+ <!-- nothing is selected -->
+ <ng-template #tabTmpl_nothingSelected>
+ <ng-container *ngTemplateOutlet="tabTmpl_defaultTmpl; context: {
+ matColor: 'primary',
+ fontIcon: 'fa-sitemap',
+ tooltip: 'Explore regions'
+ }">
+ </ng-container>
+ </ng-template>
+ </ng-template>
+ </ng-template>
+
+ <ng-template #tabTmpl_defaultTmpl
+ let-matColor="matColor"
+ let-fontIcon="fontIcon"
+ let-customColor="customColor"
+ let-customColorDarkmode="customColorDarkmode"
+ let-tooltip="tooltip">
+ <button mat-raised-button
+ [attr.aria-label]="ARIA_LABEL_TOGGLE_SIDE_PANEL"
+ [matTooltip]="tooltip"
+ class="pe-all tab-toggle"
+ [ngClass]="{
+ 'darktheme': customColorDarkmode === true,
+ 'lighttheme': customColorDarkmode === false
+ }"
+ [style.backgroundColor]="customColor"
+ (click)="sideNavMasterSwitch.toggle()"
+ [color]="(!customColor && matColor) ? matColor : null">
+
+ <span [ngClass]="{'iv-custom-comp text': !!customColor}">
+ <i class="fas" [ngClass]="fontIcon || 'fa-question'"></i>
+ </span>
+ </button>
+ </ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index a69e9f1aa92e4b8462c6411d7ccdcff9942050b5..c5a8b0e9b9e2fa909d49957107570d71013964e3 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -1,4 +1,4 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { ComponentsModule } from "src/components/components.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -87,6 +87,7 @@ import { AtlasLayerSelector } from "src/ui/atlasLayerSelector/atlasLayerSelector
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RegionDirective } from "./parcellationRegion/region.directive";
import { RenderViewOriginDatasetLabelPipe } from "./parcellationRegion/region.base";
+import { RegionAccordionTooltipTextPipe } from './util'
@NgModule({
imports : [
@@ -172,6 +173,7 @@ import { RenderViewOriginDatasetLabelPipe } from "./parcellationRegion/region.ba
HumanReadableFileSizePipe,
ReorderPanelIndexPipe,
RenderViewOriginDatasetLabelPipe,
+ RegionAccordionTooltipTextPipe,
/* directive */
DownloadDirective,
diff --git a/src/ui/util.ts b/src/ui/util.ts
new file mode 100644
index 0000000000000000000000000000000000000000..65c5f21990c6933682b4a511caa8882ea31cf805
--- /dev/null
+++ b/src/ui/util.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from "@angular/core"
+
+/**
+ * TODO find this pipe a home
+ * not too sure where this should stay
+ */
+@Pipe({
+ name: 'regionAccordionTooltipTextPipe',
+ pure: true
+})
+
+export class RegionAccordionTooltipTextPipe implements PipeTransform{
+
+ public transform(length: number, type: string): string{
+ switch (type) {
+ case 'regionInOtherTmpl': return `Region available in ${length} other reference space${length > 1 ? 's' : ''}`
+ case 'regionalFeatures': return `${length} regional feature${length > 1 ? 's' : ''} found`
+ case 'connectivity': return `${length} connections found`
+ default: return `${length} items found`
+ }
+ }
+}