Is there a way to group edges with the same source and target into a single edge?

[TonyIvanova]

Is there a way to group edges that go from the same source to the same target (when combos are collapsed) into a single edge with a different thickness and a combined title?

[petercat-assistant[bot]]

In the latest version of G6, you can achieve the grouping of edges with the same source and target into a single edge by using custom rendering logic. Here's a general approach to achieve this:

1. Custom Edge Rendering: You can define a custom edge type that checks for multiple edges between the same source and target. When such edges are detected, you can render them as a single edge with a different thickness and a combined title.

2. Edge Aggregation: Before rendering, you can preprocess the data to aggregate edges with the same source and target. This involves creating a new edge with properties like count to represent the number of original edges, and titles to combine the titles of the original edges.

3. Update Edge Style: Use the updateItem method to change the style of the edge, such as thickness, based on the aggregated data.

Here's a basic example of how you might implement this:

// Assuming you have a graph instance
graph.on('afterlayout', () => {
  const edges = graph.getEdges();
  const edgeMap = {};

  edges.forEach(edge => {
    const source = edge.getSource().getID();
    const target = edge.getTarget().getID();
    const key = `${source}-${target}`;

    if (!edgeMap[key]) {
      edgeMap[key] = {
        count: 0,
        titles: [],
        edge
      };
    }

    edgeMap[key].count += 1;
    edgeMap[key].titles.push(edge.getModel().label);
  });

  Object.values(edgeMap).forEach(({ count, titles, edge }) => {
    if (count > 1) {
      graph.updateItem(edge, {
        style: {
          lineWidth: count, // Adjust thickness based on count
        },
        label: titles.join(', ') // Combine titles
      });
    }
  });
});

This code snippet demonstrates how to aggregate edges and update their styles based on the number of edges between the same source and target. You can customize the logic further to fit your specific requirements.

If you need more detailed guidance or have specific requirements, 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 getEdges method does not exist. And even if we replace it with getEdgeData this approach still doesn't work properly. Probably because of how the graph is rendered.
Also afterlayout event doesn't work here because it's called only once when the graph is loaded. In this case it needs to be also updated each time when combo is collapsed or expanded.

[TonyIvanova]

@petercat-assistant is there a way to catch expand\collapse event on combo? From expanded combo class?

[petercat-assistant[bot]]

It seems like you've shared a detailed explanation on how to group edges with the same source and target into a single edge in G6. If you have any specific questions or need further clarification on any part of the process, feel free to ask! I'm here to help with any additional guidance or information you might need.

🪧 Tips

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

[petercat-assistant[bot]]

It seems like you've shared a detailed explanation on how to group edges with the same source and target into a single edge in G6. If you have any specific questions or need further clarification on any part of the process, feel free to ask! I'm here to help with any additional guidance or information you might need.

🪧 Tips

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

[TonyIvanova]

@petercat-assistant is there a way to catch expand\collapse event on combo? From expanded combo class?

[petercat-assistant[bot]]

In G6, you can catch the expand and collapse events on a combo by listening to the combo:expand and combo:collapse events. These events are emitted when a combo is expanded or collapsed. You can add event listeners to handle these events and perform actions accordingly.

Here's an example of how you can catch these events:

// Assuming you have a graph instance
graph.on('combo:expand', (evt) => {
  const combo = evt.item; // The combo that was expanded
  console.log('Combo expanded:', combo);
  // Perform actions when a combo is expanded
});

graph.on('combo:collapse', (evt) => {
  const combo = evt.item; // The combo that was collapsed
  console.log('Combo collapsed:', combo);
  // Perform actions when a combo is collapsed
});

In this example, when a combo is expanded or collapsed, the corresponding event listener is triggered, and you can access the combo item through evt.item. You can then perform any necessary actions based on the event.

If you need further assistance or have more specific requirements, 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 GraphEvent like that doesn't exist.

[petercat-assistant[bot]]

In G6, you can catch the expand and collapse events on a combo by listening to the combo:expand and combo:collapse events. These events are emitted when a combo is expanded or collapsed. You can add event listeners to handle these events and perform actions accordingly.

Here's an example of how you can catch these events:

// Assuming you have a graph instance
graph.on('combo:expand', (evt) => {
  const combo = evt.item; // The combo that was expanded
  console.log('Combo expanded:', combo);
  // Perform actions when a combo is expanded
});

graph.on('combo:collapse', (evt) => {
  const combo = evt.item; // The combo that was collapsed
  console.log('Combo collapsed:', combo);
  // Perform actions when a combo is collapsed
});

In this example, when a combo is expanded or collapsed, the corresponding event listener is triggered, and you can access the combo item through evt.item. You can then perform any necessary actions based on the event.

If you need further assistance or have more specific requirements, feel free to ask!

🪧 Tips

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