fix: LEAP-148: Fix MagicWand in MIG scenario with image preloading (H…

…umanSignal#1685) When both MIG and image preloading are enabled, there was no canvas overlay for the Magic Wand which caused the Magic Wand to fail. * fix: LSDV-4864: Fix MagicWand in MIG scenario with image preloading (cherry picked from commit d2330f7) * Update ls-test dependency * Fix tests --------- Co-authored-by: Nick Skriabin <[email protected]> Co-authored-by: hlomzik <[email protected]>
HelloPareto · Feb 29, 2024 · 52336a2 · 52336a2
1 parent 634d3c4
commit 52336a2
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 68 deletions.
diff --git a/src/components/ImageView/Image.js b/src/components/ImageView/Image.js
@@ -30,6 +30,7 @@ export const Image = observer(forwardRef(({
   updateImageSize,
   usedValue,
   size,
+  overlay,
 }, ref) => {
   const imageSize = useMemo(() => {
     return {
@@ -45,6 +46,7 @@ export const Image = observer(forwardRef(({
 
   return (
     <Block name="image" style={imageSize}>
+      {overlay}
       <ImageProgress
         downloading={imageEntity.downloading}
         progress={imageEntity.progress}
@@ -76,7 +78,7 @@ const ImageProgress = observer(({
   return downloading ? (
     <Block name="image-progress">
       <Elem name="message">Downloading image</Elem>
-      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001}/>
+      <Elem tag="progress" name="bar" value={progress} min="0" max={1} step={0.0001} />
     </Block>
   ) : error ? (
     <ImageLoadingError src={src} value={usedValue} />
@@ -121,6 +123,6 @@ const ImageLoadingError = ({ src, value }) => {
   }, [src]);
 
   return (
-    <ErrorMessage error={error}/>
+    <ErrorMessage error={error} />
   );
 };
diff --git a/src/components/ImageView/ImageView.js b/src/components/ImageView/ImageView.js
@@ -490,6 +490,22 @@ const Crosshair = memo(forwardRef(({ width, height }, ref) => {
   );
 }));
 
+/**
+ * Component that creates an overlay on top
+ * of the image to support Magic Wand tool
+ */
+const CanvasOverlay = observer(({ item }) => {
+  return isFF(FF_DEV_4081) ? (
+    <canvas
+      className={styles.overlay}
+      ref={ref => {
+        item.setOverlayRef(ref);
+      }}
+      style={item.imageTransform}
+    />
+  ) : null;
+});
+
 export default observer(
   class ImageView extends Component {
     // stored position of canvas before creating region
@@ -1020,6 +1036,7 @@ export default observer(
                 imageTransform={item.imageTransform}
                 updateImageSize={item.updateImageSize}
                 size={item.canvasSize}
+                overlay={<CanvasOverlay item={item} />}
               />
             ) : (
               <div
@@ -1045,15 +1062,7 @@ export default observer(
                   crossOrigin={item.imageCrossOrigin}
                   alt="LS"
                 />
-                {isFF(FF_DEV_4081) ? (
-                  <canvas
-                    className={styles.overlay}
-                    ref={ref => {
-                      item.setOverlayRef(ref);
-                    }}
-                    style={item.imageTransform}
-                  />
-                ) : null}
+                <CanvasOverlay item={item} />
               </div>
             )}
             {/* @todo this is dirty hack; rewrite to proper async waiting for data to load */}

diff --git a/src/tools/MagicWand.js b/src/tools/MagicWand.js
@@ -252,7 +252,7 @@ const _Tool = types
           msg = 'The Magic Wand is not supported on rotated images';
         } else {
           msg = 'The Magic Wand is not supported if the crosshair is turned on';
-        } 
+        }
 
         alert(msg);
         throw msg;

diff --git a/tests/functional/package.json b/tests/functional/package.json
@@ -20,7 +20,7 @@
     "cvg:summary": "nyc report --temp-dir=.nyc_output --reporter=text-summary --cwd=. --exclude-after-remap false"
   },
   "dependencies": {
-    "@heartexlabs/ls-test": "heartexlabs/ls-frontend-test#2619550d365dbfdb2b29fc07cf5ca70278a6928f"
+    "@heartexlabs/ls-test": "heartexlabs/ls-frontend-test#3d0d889d31fefa5ca3e3466482bab2664539115e"
   },
   "devDependencies": {
     "ts-loader": "^9.4.2",

diff --git a/tests/functional/specs/relations/basic.cy.ts b/tests/functional/specs/relations/basic.cy.ts
@@ -1,10 +1,13 @@
-import { ImageView, LabelStudio, Relations, ToolBar } from '@heartexlabs/ls-test/helpers/LSF';
+import { Hotkeys, ImageView, LabelStudio, Relations, ToolBar } from '@heartexlabs/ls-test/helpers/LSF';
 import {
   imageConfigWithRelations,
   simpleImageConfig,
-  simpleImageData, simpleImageResult,
+  simpleImageData,
+  simpleImageResult,
   simpleImageResultWithRelation,
-  simpleImageResultWithRelations, simpleImageResultWithRelationsAndLabels, simpleImageResultWithRelationsAndLabelsAlt
+  simpleImageResultWithRelations,
+  simpleImageResultWithRelationsAndLabels,
+  simpleImageResultWithRelationsAndLabelsAlt
 } from '../../data/relations/basic';
 
 describe('Relations: Basic', () => {
@@ -176,19 +179,19 @@ describe('Relations: Basic', () => {
 
     Relations.hasRelations(0);
 
-    ImageView.clickAtRelative(.30, .30);
+    ImageView.clickAtRelative(0.3, 0.3);
     Relations.toggleCreationWithHotkey();
-    ImageView.clickAtRelative(.60, .60);
+    ImageView.clickAtRelative(0.6, 0.6);
 
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
 
-    cy.get('body').type('{ctrl+z}');
+    Hotkeys.undo();
     Relations.hasRelations(0);
-    cy.get('body').type('{ctrl+shift+z}');
+    Hotkeys.redo();
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
   });
@@ -203,26 +206,26 @@ describe('Relations: Basic', () => {
     ImageView.waitForImage();
 
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(1);
     });
 
     Relations.deleteRelationAction(0);
 
     Relations.hasRelations(0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
 
-    cy.get('body').type('{ctrl+z}');
+    Hotkeys.undo();
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
 
-    cy.get('body').type('{ctrl+shift+z}');
+    Hotkeys.redo();
     Relations.hasRelations(0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
   });
@@ -237,14 +240,14 @@ describe('Relations: Basic', () => {
     ImageView.waitForImage();
 
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(1);
     });
 
     Relations.toggleRelationDirection(0);
 
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
   });
@@ -263,19 +266,19 @@ describe('Relations: Basic', () => {
     Relations.clickShowRelationLabels(0);
     Relations.addLabelToRelation('Blue label', 0);
     Relations.hasRelationLabels(['Blue label'], 0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
 
-    cy.get('body').type('{ctrl+z}');
+    Hotkeys.undo();
     Relations.hasRelationLabels([], 0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
 
-    cy.get('body').type('{ctrl+shift+z}');
+    Hotkeys.redo();
     Relations.hasRelationLabels(['Blue label'], 0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(2);
     });
   });
@@ -292,7 +295,7 @@ describe('Relations: Basic', () => {
     Relations.hoverOverRelation(0);
     Relations.stopHoveringOverRelation(0);
 
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(1);
     });
   });
@@ -307,12 +310,12 @@ describe('Relations: Basic', () => {
     ImageView.waitForImage();
 
     Relations.hasRelations(1);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(1);
     });
 
     Relations.hideRelationAction(0);
-    cy.window().then((win) => {
+    cy.window().then(win => {
       expect(win.Htx.annotationStore.selected.history.history.length).to.equal(1);
     });
   });