fix: LSDV-5248: BBoxes optimizations

e2e/fragments/AtOutliner.js

@@ -23,6 +23,9 @@ module.exports = {
   locateRegionItemIndex(idx) {
     return locate(this._regionListItemIndex).withText(`${idx}`).inside(this.locateRegionItemList());
   },
+  locateRegionIndex(idx) {
+    return this.locateRegionItemList().withDescendant(locate(this._regionListItemIndex).toXPath() + `[text()='${idx}']`);
+  },
   locateSelectedItem(locator) {
     const selectedLocator = locate(this._regionListItemSelectedSelector).inside(this.locateRegionList());
 

e2e/setup/feature-flags.js

@@ -11,4 +11,5 @@ module.exports = {
   fflag_feat_front_lsdv_4620_richtext_opimization_060423_short: true,
   fflag_fix_front_lsdv_4620_memory_leaks_100723_short: true,
   fflag_feat_front_lsdv_4620_outliner_optimization_310723_short: true,
+  fflag_fix_front_lsdv_5248_double_click_delay_280823_short: true,
 };

e2e/tests/ocr.test.js

@@ -149,7 +149,10 @@ const REGIONS = [
   },
 ];
 
-Scenario('Drawing multiple blank regions and then attaching labels', async ({ I, LabelStudio, AtImageView, AtSettings, AtLabels, AtSidebar }) => {
+Scenario('Drawing multiple blank regions and then attaching labels', async ({ I, LabelStudio, AtImageView, AtSettings, AtLabels, AtOutliner }) => {
+  LabelStudio.setFeatureFlags({
+    'ff_front_1170_outliner_030222_short': true,
+  });
   I.amOnPage('/');
   LabelStudio.init({ config: createConfig( ), data });
   AtImageView.waitForImage();
@@ -168,13 +171,14 @@ Scenario('Drawing multiple blank regions and then attaching labels', async ({ I,
   for (const region of regions) {
     AtImageView.drawByDrag(region.x, region.y, region.width, region.height);
   }
-  AtSidebar.seeRegions(regions.length);
+  AtOutliner.seeRegions(regions.length);
+
   I.say('Labeling');
-  for (const [idx, region] of Object.entries(regions)) {
+  for (const region of Object.values(regions)) {
     AtImageView.dblClickAt(region.x + region.width / 2, region.y + region.height / 2);
     AtLabels.clickLabel(region.label);
     if (region.text) {
-      I.fillField(AtSidebar.locate('.lsf-region-item').withText(`${+idx+1}`).find('.lsf-textarea-tag__input'), region.text);
+      I.fillField(AtOutliner.locateSelectedItem().find('.lsf-textarea-tag__input'), region.text);
     }
   }
   const results = await LabelStudio.serialize();
@@ -190,10 +194,10 @@ Scenario('Drawing multiple blank regions and then attaching labels', async ({ I,
     I.amOnPage('/');
     LabelStudio.init({ config: createConfig( ), data, annotations: [{ id: 'test', result: results }] });
     AtImageView.waitForImage();
-    AtSidebar.seeRegions(regions.length);
+    AtOutliner.seeRegions(regions.length);
     for (const [idx, region] of Object.entries(regions)) {
       if (region.text) {
-        I.seeInField(AtSidebar.locate('.lsf-region-item').withText(`${+idx+1}`).find('.lsf-textarea-tag__input'), region.text);
+        I.seeInField(AtOutliner.locateRegionIndex((+idx)+1).find('.lsf-textarea-tag__input'), region.text);
       }
     }
   });

src/components/ImageView/ImageView.js

@@ -21,6 +21,7 @@ import { debounce } from '../../utils/debounce';
 import Constants from '../../core/Constants';
 import { fixRectToFit } from '../../utils/image';
 import {
+  FF_DBLCLICK_DELAY,
   FF_DEV_1285,
   FF_DEV_1442,
   FF_DEV_3077,
@@ -64,6 +65,9 @@ const splitRegions = (regions) => {
 };
 
 const Region = memo(({ region, showSelected = false }) => {
+  if (isFF(FF_DBLCLICK_DELAY)) {
+    return useObserver(() => Tree.renderItem(region, region.annotation, true));
+  }
   return useObserver(() => region.inSelection !== showSelected ? null : Tree.renderItem(region, region.annotation, false));
 });
 
@@ -388,7 +392,10 @@ const SelectionLayer = observer(({ item, selectionArea }) => {
 const Selection = observer(({ item, selectionArea, ...triggeredOnResize }) => {
   return (
     <>
-      <SelectedRegions item={item} selectedRegions={item.selectedRegions} {...triggeredOnResize} />
+      { isFF(FF_DBLCLICK_DELAY)
+        ? <Layer name="selection-regions-layer" />
+        : <SelectedRegions item={item} selectedRegions={item.selectedRegions} {...triggeredOnResize} />
+      }
       <SelectionLayer item={item} selectionArea={selectionArea} />
     </>
   );
@@ -555,6 +562,7 @@ export default observer(
     handleMouseDown = e => {
       const { item } = this.props;
       const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';
+      const isMoveTool = item.getToolsManager().findSelectedTool()?.fullName === 'MoveTool';
 
       if (isFF(FF_LSDV_4930)) {
         this.mouseDownPoint = { x: e.evt.offsetX, y: e.evt.offsetY };
@@ -568,13 +576,30 @@ export default observer(
       if (p && p.className === 'Transformer') return;
 
       const handleMouseDown = () => {
+        const isRightElementToCatchToolInteractions = el => {
+          // It could be ruler ot segmentation
+          if (el.nodeType === 'Group') {
+            if ('ruler' === el?.attrs?.name) {
+              return true;
+            }
+            // segmentation is specific for Brushes
+            // but click interaction on the region covers the case of the same MoveTool interaction here,
+            // so it should ignore move tool interaction to prevent conflicts
+            if ((!isFF(FF_DBLCLICK_DELAY) || !isMoveTool)
+              && 'segmentation' === el?.attrs?.name) {
+              return true;
+            }
+          }
+          return false;
+        };
+
         if (
           // create regions over another regions with Cmd/Ctrl pressed
           item.getSkipInteractions() ||
           e.target === item.stageRef ||
           findClosestParent(
             e.target,
-            el => el.nodeType === 'Group' && ['ruler', 'segmentation'].indexOf(el?.attrs?.name) > -1,
+            isRightElementToCatchToolInteractions,
           )
         ) {
           window.addEventListener('mousemove', this.handleGlobalMouseMove);

src/mixins/KonvaRegion.js

@@ -1,6 +1,5 @@
 import { types } from 'mobx-state-tree';
-import { FF_DEV_3793, isFF } from '../utils/feature-flags';
-
+import { FF_DBLCLICK_DELAY, FF_DEV_3793, isFF } from '../utils/feature-flags';
 export const KonvaRegionMixin = types.model({})
   .views((self) => {
     return {
@@ -103,6 +102,15 @@ export const KonvaRegionMixin = types.model({})
 
         if (e) e.cancelBubble = true;
 
+        if (isFF(FF_DBLCLICK_DELAY)) {
+          const isDoubleClick = ev.detail === 2;
+
+          if (isDoubleClick) {
+            self.onDoubleClickRegion();
+            return; 
+          }
+        }
+
         const selectAction = () => {
           self._selectArea(additiveMode);
           deferredSelectId = null;
@@ -113,21 +121,31 @@ export const KonvaRegionMixin = types.model({})
           annotation.stopRelationMode();
           annotation.regionStore.unselectAll();
         } else {
-          // Skip double click emulation when there is nothing to focus
-          if (!self.perRegionFocusTarget) {
-            selectAction();
-            return;
-          }
-          // Double click emulation
-          if (deferredSelectId) {
-            clearTimeout(deferredSelectId);
-            self.requestPerRegionFocus();
-            deferredSelectId = null;
-            annotation.selectArea(self);
+          if (isFF(FF_DBLCLICK_DELAY)) {
+            self._selectArea(additiveMode);
           } else {
-            deferredSelectId = setTimeout(selectAction, 300);
+            // Skip double click emulation when there is nothing to focus
+            if (!self.perRegionFocusTarget) {
+              selectAction();
+              return;
+            }
+            // Double click emulation
+            if (deferredSelectId) {
+              clearTimeout(deferredSelectId);
+              self.requestPerRegionFocus();
+              deferredSelectId = null;
+              annotation.selectArea(self);
+            } else {
+              deferredSelectId = setTimeout(selectAction, 300);
+            }
           }
         }
       },
+      onDoubleClickRegion() {
+        self.requestPerRegionFocus();
+        // `selectArea` does nothing when there's a selected region already, but it should rerender to make `requestPerRegionFocus` work,
+        // so it needs to use `selectAreas` instead. It contains `unselectAll` for this purpose.
+        self.annotation.selectAreas([self]);
+      },
     };
   });

src/regions/AliveRegion.tsx

@@ -2,13 +2,16 @@ import { observer } from 'mobx-react';
 import { isAlive } from 'mobx-state-tree';
 
 import { IReactComponent } from 'mobx-react/dist/types/IReactComponent';
-import { useCallback } from 'react';
+import { ExoticComponent, Fragment, ReactNode, useCallback } from 'react';
+import { Portal } from 'react-konva-utils';
+import { FF_DBLCLICK_DELAY, isFF } from '../utils/feature-flags';
 
 type Region = {
   annotation: any,
   hidden: boolean,
   // ...
   setShapeRef(ref: any): void,
+  inSelection: boolean,
 }
 
 type RegionComponentProps = {
@@ -18,8 +21,15 @@ type RegionComponentProps = {
 
 type Options = {
   renderHidden?: boolean,
+  shouldNotUsePortal?: boolean,
 }
 
+type PortalProps = {
+  selector?: string,
+  enabled?: boolean,
+  children: ReactNode,
+};
+
 export const AliveRegion = (
   RegionComponent: IReactComponent<RegionComponentProps>,
   options?: Options,
@@ -28,13 +38,20 @@ export const AliveRegion = (
 
   return observer(({ item, ...rest }: RegionComponentProps) => {
     const canRender = options?.renderHidden || !item.hidden;
+    const shouldNotUsePortal = !isFF(FF_DBLCLICK_DELAY) || options?.shouldNotUsePortal;
+    const Wrapper = (shouldNotUsePortal ? Fragment : Portal) as ExoticComponent<PortalProps>;
+    const wrapperProps = shouldNotUsePortal ? {} : { selector: '.selection-regions-layer', enabled: item.inSelection };
     const isInTree = !!item.annotation;
     const setShapeRef = useCallback((ref) => {
       if (isAlive(item)) {
         item.setShapeRef(ref);
       }
     }, [item]);
 
-    return isInTree && isAlive(item) && canRender ? <ObservableRegion item={item} {...rest} setShapeRef={setShapeRef} /> : null;
+    return isInTree && isAlive(item) && canRender ? (
+      <Wrapper {...wrapperProps}>
+        <ObservableRegion item={item} {...rest} setShapeRef={setShapeRef} />
+      </Wrapper>
+    ): null;
   });
 };

src/regions/BrushRegion.js

@@ -725,7 +725,10 @@ const HtxBrushView = ({ item, setShapeRef }) => {
   );
 };
 
-const HtxBrush = AliveRegion(HtxBrushView, { renderHidden: true });
+const HtxBrush = AliveRegion(HtxBrushView, {
+  renderHidden: true,
+  shouldNotUsePortal: true,
+});
 
 Registry.addTag('brushregion', BrushRegionModel, HtxBrush);
 Registry.addRegionType(BrushRegionModel, 'image', value => value.rle || value.touches || value.maskDataURL);

src/regions/KeyPointRegion.js

@@ -18,6 +18,7 @@ import { createDragBoundFunc } from '../utils/image';
 import { AliveRegion } from './AliveRegion';
 import { EditableRegion } from './EditableRegion';
 import { RELATIVE_STAGE_HEIGHT, RELATIVE_STAGE_WIDTH } from '../components/ImageView/Image';
+import Constants from '../core/Constants';
 
 const KeyPointRegionAbsoluteCoordsDEV3793 = types
   .model({
@@ -261,7 +262,7 @@ const HtxKeyPointView = ({ item, setShapeRef }) => {
           if (item.parent.getSkipInteractions()) return;
 
           if (store.annotationStore.selected.relationMode) {
-            stage.container().style.cursor = 'default';
+            stage.container().style.cursor = Constants.DEFAULT_CURSOR;
           }
 
           item.setHighlight(false);

src/utils/feature-flags.ts

@@ -299,6 +299,12 @@ export const FF_LSDV_4998 = 'fflag_fix_front_lsdv_4998_missed_dynamic_children_0
  */
 export const FF_PROD_309 = 'fflag_feat_front_prod_309_choice_hint_080523_short';
 
+/**
+ * Fix delay on double-click interactions in Image Segmentation
+ * @link https://app.launchdarkly.com/default/production/features/fflag_fix_front_lsdv_5248_double_click_delay_280823_short
+ */
+export const FF_DBLCLICK_DELAY = 'fflag_fix_front_lsdv_5248_double_click_delay_280823_short';
+
 /**
  * Allow to load Taxonomy from remote API
  * @link https://app.launchdarkly.com/default/production/features/fflag_feat_front_lsdv_5451_async_taxonomy_110823_short

tests/functional/data/image_segmentation/layers.ts

@@ -0,0 +1,48 @@
+export const simpleConfig = `
+  <View>
+    <Image name="img" value="$image"></Image>
+    <RectangleLabels name="tag" toName="img">
+      <Label value="Label 1" background="green"></Label>
+      <Label value="Label 2" background="blue"></Label>
+    </RectangleLabels>
+  </View>
+`;
+
+export const simpleImageData = {
+  image: 'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg',
+};
+
+export const simpleResult = [
+  {
+    id: 'Dx_aB91ISN',
+    source: '$image',
+    from_name: 'tag',
+    to_name: 'img',
+    type: 'rectanglelabels',
+    origin: 'manual',
+    value: {
+      height: 20,
+      rotation: 0,
+      width: 20,
+      x: 40,
+      y: 40,
+      rectanglelabels: ['Label 1'],
+    },
+  },
+  {
+    id: 'Dx_aB91INs',
+    source: '$image',
+    from_name: 'tag',
+    to_name: 'img',
+    type: 'rectanglelabels',
+    origin: 'manual',
+    value: {
+      height: 90,
+      rotation: 0,
+      width: 90,
+      x: 5,
+      y: 5,
+      rectanglelabels: ['Label 2'],
+    },
+  },
+];

tests/functional/feature-flags.ts

@@ -11,5 +11,6 @@ export const CURRENT_FLAGS = {
   [FLAGS.FF_LSDV_4620_3]: true,
   [FLAGS.FF_LSDV_4620_3_ML]: true,
   [FLAGS.FF_OUTLINER_OPTIM]: true,
+  [FLAGS.FF_DBLCLICK_DELAY]: true,
 };
 

tests/functional/specs/image_segmentation/layers.cy.ts

@@ -0,0 +1,25 @@
+import { ImageView, LabelStudio, Sidebar } from '@heartexlabs/ls-test/helpers/LSF';
+import { simpleConfig, simpleImageData, simpleResult } from 'data/image_segmentation/layers';
+
+describe('Image Segmentation - Layers', () => {
+  it('should keep selected region over unselected one', () => {
+    LabelStudio.params()
+      .config(simpleConfig)
+      .data(simpleImageData)
+      .withResult(simpleResult)
+      .init();
+
+    ImageView.waitForImage();
+    Sidebar.hasRegions(2);
+    Sidebar.toggleRegionSelection(0);
+
+    Sidebar.hasSelectedRegions(1);
+
+    // A selected region should be over all unselected regions,
+    // so the test should click in it and clear selection
+    ImageView.clickAtRelative(.5,.5);
+
+    Sidebar.hasSelectedRegions(0);
+  });
+
+});

tests/functional/specs/image_segmentation/tools/selection-tool.cy.ts

@@ -2,7 +2,7 @@ import { ImageView, LabelStudio, Sidebar } from '@heartexlabs/ls-test/helpers/LS
 import { fourRectanglesResult, simpleEllipseConfig, simpleEllipseResult,
   simpleImageData,
   simplePointConfig,
-  simplePointResult, simplePolygonConfig, simplePolygonResult, simpleRectangleConfig, simpleRectangleResult } from 'data/image_segmentstion/tools/selection-tool';
+  simplePointResult, simplePolygonConfig, simplePolygonResult, simpleRectangleConfig, simpleRectangleResult } from 'data/image_segmentation/tools/selection-tool';
 import { FF_DEV_1442 } from '../../../../../src/utils/feature-flags';
 
 describe('Image segmentation - Tools - Selection tool', () => {