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

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-930/copy-changes'",
-  "commit": "b7c11f044475893039f1e3c7daf093b273fa4d3c",
-  "date": "2024-04-18T16:23:40.000Z",
-  "branch": "fb-leap-930/copy-changes"
+  "message": "Merge branch 'develop' into 'fb-ml-release-blocker'",
+  "commit": "ca5ca9fde589a0d7fe849630cbb78703bb2cdc43",
+  "date": "2024-04-18T16:44:49.000Z",
+  "branch": "fb-ml-release-blocker"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-930/copy-changes'",
-  "commit": "b7c11f044475893039f1e3c7daf093b273fa4d3c",
-  "date": "2024-04-18T16:23:40.000Z",
-  "branch": "fb-leap-930/copy-changes"
+  "message": "Merge branch 'develop' into 'fb-ml-release-blocker'",
+  "commit": "ca5ca9fde589a0d7fe849630cbb78703bb2cdc43",
+  "date": "2024-04-18T16:44:49.000Z",
+  "branch": "fb-ml-release-blocker"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-930/copy-changes'",
-  "commit": "b7c11f044475893039f1e3c7daf093b273fa4d3c",
-  "date": "2024-04-18T16:23:40.000Z",
-  "branch": "fb-leap-930/copy-changes"
+  "message": "Merge branch 'develop' into 'fb-ml-release-blocker'",
+  "commit": "ca5ca9fde589a0d7fe849630cbb78703bb2cdc43",
+  "date": "2024-04-18T16:44:49.000Z",
+  "branch": "fb-ml-release-blocker"
 }

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

@@ -0,0 +1,64 @@
+import { inject, observer } from 'mobx-react';
+
+import { IconCheck, IconCross } from '../../assets/icons';
+import { Button } from '../../common/Button/Button';
+import { Block, Elem } from '../../utils/bem';
+import { Space } from '../../common/Space/Space';
+import Toggle from '../../common/Toggle/Toggle';
+
+import './AutoAcceptToggle.styl';
+
+// we need to inject all of them to trigger rerender on changes to suggestions
+const injector = inject(({ store }) => {
+  const annotation = store.annotationStore?.selected;
+  const suggestions = annotation?.suggestions;
+
+  return {
+    store,
+    annotation,
+    suggestions,
+  };
+});
+
+export const AutoAcceptToggle = injector(observer(({
+  store,
+  annotation,
+  suggestions,
+}) => {
+  if (!store.autoAnnotation) return null;
+
+  const withSuggestions = annotation.hasSuggestionsSupport && !store.forceAutoAcceptSuggestions;
+  const loading = store.awaitingSuggestions;
+
+  return (
+    <Block name="auto-accept">
+      {withSuggestions && (
+        <Elem name="wrapper" mod={{ loading }}>
+          <Space spread>
+            {suggestions.size > 0 ? (
+              <Space size="small">
+                <Elem name="info">
+                  {suggestions.size} suggestion{suggestions.size > 0 && 's'}
+                </Elem>
+                <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>
+            ) : (
+              <Toggle
+                checked={store.autoAcceptSuggestions}
+                onChange={(e) => store.setAutoAcceptSuggestions(e.target.checked)}
+                label="Auto-Accept Suggestions"
+                style={{ color: '#7F64FF' }}
+              />
+            )}
+          </Space>
+        </Elem>
+      )}
+      {loading && <Elem name="spinner" />}
+    </Block>
+  );
+}));

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

@@ -0,0 +1,55 @@
+.auto-accept
+  height 44px
+  display flex
+  align-items center
+  box-sizing border-box
+  background-color #fff
+  margin-left: 16px;
+
+  &__wrapper
+    width 100%
+
+    &_loading
+      // toggle will not be disabled, because it's usable even when loading
+      opacity: 0.5;
+
+  &__info
+    font-size: 16px;
+
+  &__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
+
+  &__spinner
+    width 16px
+    height 16px
+    border-radius 100%;
+    box-sizing border-box
+    border 2px solid #FFD666
+    border-right-color transparent
+    animation waiting-spin 1s linear infinite
+
+@keyframes waiting-spin
+  0%
+    transform rotate(0deg)
+
+  100%
+    transform rotate(360deg)

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

@@ -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,6 @@ 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/AnnotationTab/DynamicPreannotationsToggle.styl

@@ -10,25 +10,3 @@
 
   &__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/App/App.jsx

@@ -36,7 +36,6 @@ import { isDefined, sortAnnotations } from '../../utils/utilities';
  */
 import { Annotation } from './Annotation';
 import { AnnotationTab } from '../AnnotationTab/AnnotationTab';
-import { DynamicPreannotationsControl } from '../AnnotationTab/DynamicPreannotationsControl';
 import { BottomBar } from '../BottomBar/BottomBar';
 import Debug from '../Debug';
 import Grid from './Grid';
@@ -148,9 +147,6 @@ class App extends Component {
           {this.renderRelations(as.selected)}
         </Elem>
         {(!isFF(FF_DEV_3873)) && getRoot(as).hasInterface('infobar') && this._renderInfobar(as)}
-        {as.selected.hasSuggestionsSupport && (
-          <DynamicPreannotationsControl />
-        )}
       </Block>
     );
   }

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

@@ -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/stores/Annotation/Annotation.js

@@ -1342,7 +1342,7 @@ export const Annotation = types
     },
 
     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));