On-canvas relationship creation is done by sending message only

docs/modules/ROOT/pages/operations/on-canvas-operations.adoc

@@ -28,3 +28,8 @@ image:modifying-node-properties-example.png[width=600]
 Similary, we can modify node label:
 
 image:modifying-node-label-example.png[width=600]
+
+== Creating On-Canvas Relationships
+
+Alt-clicking one node, release the alk key, and alt-clicking another node will create a relationship between the two
+

e2e_tests/integration/viz.spec.ts

@@ -270,4 +270,34 @@ describe('Viz rendering', () => {
 
     cy.executeCommand('MATCH (n) DETACH DELETE n')
   })
+
+  it('can create a new relationship by alt-clicking two nodes in sequence', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand('MATCH (n) DETACH DELETE n')
+    cy.executeCommand(`CREATE (s:SourceNode {name: 'sourceNode'}) RETURN s`, {
+      parseSpecialCharSequences: false
+    })
+      .executeCommand(`CREATE (t:TargetNode {name: 'targetNode'}) RETURN t`, {
+        parseSpecialCharSequences: false
+      })
+      .executeCommand(`MATCH (n) RETURN n`, {
+        parseSpecialCharSequences: false
+      })
+
+    cy.wait(3000)
+
+    cy.get(`[aria-label^="graph-node"]`)
+      .each($el => {
+        cy.wrap($el).rightclick({
+          altKey: true,
+          metaKey: true,
+          shiftKey: true,
+          ctrlKey: true,
+          multiple: true,
+          force: true
+        })
+      })
+      .get('.relationships')
+      .should('exist')
+  })
 })

src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx

@@ -399,6 +399,10 @@ LIMIT ${maxNewNeighbours}`
           }
         }
       )
+
+      const cmd = 'MATCH (n) RETURN n;'
+      const action = executeCommand(cmd, { source: commandSources.rerunFrame })
+      this.props.bus.send(action.type, action)
     }
 
     if (event == NODE_ON_CANVAS_CREATE) {

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts

@@ -276,28 +276,8 @@ export class GraphEventHandlerModel {
     ) {
       this.altCreatedRelTargetNode = node
 
-      const transientId: string =
-        'transient-' + Math.random().toString(36).slice(2)
-
-      const altCreatedRel: RelationshipModel = new RelationshipModel(
-        transientId,
-        this.altCreatedRelSourceNode,
-        this.altCreatedRelTargetNode,
-        transientId,
-        { name: 'new link' },
-        { name: 'string' },
-        transientId
-      )
-
-      this.graph.addRelationships([altCreatedRel])
-      this.visualization.update({
-        updateNodes: true,
-        updateRelationships: true
-      })
-      this.graphModelChanged()
-
       this.onGraphInteraction(REL_ON_CANVAS_CREATE, {
-        type: transientId,
+        type: Math.random().toString(36).slice(2),
         sourceNodeId: this.altCreatedRelSourceNode.id,
         targetNodeId: this.altCreatedRelTargetNode.id
       })

src/neo4j-arc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo4j-devtools-arc",
-  "version": "0.0.69",
+  "version": "0.0.70",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",