add tests & documentation

.github/workflows/release-doc.yml

@@ -4,6 +4,7 @@
 name: Release
 
 "on":
+  pull_request:
   push:
     branches:
       - master

docs/modules/ROOT/pages/internals/graph-interactions.adoc

@@ -0,0 +1,28 @@
+:description: How graph interations take effect on displayed graph and backing database
+
+
+[[user-interactions]]
+= How Graph Interations Take Effect on Displayed Graph and Backing Database
+
+We define *graph interactions* as any https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent[mouse] and
+https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent[keyboard] events on the
+link:visual-tour.html#frame-views[_Graph_ frame view]
+
+There are basically 3 components involved in handling users' interactions:
+
+1. *GraphEventHandlerModel* contains implementations on how to operate on the displayed graph for various interactions
+2. *Visualization* triggers the implementations via D3 callbacks
+3. *VisualizationView* is involved if a certain type of user interaction involves database changes
+
+== How to Implement a User Interaction
+
+1. Implement an event handler function in GraphEventHandlerModel
+2. Bind the handler function in `GraphEventHandlerModel.bindEventHandlers()`
+3. Trigger the handler function in `Visualization`
+4. If the interaction involves database changes, add the corresponding logic to `GraphInteractionCallBack`, and
+5. trigger the `GraphInteractionCallBack` in the handler function
+
+For example, let's say we'd like to support easy on-graph editing by allowing us to create a new node when we double
+click on canvas. We will 
+
+The complete implementation is in https://github.com/QubitPi/neo4j-browser/pull/7[this PR] as a reference

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

@@ -25,6 +25,8 @@ TypeDoc
 
 image:neo4j-browser.png[width=900]
 
+* The orange triangle labled with "On Canvas Interaction" is discussed in detail in
+  link:internals/graph-interactions[graph interactions] section
 * Sentry.io is initialized in the top index.tsx
 * AppInit.tsx is responsible for several initializations:
 +

e2e_tests/integration/viz.spec.ts

@@ -241,4 +241,22 @@ describe('Viz rendering', () => {
     cy.get('#svg-vis').trigger('wheel', { deltaY: 3000, shiftKey: true })
     cy.get(`[aria-label="zoom-out"]`).should('be.disabled')
   })
+
+  it('can create a new node by double clicking the canvas', () => {
+    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="vizInspector"]', { timeout: 5000 }).contains(
+      'Undefined'
+    )
+
+    cy.executeCommand('MATCH (a:TestLabel) DETACH DELETE a')
+    cy.executeCommand('MATCH (n:Undefined) DETACH DELETE n')
+  })
 })

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

@@ -249,6 +249,7 @@ export class GraphEventHandlerModel {
       updateRelationships: true,
       restartSimulation: true
     })
+    this.graphModelChanged()
 
     // this will persist node to Neo4J DB...
     this.onGraphInteraction(NODE_ON_CANVAS_CREATE, {

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

@@ -101,6 +101,7 @@ export class Visualization {
       .attr('width', '100%')
       .attr('height', '100%')
       .attr('transform', 'scale(1)')
+      .attr('data-testid', 'graphCanvas')
       // Background click event
       // Check if panning is ongoing
       .on('click', () => {