Use resize observer to simplify use get plot (#5085)

Author: mattseddon

webview/setup-tests.js

@@ -4,11 +4,12 @@ window = {
   dispatchEvent: jest.fn()
 }
 
-const intersectionObserverMock = jest.fn().mockImplementation(() => {
-  return {
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn()
-  }
-})
-global.IntersectionObserver = intersectionObserverMock
+for (const observer of ['IntersectionObserver', 'ResizeObserver']) {
+  global[observer] = jest.fn().mockImplementation(() => {
+    return {
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn()
+    }
+  })
+}

webview/src/plots/components/ZoomedInPlot.tsx

@@ -105,6 +105,7 @@ export const ZoomedInPlot: React.FC<ZoomedInPlotProps> = ({
         onNewView={onNewView}
         parentRef={zoomedInPlotRef}
         section={section}
+        focused={true}
       />
     </div>
   )

webview/src/plots/components/vegaLite/ExtendedVegaLite.tsx

@@ -13,7 +13,8 @@ export const ExtendedVegaLite = ({
   id,
   parentRef,
   onNewView,
-  section
+  section,
+  focused = false
 }: {
   actions:
     | false
@@ -23,12 +24,13 @@ export const ExtendedVegaLite = ({
         export: false
         source: false
       }
+  focused?: boolean
   id: string
   parentRef: React.RefObject<HTMLDivElement | HTMLButtonElement>
   onNewView: (view: View) => void
   section: PlotsSection
 }) => {
-  const spec = useGetPlot(section, id, parentRef)
+  const spec = useGetPlot(section, id, parentRef, focused)
 
   const vegaLiteProps: VegaLiteProps = {
     actions,

webview/src/plots/hooks/useGetPlot.ts

@@ -1,5 +1,5 @@
 import { PlotsSection } from 'dvc/src/plots/webview/contract'
-import { RefObject, useCallback, useEffect, useState } from 'react'
+import { RefObject, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { VisualizationSpec } from 'react-vega'
 import { plotDataStore } from '../components/plotDataStore'
@@ -9,49 +9,49 @@ import { fillTemplate } from '../components/vegaLite/util'
 export const useGetPlot = (
   section: PlotsSection,
   id: string,
-  plotRef: RefObject<HTMLButtonElement | HTMLDivElement>
+  plotRef: RefObject<HTMLButtonElement | HTMLDivElement>,
+  plotFocused: boolean
+  // eslint-disable-next-line sonarjs/cognitive-complexity
 ): VisualizationSpec | undefined => {
   const storeSection =
     section === PlotsSection.TEMPLATE_PLOTS ? 'template' : 'custom'
-  const {
-    plotsSnapshots: snapshot,
-    nbItemsPerRow,
-    height: itemHeight
-  } = useSelector((state: PlotsState) => state[storeSection])
+  const { plotsSnapshots } = useSelector(
+    (state: PlotsState) => state[storeSection]
+  )
 
   const [spec, setSpec] = useState<VisualizationSpec | undefined>()
 
   const [height, setHeight] = useState(0)
   const [width, setWidth] = useState(0)
 
-  const setPlotData = useCallback(() => {
-    const plot = plotDataStore[section][id]
-
-    const spec = fillTemplate(plot, width, height, false)
-    if (!spec) {
-      return
-    }
-    setSpec(spec)
-  }, [section, id, width, height])
-
   useEffect(() => {
-    const onResize = () => {
+    const resizeObserver = new ResizeObserver(() => {
       if (!plotRef.current) {
         return
       }
       const { height, width } = plotRef.current.getBoundingClientRect()
       setHeight(height)
       setWidth(width)
-    }
-    window.addEventListener('resize', onResize)
+    })
 
-    onResize()
+    if (plotRef.current) {
+      resizeObserver.observe(plotRef.current)
+    }
 
-    setPlotData()
     return () => {
-      window.removeEventListener('resize', onResize)
+      resizeObserver.disconnect()
     }
-  }, [snapshot, setPlotData, plotRef, nbItemsPerRow, itemHeight])
+  }, [plotRef])
+
+  useEffect(() => {
+    const plot = plotDataStore[section][id]
+
+    const spec = fillTemplate(plot, width, height, plotFocused)
+    if (!spec) {
+      return
+    }
+    setSpec(spec)
+  }, [height, id, plotFocused, plotsSnapshots, section, width])
 
   return spec
 }