aws / aws/graph-explorer

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

Open
#2,135 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.