From ebd521129df3e89acbfb09533fef9a09063c9e16 Mon Sep 17 00:00:00 2001
From: Jack <jack20220723@gmail.com>
Date: Mon, 27 Nov 2023 15:11:19 +0800
Subject: [PATCH] On-canvas relationship creation is done by sending message
 only (#41)

* On-canvas relationship creation is done by sending message only

* Documentation
---
 .../operations/on-canvas-operations.adoc      |  5 ++++
 e2e_tests/integration/viz.spec.ts             | 30 +++++++++++++++++++
 .../VisualizationView/VisualizationView.tsx   |  4 +++
 .../Graph/GraphEventHandlerModel.ts           | 22 +-------------
 src/neo4j-arc/package.json                    |  2 +-
 5 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/docs/modules/ROOT/pages/operations/on-canvas-operations.adoc b/docs/modules/ROOT/pages/operations/on-canvas-operations.adoc
index 6ebb91afc2d..dc4025b883d 100644
--- a/docs/modules/ROOT/pages/operations/on-canvas-operations.adoc
+++ b/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
+ 
\ No newline at end of file
diff --git a/e2e_tests/integration/viz.spec.ts b/e2e_tests/integration/viz.spec.ts
index 1e28453d6c4..035b2ed7ba5 100644
--- a/e2e_tests/integration/viz.spec.ts
+++ b/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')
+  })
 })
diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
index 8a09bbd4caf..1dab9aea83b 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
+++ b/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) {
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
index 93107f4f618..b26aef46262 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
+++ b/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
       })
diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json
index 81a44299ce2..6b533c7995c 100644
--- a/src/neo4j-arc/package.json
+++ b/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",