Optimize side panel tree

Feature #14102

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/tree-picker/tree-picker.ts b/src/views-components/tree-picker/tree-picker.ts
index 0cd55f121ffa9a7ac88bc8229fc2ae53643b97aa..8b7630ab8cc62609ca9a3898653f1956bd821553 100644 (file)
--- a/src/views-components/tree-picker/tree-picker.ts
+++ b/src/views-components/tree-picker/tree-picker.ts
@@ -16,11 +16,19 @@ export interface TreePickerProps {
     toggleItemActive: (nodeId: string, status: TreeItemStatus, pickerId: string) => void;
 }
 
-const mapStateToProps = (state: RootState, props: TreePickerProps): Pick<TreeProps<any>, 'items'> => {
-    const tree = state.treePicker[props.pickerId] || createTree();
-    return {
-        items: getNodeChildrenIds('')(tree)
-            .map(treePickerToTreeItems(tree))
+const memoizedMapStateToProps = () => {
+    let prevTree: Ttree<TreePickerNode>;
+    let mappedProps: Pick<TreeProps<any>, 'items'>;
+    return (state: RootState, props: TreePickerProps): Pick<TreeProps<any>, 'items'> => {
+        const tree = state.treePicker[props.pickerId] || createTree();
+        if(tree !== prevTree){
+            prevTree = tree;
+            mappedProps = {
+                items: getNodeChildrenIds('')(tree)
+                    .map(treePickerToTreeItems(tree))
+            };
+        }
+        return mappedProps;
     };
 };
 
@@ -30,7 +38,7 @@ const mapDispatchToProps = (dispatch: Dispatch, props: TreePickerProps): Pick<Tr
     toggleItemOpen: (id, status) => props.toggleItemOpen(id, status, props.pickerId)
 });
 
-export const TreePicker = connect(mapStateToProps, mapDispatchToProps)(Tree);
+export const TreePicker = connect(memoizedMapStateToProps(), mapDispatchToProps)(Tree);
 
 const treePickerToTreeItems = (tree: Ttree<TreePickerNode>) =>
     (id: string): TreeItem<any> => {