Default shape always updates when a different node is selected

[pavelhoral]

I am trying to optimize huge graphs and I am not able to decipher what is going on with selectable nodes and the default node style. Whenever I select a node, it automatically updates every node in the graph (visible in Vue Dev Tools). This does not happen with custom node style (i.e. when using override-node slot).

How to reproduce:

• run locally vue-network-graph-docs and allow Vue Dev Tools with Highlight updates setting
• navigate to http://localhost:3000/v-network-graph/examples/appearance.html
• click on any node in the first example "Specifying style configurations by values"
  • selecting any node updates every other node - I am not sure which reactive part is responsible for that
• click on any node in the "Custom Node" example
  • selecting any node updates only the (de)selected node and it's edges (i.e. expected behavior)

This is not a big issue but I really would love to know why is this happening (already spent few hours on that with no luck).

[pavelhoral]

It seems it is reacting to click event... it might not be connected to the selection at all:

https://user-images.githubusercontent.com/2012726/185768120-24212e48-0218-4c63-a56c-4ab57d87559f.mp4

https://user-images.githubusercontent.com/2012726/185768121-418e4193-d31d-4caf-b814-0a1a7e4c0328.mp4

[dash14]

Hi @pavelhoral, Thank you for your detailed report. This is very curious behavior. As it turns out, I was not sure either.

I tried to check it while also changing some library internals. One of the conditions for the occurrence seems to be the existence of slots. As you mentioned above, this does not occur if a slot is specified. Even if that slot is not related to a node, it is the same. This means that the following code will also avoid this behavior.

<script setup lang="ts">
import { defineConfigs } from "v-network-graph";
import { reactive } from "vue";

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" },
});

const configs = defineConfigs({
  node: {
    selectable: false,
  },
});
</script>

<template>
  <v-network-graph
    class="graph"
    :nodes="nodes"
    :edges="edges"
    :configs="configs"
  >
    <!-- Just an empty slot that is not related to a node is fine -->
    <template #layer1></template>
  </v-network-graph>
</template>

<style>
.graph {
  width: 800px;
  height: 600px;
  border: 1px solid #000;
}
</style>

I don't yet know what causes this phenomenon or if there is a way around it. I will investigate further. If you have any findings, it would be appreciated if you could share them....

[pavelhoral]

That is strange. Maybe it is a bug or sideeffect of how Vue Dev Tools work... not sure how the highlight effect is implemented.

[dash14]

I don't know the exact cause, but to avoid this symptom, I have modified it to disable node customization if there is no slot for the library. Modifications: https://github.com/dash14/v-network-graph/commit/bb7421635c0b29bb0ec76ee15eb5d59658e6c5c8 Release: v0.6.8