fix: LEAP-872: LEAP-935: Auto-Annotation fixes (#5714)

# Reject All fix Fix of small mistake in order to unblock Reject All button (`keys` is a function) # Auto-Accept Suggestions toggle It's moved to Bottom Bar, not blocking the view of annotation anymore. Style is uniform with Auto-Annotation toggle. When there are suggestions on a screen this toggle is replaced with Accept All/Reject All buttons, because it looks confusing to have both at the same time. <img width="322" alt="auto-annotation-suggestions" src="https://github.com/HumanSignal/label-studio/assets/1607227/00e0a8a7-d1bd-4365-a32d-5f3961028a81"> # Loading suggestions... Spinner is moved from Auto-Accept panel to Bottom Bar. While it's loading the toggle is dimmed for better visibility. But toggle is active because its value will be used only after request is finished, so it can still be useful. <img width="322" alt="auto-annotation-suggestions-spinner" src="https://github.com/HumanSignal/label-studio/assets/1607227/3e3818c0-5cf4-45bf-8f60-b9110344960f"> Now spinner is displayed for any kind of interactive annotations, not only Image ones: <img width="322" alt="auto-annotation-spinner" src="https://github.com/HumanSignal/label-studio/assets/1607227/db111b55-ea1e-4823-a525-d4647da9382f"> ### PR fulfills these requirements - [ ] Tests for the changes have been added/updated (for bug fixes/features) - [ ] Docs have been added/updated (for bug fixes/features) - [x] Best efforts were made to ensure docs/code are concise and coherent (checked for spelling/grammatical errors, commented out code, debug logs etc.) - [x] Self-reviewed and ran all changes on a local instance (for bug fixes/features) ### Describe the reason for change LEAP-872: Auto-Accept panel is blocking images LEAP-935: Reject All button not working Release PR: #5715 #### Change has impacts in these area(s) - [ ] Product design - [ ] Backend (Database) - [ ] Backend (API) - [x] Frontend ### Does this PR introduce a breaking change? - [ ] Yes, and covered entirely by feature flag(s) - [ ] Yes, and covered partially by feature flag(s) - [x] No - [ ] Not sure --------- Co-authored-by: Michael Malyuk <michael.malyuk@icloud.com> Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com> Co-authored-by: hlomzik <hlomzik@gmail.com> Co-authored-by: Gondragos <Gondragos@users.noreply.github.com>
HumanSignal · Apr 18, 2024 · addd5ef · addd5ef
1 parent ab883c3
commit addd5ef
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 103 deletions.
diff --git a/web/dist/apps/labelstudio/version.json b/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"
 }
diff --git a/web/dist/libs/datamanager/version.json b/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"
 }
diff --git a/web/dist/libs/editor/main.css b/web/dist/libs/editor/main.css
diff --git a/web/dist/libs/editor/main.css.map b/web/dist/libs/editor/main.css.map
diff --git a/web/dist/libs/editor/main.js b/web/dist/libs/editor/main.js
diff --git a/web/dist/libs/editor/main.js.map b/web/dist/libs/editor/main.js.map
diff --git a/web/dist/libs/editor/version.json b/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"
 }
diff --git a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx b/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>
+  );
+}));
diff --git a/web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.styl b/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)
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsControl.jsx b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsControl.jsx
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsControl.styl b/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsControl.styl
diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx b/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>

diff --git a/web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.styl b/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
diff --git a/web/libs/editor/src/components/App/App.jsx b/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>
     );
   }

diff --git a/web/libs/editor/src/components/BottomBar/Actions.jsx b/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>

diff --git a/web/libs/editor/src/stores/Annotation/Annotation.js b/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));