Add legend to schema graph view with schema discovery disclaimer
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Summary
Add the legend panel (currently only in the graph view) to the schema graph view. Include a disclaimer message at the top of the legend content informing users that the schema was discovered by sampling and may not be 100% accurate. Persist the open/closed state of the legend separately for each view using localforage.
## Background
The graph view (`GraphViewer.tsx`) has a `Legend` component that displays vertex type symbols and labels using `useDisplayVertexTypeConfigs`. The schema graph view (`SchemaGraph.tsx`) currently has no legend. The schema discovery disclaimer currently lives as an `InfoTooltip` in `SchemaGraphToolbar.tsx`:
> This schema was implicitly discovered by sampling the structure of the data and may not represent the complete schema.
This tooltip will be replaced by the disclaimer text in the legend.
## Requirements
### 1. Extract and reuse the Legend component
- Extract the `Legend` component from `GraphViewer.tsx` into a shared location (e.g., `src/components/`)
- The legend displays vertex type icons and display labels from `useDisplayVertexTypeConfigs`
### 2. Add legend to the schema graph view
- Add a legend toggle button to `SchemaGraphToolbar.tsx`
- Render the legend panel overlaying the schema graph in `SchemaGraph.tsx`, similar to how it overlays in `GraphViewer.tsx`
### 3. Add schema discovery disclaimer to the schema legend
- At the top of the legend content (above the vertex type list), add text informing the user that the schema was discovered by sampling and may not be complete
- Use the existing message: "This schema was implicitly discovered by sampling the structure of the data and may not represent the complete schema."
- Remove the `InfoTooltip` from `SchemaGraphToolbar.tsx` since the message moves to the legend
### 4. Persist legend open/closed state via localforage
- Create two new persisted atoms in `storageAtoms.ts` using `atomWithLocalForage`:
- `graphViewLegendOpenAtom` — for the graph view legend (default: `false`)
- `schemaViewLegendOpenAtom` — for the schema view legend (default: `true`, open by default for new users)
- Replace the local `useState` in `GraphViewer.tsx` with the `graphViewLegendOpenAtom`
- Use `schemaViewLegendOpenAtom` in `SchemaGraph.tsx`
## Relevant Files
- `packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx` — current Legend component and graph view
- `packages/graph-explorer/src/modules/SchemaGraph/SchemaGraph.tsx` — schema graph view
- `packages/graph-explorer/src/modules/SchemaGraph/SchemaGraphToolbar.tsx` — toolbar with InfoTooltip to remove
- `packages/graph-explorer/src/core/StateProvider/storageAtoms.ts` — localforage-backed atoms
- `packages/graph-explorer/src/core/StateProvider/atomWithLocalForage.ts` — atom factory for localforage persistence
## Parent Issue
Part of #685
Contributor guide
Research direction
Start with the existing Legend in packages/graph-explorer/src/modules/GraphViewer/GraphViewer.tsx, then read SchemaGraph.tsx and SchemaGraphToolbar.tsx to trace the graph overlays and current disclaimer. Review storageAtoms.ts and atomWithLocalForage.ts before wiring the two view-specific states. Done means both views have the requested legend behavior, the schema disclaimer is in the legend, the toolbar tooltip is removed, and state persists independently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- data-visualization, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100