samples/euler.html

<!doctype html>
<html>
  <head>
    <title>Sample</title>
    <style>
      #app {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
    </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="https://cdn.jsdelivr.net/npm/cytoscape-euler"></script>
    <script src="../build/index.umd.js"></script>
    <script>
      const cy = cytoscape({
        container: document.getElementById('app'), // container to render in

        layout: {
          name: 'euler',
          randomize: false,
          animate: false,

          // some more options here...
        },

        style: [
          {
            selector: 'node',
            style: {
              'background-color': '#126814',
            },
          },
          {
            selector: 'node[sbgnlabel]',
            style: {
              label: 'data(sbgnlabel)',
            },
          },
          {
            selector: 'edge',
            style: {
              'line-color': '#126814',
              opacity: 0.5,
            },
          },

          {
            selector: ':selected',
            style: {},
          },
        ],

        elements: fetch('https://cytoscape.org/cytoscape.js-euler/example-graphs/planar-chain.json').then((res) =>
          res.json()
        ),
      });
      cy.ready(() => {
        const bb = cy.bubbleSets();
        const atp = cy.nodes().filter(`[sbgnlabel = 'ATP']`);
        bb.addPath(atp, null, cy.nodes().diff(atp).left, {
          virtualEdges: true,
          style: {
            fill: 'rgba(255, 0, 0, 0.2)',
            stroke: 'red',
          },
        });
        const edges = cy.$('node#glyph20').connectedEdges();
        const nodes = edges.connectedNodes();
        bb.addPath(nodes, edges, cy.nodes().diff(nodes).left, {
          virtualEdges: true,
          style: {
            fill: 'rgba(70, 130, 180, 0.2)',
            stroke: 'steelblue',
          },
        });
      });
    </script>
  </body>
</html>