5. Table View Interactions & Visual Indicators #398
Description
Summary
Enhance the table view to display visual key indicators (PK/FK) in the Attribute column and enable navigation from FK relationships to the ERD diagram modal with highlighted relationships.
Requirements
Key Icons & Visual Indicators
Key Icons:
- Display a key icon for fields that are primary keys (PK), foreign keys (FK), or both
Visual Distinction for FK Relationships:
- Fields with FK relationships display an underline showing they are interactive
- Fields that are PK-only (no FK relationship) do NOT have this interactive indicator and are not underlined
- The distinction clearly communicates which fields can be clicked to view relationships in the ERD view
Clickable FK Key Attributes
Hover State:
- FK key attributes show hover state indicating they are clickable
- Cursor changes to pointer
- Visual feedback (color change)
Click Behavior:
- Clicking an FK key attribute opens the ERD modal
- The modal opens with the relevant relationship already highlighted
- Diagram centers on the relevant entities
Non-FK Keys:
- PK-only fields (without FK relationship) are NOT clickable
- No hover state for PK-only fields
Important
Edge case to consider: is it possible for a value have a conditional required when attribute and be a foreign key? This would require a two interactions (conditional logic modal & ERD view)
We could default the required when to open the conditional modal in this case as the user can still access the ERD view from the allowed values link described below.
Allowed Values FK Mapping Links
Link Placement:
- When the Allowed Values column displays text explaining a FK relationship, add a "view in diagram" link
- Link appears at the end of the FK explanation text
Link Behavior:
- Link shows hover state (underline, color change)
- Clicking the link opens the ERD modal
- Modal opens with the relevant FK relationship highlighted
- Diagram centers on the relevant entities
Scope:
- Applies to all FK relationship explanations in Allowed Values column
Visual References
Keys with FK relationships (underlined):
PK only, no FK (not underlined):
If FK then underlined Key attribute has hover state:
On click diagram modal opens with relationship highlighted:
Alternatively "View in diagram" link in Allowed Values also opens the modal w/ the relevant highlight:
Full table view with key visualizations:
Acceptance Criteria
Key Icons & Visual Indicators
- Primary key fields display PK indicator with key icon
- Foreign key fields display FK indicator with key icon
- Fields that are both PK and FK display both indicators
- FK relationships are visually indicated (underline or similar)
- PK-only fields do NOT have the FK interactive indicator
- Visual distinction between clickable FK and non-clickable PK is clear
Clickable FK Attributes
- FK key indicators show hover state on mouseover
- FK key indicators have pointer cursor
- Clicking FK key indicator opens diagram modal
- Diagram opens with the specific relationship highlighted
- Diagram centers/focuses on the relevant entities
- PK-only keys are NOT clickable
- PK-only keys do NOT show hover state
Allowed Values FK Links
- FK explanations in Allowed Values show "view in diagram" link
- Link appears at end of the FK explanation text
- Link has appropriate hover state
- Clicking link opens diagram modal
- Diagram opens with the FK relationship highlighted
- Diagram centers on relevant entities