Draw graph nodes

//--------------------
// node-group.vue
//--------------------
<template>
    <div v-for="(group, index) in nodeGroups" :key="index">
        <!-- Draw current node here -->
        <SingleNode :node="group.node" />

        <!-- If current node is a conditional node, draw its own branches -->
        <div v-if="group.node.type === 'conditional'">
            <div v-for="(childId, subIndex) in graph.adjacent(group.id)" :key="subIndex">
                <!-- Draw each branch of the conditional node recursively, each branch will be stopped at the lowest common ancestor node -->
                <NodeGroup :graph="graph" :rootNodeId="childId" :breakAtNodeId="nodeGroups[index+1].id" />
            </div>
        </div>
    </div>
</template>


<script type="text/javascript">
    Vue.extend({
        props: {
            graph: {
                type: Object,
                default: null
            },
            rootNodeId: {
                type: String,
                default: 'root-id'
            },
            breakAtNodeId: {
                type: String,
                default: null
            }
        },

        data() {
            allNodes: {
                nodeId1: { ... },
                nodeId2: { ... },
                ...
            }
        },

        computed: {
            nodeGroups: function() {
                const nodes = [];

                let currentNode = this.rootNodeId;
                let tmpNodes = [];

                // Using breath-search-first algorithm to traverse through the graph
                while (true) {
                    nodes.push({ id: currentNode, node: allNodes[currentNode] });

                    const outdegree = this.graph.outdegree(currentNode);
                    const children = this.graph.adjacent(currentNode);

                    // If node doesn't have any outdegree, it must be exit node, break
                    if (outdegree === 0) {
                        break;
                    }

                    // If node has only one child (not a conditional node), move to next node
                    else if (outdegree === 1) {
                        currentNode = children[0];
                    }

                    // If node has more than one children, it is a conditional node
                    // We have to move to the lowest common ancestor
                    else {
                        currentNode = this.graph.lowestCommonAncestors(children[0], children[1]);
                    }

                    // If currentNode is null or empty array, that means each branch of conditional exit its own path
                    // There is no common ancestor for them, then we don't go further
                    if (!currentNode || currentNode.length === 0) {
                        break;
                    }

                    // Also if currentNode is equal to breakAtNodeId, we don't go further too
                    // This keeps the conditional branch stopped at the lowest common ancestor node so we don't draw duplicated
                    if (currentNode === this.breakAtNodeId) {
                        break;
                    }
                }

                return nodes;
            }
        },

        methods: {

        }
    });
</script>