Shape Bullseyes

[danprince]

Description of new feature

What should the new feature do? For visual features, include an image/mockup of the expected output.

Allow styling the inside of a node shape (a bullseye, open to alternative naming) with a separate set of properties.

Bullseyes are defined with a relative size, independent color & opacity properties, and rendered above the node body, but below the label.

These could be controlled through a few new style properties.

• bullseye-size the relative size of the bullseye to the parent.
• bullseye-color the background color for the bullseye.
• bullseye-opacity the opacity of the bullseye.

Additional considerations:

• Bullseyes where size > 100%. The current behaviour in Kumu is to allow bullseyes to render beyond the bounds of the shape without affecting the hitbox, but this isn't something we see people using. Bullseyes could either render beyond the shape boundaries without affecting the hitbox, or we could cap/clip them to 100%.
• Explicit width/height properties would allow bullseyes with different aspect ratios to the node body. This feature wouldn't be important for us, but we'd implement it if it seems more natural for Cytoscape.
• Absolute size bullseyes. What happens if a user specifies bullseye-size: 50px is this an error or does the bullseye just get an absolute size. How would that work with irregular aspect ratios? Would the bullseye get width: 50px and height: 50px behind the scenes, or would the bullseye scale so that the larger dimension was 50px and the smaller dimension was proportional to the node body?

Motivation for new feature

Describe your use case for this new feature.

A colored bullseye gives one additional dimension for styling a node, which is particularly useful when trying to create visual significance in a map which already uses node background color for another purpose.

The new properties and the rendering layer for bullseyes makes it difficult to implement them as a Cytoscape extension. We can't register additional style properties to support them and we can't patch the renderer to draw them between the node and the label.

Part of trying to achieve Kumu parity, from https://github.com/cytoscape/cytoscape.js/discussions/3145. Here's a reference that includes bullseyes, alongside the other dimensions we use for visualising node data.

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]

How does this differ from background images?

On Sep 12, 2023, at 08:08, Dan Prince @.***> wrote:

Bullseyes are defined with a relative size, independent color & opacity properties, and rendered above the node body, but below the label.

[danprince]

How does this differ from background images?

• Bullseyes can exist in addition to a background image
• Bullseyes can change their color based on node data properties (technically possible with background images, but means pre-generating a potentially large set of images, and building an awkward set of styles for them).
• Bullseyes inherently take the same shape and aspect ratio of the node body, regardless of size.
• They should be significantly more performant to render (one extra path, rather than rendering each one as an image).

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[maxkfranz]

Related: Deprecation of the pie chart properties.

See

• https://github.com/cytoscape/cytoscape.js/issues/2789
• https://github.com/cytoscape/cytoscape.js/issues/2019

[maxkfranz]

If we're considering something like the flags in the figure, then we should reconsider the deprecation of the pie properties, since they're similar.

[maxkfranz]

Similar to ghost properties esp. w.r.t. implementation: https://js.cytoscape.org/#style/ghost

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 14 days. It will be closed if no further activity occurs within the next 7 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[maxkfranz]

Pinned

[maxkfranz]

See also:

Ghost properties: https://js.cytoscape.org/#style/ghost

A bullseye may use a similar implementation with similar -- but unique -- properties. However, the bullseye would have new, bullseye-specific properties, like a property to control its size.