fix graph resize with containerRefs

src/Router.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import {
   Routes,
   Route,
@@ -36,13 +36,23 @@ import { ErrorFallbackRoutes, ErrorFallbackApp } from 'library/ErrorBoundary';
 export const RouterInner = () => {
   const { network } = useApi();
   const { pathname } = useLocation();
-  const { sideMenuOpen, sideMenuMinimised } = useUi();
+  const { sideMenuOpen, sideMenuMinimised, setContainerRefs } = useUi();
 
   // scroll to top of the window on every page change or network change
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname, network]);
 
+  // set references to UI context and make available throughout app
+  useEffect(() => {
+    setContainerRefs({
+      mainInterface: mainInterfaceRef,
+    });
+  }, []);
+
+  // references to outer containers
+  const mainInterfaceRef = useRef<HTMLDivElement>(null);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorFallbackApp}>
       {/* Modal: closed by default */}
@@ -66,7 +76,7 @@ export const RouterInner = () => {
         </SideInterfaceWrapper>
 
         {/* Main content window */}
-        <MainInterfaceWrapper>
+        <MainInterfaceWrapper ref={mainInterfaceRef}>
           {/* Fixed headers */}
           <Headers />
 

src/contexts/UI/defaults.ts

@@ -41,11 +41,14 @@ export const defaultUIContext: UIContextInterface = {
   setOnNominatorSetup: (v) => {},
   // eslint-disable-next-line
   setOnPoolSetup: (v) => {},
+  // eslint-disable-next-line
+  setContainerRefs: (v) => {},
   sideMenuOpen: 0,
   userSideMenuMinimised: 0,
   sideMenuMinimised: 0,
   services: [],
   onNominatorSetup: 0,
   onPoolSetup: 0,
   isSyncing: false,
+  containerRefs: {},
 };

src/contexts/UI/index.tsx

@@ -335,6 +335,11 @@ export const UIProvider = ({ children }: { children: React.ReactNode }) => {
     return servicesRef.current;
   };
 
+  const [containerRefs, _setContainerRefs] = useState({});
+  const setContainerRefs = (v: any) => {
+    _setContainerRefs(v);
+  };
+
   return (
     <UIContext.Provider
       value={{
@@ -349,13 +354,15 @@ export const UIProvider = ({ children }: { children: React.ReactNode }) => {
         getServices,
         setOnNominatorSetup,
         setOnPoolSetup,
+        setContainerRefs,
         sideMenuOpen,
         userSideMenuMinimised: userSideMenuMinimisedRef.current,
         sideMenuMinimised,
         services: servicesRef.current,
         onNominatorSetup,
         onPoolSetup,
         isSyncing,
+        containerRefs,
       }}
     >
       {children}

src/contexts/UI/types.ts

@@ -20,11 +20,13 @@ export interface UIContextInterface {
   getServices: () => string[];
   setOnNominatorSetup: (v: number) => void;
   setOnPoolSetup: (v: number) => void;
+  setContainerRefs: (v: any) => void;
   sideMenuOpen: number;
   userSideMenuMinimised: number;
   sideMenuMinimised: number;
   services: string[];
   onNominatorSetup: number;
   onPoolSetup: number;
   isSyncing: boolean;
+  containerRefs: any;
 }

src/library/Graphs/Utils.ts

@@ -7,6 +7,7 @@ import React from 'react';
 import throttle from 'lodash.throttle';
 import { planckBnToUnit } from 'Utils';
 import { AnySubscan } from 'types';
+import { useUi } from 'contexts/UI';
 
 export const getSize = (element: any) => {
   const width = element?.offsetWidth;
@@ -15,6 +16,8 @@ export const getSize = (element: any) => {
 };
 
 export const useSize = (element: any) => {
+  const { containerRefs } = useUi();
+
   const [size, setSize] = React.useState(getSize(element));
 
   const throttleCallback = () => {
@@ -27,9 +30,12 @@ export const useSize = (element: any) => {
       leading: false,
     });
 
-    window.addEventListener('resize', resizeThrottle);
+    // listen to main interface resize if ref is available, otherwise
+    // fall back to window resize.
+    const listenFor = containerRefs?.mainInterface?.current ?? window;
+    listenFor.addEventListener('resize', resizeThrottle);
     return () => {
-      window.removeEventListener('resize', resizeThrottle);
+      listenFor.removeEventListener('resize', resizeThrottle);
     };
   });
   return size;