From 01d3a7b5c4d7f87d508b8f8b70ceaa15af5218da Mon Sep 17 00:00:00 2001
From: Jack <jack20220723@gmail.com>
Date: Wed, 22 Nov 2023 11:45:32 +0800
Subject: [PATCH] neo4j-arc should be node/rel-ID agnostic

---
 docs/modules/ROOT/pages/neo4j-arc/index.adoc  | 23 ++++++++++++++-----
 .../VisualizationView/VisualizationView.tsx   |  9 ++++----
 .../Graph/GraphEventHandlerModel.ts           | 23 +++++++------------
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/docs/modules/ROOT/pages/neo4j-arc/index.adoc b/docs/modules/ROOT/pages/neo4j-arc/index.adoc
index be5a5620ae6..d47a4c9aac1 100644
--- a/docs/modules/ROOT/pages/neo4j-arc/index.adoc
+++ b/docs/modules/ROOT/pages/neo4j-arc/index.adoc
@@ -99,16 +99,27 @@ export default function MyGraphComponent(): JSX.Element {
 
 = Neo4J Browser Internals
 
+neo4j-arc does not genreate node ID. It is 
+
 The Neo4J Browser is logically composed of 2 parts:
 
-1. A slightly coupled graphing module
-2. A user-interface that combines the graph rendering (supported by the graphing module), database, and user
+. The neo4j-arc, which is the current part we are discussing
+
+.. The neo4j-arc is based on D3 and implements its own layout, coloring, and link drawing. For example, the calculation
+   of arrow, i.e. links, between nodes uses some
+   https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts[very complicated math]
+   along with very prelimiary MDN standard basic shap specification.
+.. IMPORTANT
+   ====
+   Although we see `<id>` property for every node or relationship in the node inspection panel of Neo4J Browser, those
+   ID's are NOT generated by neo4j-arc, but https://stackoverflow.com/a/67702695[instead by Neo4J database]
+
+   Note: the displayed `<id>` is the value of NodeMode.id
+   ====
+
+. A user-interface that combines the graph rendering (supported by the graphing module), database, and user
    interaction together
 
-The graphing is based on D3 and implements its own layout, coloring, and link drawing. For example, the calculation of
-arrow, i.e. links, between nodes uses some
-https://github.com/QubitPi/neo4j-browser/blob/master/src/neo4j-arc/graph-visualization/utils/ArcArrow.ts[very complicated math]
-along with very prelimiary MDN standard basic shap specification.
 
 [WARNING]
 ====
diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
index bd22a3b71b3..ea84916bda8 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
@@ -400,25 +400,24 @@ LIMIT ${maxNewNeighbours}`
     if (event == NODE_ON_CANVAS_CREATE) {
       if (properties == null) {
         throw new Error(
-          'A property map with id, name, and labels keys are required'
+          'A property map with name, and labels keys are required'
         )
       }
 
-      const id = properties['id']
       const name = properties['name']
       const description = properties['description']
-      const variableName = `node${id}`
+      const variableName = `node`
       const labels = (properties['labels'] as string[])
         .map(label => `\`${label}\``)
         .join(':')
 
-      const query = `CREATE (${variableName}:${labels} { id: ${id}, name: "${name}", description: "${description}" });`
+      const query = `CREATE (${variableName}:${labels} { name: "${name}", description: "${description}" });`
 
       this.props.bus.self(
         CYPHER_REQUEST,
         {
           query,
-          params: { labels, id, name, description },
+          params: { labels, name, description },
           queryType: NEO4J_BROWSER_USER_ACTION_QUERY
         },
         (response: any) => {
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
index 3ba4a6f935b..d0de28458e3 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
@@ -244,14 +244,12 @@ export class GraphEventHandlerModel {
   }
 
   onCanvasDblClicked(): void {
-    const maxId: number = Math.max(
-      ...this.graph.nodes().map(node => parseInt(node.id))
-    )
-    const newId = maxId + 1
+    const transientId: string =
+      'transient' + Math.random().toString(36).slice(2)
 
     this.graph.addNodes([
       new NodeModel(
-        newId.toString(),
+        transientId,
         ['Undefined'],
         {
           name: 'New Node',
@@ -267,7 +265,6 @@ export class GraphEventHandlerModel {
     this.graphModelChanged()
 
     this.onGraphInteraction(NODE_ON_CANVAS_CREATE, {
-      id: newId,
       name: 'New Node',
       description: 'New Node',
       labels: ['Undefined']
@@ -300,18 +297,14 @@ export class GraphEventHandlerModel {
     ) {
       this.altCreatedRelTargetNode = node
 
-      const maxId: number = Math.max(
-        ...this.graph
-          .relationships()
-          .map(relationship => parseInt(relationship.id))
-      )
-      const newId = maxId + 1
+      const transientId: string =
+        'transient' + Math.random().toString(36).slice(2)
 
       const altCreatedRel: RelationshipModel = new RelationshipModel(
-        newId.toString(),
+        transientId,
         this.altCreatedRelSourceNode,
         this.altCreatedRelTargetNode,
-        newId.toString(),
+        transientId,
         { name: 'new link' },
         { name: 'string' }
       )
@@ -324,7 +317,7 @@ export class GraphEventHandlerModel {
       this.graphModelChanged()
 
       this.onGraphInteraction(REL_ON_CANVAS_CREATE, {
-        type: newId,
+        type: transientId,
         sourceNodeId: this.altCreatedRelSourceNode.id,
         targetNodeId: this.altCreatedRelTargetNode.id
       })