Make sure fit to graph always work (#1799)

* resize visualizer on window resize

* Change to resize observer

* remove unsued function

* fix linting issues

* Disconnect resize observer on unmount in cypher editor

* clean up resize code in graph visualizer

* Restore comment

Author: noahmay

src/neo4j-arc/cypher-language-support/cypher-editor/CypherEditor.tsx

@@ -99,10 +99,21 @@ export class CypherEditor extends React.Component<
     currentHistoryIndex: UNRUN_CMD_HISTORY_INDEX,
     draft: ''
   }
-
+  resizeObserver: ResizeObserver
   editor?: monaco.editor.IStandaloneCodeEditor
   container?: HTMLElement
 
+  constructor(props: CypherEditorProps) {
+    super(props)
+
+    // Wrapped in requestAnimationFrame to avoid the error "ResizeObserver loop limit exceeded"
+    this.resizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        this.editor?.layout()
+      })
+    })
+  }
+
   static defaultProps = cypherEditorDefaultProps
 
   private getMonacoId = (): string => `monaco-${this.props.id}`
@@ -383,13 +394,7 @@ export class CypherEditor extends React.Component<
       this.resize(this.props.isFullscreen)
     )
 
-    const resizeObserver = new ResizeObserver(() => {
-      // Wrapped in requestAnimationFrame to avoid the error "ResizeObserver loop limit exceeded"
-      window.requestAnimationFrame(() => {
-        this.editor?.layout()
-      })
-    })
-    resizeObserver.observe(this.container)
+    this.resizeObserver.observe(this.container)
 
     /*
      * This moves the the command palette widget out of of the overflow-guard div where overlay widgets
@@ -443,5 +448,6 @@ export class CypherEditor extends React.Component<
   componentWillUnmount = (): void => {
     this.editor?.dispose()
     this.debouncedUpdateCode?.cancel()
+    this.resizeObserver.disconnect()
   }
 }

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

@@ -48,6 +48,7 @@ import {
 import { Visualization } from './visualization/Visualization'
 import { WheelZoomInfoOverlay } from './WheelZoomInfoOverlay'
 import { StyledSvgWrapper, StyledZoomButton, StyledZoomHolder } from './styled'
+import { ResizeObserver } from '@juggle/resize-observer'
 
 export type GraphProps = {
   isFullscreen: boolean
@@ -80,6 +81,8 @@ type GraphState = {
 
 export class Graph extends React.Component<GraphProps, GraphState> {
   svgElement: React.RefObject<SVGSVGElement>
+  wrapperElement: React.RefObject<HTMLDivElement>
+  wrapperResizeObserver: ResizeObserver
   visualization: Visualization | null = null
 
   constructor(props: GraphProps) {
@@ -90,6 +93,14 @@ export class Graph extends React.Component<GraphProps, GraphState> {
       displayingWheelZoomInfoMessage: false
     }
     this.svgElement = React.createRef()
+    this.wrapperElement = React.createRef()
+
+    this.wrapperResizeObserver = new ResizeObserver(() => {
+      this.visualization?.resize(
+        this.props.isFullscreen,
+        !!this.props.wheelZoomRequiresModKey
+      )
+    })
   }
 
   componentDidMount(): void {
@@ -170,6 +181,8 @@ export class Graph extends React.Component<GraphProps, GraphState> {
     if (assignVisElement) {
       assignVisElement(this.svgElement.current, this.visualization)
     }
+
+    this.wrapperResizeObserver.observe(this.svgElement.current)
   }
 
   componentDidUpdate(prevProps: GraphProps): void {
@@ -185,6 +198,10 @@ export class Graph extends React.Component<GraphProps, GraphState> {
     }
   }
 
+  componentWillUnmount(): void {
+    this.wrapperResizeObserver.disconnect()
+  }
+
   handleZoomEvent = (limitsReached: ZoomLimitsReached): void => {
     if (
       limitsReached.zoomInLimitReached !== this.state.zoomInLimitReached ||
@@ -236,7 +253,7 @@ export class Graph extends React.Component<GraphProps, GraphState> {
       displayingWheelZoomInfoMessage
     } = this.state
     return (
-      <StyledSvgWrapper>
+      <StyledSvgWrapper ref={this.wrapperElement}>
         <svg className="neod3viz" ref={this.svgElement} />
         <StyledZoomHolder offset={offset} isFullscreen={isFullscreen}>
           <StyledZoomButton