Discovering the depth of a node in GoJS

Question

Discovering the depth of a node in GoJS

I am currently working with a GoJS canvas where users can create nodes as they please, and the application needs to process these nodes in a specific sequence.

The GoJS documentation provides a method called gojsNodeObject.findTreeLevel(), which gives the level of a node in the diagram. This method has been functioning well for me, but recently I encountered an issue.

You can view my diagram on fiddle at http://jsfiddle.net/2pqretgu/1/

According to the current logic, the sequence being returned is

["s1", "s2", "s3", "s4", "i1", "i2", "i3", "j1", "j2", "j3", "i4", "j4"]

However, I would like the sequence to follow these rules:
- i1 should come before j1
- j1 should come before i2 and i3
- i2 and i3 should come before j2 and j3
- j4 should be last

In essence, I am trying to execute the nodes based on layers created by the layered layout without relying solely on the layout due to the possibility of user changes.

If anyone could provide assistance or guidance on this matter, it would be greatly appreciated.

javascript gojs

Answer 1

Answer №1

If the library implementation doesn't suit your needs, it's best to develop the logic yourself.

That's exactly what I did, check out this fiddle: https://jsfiddle.net/Ba2siK/8megtv0k/

I converted the nodes into a graph structure and recursively traversed it to determine the depth of each node. The resulting output is:

["s1", "s2", "i1", "j1", "s3", "s4", "i2", "i3", "j2", "j3", "i4", "j4"]

// Function to create a mapping of nodes and their children
const graph = {};
myDiagram.nodes.each(node => {
    graph[node.data.key] = flattenIterator(node.findNodesOutOf());
});

const nodesLevels = getNodesLevels(myDiagram);
const sortedLevelsInfo = Object.keys(nodesLevels).sort((a, b) => nodesLevels[a] - nodesLevels[b]);

console.log(nodesLevels);
console.log(sortedLevelsInfo);
// Output: ["s1", "s2", "i1", "j1", "s3", "s4", "i2", "i3", "j2", "j3", "i4", "j4"]

// Convert an iterator to an array for better readability
function flattenIterator(collection) {
    const items = [];
    var it = collection.iterator;
    while (it.next()) {
        items.push(it.value);
    }

    return items;
}

function getNodesLevels(diagram) {
    const treeLevels = {};

    var nodeIterator = diagram.nodes.iterator;
    while (nodeIterator.next()) {
        findNodeLevel(graph, nodeIterator.value, treeLevels);
    }

    const maxLevel = Math.max(...Object.values(treeLevels));
    // Reverse the order of node depths as the deepest node starts from 0
    Object.keys(treeLevels).map((key, index) => {
        treeLevels[key] = maxLevel - treeLevels[key];
    });
    return treeLevels;
}

function findNodeLevel(graph, node, levels) {
    const key = node.data.key;

    if (!Object.keys(levels).includes(key)) {
        const child = graph[key];
        if (!child) {
            levels[key] = 0
        } else {
            if (child.length) {
                const childrenLevels = child.map(child => findNodeLevel(graph, child, levels) + 1);
                levels[key] = Math.max(...childrenLevels);
            } else {
                levels[key] = 0;
            }
        }
    }

    return levels[key];
}

Answer 2

If the library implementation doesn't suit your needs, it's best to develop the logic yourself.

That's exactly what I did, check out this fiddle: https://jsfiddle.net/Ba2siK/8megtv0k/

I converted the nodes into a graph structure and recursively traversed it to determine the depth of each node. The resulting output is:

["s1", "s2", "i1", "j1", "s3", "s4", "i2", "i3", "j2", "j3", "i4", "j4"]

// Function to create a mapping of nodes and their children
const graph = {};
myDiagram.nodes.each(node => {
    graph[node.data.key] = flattenIterator(node.findNodesOutOf());
});

const nodesLevels = getNodesLevels(myDiagram);
const sortedLevelsInfo = Object.keys(nodesLevels).sort((a, b) => nodesLevels[a] - nodesLevels[b]);

console.log(nodesLevels);
console.log(sortedLevelsInfo);
// Output: ["s1", "s2", "i1", "j1", "s3", "s4", "i2", "i3", "j2", "j3", "i4", "j4"]

// Convert an iterator to an array for better readability
function flattenIterator(collection) {
    const items = [];
    var it = collection.iterator;
    while (it.next()) {
        items.push(it.value);
    }

    return items;
}

function getNodesLevels(diagram) {
    const treeLevels = {};

    var nodeIterator = diagram.nodes.iterator;
    while (nodeIterator.next()) {
        findNodeLevel(graph, nodeIterator.value, treeLevels);
    }

    const maxLevel = Math.max(...Object.values(treeLevels));
    // Reverse the order of node depths as the deepest node starts from 0
    Object.keys(treeLevels).map((key, index) => {
        treeLevels[key] = maxLevel - treeLevels[key];
    });
    return treeLevels;
}

function findNodeLevel(graph, node, levels) {
    const key = node.data.key;

    if (!Object.keys(levels).includes(key)) {
        const child = graph[key];
        if (!child) {
            levels[key] = 0
        } else {
            if (child.length) {
                const childrenLevels = child.map(child => findNodeLevel(graph, child, levels) + 1);
                levels[key] = Math.max(...childrenLevels);
            } else {
                levels[key] = 0;
            }
        }
    }

    return levels[key];
}

Discovering the depth of a node in GoJS

Answer №1

Similar questions

Tips for automatically closing a drop-down menu by clicking anywhere on the page

Ways to stop the click event from being triggered in JQuery

Pseudonym fields used for parsing JSON data

Generating CSV File using PHP, AJAX, and MySQL

What is the best way to create a dynamic text area that changes based on a dropdown selection?

Guide to forming a JavaScript array from nested JSON data

Facing issue with local redis session not functioning as intended

Who needs a proper naming convention when things are working just fine? What's the point of conventions if they don't improve functionality?

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Unable to access CommonModule in Angular 10 component loaded dynamically

Attempting to retrieve an element by its ID from a div that was dynamically loaded using AJAX

The art of posting with ExpressJS

Having images that are too large in size and using a high percentage can

Python Flask server struggling to find JavaScript and CSS files within index.html when paired with AngularJS frontend

What is the reason behind the sudden "explosion" in this simulation?

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Find the accurate street view on Google Maps URL without relying on computeheading

Unable to fetch information from the local host using an AJAX request and PHP script

Using jQuery to append text after multiple element values

When a user clicks on a link on my website, the value in a textbox on an external website will