samples/component.html

<!doctype html>
<html>
  <head>
    <title>Sample</title>
    <style>
      #app {
        width: 600px;
        height: 400px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-layers"></script>
    <script src="../build/index.umd.js"></script>
    <script>
      const cy = cytoscape({
        container: document.getElementById('app'), // container to render in

        boxSelectionEnabled: false,

        style: [
          {
            selector: 'node',
            css: {
              content: 'data(id)',
              'text-valign': 'center',
              'text-halign': 'center',
            },
          },
          {
            selector: ':parent',
            css: {
              'text-valign': 'top',
              'text-halign': 'center',
            },
          },
          {
            selector: 'edge',
            css: {
              'curve-style': 'bezier',
              'target-arrow-shape': 'triangle',
            },
          },
        ],

        elements: {
          nodes: [
            { data: { id: 'a', parent: 'b' }, position: { x: 215, y: 85 } },
            { data: { id: 'b' } },
            { data: { id: 'c', parent: 'b' }, position: { x: 300, y: 85 } },
            { data: { id: 'd' }, position: { x: 215, y: 175 } },
            { data: { id: 'e' } },
            { data: { id: 'f', parent: 'e' }, position: { x: 300, y: 175 } },
          ],
          edges: [{ data: { id: 'ad', source: 'a', target: 'd' } }, { data: { id: 'eb', source: 'e', target: 'b' } }],
        },

        layout: {
          name: 'preset',
          padding: 5,
        },
      });
      cy.ready(() => {
        const bb = cy.bubbleSets();
        const nodes = cy.nodes('#a, #d, #f');
        bb.addPath(nodes, undefined, cy.nodes('#c'), {
          drawPotentialArea: true,
        });
      });
    </script>
  </body>
</html>