[ui] Table ERD

The diagram would plot multiple tables (Vertices) and the relationship (Edges) between their columns as a graph. It would show the foreign keys and the table & column that it references. Foreign key constraints could be shown as links.

Patch set #1: DONE

• Create base erd-component and all sub components for table & literal entities
• Define the structure of props passed into the component
• Create entity interfaces and individual entity classes
• Processor function: To visualize the ERD in a more human-readable form - Entities will be grouped based on it's level (Distance from root entity) in the relationship graph.
• Add web-component wrapper
• Use the component in table browser knockout template
• Add click interaction for table entity - On clicking a table user must be taken to the respective table's relations page

Patch set #2: DONE

• Limit number of columns to 10, remaining will be grouped to one dummy column
• Links to/from grouped columns if any, must be connected to the dummy column
• Add ellipsis for very long table and column names
• Primary key and foreign key columns must be shown at the top

Patch set #3: HUE-9412: DONE

• Add unit tests

Patch set #4 : HUE-9414 : DONE

• Publish the component to NPM

Patch set #5: DONE

• Replace Relationships tab with ERD. Display the relationship count.

Patch set #6: DONE

• User must be redirected only on clicking the table name and not the complete table component
• Current table box shouldn't be clickable
• Column names selectable

Patch set #7 & #8 : DONE

• Hide DB name for tables on the same DB as the main table

Patch set #9: Add event listeners for all entities: DONE

Todo:

• Add an arrow from the FK to the PK - HUE-9424