feat: LEAP-1351: LSF customization for bulk annotation

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

@@ -25,7 +25,14 @@ import "../../tags/visual";
 import { Space } from "../../common/Space/Space";
 import { Button } from "../../common/Button/Button";
 import { Block, Elem } from "../../utils/bem";
-import { FF_DEV_1170, FF_DEV_3873, FF_LSDV_4620_3_ML, FF_SIMPLE_INIT, isFF } from "../../utils/feature-flags";
+import {
+  FF_BULK_ANNOTATION,
+  FF_DEV_1170,
+  FF_DEV_3873,
+  FF_LSDV_4620_3_ML,
+  FF_SIMPLE_INIT,
+  isFF,
+} from "../../utils/feature-flags";
 import { sanitizeHtml } from "../../utils/html";
 import { reactCleaner } from "../../utils/reactCleaner";
 import { guidGenerator } from "../../utils/unique";
@@ -219,6 +226,7 @@ class App extends Component {
       </Block>
     );
 
+    const shouldShowPanels = isDefined(store) && (!isFF(FF_BULK_ANNOTATION) || !store.hasInterface("annotation:bulk"));
     const outlinerEnabled = isFF(FF_DEV_1170);
     const newUIEnabled = isFF(FF_DEV_3873);
 
@@ -260,24 +268,33 @@ class App extends Component {
           >
             {outlinerEnabled ? (
               newUIEnabled ? (
-                <SideTabsPanels
-                  panelsHidden={viewingAll}
-                  currentEntity={as.selectedHistory ?? as.selected}
-                  regions={as.selected.regionStore}
-                  showComments={store.hasInterface("annotations:comments")}
-                  focusTab={store.commentStore.tooltipMessage ? "comments" : null}
-                >
-                  {mainContent}
-                  {store.hasInterface("topbar") && <BottomBar store={store} />}
-                </SideTabsPanels>
-              ) : (
+                shouldShowPanels ? (
+                  <SideTabsPanels
+                    panelsHidden={viewingAll}
+                    currentEntity={as.selectedHistory ?? as.selected}
+                    regions={as.selected.regionStore}
+                    showComments={store.hasInterface("annotations:comments")}
+                    focusTab={store.commentStore.tooltipMessage ? "comments" : null}
+                  >
+                    {mainContent}
+                    {store.hasInterface("topbar") && <BottomBar store={store} />}
+                  </SideTabsPanels>
+                ) : (
+                  <>
+                    {mainContent}
+                    {store.hasInterface("topbar") && <BottomBar store={store} />}
+                  </>
+                )
+              ) : shouldShowPanels ? (
                 <SidePanels
                   panelsHidden={viewingAll}
                   currentEntity={as.selectedHistory ?? as.selected}
                   regions={as.selected.regionStore}
                 >
                   {mainContent}
                 </SidePanels>
+              ) : (
+                <>{mainContent}</>
               )
             ) : (
               <>

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

@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import { Block, Elem } from "../../utils/bem";
 import { Actions } from "./Actions";
-import { Controls } from "./Controls";
+import { Controls, CustomControls } from "./Controls";
 import "./BottomBar.styl";
-import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
+import { FF_BULK_ANNOTATION, FF_DEV_3873, isFF } from "../../utils/feature-flags";
 
 export const BottomBar = observer(({ store }) => {
   const annotationStore = store.annotationStore;
@@ -20,7 +20,11 @@ export const BottomBar = observer(({ store }) => {
       <Elem name="group">
         {store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
           <Elem name="section" mod={{ flat: true }}>
-            <Controls annotation={entity} />
+            {isFF(FF_BULK_ANNOTATION) && store.hasInterface("controls:custom") ? (
+              <CustomControls annotation={entity} />
+            ) : (
+              <Controls annotation={entity} />
+            )}
           </Elem>
         )}
       </Elem>

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

@@ -35,6 +35,45 @@ const controlsInjector = inject(({ store }) => {
   };
 });
 
+const CustomControl = observer(({ button }) => {
+  const look = button.disabled ? "disabled" : button.look ?? "primary";
+  const [waiting, setWaiting] = useState(false);
+  const clickHandler = useCallback(
+    async (e) => {
+      setWaiting(true);
+      await button.onClick(e, button);
+      setWaiting(false);
+    },
+    [button, button.onClick],
+  );
+  return (
+    <ButtonTooltip key={button.key} title={button.tooltip}>
+      <Button
+        aria-label={button.ariaLabel}
+        disabled={button.disabled}
+        look={look}
+        onClick={clickHandler}
+        waiting={waiting}
+      >
+        {button.title}
+      </Button>
+    </ButtonTooltip>
+  );
+});
+
+export const CustomControls = controlsInjector(
+  observer(({ store }) => {
+    const buttons = store.controlButtons;
+    return (
+      <Block name="controls">
+        {buttons.map((button) => (
+          <CustomControl button={button} />
+        ))}
+      </Block>
+    );
+  }),
+);
+
 export const Controls = controlsInjector(
   observer(({ store, history, annotation }) => {
     const isReview = store.hasInterface("review") || annotation.canBeReviewed;

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

@@ -2,6 +2,7 @@ import { IconCopy, IconInfo, IconViewAll, LsSettings, LsTrash } from "../../asse
 import { Button } from "../../common/Button/Button";
 import { Tooltip } from "../../common/Tooltip/Tooltip";
 import { Elem } from "../../utils/bem";
+import { FF_BULK_ANNOTATION, isFF } from "../../utils/feature-flags";
 import { GroundTruth } from "../CurrentEntity/GroundTruth";
 import { EditingHistory } from "./HistoryActions";
 import { confirm } from "../../common/Modal/Modal";
@@ -13,14 +14,15 @@ export const Actions = ({ store }) => {
   const saved = !entity.userGenerate || entity.sentUserGenerate;
   const isPrediction = entity?.type === "prediction";
   const isViewAll = annotationStore.viewingAll;
+  const isBulkMode = isFF(FF_BULK_ANNOTATION) && store.hasInterface("annotation:bulk");
 
   const onToggleVisibility = useCallback(() => {
     annotationStore.toggleViewingAllAnnotations();
   }, [annotationStore]);
 
   return (
     <Elem name="section">
-      {store.hasInterface("annotations:view-all") && (
+      {store.hasInterface("annotations:view-all") && !isBulkMode && (
         <Tooltip title="View all annotations">
           <Button
             icon={<IconViewAll />}
@@ -37,11 +39,11 @@ export const Actions = ({ store }) => {
         </Tooltip>
       )}
 
-      {!isViewAll && store.hasInterface("ground-truth") && <GroundTruth entity={entity} />}
+      {!isViewAll && !isBulkMode && store.hasInterface("ground-truth") && <GroundTruth entity={entity} />}
 
       {!isPrediction && !isViewAll && store.hasInterface("edit-history") && <EditingHistory entity={entity} />}
 
-      {!isViewAll && store.hasInterface("annotations:delete") && (
+      {!isViewAll && !isBulkMode && store.hasInterface("annotations:delete") && (
         <Tooltip title="Delete annotation">
           <Button
             icon={<LsTrash />}
@@ -66,7 +68,7 @@ export const Actions = ({ store }) => {
         </Tooltip>
       )}
 
-      {!isViewAll && store.hasInterface("annotations:add-new") && saved && (
+      {!isViewAll && !isBulkMode && store.hasInterface("annotations:add-new") && saved && (
         <Tooltip title={`Create copy of current ${entity.type}`}>
           <Button
             icon={<IconCopy style={{ width: 36, height: 36 }} />}
@@ -106,7 +108,7 @@ export const Actions = ({ store }) => {
         }}
       />
 
-      {store.description && store.hasInterface("instruction") && (
+      {store.description && store.hasInterface("instruction") && !isBulkMode && (
         <Button
           icon={<IconInfo style={{ width: 16, height: 16 }} />}
           primary={store.showingDescription}

web/libs/editor/src/components/TopBar/Controls.jsx

@@ -31,6 +31,45 @@ const controlsInjector = inject(({ store }) => {
   };
 });
 
+const CustomControl = observer(({ button }) => {
+  const look = button.disabled ? "disabled" : button.look ?? "primary";
+  const [waiting, setWaiting] = useState(false);
+  const clickHandler = useCallback(
+    async (e) => {
+      setWaiting(true);
+      await button.onClick(e, button);
+      setWaiting(false);
+    },
+    [button, button.onClick],
+  );
+  return (
+    <ButtonTooltip key={button.key} title={button.tooltip}>
+      <Button
+        aria-label={button.ariaLabel}
+        disabled={button.disabled}
+        look={look}
+        onClick={clickHandler}
+        waiting={waiting}
+      >
+        {button.title}
+      </Button>
+    </ButtonTooltip>
+  );
+});
+
+export const CustomControls = controlsInjector(
+  observer(({ store }) => {
+    const buttons = store.controlButtons;
+    return (
+      <Block name="controls">
+        {buttons.map((button) => (
+          <CustomControl button={button} />
+        ))}
+      </Block>
+    );
+  }),
+);
+
 export const Controls = controlsInjector(
   observer(({ store, history, annotation }) => {
     const isReview = store.hasInterface("review");

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

@@ -4,9 +4,10 @@ import { IconViewAll, LsPlus } from "../../assets/icons";
 import { Button } from "../../common/Button/Button";
 import { Tooltip } from "../../common/Tooltip/Tooltip";
 import { Block, Elem } from "../../utils/bem";
-import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
+import { FF_BULK_ANNOTATION, FF_DEV_3873, isFF } from "../../utils/feature-flags";
 import { AnnotationsCarousel } from "../AnnotationsCarousel/AnnotationsCarousel";
 import { DynamicPreannotationsToggle } from "../AnnotationTab/DynamicPreannotationsToggle";
+import { CustomControls } from "../BottomBar/Controls";
 import { Actions } from "./Actions";
 import { Annotations } from "./Annotations";
 import { Controls } from "./Controls";
@@ -20,6 +21,9 @@ export const TopBar = observer(({ store }) => {
   const isPrediction = entity?.type === "prediction";
 
   const isViewAll = annotationStore?.viewingAll === true;
+  const isBulkMode = isFF(FF_BULK_ANNOTATION) && store.hasInterface("annotation:bulk");
+
+  if (isFF(FF_DEV_3873) && isBulkMode) return null;
 
   return store ? (
     <Block name="topbar" mod={{ newLabelingUI: isFF(FF_DEV_3873) }}>
@@ -77,8 +81,8 @@ export const TopBar = observer(({ store }) => {
       ) : (
         <>
           <Elem name="group">
-            <CurrentTask store={store} />
-            {!isViewAll && (
+            {!isBulkMode && <CurrentTask store={store} />}
+            {!isViewAll && !isBulkMode && (
               <Annotations store={store} annotationStore={store.annotationStore} commentStore={store.commentStore} />
             )}
             <Actions store={store} />
@@ -91,7 +95,11 @@ export const TopBar = observer(({ store }) => {
             )}
             {!isViewAll && store.hasInterface("controls") && (store.hasInterface("review") || !isPrediction) && (
               <Elem name="section" mod={{ flat: true }} style={{ width: 320, boxSizing: "border-box" }}>
-                <Controls annotation={entity} />
+                {isFF(FF_BULK_ANNOTATION) && store.hasInterface("controls:custom") ? (
+                  <CustomControls annotation={entity} />
+                ) : (
+                  <Controls annotation={entity} />
+                )}
               </Elem>
             )}
           </Elem>

web/libs/editor/src/core/CustomTypes.ts

@@ -50,7 +50,30 @@ const CSSColor = types.custom<any, string>({
   },
 });
 
+// This type is using to store a raw callback function in mobx-state-tree model.
+// It won't be serialized right. However, it is useful to allow passing a callback function as a prop
+// and be able to get a reaction on its change
+//
+// /!\ Avoid using this type in case you need serialization of the model it contains
+const RawCallback = types.custom<Function, Function>({
+  name: "rawCallback",
+  fromSnapshot(value: Function) {
+    return value;
+  },
+  toSnapshot(value: Function) {
+    return value;
+  },
+  getValidationMessage(value: Function) {
+    if (this.isTargetType(value)) return "";
+    return `Value ${value} is not a function.`;
+  },
+  isTargetType(value: any) {
+    return typeof value === "function";
+  },
+});
+
 export const customTypes = {
   range: Range,
   color: CSSColor,
+  rawCallback: RawCallback,
 };

web/libs/editor/src/core/Tree.tsx

@@ -4,7 +4,7 @@ import type { IAnyComplexType, IAnyStateTreeNode } from "mobx-state-tree/dist/in
 
 import Registry from "./Registry";
 import { parseValue } from "../utils/data";
-import { FF_DEV_3391, isFF } from "../utils/feature-flags";
+import { FF_BULK_ANNOTATION, FF_DEV_3391, isFF } from "../utils/feature-flags";
 import { guidGenerator } from "../utils/unique";
 
 interface ConfigNodeBaseProps {
@@ -234,6 +234,10 @@ function renderItem(ref: IAnyStateTreeNode, annotation: IAnnotation, includeKey
   const typeName = type.name;
   const View = Registry.getViewByModel(typeName);
 
+  if (isFF(FF_BULK_ANNOTATION) && annotation?.store?.hasInterface("annotation:bulk") && el.isIndependent !== true) {
+    return null;
+  }
+
   if (!View) {
     throw new Error(`No view for model: ${typeName}`);
   }

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

@@ -10,12 +10,14 @@ import Utils from "../utils";
 import { guidGenerator } from "../utils/unique";
 import { clamp, delay, isDefined } from "../utils/utilities";
 import AnnotationStore from "./Annotation/store";
+import { ControlButton } from "./ControlButton";
 import Project from "./ProjectStore";
 import Settings from "./SettingsStore";
 import Task from "./TaskStore";
 import { UserExtended } from "./UserStore";
 import { UserLabels } from "./UserLabels";
 import {
+  FF_BULK_ANNOTATION,
   FF_CUSTOM_SCRIPT,
   FF_DEV_1536,
   FF_LSDV_4620_3_ML,
@@ -158,6 +160,8 @@ export default types
     queueTotal: types.optional(types.number, 0),
 
     queuePosition: types.optional(types.number, 0),
+
+    ...(isFF(FF_BULK_ANNOTATION) ? { controlButtons: types.optional(types.array(ControlButton), []) } : {}),
   })
   .preProcessSnapshot((sn) => {
     // This should only be handled if the sn.user value is an object, and converted to a reference id for other
@@ -932,6 +936,10 @@ export default types
       self.setUsers(uniqBy([...newUsers, ...oldUsers], "id"));
     }
 
+    function setControls(controls) {
+      self.controlButtons = cast(controls);
+    }
+
     return {
       setFlags,
       addInterface,
@@ -965,6 +973,7 @@ export default types
       toggleComments,
       toggleSettings,
       toggleDescription,
+      setControls,
 
       setAutoAnnotation,
       setAutoAcceptSuggestions,