fix(DataMapper): skip rendering nested choice node if both are selected (#3183)

Problem:
When xs:choice is nested, the intermediate choice wrapper node stays
rendered even when both parent and child choices are selected.

Changes:
- Recurse through nested selected wrappers in doGenerateNodeDataFromWrapperField
  to flatten the tree and render the final selected member directly
- Resolve outermost selected wrapper in context menu so "Show All Choice
  Options" fully reverts the entire nested selection chain
- Add resolveOutermostSelectedWrapper helper and getSelectedChoiceDepth
  to VisualizationUtilService
- Render selected choice as a green pill Label with Choices icon; show
  ×N depth multiplier when multiple wrapper levels are collapsed
- Add tests for both-selected and outer-only-selected nested choice scenarios

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

packages/ui/src/components/Document/Nodes/BaseNode.tsx

@@ -1,7 +1,7 @@
 import './BaseNode.scss';
 
 import { At, ChevronDown, ChevronRight, Choices, DocumentComment, Draggable, ValueVariable } from '@carbon/icons-react';
-import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import { Button, Icon, Label, Tooltip } from '@patternfly/react-core';
 import { LayerGroupIcon } from '@patternfly/react-icons';
 import { FunctionComponent, MouseEventHandler, PropsWithChildren, ReactNode, useCallback, useState } from 'react';
 
@@ -67,6 +67,7 @@ export const BaseNode: FunctionComponent<PropsWithChildren<BaseNodeProps>> = ({
   const isCollectionField = VisualizationUtilService.isCollectionField(nodeData);
   const isChoiceField = VisualizationUtilService.isChoiceField(nodeData);
   const isSelectedChoice = VisualizationUtilService.isSelectedChoiceField(nodeData);
+  const choiceDepth = VisualizationUtilService.getSelectedChoiceDepth(nodeData);
   const isAbstractField = VisualizationUtilService.isAbstractField(nodeData);
   const isSelectedAbstract = VisualizationUtilService.isSelectedAbstractField(nodeData);
   const isAttributeField = VisualizationUtilService.isAttributeField(nodeData);
@@ -126,15 +127,16 @@ export const BaseNode: FunctionComponent<PropsWithChildren<BaseNodeProps>> = ({
           <LayerGroupIcon />
         </Icon>
       )}
-      {isChoiceField && (
-        <Icon
-          className="node__spacer"
-          status={isSelectedChoice ? 'success' : undefined}
-          data-testid="choice-field-icon"
-        >
+      {isChoiceField && !isSelectedChoice && (
+        <Icon className="node__spacer" data-testid="choice-field-icon">
           <Choices />
         </Icon>
       )}
+      {isChoiceField && isSelectedChoice && (
+        <Label className="node__spacer" color="green" icon={<Choices />} isCompact data-testid="choice-field-icon">
+          {choiceDepth >= 2 ? <>&times;{choiceDepth}</> : ''}
+        </Label>
+      )}
       {isAbstractField && (
         <Icon
           className="node__spacer"

packages/ui/src/components/Document/actions/FieldContextMenu/useChoiceContextMenu.tsx

@@ -61,10 +61,10 @@ function resolveChoiceNodeInfo(nodeData: NodeData): ChoiceNodeInfo {
       : undefined;
 
   let choiceWrapperField: IField | undefined;
-  if (isChoiceWrapper) {
+  if (isSelectedChoice) {
+    choiceWrapperField = VisualizationUtilService.resolveOutermostSelectedWrapper(nodeData.choiceField).outermost;
+  } else if (isChoiceWrapper) {
     choiceWrapperField = field;
-  } else if (isSelectedChoice) {
-    choiceWrapperField = nodeData.choiceField;
   }
 
   return {

packages/ui/src/services/visualization/visualization-util.service.test.ts

@@ -14,6 +14,10 @@ import { TestUtil } from '../../stubs/datamapper/data-mapper';
 import { XmlSchemaDocument } from '../document/xml-schema/xml-schema-document.model';
 import { VisualizationUtilService } from './visualization-util.service';
 
+function createMockField(baseField: IField, overrides: Partial<IField> = {}): IField {
+  return { ...baseField, ...overrides };
+}
+
 describe('VisualizationUtilService', () => {
   let sourceDoc: XmlSchemaDocument;
   let sourceDocNode: DocumentNodeData;
@@ -186,4 +190,109 @@ describe('VisualizationUtilService', () => {
       expect(VisualizationUtilService.getField(sourceDocNode)).toBeUndefined();
     });
   });
+
+  describe('resolveOutermostSelectedWrapper', () => {
+    it('should return the field itself and depth 1 when no parent wrapper', () => {
+      const field = createMockField(sourceDoc.fields[0], { wrapperKind: 'choice', selectedMemberIndex: 0 });
+      const result = VisualizationUtilService.resolveOutermostSelectedWrapper(field);
+      expect(result.outermost).toBe(field);
+      expect(result.depth).toEqual(1);
+    });
+
+    it('should walk up through selected parent wrappers', () => {
+      const outer = createMockField(sourceDoc.fields[0], { wrapperKind: 'choice', selectedMemberIndex: 0 });
+      const inner = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 1,
+        parent: outer,
+      });
+      const result = VisualizationUtilService.resolveOutermostSelectedWrapper(inner);
+      expect(result.outermost).toBe(outer);
+      expect(result.depth).toEqual(2);
+    });
+
+    it('should walk up through three levels of selected wrappers', () => {
+      const outermost = createMockField(sourceDoc.fields[0], { wrapperKind: 'choice', selectedMemberIndex: 0 });
+      const middle = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 0,
+        parent: outermost,
+      });
+      const inner = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 1,
+        parent: middle,
+      });
+      const result = VisualizationUtilService.resolveOutermostSelectedWrapper(inner);
+      expect(result.outermost).toBe(outermost);
+      expect(result.depth).toEqual(3);
+    });
+
+    it('should stop at parent without selectedMemberIndex', () => {
+      const outer = createMockField(sourceDoc.fields[0], { wrapperKind: 'choice' });
+      const inner = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 0,
+        parent: outer,
+      });
+      const result = VisualizationUtilService.resolveOutermostSelectedWrapper(inner);
+      expect(result.outermost).toBe(inner);
+      expect(result.depth).toEqual(1);
+    });
+
+    it('should return depth 1 and undefined for undefined input', () => {
+      const result = VisualizationUtilService.resolveOutermostSelectedWrapper(undefined);
+      expect(result.outermost).toBeUndefined();
+      expect(result.depth).toEqual(1);
+    });
+  });
+
+  describe('getSelectedChoiceDepth', () => {
+    it('should return 0 for non-choice nodes', () => {
+      const fieldNode = new FieldNodeData(sourceDocNode, sourceDoc.fields[0]);
+      expect(VisualizationUtilService.getSelectedChoiceDepth(fieldNode)).toEqual(0);
+    });
+
+    it('should return 0 for unselected choice nodes', () => {
+      const choiceField = {
+        ...sourceDoc.fields[0],
+        wrapperKind: 'choice' as const,
+        fields: [],
+      } as unknown as IField;
+      const choiceNode = new ChoiceFieldNodeData(sourceDocNode, choiceField);
+      expect(VisualizationUtilService.getSelectedChoiceDepth(choiceNode)).toEqual(0);
+    });
+
+    it('should return 1 for simple selected choice', () => {
+      const wrapper = {
+        ...sourceDoc.fields[0],
+        wrapperKind: 'choice' as const,
+        selectedMemberIndex: 0,
+        fields: [{ ...sourceDoc.fields[0], name: 'a', fields: [] }],
+      } as unknown as IField;
+      const choiceNode = new ChoiceFieldNodeData(sourceDocNode, sourceDoc.fields[0]);
+      choiceNode.choiceField = wrapper;
+      expect(VisualizationUtilService.getSelectedChoiceDepth(choiceNode)).toEqual(1);
+    });
+
+    it('should return 3 for triple-nested selected choice', () => {
+      const outermost = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 0,
+      });
+      const middle = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 0,
+        parent: outermost,
+      });
+      const inner = createMockField(sourceDoc.fields[0], {
+        wrapperKind: 'choice',
+        selectedMemberIndex: 0,
+        parent: middle,
+      });
+      const choiceNode = new ChoiceFieldNodeData(sourceDocNode, sourceDoc.fields[0]);
+      choiceNode.choiceField = inner;
+      expect(VisualizationUtilService.getSelectedChoiceDepth(choiceNode)).toEqual(3);
+    });
+  });
 });

packages/ui/src/services/visualization/visualization-util.service.ts

@@ -89,6 +89,39 @@ export class VisualizationUtilService {
     return VisualizationUtilService.isSelectedChoiceField(nodeData) && nodeData.field.wrapperKind === 'choice';
   }
 
+  /**
+   * Walks up from `wrapper` through ancestor choice fields that also have a selection,
+   * returning the outermost selected wrapper and the number of levels traversed.
+   */
+  static resolveOutermostSelectedWrapper(wrapper: IField | undefined): {
+    outermost: IField | undefined;
+    depth: number;
+  } {
+    let depth = 1;
+    let current = wrapper;
+    while (
+      current?.parent &&
+      'wrapperKind' in current.parent &&
+      current.parent.wrapperKind === 'choice' &&
+      current.parent.selectedMemberIndex !== undefined
+    ) {
+      depth++;
+      current = current.parent;
+    }
+    return { outermost: current, depth };
+  }
+
+  /**
+   * Returns the number of resolved choice wrapper levels for a selected choice node.
+   * A simple selected choice returns 1. A flattened nested choice (both outer and inner
+   * selected) returns 2+, indicating how many wrapper levels were collapsed.
+   * Returns 0 for non-choice nodes.
+   */
+  static getSelectedChoiceDepth(nodeData: NodeData): number {
+    if (!VisualizationUtilService.isSelectedChoiceField(nodeData)) return 0;
+    return VisualizationUtilService.resolveOutermostSelectedWrapper(nodeData.choiceField).depth;
+  }
+
   /**
    * Returns `true` if the node is an abstract field, on either source or target side.
    * @param nodeData - The node to test.

packages/ui/src/services/visualization/visualization.service.choice.test.ts

@@ -454,65 +454,54 @@ describe('VisualizationService / choice fields', () => {
       expect(outerChildren[1].title).toEqual('regularField');
     });
 
-    it('both selected: resolves in two steps with choiceField references at each level', () => {
-      const { outerChoice, innerChoice } = createNestedChoiceFields(0, 1);
+    it('both selected: flattens nested wrappers and shows final selected member directly', () => {
+      const { outerChoice, innerChoice, innerMembers } = createNestedChoiceFields(0, 1);
       const parentField = { ...sourceDoc.fields[0], fields: [outerChoice] };
       const parentNode = new FieldNodeData(sourceDocNode, parentField as (typeof sourceDoc.fields)[0]);
 
       const children = VisualizationService.generateNonDocumentNodeDataChildren(parentNode);
       expect(children.length).toEqual(1);
-      const outerNode = children[0] as ChoiceFieldNodeData;
-      expect(outerNode).toBeInstanceOf(ChoiceFieldNodeData);
-      expect(outerNode.field).toBe(innerChoice);
-      expect(outerNode.choiceField).toBe(outerChoice);
-
-      const innerChildren = VisualizationService.generateNonDocumentNodeDataChildren(outerNode);
-      expect(innerChildren.length).toEqual(1);
-      const innerNode = innerChildren[0] as ChoiceFieldNodeData;
-      expect(innerNode).toBeInstanceOf(ChoiceFieldNodeData);
-      expect(innerNode.title).toEqual('y');
-      expect(innerNode.choiceField).toBe(innerChoice);
+      const flattenedNode = children[0] as ChoiceFieldNodeData;
+      expect(flattenedNode).toBeInstanceOf(ChoiceFieldNodeData);
+      expect(flattenedNode.field).toBe(innerMembers[1]);
+      expect(flattenedNode.field.name).toEqual('y');
+      expect(flattenedNode.choiceField).toBe(innerChoice);
     });
 
-    it('multi-step revert: reverting inner selection restores inner choice members', () => {
+    it('multi-step revert: reverting inner selection shows inner choice as unselected wrapper', () => {
       const { outerChoice, innerChoice } = createNestedChoiceFields(0, 1);
       const parentField = { ...sourceDoc.fields[0], fields: [outerChoice] };
       const parentNode = new FieldNodeData(sourceDocNode, parentField as (typeof sourceDoc.fields)[0]);
 
-      const children = VisualizationService.generateNonDocumentNodeDataChildren(parentNode);
-      const outerNode = children[0] as ChoiceFieldNodeData;
-      const innerChildren = VisualizationService.generateNonDocumentNodeDataChildren(outerNode);
-      const innerNode = innerChildren[0] as ChoiceFieldNodeData;
-      expect(innerNode.choiceField).toBe(innerChoice);
+      innerChoice.selectedMemberIndex = undefined;
 
-      innerNode.choiceField!.selectedMemberIndex = undefined;
+      const children = VisualizationService.generateNonDocumentNodeDataChildren(parentNode);
+      expect(children.length).toEqual(1);
+      const node = children[0] as ChoiceFieldNodeData;
+      expect(node).toBeInstanceOf(ChoiceFieldNodeData);
+      expect(node.field).toBe(innerChoice);
+      expect(node.choiceField).toBe(outerChoice);
 
-      const refreshedInnerChildren = VisualizationService.generateNonDocumentNodeDataChildren(outerNode);
-      expect(refreshedInnerChildren.length).toEqual(2);
-      expect(refreshedInnerChildren[0].title).toEqual('x');
-      expect(refreshedInnerChildren[1].title).toEqual('y');
-      expect((refreshedInnerChildren[0] as ChoiceFieldNodeData).choiceField).toBeUndefined();
+      const innerChildren = VisualizationService.generateNonDocumentNodeDataChildren(node);
+      expect(innerChildren.length).toEqual(2);
+      expect(innerChildren[0].title).toEqual('x');
+      expect(innerChildren[1].title).toEqual('y');
     });
 
-    it('multi-step revert: reverting outer selection after inner restores outer choice members', () => {
+    it('multi-step revert: reverting outer selection restores outer choice members', () => {
       const { outerChoice, innerChoice } = createNestedChoiceFields(0, 1);
       const parentField = { ...sourceDoc.fields[0], fields: [outerChoice] };
       const parentNode = new FieldNodeData(sourceDocNode, parentField as (typeof sourceDoc.fields)[0]);
 
       innerChoice.selectedMemberIndex = undefined;
+      outerChoice.selectedMemberIndex = undefined;
 
       const children = VisualizationService.generateNonDocumentNodeDataChildren(parentNode);
+      expect(children.length).toEqual(1);
       const outerNode = children[0] as ChoiceFieldNodeData;
-      expect(outerNode.choiceField).toBe(outerChoice);
-
-      outerNode.choiceField!.selectedMemberIndex = undefined;
-
-      const refreshedChildren = VisualizationService.generateNonDocumentNodeDataChildren(parentNode);
-      expect(refreshedChildren.length).toEqual(1);
-      const refreshedOuterNode = refreshedChildren[0] as ChoiceFieldNodeData;
-      expect(refreshedOuterNode.choiceField).toBeUndefined();
+      expect(outerNode.choiceField).toBeUndefined();
 
-      const outerMembers = VisualizationService.generateNonDocumentNodeDataChildren(refreshedOuterNode);
+      const outerMembers = VisualizationService.generateNonDocumentNodeDataChildren(outerNode);
       expect(outerMembers.length).toEqual(2);
       expect(outerMembers[0]).toBeInstanceOf(ChoiceFieldNodeData);
       expect(outerMembers[1].title).toEqual('regularField');

packages/ui/src/services/visualization/visualization.service.ts

@@ -142,6 +142,12 @@ export class VisualizationService {
   ): NodeData {
     const selectedMember =
       field.selectedMemberIndex === undefined ? undefined : field.fields?.[field.selectedMemberIndex];
+
+    if (selectedMember?.wrapperKind && selectedMember.selectedMemberIndex !== undefined) {
+      const innerSpec = selectedMember.wrapperKind === 'choice' ? CHOICE_WRAPPER : ABSTRACT_WRAPPER;
+      return VisualizationService.doGenerateNodeDataFromWrapperField(parent, selectedMember, mappings, innerSpec);
+    }
+
     const nodeField = selectedMember ?? field;
     if (parent.isSource) {
       const node = spec.createSourceNode(parent, nodeField);