diff --git a/docs/advanced/otherVolumes.md b/docs/advanced/otherVolumes.md
index 36a8254bbc8bdcc8deec3253cc2748aa989c9fd8..b38f05425259ccdfd47e1f2e43086ec9055aa8a4 100644
--- a/docs/advanced/otherVolumes.md
+++ b/docs/advanced/otherVolumes.md
@@ -1,7 +1,7 @@
# Displaying non-atlas volumes
!!! warning
- This section is still been developed, and the content/API may change in future versions.
+ This section is still been developed, and the content/API may change in future versions.
Interactive atlas can allow for arbitary volumes to be viewed, either in the context of a reference template or without.
diff --git a/e2e/src/advanced/nonAtlasImages.e2e-spec.js b/e2e/src/advanced/nonAtlasImages.e2e-spec.js
index b88b2c624cef57493400f48c02e5e1a7bc85c1ed..d50b98b6908f8679940ac7bf7e240eee0a886feb 100644
--- a/e2e/src/advanced/nonAtlasImages.e2e-spec.js
+++ b/e2e/src/advanced/nonAtlasImages.e2e-spec.js
@@ -10,7 +10,7 @@ describe('> non-atlas images', () => {
describe('> standalone volumes', () => {
// TODO investigates why it occassionally fails
- it('> loads standalone volumes when set', async () => {
+ it('> loads standalone volumes when set (fails sometimes. Just rerun if it does.)', async () => {
const searchParam = new URLSearchParams()
searchParam.set('standaloneVolumes', '["precomputed://https://object.cscs.ch/v1/AUTH_08c08f9f119744cbbf77e216988da3eb/imgsvc-46d9d64f-bdac-418e-a41b-b7f805068c64"]')
await iavPage.goto(`/?${searchParam.toString()}`, { interceptHttp: true, doNotAutomate: true })
@@ -144,4 +144,82 @@ describe('> non-atlas images', () => {
)
})
})
+
+ describe('> controls for non atlas volumes', () => {
+ it('if no additional volume is being shown, additional volume control is not visible', async () => {
+ const searchParam = new URLSearchParams()
+ searchParam.set('templateSelected', 'MNI Colin 27')
+ searchParam.set('parcellationSelected', 'JuBrain Cytoarchitectonic Atlas')
+
+ const previewingDatasetFiles = [
+ {
+ "datasetId":"minds/core/dataset/v1.0.0/b08a7dbc-7c75-4ce7-905b-690b2b1e8957",
+ "filename":"Overlay of data modalities"
+ }
+ ]
+ searchParam.set('previewingDatasetFiles', JSON.stringify(previewingDatasetFiles))
+
+ await iavPage.goto(`/?${searchParam.toString()}`)
+ await iavPage.wait(2000)
+
+ const additionalLayerControlIsShown = await iavPage.additionalLayerControlIsVisible()
+
+ expect(additionalLayerControlIsShown).toEqual(false)
+
+ })
+
+ it('if additonal volumes are being shown, additional volume control is visible', async () => {
+
+ const searchParam = new URLSearchParams()
+ searchParam.set('templateSelected', 'Big Brain (Histology)')
+ searchParam.set('parcellationSelected', 'Grey/White matter')
+
+ const previewingDatasetFiles = [
+ {
+ "datasetId":"minds/core/dataset/v1.0.0/b08a7dbc-7c75-4ce7-905b-690b2b1e8957",
+ "filename":"Overlay of data modalities"
+ }
+ ]
+ searchParam.set('previewingDatasetFiles', JSON.stringify(previewingDatasetFiles))
+
+ await iavPage.goto(`/?${searchParam.toString()}`)
+ await iavPage.wait(2000)
+
+ const additionalLayerCtrlIsVisible = await iavPage.additionalLayerControlIsVisible()
+ expect(additionalLayerCtrlIsVisible).toEqual(true)
+
+ })
+
+ it('if additional volumes are being shown, it can be toggled', async () => {
+
+ const searchParam = new URLSearchParams()
+ searchParam.set('templateSelected', 'Big Brain (Histology)')
+ searchParam.set('parcellationSelected', 'Grey/White matter')
+
+ const previewingDatasetFiles = [
+ {
+ "datasetId":"minds/core/dataset/v1.0.0/b08a7dbc-7c75-4ce7-905b-690b2b1e8957",
+ "filename":"Overlay of data modalities"
+ }
+ ]
+ searchParam.set('previewingDatasetFiles', JSON.stringify(previewingDatasetFiles))
+
+ await iavPage.goto(`/?${searchParam.toString()}`)
+ await iavPage.wait(2000)
+
+ const additionalLayerCtrlIsExpanded = await iavPage.additionalLayerControlIsExpanded()
+ expect(additionalLayerCtrlIsExpanded).toEqual(true)
+
+ await iavPage.toggleLayerControl()
+
+ const additionalLayerCtrlIsExpanded2 = await iavPage.additionalLayerControlIsExpanded()
+ expect(additionalLayerCtrlIsExpanded2).toEqual(false)
+
+ await iavPage.toggleLayerControl()
+
+ const additionalLayerCtrlIsExpanded3 = await iavPage.additionalLayerControlIsExpanded()
+ expect(additionalLayerCtrlIsExpanded3).toEqual(true)
+
+ })
+ })
})
diff --git a/e2e/src/util.js b/e2e/src/util.js
index f79d341a931755b53dd5e4413dc32b21bed30797..281cdcfe5101dc744c1f2a4e1761024f9ad8a40e 100644
--- a/e2e/src/util.js
+++ b/e2e/src/util.js
@@ -241,6 +241,38 @@ class WdLayoutPage extends WdBase{
return text
}
+
+ _getAdditionalLayerControl(){
+ return this._browser.findElement(
+ By.css('[aria-label="Additional volumes control"]')
+ )
+ }
+
+ async additionalLayerControlIsVisible(){
+ try {
+ return await this._getAdditionalLayerControl().isDisplayed()
+ } catch (e) {
+ return false
+ }
+ }
+
+ // will throw if additional layer contorl is not visible
+ additionalLayerControlIsExpanded() {
+ return this._getAdditionalLayerControl()
+ .findElement(
+ By.tagName('layer-browser')
+ )
+ .isDisplayed()
+ }
+
+ // will throw if additional layer contorl is not visible
+ async toggleLayerControl(){
+ return this._getAdditionalLayerControl()
+ .findElement(
+ By.css('[aria-label="Toggle expansion state of additional layer browser"]')
+ )
+ .click()
+ }
}
class WdIavPage extends WdLayoutPage{
diff --git a/src/services/effect/newTemplate.effect.ts b/src/services/effect/newTemplate.effect.ts
index 102ac244379ba37e9a10bb51205d400bd594f224..d6b68b5d1c3b15fa0877054c1e4cae31ca99024f 100644
--- a/src/services/effect/newTemplate.effect.ts
+++ b/src/services/effect/newTemplate.effect.ts
@@ -19,7 +19,6 @@ export class NewTemplateUseEffect{
){
this.onNewTemplateShouldClearPreviewDataset$ = this.actions$.pipe(
ofType(NEWVIEWER),
- tap(() => console.log(`new`)),
mapTo({
type: DATASETS_ACTIONS_TYPES.CLEAR_PREVIEW_DATASETS
})
diff --git a/src/ui/searchSideNav/searchSideNav.component.ts b/src/ui/searchSideNav/searchSideNav.component.ts
index 1bb7ce4a6977e6b36777534089b978d486cf6e2a..f514928bd44411a8519b740fc31c13f9b83e7fbf 100644
--- a/src/ui/searchSideNav/searchSideNav.component.ts
+++ b/src/ui/searchSideNav/searchSideNav.component.ts
@@ -26,6 +26,8 @@ import { MatSnackBar } from "@angular/material/snack-bar";
export class SearchSideNav implements OnDestroy {
public availableDatasets: number = 0
+ public showLayerBrowser: boolean = true
+
private subscriptions: Subscription[] = []
private layerBrowserDialogRef: MatDialogRef<any>
@@ -100,10 +102,11 @@ export class SearchSideNav implements OnDestroy {
type: CLOSE_SIDE_PANEL,
})
- const dialogToOpen = this.layerBrowserTmpl || LayerBrowser
+ const dialogToOpen = this.layerBrowserTmpl
this.layerBrowserDialogRef = this.dialog.open(dialogToOpen, {
hasBackdrop: false,
autoFocus: false,
+ ariaLabel: 'Additional volumes control',
panelClass: [
'layerBrowserContainer',
],
diff --git a/src/ui/searchSideNav/searchSideNav.style.css b/src/ui/searchSideNav/searchSideNav.style.css
index 40287116012a17025cc03415606ed3a3b6fcaaf6..5d1650ffca031ccf13067a3551d4b9b233547f10 100644
--- a/src/ui/searchSideNav/searchSideNav.style.css
+++ b/src/ui/searchSideNav/searchSideNav.style.css
@@ -23,3 +23,8 @@ connectivity-browser {
{
min-height: 50vh!important;
}
+
+.layerBrowserToggleBtn[toggle-open="true"]
+{
+ transform: translateY(-50%);
+}
diff --git a/src/ui/searchSideNav/searchSideNav.template.html b/src/ui/searchSideNav/searchSideNav.template.html
index 4628d6bc8f7dd13b89f69735457446f30f796d88..765869826cba77a7218f5404a6656d6a4c3ae56f 100644
--- a/src/ui/searchSideNav/searchSideNav.template.html
+++ b/src/ui/searchSideNav/searchSideNav.template.html
@@ -75,10 +75,25 @@
</div>
<ng-template #layerBrowserTmpl>
- <mat-dialog-content>
- <layer-browser></layer-browser>
+ <mat-dialog-content [hidden]="!showLayerBrowser">
+ <div class="d-flex flex-column">
+ <layer-browser></layer-browser>
+ </div>
</mat-dialog-content>
-</ng-template>
+
+ <div class="d-flex justify-content-center position-static h-0 mt-4">
+ <button mat-mini-fab
+ aria-label="Toggle expansion state of additional layer browser"
+ [matBadge]="showLayerBrowser ? null : (layerBrowser.nonBaseNgLayers$ | async).length"
+ class="position-absolute layerBrowserToggleBtn"
+ matTooltip="Toggle the visiblity of the additional layer browser"
+ [attr.toggle-open]="showLayerBrowser"
+ (click)="showLayerBrowser = !showLayerBrowser">
+ <i class="fas" [ngClass]="{'fa-chevron-down': !showLayerBrowser, 'fa-chevron-up': showLayerBrowser}">
+ </i>
+ </button>
+ </div>
+</ng-template>
<!-- selected regions container -->
<ng-template #selectedRegionsTmpl>