Make node label and properties editable in inspector panel

docs/modules/ROOT/content-nav.adoc

@@ -25,6 +25,7 @@
 ** xref:operations/rest-requests.adoc[]
 ** xref:operations/browser-rbac-count.adoc[]
 ** xref:operations/product-analytics.adoc[]
+** xref:operations/on-canvas-operations.adoc[]
 
 * xref:reference-commands.adoc[Command reference]
 

docs/modules/ROOT/pages/operations/index.adoc

@@ -17,4 +17,4 @@
 * xref:operations/rest-requests.adoc[] -- HTTP REST commands.
 * xref:operations/browser-rbac-count.adoc[] -- Manual refresh of counts due to RBAC.
 * xref:operations/product-analytics.adoc[] -- Configure consent for anonymous usage statistics.
-
+* xref:operations/on-canvas-operations.adoc[] -- On-Canvas Operations.

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

@@ -0,0 +1,31 @@
+:description: On-Canvas Operations
+
+
+[[on-canvas-operations]]
+= On-Canvas Operations
+
+== Double-Clicking the Canvas
+
+*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
+2. a label of "Undefined"
+3. the node caption of "New Node"
+
+== Editing the Node Label and Properties in Inspector Panel
+
+[NOTE]
+====
+Make sure APOC plugin is enabled in Neo4J database:
+
+image:enable-apoc.png[width=600]
+====
+
+*Clicking the property value* in node inspector panel will make that property editable and un-clicking the text box
+(by for example clicking somewhere else) will persist the new value into Neo4J database:
+
+image:modifying-node-properties-example.png[width=600]
+
+Similary, we can modify node label:
+
+image:modifying-node-label-example.png[width=600]

e2e_tests/integration/viz.spec.ts

@@ -18,6 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { should } from 'chai'
+
 /* global Cypress, cy, before */
 
 const GREY = 'rgb(165, 171, 182)' // Default color for nodes and relationships
@@ -259,4 +261,25 @@ describe('Viz rendering', () => {
 
     cy.executeCommand('MATCH (n) DETACH DELETE n')
   })
+
+  it('new node by double-clicking the canvas has "description" and "name" property fields', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, {
+      parseSpecialCharSequences: false
+    })
+
+    cy.get('[data-testid="graphCanvas"]')
+      .trigger('click', 200, 200, { force: true })
+      .trigger('dblclick', 200, 200, { force: true })
+
+    cy.get('[data-testid="nodeGroups"]', { timeout: 5000 })
+      .contains('New Node')
+      .trigger('mouseover', { force: true })
+      .trigger('mouseenter', { force: true })
+      .get('[data-testid="viz-details-pane-properties-table"]')
+      .find('td:nth-child(1)')
+      .should('have.text', '<id>descriptionname')
+
+    cy.executeCommand('MATCH (n) DETACH DELETE n')
+  })
 })