4. Highlight States #397
Description
Summary
Manage highlight state for showing focused relationships in the diagram, including visual highlighting, centering, and a highlight info banner.
Requirements
Highlight Triggers
- Clicking an FK field highlights that relationship
- Clicking an edge highlights that relationship
Visual Highlighting
- Highlighted nodes have distinct border/glow styling
- Highlighted edges have distinct color
- Highlighted fields within nodes have distinct background styling
- Non-highlighted elements (specifically irrelevant schemas) should be visually de-emphasized when a highlight is active
Diagram Focus
- When a highlight is triggered, the diagram should auto-layout center & focus on the relevant entities
Highlight Info Banner
- Display a banner at the top of the modal when a highlight is active
- Banner shows the current highlight context (`Highlighting schema relation: schemaX -> schemaY -> schemaN)
- interactive "Clear highlight" text in the banner
- Clicking "Clear highlights" removes all highlighting and returns to default view
Clear Behavior
- Clicking on empty diagram space (pane) clears highlights
- "Clear highlights" button clears highlights
- Closing and reopening modal clears highlights
Visual References
Highlight Example A (2 Nodes)
Highlight Example A (3 Nodes)
Acceptance Criteria
- Clicking FK field highlights the field and connected relationship
- Clicking edge highlights the edge and connected nodes
- Highlighted elements have distinct visual styling
- Diagram centers on highlighted elements
- Highlight info banner appears when highlight is active
- Banner displays relevant schema information
- "Clear highlights" button is visible when highlight is active
- "Clear highlights" resets to default view
- Clicking empty diagram space clears highlights