Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

advice for dynamic data #3

Open
bidplayrepeat opened this issue Jun 28, 2021 · 7 comments
Open

advice for dynamic data #3

bidplayrepeat opened this issue Jun 28, 2021 · 7 comments
Labels
awaiting answer enhancement New feature or request help wanted Extra attention is needed

Comments

@bidplayrepeat
Copy link

IS there a way for changing the basic data variables dynamically (persons, links, unions) and the DAG automatically adjusts itself to new info. - for example if I add a person with the correct links in the appropriate [data.persons, data.unions, data.links]
new information should be auto updated in the dag. If not auto updated at least a refresh function to take care of new data.

Thanks for any help.

@BenPortner
Copy link
Owner

Hi @bidplayrepeat,

Sorry for getting back to you so late! Adding and removing nodes dynamically is a very cool idea, thanks for bringing it up! Unfortunately, realizing this with the current code structure is rather hard. Apart from the things you already mentioned, here are some more points that would need attention:

  1. All nodes (i.e. persons and unions) keep track of their surrounding nodes (parents, children and siblings) via the neighbors property. Thus, when dynamically inserting a node, the new node must list all neighboring nodes AND all neighboring nodes must list the new node in their respective neighbors properties. Luckily, there is a helper function getNeighbors, which should make this easier to realize.

  2. All nodes remember, which neighboring nodes and links they inserted (i.e. made visible) via the inserted_nodes and inserted_connections properties. This is what makes collapsing/expanding the graph work. Updating this information can get tricky if the newly added node is not a leaf node, see attached diagram.
    Untitled Diagram
    When adding node D, you will have to make sure that:

  • B.inserted_connections keeps 2, adds 4 and drops 3
  • B.inserted_nodes keeps C, adds D and drops E
  • D.inserted_connections = [5] and D.inserted_nodes =[E]
  1. Extra work is needed when inserting root nodes. Root nodes are nodes, which do not have a visible parent. All root nodes need to be listed in dag.children in order for the d3-dag dependency to work correctly. Furthermore, when inserting a root node, you would have to pick one of it's child nodes and add the root node to the child's inserted_roots property. This makes sure that dag.children is correctly updated when the user clicks on the child node.

These changes are necessary for sure - and there might be more that I missed 😅 In any case, dynamically adding nodes is a really nice feature but it will require substantial work. Currently, I do not have time to implement this but I'll be glad to help if someone picks it up!

Cheers,
Ben

@BenPortner BenPortner added enhancement New feature or request help wanted Extra attention is needed labels Jul 28, 2021
@bidplayrepeat
Copy link
Author

Hi Ben.

Thanks for replying. Let me see how I can modify the script. Thanks for your help. Anyway thanks for the directions

@bidplayrepeat
Copy link
Author

One more thing, instead of drawing a complete tree, would it be possible to draw a partial tree. say only max 2 up and max 2 down given a starting node.
or
alternatively given a starting node extract only [n] connected entities and then draw the DAG

Thanks for help

@BenPortner
Copy link
Owner

Hi @bidplayrepeat,

I am not sure I understand. Per default, when opening the familytree.html, only one node should be visible - the one defined by the start property in data.js. Only after clicking the start node, it's immediate neighbors should become visible, too. And when clicking on these neighbors, even more nodes should show up. This way, the graph can be explored one by one.

If you want more than one node to be visible from the start, one option would be to call uncollapse(root) before update(root) in the familytree.html. This will make the start node as well as it's immediate neighbors visible when opening the file.

Does this answer your question?

Cheers.
Ben

@bidplayrepeat
Copy link
Author

bidplayrepeat commented Sep 30, 2021 via email

@BenPortner
Copy link
Owner

Hi @bidplayrepeat,

Sorry that it took me so long to get back to you. I decided to do a major code restructuring to make tasks like the one you describe easier. This should now be possible with the new version of js_family_tree. Please note that the code has changed a lot so make sure you download the new version and familiarize yourself with it.

Regarding your question, I added new functionality to facilitate adding new nodes programmatically. The following code snippet demonstrates how to use the new functions:

        // insert svg object to hold the family tree
        const svg = d3.select("body").append("svg")
            .attr("width", document.body.offsetWidth)
            .attr("height", document.documentElement.clientHeight);

        // make family tree object
        FT = new FamilyTree(data, svg);

        // add an empty union to the root node
        const own_union = FT.root.add_own_union({});

       // add a child to the union
        own_union.add_child({
            "name": "Dan's first child",
            "birthyear": 1950
        });

        // add a partner to the union
        own_union.add_parent({
            "name": "Dan's wife",
            "birthyear": 1930,
        })

        // add a parent union to the root node
        const parent_union = FT.root.add_parent_union({});

       // add parents to the new union
        parent_union.add_parent({
            "name": "Dan's Father",
            "birthyear": 1900,
            "deathyear": 1990,
        });
        parent_union.add_parent({
            "name": "Dan's Mother",
            "birthyear": 1902,
            "deathyear": 2000,
        });

        // add a sibling
        parent_union.add_child({
            "name": "Dan's brother",
            "birthyear": 1928,
        });

        // draw the family tree
        FT.draw();

This example demonstrates how to add new nodes to the graph and how to re-draw the graph after. The only thing left to implement to get the behavior you describe is the user interface, i.e. the popups that ask you which kind of relation you want to insert and also input prompts that lets you enter names and other basic information. This shouldn't be too hard with d3 and/or jQuery. However, I leave this up to you, as I do not plan to make js_family_tree a tool for family tree creation. Instead, the focus shall remain on displaying existing family trees in a visually pleasing, interactive fashion. Hence, the preferred way to use js_family_tree is to enter all relevant data in the data/data.js before opening familytree.html. Nevertheless, I am curious to see your progress on this task! Keep me updated :)

Thanks for using js_family_tree. Let me know if you have any more questions.
Ben

@bidplayrepeat
Copy link
Author

bidplayrepeat commented Mar 23, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
awaiting answer enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants