aws / aws/graph-explorer

Spike: how to keep the node icon legible at high background opacity

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

Description

## Goal

Decide how a node icon should stay legible as its background opacity approaches 100%, where a solid background color currently obscures the icon (#1994). This is a prototyping spike: produce a recommendation and a rough prototype to react to, not a shipped fix.

Questions to resolve:

- **Threshold approach** — does switching the icon to white or black once background opacity passes a threshold read well across the range of background colors and icons? Where does the threshold sit, and how is the white-vs-black choice made (e.g. background luminance)?
- **Compositing approach** — can the icon be drawn above the background layer so opacity applies to the fill only, leaving the icon untouched? What does this cost in the Cytoscape node style mapping (`toCyNodeStyle`)?
- **Separate control** — is a distinct icon-opacity (or icon-color) control warranted instead of deriving behavior from background opacity?
- **Interaction with the styling model** — how does the chosen approach fit the direction in #1943 (Improved Style Options), so we do not build something the style revamp will immediately rework?

## Related Issues

- Parent #1994 — the bug this spike scopes a fix for
- Related to #1943 — Improved Style Options roadmap

---

> [!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 by examining the Cytoscape node style mapping entry point, toCyNodeStyle, and the direction in #1943. Prototype the threshold, compositing, and separate-control options against varied background colors and icons; done means a recommendation and rough prototype that address the listed questions without shipping a fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.