Push node background-color to Cytoscape ele.data() with styled type atoms
- 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
Assessment
This issue has not been assessed yet.