Reload data from api endpoint

[rmrf-run]

Great component you have created. I have managed to hack my way around and create a dynamic endpoint which i can use to create the network graph with nodes, edges, layouts etc. Just wondering if there is a simple method to reload the data from the endpoint with a defined interval.

I don't want to reload the entire page but just this single component with updated information. This will be used on a wall mounted tv to display real time network speeds, nodes, etc so any changes on the endpoint need to be reloaded in network graph component.

Something like

Onload -> call api endpoint then draw the network graph
Defined interval -> call api endpoint to get updated network data
.
.
.
Defined interval -> call api endpoint to get updated network data

[dash14]

Hi @rmrf-run, Thanks for using v-network-graph! If you make the data you pass to the v-network-graph component reactive, just change that data directly. The component detects changes and automatically updates the display. A simple example is shown below.

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as vNG from "v-network-graph";

interface Topology {
  nodes: vNG.Nodes;
  edges: vNG.Edges;
  layouts: vNG.Layouts;
}

const graph = ref<vNG.Instance>();
const data = ref<Topology>(getData1());

const currentNumber = ref(1);

onMounted(() => {
  // Start periodic timer
  setInterval(() => {
    // Replace nodes, edges, layouts
    data.value = download();
  }, 5000);
});

function download() {
  // emulate downloading topology data
  currentNumber.value += 1;
  if (currentNumber.value % 2 === 0) {
    return getData2()
  } else {
    return getData1()
  }
}

function getData1(): Topology {
  return {
    nodes: {
      node1: { name: "Node 1" },
      node2: { name: "Node 2" },
      node3: { name: "Node 3" },
    },
    edges: {
      edge1: { source: "node1", target: "node2" },
      edge2: { source: "node2", target: "node3" },
      edge3: { source: "node3", target: "node1" },
    },
    layouts: {
      nodes: {
        node1: { x: 80, y: 0 },
        node2: { x: 160, y: 100 },
        node3: { x: 0, y: 100 },
      },
    },
  };
}

function getData2(): Topology {
  return {
    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: "node1" },
      edge4: { source: "node2", target: "node4" },
      edge5: { source: "node3", target: "node4" },
    },
    layouts: {
      nodes: {
        node1: { x: 80, y: 0 },
        node2: { x: 160, y: 100 },
        node3: { x: 0, y: 100 },
        node4: { x: 80, y: 200 },
      },
    },
  };
}
</script>

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

I hope this is helpful.

[rmrf-run]

very helpful, i was able to create what i needed with that start, thanks again

[kogratte]

Hello guys!

Maybe a dumb question, but using a ref as dataSource, the graph is updated based on reactivity event, not on data, which cause strange behaviour once the graph is drawn.

Is there a way to force updating the graph only when the content has been updated?