topology-map/static/scripts/index.js

// import cola from 'cytoscape-cola';

async function getData() {
  try {
    const resp = await fetch("/api/data");
    if (!resp.ok) {
      throw new Error(`Response status: ${resp.status}`);
    }

    const json = await resp.json();
    return json;
  } catch (error) {
    console.error(error);
  }
}

function setupGraph() {

  getData()
    .catch(function (err) { console.error(err) })
    .then(function (elements) {

      var cy = window.cy = cytoscape({
        container: document.getElementById('map-container'),
        elements: elements,

        style: [ // the stylesheet for the graph
          {
            selector: 'node',
            style: {
              'background-color': '#E1F5FE',
              'border-color': '#03A9F4',
              'border-width': 0.5,
              'label': 'data(label)'
            }
          },

          {
            selector: 'edge',
            style: {
              'width': 1,
              'line-color': '#42A5F5',
              'target-arrow-color': '#1E88E5',
              'target-arrow-shape': 'none',
              'curve-style': 'bezier'
            }
          },
          {
            selector: ".link-virtual",
            style: {
              "line-color": "#BDBDBD",
              "line-style": "dashed",
            },
          },
          {
            selector: ".link-fast",
            style: {
              "width": 1.5,
              "line-color": "#1565C0",
            },
          },
          {
            selector: ".link-slow",
            style: {
              "line-color": "#FFC107",
            },
          },
          {
            selector: ".unmonitored",
            style: {
              "background-color": "#E57373",
              "border-color": "#C62828"
            }
          }
        ],

        layout: {
          name: 'cose',
          nodeDimensionsIncludeLabels: true,
        }
        // layout: {
        //   name: "cola",
        //   nodeDimensionsIncludeLabels: true,
        // }

      });
    });

}

document.addEventListener('DOMContentLoaded', setupGraph);