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

Node flags #3164

Open
4 tasks
danprince opened this issue Sep 13, 2023 · 8 comments
Open
4 tasks

Node flags #3164

danprince opened this issue Sep 13, 2023 · 8 comments

Comments

@danprince
Copy link

danprince commented Sep 13, 2023

Description of new feature

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

Flags would be a new Cytoscape decoration that allowed nodes to visualise multiple value fields with a set of colors around the outside of the node.

image

This would involve adding the following style properties to Cytoscape.js.

  • flag-property (the name of the property to use for indicating the presence of flags).
  • flag-colors (a list of colors to use)
  • flag-size (the stroke width of the rendered flag)
  • flag-offset (the offset distance between the outside of the node and the center of the flag stroke)

There are two additional properties which might make sense to add here too.

  • flag-spacing or flag-gap (control the size of the gap between flag segments)
  • flag-mode: "sparse" | "fill" (sparse is the default, "fill" ensures that any present flag segments add up to 360 degrees)
image

Additional considerations

It might also be worth considering a syntax which explicitly maps from values to colors, to reduce ambiguity around which value will be assigned to which color.

flag-property: "tags";
flag-colors: "foo" "red", "bar" "green", "baz" "yellow";
/* nodes where `data("tags").includes("foo")` will get a "red" flag. */

It's also worth clearly acknowledging that this is a similar feature to the pie styles mentioned here, but takes a different approach that involves enumerating the values and mapping them to a palette, rather than coding a fixed number of slices statically.

Edge cases

  • Multiple selectors adding flags to elements (last write wins, never merge sets of flags)
  • Number of values exceeding the number of colors (omit flags values that don't have colors)
  • Flags around non-circular elements (flags are always rendered as a circle regardless)
  • Flag spacing values taking up more than 360

Motivation for new feature

Describe your use case for this new feature.

Given a set of nodes where each node has a multiple value property, flags enable quick scannable visualisation of the presence of values on each element. Here's some example data:

{
  nodes: [
    { data: { id: "java", tags: ["static", "jvm", "imperative"] } },
    { data: { id: "scala", tags: ["static", "functional", "jvm"] } },
    { data: { id: "clojure", tags: ["dynamic", "functional", "jvm"] } },
  ]
}

And here's a suggestion for how flag styles would work:

[tags] {
  flag-property: "tags";
  flag-colors: "red", "green", "blue", "cyan", "magenta", "yellow";
}

And a mockup for how they'd look:

image

As additional context, here's some of the language and framing we've used for introducing Kumu users to flags.

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

@danprince, do you want to schedule a call to discuss some of these issues in more detail? I'm offline this upcoming week, so we could schedule something for the subsequent week. My email is [email protected].

@danprince
Copy link
Author

Thanks! Replied by email.

@stale
Copy link

stale bot commented Sep 29, 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 29, 2023
@maxkfranz maxkfranz removed the stale label Oct 1, 2023
@stale
Copy link

stale bot commented Oct 16, 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 16, 2023
@maxkfranz maxkfranz added pinned A long-lived issue, such as a discussion and removed stale labels Oct 16, 2023
@maxkfranz
Copy link
Member

Summary of previous discussions:

  • There should be separate properties for flags, even if they share a similar implementation to pie charts
  • Pie charts should be un-deprecated. A new issue for this will be made.

@maxkfranz
Copy link
Member

@danprince, do you have an ETA for the PRs for the prior features?

@danprince
Copy link
Author

Hey @maxkfranz, afraid we're still catching up on work from the end of last year without a ton of breathing room at the moment.

I can drop you a line when we've got some space again, but it's definitely not going to be in the next few weeks.

@maxkfranz
Copy link
Member

@danprince

I'll keep these issues pinned, and I'll keep an eye out for your upcoming email.

@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