fix(designer): re-point preview edges when a relationship changes From/To

[Minsup Lee (m1nsuppp)]

The bug

Changing a relationship's From or To in the designer does not move its
edge in the graph preview. The edge stays attached to the entities it was first
drawn between, while the relationship form, the RDF tab and the exported .rdf
all show the new endpoints.

Reproduce

1. Open /#/designer
2. Add three entities (say Book, Author, Member)
3. Add a relationship (it defaults to the first two entities in the list)
4. Change From to a different entity
5. The graph still draws the edge from the original entity; only the label updates

Following the
Building Your First Ontology
tutorial surfaces this at step 3: the form reads Book → Author while the graph
draws Member → Author.

Cause

GraphPreview syncs incrementally instead of rebuilding the graph: elements are
added or removed by id, and the rest are patched in place.

Re-pointing a relationship keeps its id, so its edge is in both currentEdgeIds
and desiredEdgeIds; it is neither removed nor re-added. The update loop then
only patched the label:

for (const rel of ontology.relationships) {
  const edge = cy.getElementById(rel.id);
  if (edge.length) {
    edge.data('label', rel.name);
  }
}

Patching source/target via data() would not have helped either: Cytoscape
treats them as immutable, so the edge has to be rebuilt.

The fix

Rebuild an edge whenever its endpoints no longer match its relationship. Node
positions are untouched, so the graph does not jump.

Tests

syncGraphElements is extracted from the effect so it can be covered by tests:
rendering the component needs a canvas that jsdom does not provide, but the
extracted function runs against a headless Cytoscape instance. Six cases cover
re-pointing the source, re-pointing the target, renaming only, position
stability, and deletion.

Reverting just the fix fails exactly the two re-pointing tests.

Most of the diff is the indentation change from that extraction. Reviewing with
"Hide whitespace" leaves about 20 changed lines.

Checks

• npm test → 400 passed (25 files)
• npx tsc -b → clean
• npx eslint on the changed files → clean

Files (2)

• src/components/designer/DesignerPreview.test.ts [ADDED] (+118 -0)
• src/components/designer/DesignerPreview.tsx [MODIFIED] (+67 -55)

[Minsup Lee (m1nsuppp)]

@microsoft-github-policy-service agree