aws / aws/graph-explorer

Node icon disappears when background opacity is set to 100%

Open
#1,994 0 comments 0 reactions 0 assignees View on GitHub
customization internal usability
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
8d 9h
Merged PRs (30d)
7

Description

When a node's background opacity is raised to 100%, the node icon is no longer visible. The icon is rendered as the node's `backgroundImage`, and at full background opacity the solid background color obscures it, leaving a plain colored node with no icon.

## Environment

- All environments, browser-based
- Any node type with a custom background opacity applied via the style editor

## Steps to Reproduce

1. Open the vertex style editor for a node type with an icon
2. Raise the background opacity to 100%
3. Observe the node in the graph

## Expected Behavior

The icon remains visible regardless of background opacity.

## Actual Behavior

The icon disappears once background opacity is high enough that the background color fully covers it.

## Notes

Solutions may be tricky and need prototyping to explore options (tracked in a child spike). One simple candidate: switch the icon to white or black once opacity passes some threshold, so it stays legible against the solid background. Other approaches (e.g. compositing the icon above the background layer, or a separate icon-opacity control) should be weighed during prototyping.

## Related Issues

- Related to #1943 — Improved Style Options roadmap (icon/label styling model)

---

> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.

Contributor guide

Open the contributing guide

Research direction

Start with the vertex style editor and the node rendering path that uses the icon as a backgroundImage. Review the child spike and compare the proposed compositing, contrast, and icon-opacity approaches. Done means the icon remains visible at 100% background opacity across node types without regressing normal opacity behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.