Curve edges not working with "summarized" edges

[ObsidianDestroyer]

The following problem appears when using edge configuration:

{
...,
  edge: {
    type: "curve",
    summarize: true,
    label: {
      fontSize: 16,
      color: "black",
      margin: 20,
    },
    gap: (edges: Edges, configs: Configs) => {
      return Object.keys(edges).length * 12;
    },
    normal: {
      color: "rgba(157, 191, 255, 1)",
      dasharray: "0",
    },
    hover: {
      color: "rgb(116,169,255)",
    },
    margin: 3,
    marker: {
      target: {
        type: "arrow",
        width: 4,
        height: 4,
      },
    },
    summarized: {
      label: {
        fontSize: 32,
        color: "#4466cc",
      },
      shape: undefined,
      stroke: {
        width: 4,
        color: "rgba(157, 191, 255, 1)",
        linecap: "round",
      },
    },
  },
...,
}

I can assume that edges with type "summarized" simply do not support type "curve", could you fix or help me with style / svg overloading to fix this behavior? Thanks for the answer.

[ObsidianDestroyer]

And one more question.
Can you add the ability to match edges of a graph based on the number of edges? That is, if two nodes have more than 2 edges - make one edge with "summarized" type

[dash14]

Hi @ObsidianDestroyer, Thanks for your report! And sorry for the very late reply.

There appears to be a bug where summarized edge lines are not displayed correctly if margins are specified when curve config is enabled. I will try to fix it, but it will take a little longer. And, undefined cannot be specified for edge.summarized.shape in the configuration. Do you mean you want to hide the display of edge counts?

In response to your additional question. In the future, I would like to add the ability to style and summarize edges more flexibly, but unfortunately, it is difficult to add right away and will take some time yet.

One suggestion to solve the above bug, hide the number of edges, and to achieve flexible placement of summarized edges is to build the edges for display separately from the original edges. An example has been created below: https://codesandbox.io/p/sandbox/v-network-graph-multiple-summarized-edges-lvmf83?file=%2Fsrc%2FApp.vue%3A5%2C27

Although the generation of summarized edges is not based on the number of edges, but on the information that the edges have, I think the basic concept is the same. It also includes a code to display the number of edges for summarized edges, but this can be removed by deleting the relevant part.

I hope this helps.

[dash14]

The problem with summarized edges not displaying correctly has been fixed in v0.9.6. Thank you for your report!

[ObsidianDestroyer]

Hi, @dash14.

And, undefined cannot be specified for edge.summarized.shape in the configuration. Do you mean you want to hide the display of edge counts?

• yea, by this trick I had tried to remove shape which shows amount of connections.

Thanks for your answer and help!

[dash14]

Hi @ObsidianDestroyer, Thanks for your answer!

yea, by this trick I had tried to remove shape which shows amount of connections.

If so, you can also display only the lines by applying the following css:

<script setup lang="ts">
import { VStyle } from "v-network-graph";
// ...
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  >
    <v-style>
      .v-ng-line-summarized rect,
      .v-ng-line-summarized text {
        display: none;
      }
    </v-style>
  </v-network-graph>
</template>

Best Regards