Skip to content

Pathway diagram edges render without visible arrowheads #112

@adamjohnwright

Description

@adamjohnwright

After the preferS3: true fix (commit c5311c0) the pathway-browser actually loads diagram data, exposing a pre-existing rendering bug: edges between entities and reactions render as plain lines without visible arrowheads on most pathway diagrams.

Catalyst (green hollow circle) endShapes do render correctly. The missing arrows are on production / consumption / regulation edges.

Repro:

Suspected culprits in projects/reactome-cytoscape-style/src/lib/style.ts:

  1. Lines 624-626: 'target-arrow-width': '100%' and the matching 'source-arrow-width' on the default edge selector. The lines carry // @ts-ignore. Cytoscape 3.30+ added target-arrow-width as a valid property; a string '100%' may parse to 0 or otherwise collide with the arrow-scale: 1.5 setting on the same selector. Try removing both lines on a probe branch.
  2. Line 673: edge.consumption sets target-endpoint: inside-to-node. If edge.production or similar classes inherit this somehow, arrows would render inside the reaction node and be visually hidden.

Needs browser DevTools inspection of an actual rendered <edge> element to confirm computed target-arrow-* style values and the rendered SVG/canvas state of the arrowhead.

Reference: PR #49 attempted a fix at the wrong layer (diagram.service.ts edge endpoint fallback) -- reverted in 9e2aa83 because forcing nodeP/reactionP positioned OUTPUT arrows at the reaction centre. Real fix is likely in the Cytoscape stylesheet.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions