I am working on developing a Lighthing Tree that has upwards of 60,000 records with various branches to the tree and can have up to 5 depths to the tree. 
I can easily render the first two tiers in the tree. I can also handle an on click action to pass back to the server and query the child records of the selected component. 
What I need is to be able to put those child records into the tree underneath the selected node. 

TestContainer.app 

<aura:application extends="force:slds">
    <c:ProductTreeView /> 
</aura:application>

ProductTreeView.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ProductTreeController" >
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="Object"/>
    <aura:attribute name="expanded" type="Boolean" default="false" />
    
<div class="slds-box slds-p-around_small"> 
    <lightning:card title="Product Search" iconName="standard:product">
            <aura:set attribute="actions">
            	<lightning:button label="Refresh List" onclick="{!c.refreshList}"/>
                <lightning:button label="Create Special Item"/>
        	</aura:set>
             
            <lightning:tree items="{! v.items }" header="Product Hierarchy" onselect="{!c.handleSelect}" />

            <!--Lightning Spinner-->
    		<div>
        		<lightning:spinner alternativeText="Processing.." title="Processing.." aura:id="spnr" variant="brand" size="large" />
    		</div>  
    </lightning:card>
</div>    
</aura:component>

ProductTreeViewController.js

({
    doInit: function (component, event, helper) {
        var spinner = component.find("spnr");
        var action = component.get('c.getProductTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.items', response.getReturnValue());
                //hide spinner after getting data
                $A.util.toggleClass(spinner, "slds-hide");
            }else{
                $A.util.toggleClass(spinner, "slds-hide");
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
    },
    handleSelect: function (component, event, helper) {
        //return name of selected tree item
        var items = component.get('v.items');
        var Branch = items.length - 3;
        console.log(items);
        var Parentid = event.getParam('name');
        var action = component.get('c.loadChildren');
	    action.setParams({"ParentId": Parentid});
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
               	var newitems = response.getReturnValue();
                items[Branch].items.push(newitems);              
                component.set('v.items', items());             
            }else{
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
    },
    
     refreshList: function (component, event, helper) {
         
        var action = component.get('c.getProductTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.items', response.getReturnValue());          
            }else{
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
     }
})

ProductTreeController.cls

public class ProductTreeController {

    @AuraEnabled
    public static List<item> getProductTree(){
        
        List<item> items = new List<item>();
        List<Product_Hierarchy__c> tier1 = new List<Product_Hierarchy__c>();
        
        tier1 = [SELECT id, DisplayName__c, Product__c, (Select id, DisplayName__c, Product__c FROM Hierarchy_Parent__r) FROM Product_Hierarchy__c WHERE ParentId__c = NULL];
        
        
        for(Product_Hierarchy__c t1: tier1){

            
            List<item> tier2 = new List<item>();
            for (Product_Hierarchy__c t2 : t1.Hierarchy_Parent__r){
                
                item tier2item = new item(t2.DisplayName__c, String.valueof(t2.Id), false, null);
                tier2.add(tier2item);
            }
           
            
            item tier1item = new item(t1.DisplayName__c, String.valueof(t1.Id), false, tier2);
            items.add(tier1item);
        }
                
        return items;
    
    }
    
    @AuraEnabled
    public static List<item> loadChildren(String ParentId){
        List<item> items = new List<item>();
        List<Product_Hierarchy__c> children = new List<Product_Hierarchy__c>();
        
        children = [SELECT id, DisplayName__c, Product__c FROM Product_Hierarchy__c WHERE ParentId__c =: ParentId];
        
        for(Product_Hierarchy__c c: children){
            item childitem = new item(c.DisplayName__c, String.valueof(c.id), true, null);
                items.add(childitem);
        }
        
        return items;
    }
    
    
    
    public class item{
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String name {get; set;}
        @AuraEnabled
        public Boolean expanded {get; set;}
        @AuraEnabled
        public List<item> items {get; set;}
         
        public item(String label, String name, Boolean expanded, List<item> items){
            this.label = label;
            this.name = name;
            this.expanded = expanded;
            this.items = items;
        }
    }    
}

I am trying to PUSH the new queried records to the existing "Items" that is generated in the function handleSelect, but I get errors. Can anyone provide me with examples on how to do a lazy load like this OR how to identify the specific NODE that was selected so I can add the items to that section of the existing "Items" 

We have built this functionallity using JS and VF for classic and need to reproduce this in LEX. Due to the large ammount of data, I cannot load all the records at the start and have to go with a lazy load scenario. 

Any help will be greatly appreciated!! 

 

I am working on developing a Lighthing Tree that has upwards of 60,000 records with various branches to the tree and can have up to 5 depths to the tree. 
I can easily render the first two tiers in the tree. I can also handle an on click action to pass back to the server and query the child records of the selected component. 
What I need is to be able to put those child records into the tree underneath the selected node. 

TestContainer.app 

<aura:application extends="force:slds">
    <c:ProductTreeView /> 
</aura:application>

ProductTreeView.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ProductTreeController" >
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="Object"/>
    <aura:attribute name="expanded" type="Boolean" default="false" />
    
<div class="slds-box slds-p-around_small"> 
    <lightning:card title="Product Search" iconName="standard:product">
            <aura:set attribute="actions">
            	<lightning:button label="Refresh List" onclick="{!c.refreshList}"/>
                <lightning:button label="Create Special Item"/>
        	</aura:set>
             
            <lightning:tree items="{! v.items }" header="Product Hierarchy" onselect="{!c.handleSelect}" />

            <!--Lightning Spinner-->
    		<div>
        		<lightning:spinner alternativeText="Processing.." title="Processing.." aura:id="spnr" variant="brand" size="large" />
    		</div>  
    </lightning:card>
</div>    
</aura:component>

ProductTreeViewController.js

({
    doInit: function (component, event, helper) {
        var spinner = component.find("spnr");
        var action = component.get('c.getProductTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.items', response.getReturnValue());
                //hide spinner after getting data
                $A.util.toggleClass(spinner, "slds-hide");
            }else{
                $A.util.toggleClass(spinner, "slds-hide");
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
    },
    handleSelect: function (component, event, helper) {
        //return name of selected tree item
        var items = component.get('v.items');
        var Branch = items.length - 3;
        console.log(items);
        var Parentid = event.getParam('name');
        var action = component.get('c.loadChildren');
	    action.setParams({"ParentId": Parentid});
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
               	var newitems = response.getReturnValue();
                items[Branch].items.push(newitems);              
                component.set('v.items', items());             
            }else{
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
    },
    
     refreshList: function (component, event, helper) {
         
        var action = component.get('c.getProductTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.items', response.getReturnValue());          
            }else{
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
     }
})

ProductTreeController.cls

public class ProductTreeController {

    @AuraEnabled
    public static List<item> getProductTree(){
        
        List<item> items = new List<item>();
        List<Product_Hierarchy__c> tier1 = new List<Product_Hierarchy__c>();
        
        tier1 = [SELECT id, DisplayName__c, Product__c, (Select id, DisplayName__c, Product__c FROM Hierarchy_Parent__r) FROM Product_Hierarchy__c WHERE ParentId__c = NULL];
        
        
        for(Product_Hierarchy__c t1: tier1){

            
            List<item> tier2 = new List<item>();
            for (Product_Hierarchy__c t2 : t1.Hierarchy_Parent__r){
                
                item tier2item = new item(t2.DisplayName__c, String.valueof(t2.Id), false, null);
                tier2.add(tier2item);
            }
           
            
            item tier1item = new item(t1.DisplayName__c, String.valueof(t1.Id), false, tier2);
            items.add(tier1item);
        }
                
        return items;
    
    }
    
    @AuraEnabled
    public static List<item> loadChildren(String ParentId){
        List<item> items = new List<item>();
        List<Product_Hierarchy__c> children = new List<Product_Hierarchy__c>();
        
        children = [SELECT id, DisplayName__c, Product__c FROM Product_Hierarchy__c WHERE ParentId__c =: ParentId];
        
        for(Product_Hierarchy__c c: children){
            item childitem = new item(c.DisplayName__c, String.valueof(c.id), true, null);
                items.add(childitem);
        }
        
        return items;
    }
    
    
    
    public class item{
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String name {get; set;}
        @AuraEnabled
        public Boolean expanded {get; set;}
        @AuraEnabled
        public List<item> items {get; set;}
         
        public item(String label, String name, Boolean expanded, List<item> items){
            this.label = label;
            this.name = name;
            this.expanded = expanded;
            this.items = items;
        }
    }    
}

I am trying to PUSH the new queried records to the existing "Items" that is generated in the function handleSelect, but I get errors. Can anyone provide me with examples on how to do a lazy load like this OR how to identify the specific NODE that was selected so I can add the items to that section of the existing "Items" 

We have built this functionallity using JS and VF for classic and need to reproduce this in LEX. Due to the large ammount of data, I cannot load all the records at the start and have to go with a lazy load scenario. 

Any help will be greatly appreciated!!