A way to nest nodes inside nodes?

Question

I have the following nodes:

Nodes_Used = ["node 1", "node 2", "node A", "node B", "node C"]

I want to create a representation where, I have a directed graph, with the edge (arrow) going from "node 1" to "node 2". I want to be able to pan inside or click on node 1, and then be able to see a directed graph of "node A" to "node B", "node B" to "node C", and "node C" to "node A".

I managed to achieve this using, but this is not what I want. The nodes "node A", "node B", and "node C" should be inside of "node 1", not two separate graph theories.

Here is the code I used:

from pyvis.network import Network
import networkx as nx
import webbrowser

# Create a Pyvis network
nt = Network(height="800px", width="1600px", notebook=True, directed=True)

# Add nodes
nt.add_node("Node 1")
nt.add_node("Node 2")
nt.add_node("Node A")
nt.add_node("Node B")
nt.add_node("Node C")

# Add edges
nt.add_edge("Node 1", "Node 2")
nt.add_edge("Node A", "Node B")
nt.add_edge("Node B", "Node C")
nt.add_edge("Node C", "Node A")

# Create clusters
nt.add_node("Cluster 1", shape="box", borderWidth=2, color="cyan")

# Add nodes to clusters
nt.add_node("Node A", group="Cluster 1")
nt.add_node("Node B", group="Cluster 1")
nt.add_node("Node C", group="Cluster 1")

# Add edges within clusters
nt.add_edge("Node A", "Node B", group="Cluster 1", hidden=True)
nt.add_edge("Node B", "Node C", group="Cluster 1", hidden=True)
nt.add_edge("Node C", "Node A", group="Cluster 1", hidden=True)

# Configure the options
nt.set_options("""
var options = {
  "physics": {
    "enabled": true,
    "stabilization": {
      "enabled": true,
      "iterations": 100,
      "updateInterval": 25
    }
  },
  "hierarchicalLayout": {
    "enabled": true,
    "direction": "LR"
  }
}
""")

# Add JavaScript code to show/hide edges within cluster
nt.add_node("Node 1", title="Click to toggle edges within Cluster 1", borderWidth=2, color="blue")
nt.add_node("Node 2", hidden=True)
nt.add_edge("Node 1", "Node 2", hidden=True)

# JavaScript code to toggle edges
javascript_code = """
document.getElementById("Node 1").onclick = function() {
    var edges = network.getConnectedEdges("Node 1");
    for (var i = 0; i < edges.length; i++) {
        var edgeId = edges[i];
        var edge = network.body.data.edges.get(edgeId);
        if (edge.group === "Cluster 1") {
            if (edge.hidden) {
                edge.hidden = false;
                edge.color = "blue";
            } else {
                edge.hidden = true;
            }
            network.body.data.edges.update(edge);
        }
    }
}
"""

# Show the graph and open in browser
nt.show("nested_edges_interactive_graph.html")

# Add JavaScript code to the generated HTML file
with open("nested_edges_interactive_graph.html", "r+") as file:
    html_code = file.read()
    html_code = html_code.replace("</head>", "<script>{}</script></head>".format(javascript_code))
    file.seek(0)
    file.write(html_code)
    file.truncate()

# Open the HTML file automatically
webbrowser.open_new_tab('nested_edges_interactive_graph.html')

I am open to using other libraries to achieve my desired goal, however I am having a difficult time achieving what I want.

Additionally, side question, would it be possible to transform the graph I want into an adjacency matrix? Given the nature of the graph I want to generate, I am thinking no, and cannot find any documentation saying that you can.