feat: OPTIC-107: Draft saving on view all

label_studio/frontend/dist/dm/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "feat: DIA-474: [FE] add new column for DE",
-  "commit": "a8e6e5e6cd6601d765a7f0abd4efa87cec1a3fe5",
+  "message": "feat: OPTIC-107: Draft saving on view all",
+  "commit": "b2006083fb40a3d5a1ee7979ff24497864dfcdac",
   "branch": "master",
-  "date": "2024-01-03T07:13:20Z"
+  "date": "2024-01-04T09:37:55Z"
 }

label_studio/frontend/dist/lsf/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-344: View all annotation tab is not loading",
-  "commit": "eb1194c1e8ad5f9c0e725b2955dbc202f169649b",
+  "message": "feat: OPTIC-107: Draft saving on view all",
+  "commit": "08aa5b599a64e4b90956b861739df273946ee738",
   "branch": "master",
-  "date": "2024-01-08T09:48:32Z"
+  "date": "2024-01-08T13:19:30Z"
 }

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

@@ -171,6 +171,7 @@ const RelationItemObserver = observer(({ relation, startNode, endNode, visible,
       endNode={endNode}
       direction={relation.direction}
       visible={visibility}
+      labels={relation.selectedValues}
       {...rest}
     />
   ) : null;
@@ -229,7 +230,6 @@ class RelationsOverlay extends PureComponent {
           rootRef={this.rootNode}
           startNode={relation.node1}
           endNode={relation.node2}
-          labels={relation.relations?.selectedValues()}
           dimm={hasHighlight && !highlighted}
           highlight={highlighted}
           visible={highlighted || visible}

web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.styl

@@ -31,6 +31,7 @@
 
   &__icon
     width 24px
+    min-height 24px
     display flex
     flex none
     position relative

web/libs/editor/src/components/SidePanels/DetailsPanel/Relations.tsx

@@ -56,9 +56,9 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
     const { direction } = relation;
 
     switch (direction) {
-      case 'left': return <IconRelationLeft/>;
-      case 'right': return <IconRelationRight/>;
-      case 'bi': return <IconRelationBi/>;
+      case 'left': return <IconRelationLeft data-direction={relation.direction}/>;
+      case 'right': return <IconRelationRight data-direction={relation.direction}/>;
+      case 'bi': return <IconRelationBi data-direction={relation.direction}/>;
       default: return null;
     }
   }, [relation.direction]);
@@ -92,6 +92,7 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
             {(hovered || relation.showMeta) && relation.hasRelations && (
               <Button
                 primary={relation.showMeta}
+                aria-label={`${relation.showMeta ? 'Hide' : 'Show'} Relation Labels`}
                 type={relation.showMeta ? undefined : 'text'}
                 onClick={relation.toggleMeta}
                 style={{ padding: 0 }}
@@ -102,14 +103,14 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
           </Elem>
           <Elem name="action">
             {(hovered || !relation.visible) && (
-              <Button type="text" onClick={relation.toggleVisibility}>
+              <Button type="text" onClick={relation.toggleVisibility} aria-label={`${relation.visible ? 'Hide' : 'Show'} Relation`}>
                 {relation.visible ? <IconEyeOpened/> : <IconEyeClosed />}
               </Button>
             )}
           </Elem>
           <Elem name="action">
             {hovered && (
-              <Button type="text" danger onClick={() => {
+              <Button type="text" danger aria-label="Delete Relation" onClick={() => {
                 relation.node1.setHighlight(false);
                 relation.node2.setHighlight(false);
                 relation.parent.deleteRelation(relation);
@@ -127,10 +128,9 @@ const RelationItem: FC<{relation: any}> = observer(({ relation }) => {
   );
 });
 
-const RelationMeta: FC<any> = ({ relation }) => {
-  const { relations } = relation;
-  const { children, choice } = relations;
-  const selected = relations.getSelected().map((v: any) => v.value);
+const RelationMeta: FC<any> = observer(({ relation }) => {
+  const { selectedValues, control } = relation;
+  const { children, choice } = control;
 
   const selectionMode = useMemo(() => {
     return choice === 'multiple' ? 'multiple' : undefined;
@@ -139,17 +139,16 @@ const RelationMeta: FC<any> = ({ relation }) => {
   const onChange = useCallback((val: any) => {
     const values: any[] = wrapArray(val);
 
-    relations.unselectAll();
-    values.forEach(v => relations.findRelation(v).setSelected(true));
-  }, []);
+    relation.setRelations(values);
+  }, [relation]);
 
   return (
     <Block name="relation-meta">
       <Select
         mode={selectionMode}
         style={{ width: '100%' }}
         placeholder="Select labels"
-        defaultValue={selected}
+        value={selectedValues}
         onChange={onChange}
       >
         {children.map((c: any) => (
@@ -160,6 +159,6 @@ const RelationMeta: FC<any> = ({ relation }) => {
       </Select>
     </Block>
   );
-};
+});
 
 export const Relations = observer(RealtionsComponent);

web/libs/editor/src/components/TopBar/Actions.js

@@ -15,6 +15,7 @@ export const Actions = ({ store }) => {
   const isViewAll = annotationStore.viewingAll;
 
   const onToggleVisibility = useCallback(() => {
+    !isViewAll && entity.saveDraftImmediatelyWithResults({ useToast: true });
     annotationStore.toggleViewingAllAnnotations();
   }, [annotationStore]);
 

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

@@ -19,6 +19,11 @@ export const TopBar = observer(({ store }) => {
 
   const isViewAll = annotationStore?.viewingAll === true;
 
+  const toggleViewAll = () => {
+    !isViewAll && entity.saveDraftImmediatelyWithResults({ useToast: true });
+    annotationStore.toggleViewingAllAnnotations();
+  };
+
   return store ? (
     <Block name="topbar" mod={{ newLabelingUI: isFF(FF_DEV_3873) }}>
       {isFF(FF_DEV_3873) ? (
@@ -31,7 +36,7 @@ export const TopBar = observer(({ store }) => {
                 icon={<IconViewAll />}
                 type="text"
                 aria-label="View All"
-                onClick={() => annotationStore.toggleViewingAllAnnotations()}
+                onClick={toggleViewAll}
                 primary={ isViewAll }
                 style={{
                   height: 36,

web/libs/editor/src/core/TimeTraveller.js

@@ -9,7 +9,7 @@ const TimeTraveller = types
     undoIdx: 0,
     targetPath: '',
     skipNextUndoState: types.optional(types.boolean, false),
-
+    lastAdditionTime: types.optional(types.Date, new Date()),
     createdIdx: 0,
   })
   .volatile(() => ({
@@ -102,6 +102,7 @@ const TimeTraveller = types
         self.undoIdx = self.history.length - 1;
         replaceNextUndoState = false;
         changesDuringFreeze = false;
+        self.lastAdditionTime = new Date();
       },
 
       reinit(force = true) {

web/libs/editor/src/stores/Annotation/Annotation.js

@@ -31,6 +31,12 @@ import { UserExtended } from '../UserStore';
 
 const hotkeys = Hotkey('Annotations', 'Annotations');
 
+const TrackedState = types
+  .model('TrackedState', {
+    areas: types.map(Area),
+    relationStore: types.optional(RelationStore, {}),
+  });
+
 export const Annotation = types
   .model('Annotation', {
     id: types.identifier,
@@ -70,19 +76,19 @@ export const Annotation = types
     ground_truth: types.optional(types.boolean, false),
     skipped: false,
 
-    history: types.optional(TimeTraveller, { targetPath: '../areas' }),
+    // This field stores all data that affects undo/redo history
+    // It should contain real objects to be able to work with them through snapshots
+    // Annotation will use getters to get them at the top level
+    // This data is never redefined directly, it's empty at the start
+    trackedState: types.optional(TrackedState, {}),
+    history: types.optional(TimeTraveller, { targetPath: '../trackedState' }),
 
     dragMode: types.optional(types.boolean, false),
 
     editable: types.optional(types.boolean, true),
     readonly: types.optional(types.boolean, false),
 
     relationMode: types.optional(types.boolean, false),
-    relationStore: types.optional(RelationStore, {
-      relations: [],
-    }),
-
-    areas: types.map(Area),
 
     suggestions: types.map(Area),
 
@@ -98,6 +104,14 @@ export const Annotation = types
 
     ...(isFF(FF_DEV_3391) ? { root: Types.allModelsTypes() } : {}),
   })
+  .views(self => ({
+    get areas() {
+      return self.trackedState.areas;
+    },
+    get relationStore() {
+      return self.trackedState.relationStore;
+    },
+  }))
   .preProcessSnapshot(sn => {
     // sn.draft = Boolean(sn.draft);
     let user = sn.user ?? sn.completed_by ?? undefined;
@@ -188,7 +202,7 @@ export const Annotation = types
       return self.results
         .map(r => r.serialize())
         .filter(Boolean)
-        .concat(self.relationStore.serializeAnnotation());
+        .concat(self.relationStore.serialize());
     },
 
     get serializedSelection() {
@@ -696,11 +710,11 @@ export const Annotation = types
       if (self.autosave) self.autosave.flush();
     },
 
-    async saveDraftImmediatelyWithResults() {
+    async saveDraftImmediatelyWithResults(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(null);
+      const res = await self.saveDraft(params);
 
       return res;
     },
@@ -928,7 +942,7 @@ export const Annotation = types
       const result = self.results
         .map(r => r.serialize(options))
         .filter(Boolean)
-        .concat(self.relationStore.serializeAnnotation(options));
+        .concat(self.relationStore.serialize(options));
 
       document.body.style.cursor = 'default';