BALKANGraph / FamilyTreeJS

Build family tree app with BALKAN FamilyTreeJS library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.
60 stars 17 forks source link

Lower part of the tree vanishes when expanding parents node #49

Closed aespogom closed 1 year ago

aespogom commented 1 year ago

I have a deep tree with at maximum 5 levels in Angular 13. When the nodes are loaded, the preview is fine. However, the problem is that if I try to expand level 3 to a hidden level 4, the lower part is the tree (level 1 and 2) disappears!

This image is the preview right after loading the nodes:

image

These are my nodes: `

let nodes = [{
  id: "174ce2f5-1e5d-44e6-9644-6d4720c0e33a",
  name: "grandparent",
  pids: [
    "d6cad9f0-697b-479c-b59d-23f9e10c75d7",
  ],
  fid: "ececf641-f394-4b75-9d3b-58f758cc577c",
  mid: "572505f3-cde5-460f-b078-205d4a7d53ea",
},
{
  id: "d6cad9f0-697b-479c-b59d-23f9e10c75d7",
  name: "jksdjksdkf",
  gender: "female",
  fid: "6263314f-a62e-4f76-b83e-0a03ae4023b6",
  mid: "cb148d1c-bd86-4751-82fc-cc59d404ab6d",
},
{
  id: "7ec00d7f-94d5-41fc-9c89-dd1bde1f38ca",
  name: "grandparent",
  pids: [
    "20b5469b-9705-44de-bdcb-a10a178fd9ca",
  ],
},
{
  id: "20b5469b-9705-44de-bdcb-a10a178fd9ca",
  name: "grandmother",
},
{
  id: "5d543277-dec5-42d8-a339-75fa19f83b4f",
  fid: "7ec00d7f-94d5-41fc-9c89-dd1bde1f38ca",
  mid: "20b5469b-9705-44de-bdcb-a10a178fd9ca",
  name: "lorenzo",
},
{
  id: "000045",
  fid: "82078a71-ac59-4a9b-b374-797051cbd05b",
  mid: "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  name: "patient",
},
{
  id: "82078a71-ac59-4a9b-b374-797051cbd05b",
  name: "Fernando",
  pids: [
    "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  ],
  fid: "174ce2f5-1e5d-44e6-9644-6d4720c0e33a",
  mid: "d6cad9f0-697b-479c-b59d-23f9e10c75d7",
},
{
  id: "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  pids: [
    "82078a71-ac59-4a9b-b374-797051cbd05b",
  ],
  name: "Ana",
  fid: "7ec00d7f-94d5-41fc-9c89-dd1bde1f38ca",
  mid: "20b5469b-9705-44de-bdcb-a10a178fd9ca",
},
{
  id: "655afaeb-b640-41a6-a0d8-bf437b4f9535",
  fid: "82078a71-ac59-4a9b-b374-797051cbd05b",
  mid: "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  name: "Saro",
},
{
  id: "b51e144a-29f4-4c93-a0c8-204b6890c3a4",
  fid: "82078a71-ac59-4a9b-b374-797051cbd05b",
  mid: "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  name: "sister1",
},
{
  id: "fc3eee8e-0bfb-4670-be9e-f4b67e4372c1",
  fid: "82078a71-ac59-4a9b-b374-797051cbd05b",
  mid: "60a545ff-66f6-4ba9-b527-45f65888c5d2",
  name: "popa",
},
{
  id: "5bca28c5-006d-4f42-a709-b72d8dba63f1",
  fid: "174ce2f5-1e5d-44e6-9644-6d4720c0e33a",
  mid: "d6cad9f0-697b-479c-b59d-23f9e10c75d7",
  name: "patient",
},
{
  id: "ececf641-f394-4b75-9d3b-58f758cc577c",
  name: "Pedro",
  pids: [
    "572505f3-cde5-460f-b078-205d4a7d53ea",
  ],
},
{
  id: "572505f3-cde5-460f-b078-205d4a7d53ea",
  name: "Lola",
},
{
  id: "6263314f-a62e-4f76-b83e-0a03ae4023b6",
  name: "Mundo",
  pids: [
    "cb148d1c-bd86-4751-82fc-cc59d404ab6d",
  ],
},
{
  id: "cb148d1c-bd86-4751-82fc-cc59d404ab6d",
  name: "Ana",
},
]

`

This is my FamilyTree configuration summarized: `

    const tree = document.getElementById('tree');
    if (tree) {
          var chart = new FamilyTree(tree, {
              template: 'john',
              orderBy: "birthday" ,
              lazyLoading: true,
              mouseScrool: FamilyTree.action.ctrlZoom,
              orientation: FamilyTree.orientation.top,
              editForm: {...}
              nodeMenu: {},
              nodeContextMenu: {},
              menu: {},
              nodeCircleMenu: {},
              scaleInitial: FamilyTree.match.boundary,
              nodeBinding: {...}
          });
    }
    chart.load(nodes);

` This is what happens when clicking on the parent node from the previous image: The nodes from level 3 and 4 are right but level 1 and 2 disappears.

image

These are the versions I am using: "@balkangraph/familytree.js": "^1.7.17" Angular CLI: 13.0.4 Node: 14.18.3 Package Manager: npm 6.14.15 OS: win32 x64 Angular: 13.0.3

Thank you in advance!

ZornitsaPesheva commented 1 year ago

The issue is that you have missed pids several times.

for example if you here pids here:

{
  id: "ececf641-f394-4b75-9d3b-58f758cc577c",
  name: "Pedro",
  pids: [
    "572505f3-cde5-460f-b078-205d4a7d53ea",
  ],
},

you should have here also

{
  id: "572505f3-cde5-460f-b078-205d4a7d53ea",
  name: "Lola",
  pids: [
    "ececf641-f394-4b75-9d3b-58f758cc577c",
  ],
},
aespogom commented 1 year ago

You are totally right!! I did not notice that I was missing some pids. Thank you so much for your help.