Display wheel zoom info message a limited number of times

src/browser/modules/App/PerformanceOverlay.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 
-import { shouldshowPerformanceOverlay } from 'shared/modules/settings/settingsDuck'
+import { shouldShowPerformanceOverlay } from 'shared/modules/settings/settingsDuck'
 
 function perfTracker() {
   let lastTime = performance.now()
@@ -139,7 +139,7 @@ const Overlay = styled.div`
 `
 
 const mapStateToProps = (state: any) => ({
-  shouldShow: shouldshowPerformanceOverlay(state)
+  shouldShow: shouldShowPerformanceOverlay(state)
 })
 
 export default connect(mapStateToProps)(PerformanceOverlay)

src/browser/modules/D3Visualization/components/Explorer.tsx

@@ -27,7 +27,7 @@ import { GetNodeNeighboursFn } from '../GraphEventHandler'
 import { GraphStyle } from '../graphStyle'
 import Graph from '../lib/visualization/components/Graph'
 import { GraphStats } from '../mapper'
-import { GraphComponent } from './Graph'
+import GraphComponent from './Graph'
 import { NodeInspectorPanel, defaultPanelWidth } from './NodeInspectorPanel'
 import { StyledFullSizeContainer, panelMinWidth } from './styled'
 import { VizItem } from './types'

src/browser/modules/D3Visualization/components/Graph.tsx

@@ -18,6 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react'
+import { connect } from 'react-redux'
+import { Action, Dispatch } from 'redux'
 
 import { GetNodeNeighboursFn, GraphEventHandler } from '../GraphEventHandler'
 import GraphStyle from '../graphStyle'
@@ -38,8 +40,14 @@ import {
   ZoomToFitIcon
 } from 'browser-components/icons/Icons'
 import { ZoomLimitsReached } from 'project-root/src/browser/modules/D3Visualization/lib/visualization/components/Visualization'
+import { GlobalState } from 'project-root/src/shared/globalState'
+import { getWheelZoomInfoShownCount } from 'project-root/src/shared/modules/settings/settingsDuck'
+import * as actions from 'project-root/src/shared/modules/settings/settingsDuck'
 import { BasicNode, BasicRelationship } from 'services/bolt/boltMappings'
 
+const DISPLAY_WHEEL_ZOOM_INFO_DURATION_MS = 2000
+const DISPLAY_WHEEL_ZOOM_INFO_MAX_TIMES = 10
+
 type GraphProps = {
   isFullscreen: boolean
   relationships: BasicRelationship[]
@@ -56,6 +64,8 @@ type GraphProps = {
   ) => void
   setGraph: (graph: Graph) => void
   offset: number
+  wheelZoomInfoShownCount: number
+  setWheelZoomInfoShownCount: (wheelZoomInfoShownCount: number) => void
 }
 
 type GraphState = {
@@ -64,7 +74,7 @@ type GraphState = {
   displayWheelZoomInfoMessage: boolean
 }
 
-export class GraphComponent extends React.Component<GraphProps, GraphState> {
+class GraphComponent extends React.Component<GraphProps, GraphState> {
   svgElement: React.RefObject<SVGSVGElement>
   graphView: GraphView | null = null
   displayWheelZoomInfoTimerId: number | undefined
@@ -174,9 +184,19 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
   }
 
   handleDisplayZoomWheelInfoMessage = (): void => {
-    if (!this.state.displayWheelZoomInfoMessage) {
+    if (
+      !this.state.displayWheelZoomInfoMessage &&
+      this.props.wheelZoomInfoShownCount <= DISPLAY_WHEEL_ZOOM_INFO_MAX_TIMES
+    ) {
+      this.props.setWheelZoomInfoShownCount(
+        this.props.wheelZoomInfoShownCount + 1
+      )
       this.displayZoomWheelInfoMessage(true)
-      setTimeout(this.displayZoomWheelInfoMessage, 2000, false)
+      setTimeout(
+        this.displayZoomWheelInfoMessage,
+        DISPLAY_WHEEL_ZOOM_INFO_DURATION_MS,
+        false
+      )
     }
   }
 
@@ -203,7 +223,7 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
   }
 
   render(): JSX.Element {
-    const { offset, isFullscreen } = this.props
+    const { offset, isFullscreen, wheelZoomInfoShownCount } = this.props
     const {
       zoomInLimitReached,
       zoomOutLimitReached,
@@ -234,10 +254,26 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
             <ZoomToFitIcon large={isFullscreen} />
           </StyledZoomButton>
         </StyledZoomHolder>
-        <WheelZoomInfoOverlay
-          hide={isFullscreen || !displayWheelZoomInfoMessage}
-        />
+        {wheelZoomInfoShownCount <= DISPLAY_WHEEL_ZOOM_INFO_MAX_TIMES && (
+          <WheelZoomInfoOverlay
+            hide={isFullscreen || !displayWheelZoomInfoMessage}
+          />
+        )}
       </StyledSvgWrapper>
     )
   }
 }
+
+const mapStateToProps = (state: GlobalState) => ({
+  wheelZoomInfoShownCount: getWheelZoomInfoShownCount(state)
+})
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
+  setWheelZoomInfoShownCount: (wheelZoomInfoShownCount: number) => {
+    dispatch(
+      actions.update({ wheelZoomInfoShownCount: wheelZoomInfoShownCount })
+    )
+  }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphComponent)

src/browser/modules/D3Visualization/components/styled.tsx

@@ -366,6 +366,7 @@ export const StyledZoomInfoOverlay = styled.div`
   bottom: 2rem;
   display: flex;
   flex-direction: row;
+  pointer-events: none;
 `
 
 export const StyledZoomInfo = styled.div<{ hide: boolean }>`

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

@@ -51,7 +51,8 @@ function mockVizProps(
 }
 const mockStore = configureMockStore()
 const store = mockStore({
-  frames: {}
+  frames: {},
+  settings: {}
 })
 
 function renderWithRedux(children: JSX.Element) {

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

@@ -5,10 +5,10 @@ exports[`Visualization renders empty content 1`] = `<div />`;
 exports[`Visualization renders with result and escapes any HTML 1`] = `
 <div>
   <div
-    class="sc-iuJeZd fTWjas"
+    class="sc-hMFtBS jdrSXz"
   >
     <div
-      class="sc-jTzLTM bdhVYv"
+      class="sc-gqjmRU gEkgXi"
       id="svg-vis"
     >
       <div
@@ -74,15 +74,15 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
           </g>
         </svg>
         <div
-          class="sc-fjdhpX cGFmGo"
+          class="sc-VigVT fEiqtv"
           offset="212.8"
         >
           <button
             aria-label="zoom-in"
-            class="sc-jzJRlG jxmeli zoom-in"
+            class="sc-jTzLTM fOxCEd zoom-in"
           >
             <i
-              class="sc-gFaPwZ cMtXIT"
+              class="sc-gJWqzi ydqSI"
             >
               <span
                 class="SVGInline SVGInline--cleaned"
@@ -96,10 +96,10 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
           </button>
           <button
             aria-label="zoom-out"
-            class="sc-jzJRlG jxmeli zoom-out"
+            class="sc-jTzLTM fOxCEd zoom-out"
           >
             <i
-              class="sc-fhYwyz lacVya"
+              class="sc-rBLzX gHzCML"
             >
               <span
                 class="SVGInline SVGInline--cleaned"
@@ -113,10 +113,10 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
           </button>
           <button
             aria-label="zoom-to-fit"
-            class="sc-jzJRlG jxmeli"
+            class="sc-jTzLTM fOxCEd"
           >
             <i
-              class="sc-jzgbtB fXppEY"
+              class="sc-bMvGRv iZbHS"
             >
               <span
                 class="SVGInline SVGInline--cleaned"
@@ -131,7 +131,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         </div>
       </div>
       <div
-        class="sc-kAzzGY jlhNIW"
+        class="sc-jzJRlG eGaAoL"
       >
         <i
           aria-hidden="true"
@@ -140,43 +140,43 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `
         />
       </div>
       <div
-        class="sc-cSHVUG eIeDRG"
+        class="sc-fjdhpX feMpry"
         width="204.8"
       >
         <div
-          class="sc-chPdSV iEZMKC react-resizable"
+          class="sc-cSHVUG jRcvIS react-resizable"
           data-testid="vizInspector"
         >
           <div
-            class="sc-kGXeez eoOSxY"
+            class="sc-chPdSV iqxIkq"
           >
             Overview
           </div>
           <div
-            class="sc-kpOJdX hbdNFu"
+            class="sc-kgoBCf bSxQqW"
           >
             <div>
               <div
-                class="sc-kkGfuU eOTllS"
+                class="sc-hMqMXs iGVKwm"
               >
                 <span
-                  class="sc-hMqMXs hFEDhg"
+                  class="sc-jKJlTe bUxYVH"
                 >
                   Node labels
                 </span>
               </div>
               <ul
-                class="sc-htpNat sc-dnqmqq OaEcl"
+                class="sc-bwzfXH sc-gzVnrw cQdYz"
               >
                 <div
-                  class="sc-eHgmQL sc-cvbbAY gubsiZ"
+                  class="sc-brqgnP sc-cMljjf kTwxke"
                   data-testid="property-details-overview-node-label-*"
                   style="background-color: rgb(165, 171, 182); color: rgb(255, 255, 255);"
                 >
                   * (1)
                 </div>
                 <div
-                  class="sc-eHgmQL sc-cvbbAY gubsiZ"
+                  class="sc-brqgnP sc-cMljjf kTwxke"
                   data-testid="property-details-overview-node-label-Person"
                   style="background-color: rgb(201, 144, 192); color: rgb(255, 255, 255);"
                 >

src/shared/modules/settings/__snapshots__/settingsDuck.test.ts.snap

@@ -25,5 +25,6 @@ Object {
   "theme": "auto",
   "useBoltRouting": false,
   "useCypherThread": true,
+  "wheelZoomInfoShownCount": 0,
 }
 `;

src/shared/modules/settings/settingsDuck.ts

@@ -68,7 +68,7 @@ export const shouldAutoComplete = (state: any) =>
 export const shouldEditorLint = (state: any) => state[NAME].editorLint === true
 export const shouldEnableMultiStatementMode = (state: any) =>
   state[NAME].enableMultiStatementMode
-export const shouldshowPerformanceOverlay = (state: any): boolean =>
+export const shouldShowPerformanceOverlay = (state: any): boolean =>
   state[NAME].showPerformanceOverlay === true
 
 const browserSyncConfig = (host = 'https://auth.neo4j.com') => ({
@@ -91,6 +91,8 @@ export const getAllowCrashReports = (state: GlobalState): boolean =>
   state[NAME].allowCrashReports ?? initialState.allowCrashReports
 export const getAllowUserStats = (state: GlobalState): boolean =>
   state[NAME].allowUserStats ?? initialState.allowUserStats
+export const getWheelZoomInfoShownCount = (state: GlobalState) =>
+  state[NAME].wheelZoomInfoShownCount
 
 // Ideally the string | number types would be only numbers
 // but they're saved as strings in the settings component
@@ -121,6 +123,7 @@ export type SettingsState = {
   showPerformanceOverlay: boolean
   allowCrashReports: boolean
   allowUserStats: boolean
+  wheelZoomInfoShownCount: number
 }
 
 export const initialState: SettingsState = {
@@ -145,7 +148,8 @@ export const initialState: SettingsState = {
   connectionTimeout: 30 * 1000, // 30 seconds
   showPerformanceOverlay: false,
   allowCrashReports: true,
-  allowUserStats: true
+  allowUserStats: true,
+  wheelZoomInfoShownCount: 0
 }
 
 export default function settings(state = initialState, action: any) {