3. Field & Edge Interactions

[MitchellShiell]

Summary

Implement interactive behaviours for relationship edges and fields. Ensure clear visual distinction between interactive and non-interactive elements.

Requirements

Fields WITH Foreign Key Relations

• Display hover state when cursor moves over the field
• Field row is clickable
• Clicking will trigger highlight behavior (4. Highlight States #397)
• Visual indicator that the field is interactive (e.g., underline, cursor change)

Fields WITHOUT Foreign Key Relations

• grey hover state displayed
• Not clickable
• Visually distinguishable from interactive FK fields
• Clear UX that only FK fields are interactive

Relationship Edges

• Display hover state when cursor moves over edge
• Edge is clickable
• Clicking will triggers highlight behavior (4. Highlight States #397)

Visual References

Schema relation without any hover states active:

Field hover:

Edge hover:

Non-key field hover:

Acceptance Criteria

• Fields with FK relations show hover state on mouseover
• Fields with FK relations are clickable
• Clicking an FK field triggers the highlight callback
• Fields without FK relations do NOT show hover state
• Fields without FK relations are NOT clickable
• Visual distinction between interactive and non-interactive fields is clear
• Edges show hover state on mouseover
• Edges are clickable
• Clicking an edge triggers the highlight callback

Dependencies

• 2. ERD Rendering #395