PostHog / PostHog/posthog

Selecting a step in the workflow editor doesn't highlight its connected edges

Open
#73,671 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Python
Stars
39.9k
Forks
3.4k
Avg merge
6h 51m
Merged PRs (30d)
232

Description

Bug Description

In a workflow with several branches, edges pass close to one another and it's hard to tell
which step connects to which. Selecting a step doesn't help: its incoming and outgoing
edges render identically to every other edge.

In the workflow below, five paths converge on the Exit step along a single horizontal
line. There's no way to tell which incoming line belongs to which upstream step, and
clicking any of them changes nothing on screen.

Image

Looking at the code, the SmartEdge component under
products/workflows/frontend/Workflows/hogflows/react_flow_utils/ never receives or reads
a selected state; the only conditional stroke in it is the green success trace used for
test runs. Separately, resetFlowFromHogFlow in hogFlowEditorLogic.tsx constructs every
edge with selectable, focusable, reconnectable and deletable all false, so edges
carry no selection state at all and aren't reachable by keyboard either.

How to reproduce

  1. Open a workflow with at least one conditional branch where two or more paths converge
    on the same step.
  2. Click a step that has an outgoing edge into that convergence point.
  3. Observe that no edge changes appearance.

Additional context

Expected: selecting a step emphasises the edges attached to it, for example an accent
stroke and increased width on connected edges, or dimming the unconnected ones, so its
connections are readable at a glance.

This looks cheap to fix: hogFlowEditorLogic already tracks selectedNodeId and it's
already wired to onNodeClick, so SmartEdge only needs to read it and branch on whether
the edge's source or target matches.

Happy to open a PR for this if you can point me at the preferred approach.

Debug info
- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables or https://eu.posthog.com/settings/project-details#variables]
- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]
- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]

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 with the SmartEdge component under products/workflows/frontend/Workflows/hogflows/react_flow_utils/ and resetFlowFromHogFlow in hogFlowEditorLogic.tsx. Trace how selectedNodeId is wired through onNodeClick and how edges are constructed, then reproduce the converging-branches case. Done means selecting a step visibly distinguishes its connected edges from unrelated edges.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.