fix: LSDV-4864: LEAP-148: Magic Wand doesn't work with MIG

e2e/tests/helpers.js

@@ -614,7 +614,7 @@ const switchRegionTreeView = (viewName) => {
   Htx.annotationStore.selected.regionStore.setView(viewName);
 };
 
-const serialize = () => window.Htx.annotationStore.selected.serializeAnnotation();
+const serialize = async () => await window.Htx.annotationStore.selected.serializeAnnotation();
 
 const selectText = async ({ selector, rangeStart, rangeEnd }) => {
   let [doc, win] = [document, window];

e2e/tests/smart-tools.history.test.js

@@ -22,7 +22,7 @@ function createRectangleConfig(params = {}) {
 
 const IMAGE = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Html_headers.png/640px-Html_headers.png';
 
-function getRectangleSuggestions(reg, group) {
+async function getRectangleSuggestions(reg, group) {
   const allSuggestions = [{
     'original_width': 640,
     'original_height': 507,
@@ -451,7 +451,7 @@ function getRectangleSuggestions(reg, group) {
   }];
   const annotation = window.labelStudio.store.annotationStore.selected;
   const ids = group.map(r => r.id);
-  const results = annotation.serializeAnnotation().filter((res) => ids.includes(res.id));
+  const results = (await annotation.serializeAnnotation()).filter((res) => ids.includes(res.id));
   const suggestions = allSuggestions.filter(predictionResult => {
     const targetCenterX = predictionResult.value.x + predictionResult.value.width / 2;
     const targetCenterY = predictionResult.value.y + predictionResult.value.height / 2;
@@ -473,6 +473,9 @@ function getRectangleSuggestions(reg, group) {
 }
 
 Scenario('Undo regions auto-annotated from predictions', async function({ I, LabelStudio, AtImageView, AtSidebar }) {
+  LabelStudio.setFeatureFlags({
+    fflag_fix_front_dev_1284_auto_detect_undo_281022_short: true,
+  });
   I.amOnPage('/');
   LabelStudio.init({
     config: createRectangleConfig({
@@ -492,9 +495,6 @@ Scenario('Undo regions auto-annotated from predictions', async function({ I, Lab
       forceAutoAcceptSuggestions: true,
     },
   });
-  LabelStudio.setFeatureFlags({
-    fflag_fix_front_dev_1284_auto_detect_undo_281022_short: true,
-  });
   AtImageView.waitForImage();
   AtSidebar.seeRegions(0);
   await AtImageView.lookForStage();

package.json

@@ -132,6 +132,8 @@
     "@types/react-window": "^1.8.5",
     "@types/strman": "^2.0.0",
     "@types/wavesurfer.js": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "antd": "^4.3.3",
     "autoprefixer": "^10.4.2",
@@ -142,14 +144,16 @@
     "chroma-js": "^2.1.1",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "d3": "^5.16.0",
     "date-fns": "^2.20.1",
     "dotenv-defaults": "^2.0.2",
     "dotenv-webpack": "^7.0.2",
     "emoji-regex": "^7.0.3",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.5.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.56.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-webpack-plugin": "^3.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
@@ -197,7 +201,7 @@
     "svg.js": "^2.7.0",
     "terser-webpack-plugin": "^5.1.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.2.3",
+    "typescript": "^5.0.4",
     "url-loader": "^4.1.1",
     "wavesurfer.js": "^6.0.1",
     "webpack": "^5.79.0",

public/index.html

@@ -159,7 +159,7 @@
             }
           })
           ls.on("updateAnnotation", (_, annotation) => {
-            console.log(annotation.serializeAnnotation());
+            annotation.serializeAnnotation().then(r => console.log(r));
           })
           ls.on("regionFinishedDrawing", (region, list) => {
             console.log("finish drawing", {region, list})

src/components/Debug.js

@@ -3,9 +3,9 @@ import { Button, Form } from 'antd';
 
 import { observer } from 'mobx-react';
 
-const toJSON = (annotation) => {
+const toJSON = async (annotation) => {
   const id = annotation.pk || annotation.id;
-  const result = annotation.serializeAnnotation();
+  const result = await annotation.serializeAnnotation();
   const draft = annotation.versions.draft;
   const json = { id, result };
 
@@ -32,22 +32,22 @@ const DebugComponent = ({ store }) => {
     if (cs.annotations.length) cs.selectAnnotation(cs.annotations[0].id);
   }, []);
 
-  const serializeCurrent = useCallback(() => {
+  const serializeCurrent = useCallback(async () => {
     const input = refAnnotations.current;
 
     if (!input) return;
     const annotation = store.annotationStore.selected;
-    const json = [toJSON(annotation)];
+    const json = await toJSON(annotation);
 
     input.value = JSON.stringify(json, null, 2);
   }, []);
 
-  const serializeAll = useCallback(() => {
+  const serializeAll = useCallback(async () => {
     const input = refAnnotations.current;
 
     if (!input) return;
     const { annotations, predictions } = store.annotationStore;
-    const json = [...annotations, ...predictions].map(toJSON);
+    const json = await Promise.all([...annotations, ...predictions].map(toJSON));
 
     input.value = JSON.stringify(json, null, 2);
   }, []);

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} />
   );
 };

src/components/ImageView/ImageView.js

@@ -403,7 +403,7 @@ const Selection = observer(({ item, ...triggeredOnResize }) => {
 
   return (
     <>
-      { isFF(FF_DBLCLICK_DELAY)
+      {isFF(FF_DBLCLICK_DELAY)
         ? <Layer name="selection-regions-layer" />
         : <SelectedRegions item={item} selectedRegions={item.selectedRegions} {...triggeredOnResize} />
       }
@@ -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
@@ -1001,6 +1017,7 @@ export default observer(
                 imageTransform={item.imageTransform}
                 updateImageSize={item.updateImageSize}
                 size={item.canvasSize}
+                overlay={<CanvasOverlay item={item} />}
               />
             ) : (
               <div
@@ -1026,15 +1043,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 */}
@@ -1141,12 +1150,8 @@ const EntireStage = observer(({
 
   return (
     <Stage
-      ref={ref => {
-        item.setStageRef(ref);
-      }}
-      className={[styles['image-element'],
-        ...imagePositionClassnames,
-      ].join(' ')}
+      ref={ref => item.setStageRef(ref)}
+      className={[styles['image-element'], ...imagePositionClassnames].join(' ')}
       width={size.width}
       height={size.height}
       scaleX={item.zoomScale}

src/regions/BrushRegion.js

@@ -419,7 +419,7 @@ const Model = types
        * @param {boolean} [options.fast] Saving only touches, without RLE
        * @return {BrushRegionResult}
        */
-      serialize(options) {
+      async serialize(options) {
         const object = self.object;
         const value = { format: 'rle' };
 
@@ -429,7 +429,7 @@ const Model = types
           if (self.touches.length) value.touches = self.touches;
           if (self.maskDataURL) value.maskDataURL = self.maskDataURL;
         } else {
-          const rle = Canvas.Region2RLE(self, object);
+          const rle = await Canvas.Region2RLE(self, object);
 
           if (!rle || !rle.length) return null;
 

src/regions/Result.js

@@ -270,11 +270,11 @@ const Result = types
     // label, becuase it takes color from the label
     updateAppearenceFromState() { },
 
-    serialize(options) {
+    async serialize(options) {
       const sn = getSnapshot(self);
       const { type, score, value, meta } = sn;
       const { valueType } = self.from_name;
-      const data = self.area ? self.area.serialize(options) : {};
+      const data = self.area ? await self.area.serialize(options) : {};
       // cut off annotation id
       const id = self.area?.cleanId;
       const from_name = Tree.cleanUpId(sn.from_name);

src/stores/Annotation/Annotation.js

@@ -202,7 +202,7 @@ export const Annotation = types
       return self.results
         .map(r => r.serialize())
         .filter(Boolean)
-        .concat(self.relationStore.serialize());
+        .concat(self.relationStore.serializeAnnotation());
     },
 
     get serializedSelection() {
@@ -651,7 +651,7 @@ export const Annotation = types
       self.startAutosave();
     },
 
-    startAutosave: flow(function *() {
+    startAutosave: flow(function* () {
       if (!getEnv(self).events.hasEvent('submitDraft')) return;
       // view all must never trigger autosave
       if (self.isReadOnly()) return;
@@ -681,13 +681,13 @@ export const Annotation = types
       onSnapshot(self.areas, self.autosave);
     }),
 
-    async saveDraft(params) {
+    saveDraft: flow(function* (params) {
       // There is no draft to save as it was already saved as an annotation
       if (self.submissionStarted) return;
       // if this is now a history item or prediction don't save it
       if (!self.editable) return;
 
-      const result = self.serializeAnnotation({ fast: true });
+      const result = yield self.serializeAnnotation({ fast: true });
       // if this is new annotation and no regions added yet
 
       if (!isFF(FF_LSDV_3009) && !self.pk && !result.length) return;
@@ -700,7 +700,7 @@ export const Annotation = types
 
         return res;
       });
-    },
+    }),
 
     submissionInProgress() {
       self.submissionStarted = Date.now();
@@ -710,14 +710,14 @@ export const Annotation = types
       if (self.autosave) self.autosave.flush();
     },
 
-    async saveDraftImmediatelyWithResults(params) {
+    saveDraftImmediatelyWithResults: flow(function *(params) {
       // There is no draft to save as it was already saved as an annotation
       if (self.submissionStarted || self.isDraftSaving) return {};
       self.setDraftSaving(true);
-      const res = await self.saveDraft(params);
+      const res = yield self.saveDraft(params);
 
       return res;
-    },
+    }),
 
     pauseAutosave() {
       if (!self.autosave) return;
@@ -934,20 +934,19 @@ export const Annotation = types
       return self.regionStore.regions.slice(prevSize);
     },
 
-    serializeAnnotation(options) {
-      // return self.serialized;
-
+    serializeAnnotation: flow(function *(options) {
       document.body.style.cursor = 'wait';
 
-      const result = self.results
-        .map(r => r.serialize(options))
+      const result = (yield Promise.all(
+        self.results.map(r => r.serialize(options)))
+      )
         .filter(Boolean)
         .concat(self.relationStore.serialize(options));
 
       document.body.style.cursor = 'default';
 
       return result;
-    },
+    }),
 
     // Some annotations may be created with wrong assumptions
     // And this problems are fixable, so better to fix them on start
@@ -1033,7 +1032,7 @@ export const Annotation = types
         if (tagNames.has(obj.from_name) && tagNames.has(obj.to_name)) {
           res.push(obj);
         }
-        
+
         // Insert image dimensions from result 
         (() => {
           if (!isDefined(obj.original_width)) return;
@@ -1043,7 +1042,7 @@ export const Annotation = types
 
           if (tag.type !== 'image') return;
 
-          const imageEntity = tag.findImageEntity(obj.item_index ?? 0); 
+          const imageEntity = tag.findImageEntity(obj.item_index ?? 0);
 
           if (!imageEntity) return;
 
@@ -1346,7 +1345,7 @@ export const Annotation = types
         area.setValue(state);
       });
       self.suggestions.delete(id);
-      
+
     },
 
     rejectSuggestion(id) {