gontrol/src/server/webapp/static/agents-graph.js

let agentData = [];
let isCyInitialized = false;
let cy;

function initializeCytoscape() {
  if (isCyInitialized) return;

  cy = cytoscape({
    container: document.getElementById('cyto-graph'),

    /* --- single, central stylesheet -------------------------------- */
    style: [
      /* base node look (shared) */
      /* background-opacity: 0 will remove the node color and background of the svg */
      {
        selector: 'node',
        style: {
          'width'              : 50,
          'height'             : 50,
          'label'              : 'data(name)',
          'text-outline-width' : 2,
          'text-outline-color' : '#333',
          'color'              : '#fff',
          'background-opacity' : 1,
          'background-color': '#f8f9fa'
        }
      },

      /* agent nodes — online / offline variants */
      {
        selector: 'node.online[type = "Agent"]',
        style: {
          'background-image' : 'url(static/img/computer-online.svg)',
          'background-fit'   : 'contain'
        }
      },
      {
        selector: 'node.offline[type = "Agent"]',
        style: {
          'background-image' : 'url(static/img/computer-offline.svg)',
          'background-fit'   : 'contain'
        }
      },

      /* target / server node */
      {
        selector: 'node.server',
        style: {
          'background-image' : 'url(static/img/server-online.svg)',
          'background-fit'   : 'contain'
        }
      },

      /* edge style */
      {
        selector: 'edge',
        style: {
          'width'             : 3,
          'line-color'        : '#ccc',
          'target-arrow-color': '#ccc',
          'target-arrow-shape': 'triangle'
        }
      },
      {
        selector: 'node.darkTheme',
        style   : { 'background-color': '#212529' }
      }
    ],

    layout: { name: 'grid', rows: 2 }
  });

  isCyInitialized = true;
}

// Load the graph after the page has fully loaded
document.addEventListener('DOMContentLoaded', function () {
    initializeCytoscape();
    loadGraphData();

    document.body.addEventListener('htmx:afterSwap', function (event) {
        if (event.target.id === 'agentList') {
            initializeCytoscape();
            loadGraphData();
        }
    });
});

// Load the graph after HTMX swap

async function updateGraph(agentData) {
  if (!cy) {
    console.error('Cytoscape not initialised');
    return;
  }

  cy.elements().remove();                // clear existing

  /* --- add agent nodes ------------------------------------------- */
  agentData.forEach(agent => {
    const id     = agent.agentId;
    const name   = agent.agentName;
    const online = agent.status === 'Connected';

    if (!id || !name) return;

    cy.add({
      group  : 'nodes',
      data   : {
        id   : id,
        name : name,
        type : 'Agent',
        ip   : agent.IPv4Address,
        status: agent.status
      },
      classes: online ? 'online' : 'offline'    //  ← only classes
    });
  });

  /* --- ensure target/server node exists --------------------------- */
  const targetId = 'g2';
  if (cy.getElementById(targetId).length === 0) {
    cy.add({
      group  : 'nodes',
      data   : { id: targetId, name: 'g2' },
      classes: 'server'
    });
  }

  /* --- connect every agent to the target ------------------------- */
  agentData.forEach(agent => {
    if (agent.agentId) {
      cy.add({
        group: 'edges',
        data : { source: agent.agentId, target: targetId }
      });
    }
  });

  /* --- relayout --------------------------------------------------- */
  cy.layout({ name: 'grid', rows: 2 }).run();
}

async function fetchData() {
    const url = "http://localhost:3333/agents";
    try {
        const response = await fetch(url, {headers: {Accept: 'application/json'}});
        if (!response.ok) {
            throw new Error(`Response status: ${response.status}`);
        }
        const data = await response.json();
        return data; // Return the fetched data
    } catch (error) {
        console.error(error.message);
        return []; // Return an empty array on error
    }
}

// Function to get agent data and update the graph
async function loadGraphData() {
    // console.log("Function loadGraphData()");

    // Fetch agent data asynchronously
    agentData = await fetchData();

    // Check if the data is valid
    // console.log('Extracted agent data:', agentData);

    // Only update the graph if agent data is available
    if (agentData && agentData.length > 0) {
        await updateGraph(agentData);
    } else {
        console.log('No agent data found or extracted.');
    }
}