Skip to content

Vertex types can't style their own label badge (only edges can) #2135

Description

@giantamoeba

Description

Edge types can already customize their label badge per type — labelColor, labelBackgroundOpacity, labelBorderColor, labelBorderWidth, and labelBorderStyle are all part of EdgeVisualStyle, accepted by the styling file's edgeEntrySchema, and read by the per-type Cytoscape rule in useGraphStyles.ts (edge[type="..."]) to set text-background-color, text-background-opacity, text-border-*, etc.

Vertex types have no equivalent. VertexVisualStyle carries no label fields, the styling file's vertexEntrySchema silently drops any labelColor/etc a user adds to a vertex entry, and the per-type node rule (node[type="..."]) only ever emits background-image/color/opacity, border-color/width/opacity/style, shape, width, height — never any text-* property. Node label appearance is therefore stuck on a single hardcoded canvas-wide default (components/Graph/styles/defaultNodeStyle.ts), with no way to make one vertex type's label look different from another's, even though the exact same mechanism already works for edges.

Preferred Solution

Bring vertex label styling up to parity with edges:

  • Fold the existing LabelVisualStyle type into VertexVisualStyle, the same way EdgeVisualStyle already does (EdgeVisualStyle = LabelVisualStyle & {...}).
  • Add the matching optional fields (labelColor, labelBackgroundOpacity, labelBorderColor, labelBorderStyle, labelBorderWidth) to vertexEntrySchema in core/styling/stylingParser.ts, matching
    edgeEntrySchema exactly.
  • Extend the per-type node rule in useGraphStyles.ts's createGraphStyles to emit the same text-* Cytoscape properties the edge rule already does, computing label text color from labelColor the same way (new Color(...).isDark() ? "#FFFFFF" : "#000000").
  • appDefaultNodeLabelStyle (currently only consumed by preview/legend UI, disconnected from the real canvas default) can then be derived from appDefaultVertexStyle instead of duplicating its values by hand.

I have an implementation of this ready to open as a PR.

Related Issues

None


Important

If you are interested in working on this issue, please leave a comment.

Tip

Please use a 👍 reaction to provide a +1/vote. This helps the community and maintainers prioritize this request.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions