Add edge <position>-arrow-width for hollow shapes

[EliotRagueneau]

Description of new feature

Hi, we would like cytoscape.js to allow us to customize how wide the stoke of hollow shapes are, because at the moment they do not blend with the rest of our developped style, but we need them to follow SBGN standards. We were thinking of a property like -arrow-width, but of course it can be simpler than that, like using the edge width on the arrow hollow shapes as well.

Motivation for new feature

We are developing a new reactome-cytoscape-style, similar to SBGN-stylesheet, in order to use it for the new Reactome Pathway-Browser we are developing, but also in our new curator tool.

We need to go by the SBGN standards, but we would like to do so without compromising our newly developed visual identity

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

• [ ] Ensure that the reporter has adequately described their idea. If not, elicit more information about the use case. You should iteratively build a spec together.
• [ ] Ensure that the issue is a good fit for the core library. Some things are best done in extensions (e.g. UI-related features that aren't style-related). Some things are best done by app authors themselves -- instead of in Cytoscape libraries.
• [ ] The issue has been associated with a corresponding milestone.
• [ ] The commits have been incorporated into the unstable branch via pull request. The corresponding pull request is cross-referenced.

[maxkfranz]

Is the requirement for your app that the stroke width of hollow arrows match the main line width, or do they need to vary?

The simplest option may be to expose another width prop for the arrows. Another option is an enum, with values like 'default' and 'match-line'.

A hybrid approach would be to support both, i.e. custom px values or a special 'match-line' enum value.

[maxkfranz]

@ugurdogrusoz, let me know what you think about this issue. You make heavy use of SBGN, so I'd appreciate your opinion.

[EliotRagueneau]

@maxkfranz For us, we just need it to match edge-width, but I assume other people might want a different value.

Personally a width prop sounds both easier and more flexible, but I let you decide what seems like the best option in this case.

Thanks for the fast answer as well!

[maxkfranz]

It looks like Ugur may be away. Let's move forward with the hybrid approach (px value or 'match-line' enum value).

@EliotRagueneau, would you put up a PR of this approach?

These are relevant references:

https://github.com/cytoscape/cytoscape.js/blob/bcaf8339af709f6b973d1d38389f77f55da6b6a7/src/style/properties.js#L279

https://github.com/cytoscape/cytoscape.js/blob/bcaf8339af709f6b973d1d38389f77f55da6b6a7/src/extensions/renderer/canvas/drawing-edges.js#L271

[ugurdogrusoz]

Sorry, I missed this discussion and question. From SBGN's point of view, the width and other style (e.g., color) of glyphs and arcs do not matter. There might be applications where the size of the arrow might grow independent of the edge width but making them consistent should suffice I think.

[EliotRagueneau]

It looks like Ugur may be away. Let's move forward with the hybrid approach (px value or 'match-line' enum value).

@EliotRagueneau, would you put up a PR of this approach?

These are relevant references:

https://github.com/cytoscape/cytoscape.js/blob/bcaf8339af709f6b973d1d38389f77f55da6b6a7/src/style/properties.js#L279

https://github.com/cytoscape/cytoscape.js/blob/bcaf8339af709f6b973d1d38389f77f55da6b6a7/src/extensions/renderer/canvas/drawing-edges.js#L271

I just did the PR, I hope it is close enough to your standards.

@ugurdogrusoz I made it so that by default it matches the line width, but then user can customise it as they wish, I think it should be okay :D Regarding SBGN-style library, it shouldn't change the default appearance I believe, as in your case the edge lines are of width 1.

[EliotRagueneau]

Hi @maxkfranz , I'm curious, what is the usual release cycle of Cytoscape? Like in how much time do you think this new feature will be added?

[maxkfranz]

Usually, a feature release is made during the first week of each month. Typically, the milestones are tagged with expected release dates.