Source code for ping demo

//
//     Copyright © 2011-2025 Cambridge Intelligence Limited.
//     All rights reserved.
//
//!    Use ping to highlight a node or link.
import KeyLines from "keylines";
import { data } from "./ping-data.js";

let chart;

function findAndPing(identifier) {
  // find the items associated with the button and ping them
  switch (identifier) {
    case "red":
      chart.ping("a", { c: identifier });
      break;
    case "green":
      chart.ping("b", { c: identifier });
      break;
    case "blue":
      chart.ping("c", { c: identifier });
      break;
    case "orange":
      chart.ping("a-b", { c: identifier });
      break;
    case "lightblue":
      chart.ping(["b-c", "c-b"], { c: "#5bc0de" });
      break;
    case "all":
      ["a", "b", "c", "a-b", "b-c", "c-b"].forEach((id) => {
        const item = chart.getItem(id);
        chart.ping(id, { c: item.c });
      });
      break;
    case "all3":
      ["a", "b", "c", "a-b", "b-c", "c-b"].forEach((id) => {
        const item = chart.getItem(id);
        chart.ping(id, {
          c: item.c,
          r: 20,
          w: 100,
          time: 1000,
          repeat: 3,
          lw: 30,
        });
      });
      break;
    default:
      break;
  }
}

function initialiseInteractions() {
  // listen for user clicks for each button
  Array.from(document.getElementsByClassName("ping")).forEach((el) => {
    el.addEventListener("click", () => {
      findAndPing(el.getAttributeNode("id").value);
    });
  });
}

async function loadKeyLines() {
  const options = {
    logo: { u: "/images/Logo.png" },
    handMode: true,
  };
  chart = await KeyLines.create({ container: "klchart", options });
  chart.load(data);
  chart.zoom("fit");
  // set up user interactions
  initialiseInteractions();
}

window.addEventListener("DOMContentLoaded", loadKeyLines);

<!DOCTYPE html>
<html lang="en" style="background-color: #2d383f;">
  <head>
    <meta charset="UTF-8">
    <title>Ping Items</title>
    <link rel="stylesheet" type="text/css" href="/css/keylines.css">
    <link rel="stylesheet" type="text/css" href="/css/minimalsdk.css">
    <link rel="stylesheet" type="text/css" href="/css/sdk-layout.css">
    <link rel="stylesheet" type="text/css" href="/css/demo.css">
    <link rel="stylesheet" type="text/css" href="/ping.css">
    <script src="/vendor/jquery.js" defer type="text/javascript"></script>
    <script id="keylines" src="/public/keylines.umd.cjs" defer type="text/javascript"></script>
    <script src="/ping.js" crossorigin="use-credentials" defer type="module"></script>
  </head>
  <body>
    <div class="chart-wrapper demo-cols">
      <div class="tab-content-panel flex1" id="lhs" data-tab-group="rhs">
        <div class="toggle-content is-visible" id="lhsVisual" style="width:100%; height: 100%;">
          <div class="klchart" id="klchart">
          </div>
        </div>
      </div>
      <div class="rhs citext closed" id="demorhscontent">
        <div class="title-bar">
          <svg viewBox="0 0 360 60" style="max-width: 360px; max-height: 60px; font-size: 24px; font-family: Raleway; flex: 1;">
            <text x="0" y="38" style="width: 100%;">Ping Items</text>
          </svg>
        </div>
        <div class="tab-content-panel" data-tab-group="rhs">
          <div class="toggle-content is-visible tabcontent" id="controlsTab">
            <form autocomplete="off" onsubmit="return false" id="rhsForm">
              <div class="cicontent">
                <p>Click on a button to ping the associated items</p>
                <hr>
                <input class="ping btn btn-block faded" type="button" value="Ping" id="red">
                <input class="ping btn btn-block faded" type="button" value="Ping" id="orange">
                <input class="ping btn btn-block faded" type="button" value="Ping" id="green">
                <input class="ping btn btn-block faded" type="button" value="Ping" id="lightblue">
                <input class="ping btn btn-block faded" type="button" value="Ping" id="blue">
                <hr>
                <input class="ping btn btn-block" type="button" value="All" id="all">
                <input class="ping btn btn-block" type="button" value="All x 3" id="all3">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div id="moreParent">
      <div id="moreContainer">
      </div>
    </div>
    <div id="lazyScripts">
    </div>
  </body>
</html>

.btn.btn-block.faded {
  opacity: 0.75;
  margin-top: 10px;
}
.btn.btn-block.faded:hover {
  opacity: 1;
  margin-top: 10px;
}
#red {
  color: white;
  background-color: red;
  border-color: red;
}
#orange {
  color: white;
  background-color: orange;
  border-color: orange;
}
#green {
  color: white;
  background-color: green;
  border-color: green;
}
#lightblue {
  color: white;
  background-color: #5bc0de;
  border-color: #5bc0de;
}
#blue {
  color: white;
  background-color: blue;
  border-color: blue;
}
#all3{
  margin-top: 10px;
}

Loading source