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

label_studio/frontend/dist/dm/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "feat: DIA-474: [FE] add new column for DE",
-  "commit": "a8e6e5e6cd6601d765a7f0abd4efa87cec1a3fe5",
-  "branch": "master",
-  "date": "2024-01-03T07:13:20Z"
+  "message": "fix: LSDV-4864: LEAP-148: Magic Wand doesn't work with MIG",
+  "commit": "6dcfd689739ac241e7c090f7081b8907004788ec",
+  "branch": "fb-lsdv-4864/magic-wand-mig",
+  "date": "2024-01-12T15:11:39Z"
 }

label_studio/frontend/dist/lsf/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-344: View all annotation tab is not loading",
-  "commit": "eb1194c1e8ad5f9c0e725b2955dbc202f169649b",
-  "branch": "master",
-  "date": "2024-01-08T09:48:32Z"
+  "message": "fix: LSDV-4864: LEAP-148: Magic Wand doesn't work with MIG ",
+  "commit": "3fadf05027f7e23fa8c2fe7255f5b71ec2387760",
+  "branch": "fb-lsdv-4864/magic-wand-mig",
+  "date": "2024-01-12T15:11:02Z"
 }

web/libs/datamanager/src/components/CellViews/ProjectCell.js

@@ -0,0 +1,45 @@
+import { getRoot } from "mobx-state-tree";
+import { Fragment } from "react";
+
+const ProjectLink = ({ project }) => {
+  const projectID = project.id;
+  const onClick = (e) => {
+    e.stopPropagation();
+
+  };
+
+  return (
+    <a href={`/projects/${projectID}/data`} onClick={onClick}>
+      {project.title}
+    </a>
+  );
+};
+
+export const ProjectCell = (cell) => {
+  const { original, value } = cell;
+  const root = getRoot(original);
+  const projectList = value
+    .map(projectRef => root.taskStore.associatedList.find(proj => proj.id === projectRef.project_id))
+    .filter(Boolean);
+
+  return (
+    <div
+      style={{
+        maxHeight: "100%",
+        overflow: "hidden",
+        fontSize: 12,
+        lineHeight: "16px",
+      }}
+    >
+      {projectList && (
+        projectList
+          .map((projectRef, index) => (
+            <Fragment key={projectRef.project_id}>
+              {index > 0 && ", "}
+              <ProjectLink project={projectRef} />
+            </Fragment>
+          ))
+      )}
+    </div>
+  );
+};

web/libs/datamanager/src/components/CellViews/index.js

@@ -13,3 +13,5 @@ export { NumberCell as Number } from "./NumberCell";
 export { StringCell as String } from "./StringCell";
 export { StringCell as Text } from "./StringCell";
 export { VideoCell as Video } from "./VideoCell";
+export { ProjectCell as Project } from './ProjectCell';
+

web/libs/datamanager/src/components/DataManager/Toolbar/ActionsButton.js

@@ -72,7 +72,6 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
     const submenuRef = useRef();
     const onClick = useCallback((e) => {
       e.preventDefault();
-      e.stopPropagation();
       if (action.disabled) return;
       action?.callback ? action?.callback(store.currentView?.selected?.snapshot, action) : invokeAction(action, isDeleteAction);
       parentRef?.current?.close?.();

web/libs/datamanager/src/components/MainView/DataViewOld/Table.js

@@ -125,7 +125,7 @@ export const DataView = injector(
         } else if (e.metaKey || e.ctrlKey) {
           window.open(`./?task=${itemID}`, "_blank");
         } else {
-          if (isFF(FF_OPTIC_2)) await store._sdk.lsf?.saveDraft();
+          if (isFF(FF_OPTIC_2)) store._sdk.lsf?.saveDraft();
           getRoot(view).startLabeling(item);
         }
       },

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

@@ -449,7 +449,7 @@ export class DataManager {
       const annotationID = annotation?.id ?? task.lastAnnotation?.id;
 
       // this.lsf.loadTask(task.id, annotationID);
-      this.lsf.selectTask(task, annotationID);
+      await this.lsf.selectTask(task, annotationID);
     }
   }
 

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

@@ -258,7 +258,7 @@ export class LSFWrapper {
       // for preload it's good to always load the first one
       const annotation = task.annotations[0];
 
-      this.selectTask(task, annotation?.id, true);
+      await this.selectTask(task, annotation?.id, true);
     }
 
     return false;
@@ -294,7 +294,7 @@ export class LSFWrapper {
       });
 
       // Add new data from received task
-      if (newTask) this.selectTask(newTask, annotationID, fromHistory);
+      if (newTask) await this.selectTask(newTask, annotationID, fromHistory);
     };
 
     if (isFF(FF_DEV_2887) && this.lsf?.commentStore?.hasUnsaved) {
@@ -316,14 +316,14 @@ export class LSFWrapper {
     this.datamanager.invoke("navigate", 'projects');
   }
 
-  selectTask(task, annotationID, fromHistory = false) {
+  async selectTask(task, annotationID, fromHistory = false) {
     const needsAnnotationsMerge = task && this.task?.id === task.id;
     const annotations = needsAnnotationsMerge ? [...this.annotations] : [];
 
     this.task = task;
 
     if (needsAnnotationsMerge) {
-      this.task.mergeAnnotations(annotations);
+      await this.task.mergeAnnotations(annotations);
     }
 
     this.loadUserLabels();
@@ -596,7 +596,7 @@ export class LSFWrapper {
   /** @private */
   onUpdateAnnotation = async (ls, annotation, extraData) => {
     const { task } = this;
-    const serializedAnnotation = this.prepareData(annotation);
+    const serializedAnnotation = await this.prepareData(annotation);
     const exitStream = this.shouldExitStream();
 
     Object.assign(serializedAnnotation, extraData);
@@ -677,42 +677,52 @@ export class LSFWrapper {
   };
 
   draftToast = (status) => {
-
     if (status === 200 || status === 201) this.datamanager.invoke("toast", { message: "Draft saved successfully", type: "info" });
     else if (status !== undefined) this.datamanager.invoke("toast", { message: "There was an error saving your draft", type: "error" });
+  }
 
+  needsDraftSave = (annotation) => {
+    if (annotation.history?.hasChanges && !annotation.draftSaved) return true;
+    if (annotation.history?.hasChanges && new Date(annotation.history.lastAdditionTime) > new Date(annotation.draftSaved)) return true;
+    return false;
   }
 
   saveDraft = async (target = null) => {
     const selected = target || this.lsf?.annotationStore?.selected;
-    const hasChanges = selected.history.hasChanges;
-    const submissionInProgress  = selected?.submissionStarted;
-    const draftIsFresh = new Date(selected.draftSaved) > new Date() - selected.autosaveDelay;
+    const hasChanges = this.needsDraftSave(selected);
 
-    if (selected?.isDraftSaving || draftIsFresh) {
+    if (selected?.isDraftSaving) {
       await when(() => !selected.isDraftSaving);
       this.draftToast(200);
     }
-    else if (hasChanges && selected && !submissionInProgress) {
+    else if (hasChanges && selected) {
       const res = await selected?.saveDraftImmediatelyWithResults();
       const status = res?.$meta?.status;
 
       this.draftToast(status);
     }
-  };
+  };  
 
   onSubmitDraft = async (studio, annotation, params = {}) => {
     const annotationDoesntExist = !annotation.pk;
-    const data = { body: this.prepareData(annotation, { draft: true }) }; // serializedAnnotation
-
+    const data = {
+      body: await this.prepareData(annotation, { draft: true }),
+    }; // serializedAnnotation
+    const hasChanges = this.needsDraftSave(annotation);
+    const showToast = params?.useToast && hasChanges;
+    // console.log('onSubmitDraft', params?.useToast, hasChanges);
+
+    if (params?.useToast) delete params.useToast;
+
     Object.assign(data.body, params);
 
     await this.saveUserLabels();
 
     if (annotation.draftId > 0) {
       // draft has been already created
       const res = await this.datamanager.apiCall("updateDraft", { draftID: annotation.draftId }, data);
-
+
+      showToast && this.draftToast(res?.$meta?.status);
       return res;
 
     } else {
@@ -728,6 +738,8 @@ export class LSFWrapper {
         );
       }
       response?.id && annotation.setDraftId(response?.id);
+      showToast && this.draftToast(response?.$meta?.status);
+
       return response;
     }
   };
@@ -778,7 +790,9 @@ export class LSFWrapper {
             body: { annotation: null },
           });
         } else {
-          const annotationData = { body: this.prepareData(currentAnnotation) };
+          const annotationData = {
+            body: await this.prepareData(currentAnnotation),
+          };
 
           await this.datamanager.apiCall("createDraftForTask", {
             taskID: this.task.id,
@@ -847,7 +861,7 @@ export class LSFWrapper {
   async submitCurrentAnnotation(eventName, submit, includeId = false, loadNext = true, exitStream) {
     const { taskID, currentAnnotation } = this;
     const unique_id = this.task.unique_lock_id;
-    const serializedAnnotation = this.prepareData(currentAnnotation, { includeId });
+    const serializedAnnotation = await this.prepareData(currentAnnotation, { includeId });
 
     if (unique_id) {
       serializedAnnotation.unique_id = unique_id;
@@ -890,7 +904,7 @@ export class LSFWrapper {
   }
 
   /** @private */
-  prepareData(annotation, { includeId, draft } = {}) {
+  async prepareData(annotation, { includeId, draft } = {}) {
     const userGenerate =
       !annotation.userGenerate || annotation.sentUserGenerate;
 
@@ -901,7 +915,7 @@ export class LSFWrapper {
 
     const result = {
       lead_time,
-      result: (draft ? annotation.versions.draft : annotation.serializeAnnotation()) ?? [],
+      result: (draft ? annotation.versions.draft : await annotation.serializeAnnotation()) ?? [],
       draft_id: annotation.draftId,
       parent_prediction: annotation.parent_prediction,
       parent_annotation: annotation.parent_annotation,

web/libs/datamanager/src/sdk/lsf-utils.ts

@@ -76,10 +76,10 @@ export const annotationToServer = (
   };
 };
 
-export const getAnnotationSnapshot = (c: LSFAnnotation) => ({
+export const getAnnotationSnapshot = async (c: LSFAnnotation) => ({
   id: c.id,
   pk: c.pk,
-  result: c.serializeAnnotation(),
+  result: await c.serializeAnnotation(),
   leadTime: c.leadTime,
   userGenerate: !!c.userGenerate,
   sentUserGenerate: !!c.sentUserGenerate,

web/libs/datamanager/src/stores/DataStores/tasks.js

@@ -48,9 +48,8 @@ export const create = (columns) => {
       },
     }))
     .actions((self) => ({
-      mergeAnnotations(annotations) {
-        // skip drafts, they'll be added later
-        self.annotations = annotations.filter(a => a.pk).map((c) => {
+      mergeAnnotations: flow(function *(annotations) {
+        const merged = annotations.filter(a => a.pk).map(async (c) => {
           const existingAnnotation = self.annotations.find(
             (ec) => ec.id === Number(c.pk),
           );
@@ -62,26 +61,31 @@ export const create = (columns) => {
               id: c.id,
               pk: c.pk,
               draftId: c.draftId,
-              result: c.serializeAnnotation(),
+              result: await c.serializeAnnotation(),
               leadTime: c.leadTime,
               userGenerate: !!c.userGenerate,
               sentUserGenerate: !!c.sentUserGenerate,
             };
           }
         });
-      },
 
-      updateAnnotation(annotation) {
+        // skip drafts, they'll be added later
+        self.annotations = yield Promise.all(merged);
+      }),
+
+      updateAnnotation: flow(function *(annotation) {
         const existingAnnotation = self.annotations.find((c) => {
           return c.id === Number(annotation.pk) || c.pk === annotation.pk;
         });
 
+        const snapshot = yield getAnnotationSnapshot(annotation);
+
         if (existingAnnotation) {
-          Object.assign(existingAnnotation, getAnnotationSnapshot(annotation));
+          Object.assign(existingAnnotation, snapshot);
         } else {
-          self.annotations.push(getAnnotationSnapshot(annotation));
+          self.annotations.push(snapshot);
         }
-      },
+      }),
 
       deleteAnnotation(annotation) {
         const index = self.annotations.findIndex((c) => {

web/libs/datamanager/src/types/Task.ts

@@ -98,5 +98,5 @@ export interface LSFAnnotation extends LSFAnnotationData {
 
   // editable: boolean;
 
-  serializeAnnotation(): APIResult[];
+  serializeAnnotation(): Promise<APIResult[]>;
 }

web/libs/datamanager/src/utils/bem.tsx

@@ -111,8 +111,8 @@ const assembleClass = (block: string, elem?: string, mix?: CNMix | CNMix[], mod?
   }
 
   const attachNamespace = (cls: string) => {
-    if (new RegExp(CSS_PREFIX).test(cls)) return cls;
-    else return `${CSS_PREFIX}${cls}`;
+    if (typeof cls !== 'string') console.error('Non-string classname: ', cls);
+    return String(cls).startsWith(CSS_PREFIX) ? cls : `${CSS_PREFIX}${cls}`;
   };
 
   return finalClass.map(attachNamespace).join(" ");

web/libs/editor/src/components/AnnotationTab/AnnotationTab.js

@@ -54,6 +54,7 @@ export const AnnotationTab = observer(({ store }) => {
 
           <Elem name="content">
             <Comments
+              annotationStore={as}
               commentStore={store.commentStore}
               cacheKey={`task.${store.task.id}`}
             />

web/libs/editor/src/components/App/App.js

@@ -264,7 +264,7 @@ class App extends Component {
                   panelsHidden={viewingAll}
                   currentEntity={as.selectedHistory ?? as.selected}
                   regions={as.selected.regionStore}
-                  showComments={!store.hasInterface('annotations:comments')}
+                  showComments={store.hasInterface('annotations:comments')}
                   focusTab={store.commentStore.tooltipMessage ? 'comments' : null}
                 >
                   {mainContent}

web/libs/editor/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);
   }, []);