Position only the label of a parent node over the edge to a children node in Cytoscape.js

I am trying to create a compound node in Cytoscape.js with labels and an edge from the child node to another node. If you run the snippet below and move the b north of a, you see that the label of a is below the edge between b and a-1, which I don’t want.

I could set z-compound-depth of a and a-1 to top, but then the edge would not be visible inside of a.

I want to position the edge on top of a, but below the label of a. How can I achieve this?

cytoscape({
  container: document.querySelector(".graph"),
  elements: [
    {
      data: {
        id: "a",
      },
    },
    {
      data: {
        id: "a-1",
        parent: "a",
      },
    },
    {
      data: {
        id: "b",
      },
    },
    {
      data: {
        id: "a-1 -> b",
        source: "a-1",
        target: "b",
      },
    },
  ],
  style: [
    {
      selector: "node",
      style: {
        label: "data(id)",
      },
    },
    {
      selector: "#a,#a-1",
      style: {
        // "z-compound-depth": "top", // moves the edge below the a label, but also below the a node
      },
    },
  ],
});

body {
  margin: 0;
}

.graph {
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.0/cytoscape.min.js"></script>
<div class="graph"></div>

Answer

I know this does not answer your question. But you ask for something that is not simple and efficient to achieve. If you only need better visualization, applying line-opacity to the edge’s line style is an alternate approach.

cytoscape({
  container: document.querySelector(".graph"),
  elements: [
    {
      data: {
        id: "a",
      },
    },
    {
      data: {
        id: "a-1",
        parent: "a",
      },
    },
    {
      data: {
        id: "b",
      },
    },
    {
      data: {
        id: "a-1 -> b",
        source: "a-1",
        target: "b",
      },
    },
  ],
  style: [
    {
      selector: "node",
      style: {
        label: "data(id)",
      },
    },
{
  selector: "edge",
  style: {
    label: "",
    "line-color": "red",
    "line-opacity": 0.5
  },
},
    {
      selector: "#a,#a-1",
      style: {
        // "z-compound-depth": "top", // moves the edge below the a label, but also below the a node
      },
    },
  ],
});

body {
  margin: 0;
}

.graph {
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.0/cytoscape.min.js"></script>
<div class="graph"></div>