Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shape Bullseyes #3161

Open
4 tasks
danprince opened this issue Sep 12, 2023 · 9 comments
Open
4 tasks

Shape Bullseyes #3161

danprince opened this issue Sep 12, 2023 · 9 comments

Comments

@danprince
Copy link

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.

image

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 #3145. Here's a reference that includes bullseyes, alongside the other dimensions we use for visualising node data.

image

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
Copy link
Member

maxkfranz commented Sep 13, 2023 via email

@danprince
Copy link
Author

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
Copy link

stale bot commented Sep 27, 2023

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.

@stale stale bot added the stale label Sep 27, 2023
@maxkfranz maxkfranz removed the stale label Sep 28, 2023
@maxkfranz
Copy link
Member

Related: Deprecation of the pie chart properties.

See

@maxkfranz
Copy link
Member

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
Copy link
Member

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

@stale
Copy link

stale bot commented Oct 18, 2023

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.

@stale stale bot added the stale label Oct 18, 2023
@maxkfranz maxkfranz added pinned A long-lived issue, such as a discussion and removed stale labels Oct 18, 2023
@maxkfranz
Copy link
Member

Pinned

@maxkfranz
Copy link
Member

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.

@maxkfranz maxkfranz removed the pinned A long-lived issue, such as a discussion label Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants