Make edit to a hierarchical object of nodes without loosing focus

[DarkMagus]

Introduction

I am developing a Fault tree using JointJS+ that communicates with a back-end server writing in Java. The fault tree is implemented as hierarchical object of nodes. Currently, I can request this hierarchical object from the back-end server and display it using JointJS+: The branches can be collapsed/expanded nicely.

The next step is to allow users to edit the fault tree.

Every time a node is created/edited, the back-end is doing the creation/edition as it adds things that the front-end cannot do; and once the edition is completed, the back-end returns back a new hierarchical object of nodes that contains all the previous nodes plus the newly created/edited node.

What I would like to achieve when I receive the new hierarchical object of nodes from the back-end is to edit the currently displayed fault tree without rebuilding the fault tree from scratch, and without loosing the focus on the node the user is working on it. Moreover, branches that were collapsed should remain collapsed, and the expanded ones should remain expanded.

My question is the following: is there a JointJS+ way to make a diff between the newly received hierarchical objects and the one that is already displayed in the JointJS+ paper, and apply only the diff to the existing JointJS+ paper?

Thanks

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

You can take a graph JSON and apply it to an existing graph with a function like this:

function updateGraphFromJSON(graph, json) {
    const updateCell = (id, attributes) => {
        const cell = graph.getCell(id);
        if (cell) {
            if (attributes) {
                const { attrs, ...rest } = attributes;
                cell.set(rest);
                // This is necessary, because the `attrs` object does not
                // contain the default attributes of the cell by default.
                // See `joint.dia.Cell.prototype.toJSON` method.
                // Alternatively, you can override the `toJSON` method in your custom shapes
                // to return the `attrs` as they are.
                cell.attr(attrs);
            } else {
                cell.remove({ disconnectLinks: true });
            }
        } else {
            if (!attributes) return;
            graph.addCell(attributes);
        }
    };
    // Remember the cells that are currently in the graph.
    const updatedCellsMap = new Map();
    graph.getCells().forEach(cell => updatedCellsMap.set(cell.id, cell.id));
    // Update the existing cells
    json.cells.forEach(({ id, ...attributes }) => {
        updateCell(id, attributes);
        // Mark the cell as updated
        updatedCellsMap.delete(id);
    });
    // Remove the remaining cells (they do not exist in the JSON)
    updatedCellsMap.forEach((id) => updateCell(id));
}

[DarkMagus]

@kumilingus Thanks for the code.
I tried it and I got the following error:

Uncaught Error: LinkView: invalid target cell.
at child.updateEndProperties (LinkView.mjs:895:1)
at child.confirmUpdate (LinkView.mjs:87:1)
at child.updateView (Paper.mjs:945:1)
at child.updateViewsBatch (Paper.mjs:1150:1)
at child.updateViewsAsync (Paper.mjs:1028:1)

Any idea of what may cause this exception?

Thanks

[DarkMagus]

@kumilingus
I found my issue and fixed it.

Thanks