Missing relation line in Show Key Only/All Fileds visualization

[ac2780]

schema.json

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.

Version Type

CLI Version (npm package)

Version (only for Self Hosted)

v0.4.3 + 4a6deae (2025-02-26)

Steps to reproduce

Use attached schema

Expected Behavior

The relation are correctly visualized

Actual Behavior

When in show Key Only and Show All Fields visualization, the rectangle are correctly light up but the connection line is missing.

Additional Context

No problem in table name visualization

[devin-ai-integration]

I'm currently investigating this issue with the missing relation lines in the Show Key Only/All Fields visualization. Will provide a detailed analysis shortly.

[devin-ai-integration]

Investigation Results: Missing Relation Lines in Show Key Only/All Fields Visualization

After analyzing the provided schema.json file and the codebase, I've identified the likely cause of the missing relation lines in the "Show Key Only" and "All Fields" visualization modes.

Findings

1. The schema.json file contains properly defined relationships in the relationships section:

   "relationships": {
     "relationshipNo3": {
       "name": "relationshipNo3",
       "primaryTableName": "img_image",
       "primaryColumnName": "IMG_IMAGE_ID",
       "foreignTableName": "img_image_save",
       "foreignColumnName": "IMG_IMAGE_ID",
       "cardinality": "ONE_TO_MANY",
       "updateConstraint": "NO_ACTION",
       "deleteConstraint": "NO_ACTION"
     },
     // Other relationships...
   }

2. The issue appears to be in how the edges are rendered in different show modes. In the convertDBStructureToNodes.ts file, edges are created with specific sourceHandle and targetHandle properties that depend on the showMode:

   sourceHandle:
     showMode === 'TABLE_NAME'
       ? null
       : columnHandleId(rel.primaryTableName, rel.primaryColumnName),
   targetHandle:
     showMode === 'TABLE_NAME'
       ? null
       : columnHandleId(rel.foreignTableName, rel.foreignColumnName),

3. While the edges are being created correctly for all show modes, the rendering of the edges in the "Show Key Only" and "All Fields" modes is not working properly. The rectangles (tables) are correctly highlighted, but the connection lines are missing.

4. The RelationshipEdge.tsx component is responsible for rendering the edges, but it may not be handling the different show modes correctly, particularly when sourceHandle and targetHandle are specified.

Potential Causes

1. Handle Positioning Issue: The most likely cause is that the handle positions for columns in "Show Key Only" and "All Fields" modes are not being calculated correctly, causing the edges to be rendered incorrectly or not at all.

2. Edge Path Calculation: The getBezierPath function in RelationshipEdge.tsx might not be correctly calculating the path when specific column handles are used.

3. Schema-specific Issue: The specific structure of the provided schema might be triggering an edge case in the visualization logic that wasn't previously encountered.

Verification

The issue is reproducible with the provided schema.json file, and as shown in the screenshots:

• The relation rectangles are correctly highlighted
• The connection lines are missing in "Show Key Only" and "All Fields" modes
• The "Table Name" visualization mode works correctly

This suggests that the issue is specific to how column-level relationships are rendered in these visualization modes.

[MH4GF]

@ac2780 Thanks for reporting! Looks like a UI issue to me. Devin couldn't solve the problem 😅

📝 The relationship that has a problem is this:

    "relationshipNo5": {
      "name": "relationshipNo5",
      "primaryTableName": "img_image_save",
      "primaryColumnName": "IMG_OVERLAY_ID",
      "foreignTableName": "img_overlay",
      "foreignColumnName": "IMG_OVERLAY_ID",
      "cardinality": "ONE_TO_ONE",
      "updateConstraint": "NO_ACTION",
      "deleteConstraint": "NO_ACTION"
    },