Load on Demand

Loading family tree data on demand improves performance by fetching additional family members only when needed. This approach ensures that the application does not load unnecessary data initially, keeping the tree lightweight and responsive.

Here is how to implement it:

1. Initialize the Family Tree

   Create an instance of FamilyTree:

    
                  Copy 
   let familyTree = new FamilyTree2(document.getElementById('tree'));
                

2. Load Initial Data

   Add the primary family tree data when the page loads:

    
                  Copy 
   fetch('https://familytree.balkan.app/FetchFamily/c8sshc/Q60772')
       .then((data) => data.json())
       .then((data) => familyTree.addFamilyMembers(data).draw('Q60772'));
   
                

   This request initializes the family tree with a root member and their immediate relatives.

3. Implement On-Demand Loading

   Use the addFamilyMembers method to dynamically fetch family members when a user expands a node:

    
                  Copy 
   familyTree.onDemand(function (args) {
       fetch(`https://familytree.balkan.app/FetchFamilyMemebers/c8sshc/${args.ids.join(',')}`)
           .then((data) => data.json())
           .then((data) => familyTree.addFamilyMembers(data).draw())
   });
                

   When a node is expanded, the function fetches additional family members from an API and adds them to the tree dynamically.

4. Load on node focus

   Use onFocusButtonClick function to show the family of the new focused node:

    
                  Copy 
   familyTree.onFocusButtonClick(function (args) {
       fetch('https://familytree.balkan.app/FetchFamily/c8sshc/' + args.newFocusId)
           .then((data) => data.json())
           .then((data) => familyTree.addFamilyMembers(data).draw(args.newFocusId, familyTree.fit));
       return false;
   });
   
                

Here is the code demo:

Edit in BALKAN Code