2. ERD Rendering

[MitchellShiell]

Summary

Render dictionary schemas from dictionary controller as an entity relationship diagram within the modal using React Flow.

Requirements

Dictionary loading

• ERD component is getting the Lectern schema through the same dictionary controller used for the table view
  • ERD component can handle lectern schema via all three dictionary controllers
    • 0A. Lectern Server Dictionary Controller #266
    • 0B. Static JSON Dictionary Controller #267
    • 0C. Custom hosting dictionary controller #268

Note

Error states not required as this is a component used within the table view, all error states would via dictionary loading will be handled by the already existing dictionary controller and table view error states.

Schema Nodes

Each schema in the dictionary should render as a node displaying:

• Schema name in a header section
• List of fields with:
  • Key icon for fields in uniqueKey
  • Key icon indicator for fields referenced in foreignKey mappings
  • Field name
  • Data type badge
• Stretch goal: Scrollable field list if schema has many fields (estimating +7 fields but use discresion)
  Note: Discovered edge case where a field under the initial arbitrary amount of fields rendered may have an edge which would not be properly shown. Removed requirement from ticket for now for further discussion and planning.

Relationship Edges

• Render directed edges for each foreign key relationship
• Cardinality symbolized for one-one & one to many relations

Layout

• Auto-layout algorithm positions all schemas without overlap
• Layout should handle dictionaries ranging from 4 to 20 schemas
• Related schemas should be reasonably positioned relative to each other

Important

Auto-layouts & default layouts will likely be a challenge for ERD implementation, for this ticket I would suggest not letting better get in the way of good enough, assess difficulty in implementation and discuss having auto-layouts as its own dedicated ticket.

Diagram Controls

• Pan and zoom functionality
• Zoom controls visible in the diagram
• Fit-to-view on initial load

Visual Reference

Acceptance Criteria

• All dictionary schemas render as nodes
• Nodes display schema name in header
• Nodes display all key fields with key indicators
• Nodes display field data types
• Foreign key relationships render as edges w/ cardinality
• Auto-layout positions nodes clearly without overlap
• Diagram is pannable and zoomable
• Zoom controls are accessible
• Diagram fits to view on initial load

Dependencies

• 1. Diagram View Modal #394