What javascript include files are needed to get layout extensions to work in cytoscape?

Question

Cytoscape Javascript graphing software comes with several built in layouts, but also other layouts that are created as 'extensions'. I tried to use the 'klay' layout, which is an extension, and I just get JavaScript errors. (the code I have works fine with built in layouts such as 'cose', but fails with extensions. Here are the include files I used:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"></script>
<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>   
<script type="text/javascript" src="scripts/cytoscape-klay.js"></script>

So what am I doing wrong here? Once I have the correct 'include' files, the code should work, because the use of layouts should be the same for built-in layouts as extension layouts. Thanks.

Answer 1

Following the demo, I got it to work just fine like this:

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    // demo your layout
    layout: {
      name: "klay"

      // some more options here...
    },

    style: [{
        selector: "node",
        style: {
          "background-color": "#dd4de2"
        }
      },

      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle",
          "line-color": "#dd4de2",
          "target-arrow-color": "#dd4de2",
          opacity: 0.5
        }
      }
    ],

    elements: {
      nodes: [{
          data: {
            id: "n0"
          }
        },
        {
          data: {
            id: "n1"
          }
        },
        {
          data: {
            id: "n2"
          }
        },
        {
          data: {
            id: "n3"
          }
        },
        {
          data: {
            id: "n4"
          }
        },
        {
          data: {
            id: "n5"
          }
        },
        {
          data: {
            id: "n6"
          }
        },
        {
          data: {
            id: "n7"
          }
        },
        {
          data: {
            id: "n8"
          }
        },
        {
          data: {
            id: "n9"
          }
        },
        {
          data: {
            id: "n10"
          }
        },
        {
          data: {
            id: "n11"
          }
        },
        {
          data: {
            id: "n12"
          }
        },
        {
          data: {
            id: "n13"
          }
        },
        {
          data: {
            id: "n14"
          }
        },
        {
          data: {
            id: "n15"
          }
        }
      ],
      edges: [{
          data: {
            source: "n0",
            target: "n1"
          }
        },
        {
          data: {
            source: "n1",
            target: "n2"
          }
        },
        {
          data: {
            source: "n1",
            target: "n3"
          }
        },
        {
          data: {
            source: "n2",
            target: "n4"
          }
        },
        {
          data: {
            source: "n4",
            target: "n5"
          }
        },
        {
          data: {
            source: "n4",
            target: "n6"
          }
        },
        {
          data: {
            source: "n6",
            target: "n7"
          }
        },
        {
          data: {
            source: "n6",
            target: "n8"
          }
        },
        {
          data: {
            source: "n8",
            target: "n9"
          }
        },
        {
          data: {
            source: "n8",
            target: "n10"
          }
        },
        {
          data: {
            source: "n10",
            target: "n11"
          }
        },
        {
          data: {
            source: "n11",
            target: "n12"
          }
        },
        {
          data: {
            source: "n12",
            target: "n13"
          }
        },
        {
          data: {
            source: "n13",
            target: "n14"
          }
        },
        {
          data: {
            source: "n13",
            target: "n15"
          }
        }
      ]
    }
  }));
});

body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}

<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

The demo normally uses the local cytoscape-klay file, so there should be no problem really. Is this code working for you?