function App()

in bindings/kepler.gl-jupyter/js/lib/keplergl/components/app.js [67:150]
77 lines of code
10 McCabe index (conditional complexity)

function App() {
  const rootElm = useRef(null);
  const [windowDimension, setDimension] = useState({});

  const handleResize = () => {
    if (!rootElm.current) {
      return;
    }

    const width = rootElm.current.offsetWidth;
    const height = rootElm.current.offsetHeight;
    const dimensionToSet = {
      ...(width && width !== windowDimension.width ? {width} : {}),
      ...(height && height !== windowDimension.height ? {height} : {})
    };

    setDimension(dimensionToSet);
  };

  // in Jupyter Lab,  parent component has transition when window resize.
  // need to delay call to get the final parent width,
  const resizeDelay = () => window.setTimeout(handleResize, 500);

  useEffect(() => {
    window.addEventListener('resize', resizeDelay);
    return () => window.removeEventListener('resize', resizeDelay);
  }, []);

  return (
    <StyledContainer
      ref={rootElm}
      className="keplergl-widget-container"
    >
      {Helmet ? (
        <Helmet>
          <meta charSet="utf-8" />
          <title>Kepler.gl Jupyter</title>
          <link
            rel="stylesheet"
            href="http://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"
          />
          <link
            rel="stylesheet"
            href="http://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css"
          />
          <style type="text/css">
            {`font-family: ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif;
                font-weight: 400;
                font-size: 0.875em;
                line-height: 1.71429;

                *,
                *:before,
                *:after {
                  -webkit-box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  box-sizing: border-box;
                }
                body {
                  margin: 0; padding: 0;
                }
                .jupyter-widgets.keplergl-jupyter-widgets {
                  overflow: hidden;
                }
                .p-Widget.p-Panel.jp-OutputArea-output.jupyter-widgets {
                  overflow: hidden
                }
                `}
          </style>
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-64694404-19" />
          <script>{`window.dataLayer=window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-64694404-19', {page_path: '/keplergl-jupyter-widget'});`}</script>
        </Helmet>
      ) : null}
      <KeplerGl
        mapboxApiAccessToken={MAPBOX_TOKEN}
        width={windowDimension.width || 800}
        height={windowDimension.height || 400}
        appName="Kepler.gl Jupyter"
        version={KEPLER_GL_JUPYTER_VERSION}
        getMapboxRef={handleResize}
      />
    </StyledContainer>
  );
}