[Bug]: antv-dagre layout doesn't work on collapsed combos

[TonyIvanova]

Describe the bug / 问题描述

When using antv-dagr layout on initially collapsed combos - combos show on top of each other.
When opening combo - nodes show on top of each other.

Is there a layout that works on collapsed combos or some workaround for this issue?

Appreciate your help

Steps to Reproduce the Bug or Issue / 重现步骤

You can paste this code here: https://g6.antv.antgroup.com/en/examples/layout/dagre#antv-dagre-combo
to see it.

import { Graph } from '@antv/g6';

const data = {
  "nodes": [
    {
      "id": "0", 
       "combo": "A"
    },
    {
      "id": "1",
       "combo": "A"
    },
    {
      "id": "2", 
       "combo": "A"
    },
    {
      "id": "3", 
       "combo": "A"
    },
    {
      "id": "4",
      "combo": "A"
    },
    {
      "id": "5",
      "combo": "B"
    },
    {
      "id": "6",
      "combo": "A"
    },
    {
      "id": "7",
      "combo": "C"
    },
    {
      "id": "8",
      "combo": "C"
    },
    {
      "id": "9",
      "combo": "A"
    },
    {
      "id": "10",
      "combo": "B"
    },
    {
      "id": "11",
      "combo": "B"
    }
  ],
  "edges": [
    {
      "id": "edge-102",
      "source": "0",
      "target": "1"
    },
    {
      "id": "edge-161",
      "source": "0",
      "target": "2"
    },
    {
      "id": "edge-237",
      "source": "1",
      "target": "4"
    },
    {
      "id": "edge-253",
      "source": "0",
      "target": "3"
    },
    {
      "id": "edge-133",
      "source": "3",
      "target": "4"
    },
    {
      "id": "edge-320",
      "source": "2",
      "target": "5"
    },
    {
      "id": "edge-355",
      "source": "1",
      "target": "6"
    },
    {
      "id": "edge-823",
      "source": "1",
      "target": "7"
    },
    {
      "id": "edge-665",
      "source": "3",
      "target": "8"
    },
    {
      "id": "edge-884",
      "source": "3",
      "target": "9"
    },
    {
      "id": "edge-536",
      "source": "5",
      "target": "10"
    },
    {
      "id": "edge-401",
      "source": "5",
      "target": "11"
    }
  ],
  "combos": [
    {
      "id": "A",
      "style": {
        "type": "rect", 
        collapsed: true, 
      }
    },
    {
      "id": "B",
      "style": {
        "type": "rect",
        collapsed: true, 
      }
    },
    {
      "id": "C",
      "style": {
        "type": "rect",
        collapsed: true, 
      }
    }
  ]
}
    const graph = new Graph({
      container: 'container',
      autoFit: 'center',
      data,

      combo: {
        type: 'rect',
        style: {
          radius: 8,
          labelText: (d) => d.id,
        },
      },
      layout: {
        type: 'antv-dagre',
        ranksep: 50,
        nodesep: 5,
        sortByCombo: true,
      },
      behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
    });

    graph.render();
  

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[petercat-assistant]

The issue you're experiencing with the antv-dagre layout not working properly on initially collapsed combos is a known challenge when dealing with graph layouts and collapsed elements. Here are a few suggestions and workarounds you might consider:

1. Alternative Layouts: While antv-dagre is a popular layout, it might not handle collapsed combos as expected. You could try other layouts like force or circular to see if they provide better results with collapsed combos.

2. Custom Layout Adjustment: You can manually adjust the positions of the nodes and combos after the layout calculation. This involves listening to the afterlayout event and repositioning the combos or nodes as needed.

3. Expand Before Layout: As a workaround, you could temporarily expand all combos before applying the layout and then collapse them again after the layout is complete. This ensures that the layout algorithm considers all nodes and edges.

4. Custom Layout Plugin: If none of the existing layouts meet your needs, you might consider writing a custom layout plugin that specifically handles collapsed combos.

5. Community and Support: Consider reaching out to the community or checking if there are any updates or plugins that address this specific issue.

If you need further assistance or have specific questions about implementing any of these suggestions, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[TonyIvanova]

@petercat-assistant, how would you approach custom layout adjustment in this case? Could you, please, give a basic example? Also is it possible to set x and y positions for combos from data?

[petercat-assistant]

To approach custom layout adjustment for handling collapsed combos, you can manually set the positions of nodes and combos after the layout calculation. Here's a basic example of how you might achieve this:

Custom Layout Adjustment Example

1. Listen to the afterlayout Event: After the layout is applied, you can adjust the positions of the nodes and combos.

2. Set Positions Manually: Use the graph.updateCombo or graph.updateItem methods to set the positions.

Here's a basic example:

import { Graph } from '@antv/g6';

const data = {
  nodes: [
    { id: '0', combo: 'A' },
    { id: '1', combo: 'A' },
    // ... other nodes
  ],
  combos: [
    { id: 'A', style: { type: 'rect', collapsed: true } },
    // ... other combos
  ],
  edges: [
    { source: '0', target: '1' },
    // ... other edges
  ],
};

const graph = new Graph({
  container: 'container',
  autoFit: true,
  data,
  layout: {
    type: 'antv-dagre',
    ranksep: 50,
    nodesep: 5,
    sortByCombo: true,
  },
  behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas', 'collapse-expand'],
});

graph.on('afterlayout', () => {
  // Manually adjust positions
  graph.updateCombo('A', { x: 100, y: 100 });
  // You can also update nodes if needed
  graph.updateItem('0', { x: 150, y: 150 });
});

graph.render();

Setting x and y Positions for Combos from Data

Yes, you can set x and y positions for combos directly from the data. You need to include x and y properties in your combo data:

const data = {
  nodes: [
    { id: '0', combo: 'A' },
    { id: '1', combo: 'A' },
    // ... other nodes
  ],
  combos: [
    { id: 'A', x: 100, y: 100, style: { type: 'rect', collapsed: true } },
    // ... other combos
  ],
  edges: [
    { source: '0', target: '1' },
    // ... other edges
  ],
};

By setting the x and y properties in the combo data, you can control their initial positions when the graph is rendered.

If you have further questions or need more detailed examples, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[TonyIvanova]

This approach doesn't work because updateCombo doesn't exist. Can someone else help me with this issue?

[zhongyunWan]

Currently, when the combo is set to { collapse: true }, there is an issue where the antv-dagre layout fails to function properly. This is a bug. You can temporarily resolve this problem by setting the combo configuration to { collapse: false }. We plan to comprehensively redesign the combo layout-related content in the future.

[TonyIvanova]

Thanks for your answer!

Temporary workaround that worked for me is to initially set collapsed: false and then on grapch.on('afterrender') collapse all combos.

graph.on('afterrender', () => 
{ graph.getComboData()?.forEach((combo) => graph.collapseElement(combo?.id));
}); 

If you hide the canvas before it's rendered - it looks like the layout worked.

[RackweLLizm]

Currently, when the combo is set to { collapse: true }, there is an issue where the antv-dagre layout fails to function properly. This is a bug. You can temporarily resolve this problem by setting the combo configuration to { collapse: false }. We plan to comprehensively redesign the combo layout-related content in the future.

@zhongyunWan Hello;

When you apply comboCombined layout in antv g6 v4.x (I apply it with graph.updateLayout) if the combos are collapsed as you said, the comboCombined layout does not change the location and order of the combos.

This problem is solved simply as follows;
graph.updateLayout(comboCombined ...)
graph.render();

If I call the graph.render method, the layout is created immediately, but since I have called the graph.render method before, when I call it again, some problems occur in the graph. For example, if I add a node/edge to the graph later, they do not appear, etc.

Is there an easy way to overcome this problem?

What kind of problems does the graph.render method cause when called twice in v4 and is there a solution?