Skip to content

5292 client - Fix cluster-root node overlap and handle alignment in TB workflow layout#5293

Open
ivicac wants to merge 2 commits into
masterfrom
5292
Open

5292 client - Fix cluster-root node overlap and handle alignment in TB workflow layout#5293
ivicac wants to merge 2 commits into
masterfrom
5292

Conversation

@ivicac

@ivicac ivicac commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Reserve a configured cluster-root node's full rendered width in the vertical
(TB) dagre layout and place condition branch children by handle column instead
of top-left, so cluster-root boxes (Approval/AI Agent) no longer overlap sibling
branches and stay aligned with the chain and their child nodes. Bound the inline
label width, center the cluster-element icon row, and left-align the box so its
icon sits on the connection handle.

Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com

…B workflow layout

Reserve a configured cluster-root node's full rendered width in the vertical
(TB) dagre layout and place condition branch children by handle column instead
of top-left, so cluster-root boxes (Approval/AI Agent) no longer overlap sibling
branches and stay aligned with the chain and their child nodes. Bound the inline
label width, center the cluster-element icon row, and left-align the box so its
icon sits on the connection handle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the workflow editor layout pipeline to better account for the rendered width and handle alignment of configured clusterRoot nodes (e.g., Approval / AI Agent) in top-to-bottom (TB) layouts, preventing branch overlap and improving visual alignment.

Changes:

  • Added explicit TB width + label-width constants for configured clusterRoot nodes.
  • Updated Dagre sizing + post-processing constraints to align condition-branch children by handle column and to expand branch offsets when a wide configured clusterRoot would otherwise overlap a sibling branch.
  • Refined AiAgentNode TB rendering (label width bounding, left alignment, centered icon row) and added/updated unit tests around the new layout math.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
client/src/shared/constants.tsx Adds TB cluster-root sizing constants (CLUSTER_ROOT_NODE_WIDTH, CLUSTER_ROOT_NODE_LABEL_WIDTH).
client/src/pages/platform/workflow-editor/utils/postDagreConstraints.ts Adjusts branch-child alignment to use handle columns; expands condition branch offsets based on cross-size; adds cluster-root width/handle offset logic.
client/src/pages/platform/workflow-editor/utils/postDagreConstraints.test.ts Extends constraint tests to cover configured cluster-root branches and the new offset computation.
client/src/pages/platform/workflow-editor/utils/layoutUtils.tsx Centralizes Dagre node sizing via getDagreNodeSize() and reserves full TB width for configured cluster roots.
client/src/pages/platform/workflow-editor/utils/layoutUtils.test.tsx Adds coverage for getDagreNodeSize() (TB + LR behavior).
client/src/pages/platform/workflow-editor/nodes/AiAgentNode.tsx TB visual tweaks: left-align box, bound label width, center the configured icon row, improve truncation alignment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread client/src/pages/platform/workflow-editor/utils/layoutUtils.tsx Outdated
Comment thread client/src/pages/platform/workflow-editor/utils/postDagreConstraints.test.ts Outdated
Comment thread client/src/pages/platform/workflow-editor/utils/postDagreConstraints.ts Outdated
Comment thread client/src/pages/platform/workflow-editor/utils/postDagreConstraints.ts Outdated
… handle offsets, rename layout fn

- Consolidate the "configured cluster elements" predicate into a single
  exported hasConfiguredClusterElements() in postDagreConstraints.ts and reuse
  it across layoutUtils.tsx (removing nodeHasConfiguredClusterElements and the
  two inline hasValidClusterElements blocks).
- Export REGULAR_NODE_HANDLE_OFFSET / CONFIGURED_CLUSTER_ROOT_HANDLE_OFFSET and
  import them in the test so the offsets stay coupled to the production values.
- Rename pullSimpleConditionChildrenInward to alignSimpleConditionChildren and
  document its bidirectional (pull-inward/push-outward) behavior.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed for 'client'

Failed conditions
77.4% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

@ivicac ivicac requested a review from kresimir-coko June 30, 2026 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Configured cluster-root nodes (Approval/AI Agent) overlap sibling branches and misalign in vertical workflow layout

2 participants