diff --git a/docs/releases/v2.2.0.md b/docs/releases/v2.2.0.md index f3d03de7dd936261dfb493f3ce230853d3f5c734..945f3c6447c4d65681261726ac2f4fd9b4b468a1 100644 --- a/docs/releases/v2.2.0.md +++ b/docs/releases/v2.2.0.md @@ -12,6 +12,7 @@ - Fixed false positive CSP violations (#490) - Fixed `standAloneVolumes` only showing the first volume - Fixed `pluginControl.loadExternalLibraries` and `pluginControl.unloadExternalLibraries` (#516) +- Fixed Hemisphere information overflowed in region menu explore template list (#529) ## Under the hood stuff diff --git a/e2e/src/navigating/navigateFromRegion.prod.e2e-spec.js b/e2e/src/navigating/navigateFromRegion.prod.e2e-spec.js index b66aed3440a638c7bfa62bb79907ed71e3402455..480296e6e91c7aa143ffeac170f5f42776eaa700 100644 --- a/e2e/src/navigating/navigateFromRegion.prod.e2e-spec.js +++ b/e2e/src/navigating/navigateFromRegion.prod.e2e-spec.js @@ -134,12 +134,12 @@ describe('> explore same region in different templates', () => { describe('> menu UI', () => { const data = TEST_DATA[0] - + beforeEach(async () => { - await getBeforeEachFn(iavPage)(data)() }) it('> dismisses when user clicks/drags outside', async () => { + await getBeforeEachFn(iavPage)(data)() const { expectedRegion, expectedTemplateLabels, position, url, templateName } = data await iavPage.cursorMoveToAndDrag({ @@ -157,5 +157,17 @@ describe('> explore same region in different templates', () => { expect(true).toBe(true) } }) + + it('> Tooltip visible if overflowed', async () => { + const data2 = TEST_DATA[1] + await getBeforeEachFn(iavPage)(data2)() + const {expectedTemplateLabels} = data2 + const desiredTemplateButton = await expectedTemplateLabels.find(el => el.name.length > 30) + if (desiredTemplateButton) { + await iavPage.cursorMoveToElement(`[aria-label="${SHOW_IN_OTHER_REF_SPACE}: ${desiredTemplateButton.name}${desiredTemplateButton.hemisphere ? (' - ' + desiredTemplateButton.hemisphere) : ''}"]`) + const tooltipText = await iavPage.getText('mat-tooltip-component') + expect(tooltipText.trim()).toContain(desiredTemplateButton.name) + } + }) }) }) diff --git a/e2e/src/util.js b/e2e/src/util.js index 61e9d1997d7b830dae04a2a17f49a14c5d7868a4..7fb241082849c31c8d9aa413245a60a8a37ab8bd 100644 --- a/e2e/src/util.js +++ b/e2e/src/util.js @@ -220,6 +220,18 @@ class WdBase{ .perform() } + async cursorMoveToElement(cssSelector) { + if (!cssSelector) throw new Error(`cursorMoveToElement needs to define css selector`) + const el = await this._browser.findElement( By.css(cssSelector) ) + await this._driver.actions() + .move() + .move({ + origin: el, + duration: 1000 + }) + .perform() + } + async scrollElementBy(cssSelector, options) { const { delta } = options await this._browser.executeScript(() => { diff --git a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html index b1f8288bd38cc2d37b1bc20c2b8e2f44bcacc6e3..d74dd07ac79fe71001bc036b74e4c7a0a1df3480 100644 --- a/src/ui/parcellationRegion/regionMenu/regionMenu.template.html +++ b/src/ui/parcellationRegion/regionMenu/regionMenu.template.html @@ -191,9 +191,11 @@ (click)="changeView(i)" mat-ripple> <mat-icon fontSet="fas" fontIcon="fa-none" mat-list-icon></mat-icon> - <div mat-line> - <span class="overflow-x-hidden text-truncate"> {{ sameRegion.template.name }} </span> - <span *ngIf="sameRegion.hemisphere"> - {{ sameRegion.hemisphere }}</span> + <div class="cursorPointer" #exploreTemplateButton mat-line> + <span #exploreTemplateName class="overflow-x-hidden text-truncate" + [matTooltip]="sameRegion.template.name + ' ' + sameRegion.hemisphere"> + {{ sameRegion.template.name + ' ' + sameRegion.hemisphere }} + </span> </div> </mat-list-item> </div>