[Critical!] Reactive failed. v-network-graph can not reactive properly.

[Luciennnnnnn]

See the following codes, when I update layouts, the edges do not change accordingly.

My situation is displaying a network graph from data of an HTTP request, it has the same issues as the following simple example.

code:

<script setup>
import { onMounted, reactive, ref} from 'vue';

const layouts = reactive({
  nodes: {
    node1: { x: 0, y: 0 },
    node2: { x: 50, y: 0 },
    node3: { x: 100, y: 0 },
    node4: { x: 150, y: 0 },
  },
})

const nodes = reactive({
    node1: { name: "Node 1" },
    node2: { name: "Node 2" },
    node3: { name: "Node 3" },
    node4: { name: "Node 4" },
  })

const edges = reactive({
    edge1: { source: "node1", target: "node2" },
    edge2: { source: "node2", target: "node3" },
    edge3: { source: "node3", target: "node4" }
  })

onMounted(() => {
  layouts.nodes = {
      node1: { x: 0, y: 0 },
      node2: { x: 50, y: 50 },
      node3: { x: 100, y: 0 },
      node4: { x: 150, y: 50 },
  }
})
</script>

<template>
  <v-network-graph
    v-model:layouts="layouts"
    :nodes="nodes"
    :edges="edges" />
</template>

[dash14]

Hi @LuoXin-s, Thank you for reporting the issue! Changing the position of each node was fine, but changing the entire layouts.nodes caused an anomaly in the internal state. I have fixed this issue and released v0.6.4.

Thank you also for presenting the smallest code that can be reproduced. It was very helpful.

Best Regards

[Luciennnnnnn]

@dash14 Thank you for your timely reply and solution, which greatly helped me! By the way, this library is so excellent. Both the documentation and issue resolution are perfect.

[dash14]

@LuoXin-s Thank you for praising my work! It is very motivating to me. Please continue your support.

[Luciennnnnnn]

@dash14 Hi, there is another problem occurring. I can not drag nodes if I bind layouts to v-network-graph now. It may be due to your fix of the reactive issue.

[dash14]

@LuoXin-s Hmm... I could not reproduce problem... Could you please provide the code that causes the problem? Is the code that causes the problem different from the code first presented?

[Luciennnnnnn]

@dash14 emm, maybe. I'll provide the code snippet later.

[Luciennnnnnn]

@dash14 Hi, after some ablation experiments, I found the exact case that caused the problem; see the code below:

<script setup>
import { onMounted, reactive, ref} from 'vue';

const data = ref({})

// or
// const data = ref({
//   layouts: {
//     nodes: {
//       node1: { x: 0, y: 0 },
//       node2: { x: 50, y: 0 },
//       node3: { x: 100, y: 0 },
//       node4: { x: 150, y: 0 },
//     },
//   },
//   edges: {
//     edge1: { source: "node1", target: "node2" },
//     edge2: { source: "node2", target: "node3" },
//     edge3: { source: "node3", target: "node4" }
//   }
// })

onMounted(() => {
  data.value = {
    layouts: {
      nodes: {
        node1: { x: 0, y: 0 },
        node2: { x: 50, y: 50 },
        node3: { x: 100, y: 0 },
        node4: { x: 150, y: 50 },
      },
    },
    nodes: {
      node1: { name: "Node 1" },
      node2: { name: "Node 2" },
      node3: { name: "Node 3" },
      node4: { name: "Node 4" },
    },
    edges: {
      edge1: { source: "node1", target: "node2" },
      edge2: { source: "node2", target: "node3" },
      edge3: { source: "node3", target: "node4" }
    }
  }
})
</script>

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

When there is no initial value of nodes, then the drag ability disappears, a empty data is my use case.

[dash14]

@LuoXin-s Thank you for providing reproducible code! This helped to understand the problem. The case where the given props is not reactive and replaces the object was not considered. It was possible to address this problem, so it has been fixed and released. (v0.6.5) Thank you so much for your report!

Best Regards