fix: OPTIC-1125: Label config preview always showing a step behind when making updates (#6417)

Co-authored-by: yyassi-heartex <[email protected]>
Co-authored-by: Yousif Yassi <[email protected]>

Author: bmartel

web/apps/labelstudio/src/pages/CreateProject/Config/Preview.jsx

@@ -9,15 +9,25 @@ import { useAPI } from "../../../providers/ApiProvider";
 
 const configClass = cn("configure");
 
-const loadDependencies = async () => import("@humansignal/editor");
+// Lazy load Label Studio with a single promise to avoid multiple loads
+// and enable as early as possible to load the dependencies once this component is mounted for the first time
+let dependencies;
+const loadDependencies = async () => {
+  if (!dependencies) {
+    dependencies = import("@humansignal/editor");
+  }
+  return dependencies;
+};
 
 export const Preview = ({ config, data, error, loading, project }) => {
+  // @see comment about dependencies above
+  loadDependencies();
+
+  const [storeReady, setStoreReady] = useState(false);
   const lsf = useRef(null);
-  const resolvingEditor = useMemo(loadDependencies);
   const rootRef = useRef();
-  const projectRef = useRef(project);
   const api = useAPI();
-
+  const projectRef = useRef(project);
   projectRef.current = project;
 
   const currentTask = useMemo(() => {
@@ -53,12 +63,14 @@ export const Preview = ({ config, data, error, loading, project }) => {
   }, [config]);
 
   const initLabelStudio = useCallback(async (config, task) => {
-    if (!task.data) return;
+    // wait for dependencies to load, the promise is resolved only once
+    // and is started when the component is mounted for the first time
+    await loadDependencies();
 
-    await resolvingEditor;
+    if (lsf.current || !task.data) return;
 
     try {
-      const lsf = new window.LabelStudio(rootRef.current, {
+      lsf.current = new window.LabelStudio(rootRef.current, {
         config,
         task,
         interfaces: ["side-column"],
@@ -71,6 +83,7 @@ export const Preview = ({ config, data, error, loading, project }) => {
             const c = as.createAnnotation();
 
             as.selectAnnotation(c.id);
+            setStoreReady(true);
           };
 
           if (isFF(FF_DEV_3617)) {
@@ -82,12 +95,9 @@ export const Preview = ({ config, data, error, loading, project }) => {
         },
       });
 
-      lsf.on("presignUrlForProject", onPresignUrlForProject);
-
-      return lsf;
+      lsf.current.on("presignUrlForProject", onPresignUrlForProject);
     } catch (err) {
       console.error(err);
-      return null;
     }
   }, []);
 
@@ -99,45 +109,30 @@ export const Preview = ({ config, data, error, loading, project }) => {
   }, [loading, error]);
 
   useEffect(() => {
-    if (!lsf.current) {
-      initLabelStudio(currentConfig, currentTask).then((ls) => {
-        lsf.current = ls;
-      });
-    }
-  }, [currentConfig, currentTask]);
-
-  useEffect(() => {
-    if (lsf.current?.store) {
-      lsf.current.store.assignConfig(currentConfig);
-      console.log("LSF config updated");
-    }
-  }, [currentConfig]);
-
-  useEffect(() => {
-    if (lsf.current?.store) {
-      const store = lsf.current.store;
+    initLabelStudio(currentConfig, currentTask).then(() => {
+      if (storeReady && lsf.current?.store) {
+        const store = lsf.current.store;
 
-      store.resetState();
-      store.assignTask(currentTask);
-      store.initializeStore(currentTask);
+        store.resetState();
+        store.assignTask(currentTask);
+        store.assignConfig(currentConfig);
+        store.initializeStore(currentTask);
 
-      const c = store.annotationStore.addAnnotation({
-        userGenerate: true,
-      });
+        const c = store.annotationStore.addAnnotation({
+          userGenerate: true,
+        });
 
-      store.annotationStore.selectAnnotation(c.id);
-      console.log("LSF task updated");
-    }
-  }, [currentTask]);
+        store.annotationStore.selectAnnotation(c.id);
+        console.log("LSF updated");
+      }
+    });
+  }, [currentConfig, currentTask, storeReady]);
 
   useEffect(() => {
     return () => {
       if (lsf.current) {
         console.info("Destroying LSF");
-        // there can be weird error from LSF, but we can just skip it for now
-        try {
-          lsf.current.destroy();
-        } catch (e) {}
+        lsf.current.destroy();
         lsf.current = null;
       }
     };

web/libs/editor/src/tags/object/Image/ImageEntity.js

@@ -67,7 +67,7 @@ export const ImageEntity = types
   }))
   .actions((self) => ({
     preload() {
-      if (self.ensurePreloaded()) return;
+      if (self.ensurePreloaded() || !self.src) return;
 
       self.setDownloading(true);
 

web/libs/editor/tests/integration/e2e/image_segmentation/tools/rect3point.cy.ts

@@ -132,8 +132,8 @@ describe("Rect3Point tool", () => {
     ImageView.clickAtRelative(0.5, 0.5);
 
     LabelStudio.serialize().then(([result]) => {
-      expect(result.value.x).to.be.closeTo(50, 0.1);
-      expect(result.value.y).to.be.closeTo(50, 0.1);
+      expect(result.value.x).to.be.closeTo(50, 0.2);
+      expect(result.value.y).to.be.closeTo(50, 0.2);
       expect(result.value.rotation).to.be.eq(0);
     });
   });