Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added drag and drop to Failed Message Flow Diagram nodes #1686

Merged
merged 9 commits into from
Jan 31, 2024

Conversation

PhilBastian
Copy link
Contributor

@PhilBastian PhilBastian commented Jan 25, 2024

Migrated flow diagram from AngularJS directly used d3 for DOM drawing of SVG elements.
This PR changes to use a Vue-specific flow diagram library, allowing for using templates rather than HTML string concatenation.

This also fixes an issue where the diagram wouldn't update the UI reactively as the node elements changed.

This PR also enables the use of drag and drop on nodes for user-managed layout.

@PhilBastian PhilBastian marked this pull request as ready for review January 29, 2024 04:42
Copy link
Member

@johnsimons johnsimons left a comment

Choose a reason for hiding this comment

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

LGTM 👍
Added a few comments, mostly just questions, not knowing how things work

src/ServicePulse.Host/vue/package.json Show resolved Hide resolved
}
elements.value = [...constructNodes(mappedMessages), ...constructEdges(mappedMessages)];
//TODO: if doing fitView on next Vue onUpdated() then it doesn't appear the elements
// are actually drawn yet. See if we can determine a better event to use this on rather than relying on setTimeout
Copy link
Member

Choose a reason for hiding this comment

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

Still working on this one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I couldn't work out a nice solution (the documentation for Vue-flow isn't the greatest). This was the best I could come up with, but left the TODO for future reference

Copy link
Member

@mikeminutillo mikeminutillo left a comment

Choose a reason for hiding this comment

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

Early review. I need to go back over the layout stuff but so far it looks much nicer (and easier to extend)

…onflict

# Conflicts:
#	src/ServicePulse.Host/vue/package-lock.json
#	src/ServicePulse.Host/vue/src/components/failedmessages/FlowDiagram.vue
@PhilBastian PhilBastian added this to the vNext milestone Jan 31, 2024
@PhilBastian PhilBastian merged commit 8d2ae03 into master Jan 31, 2024
5 checks passed
@PhilBastian PhilBastian deleted the flow_diagram_refactor branch January 31, 2024 06:26
@PhilBastian PhilBastian added Type: Refactoring Type: Refactoring javascript Pull requests that update Javascript code labels Feb 1, 2024
@PhilBastian PhilBastian changed the title Flow diagram refactor Flow diagram library change Feb 1, 2024
@PhilBastian PhilBastian added Type: Improvement Type: Improvement and removed Type: Refactoring Type: Refactoring labels Feb 1, 2024
@mikeminutillo mikeminutillo changed the title Flow diagram library change Remove D3 dependency from Failed Message Flow Diagram Feb 12, 2024
@mikeminutillo mikeminutillo changed the title Remove D3 dependency from Failed Message Flow Diagram Added drag and drop to Failed Message Flow Diagram nodes Feb 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javascript Pull requests that update Javascript code Type: Improvement Type: Improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants