Skip to content
This repository has been archived by the owner on Dec 13, 2023. It is now read-only.

fixed task card open in Chrome and Firefox #3447

Merged
merged 3 commits into from
May 3, 2023
Merged

fixed task card open in Chrome and Firefox #3447

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0908c00
fixed task card open in chrome and firefox
sourabh30 Jan 16, 2023
cf3518a
Merge branch 'main' into taskOpenNotWorking
sourabh30 Apr 19, 2023
aa75b1c
Merge branch 'main' into taskOpenNotWorking
sourabh30 Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 18 additions & 7 deletions ui/src/components/diagram/WorkflowGraph.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,8 +338,21 @@ class WorkflowGraph extends React.Component {
inner.selectAll("g.node").on("click", this.handleClick);
};

/**
* Get the taskRef id base on browsers
* @param e
* @returns {string | undefined} The id of the task ref
*/
getTaskRef = (e) => {
const flag = navigator.userAgent.toLowerCase().indexOf("firefox") > -1 || navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
if (flag) {
return e.target?.parentNode?.id;
}
return e?.path[1]?.id || e?.path[2]?.id; // could be 2 layers down
};

handleClick = (e) => {
const taskRef = e.path[1].id || e.path[2].id; // could be 2 layers down
const taskRef = this.getTaskRef(e);
Copy link
Contributor

Choose a reason for hiding this comment

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

I made the same comment on 3442 as it seems like this PR Addresses the same issue:

I believe this could be made simpler with event.composedPath(). Chrome recommends updating to this for the now deprecated event.path API https://chromestatus.com/feature/5726124632965120.

It also seems to be compatible with all major browsers https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath#browser_compatibility

Copy link
Contributor

Choose a reason for hiding this comment

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

added the fix here #3459

const node = this.graph.node(taskRef);
if (node.type === "DF_TASK_PLACEHOLDER") {
if (this.props.onClick) this.props.onClick({ ref: node.firstDfRef });
Expand Down Expand Up @@ -667,7 +680,7 @@ function barRenderer(parent, bbox, node) {
return {
x:
(node.fanDir === "down" && point.y > node.y) ||
(node.fanDir === "up" && point.y < node.y)
(node.fanDir === "up" && point.y < node.y)
? point.x
: intersect.rect(node, point).x,
y: point.y < node.y ? node.y - bbox.height / 2 : node.y + bbox.height / 2,
Expand All @@ -687,8 +700,7 @@ function stackRenderer(parent, bbox, node) {
.attr("height", bbox.height)
.attr(
"transform",
`translate(${-bbox.width / 2 - STACK_OFFSET * 2}, ${
-bbox.height / 2 - STACK_OFFSET * 2
`translate(${-bbox.width / 2 - STACK_OFFSET * 2}, ${-bbox.height / 2 - STACK_OFFSET * 2
})`
);
group
Expand All @@ -697,8 +709,7 @@ function stackRenderer(parent, bbox, node) {
.attr("height", bbox.height)
.attr(
"transform",
`translate(${-bbox.width / 2 - STACK_OFFSET}, ${
-bbox.height / 2 - STACK_OFFSET
`translate(${-bbox.width / 2 - STACK_OFFSET}, ${-bbox.height / 2 - STACK_OFFSET
})`
);
group
Expand All @@ -722,4 +733,4 @@ function getTranslateX(elem) {
}
function getTranslateY(elem) {
return elem.transform.baseVal[0].matrix.f;
}
}