Customizable threshold for summarized edges

[Krakoer]

Hi,

First, congrats for this great lib, very user-friendly and well-developed.

Are you planning on making the threshold at which edges start to get summarized customizable? I think it would be a useful quick win.

Thanks again

[dash14]

Hi @Krakoer,

Thank you for using v-network-graph!

The following ways can be used to adjust the threshold for summarizing edges. The callback of configs.edge.summarize is executed when two or more edges exist between nodes. Edges are summarized if the return value is true.

<script setup lang="ts">
import { defineConfigs, Edges } from "v-network-graph";
import data from "./data";

const configs = defineConfigs({
  edge: {
    summarize: (edges: Edges) => {
      console.log(edges);
      return Object.keys(edges).length > 4
    }
  }
});
</script>

<template>
  <v-network-graph
    :nodes="data.nodes"
    :edges="data.edges"
    :layouts="data.layouts"
    :configs="configs"
  />
</template>

// data.ts
import { Nodes, Edges, Layouts } from "v-network-graph"

const nodes: Nodes = {
  node1: { name: "N1" },
  node2: { name: "N2" },
  node3: { name: "N3" },
}

const edges: Edges = {
  edge1: { source: "node1", target: "node2" },
  edge2: { source: "node1", target: "node2" },
  edge3: { source: "node1", target: "node2" },
  edge4: { source: "node1", target: "node2" },
  edge5: { source: "node1", target: "node2" },
  edge6: { source: "node2", target: "node3" },
  edge7: { source: "node2", target: "node3" },
  edge8: { source: "node3", target: "node1" },
}

const layouts: Layouts = {
  nodes: {
    node1: { x: 50, y: 0 },
    node2: { x: 0, y: 75 },
    node3: { x: 100, y: 75 },
  },
}

export default {
  nodes,
  edges,
  layouts,
}

Best Regards

[Krakoer]

Thank you for the really quick answer! I'll keep the callback trick in mind for further customization.