Bug: v-network-graph does not update for computed prop

[dashavoo]

Expected behaviour

Binding computed values to :nodes and :edges should result in the graph updating when the value of the computed changes.

Actual behaviour

The graph does not update, although the value of the computed has changed.

Example

• Clicking the button in the component below adds an item the reactive array whatsits.
• The list updates immediately.
• The graph does not exist (but in my actual project, if I navigate away and come back the change is visible).

<script setup lang="ts">
import { reactive, computed } from "vue"

const whatsits = reactive([{id: "blah", name: "hi there"}])
const edges = reactive({});
const addNode = function () {
  whatsits.push({id: "secondNode", name: "this works?"});
}

const nodes = computed(() => Object.fromEntries(whatsits.map(e => [e.id, { name: e.name }])));
</script>

<template>
  <button type="button" @click="addNode">Add node</button>
  <ul>
    <li v-for="n in whatsits" :key="n.id">{{ n.name }} is {{ nodes[n.id] ? "in" : "not in" }} "nodes"</li>
  </ul>
  <v-network-graph :nodes="nodes" :edges="edges" />
</template>

(Sorry for originally submitting this as an empty issue - my finger slipped.)

[dash14]

Hi @dashavoo,

Thank you for your detailed report. The minimal code to reproduce the problem you provided, helped me to quickly identify the issue point. Thank you very much!

I've made a fix, please try a newer version. (v0.3.17).

[dashavoo]

Thank you @dash14, you reacted really quickly to the bug report. ForceLayout (with non-default settings) isn't working after the fix, but everything else works fine.

If you modify my previous example slightly to this:

<script setup lang="ts">
import { reactive, computed } from "vue"
import { ForceLayout } from "v-network-graph/lib/force-layout";

const whatsits = reactive([{id: "blah", name: "hi there"}])
const edges = reactive({});
const addNode = function () {
  whatsits.push({id: "secondNode", name: "this works?"});
}

const configs = {
  view: {
    layoutHandler: new ForceLayout({
      positionFixedByDrag: true,
      positionFixedByClickWithAltKey: false,
      // * The following are the default parameters for the simulation.
      // * You can customize it by uncommenting below.
      createSimulation: (d3, nodes, edges) => {
        return d3.forceSimulation(nodes)
      },
    }),
  },
}

const nodes = computed(() => Object.fromEntries(whatsits.map(e => [e.id, { name: e.name }])));
</script>

<template>
  <button type="button" @click="addNode">Add node</button>
  <ul>
    <li v-for="n in whatsits" :key="n.id">{{ n.name }} is {{ nodes[n.id] ? "in" : "not in" }} "nodes"</li>
  </ul>
  <v-network-graph :nodes="nodes" :edges="edges" :configs="configs" />
</template>

and press the add button, you will see an error:

force.ts:119 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'links')
    at watch.deep (force.ts:119:20)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at Array.job (runtime-core.esm-bundler.js:1779:17)
    at flushPreFlushCbs (runtime-core.esm-bundler.js:328:31)
    at updateComponentPreRender (runtime-core.esm-bundler.js:5168:9)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5080:21)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160:29)
    at updateComponent (runtime-core.esm-bundler.js:4968:26)
    at processComponent (runtime-core.esm-bundler.js:4901:13)

However, if you comment out the customisation (lines 18, 19, 20) it works fine with the defaults.

[dash14]

Hi @dashavoo, Thank you for reporting the error. Oops, the code inside the library assumed that force("edge", ...) is specified.... I have fixed so that it will work without this configuration. Please use the new version (v0.3.18).

[dashavoo]

That has solved the issue! Thank you for the fast help and the really useful library!