Skip to content

Commit

Permalink
Fix workflow graph nodes are not centered within a group
Browse files Browse the repository at this point in the history
Context: We calculate the graph height by default by calculating the topmost/bottommost node's Y coordinate (center point) and then adding half of the default node height to it (to adjust for the center point) and then adding the default paddings and margins. The error happens when the nodes are custom -> their height does not equal the default node height. To fix this, this CL modifies the topmost/bottommost point getter function to also calculate with an offset.
PiperOrigin-RevId: 712900062
  • Loading branch information
biharygergo authored and copybara-github committed Jan 10, 2025
1 parent 973db2f commit 307db17
Show file tree
Hide file tree
Showing 7 changed files with 8 additions and 6 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 8 additions & 6 deletions src/app/directed_acyclic_graph_raw.ts
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export type EnhancedDagGroup = DagGroup&Dimension&Point&{
* edges positions are moved based this distance.
*/
const REVERSE_EDGE_CONTROL_DISTANCE = 200;
type Orientation = 'center'|'right'|'left';
type Orientation = 'center'|'right'|'left'|'bottom';

/**
* Renders the workflow DAG.
Expand Down Expand Up @@ -713,11 +713,10 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
const margin = this.getGraphMargin();
const rightMostPointX = Math.max(
...this.getAllGraphItemsCoordinateForAxisAndOrientation('x', 'right'));
const topMostPointY =
Math.max(...this.getAllGraphItemsCoordinateForAxisAndOrientation('y'));
const topMostPointY = Math.max(
...this.getAllGraphItemsCoordinateForAxisAndOrientation('y', 'bottom'));
this.graphWidth = rightMostPointX + this.nodePad + margin['right'];
this.graphHeight =
topMostPointY + nodeHeight / 2 + this.nodePad + margin['bottom'];
this.graphHeight = topMostPointY + this.nodePad + margin['bottom'];
this.graphResize.emit({width: this.graphWidth, height: this.graphHeight});
}

Expand Down Expand Up @@ -760,12 +759,15 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {

getAllGraphItemsCoordinateForAxisAndOrientation(
dim: 'x'|'y', orient: Orientation = 'center'): number[] {
const {getNodeWidth, iconSpaceWidth} = this.dims;
const {getNodeWidth, height, iconSpaceWidth} = this.dims;
let nodeOff = (node: CustomNode|DagNode|DagGroup) => {
const type = this.getNodeType(node);
if (type === 'group' || node instanceof CustomNode) {
return (dim === 'x' ? node.width : node.height) / 2;
}
if (orient === 'bottom' && dim === 'y') {
return node.height / 2;
}
if (orient === 'center' || dim !== 'x') return 0;
if (type === 'artifact' && this.collapsed) return iconSpaceWidth;
return getNodeWidth(node.state, node.conditionalQuery) / 2;
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 307db17

Please sign in to comment.