From d28b8b5e8d466fc76e32e66f92706e59f0335c93 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 8 Jun 2020 17:13:05 +0100
Subject: [PATCH] Some performance improvements for TreeList

---
 .../src/js/ui/common/treeList.js              | 56 ++++++++++++++-----
 .../src/js/ui/tab-info-outliner.js            |  4 +-
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index 4e7d92c37..afed63a5a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -228,7 +228,7 @@
                 return candidates[index+1];
             }
         },
-        _addChildren: function(container,parent,children,depth) {
+        _addChildren: function(container,parent,children,depth,onCompleteChildren) {
             var that = this;
             var subtree = $('<ol class="red-ui-treeList-list">').appendTo(container).editableList({
                 connectWith: ".red-ui-treeList-sortable",
@@ -263,10 +263,32 @@
             if (!!that.options.sortable) {
                 subtree.addClass('red-ui-treeList-sortable');
             }
-            for (var i=0;i<children.length;i++) {
-                children[i].parent = parent;
-                subtree.editableList('addItem',children[i])
+            var sliceSize = 30;
+            var index = 0;
+            var addSlice = function() {
+                var start = index;
+                for (var i=0;i<sliceSize;i++) {
+                    index = start+i;
+                    if (index === children.length) {
+                        setTimeout(function() {
+                            if (onCompleteChildren) {
+                                onCompleteChildren();
+                            }
+                        },10);
+                        return;
+                    }
+                    children[index].parent = parent;
+                    subtree.editableList('addItem',children[index])
+                }
+                index++;
+                if (index < children.length) {
+                    setTimeout(function() {
+                        addSlice();
+                    },10);
+                }
             }
+            addSlice();
+            subtree.hide()
             return subtree;
         },
         _fixDepths: function(parent,child) {
@@ -376,9 +398,13 @@
                     var childrenAdded = false;
                     var spinner;
                     var startTime = 0;
+                    var started = Date.now();
                     var completeBuild = function(children) {
                         childrenAdded = true;
-                        item.treeList.childList = that._addChildren(container,item,children,depth).hide();
+                        item.treeList.childList = that._addChildren(container,item,children,depth, function() {
+                            if (done) { done(true) }
+                            that._trigger("childrenloaded",null,item)
+                        });
                         var delta = Date.now() - startTime;
                         if (delta < 400) {
                             setTimeout(function() {
@@ -394,8 +420,6 @@
                             }
                         }
                         item.expanded = true;
-                        if (done) { done(true) }
-                        that._trigger("childrenloaded",null,item)
                     }
                     if (typeof item.children === 'function') {
                         item.children(completeBuild,item);
@@ -411,7 +435,7 @@
                     }
 
                 } else {
-                    if (that._loadingData) {
+                    if (that._loadingData || item.children.length > 20) {
                         item.treeList.childList.show();
                     } else {
                         item.treeList.childList.slideDown('fast');
@@ -427,7 +451,11 @@
                 }
                 item.expanded = false;
                 if (item.treeList.container) {
-                    item.treeList.childList.slideUp('fast');
+                    if (item.children.length < 20) {
+                        item.treeList.childList.slideUp('fast');
+                    } else {
+                        item.treeList.childList.hide();
+                    }
                     item.treeList.container.removeClass("expanded");
                 }
             }
@@ -554,7 +582,7 @@
                 })
                 if (!item.children) {
                     item.children = children||[];
-                    item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
+                    item.treeList.childList = that._addChildren(container,item,item.children,depth);
                 }
             }
 
@@ -646,7 +674,7 @@
             }
             if (item.children) {
                 if (Array.isArray(item.children) && !item.deferBuild) {
-                    item.treeList.childList = that._addChildren(container,item,item.children,depth).hide();
+                    item.treeList.childList = that._addChildren(container,item,item.children,depth);
                 }
                 if (item.expanded) {
                     item.treeList.expand();
@@ -801,8 +829,10 @@
                         }
                     }
                     matchCount += childCount;
-                    if (childCount > 0) {
-                        item.treeList.expand();
+                    if (filterFunc && childCount > 0) {
+                        setTimeout(function() {
+                            item.treeList.expand();
+                        },10);
                     }
                 }
                 if (!filterFunc) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
index 621d68d62..f285f77aa 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -208,7 +208,7 @@ RED.sidebar.info.outliner = (function() {
 
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
             style: "compact",
-            delay: 300,
+            delay: 500,
             change: function() {
                 var val = $(this).val();
                 var searchResults = RED.search.search(val);
@@ -291,8 +291,6 @@ RED.sidebar.info.outliner = (function() {
         RED.events.on("groups:remove",onObjectRemove);
         RED.events.on("groups:change",onNodeChange);
 
-        RED.events.on("view:selection-changed", onSelectionChanged);
-
         RED.events.on("workspace:clear", onWorkspaceClear)
 
         return container;