Merge pull request #526 from HumanBrainProject/dev_show_tooltip_to_Region_menu_exploring

Show tooltip on region menu exploring templates

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
 

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)
+      }
+    })
   })
 })

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(() => {

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>