aws / aws/graph-explorer

Scope graph styles and icon rendering to canvas types only

Open
#1,679 0 comments 0 reactions 0 assignees View on GitHub
enhancement performance
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

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.