Zoom mod key info message

src/browser/components/icons/Icons.tsx

@@ -36,7 +36,6 @@ import copy from 'icons/copy.svg'
 import databaseCheck from 'icons/database-check.svg'
 import saveFavorite from 'icons/favorite.svg'
 import file from 'icons/file.svg'
-import fitToScreenIcon from 'icons/fit-to-screen.svg'
 import folderEmpty from 'icons/folder-empty.svg'
 import close from 'icons/frame-close.svg'
 import upCaret from 'icons/frame-collapse.svg'
@@ -46,6 +45,10 @@ import pin from 'icons/frame-pin.svg'
 import shrink from 'icons/frame-shrink.svg'
 import help from 'icons/help.svg'
 import vizIcon from 'icons/hierarchy-9.svg'
+import fitToScreenIcon from 'icons/iconsToBeFetchedFromNDL/fit-to-screen.svg'
+import infoCircle from 'icons/iconsToBeFetchedFromNDL/information-circle.svg'
+import zoomInIcon from 'icons/iconsToBeFetchedFromNDL/zoom-in.svg'
+import zoomOutIcon from 'icons/iconsToBeFetchedFromNDL/zoom-out.svg'
 import monitorPlay from 'icons/monitor-play.svg'
 import navigationMenuVertical from 'icons/navigation-menu-vertical.svg'
 import neo4j from 'icons/neo4j-icon.svg'
@@ -54,8 +57,6 @@ import download from 'icons/save.svg'
 import skipPrev from 'icons/skip-prev.svg'
 import table from 'icons/table.svg'
 import text from 'icons/text.svg'
-import zoomInIcon from 'icons/zoom-in.svg'
-import zoomOutIcon from 'icons/zoom-out.svg'
 
 const inactive = `
   color: #797979;
@@ -287,7 +288,11 @@ export const ZoomInIcon = ({ large }: { large: boolean }): JSX.Element => {
     />
   )
 }
-export const ZoomOutIcon = ({ large }: { large: boolean }): JSX.Element => {
+export const ZoomOutIcon = ({
+  large = false
+}: {
+  large?: boolean
+}): JSX.Element => {
   const scale = large ? ZOOM_ICONS_LARGE_SCALE_FACTOR : 1
   return (
     <IconContainer
@@ -457,3 +462,5 @@ export const CopyIcon = ({
 }: TitleAndWidthProps): JSX.Element => (
   <IconContainer title={title} width={width} icon={copy} />
 )
+
+export const InfoIcon = (): JSX.Element => <IconContainer icon={infoCircle} />

src/browser/documentation/help/keys.tsx

@@ -97,7 +97,7 @@ const content = (
         <tr>
           <td>Search</td>
           <td>Ctrl + F</td>
-          <td>Command + F</td>
+          <td>Cmd + F</td>
         </tr>
         <tr>
           <td>Increase Indent</td>
@@ -112,32 +112,32 @@ const content = (
         <tr>
           <td>Comment Out</td>
           <td>Ctrl + /</td>
-          <td>Command + /</td>
+          <td>Cmd + /</td>
         </tr>
         <tr>
           <td>Comment In</td>
           <td>Ctrl + /</td>
-          <td>Command + /</td>
+          <td>Cmd + /</td>
         </tr>
         <tr>
           <td>Undo</td>
           <td>Ctrl + Z</td>
-          <td>Command + Z</td>
+          <td>Cmd + Z</td>
         </tr>
         <tr>
           <td>Redo</td>
           <td>Ctrl + Y</td>
-          <td>Shift + Command + Z or Command + Y</td>
+          <td>Shift + Cmd + Z or Cmd + Y</td>
         </tr>
         <tr>
           <td>Decrease Indent</td>
           <td>Ctrl + [</td>
-          <td>Command + [</td>
+          <td>Cmd + [</td>
         </tr>
         <tr>
           <td>Increase Indent</td>
           <td>Ctrl + ]</td>
-          <td>Command + ]</td>
+          <td>Cmd + ]</td>
         </tr>
         <tr>
           <td>Move the line down</td>
@@ -152,12 +152,12 @@ const content = (
         <tr>
           <td>Replace</td>
           <td>Ctrl + F</td>
-          <td>Command + Alt + F</td>
+          <td>Cmd + Alt + F</td>
         </tr>
         <tr>
           <td>Select all</td>
           <td>Ctrl + A</td>
-          <td>Command + A</td>
+          <td>Cmd + A</td>
         </tr>
         <tr>
           <td>Select downward</td>
@@ -182,12 +182,12 @@ const content = (
         <tr>
           <td>Select to the end</td>
           <td>Alt + Shift + Right</td>
-          <td>Command + Shift + Right</td>
+          <td>Cmd + Shift + Right</td>
         </tr>
         <tr>
           <td>Select to the start</td>
           <td>Alt + Shift + Left</td>
-          <td>Command + Shift + Left</td>
+          <td>Cmd + Shift + Left</td>
         </tr>
         <tr>
           <td>Align text right</td>
@@ -202,22 +202,22 @@ const content = (
         <tr>
           <td>Add multi-cursor above</td>
           <td>Ctrl + Alt + Up</td>
-          <td>Command + Alt + Up</td>
+          <td>Cmd + Alt + Up</td>
         </tr>
         <tr>
           <td>Add multi-cursor below</td>
           <td>Ctrl + Alt + Down</td>
-          <td>Command + Alt + Down</td>
+          <td>Cmd + Alt + Down</td>
         </tr>
         <tr>
           <td>Add multi-cursor above</td>
           <td>Ctrl + Alt + Shift + Up</td>
-          <td>Command + Alt + Shift + Up</td>
+          <td>Cmd + Alt + Shift + Up</td>
         </tr>
         <tr>
           <td>Move multi-cursor from current line to the line below</td>
           <td>Ctrl + Alt + Shift + Down</td>
-          <td>Command + Alt + Shift + Down</td>
+          <td>Cmd + Alt + Shift + Down</td>
         </tr>
       </tbody>
     </table>

src/browser/documentation/play-guides/intro.tsx

@@ -20,7 +20,7 @@
 import React from 'react'
 
 import Slide from '../../modules/Carousel/Slide'
-import { isMac } from 'browser/modules/App/keyboardShortcuts'
+import { isMac } from 'shared/utils/platformUtils'
 
 const title = 'Intro'
 const slides = [

src/browser/documentation/sidebar-guides/intro.tsx

@@ -20,7 +20,7 @@
 import React from 'react'
 
 import { BuiltInGuideSidebarSlide } from '../../modules/Carousel/Slide'
-import { isMac } from 'browser/modules/App/keyboardShortcuts'
+import { isMac } from 'shared/utils/platformUtils'
 
 const title = 'Intro Guide'
 const identifier = 'intro'

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/App/keyboardShortcuts.ts

@@ -2,8 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react'
 import { Bus } from 'suber'
 
 import { FOCUS } from 'shared/modules/editor/editorDuck'
+import { isMac } from 'shared/utils/platformUtils'
 
-export const isMac = /Mac|iPad/.test(navigator.platform)
 const modKey = isMac ? 'metaKey' : 'ctrlKey'
 
 type ModifierKey = 'metaKey' | 'altKey' | 'ctrlKey'

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'
@@ -29,6 +31,7 @@ import {
   getGraphStats,
   mapRelationships
 } from '../mapper'
+import { WheelZoomInfoOverlay } from './WheelZoomInfoOverlay'
 import { StyledSvgWrapper, StyledZoomButton, StyledZoomHolder } from './styled'
 import { VizItem } from './types'
 import {
@@ -37,8 +40,13 @@ 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 { shouldShowWheelZoomInfo } 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 = 3000
+
 type GraphProps = {
   isFullscreen: boolean
   relationships: BasicRelationship[]
@@ -55,20 +63,28 @@ type GraphProps = {
   ) => void
   setGraph: (graph: Graph) => void
   offset: number
+  wheelZoomInfoMessageEnabled: boolean
+  disableWheelZoomInfoMessage: () => void
 }
 
 type GraphState = {
   zoomInLimitReached: boolean
   zoomOutLimitReached: boolean
+  displayingWheelZoomInfoMessage: boolean
 }
 
-export class GraphComponent extends React.Component<GraphProps, GraphState> {
+class GraphComponent extends React.Component<GraphProps, GraphState> {
   svgElement: React.RefObject<SVGSVGElement>
   graphView: GraphView | null = null
+  displayingWheelZoomInfoTimerId: number | undefined
 
   constructor(props: GraphProps) {
     super(props)
-    this.state = { zoomInLimitReached: false, zoomOutLimitReached: false }
+    this.state = {
+      zoomInLimitReached: false,
+      zoomOutLimitReached: false,
+      displayingWheelZoomInfoMessage: false
+    }
     this.svgElement = React.createRef()
   }
 
@@ -99,6 +115,7 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
       this.svgElement.current,
       measureSize,
       this.handleZoomEvent,
+      this.handleDisplayZoomWheelInfoMessage,
       graph,
       graphStyle,
       isFullscreen
@@ -139,6 +156,20 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
     }
   }
 
+  componentDidUpdate(prevProps: GraphProps): void {
+    if (this.props.isFullscreen !== prevProps.isFullscreen) {
+      this.graphView?.resize(this.props.isFullscreen)
+    }
+
+    if (this.props.styleVersion !== prevProps.styleVersion) {
+      this.graphView?.init()
+    }
+  }
+
+  componentWillUnmount(): void {
+    clearTimeout(this.displayingWheelZoomInfoTimerId)
+  }
+
   handleZoomEvent = (limitsReached: ZoomLimitsReached): void => {
     if (
       limitsReached.zoomInLimitReached !== this.state.zoomInLimitReached ||
@@ -151,6 +182,24 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
     }
   }
 
+  handleDisplayZoomWheelInfoMessage = (): void => {
+    if (
+      !this.state.displayingWheelZoomInfoMessage &&
+      this.props.wheelZoomInfoMessageEnabled
+    ) {
+      this.displayZoomWheelInfoMessage(true)
+      setTimeout(
+        this.displayZoomWheelInfoMessage,
+        DISPLAY_WHEEL_ZOOM_INFO_DURATION_MS,
+        false
+      )
+    }
+  }
+
+  displayZoomWheelInfoMessage = (display: boolean): void => {
+    this.setState({ displayingWheelZoomInfoMessage: display })
+  }
+
   zoomInClicked = (): void => {
     if (this.graphView) {
       this.graphView.zoomIn()
@@ -170,8 +219,17 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
   }
 
   render(): JSX.Element {
-    const { offset, isFullscreen } = this.props
-    const { zoomInLimitReached, zoomOutLimitReached } = this.state
+    const {
+      offset,
+      isFullscreen,
+      wheelZoomInfoMessageEnabled,
+      disableWheelZoomInfoMessage
+    } = this.props
+    const {
+      zoomInLimitReached,
+      zoomOutLimitReached,
+      displayingWheelZoomInfoMessage
+    } = this.state
     return (
       <StyledSvgWrapper>
         <svg className="neod3viz" ref={this.svgElement} />
@@ -197,17 +255,25 @@ export class GraphComponent extends React.Component<GraphProps, GraphState> {
             <ZoomToFitIcon large={isFullscreen} />
           </StyledZoomButton>
         </StyledZoomHolder>
+        {wheelZoomInfoMessageEnabled && (
+          <WheelZoomInfoOverlay
+            hide={isFullscreen || !displayingWheelZoomInfoMessage}
+            onDisableWheelZoomInfoMessage={disableWheelZoomInfoMessage}
+          />
+        )}
       </StyledSvgWrapper>
     )
   }
+}
 
-  componentDidUpdate(prevProps: GraphProps): void {
-    if (this.props.isFullscreen !== prevProps.isFullscreen) {
-      this.graphView?.resize(this.props.isFullscreen)
-    }
+const mapStateToProps = (state: GlobalState) => ({
+  wheelZoomInfoMessageEnabled: shouldShowWheelZoomInfo(state)
+})
 
-    if (this.props.styleVersion !== prevProps.styleVersion) {
-      this.graphView?.init()
-    }
+const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
+  disableWheelZoomInfoMessage: () => {
+    dispatch(actions.update({ showWheelZoomInfo: false }))
   }
-}
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphComponent)