fix: BROS-291: Fix using Taxonomy as second labeling control (#8103)

Co-authored-by: Andrew <hlomzik@gmail.com>
Co-authored-by: Gondragos <Gondragos@users.noreply.github.com>

Author: Gondragos

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

@@ -24,5 +24,7 @@ export function cloneNode(node: IStateTreeNode) {
     id: guidGenerator(),
   });
 
+  snapshotRandomId.afterClone?.(node);
+
   return snapshotRandomId;
 }

web/libs/editor/src/core/Types.js

@@ -68,6 +68,8 @@ function isType(node, types) {
 }
 
 function getParentOfTypeString(node, str) {
+  if (isRoot(node)) return null;
+
   // same as getParentOfType but checks models .name instead of type
   let parent = getParent(node);
 

web/libs/editor/src/mixins/SharedChoiceStore/mixin.js

@@ -79,6 +79,9 @@ export const SharedStoreMixin = types
         const store = Stores.get(self.storeId);
         const annotationStore = Types.getParentOfTypeString(self, "AnnotationStore");
 
+        // It means that an element is not connected to the store tree,
+        // most probably as it is a temporal clone of the model
+        if (!annotationStore) return;
         annotationStore.addSharedStore(store);
         StoreIds.add(self.storeId);
         self.store = self.storeId;

web/libs/editor/src/tags/control/Taxonomy/Taxonomy.jsx

@@ -360,6 +360,10 @@ const Model = types
       }
     },
 
+    afterClone(node) {
+      self.selected = [...node.selected];
+    },
+
     /**
      * Load items from `apiUrl` and set them indirectly to `items` (via `_items`)
      * @param {string[]} path to load nested items by this path

web/libs/editor/src/tags/object/Video/Rectangle.tsx

@@ -10,6 +10,7 @@ import { LabelOnVideoBbox } from "../../../components/ImageView/LabelOnRegion";
 type RectPropsExtend = typeof Rect;
 
 interface RectProps extends RectPropsExtend {
+  id: string;
   reg: any;
   frame: number;
   selected: boolean;
@@ -21,6 +22,7 @@ interface RectProps extends RectPropsExtend {
 }
 
 const RectanglePure: FC<RectProps> = ({
+  id,
   reg,
   box,
   frame,
@@ -59,7 +61,7 @@ const RectanglePure: FC<RectProps> = ({
   };
 
   return (
-    <Group>
+    <Group id={id}>
       <LabelOnVideoBbox
         reg={reg}
         box={newBox}

web/libs/editor/src/tags/object/Video/VideoRegions.jsx

@@ -258,13 +258,14 @@ const RegionsLayer = observer(({ regions, item, locked, isDrawing, workinAreaCoo
   );
 });
 
-const Shape = observer(({ reg, frame, stageRef, ...props }) => {
+const Shape = observer(({ id, reg, frame, stageRef, ...props }) => {
   const box = reg.getShape(frame);
 
   return (
     reg.isInLifespan(frame) &&
     box && (
       <Rectangle
+        id={id}
         reg={reg}
         box={box}
         frame={frame}

web/libs/editor/tests/integration/data/control_tags/text-with-dual-taxonomy.ts

@@ -0,0 +1,41 @@
+export const textWithDualTaxonomyConfig = `<View>
+  <Text name="text" value="$text"/>
+  <Taxonomy name="category" toName="text" labeling="true">
+    <Choice value="Person"/>
+    <Choice value="Organization"/>
+    <Choice value="Location"/>
+    <Choice value="Event"/>
+  </Taxonomy>
+  <Taxonomy name="sentiment" toName="text" labeling="true">
+    <Choice value="Positive"/>
+    <Choice value="Negative"/>
+    <Choice value="Neutral"/>
+  </Taxonomy>
+</View>`;
+
+export const simpleTextData = {
+  text: "Apple Inc. is a technology company headquartered in Cupertino, California. The company was founded by Steve Jobs in 1976.",
+};
+
+export const expectedResult = [
+  {
+    id: "taxonomy_category_1",
+    type: "taxonomy",
+    value: {
+      taxonomy: [["Organization"]],
+    },
+    origin: "manual",
+    to_name: "text",
+    from_name: "category",
+  },
+  {
+    id: "taxonomy_sentiment_1",
+    type: "taxonomy",
+    value: {
+      taxonomy: [["Positive"]],
+    },
+    origin: "manual",
+    to_name: "text",
+    from_name: "sentiment",
+  },
+];

web/libs/editor/tests/integration/e2e/control_tags/text-with-dual-taxonomy.cy.ts

@@ -0,0 +1,56 @@
+import { LabelStudio, Sidebar, useTaxonomy } from "@humansignal/frontend-test/helpers/LSF";
+import { RichText } from "@humansignal/frontend-test/helpers/LSF/RichText";
+import { FF_TAXONOMY_LABELING } from "../../../../src/utils/feature-flags";
+import { textWithDualTaxonomyConfig, simpleTextData } from "../../data/control_tags/text-with-dual-taxonomy";
+
+describe("Control Tags - Text with Dual Taxonomy", () => {
+  it("should select options from two taxonomies and create text region", () => {
+    LabelStudio.addFeatureFlagsOnPageLoad({
+      [FF_TAXONOMY_LABELING]: true,
+    });
+
+    cy.log("Initialize LabelStudio with text and dual taxonomy configuration");
+    LabelStudio.params().config(textWithDualTaxonomyConfig).data(simpleTextData).withResult([]).init();
+
+    LabelStudio.waitForObjectsReady();
+    Sidebar.hasNoRegions();
+
+    // Create taxonomy helpers for each taxonomy by index (first taxonomy, second taxonomy)
+    const categoryTaxonomy = useTaxonomy("&:eq(0)");
+    const sentimentTaxonomy = useTaxonomy("&:eq(1)");
+
+    cy.log("Select first taxonomy option - Organization from category taxonomy");
+    categoryTaxonomy.open();
+    categoryTaxonomy.findItem("Organization").click();
+    categoryTaxonomy.close();
+
+    cy.log("Select second taxonomy option - Positive from sentiment taxonomy");
+    sentimentTaxonomy.open();
+    sentimentTaxonomy.findItem("Positive").click();
+    sentimentTaxonomy.close();
+
+    cy.log("Create text region with selected taxonomies");
+    RichText.selectText("Apple Inc.");
+
+    cy.log("Verify region was created");
+    Sidebar.hasRegions(1);
+    RichText.hasRegionWithText("Apple Inc.");
+
+    cy.log("Verify serialization contains taxonomy results");
+    LabelStudio.serialize().then((results: any[]) => {
+      expect(results).to.have.length(2);
+
+      // Check category taxonomy result
+      const categoryResult = results.find((r: any) => r.from_name === "category");
+      expect(categoryResult).to.exist;
+      expect(categoryResult.type).to.eq("taxonomy");
+      expect(categoryResult.value.taxonomy).to.deep.eq([["Organization"]]);
+
+      // Check sentiment taxonomy result
+      const sentimentResult = results.find((r: any) => r.from_name === "sentiment");
+      expect(sentimentResult).to.exist;
+      expect(sentimentResult.type).to.eq("taxonomy");
+      expect(sentimentResult.value.taxonomy).to.deep.eq([["Positive"]]);
+    });
+  });
+});

web/libs/editor/tests/integration/e2e/video/regions.cy.ts

@@ -77,18 +77,19 @@ describe("Video segmentation", suiteConfig, () => {
 
     cy.log("Remember an empty canvas state");
     VideoView.clickAtFrame(4);
-    cy.wait(1000);
+    VideoView.waitForFrame(4);
+    VideoView.waitForRegionNotInKonvaByIndex(0);
+    VideoView.waitForStableState();
     VideoView.captureCanvas("canvas");
 
     VideoView.clickAtFrame(3);
-    cy.wait(TWO_FRAMES_TIMEOUT);
+    VideoView.waitForRegionInKonvaByIndex(0);
+    VideoView.waitForStableState();
     cy.log("Select region");
     VideoView.clickAtRelative(0.5, 0.5);
-    cy.wait(TWO_FRAMES_TIMEOUT);
     Sidebar.hasSelectedRegions(1);
-    cy.wait(TWO_FRAMES_TIMEOUT);
     VideoView.clickAtFrame(4);
-    cy.wait(TWO_FRAMES_TIMEOUT);
+    VideoView.waitForFrame(4); // Wait for frame 4
     Sidebar.hasSelectedRegions(1);
 
     cy.wait(1000);

web/libs/frontend-test/src/helpers/LSF/VideoView.ts

@@ -262,9 +262,123 @@ export const VideoView = {
 
   // Get current frame number from timeline controls
   getCurrentFrame() {
-    return this.frameCounter.invoke("text").then((text) => {
-      const match = text.match(/(\d+) of/);
-      return match ? Number.parseInt(match[1]) : null;
+    return this.frameCounter.invoke("text").then((text) => Number.parseInt(text.split(" ")[0]));
+  },
+
+  // Wait a couple of animation frames based on requestAnimationFrame pattern
+  waitForStableState() {
+    // This ensures React has completed its render cycle
+    cy.window().then((win) => {
+      return new Cypress.Promise((resolve) => {
+        win.requestAnimationFrame(() => {
+          // Wait one more frame to be extra sure
+          win.requestAnimationFrame(resolve);
+        });
+      });
+    });
+  },
+
+  // Wait for region by index to be passed to Konva Stage
+  // Gets region ID from store and checks if it exists in Konva
+  waitForRegionInKonvaByIndex(regionIndex: number) {
+    cy.log(`Wait for region at index ${regionIndex} to be available in Konva Stage`);
+
+    // First get the region ID from store
+    cy.window().then((win) => {
+      const store = (win as any).Htx || (win as any).store;
+      if (!store?.annotationStore?.selected?.regionStore?.regions) {
+        cy.log("No regions found in store");
+        return;
+      }
+
+      const regions = store.annotationStore.selected.regionStore.regions;
+      if (regionIndex >= regions.length) {
+        cy.log(`Region index ${regionIndex} out of bounds (${regions.length} regions)`);
+        return;
+      }
+
+      const region = regions[regionIndex];
+      const regionId = region.id;
+
+      cy.log(`Found region ID: ${regionId} for index ${regionIndex}`);
+
+      // Now wait for this region in Konva
+      this.waitForRegionInKonva(regionId);
+    });
+  },
+
+  // Find specific Konva stage by DOM element and check for region
+  waitForRegionInKonva(regionId: string) {
+    cy.log(`Wait for region ${regionId} to be available in Konva Stage`);
+
+    cy.window().then((win) => {
+      this.drawingArea.should(($drawingArea) => {
+        // Get the specific Konva stage from this DOM element
+        const drawingArea = $drawingArea[0];
+        const stage = (win as any).Konva?.stages?.find((stage) => stage.content === drawingArea);
+
+        if (!stage) {
+          throw new Error("Konva stage not found for this canvas");
+        }
+
+        // Find region in this specific stage
+        const elements = stage.find(`#${regionId}`);
+        if (!elements || elements.length === 0) {
+          throw new Error(`Region ${regionId} not found in Konva Stage`);
+        }
+      });
+    });
+  },
+
+  // Check that specific region is NOT in Konva Stage
+  waitForRegionNotInKonva(regionId: string) {
+    cy.log(`Wait for region ${regionId} to be NOT available in Konva Stage`);
+
+    cy.window().then((win) => {
+      this.drawingArea.should(($drawingArea) => {
+        // Get the specific Konva stage from this DOM element
+        const drawingArea = $drawingArea[0];
+        const stage = (win as any).Konva?.stages?.find((stage) => stage.content === drawingArea);
+
+        if (!stage) {
+          // No stage means no regions - that's what we want
+          return;
+        }
+
+        // Find region in this specific stage
+        const elements = stage.find(`#${regionId}`);
+        if (elements && elements.length > 0) {
+          throw new Error(`Region ${regionId} should NOT be in Konva Stage but it was found`);
+        }
+      });
+    });
+  },
+
+  // Check region by index is NOT in Konva Stage
+  waitForRegionNotInKonvaByIndex(regionIndex: number) {
+    cy.log(`Wait for region at index ${regionIndex} to be NOT available in Konva Stage`);
+
+    // First get the region ID from store
+    cy.window().then((win) => {
+      const store = (win as any).Htx || (win as any).store;
+      if (!store?.annotationStore?.selected?.regionStore?.regions) {
+        cy.log("No regions found in store - that's expected");
+        return;
+      }
+
+      const regions = store.annotationStore.selected.regionStore.regions;
+      if (regionIndex >= regions.length) {
+        cy.log(`Region index ${regionIndex} out of bounds (${regions.length} regions) - that's expected`);
+        return;
+      }
+
+      const region = regions[regionIndex];
+      const regionId = region.id;
+
+      cy.log(`Checking that region ID: ${regionId} for index ${regionIndex} is NOT in Konva`);
+
+      // Now check this region is NOT in Konva
+      this.waitForRegionNotInKonva(regionId);
     });
   },