Visualization zooms to cursor (#1792)

* Visualization zooms to cusor

* Prevent 5.0 flakyness from async db creation (#1786)

* Add util fn for properly creating databases to avoid flakyness from slow database creations

* Run run multidb tests only on dbs with full SHOW DATABASE command

* Get rid of jfrog (#1788)

* Fix bug with incorrect version number & add git hash to overview (#1791)

* Fix bug with incorrect version number & add git hash to overview

* Inject instead of fetching

* Remove dynamic import (#1787)

* Remove dynamic import

* Help typescript along

* update tests

* Adds background for usage of wheelDelta

* Update viz.spec.ts

* Include data cleanup in test

* Zoom out behaviour with fit to zoom (#1790)

Disables zoom in and out buttons when reaching min/max zoom.

* remove it.only from test case

Co-authored-by: Oskar Damkjaer <[email protected]>
Co-authored-by: Oskar Damkjaer <[email protected]>

Author: noahmay

e2e_tests/integration/viz.spec.ts

@@ -28,11 +28,9 @@ describe('Viz rendering', () => {
   before(function () {
     cy.visit(Cypress.config('url')).title().should('include', 'Neo4j Browser')
     cy.wait(3000)
+    cy.ensureConnection()
   })
-  it('can connect', () => {
-    const password = Cypress.config('password')
-    cy.connect('neo4j', password)
-  })
+
   it('shows legend with rel types + node labels on first render', () => {
     cy.executeCommand(':clear')
     cy.executeCommand(
@@ -199,9 +197,8 @@ describe('Viz rendering', () => {
 
     // Enter fullscreen
     cy.get('article').find(`[title='Fullscreen']`).click()
-
-    cy.get(`#svg-vis`).trigger('mousewheel', { deltaY: 1000 })
-
+    cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })
+    
     cy.get(`[aria-label="zoom-out"]`).should('be.disabled')
 
     // Leave fullscreen
@@ -213,7 +210,7 @@ describe('Viz rendering', () => {
       parseSpecialCharSequences: false
     })
 
-    cy.get(`#svg-vis`).trigger('mousewheel', { deltaY: 1000 })
+    cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })
 
     cy.get(`[aria-label="zoom-out"]`).should('be.enabled')
   })
@@ -223,12 +220,21 @@ describe('Viz rendering', () => {
       'CREATE (a:TestLabel)-[:CONNECTS]->(b:TestLabel) RETURN a, b'
     )
 
-    cy.get(`#svg-vis`).trigger('mousewheel', { deltaY: 1000 })
+    cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })
 
     cy.get('[data-testid=wheelZoomInfoCheckbox]').should('exist')
 
     cy.get('[data-testid=wheelZoomInfoCheckbox]').click()
 
     cy.get('[data-testid=wheelZoomInfoCheckbox]').should('not.exist')
   })
+  it('can zoom out when holding down shift and scrolling', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, {
+      parseSpecialCharSequences: false
+    })
+
+    cy.get('#svg-vis').trigger('wheel', { deltaY: 3000, shiftKey: true })
+    cy.get(`[aria-label="zoom-out"]`).should('be.disabled')
+  })
 })

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

@@ -132,40 +132,30 @@ export class Visualization {
           .call(sel => (isZoomClick ? sel.ease(easeCubic) : sel))
           .attr('transform', String(e.transform))
       })
-
-    const zoomEventHandler = (
-      selection: Selection<SVGElement, unknown, BaseType, unknown>
-    ) => {
-      const handleZoomOnShiftScroll = (e: WheelEvent) => {
-        const modKeySelected = e.metaKey || e.ctrlKey || e.shiftKey
-        if (modKeySelected || !this.wheelZoomRequiresModKey) {
-          e.preventDefault()
-
-          // This is the default implementation of wheelDelta function in d3-zoom v3.0.0
-          // For some reasons typescript complains when trying to get it by calling zoomBehaviour.wheelDelta() instead
-          // but it should be the same (and indeed it works at runtime).
-          // https://github.com/d3/d3-zoom/blob/1bccd3fd56ea24e9658bd7e7c24e9b89410c8967/README.md#zoom_wheelDelta
-          const delta =
-            -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002)
-
-          return this.zoomBehavior.scaleBy(this.root, 1 + delta)
-        } else {
-          onDisplayZoomWheelInfoMessage()
+      // This is the default implementation of wheelDelta function in d3-zoom v3.0.0
+      // For some reasons typescript complains when trying to get it by calling zoomBehaviour.wheelDelta() instead
+      // but it should be the same (and indeed it works at runtime).
+      // https://github.com/d3/d3-zoom/blob/1bccd3fd56ea24e9658bd7e7c24e9b89410c8967/README.md#zoom_wheelDelta
+      // Keps the zoom behavior constant for metam ctrl and shift key. Otherwise scrolling is faster with ctrl key.
+      .wheelDelta(
+        e => -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002)
+      )
+      .filter(e => {
+        if (e.type === 'wheel') {
+          const modKeySelected = e.metaKey || e.ctrlKey || e.shiftKey
+          if (this.wheelZoomRequiresModKey && !modKeySelected) {
+            onDisplayZoomWheelInfoMessage()
+            return false
+          }
         }
-      }
-
-      return selection
-        .on('dblclick.zoom', null)
-        .on('DOMMouseScroll.zoom', handleZoomOnShiftScroll)
-        .on('wheel.zoom', handleZoomOnShiftScroll)
-        .on('mousewheel.zoom', handleZoomOnShiftScroll)
-    }
+        return true
+      })
 
     this.root
       .call(this.zoomBehavior)
-      .call(zoomEventHandler)
       // Single click is not panning
       .on('click.zoom', () => (this.draw = false))
+      .on('dblclick.zoom', null)
 
     this.forceSimulation = new ForceSimulation(this.render.bind(this))
   }