Update documentation

docs/modules/ROOT/pages/neo4j-arc/graph-interactions.adoc

@@ -44,7 +44,7 @@ click on canvas. We will follow the steps above by first defining the event hand
     this.visualization.update({ updateNodes: true, updateRelationships: true })
     this.graphModelChanged()
 
-    this.onGraphInteraction(NODE_ON_CANVAS_CREATE, { id: newNodeId, name: 'New Node', labels: ['Undefined'] })
+    this.onGraphInteraction(NODE_ON_CANVAS_CREATE, { name: 'New Node', labels: ['Undefined'] })
   }
 ----
 
@@ -99,22 +99,21 @@ As we've mentioned earlier, we would like to persist this new node to database.
     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 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}" });`
+      const query = `CREATE (${variableName}:${labels} { name: "${name}" });`
 
       this.props.bus.self(
         CYPHER_REQUEST,
         {
           query,
-          params: { labels, id, name },
+          params: { labels, name },
           queryType: NEO4J_BROWSER_USER_ACTION_QUERY
         },
         (response: any) => {

docs/modules/ROOT/pages/neo4j-arc/index.adoc

@@ -99,8 +99,6 @@ 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:
 
 . The neo4j-arc, which is the current part we are discussing
@@ -117,6 +115,15 @@ The Neo4J Browser is logically composed of 2 parts:
    Note: the displayed `<id>` is the value of NodeMode.id
    ====
 
+   CAUTION
+   ====
+
+   neo4j-arc does not generate or manage node/rel ID. Any xref:operations/on-canvas-operations.adoc[on-canvas operation]
+   generates nodes/rel with *transient ID* only. Any node/rel ID that is to be persisted needs to be generated and
+   managed by external logics, such as database auto-ID or library user
+
+   ====
+
 . A user-interface that combines the graph rendering (supported by the graphing module), database, and user
    interaction together
 

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

@@ -8,7 +8,27 @@
 
 *Double clicking the white area* on canvas will automatically generate a new node with
 
-1. an auto-incremented ID, i.e. (the max ID of nodes on canvas) + 1
+1. a transient ID prefixed with "transient-" followed by a random string. For example "transient-rxnnzr6t4x"
+
+   [NOTE]
+   ====
+
+   The reason that the ID being transient is due to the fact that this ID won't be persisted into database. Refreshing
+   the browser will replace this transient ID with a database-generated ID (in the form of a number, such as 65).
+
+   Normally, neo4j-browser feeds into neo4j-arc, which is the graphing module of neo4j-browser, with a set of
+   fully-hydrated set of nodes and relationships. This results in the design in neo4j-arc which is: to render a node or
+   relationship, the ID of it must be provided (i.e. a required argument to node/rel constructor).
+
+   Generating a new node by double-clicking, however, is an operation manged by neo4j-arc, which by design is not
+   responsible for generating and managing node/relationship ID's. But to implement the "realtime editing" effect, the
+   new node/rel ID has to be genreated at the beginning. 
+
+   To resolve the conflict between original neo4j-browser design and on-canvas operation, any node/rel generated
+   "on-canvas" will have this transient ID.
+
+   ====
+
 2. a label of "Undefined"
 3. the node caption of "New Node"
 

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

@@ -245,7 +245,7 @@ export class GraphEventHandlerModel {
 
   onCanvasDblClicked(): void {
     const transientId: string =
-      'transient' + Math.random().toString(36).slice(2)
+      'transient-' + Math.random().toString(36).slice(2)
 
     this.graph.addNodes([
       new NodeModel(
@@ -298,7 +298,7 @@ export class GraphEventHandlerModel {
       this.altCreatedRelTargetNode = node
 
       const transientId: string =
-        'transient' + Math.random().toString(36).slice(2)
+        'transient-' + Math.random().toString(36).slice(2)
 
       const altCreatedRel: RelationshipModel = new RelationshipModel(
         transientId,