how do I get all edges after collapsed

Does666 commented 4 years ago

I use the latest version of this plugin and see the amazing merge edges feature. When collapse one node, the edges from this nodes also collapse as an edge. Now, I could use cy.nodes() to get all collapsed nodes, that's ok. While using cy.edges() can't get collapsed edges, but got all edges.

So, how do I get all edges after collapsed?

hasanbalci commented 4 years ago

@Does666 Please correct me if I misunderstand you. Let's say you have 3 edges and when you collapse them into one edge and when you run cy.edges(), you get 3 edges instead of one collapsed edge. Actually, this shouldn't be the case, cy.edges() returns one collapsed edge in that case. If this is your problem, please can you provide a JSFiddle or JSBin demo to reproduce this issue?

Does666 commented 4 years ago

<!DOCTYPE >

<html>
  <head>
    <title>cytoscape-expand-collapse.js demo</title>

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"
    />

    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
    <script src="https://unpkg.com/layout-base/layout-base.js"></script>
    <script src="https://unpkg.com/cose-base/cose-base.js"></script>
    <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
    <script src="cytoscape-expand-collapse.js"></script>

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

      #cy {
        z-index: 999;
        width: 85%;
        height: 85%;
        float: left;
      }

      h1 {
        opacity: 0.5;
        font-size: 1em;
        font-weight: bold;
      }
    </style>

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

          ready: function () {
            var api = this.expandCollapse({
              layoutBy: {
                name: "cose-bilkent",
                animate: "end",
                randomize: false,
                fit: true,
              },
              fisheye: true,
              animate: false,
              undoable: false,
              groupEdgesOfSameTypeOnCollapse: true,
            });
            api.collapseAll();
          },

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

            {
              selector: ":parent",
              style: {
                "background-opacity": 0.333,
              },
            },

            {
              selector: "node.cy-expand-collapse-collapsed-node",
              style: {
                "background-color": "darkblue",
                shape: "rectangle",
              },
            },

            {
              selector: "edge",
              style: {
                width: 3,
                "line-color": "#ad1a66",
                "curve-style": "straight",
              },
            },

            {
              selector: "edge.meta",
              style: {
                width: 2,
                "line-color": "red",
              },
            },

            {
              selector: ":selected",
              style: {
                "border-width": 3,
                "border-color": "#DAA520",
              },
            },
          ],

          elements: [
            { data: { id: "a", parent: "p" }, group: "nodes" },
            { data: { id: "b", parent: "p" }, group: "nodes" },
            { data: { id: "c", parent: "p" }, group: "nodes" },
            { data: { id: "p" }, group: "nodes" },
            { data: { id: "d" }, group: "nodes" },
            {
              data: { id: "a-d", source: "a", target: "d", edgeType: "type1" },
              group: "edges",
            },
            {
              data: { id: "b-d", source: "b", target: "d", edgeType: "type1" },
              group: "edges",
            },
            {
              data: { id: "c-d", source: "c", target: "d", edgeType: "type1" },
              group: "edges",
            },
          ],
        }));
      });
    </script>
  </head>

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

Does666 commented 4 years ago

@hasanbalci I used the official demo, and changed my simple data. After run it, you will see two nodes p and 'd', and one edge p to d. Now run cy.edges() , you will get 3 edges.

hasanbalci commented 4 years ago

@Does666 In your example, when you collapse the compound node, the edges are not collapsed into one edge, since your curve-style is 'straight', all 3 edges seem on top of each other. That's why you get 3 edges. If you change curve-style to 'bezier', you can see all 3 edges. Extension doesn't collapse edges automatically unless any edge collapse function in the API is called.

iVis-at-Bilkent / cytoscape.js-expand-collapse

how do I get all edges after collapsed #102