Implement edit capabilities for architecture diagram visualizer#1019
Implement edit capabilities for architecture diagram visualizer#1019msdorothyewuah wants to merge 24 commits intofinos:mainfrom
Conversation
WIP: Implement edit capabilities for architecture diagram visualizer
|
To do:
|
|
Noticed a couple of bugs that just looking in to:
|
aamanrebello
force-pushed
the
calm-ui-feature-779
branch
from
b19f416 to
19a1576
Compare
|
@msdorothyewuah please mark this PR as ready when builds are working and you are ready for this to be reviewed |
The editor now provides a complete flow for creating/editing the architecture diagram You can now: 1. Add nodes with the "Add Node" button 2. Edit node/edge details in the sidebar 3. Create connections between nodes from the sidebar 4. Export the resulting diagram as JSON 5. I included a delete to be able to remove newly added nodes or edges.
|
This PR is ready for review. The editor now provides a complete flow for creating/editing the architecture diagram. You can now:
|
|
@msdorothyewuah lint is failing, please can you take a look |
msdorothyewuah
changed the title
|
Currently seeing the below error: Seems that drawer is still in use - so not sure if it should be deleted! |
This reverts commit 7bd1ba5.
…into calm-ui-feature-779
calm-hub-ui/src/visualizer/components/cytoscape-renderer/cytoscape.css
Outdated
Show resolved
Hide resolved
|
PR out of date with latest changes |
@oliviajanejohns @YoofiTT96 @aamanrebello @Adwoa-Konadu-Appiah as we discussed during our UI/UX sync on Friday, this is the full implementation, now complete with detailed documentation and resolution of merge and implementation conflicts. |
| label: '', // No native label | ||
| width: '200px', | ||
| height: 'label', | ||
| height: isNodeDescActive ? '130px' : '70px', |
There was a problem hiding this comment.
Is 130px an arbitrary height? What if the description is longer?
There was a problem hiding this comment.
Maybe this can be tackled in another PR though.
There was a problem hiding this comment.
I used this as the average height while we figure out a better approach
| group: 'nodes', | ||
| classes: 'node shell-node', | ||
| data: shellNodeData, | ||
| position: { x: 300, y: 300 }, |
There was a problem hiding this comment.
Are we always adding new nodes in a fixed position? Again, in a future PR, we may want to improve this.
There was a problem hiding this comment.
What happens if you add multiple? Are they all added on top of each other?
There was a problem hiding this comment.
You can only create one shell node at a time as you are required to fill in the node details before you proceed but no when you create two they do not stack up on each other
There was a problem hiding this comment.
If the diagram is complicated it could be good to know where the shell was added.
There was a problem hiding this comment.
Got it. I will note this down for future iterations
|
Do you encounter this problem when selecting a new node?
|
@aamanrebello I’m not seeing this issue on my end, but it looks like the double rendering bug we discussed is showing up in complex diagrams. Noted. Definitely something to keep in mind as we finalize the rendering approach |
|
Whats the latest with the bug mentioned above? |
|
Closing this PR following the discussion to hold off on adding editing capabilities for now. Happy to revisit it in the future if priorities change. |
4 participants
Architecture Diagram Editor
This PR implements the initial functionality to convert our read-only architecture diagram visualizer into an interactive editor. This allows users to add nodes and edges to the diagram and save the updated JSON.
Currently Implemented:
In Progress:
Known Issues:
This PR is being submitted as WIP to get early feedback on the implementation approach while continuing to work on the remaining issues.
Screenshots attached below show current progress.