diff --git a/.github/workflows/release-doc.yml b/.github/workflows/release-doc.yml index ea7fb697f21..22f3605c984 100644 --- a/.github/workflows/release-doc.yml +++ b/.github/workflows/release-doc.yml @@ -4,6 +4,7 @@ name: Release "on": + pull_request: push: branches: - master diff --git a/docs/modules/ROOT/images/neo4j-browser.drawio b/docs/modules/ROOT/images/neo4j-browser.drawio new file mode 100644 index 00000000000..012567d14b3 --- /dev/null +++ b/docs/modules/ROOT/images/neo4j-browser.drawio @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/modules/ROOT/images/neo4j-browser.png b/docs/modules/ROOT/images/neo4j-browser.png index f8d4927af76..535f3d6726c 100644 Binary files a/docs/modules/ROOT/images/neo4j-browser.png and b/docs/modules/ROOT/images/neo4j-browser.png differ diff --git a/docs/modules/ROOT/pages/internals/graph-interactions.adoc b/docs/modules/ROOT/pages/internals/graph-interactions.adoc new file mode 100644 index 00000000000..df5db984d6b --- /dev/null +++ b/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 diff --git a/docs/modules/ROOT/pages/internals/index.adoc b/docs/modules/ROOT/pages/internals/index.adoc index b652c4f8a4b..f81fdccf10c 100644 --- a/docs/modules/ROOT/pages/internals/index.adoc +++ b/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: + diff --git a/docs/modules/ROOT/pages/internals/user-interactions.adoc b/docs/modules/ROOT/pages/internals/user-interactions.adoc deleted file mode 100644 index 0aa348257e3..00000000000 --- a/docs/modules/ROOT/pages/internals/user-interactions.adoc +++ /dev/null @@ -1,27 +0,0 @@ -:description: How user interations take effect on displayed graph and backing database - - -[[user-interactions]] -= How User Interations Take Effect on Displayed Graph and Backing Database - -We define user interactions as ... - -There are basically 3 components involved in handling users' interactions: - -1. *GraphEventHandlerModel* contains implementations on how to mutate the displayed graph for various interactions -2. *Visualization* triggers the implementations via D3 callbacks -3. *VisualizationView* is involved if user interactions involve 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 want to support a easy on-graph editing by allowing us to create a new node when we double -click on canvas. - - -For more infor, please see this PR: \ No newline at end of file diff --git a/e2e_tests/integration/viz.spec.ts b/e2e_tests/integration/viz.spec.ts index 66fe6aca2c4..f16340165b8 100644 --- a/e2e_tests/integration/viz.spec.ts +++ b/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') + }) }) diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts index 76f493a8538..0e0a576c3a7 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts +++ b/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, { diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts index 22cb391f21b..7b8d343d153 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/visualization/Visualization.ts +++ b/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', () => {