Skip to content

#399: ERD Auto-Layouts#414

Merged
ethanluc7 merged 10 commits intomainfrom
399-ERD-auto-layouts
Mar 5, 2026
Merged

#399: ERD Auto-Layouts#414
ethanluc7 merged 10 commits intomainfrom
399-ERD-auto-layouts

Conversation

@ethanluc7
Copy link
Contributor

@ethanluc7 ethanluc7 commented Feb 26, 2026

Related to issue: #399

Summary

Adds graph layout algorithm to now handle the positioning of the nodes and edges. Imports new library d3-dag to handle the graph algorithm, and updates corresponding components to render the newly positioned nodes and edges.

Description of Changes

  • Removed SchemaNodeLayout type and getNodesForDictionary() — the old manual grid layout
  • Added getLayoutedElements(nodes, edges) — uses d3-dag's sugiyama algorithm to compute node positions
  • Added getLayoutedDiagram(dictionary, edges) — top-level convenience function that builds unpositioned nodes from the dictionary
  • Replaced the getNodesForDictionary call with getLayoutedDiagram(dictionary, allEdges), destructuring into layoutedNodes / layoutedEdges.
  • Updated fitViewOptions: padding changed from 20 → 0.2, maxZoom from 1.5 → 1, removed minZoom from fitViewOptions.
  • Updated minZoom on the ReactFlow component from 0.1 → 0.05.
  • NEW DEPENDENCY: d3-dag - Imported to handle the challenge of generating a graph layout for large schemas.

Special Instructions

Before running these changes, you will need to ...
pnpm i

Readiness Checklist

  • Self Review
    • I have performed a self review of code
    • I have run the application locally and manually tested the feature
    • I have checked all updates to correct typos and misspellings
  • Formatting
    • Code follows the project style guide
    • Autmated code formatters (ie. Prettier) have been run
  • Local Testing
    • Successfully built all packages locally
    • Successfully ran all test suites, all unit and integration tests pass
  • Updated Tests
    • Unit and integration tests have been added that describe the bug that was fixed or the features that were added
  • Documentation
    • All new environment variables added to .env.schema file and documented in the README
    • All changes to server HTTP endpoints have open-api documentation
    • All new functions exported from their module have TSDoc comment documentation

@ethanluc7 ethanluc7 requested review from JamesTLopez and joneubank and removed request for joneubank February 26, 2026 14:29
if (!parentMap.has(edge.target)) {
parentMap.set(edge.target, new Set());
}
parentMap.get(edge.target)!.add(edge.source);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't use the non-null assertion operator here, either we do a check before we add the new edge source or use optional chaining guard here

Comment on lines +47 to +48
background-color: ${isHighlighted ? theme.colors.secondary_1 : theme.colors.accent_1};
border-block: 1.5px solid ${isHighlighted ? theme.colors.secondary_dark : theme.colors.accent_2};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

const schemaByName = new Map<string, Schema>();

for (const node of nodes) {
schemaByName.set(node.id, node.data as Schema);
Copy link

@JamesTLopez JamesTLopez Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't typecast here when we can avoid it. The type Node[] defined in the parameters from react-flow actual takes in a generic, we should be able to directly add type Schema.

nodes: Node<Schema>[]

Same thing with edges, but doesn't look like theres going to be type issues here

@ethanluc7 ethanluc7 requested review from JamesTLopez and removed request for joneubank March 3, 2026 20:03
Copy link

@JamesTLopez JamesTLopez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@ethanluc7 ethanluc7 merged commit 3efb078 into main Mar 5, 2026
2 checks passed
@ethanluc7 ethanluc7 deleted the 399-ERD-auto-layouts branch March 5, 2026 16:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants