How to change the number of generations rendered?

[trydalch]

I'm building a relationship finder on react native that renders trees that can go back generations. I've patterned after your react-family-tree repository (and react-family-tree-example).

I'm running into difficulty where it only renders 1/2 of the tall tree (only the rootId side).

How can I get it to show the other side?

[SanichKotikov]

@trydalch I'm not sure what exactly do you mean. Can you sketch an example?

[trydalch]

Yes. Sorry for not being clear.

A tree basically like this, of arbitrary depth.

This shows just the relationship between 2 people at the bottom (distant cousins) and how their family trees tie together.

[trydalch]

Here's my data set.

[
  {
    "id": 610425104,
    "name": "Captain | Joseph /Boynton/ Capt.",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [],
    "children": [
      {
        "id": 608352165,
        "type": "blood"
      },
      {
        "id": 610044677,
        "type": "blood"
      }
    ]
  },
  {
    "id": 610044677,
    "name": "Sarah",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 610425104,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500975212,
        "type": "blood"
      }
    ]
  },
  {
    "id": 608352165,
    "name": "Jonathan",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 610425104,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 526457941,
        "type": "blood"
      }
    ]
  },
  {
    "id": 603429315,
    "name": "Lucy",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 512290852,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 543776757,
        "type": "blood"
      }
    ]
  },
  {
    "id": 553761826,
    "name": "Henry",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 543776757,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500793444,
        "type": "blood"
      }
    ]
  },
  {
    "id": 543776757,
    "name": "Elizabeth",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 603429315,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 553761826,
        "type": "blood"
      }
    ]
  },
  {
    "id": 526457941,
    "name": "Margaret",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 608352165,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 512290852,
        "type": "blood"
      }
    ]
  },
  {
    "id": 512290852,
    "name": "Jonathon",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 526457941,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 603429315,
        "type": "blood"
      }
    ]
  },
  {
    "id": 512147522,
    "name": "Melba",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500714692,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 501444442,
        "type": "blood"
      }
    ]
  },
  {
    "id": 503273457,
    "name": "William",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500975212,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500793102,
        "type": "blood"
      }
    ]
  },
  {
    "id": 503273454,
    "name": "Louisa",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500793080,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500793164,
        "type": "blood"
      }
    ]
  },
  {
    "id": 501444442,
    "name": "Armon",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 512147522,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500056603,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500975212,
    "name": "Mercy",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 610044677,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 503273457,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500793460,
    "name": "Charles",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500793444,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500667964,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500793444,
    "name": "Henry",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 553761826,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500793460,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500793164,
    "name": "Huldah",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 503273454,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500714692,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500793102,
    "name": "Sarah",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 503273457,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500793080,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500793080,
    "name": "William",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500793102,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 503273454,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500714692,
    "name": "Eva",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500793164,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 512147522,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500667964,
    "name": "Charles",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "parents": [
      {
        "id": 500793460,
        "type": "blood"
      }
    ],
    "children": [
      {
        "id": 500516488,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500516488,
    "name": "Aleisa",
    "gender": "Female",
    "spouses": [],
    "siblings": [],
    "children": [],
    "parents": [
      {
        "id": 500667964,
        "type": "blood"
      }
    ]
  },
  {
    "id": 500056603,
    "name": "Alan",
    "gender": "Male",
    "spouses": [],
    "siblings": [],
    "children": [],
    "parents": [
      {
        "id": 501444442,
        "type": "blood"
      }
    ]
  }
]

[SanichKotikov]

@trydalch sorry, but I don't understand what is the question. Do you want to render limited count of children at the bottom? So, in that case you have to do it by your self, with your custom render function/component.

[trydalch]

@SanichKotikov Sorry for not being clear.

I've built my own components, they're rendering. Also, I'm using v 1.3.3 (I just saw you updated a couple days ago)

The problem I have is that the relatives-tree library is truncating the data I pass it.

Here's an example tree from my app (actual data obfuscated/removed).

The root node is in green.

What I would like is to set the bottom left node (# 8) as the root node, and still show the whole tree. This shows how #8 and #23 are related through a common ancestor.

But when I select # 8 as the root node, this is the resulting tree:

At some point in the pipeline, it truncates the tree. This library only returns a subset of the nodes found in the raw data.

Note, the raw data did not change between the generation of the two trees. All that changed was which node was selected as the root.

How can I get the full tree to display, regardless of which node is the root?

[SanichKotikov]

@trydalch no it's clear, thx.

How can I get the full tree to display, regardless of which node is the root?

There is no way to do this (at least for now) with current package. That's how it has been designed, and it 'renders' only parents for parent direction of root node, and children for children direction.

But, if the package can't 'show' some nodes, it will add hasSubTree mark. You can find how it works here https://sanichkotikov.github.io/react-family-tree-example/ (Small rectangles on top right corner of a node. Click on it and you change a root.)

[trydalch]

Thanks for being responsive. Appreciate it.

I did see the option to have a clickable button for subtrees. I'll look into it.

Ideally though, I would like to be able to see the entire relationship at once. What would it take to add this functionality? How would you recommend implementing this functionality? I've forked your repo. I'm open to contributing.

[SanichKotikov]

As you see, not all relation can be rendered, there is just no space for them. So I just drop the idea to write a collision resolver, to save my time, and performance & size of the package. Sorry, but I don't have any idea right now.

[SanichKotikov]

The same issue might be to reduce these spaces:

[trydalch]

That makes a lot more sense now. Seems like it would be valuable parameterize it and give the option to render all nodes (and ignore collisions) for the time being.

Just a boolean or something as one of the options that can be passed in.

[DenisLebedinsky]

I have the same problem (. And I try to understend what i can change to show full tree

[Bodicj]

I have the same problem.

I have the same problem (. And I try to understend what i can change to show full tree

Did you find the solution?

[fcsonline]

I'm also interested to show the full tree. Can we help to find a solution?

[fcsonline]

After trying to implement by myself an algorithm to be able to render the full tree I reached a point quite similar to @SanichKotikov previous comments. There are some constraints that I think are impossible to overcome if you try to render this graph. If you want to keep partners together, siblings at the same level + not willing to have relation lines that cross themselves there is no solution.

I think that you end up doing some graph theory :sweat_smile:

https://en.wikipedia.org/wiki/Crossing_number_(graph_theory)

It is sad to reach this point, because I wanted for a long time to print a family tree on paper as a gift for a family member, but I don't know how to move forward.