fix: LEAP-872: LEAP-935: Auto-Annotation fixes

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "fixes for LEAP-872, LEAP-935, LEAP-942, including moving the",
+  "commit": "aee7114e2aa471825bc343e35d7001dc6db3e79b",
+  "date": "2024-04-10T04:07:25.000Z",
+  "branch": "dev/move-auto-accept"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "fixes for LEAP-872, LEAP-935, LEAP-942, including moving the",
+  "commit": "aee7114e2aa471825bc343e35d7001dc6db3e79b",
+  "date": "2024-04-10T04:07:25.000Z",
+  "branch": "dev/move-auto-accept"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "fix: LEAP-849: LEAP-933: Security vulnerability fixes",
-  "commit": "f0086f25c287f6efc5e27acd87bb0587f0316a3f",
-  "date": "2024-04-09T17:49:03.000Z",
-  "branch": "fb-leap-849"
+  "message": "fixes for LEAP-872, LEAP-935, LEAP-942, including moving the",
+  "commit": "aee7114e2aa471825bc343e35d7001dc6db3e79b",
+  "date": "2024-04-10T04:07:25.000Z",
+  "branch": "dev/move-auto-accept"
 }

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

@@ -0,0 +1,57 @@
+import { inject, observer } from 'mobx-react';
+import { useEffect } from 'react';
+
+import { Block, Elem } from '../../utils/bem';
+import { Button } from '../../common/Button/Button';
+import { IconCheck, IconCross } from '../../assets/icons';
+import { Space } from '../../common/Space/Space';
+import Toggle from '../../common/Toggle/Toggle';
+
+import './AutoAcceptToggle.styl';
+
+const injector = inject(({ store }) => {
+  const annotation = store.annotationStore?.selected;
+  const suggestions = annotation?.suggestions;
+
+  return {
+    store,
+    annotation,
+    suggestions,
+    interfaces: Array.from(store?.interfaces),
+  };
+});
+
+export const AutoAcceptToggle = injector(observer(({
+  store,
+  annotation,
+  suggestions,
+}) => {
+  return store.autoAnnotation && !store.forceAutoAcceptSuggestions ? (
+    <Block name="auto-accept">
+      <Elem name="wrapper">
+        <Space spread>
+          <Toggle
+            checked={store.autoAcceptSuggestions}
+            onChange={(e) => {
+              const checked = e.target.checked;
+
+              store.setAutoAcceptSuggestions(checked);
+            }}
+            label="Auto-Accept Suggestions"
+            style={{ color: '#7F64FF' }}
+          />
+          {suggestions.size > 0 && (
+            <Space size="small">
+              <Elem name="action" tag={Button} mod={{ type: 'reject' }} onClick={() => annotation.rejectAllSuggestions()}>
+                <IconCross/>
+              </Elem>
+              <Elem name="action" tag={Button} mod={{ type: 'accept' }} onClick={() => annotation.acceptAllSuggestions()}>
+                <IconCheck/>
+              </Elem>
+            </Space>
+          )}
+        </Space>
+      </Elem>
+    </Block>
+  ) : null;
+}));

web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.styl

@@ -0,0 +1,34 @@
+.auto-accept
+  top 0
+  height 44px
+  display flex
+  z-index 100
+  align-items center
+  position sticky
+  box-sizing border-box
+  background-color #fff
+
+  &__wrapper
+    width 100%
+
+  &__action
+    padding 0
+    margin 0
+    margin 2px
+    width 28px
+    height 28px
+    display flex
+    align-items center
+    justify-content center
+    border-radius 100%
+    color rgba(#000, 0.6)
+    background-color rgba(#000, 0.1)
+
+    &_type
+      &_accept svg
+        width 15px
+        height 10px
+
+      &_reject svg
+        width 12.5px
+        height 12.5px

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

@@ -1,30 +1,13 @@
 import { inject, observer } from 'mobx-react';
 import { useEffect } from 'react';
-import { IconCheck, IconCross } from '../../assets/icons';
-import { Button } from '../../common/Button/Button';
 import { Space } from '../../common/Space/Space';
 import Toggle from '../../common/Toggle/Toggle';
 import ToolsManager from '../../tools/Manager';
 import { Block, Elem } from '../../utils/bem';
 import './DynamicPreannotationsToggle.styl';
 
-const injector = inject(({ store }) => {
-  const annotation = store.annotationStore?.selected;
-  const suggestions = annotation?.suggestions;
 
-  return {
-    store,
-    annotation,
-    suggestions,
-    interfaces: Array.from(store?.interfaces),
-  };
-});
-
-export const DynamicPreannotationsToggle = injector(observer(({
-  store,
-  annotation,
-  suggestions,
-}) => {
+export const DynamicPreannotationsToggle = inject('store')(observer(({ store }) => {
   const enabled = store.hasInterface('auto-annotation') && !store.forceAutoAnnotation;
 
   useEffect(() => {
@@ -49,16 +32,7 @@ export const DynamicPreannotationsToggle = injector(observer(({
             label="Auto-Annotation"
             style={{ color: '#7F64FF' }}
           />
-          {suggestions.size > 0 && (
-            <Space size="small">
-              <Elem name="action" tag={Button} mod={{ type: 'reject' }} onClick={() => annotation.rejectAllSuggestions()}>
-                <IconCross/>
-              </Elem>
-              <Elem name="action" tag={Button} mod={{ type: 'accept' }} onClick={() => annotation.acceptAllSuggestions()}>
-                <IconCheck/>
-              </Elem>
-            </Space>
-          )}
+
         </Space>
       </Elem>
     </Block>

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

@@ -147,10 +147,7 @@ class App extends Component {
           {<Annotation root={root} annotation={as.selected} />}
           {this.renderRelations(as.selected)}
         </Elem>
-        {(!isFF(FF_DEV_3873)) && getRoot(as).hasInterface('infobar') && this._renderInfobar(as)}
-        {as.selected.hasSuggestionsSupport && (
-          <DynamicPreannotationsControl />
-        )}
+        {(!isFF(FF_DEV_3873)) && getRoot(as).hasInterface('infobar') && this._renderInfobar(as)}        
       </Block>
     );
   }

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

@@ -3,6 +3,7 @@ import { Button } from '../../common/Button/Button';
 import { Elem } from '../../utils/bem';
 import { EditingHistory } from './HistoryActions';
 import { DynamicPreannotationsToggle } from '../AnnotationTab/DynamicPreannotationsToggle';
+import { AutoAcceptToggle } from '../AnnotationTab/AutoAcceptToggle';
 import { GroundTruth } from '../CurrentEntity/GroundTruth';
 import { Tooltip } from '../../common/Tooltip/Tooltip';
 
@@ -49,9 +50,9 @@ export const Actions = ({ store }) => {
       {store.hasInterface('ground-truth') && <GroundTruth entity={entity}/>}
 
       {!isViewAll && (
-
         <Elem name="section">
           <DynamicPreannotationsToggle />
+	  <AutoAcceptToggle />
         </Elem>
       )}
     </Elem>

web/libs/editor/src/components/ImageView/SuggestionControls.js

@@ -84,14 +84,22 @@ export const SuggestionControls = observer(({ item, useLayer }) => {
           cornerRadius={16}
         />
         <ControlButton
-          onClick={() => item.annotation.rejectSuggestion(item.id)}
+          onClick={() => {
+            const ann = item.annotation;
+            ann.rejectSuggestion(item.id);
+            ann.deleteAllDynamicregions(true);
+          }}
           fill="#DD0000"
           iconColor="#fff"
           icon={IconCross}
         />
         <ControlButton
           x={32}
-          onClick={() => item.annotation.acceptSuggestion(item.id)}
+          onClick={() => {
+            const ann = item.annotation;            
+            ann.acceptSuggestion(item.id);
+            ann.deleteAllDynamicregions(true);
+          }}
           fill="#98C84E"
           iconColor="#fff"
           icon={IconCheck}

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

@@ -11,7 +11,6 @@ import Area from '../../regions/Area';
 import Result from '../../regions/Result';
 import Utils from '../../utils';
 import {
-  FF_DEV_1284,
   FF_DEV_1598,
   FF_DEV_2100,
   FF_DEV_2432,
@@ -1129,9 +1128,7 @@ export const Annotation = types
 
       self.isSuggestionsAccepting = true;
       if (getRoot(self).autoAcceptSuggestions) {
-        if (isFF(FF_DEV_1284)) {
-          self.history.setReplaceNextUndoState(true);
-        }
+        self.history.setReplaceNextUndoState(true);
         self.acceptAllSuggestions();
       } else {
         self.suggestions.forEach((suggestion) => {
@@ -1141,23 +1138,14 @@ export const Annotation = types
           // If we cannot display suggestions on object/control then just accept them
           if (!supportSuggestions) {
             self.acceptSuggestion(suggestion.id);
-            if (isFF(FF_DEV_1284)) {
-              // This is necessary to prevent the occurrence of new steps in the history after updating objects at the end of current method
-              history.setReplaceNextUndoState(true);
-            }
+            // This is necessary to prevent the occurrence of new steps in the history after updating objects at the end of current method
+            history.setReplaceNextUndoState(true);            
           }
         });
       }
       self.isSuggestionsAccepting = false;
-
-      if (!isFF(FF_DEV_1284)) {
-        history.freeze('richtext:suggestions');
-      }
-      self.names.forEach(tag => tag.needsUpdate?.({ suggestions: true }));
-      if (!isFF(FF_DEV_1284)) {
-        history.setReplaceNextUndoState(true);
-        history.unfreeze('richtext:suggestions');
-      }
+
+      self.names.forEach(tag => tag.needsUpdate?.({ suggestions: true }));      
     },
 
     cleanClassificationAreas() {
@@ -1338,14 +1326,14 @@ export const Annotation = types
       Array.from(self.suggestions.keys()).forEach((id) => {
         self.acceptSuggestion(id);
       });
-      self.deleteAllDynamicregions(isFF(FF_DEV_1284));
+      self.deleteAllDynamicregions(true);
     },
 
     rejectAllSuggestions() {
-      Array.from(self.suggestions.keys).forEach((id) => {
+      Array.from(self.suggestions.keys()).forEach((id) => {
         self.suggestions.delete(id);
       });
-      self.deleteAllDynamicregions(isFF(FF_DEV_1284));
+      self.deleteAllDynamicregions(true);
     },
 
     deleteAllDynamicregions(silent = false) {