Use another layout for "sub"nodes

[Extazx2]

Hello here

In my app, I want to give users the ability to swap layouts but I have "sub"-nodes that are always taken into account, and i'd like them to have their own layouts, for example "concentric" over their "parent node", but I don't know how to do this

Here is the use case :

I have nodes that represents let's say, all the computers in my house, and I have "metric nodes" for example "is my laptop charging ?".
Here is a draw.io that represents my data :

(alerts in this context, would be "battery under 10%" for example)

I have an option that allows me to display or hide the metrics through styling, but if they are displayed, the layouts is always taking them into account when rendering..

My goal is to have the Main layout taking my computers only, and having another sub layout for these metrics / sub-nodes, because I can possibly hide all these sub-nodes if I want to look at the computers only

I've tried using compound nodes and doing something like this :

const parentNodes = localCytoscapeInstance.nodes(":compound")
const childNodes = parentNodes.descendants()
if (parentNodes.length > 0) {
    const metricLayout = childNodes.layout(breadthfirstLayout)
    const parentLayout = parentNodes.layout(layout)
    parentLayout.promiseOn('layoutstop').then((event) => {
        metricLayout.run()
    })
    parentLayout.run()
}

But I only end up with results like this : (here layout is a basic avsdf layout, but if I go with the basic fcose / breadthfirst or whatever, it is not working)

If I ignore the compound nodes and run the avsdf layout for all the nodes, I end with this :

For reference, here the main nodes are the ones with images, and the sub-nodes / metrics are the one with only label

Thanks