aws / aws/graph-explorer

Normalize custom SVG icon colors at upload time (hardcoded fills don't take node color)

Open
#2,105 0 comments 0 reactions 0 assignees View on GitHub
customization enhancement internal needs-triage
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
8d 9h
Merged PRs (30d)
7

Description

## Description

Custom-uploaded SVG icons whose shapes use hardcoded `fill`/`stroke` colors (rather than `currentColor`) never take on the node's configured color, in either the pre- or post-#2102 icon pipeline. Confirmed not a regression — root-caused while diagnosing #2102/#2103: uploading a traced/silhouette SVG (e.g. potrace output, `fill="#000000"` on the root, no `currentColor` anywhere) via `NodeStyleDialog`'s custom icon upload renders the icon with its authored black fill regardless of the node style color. `renderNode.tsx`'s `applyColor` sets `style="color:X"` on the SVG root, which only affects `currentColor`-authored strokes/fills via CSS inheritance — a literal `fill="#000000"` ignores it. Related community report: #290 (2024, closed without this being addressed).

## Preferred Solution

Normalize custom SVG icons **at upload time** in `NodeStyleDialog.tsx` (around the `file.type`-driven upload handler, line 131): rewrite literal `fill`/`stroke` color values in the uploaded SVG to `currentColor` (skip `none` and elements with no fill/stroke set), so the stored icon becomes colorable through the existing style-based mechanism (`applyColor` in `renderNode.tsx`) without changing render-time behavior for every icon on every render.

**Open sub-problem — needs a decision, not prescribed here:** normalize-on-upload only fixes icons uploaded after this ships. Icons already stored (existing `VertexStyle.iconUrl` data URIs) keep their old hardcoded colors. Options to weigh: a one-time migration pass over stored styles; a lazy re-normalize when a style is next edited/saved; or a render-time fallback (recolor hardcoded fills at render, i.e. "tint everything") as a belt-and-suspenders for pre-existing icons. Whichever is picked affects scope significantly — flagging for scoping, not deciding here.

## Related Issues

- Related to #290
- Related to #2102
- Related to #2103

---

> [!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 in NodeStyleDialog.tsx around the file.type-driven custom icon upload handler, then read renderNode.tsx and its applyColor behavior. Define how uploaded SVG fill and stroke values should be normalized, and decide how existing VertexStyle.iconUrl data should be handled. Done means custom icons with literal colors follow the node color without changing normal render-time behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.