aws / aws/graph-explorer

Push node background-color to Cytoscape ele.data() with styled type atoms

Open
#1,725 1 comment 0 reactions 1 assignee Claimed by @kmcginnes View on GitHub
enhancement performance schema
Dominant language
TypeScript
Stars
481
Forks
108
Avg merge
8d 9h
Merged PRs (30d)
7

Description

## Description

The current system rebuilds a per-type Cytoscape stylesheet (up to 70k selectors) whenever any style preference changes. This is the primary performance bottleneck for large schemas.

This slice validates a new architecture end-to-end with a single property (`background-color`):

1. Add `styledVertexTypeAtom(type)` / `styledEdgeTypeAtom(type)` — new per-type atoms that compose `graphSchemaAtom` + preference atoms, returning `{ schema, preferences }`
2. When creating Cytoscape nodes, set `ge_color` in `ele.data()` from the new styled atoms
3. Add a `data(ge_color)` mapper to the Cytoscape stylesheet for `background-color`, alongside the existing per-type selector
4. Add a `useSyncStylesToGraph` hook that batch-updates `ele.data()` when a preference changes for a given type

The old per-type selector system continues to work for all other properties. This slice proves the architecture works before committing to a full migration.

## Preferred Solution

- New atoms: `styledVertexTypeAtom(type)` and `styledEdgeTypeAtom(type)` that return `{ schema: VertexSchema, preferences: VertexPreferences }`
- Use Cytoscape built-in `data()` string mappers (not function mappers) for style resolution
- Use `cy.batch()` to coalesce `ele.data()` updates when preferences change
- Only update elements of the changed type — O(elements of that type), not O(all elements)

## Related Issues

- Part of #1677
- Supersedes #1678

---

> [!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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.