Skip to content

Add clickable links for node types and edge types in schema explorer details panel#1731

Open
1wos wants to merge 1 commit intoaws:mainfrom
1wos:feat/clickable-types-in-schema-details
Open

Add clickable links for node types and edge types in schema explorer details panel#1731
1wos wants to merge 1 commit intoaws:mainfrom
1wos:feat/clickable-types-in-schema-details

Conversation

@1wos
Copy link
Copy Markdown

@1wos 1wos commented Apr 26, 2026

Closes #1542.

Summary

Makes the vertex types and edge type rendered in EdgeConnectionRow clickable. Clicking a vertex type or edge type updates the schema graph selection to that item, keeping both the sidebar details and the graph view highlight in sync.

Changes

  • Details.tsx
    • VertexTypeText and EdgeTypeText accept an optional onClick prop. When provided, they render as <button type="button"> with focus-visible styles for keyboard support; otherwise they remain <span>s with no behavior change.
    • EdgeConnectionRow accepts an optional onSelectionChange: (item: SchemaGraphSelectionItem) => void. When provided, it builds click handlers for the source vertex, edge type, and target vertex that invoke onSelectionChange with the appropriate selection item (using createEdgeConnectionId for the edge case).
  • NodeLabelDetails.tsx, EdgeConnectionDetails.tsx
    • Accept and forward the optional onSelectionChange to EdgeConnectionRow.
  • SchemaDetailsContent.tsx, SchemaExplorerSidebar.tsx
    • Accept and forward the optional onSelectionChange down the tree.
  • SchemaGraph.tsx
    • New handleSidebarSelectionChange that updates both selection (SchemaGraphSelection) and graphSelection (SelectedElements), keeping the graph view highlight in sync as required by the issue.

Behavior notes

  • Backwards compatible: onSelectionChange is optional everywhere it is threaded. Components rendered without it behave exactly as before (no buttons, no behavior change).
  • a11y: clickable types are real <button> elements with focus-visible:ring, working with keyboard (Tab / Enter / Space) and screen readers.
  • Visual styling is unchanged; hover (hover:text-text-primary) and focus rings are added on top of the existing underline/italic styles.
  • Naming: chose onSelectionChange (matching the example in the issue's implementation notes) instead of onSelect to avoid clashing with the React onSelect event handler that components extending ComponentPropsWithRef<typeof Panel> already inherit.

Tests

Added five behavior tests in Details.test.tsx:

  1. EdgeConnectionRow without onSelectionChange renders no buttons (back-compat).
  2. With onSelectionChange, renders three buttons (source vertex / edge type / target vertex).
  3. Clicking the source vertex calls onSelectionChange with { type: "vertex-type", id: <source> }.
  4. Clicking the target vertex calls onSelectionChange with { type: "vertex-type", id: <target> }.
  5. Clicking the edge calls onSelectionChange with { type: "edge-connection", id: <edgeConnectionId> }.

Verification

  • pnpm exec vitest run packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.test.tsx — 8/8 passing.
  • pnpm exec tsc --noEmit (in packages/graph-explorer) — clean.
  • pnpm exec eslint packages/graph-explorer/src/modules/SchemaGraph/ — clean.
  • pnpm exec prettier --check on the seven changed files — clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add clickable links for node types and edge types in schema explorer details panel

1 participant