Support Node diagram through ReactDOM.render

[Chetabahana]

U### Summary

Main Code: js/tree.js

var node, root, tree = {

    feed : function(id, size) {

        // Accessing _internalRoot && __reactInternalInstance$
        // https://szhshp.org/tech/2019/08/10/reactindepthrender.html
        // https://dev.to/carlmungazi/a-journey-through-reactdom-render-302c

        var graphiql = document.getElementById('graphiql');
        root = graphiql._reactRootContainer._internalRoot;
        console.dir(root.current);

        var container = graphiql.getElementsByClassName('graphiql-container')[0];
        node = tree.getReact(container);
        console.log(node.return);

        draw.getJSON();

    },

    getReact : function(dom) {

        // Obejct keys Iteration
        // https://stackoverflow.com/a/55310101/4058484
        // https://medium.com/@sitambas/get-global-element-state-a408a744e99d

        const getObjectKeys = (obj, prefix = '') => {
            return Object.entries(obj).reduce((collector, [key, val]) => {
                const newKeys = [ ...collector, prefix ? `${prefix}.${key}` : key ]
                if (Object.prototype.toString.call(val) === '[object Object]') {
                    const newPrefix = prefix ? `${prefix}.${key}` : key
                    const otherKeys = getObjectKeys(val, newPrefix)
                    return [ ...newKeys, ...otherKeys ]
                }
                return newKeys
            }, [])
        }

        let key = Object.keys(dom).find(key=>key.startsWith("__reactInternalInstance$"));
        //return getObjectKeys({a: 1, b: 2, c: { d: 3, e: { f: 4 }}});
        return dom[key];

    }

}

Checklist

1. Privileged views and APIs are guarded by proper permission checks.
2. All visible strings are translated with proper context.
3. All data-formatting is locale-aware (dates, numbers, and so on).
4. Database queries are optimized and the number of queries is constant.
5. Database migration files are up to date.
6. The changes are tested.
7. The code is documented (docstrings, project documentation).
8. GraphQL schema and type definitions are up to date.
9. Changes are mentioned in the changelog.

Reference

• How to add multiple CSS styles to an element with .css()
• assign new id attribute to each element created

Screenshots