Scope graph styles and icon rendering to canvas types only
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Description
The graph styling pipeline creates per-type artifacts for every type in the schema, not just types visible on the canvas. With 70k+ types, this creates 70k Cytoscape style selectors, 70k TanStack Query instances for icon rendering, and 70k preference objects — all on every render cycle.
The graph canvas typically only shows a handful of types at a time. The styling system should only process types that are actually present.
## Preferred Solution
### 1. Change `useGraphStyles` to only generate styles for canvas types (`useGraphStyles.ts:42-80`)
Currently iterates `useAllVertexPreferences()` which returns preferences for all 70k schema types. Instead, derive the set of types from the nodes/edges currently on the Cytoscape canvas and only generate style selectors for those types.
### 2. Change `useBackgroundImageMap` to only query icons for canvas types (`useBackgroundImageMap.ts`)
Currently creates one TanStack Query per vertex type in the schema. Should only create queries for types present on the canvas. This eliminates 70k query observer instances.
### 3. Scope `useAllVertexPreferences` / `useAllEdgePreferences` to canvas types (`userPreferences.ts:175-192`)
These hooks feed into the style pipeline. Add a canvas-scoped variant that only returns preferences for types in the current graph view.
### 4. Scope the Legend to canvas types (`GraphViewer.tsx:238-260`)
The Legend renders all vertex types without virtualization. It should only show types that are present on the canvas, and virtualize the list as a fallback.
## Related Issues
- Part of #1677
Contributor guide
Assessment
This issue has not been assessed yet.