fix: LSDV-4542: Hiding an audio segment and select a segment below no longer works (#1213)

Co-authored-by: Julio Sgarbi <[email protected]>

Author: bmartel

Diff for: e2e/fragments/AtSidebar.js

@@ -5,6 +5,8 @@ module.exports = {
   _regionGroupButton: locate('.lsf-radio-group__button'),
   _regionsCounterLocator: locate('.lsf-entities__counter'),
   _regionLocator: locate('.lsf-region-item'),
+  _regionSelectedLocator: locate('[data-testid="regionitem:selected=true"]'),
+  _regionUnselectedLocator: locate('[data-testid="regionitem:selected=false"]'),
   _selectedRegionsLocator: locate('.lsf-entity'),
   seeRegions(count) {
     if (count) {
@@ -29,8 +31,12 @@ module.exports = {
   dontSeeRelations() {
     I.dontSee('Relations', this._sideBarLocator);
   },
-  seeSelectedRegion() {
-    I.seeElement(this._selectedRegionsLocator);
+  seeSelectedRegion(text = undefined) {
+    if (text) {
+      I.seeElement(this._regionSelectedLocator.withText(text));
+    } else {
+      I.seeElement(this._selectedRegionsLocator);
+    }
   },
   dontSeeSelectedRegion() {
     I.dontSeeElement(this._selectedRegionsLocator);
@@ -50,6 +56,12 @@ module.exports = {
   clickRegion(text) {
     I.click(this._regionLocator.withText(`${text}`));
   },
+  hideRegion(text) {
+    I.click(this._regionLocator.withText(`${text}`).find('.lsf-region-item__toggle_active'));
+  },
+  showRegion(text) {
+    I.click(this._regionLocator.withText(`${text}`).find('.lsf-region-item__toggle:not(.lsf-region-item__toggle_active)'));
+  },
   selectTool(tool) {
     I.click(`[aria-label=${tool}-tool]`);
   },

Diff for: e2e/tests/audio/audio-regions.test.js

@@ -147,6 +147,46 @@ Scenario('Check if there are ghost regions', async function({ I, LabelStudio, At
   AtSidebar.dontSeeSelectedRegion();
 });
 
+Scenario('Can select a region below a hidden region', async function({ I, LabelStudio, AtAudioView, AtSidebar }) {
+  LabelStudio.setFeatureFlags({
+    ff_front_dev_2715_audio_3_280722_short: true,
+  });
+  I.amOnPage('/');
+
+  LabelStudio.init(paramsSpeech);
+
+  await AtAudioView.waitForAudio();
+
+  I.waitForDetached('loading-progress-bar', 10);
+
+  await AtAudioView.lookForStage();
+
+  // create a new region
+  I.pressKey('1');
+  AtAudioView.dragAudioRegion(50, 80);
+  I.pressKey('u');
+
+  AtSidebar.seeRegions(1);
+
+  // create a new region above the first one
+  I.pressKey('2');
+  AtAudioView.dragAudioRegion(49, 81);
+  I.pressKey('u');
+
+  AtSidebar.seeRegions(2);
+
+  // click on the top-most region visible to select it
+  AtAudioView.clickAt(50);
+  AtSidebar.seeSelectedRegion('Noise');
+
+  // hide the region
+  AtSidebar.hideRegion('Noise');
+
+  // click on the region below the hidden one to select it
+  AtAudioView.clickAt(50);
+  AtSidebar.seeSelectedRegion('Speech');
+});
+
 Scenario('Delete region by pressing delete hotkey', async function({ I, LabelStudio, AtAudioView, AtSidebar }) {
   LabelStudio.setFeatureFlags({
     ff_front_dev_2715_audio_3_280722_short: true,

Diff for: src/components/Entities/RegionItem.js

@@ -56,7 +56,7 @@ const RegionItemContent = observer(({ idx, item, setDraggable }) => {
     }
   }, [item.selected]);
   return (
-    <Block ref={itemElRef} name="region-item" mod={{ hidden : item.hidden }}>
+    <Block ref={itemElRef} name="region-item" mod={{ hidden : item.hidden }} data-testid={`regionitem:selected=${item.selected}`}>
       <Elem name="header" tag="div">
         <Elem name="counter">{isDefined(idx) ? idx + 1 : ''}</Elem>
 

Diff for: src/lib/AudioUltra/Regions/Regions.ts

@@ -217,6 +217,10 @@ export class Regions {
     return this.regions.filter(region => region.selected);
   }
 
+  get visible() {
+    return this.regions.filter(region => region.visible);
+  }
+
   isOverrideKeyPressed(e: MouseEvent) {
     return e.shiftKey;
   }
@@ -386,7 +390,7 @@ export class Regions {
   };
 
   private findRegionUnderCursor(e: MouseEvent) {
-    const region = findLast(this.regions, region => {
+    const region = findLast(this.visible, region => {
       return this.cursorInRegion(e, region);
     });