patternfly / patternfly/react-topology
Topology: Convex algorithm for nodes of different sizes looks weird
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
Describe the issue. What is the expected and unexpected behavior?
The hull algorithm used to draw the outline of or groups on topology was built to support nodes of the same size. It identifies the point of the node and then adds padding. If all nodes are the same size, the tangent lines between nodes always intersect the circle outline of the nodes where a 90 degree angle could be formed that goes to the center of the node.
This however doesn't work with nodes of different sizes are shown here:
Another example:
Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
n/a
Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
More a bug, but also an enhancement 😏
What is your product and what release version are you targeting?
OpenShift Developer Console, this is a known issue since 4.6, and was reported initially as (https://redhat.atlassian.net/browse/ODC-2071), but since the code was extracted into @patternfly/react-topology we believe we should follow up this issue here.
/cc @jerolimov
Jira Issue: PF-1993
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the hull algorithm used to draw outlines around groups in @patternfly/react-topology, then reproduce the reported case with nodes of different sizes using the issue screenshots as reference. The work is done when group outlines and tangent lines render correctly for nodes with unequal sizes without breaking equal-size nodes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100