fix: OPTIC-1858: Ensure datamanager initialization properly reacts to change and has correct dependencies (#7295)

Author: bmartel

label_studio/feature_flags.json

@@ -921,7 +921,7 @@
     },
     "fflag__feature_develop__prompts__dia_1829_jwt_token_auth": {
       "key": "fflag__feature_develop__prompts__dia_1829_jwt_token_auth",
-      "on": false,
+      "on": true,
       "prerequisites": [],
       "targets": [],
       "contextTargets": [],
@@ -2717,7 +2717,7 @@
     },
     "fflag_feat_front_optic_1746_improve_global_error_messages_short": {
       "key": "fflag_feat_front_optic_1746_improve_global_error_messages_short",
-      "on": false,
+      "on": true,
       "prerequisites": [],
       "targets": [],
       "contextTargets": [],

web/apps/labelstudio/src/pages/DataManager/DataManager.jsx

@@ -60,7 +60,7 @@ const buildLink = (path, params) => {
 };
 
 export const DataManagerPage = ({ ...props }) => {
-  const dependencies = useMemo(loadDependencies);
+  const dependencies = useMemo(loadDependencies, []);
   const toast = useContext(ToastContext);
   const root = useRef();
   const params = useParams();
@@ -192,32 +192,18 @@ export const DataManagerPage = ({ ...props }) => {
       dataManagerRef.current.destroy();
       dataManagerRef.current = null;
     }
-  }, [dataManagerRef]);
+  }, []);
 
   useEffect(() => {
     Promise.all(dependencies)
       .then(() => setLoading(false))
       .then(init);
+  }, [init]);
 
+  useEffect(() => {
+    // destroy the data manager when the component is unmounted
     return () => destroyDM();
-  }, [root, init]);
-
-  if (loading) {
-    return (
-      <div
-        style={{
-          flex: 1,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <Spinner size={64} />
-      </div>
-    );
-  }
+  }, []);
 
   return crashed ? (
     <Block name="crash">
@@ -226,7 +212,28 @@ export const DataManagerPage = ({ ...props }) => {
       <Button to="/projects">Back to projects</Button>
     </Block>
   ) : (
-    <Block ref={root} name="datamanager" />
+    <>
+      {loading && (
+        <div
+          style={{
+            flex: 1,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Spinner size={64} />
+        </div>
+      )}
+      <Block ref={root} name="datamanager" />
+    </>
   );
 };
 

web/libs/datamanager/src/components/Label/Label.jsx

@@ -72,33 +72,23 @@ export const Labeling = injector(
     }, []);
 
     useEffect(() => {
-      const onTaskSelected = () => {
-        // Destroy LSF and initialize it again to avoid issues with the LSF instance
-        // being unavailable when the component is remounted.
-        // This is to best align the cases where LSF is initialized by a page load
-        // or a task navigation, and avoid issues with the task initialization not properly
-        // allowing deep linking to work due to the LSF instance being destroyed right before
-        // the task would be loaded.
-        SDK.destroyLSF();
-        initLabeling();
-      };
-
-      if (!isLabelStream) SDK.on("taskSelected", onTaskSelected);
+      if (!isLabelStream) SDK.on("taskSelected", initLabeling);
 
       return () => {
-        if (!isLabelStream) SDK.off("taskSelected", onTaskSelected);
+        if (!isLabelStream) SDK.off("taskSelected", initLabeling);
       };
     }, []);
 
     useEffect(() => {
       if ((!SDK.lsf && store.dataStore.selected) || isLabelStream) {
         initLabeling();
-
-        // destroy LSF when component unmounts and was initialized by this component and not the "taskSelected" event
-        return () => SDK.destroyLSF();
       }
     }, []);
 
+    useEffect(() => {
+      return () => SDK.destroyLSF();
+    }, []);
+
     const onResize = useCallback((width) => {
       view.setLabelingTableWidth(width);
       // trigger resize events inside LSF

web/libs/datamanager/src/sdk/lsf-sdk.js

@@ -45,7 +45,7 @@ const DEFAULT_INTERFACES = [
 
 let LabelStudioDM;
 
-const resolveLabelStudio = async () => {
+const resolveLabelStudio = () => {
   if (LabelStudioDM) {
     return LabelStudioDM;
   }
@@ -223,9 +223,9 @@ export class LSFWrapper {
   }
 
   /** @private */
-  async initLabelStudio(settings) {
+  initLabelStudio(settings) {
     try {
-      const LSF = await resolveLabelStudio();
+      const LSF = resolveLabelStudio();
 
       this.lsfInstance = new LSF(this.root, settings);
 

web/libs/datamanager/src/stores/AppStore.js

@@ -198,14 +198,23 @@ export const AppStore = types
     },
 
     setTask: flow(function* ({ taskID, annotationID, pushState }) {
-      console.trace("setTask");
       if (pushState !== false) {
         History.navigate({
           task: taskID,
           annotation: annotationID ?? null,
           interaction: null,
           region: null,
         });
+      } else if (isFF(FF_REGION_VISIBILITY_FROM_URL)) {
+        const { task, region, annotation } = History.getParams();
+        History.navigate(
+          {
+            task,
+            region,
+            annotation,
+          },
+          true,
+        );
       }
 
       if (!isDefined(taskID)) return;