aws / aws/graph-explorer

Derive line-style icons and edge-detail line from CSS border style

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

Description

## Task

Line styles (`solid`/`dashed`/`dotted`) are currently represented three different ways:

1. Hand-drawn `LineSolid`/`LineDashed`/`LineDotted` SVG icons in the style-dialog dropdowns.
2. A `styleForLineStyle()` helper in `EdgeDetail.tsx` that hand-writes gradient CSS for the vertical connector line between the arrows.
3. `EdgePreview.tsx`, which already renders the real line via `borderTopStyle: edgeStyle.lineStyle`.

The `LineStyle` values are valid CSS `border-style` keywords, so #1 and #2 are hand-rolled duplicates of what CSS gives for free (as demonstrated by #3). Additionally, `LINE_STYLE_OPTIONS` is defined twice (`EdgesStyling/lineStyling.tsx` and `NodesStyling/lineStyling.tsx`), and the NodesStyling copy carries unused `render` wrappers.

### Scope

- Add a `LineStyleIcon` drawn with `borderTopStyle: lineStyle` + `currentColor` (same native mechanism as the edge preview); replace the 3 SVG icons.
- Replace `EdgeDetail`'s `styleForLineStyle()` gradients with a `border`-based vertical line; delete the helper.
- Consolidate the two `LINE_STYLE_OPTIONS` into one `{ label, value }[]` (mirroring `ARROW_STYLE_OPTIONS`); delete both `lineStyling.tsx` files.
- Move the icon before the label in the Line Style and Border Style dropdowns (both dialogs), matching the arrow-style dropdowns.
- Delete `LineSolid`/`LineDashed`/`LineDotted` icon files and their barrel exports.

### Notes

Follow-up to the arrow-icon dedup (#1985); same single-source-of-truth pattern.

> [!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 EdgePreview.tsx to mirror its CSS border rendering, then inspect EdgeDetail.tsx and the Line Style and Border Style dropdowns. Trace LINE_STYLE_OPTIONS in EdgesStyling/lineStyling.tsx and NodesStyling/lineStyling.tsx, plus the LineSolid/LineDashed/LineDotted files and barrel exports. Done means one shared options list, native border-based icons and connector styling, and icons preceding labels in both dialogs.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.