feat: LEAP-883: Custom Scripts (#5879)

- add `idAttr` parameter into `View` tag to make easier to work with
custom styles and so on
- add `lsfInit` and `beforeLsfDestroy` events into data manager for
better control of the life cycle

### PR fulfills these requirements
- [x] Commit message(s) and PR title follows the format
`[fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made`
ex. `fix: DEV-XXXX: Removed inconsistent code usage causing intermittent
errors`
- [ ] 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)



#### 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 (briefly explain the situation below)



### What level of testing was included in the change?
- [ ] e2e
- [ ] integration
- [ ] unit



### Which logical domain(s) does this change affect?
`DataManager`, `View`

---------

Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com>
Co-authored-by: hlomzik <hlomzik@users.noreply.github.com>
Co-authored-by: hlomzik <hlomzik@gmail.com>

docs/source/tags/view.md

@@ -15,6 +15,7 @@ The `View` element is used to configure the display of blocks, similar to the di
 | display | <code>block</code> \| <code>inline</code> |  |
 | [style] | <code>string</code> | CSS style string |
 | [className] | <code>string</code> | Class name of the CSS style to apply. Use with the Style tag |
+| [idAttr] | <code>string</code> | Unique ID attribute to use in CSS |
 | [visibleWhen] | <code>region-selected</code> \| <code>choice-selected</code> \| <code>no-region-selected</code> \| <code>choice-unselected</code> | Control visibility of the content. Can also be used with `when*` attributes below to narrow down visibility |
 | [whenTagName] | <code>string</code> | Use with visibleWhen. Narrow down visibility by tag name. For regions, use the name of the object tag, for choices, use the name of the choices tag |
 | [whenLabelValue] | <code>string</code> | Use with visibleWhen="region-selected". Narrow down visibility by label value |

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "reordering resolutions",
-  "commit": "f471a7ea61f3e0c75d3058015efe6b4e216011e3",
-  "date": "2024-05-24T14:29:55.000Z",
-  "branch": "fb-leap-913"
+  "message": "Add beforeSaveAnnotation event into accepting and rejecting actions",
+  "commit": "217f6c1a6faf3e7758c250fa74d98bc393109df9",
+  "date": "2024-05-28T13:44:01.000Z",
+  "branch": "fb-leap-883/custom-scripts"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "reordering resolutions",
-  "commit": "f471a7ea61f3e0c75d3058015efe6b4e216011e3",
-  "date": "2024-05-24T14:29:55.000Z",
-  "branch": "fb-leap-913"
+  "message": "Add beforeSaveAnnotation event into accepting and rejecting actions",
+  "commit": "217f6c1a6faf3e7758c250fa74d98bc393109df9",
+  "date": "2024-05-28T13:44:01.000Z",
+  "branch": "fb-leap-883/custom-scripts"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "reordering resolutions",
-  "commit": "f471a7ea61f3e0c75d3058015efe6b4e216011e3",
-  "date": "2024-05-24T14:29:55.000Z",
-  "branch": "fb-leap-913"
+  "message": "Add beforeSaveAnnotation event into accepting and rejecting actions",
+  "commit": "217f6c1a6faf3e7758c250fa74d98bc393109df9",
+  "date": "2024-05-28T13:44:01.000Z",
+  "branch": "fb-leap-883/custom-scripts"
 }

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

@@ -443,6 +443,7 @@ export class DataManager {
   }
 
   destroyLSF() {
+    this.invoke("beforeLsfDestroy", this, this.lsf?.lsfInstance);
     this.lsf?.destroy();
     this.lsf = undefined;
   }

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

@@ -215,6 +215,8 @@ export class LSFWrapper {
       if (isFF(FF_DEV_2887)) {
         new CommentsSdk(this.lsfInstance, this.datamanager);
       }
+
+      this.datamanager.invoke("lsfInit", this.datamanager, this.lsfInstance);
     } catch (err) {
       console.error("Failed to initialize LabelStudio", settings);
       console.error(err);

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

@@ -440,6 +440,8 @@ const AnnotationStoreModel = types
           .filter((r) => r.area.classification)
           .forEach((r) => r.from_name.updateFromResult?.(r.mainValue));
       });
+
+      getEnv(self).events.invoke("selectHistory", self.selectedHistory);
     }
 
     function addAnnotationFromPrediction(entity) {

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

@@ -15,7 +15,14 @@ import Settings from "./SettingsStore";
 import Task from "./TaskStore";
 import { UserExtended } from "./UserStore";
 import { UserLabels } from "./UserLabels";
-import { FF_DEV_1536, FF_LSDV_4620_3_ML, FF_LSDV_4998, FF_SIMPLE_INIT, isFF } from "../utils/feature-flags";
+import {
+  FF_CUSTOM_SCRIPT,
+  FF_DEV_1536,
+  FF_LSDV_4620_3_ML,
+  FF_LSDV_4998,
+  FF_SIMPLE_INIT,
+  isFF,
+} from "../utils/feature-flags";
 import { CommentStore } from "./Comment/CommentStore";
 import { destroy as destroySharedStore } from "../mixins/SharedChoiceStore/mixin";
 
@@ -543,12 +550,25 @@ export default types
 
       if (!entity.validate()) return;
 
-      entity.sendUserGenerate();
+      if (!isFF(FF_CUSTOM_SCRIPT)) {
+        entity.sendUserGenerate();
+      }
       handleSubmittingFlag(async () => {
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          const allowedToSave = await getEnv(self).events.invoke("beforeSaveAnnotation", self, entity);
+          if (allowedToSave && allowedToSave.some((x) => x === false)) return;
+
+          entity.sendUserGenerate();
+        }
         await getEnv(self).events.invoke(event, self, entity);
         self.incrementQueuePosition();
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          entity.dropDraft();
+        }
       });
-      entity.dropDraft();
+      if (!isFF(FF_CUSTOM_SCRIPT)) {
+        entity.dropDraft();
+      }
     }
 
     function updateAnnotation(extraData) {
@@ -561,11 +581,21 @@ export default types
       if (!entity.validate()) return;
 
       handleSubmittingFlag(async () => {
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          const allowedToSave = await getEnv(self).events.invoke("beforeSaveAnnotation", self, entity);
+          if (allowedToSave && allowedToSave.some((x) => x === false)) return;
+        }
         await getEnv(self).events.invoke("updateAnnotation", self, entity, extraData);
         self.incrementQueuePosition();
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          entity.dropDraft();
+          !entity.sentUserGenerate && entity.sendUserGenerate();
+        }
       });
-      entity.dropDraft();
-      !entity.sentUserGenerate && entity.sendUserGenerate();
+      if (!isFF(FF_CUSTOM_SCRIPT)) {
+        entity.dropDraft();
+        !entity.sentUserGenerate && entity.sendUserGenerate();
+      }
     }
 
     function skipTask(extraData) {
@@ -591,6 +621,10 @@ export default types
 
         entity.beforeSend();
         if (!entity.validate()) return;
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          const allowedToSave = await getEnv(self).events.invoke("beforeSaveAnnotation", self, entity);
+          if (allowedToSave && allowedToSave.some((x) => x === false)) return;
+        }
 
         const isDirty = entity.history.canUndo;
 
@@ -608,6 +642,10 @@ export default types
 
         entity.beforeSend();
         if (!entity.validate()) return;
+        if (isFF(FF_CUSTOM_SCRIPT)) {
+          const allowedToSave = await getEnv(self).events.invoke("beforeSaveAnnotation", self, entity);
+          if (allowedToSave && allowedToSave.some((x) => x === false)) return;
+        }
 
         const isDirty = entity.history.canUndo;
 

web/libs/editor/src/tags/visual/View.jsx

@@ -28,6 +28,7 @@ import { AnnotationMixin } from "../../mixins/AnnotationMixin";
  * @param {block|inline} display
  * @param {string} [style] CSS style string
  * @param {string} [className] - Class name of the CSS style to apply. Use with the Style tag
+ * @param {string} [idAttr] - Unique ID attribute to use in CSS
  * @param {region-selected|choice-selected|no-region-selected|choice-unselected} [visibleWhen] Control visibility of the content. Can also be used with `when*` attributes below to narrow down visibility
  * @param {string} [whenTagName] Use with visibleWhen. Narrow down visibility by tag name. For regions, use the name of the object tag, for choices, use the name of the choices tag
  * @param {string} [whenLabelValue] Use with visibleWhen="region-selected". Narrow down visibility by label value
@@ -37,6 +38,7 @@ const TagAttrs = types.model({
   classname: types.optional(types.string, ""),
   display: types.optional(types.string, "block"),
   style: types.maybeNull(types.string),
+  idattr: types.optional(types.string, ""),
 });
 
 const Model = types.model({
@@ -113,7 +115,7 @@ const HtxView = observer(({ item }) => {
   }
 
   return (
-    <div className={item.classname} style={style}>
+    <div id={item.idattr} className={item.classname} style={style}>
       {Tree.renderChildren(item, item.annotation)}
     </div>
   );

web/libs/editor/src/utils/feature-flags.ts

@@ -337,6 +337,8 @@ export const FF_SAFE_TEXT = "fflag_fix_leap_466_text_sanitization";
 
 export const FF_MULTI_OBJECT_HOTKEYS = "fflag_fix_leap_246_multi_object_hotkeys_160124_short";
 
+export const FF_CUSTOM_SCRIPT = "fflag_feat_all_leap_883_custom_script_270524_short";
+
 Object.assign(window, {
   APP_SETTINGS: {
     ...(window.APP_SETTINGS ?? {}),