fix: LEAP-1892: [FE] Deeply nested Choices are visible when their parents are hidden

web/libs/editor/src/mixins/Visibility.js

@@ -49,6 +49,7 @@ const VisibilityMixin = types
             const tag = self.annotation.names.get(tagName);
 
             if (!tag?.hasChoiceSelection && !choiceValue?.length) return false;
+            if (tag.isVisible === false) return false;
 
             return tag.hasChoiceSelection(choiceValue?.split(","), tag.selectedValues());
           },

web/libs/editor/src/regions/Result.js

@@ -158,6 +158,24 @@ const Result = types
     get canBeSubmitted() {
       const control = self.from_name;
 
+      // Find the first node moving up in the tree with the given visibleWhen value
+      function findNodeWithVisibleWhen(control, visibleWhen) {
+        let currentControl = control;
+
+        while (currentControl) {
+          if (currentControl.visiblewhen === visibleWhen) return currentControl;
+
+          try {
+            currentControl = getParent(currentControl);
+            if (!currentControl) break;
+          } catch {
+            break;
+          }
+        }
+
+        return null;
+      }
+
       if (control.perregion) {
         const label = control.whenlabelvalue;
 
@@ -201,12 +219,8 @@ const Result = types
         return true;
       };
 
-      if (control.visiblewhen === "choice-selected") {
-        return isChoiceSelected();
-      }
-      if (control.visiblewhen === "choice-unselected") {
-        return !isChoiceSelected();
-      }
+      if (findNodeWithVisibleWhen(control, "choice-selected")) return control.isVisible && isChoiceSelected();
+      if (findNodeWithVisibleWhen(control, "choice-unselected")) return control.isVisible && !isChoiceSelected();
 
       return true;
     },

web/libs/editor/tests/integration/data/control_tags/visibility.ts

@@ -0,0 +1,89 @@
+export const simpleVisibleWhenConfig = `<View>
+  <Text name="text" value="$text"/>
+
+  <View name="Level 1">
+    <Header value="Level 1"/>
+    <Choices name="level1" toName="text" choice="single" showInLine="true">
+      <Choice value="1A"/>
+      <Choice value="1B"/>
+    </Choices>
+  </View>
+
+  <Choices
+    name="level2" toName="text" choice="single" showInLine="true"
+    visibleWhen="choice-selected"
+    whenTagName="level1"
+    whenChoiceValue="1A"
+  >
+    <Choice value="2A"/>
+    <Choice value="2B"/>
+  </Choices>
+
+  <Choices
+    name="level3" toName="text" choice="single" showInLine="true"
+    visibleWhen="choice-selected"
+    whenTagName="level2"
+    whenChoiceValue="2A"
+  >
+    <Choice value="3A"/>
+    <Choice value="3B"/>
+  </Choices>
+</View>`;
+
+export const multipleChainedViewsConfig = `<View>
+  <Text name="text" value="$text"/>
+
+  <View name="Level 1">
+    <Header value="Level 1"/>
+    <Choices name="level1" toName="text" choice="single" showInLine="true">
+      <Choice value="1A"/>
+      <Choice value="1B"/>
+    </Choices>
+  </View>
+
+  <!-- Level 2 -->
+  <View
+    name="Level 2"
+    visibleWhen="choice-selected"
+    whenTagName="level1"
+    whenChoiceValue="1A"
+  >
+    <Header value="Level 2"/>
+    <Choices name="level2" toName="text" choice="single" showInLine="true">
+      <Choice value="2A"/>
+      <Choice value="2B"/>
+    </Choices>
+  </View>
+
+  <!-- Level 3A -->
+  <View
+    name="Level 3A"
+    visibleWhen="choice-selected"
+    whenTagName="level2"
+    whenChoiceValue="2A"
+  >
+    <Header value="Level 3A"/>
+    <Choices name="level3A" toName="text" choice="single" showInLine="true">
+      <Choice value="3X"/>
+      <Choice value="3Y"/>
+    </Choices>
+  </View>
+
+  <!-- Level 3B -->
+  <View
+    name="Level 3B"
+    visibleWhen="choice-selected"
+    whenTagName="level2"
+    whenChoiceValue="2B"
+  >
+    <Header value="Level 3B"/>
+    <Choices name="level3B" toName="text" choice="single" showInLine="true">
+      <Choice value="3Q"/>
+      <Choice value="3W"/>
+    </Choices>
+  </View>
+</View>`;
+
+export const visibilityTextData = {
+  text: "This text exists for no reason",
+};

web/libs/editor/tests/integration/e2e/control_tags/visibility.cy.ts

@@ -0,0 +1,84 @@
+import { useChoices, LabelStudio } from "@humansignal/frontend-test/helpers/LSF";
+import {
+  multipleChainedViewsConfig,
+  simpleVisibleWhenConfig,
+  visibilityTextData,
+} from "../../data/control_tags/visibility";
+
+const checkVisibility = (visibleIndexes: number[], totalIndexes: number) => {
+  Array.from({ length: totalIndexes }).forEach((_, i) => {
+    cy.get(`.lsf-choices:eq(${i})`).should(visibleIndexes.includes(i) ? "be.visible" : "not.be.visible");
+  });
+};
+
+describe("Visibility", () => {
+  it("Ensure correct visibility of conditionally selected choices", () => {
+    LabelStudio.params().config(simpleVisibleWhenConfig).data(visibilityTextData).withResult([]).init();
+
+    const l1Choice = useChoices("&:eq(0)");
+    const l2Choice = useChoices("&:eq(1)");
+    const l3Choice = useChoices("&:eq(2)");
+    checkVisibility([0], 3);
+
+    l1Choice.findChoice("1A").click();
+    checkVisibility([0, 1], 3);
+
+    l2Choice.findChoice("2A").click();
+    checkVisibility([0, 1, 2], 3);
+
+    LabelStudio.serialize().then((result) => {
+      expect(result).to.have.lengthOf(2);
+      expect(result[0]).to.include({ from_name: "level1" });
+      expect(result[0].value.choices).to.have.lengthOf(1);
+      expect(result[0]).to.nested.include({ "value.choices[0]": "1A" });
+      expect(result[1]).to.include({ from_name: "level2" });
+      expect(result[1].value.choices).to.have.lengthOf(1);
+      expect(result[1]).to.nested.include({ "value.choices[0]": "2A" });
+    });
+
+    l1Choice.findChoice("1B").click();
+    checkVisibility([0], 3);
+
+    LabelStudio.serialize().then((result) => {
+      expect(result).to.have.lengthOf(1);
+      expect(result[0].from_name).to.equal("level1");
+      expect(result[0].value.choices).to.have.lengthOf(1);
+      expect(result[0].value.choices[0]).to.equal("1B");
+    });
+  });
+
+  it("Ensure correct visibility of conditionally selected choices with parent visibility restrictions", () => {
+    LabelStudio.params().config(multipleChainedViewsConfig).data(visibilityTextData).withResult([]).init();
+
+    const l1Choice = useChoices("&:eq(0)");
+    const l2Choice = useChoices("&:eq(1)");
+    const l3AChoice = useChoices("&:eq(2)");
+    checkVisibility([0], 4);
+
+    l1Choice.findChoice("1A").click();
+    checkVisibility([0, 1], 4);
+
+    l2Choice.findChoice("2A").click();
+    checkVisibility([0, 1, 2], 4);
+
+    LabelStudio.serialize().then((result) => {
+      expect(result).to.have.lengthOf(2);
+      expect(result[0]).to.include({ from_name: "level1" });
+      expect(result[0].value.choices).to.have.lengthOf(1);
+      expect(result[0]).to.nested.include({ "value.choices[0]": "1A" });
+      expect(result[1]).to.include({ from_name: "level2" });
+      expect(result[1].value.choices).to.have.lengthOf(1);
+      expect(result[1]).to.nested.include({ "value.choices[0]": "2A" });
+    });
+
+    l3AChoice.findChoice("3X").click();
+    checkVisibility([0, 1, 2], 4);
+
+    l1Choice.findChoice("1A").click();
+    checkVisibility([0], 4);
+
+    LabelStudio.serialize().then((result) => {
+      expect(result).to.have.lengthOf(0);
+    });
+  });
+});