refactor(Dashboard): Add virtual scroll to widget layer tree

Author: scottsut

frontend/src/app/components/Tree/index.tsx

@@ -1,6 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Empty, Tree as AntTree, TreeProps as AntTreeProps } from 'antd';
 import classnames from 'classnames';
+import { MutableRefObject } from 'react';
 import styled from 'styled-components/macro';
 import {
   FONT_SIZE_BODY,
@@ -14,12 +15,19 @@ import {
 
 interface TreeProps extends AntTreeProps {
   loading: boolean;
+  wrapperRef?: MutableRefObject<HTMLDivElement> | null;
 }
 
-export function Tree({ loading, treeData, ...treeProps }: TreeProps) {
+export function Tree({
+  loading,
+  wrapperRef,
+  treeData,
+  ...treeProps
+}: TreeProps) {
   return (
     <Wrapper
       className={classnames({ container: loading || !treeData?.length })}
+      {...(wrapperRef && { ref: wrapperRef })}
     >
       {loading ? (
         <LoadingOutlined />

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/LayerPanel/LayerTree.tsx

@@ -18,6 +18,7 @@
 
 import { Tree } from 'app/components';
 import { renderIcon } from 'app/hooks/useGetVizIcon';
+import useResizeObserver from 'app/hooks/useResizeObserver';
 import { WidgetActionContext } from 'app/pages/DashBoardPage/components/ActionProvider/WidgetActionProvider';
 import widgetManager from 'app/pages/DashBoardPage/components/WidgetManager';
 import { FC, memo, useCallback, useContext } from 'react';
@@ -39,6 +40,11 @@ export const LayerTree: FC<{}> = memo(() => {
   const editingWidgetIds = useSelector(selectEditingWidgetIds);
   const selectedIds = useSelector(selectSelectedIds);
 
+  const { height, ref } = useResizeObserver({
+    refreshMode: 'debounce',
+    refreshRate: 200,
+  });
+
   const treeSelect = useCallback(
     (_, { node, nativeEvent }) => {
       onEditSelectWidget({
@@ -86,6 +92,8 @@ export const LayerTree: FC<{}> = memo(() => {
       onDrop={onDrop}
       treeData={treeData}
       selectedKeys={selectedIds ? selectedIds.split(',') : []}
+      height={height}
+      wrapperRef={ref}
       defaultExpandAll
     />
   );