Skip to content

Add legend to schema graph view with schema discovery disclaimer #1526

@kmcginnes

Description

@kmcginnes

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    explorationIssues related to graph exploration, node & edge details, neighbor expansion, etcschemaIssues related to the schema definition or synchronizationusabilityIssues relating to the ease of use of the UI or features

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions