Vertex types can't style their own label badge (only edges can)
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## 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.
Contributor guide
Research direction
Start with core/styling/stylingParser.ts and the EdgeVisualStyle and VertexVisualStyle definitions, then compare the edge and node rules in useGraphStyles.ts. Review components/Graph/styles/defaultNodeStyle.ts and the preview/legend use of appDefaultNodeLabelStyle. Done means vertex entries accept the listed label fields, per-type node labels receive the corresponding styling, and the default label style no longer duplicates appDefaultVertexStyle values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100