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

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

Author: noahmay

e2e_tests/integration/viz.spec.ts

@@ -181,13 +181,13 @@ describe('Viz rendering', () => {
 
     // Multiple zoom will result in zoom reaching scale limit and the button to be disabled
     const zoomInButton = cy.get(`[aria-label="zoom-in"]`)
-    zoomInButton.click()
-    zoomInButton.click()
-    zoomInButton.click()
-    zoomInButton.click()
+    zoomInButton.click({ force: true })
+    zoomInButton.click({ force: true })
+    zoomInButton.click({ force: true })
+    zoomInButton.click({ force: true })
+    zoomInButton.click({ force: true })
 
-    // zoom in button has low opacity styling when it is disabled
-    cy.get(`[aria-label="zoom-in"]`).should('have.css', 'opacity', '0.3')
+    cy.get(`[aria-label="zoom-in"]`).should('be.disabled')
   })
   it('can zoom out with just mouse wheel in fullscreen', () => {
     cy.executeCommand(':clear')
@@ -199,8 +199,7 @@ describe('Viz rendering', () => {
     cy.get('article').find(`[title='Fullscreen']`).click()
     cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })
 
-    // zoom out limit is reached zoom so button is disabled
-    cy.get(`[aria-label="zoom-out"]`).should('have.css', 'opacity', '0.3')
+    cy.get(`[aria-label="zoom-out"]`).should('be.disabled')
 
     // Leave fullscreen
     cy.get('article').find(`[title='Close fullscreen']`).click()
@@ -213,8 +212,7 @@ describe('Viz rendering', () => {
 
     cy.get(`#svg-vis`).trigger('wheel', { deltaY: 3000 })
 
-    // zoom out limit is reached zoom so button is disabled
-    cy.get(`[aria-label="zoom-out"]`).should('have.css', 'opacity', '1')
+    cy.get(`[aria-label="zoom-out"]`).should('be.enabled')
   })
   it('displays wheel zoom info message which can be closed', () => {
     cy.executeCommand(':clear')

package.json

@@ -43,7 +43,6 @@
     "start-prod": "cross-env NODE_ENV=production webpack-dev-server --colors --config ./build_scripts/webpack.config.js",
     "starts-prod": "cross-env NODE_ENV=production webpack-dev-server --https --colors --config ./build_scripts/webpack.config.js",
     "test": "tsc --noEmit && npm run lint-quiet && npm run jest",
-    "test-unit": "test",
     "test-e2e": "npx concurrently --kill-others -n 'neo4j,cypress,browser' 'docker run --env NEO4J_AUTH=neo4j/newpassword -p7474:7474 -p7687:7687 neo4j:4.2.2' 'yarn wait-on-neo4j && yarn wait-on-dev && yarn e2e-local --env server=4.2' 'yarn && yarn start'",
     "update-licenses": "sh ./scripts/generate_licenses.sh",
     "version-pom": "node ./scripts/set-pom-version.js -f ./pom.xml -v $npm_package_version",

src/browser/modules/Stream/CypherFrame/VisualizationView/__snapshots__/VisualizationView.test.tsx.snap

@@ -79,7 +79,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         >
           <button
             aria-label="zoom-in"
-            class="sc-fFeiMQ cZIuss zoom-in"
+            class="sc-fFeiMQ fKuHSd zoom-in"
           >
             <svg
               aria-hidden="true"
@@ -100,7 +100,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
           </button>
           <button
             aria-label="zoom-out"
-            class="sc-fFeiMQ cZIuss zoom-out"
+            class="sc-fFeiMQ fKuHSd zoom-out"
           >
             <svg
               aria-hidden="true"
@@ -121,7 +121,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
           </button>
           <button
             aria-label="zoom-to-fit"
-            class="sc-fFeiMQ cZIuss"
+            class="sc-fFeiMQ fKuHSd"
           >
             <svg
               fill="none"

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/Graph.tsx

@@ -241,14 +241,16 @@ export class Graph extends React.Component<GraphProps, GraphState> {
         <StyledZoomHolder offset={offset} isFullscreen={isFullscreen}>
           <StyledZoomButton
             aria-label={'zoom-in'}
-            className={zoomInLimitReached ? 'faded zoom-in' : 'zoom-in'}
+            className={'zoom-in'}
+            disabled={zoomInLimitReached}
             onClick={this.zoomInClicked}
           >
             <ZoomInIcon large={isFullscreen} />
           </StyledZoomButton>
           <StyledZoomButton
             aria-label={'zoom-out'}
-            className={zoomOutLimitReached ? 'faded zoom-out' : 'zoom-out'}
+            className={'zoom-out'}
+            disabled={zoomOutLimitReached}
             onClick={this.zoomOutClicked}
           >
             <ZoomOutIcon large={isFullscreen} />

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/styled.tsx

@@ -128,13 +128,13 @@ export const StyledZoomButton = styled.button`
     background: ${props => props.theme.frameButtonHoverBackground};
     border-radius: 2px;
   }
-  &:active {
+  &:enabled:active {
     background: ${props => props.theme.frameButtonActiveBackground};
   }
   &:focus {
     outline: none;
   }
-  &.faded {
+  &:disabled {
     opacity: 0.3;
     cursor: auto;
   }

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

@@ -246,6 +246,7 @@ export class Visualization {
       this.zoomBehavior.scaleBy(this.root, 0.7)
     } else if (zoomType === ZoomType.FIT) {
       this.zoomToFitViewport()
+      this.adjustZoomMinScaleExtentToFitGraph(1)
     }
   }
 
@@ -290,11 +291,12 @@ export class Visualization {
     return
   }
 
-  private adjustZoomMinScaleExtentToFitGraph = (): void => {
+  private adjustZoomMinScaleExtentToFitGraph = (
+    padding_factor = 0.75
+  ): void => {
     const scaleAndOffset = this.getZoomScaleFactorToFitWholeGraph()
-    const PADDING_FACTOR = 0.75
     const scaleToFitGraphWithPadding = scaleAndOffset
-      ? scaleAndOffset.scale * PADDING_FACTOR
+      ? scaleAndOffset.scale * padding_factor
       : this.zoomMinScaleExtent
     if (scaleToFitGraphWithPadding <= this.zoomMinScaleExtent) {
       this.zoomMinScaleExtent = scaleToFitGraphWithPadding