patternfly / patternfly/react-topology

Topology: Convex algorithm for nodes of different sizes looks weird

Open
#14 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.