Search

Combos: Reveal Links

Combos

Reveal underlying links between combos.

Combos: Reveal Links
View live example →

This demo shows you how to expose and examine the links between nodes in different combos.

When nodes are combined into a combo, their connections to the rest of the chart are replaced with 'combo links', shown here as dashed lines. Hiding those underlying links reduces chart clutter and keeps the view simple.

Sometimes, however, you may want to reveal the underlying links to show direct connections between nodes across combos.

Clicking on nodes will foreground their direct neighbours and reveal any underlying links. Clicking on a combo node will reveal all the underlying connections from that combo.

Key functions used:

import KeyLines from "keylines";
import { chartOptions } from "./data.js";

let chart;
let graphEngine;

function linkedToOpenCombo(linkId) {
  const link = chart.getItem(linkId);
  const node1 = chart.combo().find(link.id1);
  const node2 = chart.combo().find(link.id2);
  // Filter out non-combo ends of the link
  const linkEndCombos = [node1, node2].filter((id) => chart.combo().isCombo(id));
  // Return true only if one of the links is an open combo
  return linkEndCombos.some((comboId) => chart.combo().isOpen(comboId));
}

function selectionHandler() {
  // Get the current state
  const ids = chart.selection().filter((id) => chart.getItem(id).type === "node");
  if (ids.length > 0) {
    // Get, show (if required), and foreground the neighbours of the underlying items
    graphEngine.load(chart.serialize());
    // The method for getting neighbours of combos and noncombos is slightly different
    // So we have to use a different method for each
    const combos = ids.filter((id) => chart.combo().isCombo(id));
    const comboNeighbours = chart.graph().neighbours(combos);
    const nonCombos = ids.filter((id) => !chart.combo().isCombo(id));
    const nonComboNeighbours = graphEngine.neighbours(nonCombos);
    // Get all the links involved
    const links = comboNeighbours.links.concat(nonComboNeighbours.links);
    // And filter them such that they only include ones linked to an open combo.
    chart.combo().reveal(links.filter(linkedToOpenCombo));
    if (combos.length) {
      // This allows combos to become selected as there's no 'all' option for chart.foreground
      chart.foreground((item) => links.includes(item.id), { type: "link", items: "toplevel" });
    }
    if (nonCombos.length) {
      chart.foreground((item) => links.includes(item.id), { type: "link" });
    }
  } else {
    // No items selected, foreground everything
    chart.combo().reveal([]);
    chart.foreground(() => true);
  }
}

async function comboHandler(id) {
  const comboId = chart.combo().find(id) || id;
  const opts = { adapt: "inCombo" };

  if (chart.combo().isCombo(comboId)) {
    chart.foreground(() => true);
    chart.combo().reveal([]);
    if (chart.combo().isOpen(comboId)) {
      await chart.combo().close(comboId, opts);
    } else {
      await chart.combo().open(comboId, opts);
    }
  }
}

function doubleClickHandler({ preventDefault, id }) {
  if (chart.getItem(id)) {
    comboHandler(id);
    selectionHandler();
    preventDefault();
  }
}

async function startKeyLines() {
  chart = await KeyLines.create({
    container: "klchart",
    options: {
      drag: {
        links: false,
      },
      selectionColour: "#444",
      logo: { u: "/images/Logo.png" },
    },
  });

  graphEngine = KeyLines.getGraphEngine();

  // data is defined in reveallinks-data.js
  chart.load(chartOptions);

  // Setup UI
  chart.on("selection-change", selectionHandler);
  chart.on("double-click", doubleClickHandler);

  chart.layout("organic");
}

window.addEventListener("DOMContentLoaded", startKeyLines);
export const chartOptions = {
  type: "LinkChart",
  items: [
    {
      type: "link",
      id: "07610039694-07817341678",
      id1: "07610039694",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07869748073-07817341678",
      id1: "07869748073",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07869748073",
      id1: "07817341678",
      id2: "07869748073",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07279151148",
      id1: "07817341678",
      id2: "07279151148",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-07610039694",
      id1: "07817341678",
      id2: "07610039694",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07613917675",
      id1: "07817341678",
      id2: "07613917675",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-07771486427",
      id1: "07817341678",
      id2: "07771486427",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07587572122-07817341678",
      id1: "07587572122",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-07587572122",
      id1: "07817341678",
      id2: "07587572122",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-07758045718",
      id1: "07817341678",
      id2: "07758045718",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-07981267897",
      id1: "07817341678",
      id2: "07981267897",
      a2: true,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07394508492",
      id1: "07817341678",
      id2: "07394508492",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07394508492-07817341678",
      id1: "07394508492",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01887771702",
      id1: "07817341678",
      id2: "01887771702",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07312279168",
      id1: "07817341678",
      id2: "07312279168",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07541477895",
      id1: "07817341678",
      id2: "07541477895",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-3305122",
      id1: "07817341678",
      id2: "3305122",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01016394976",
      id1: "07817341678",
      id2: "01016394976",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01701659249",
      id1: "07817341678",
      id2: "01701659249",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01944462488",
      id1: "07817341678",
      id2: "01944462488",
      a2: true,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07758045718-07817341678",
      id1: "07758045718",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07641036117-07817341678",
      id1: "07641036117",
      id2: "07817341678",
      a2: true,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07279151148-07817341678",
      id1: "07279151148",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07771486427-07817341678",
      id1: "07771486427",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "01887771702-07817341678",
      id1: "01887771702",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-208",
      id1: "07817341678",
      id2: "208",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-044",
      id1: "07817341678",
      id2: "044",
      a2: true,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07817341678-07309001273",
      id1: "07817341678",
      id2: "07309001273",
      a2: true,
      off: 20,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "07817341678-07996736026",
      id1: "07817341678",
      id2: "07996736026",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07309001273-07817341678",
      id1: "07309001273",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "07817341678-07110730864",
      id1: "07817341678",
      id2: "07110730864",
      a2: true,
      off: 20,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "07817341678-3396625",
      id1: "07817341678",
      id2: "3396625",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01546219380",
      id1: "07817341678",
      id2: "01546219380",
      a2: true,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "9-07817341678",
      id1: "9",
      id2: "07817341678",
      a2: true,
      off: 0,
    },
    {
      type: "link",
      id: "07541477895-07817341678",
      id1: "07541477895",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07312279168-07817341678",
      id1: "07312279168",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_4",
    },
    {
      type: "link",
      id: "07110730864-07817341678",
      id1: "07110730864",
      id2: "07817341678",
      a2: true,
      off: 20,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "07817341678-07957853618",
      id1: "07817341678",
      id2: "07957853618",
      a2: true,
      parentId: "_combolink_2",
    },
    {
      type: "link",
      id: "07817341678-01265321865",
      id1: "07817341678",
      id2: "01265321865",
      a2: true,
      parentId: "_combolink_12",
    },
    {
      type: "link",
      id: "07981267897-07641036117",
      id1: "07981267897",
      id2: "07641036117",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-07541477895",
      id1: "07610039694",
      id2: "07541477895",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07641036117-07981267897",
      id1: "07641036117",
      id2: "07981267897",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07541477895-07610039694",
      id1: "07541477895",
      id2: "07610039694",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-07641036117",
      id1: "07610039694",
      id2: "07641036117",
      a2: true,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-07312279168",
      id1: "07610039694",
      id2: "07312279168",
      a2: true,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07641036117-07541477895",
      id1: "07641036117",
      id2: "07541477895",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07641036117-07771486427",
      id1: "07641036117",
      id2: "07771486427",
      a2: true,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07541477895-07641036117",
      id1: "07541477895",
      id2: "07641036117",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-07869748073",
      id1: "07610039694",
      id2: "07869748073",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-01265321865",
      id1: "07610039694",
      id2: "01265321865",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07869748073-07610039694",
      id1: "07869748073",
      id2: "07610039694",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "9-07110730864",
      id1: "9",
      id2: "07110730864",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "07610039694-01887771702",
      id1: "07610039694",
      id2: "01887771702",
      a2: true,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07981267897-07541477895",
      id1: "07981267897",
      id2: "07541477895",
      a2: true,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07981267897-07610039694",
      id1: "07981267897",
      id2: "07610039694",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07610039694-07981267897",
      id1: "07610039694",
      id2: "07981267897",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07771486427-07981267897",
      id1: "07771486427",
      id2: "07981267897",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07981267897-07771486427",
      id1: "07981267897",
      id2: "07771486427",
      a2: true,
      off: 20,
      parentId: "_combo_3",
    },
    {
      type: "link",
      id: "07110730864-07981267897",
      id1: "07110730864",
      id2: "07981267897",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07771486427-07110730864",
      id1: "07771486427",
      id2: "07110730864",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07110730864-01887771702",
      id1: "07110730864",
      id2: "01887771702",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07110730864-07309001273",
      id1: "07110730864",
      id2: "07309001273",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07309001273-07110730864",
      id1: "07309001273",
      id2: "07110730864",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "9-07839321359",
      id1: "9",
      id2: "07839321359",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07456622368",
      id1: "9",
      id2: "07456622368",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07607124303",
      id1: "9",
      id2: "07607124303",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07166594208",
      id1: "9",
      id2: "07166594208",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07086312446",
      id1: "9",
      id2: "07086312446",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07541486388",
      id1: "9",
      id2: "07541486388",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "9-07681546436",
      id1: "9",
      id2: "07681546436",
      a2: true,
      parentId: "_combolink_13",
    },
    {
      type: "link",
      id: "07110730864-07681546436",
      id1: "07110730864",
      id2: "07681546436",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07607124303-07839321359",
      id1: "07607124303",
      id2: "07839321359",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07541486388-07110730864",
      id1: "07541486388",
      id2: "07110730864",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-07610039694",
      id1: "07681546436",
      id2: "07610039694",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07839321359-07607124303",
      id1: "07839321359",
      id2: "07607124303",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-07641036117",
      id1: "07681546436",
      id2: "07641036117",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07641036117-07681546436",
      id1: "07641036117",
      id2: "07681546436",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07681546436-07981267897",
      id1: "07681546436",
      id2: "07981267897",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07456622368-01546219380",
      id1: "07456622368",
      id2: "01546219380",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07166594208-07681546436",
      id1: "07166594208",
      id2: "07681546436",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-07541477895",
      id1: "07681546436",
      id2: "07541477895",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07541486388-07641036117",
      id1: "07541486388",
      id2: "07641036117",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07981267897-07681546436",
      id1: "07981267897",
      id2: "07681546436",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07541477895-07681546436",
      id1: "07541477895",
      id2: "07681546436",
      a2: true,
      off: 20,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07086312446-07610039694",
      id1: "07086312446",
      id2: "07610039694",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07681546436-07110730864",
      id1: "07681546436",
      id2: "07110730864",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07166594208-044",
      id1: "07166594208",
      id2: "044",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07541477895-07541486388",
      id1: "07541477895",
      id2: "07541486388",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07541486388-07607124303",
      id1: "07541486388",
      id2: "07607124303",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-01546219380",
      id1: "07681546436",
      id2: "01546219380",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-07312279168",
      id1: "07681546436",
      id2: "07312279168",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07166594208-01546219380",
      id1: "07166594208",
      id2: "01546219380",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-01944462488",
      id1: "07681546436",
      id2: "01944462488",
      a2: true,
      parentId: "_combolink_14",
    },
    {
      type: "link",
      id: "07541486388-07086312446",
      id1: "07541486388",
      id2: "07086312446",
      a2: true,
      parentId: "_combo_11",
    },
    {
      type: "link",
      id: "07681546436-07166594208",
      id1: "07681546436",
      id2: "07166594208",
      a2: true,
      off: 20,
      parentId: "_combo_11",
    },
    {
      id: "9",
      type: "node",
      bw: 2,
      c: "#f58742",
    },
    {
      id: "208",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 172.10714859831597,
      y: 12.671123520453172,
      parentId: "_combo_1",
    },
    {
      id: "3305122",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 158.62548882265608,
      y: -63.78716846351777,
      parentId: "_combo_1",
    },
    {
      id: "3396625",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 197.44438101258342,
      y: -131.0234620300107,
      parentId: "_combo_1",
    },
    {
      id: "07817341678",
      type: "node",
      bw: 2,
      c: "#f58742",
    },
    {
      id: "07610039694",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -151.820658574012,
      y: 307.102901979116,
      parentId: "_combo_3",
    },
    {
      id: "07869748073",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -300.0628538447567,
      y: 182.71293060252393,
      parentId: "_combo_3",
    },
    {
      id: "07279151148",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 238.55666743231902,
      y: -12.23493372054859,
      parentId: "_combo_1",
    },
    {
      id: "07613917675",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 382.1745793543446,
      y: -63.78716846351787,
      parentId: "_combo_1",
    },
    {
      id: "07771486427",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -286.7916856265262,
      y: 257.9774656436626,
      parentId: "_combo_3",
    },
    {
      id: "07587572122",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 343.3556871644172,
      y: -131.0234620300107,
      parentId: "_combo_1",
    },
    {
      id: "07758045718",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 368.6929195786847,
      y: 12.671123520453072,
      parentId: "_combo_1",
    },
    {
      id: "07981267897",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -261.850047938767,
      y: 116.52640927358172,
      parentId: "_combo_3",
    },
    {
      id: "07394508492",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 270.4000340885003,
      y: -157.57714817109598,
      parentId: "_combo_1",
    },
    {
      id: "01887771702",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -190.03346448000164,
      y: 202.11408061840717,
      parentId: "_combo_3",
    },
    {
      id: "07312279168",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -80.0040751152467,
      y: 182.71293060252384,
      parentId: "_combo_3",
    },
    {
      id: "07541477895",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -93.27524333347714,
      y: 257.97746564366247,
      parentId: "_combo_3",
    },
    {
      id: "01016394976",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 258.7445529503156,
      y: -87.57714817109593,
      parentId: "_combo_1",
    },
    {
      id: "01701659249",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 313.89888188286625,
      y: -32.422819238545216,
      parentId: "_combo_1",
    },
    {
      id: "01944462488",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -190.03346448000164,
      y: 90.38731056789665,
      parentId: "_combo_3",
    },
    {
      id: "07641036117",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -228.24627038599127,
      y: 307.102901979116,
      parentId: "_combo_3",
    },
    {
      id: "044",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -118.21688102123635,
      y: 116.52640927358169,
      parentId: "_combo_3",
    },
    {
      id: "07309001273",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -156.9011862941343,
      y: -200.11408061840717,
      parentId: "_combo_11",
    },
    {
      id: "07996736026",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 231.581141898573,
      y: 62.5757293633388,
      parentId: "_combo_1",
    },
    {
      id: "07110730864",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -270.4000340885003,
      y: -313.6129284127733,
      parentId: "_combo_11",
    },
    {
      id: "01546219380",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -226.9011862941343,
      y: -188.4585994802225,
      parentId: "_combo_11",
    },
    {
      id: "07957853618",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 309.2189262784276,
      y: 62.5757293633388,
      parentId: "_combo_1",
    },
    {
      id: "01265321865",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -282.055515226685,
      y: -243.61292841277316,
      parentId: "_combo_11",
    },
    {
      id: "07839321359",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -350.6558390207564,
      y: -280.3698855506633,
      parentId: "_combo_11",
    },
    {
      id: "07456622368",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -190.14422915624428,
      y: -119.85827568615115,
      parentId: "_combo_11",
    },
    {
      id: "07607124303",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -350.6558390207564,
      y: -119.85827568615112,
      parentId: "_combo_11",
    },
    {
      id: "07166594208",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -190.14422915624428,
      y: -280.3698855506633,
      parentId: "_combo_11",
    },
    {
      id: "07086312446",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -302.2434007446816,
      y: -168.27071396222587,
      parentId: "_combo_11",
    },
    {
      id: "07541486388",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -270.40003408850026,
      y: -86.61523282404114,
      parentId: "_combo_11",
    },
    {
      id: "07681546436",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -383.8988818828665,
      y: -200.11408061840717,
      parentId: "_combo_11",
    },
  ],
  combos: {
    _combolink_2: {
      type: "link",
      id: "_combolink_2",
      id1: "07817341678",
      id2: "_combo_1",
      a2: true,
      off: 0,
      parentId: null,
      a1: true,
      hi: false,
      w: 6,
      ls: "dashed",
      _combo: {
        linkIds: [
          "07817341678-208",
          "07817341678-3305122",
          "07817341678-3396625",
          "07817341678-07279151148",
          "07279151148-07817341678",
          "07817341678-07613917675",
          "07587572122-07817341678",
          "07817341678-07587572122",
          "07817341678-07758045718",
          "07758045718-07817341678",
          "07817341678-07394508492",
          "07394508492-07817341678",
          "07817341678-01016394976",
          "07817341678-01701659249",
          "07817341678-07996736026",
          "07817341678-07957853618",
        ],
      },
    },
    _combolink_4: {
      type: "link",
      id: "_combolink_4",
      id1: "_combo_3",
      id2: "07817341678",
      a2: true,
      off: 0,
      parentId: null,
      a1: true,
      hi: false,
      w: 6,
      ls: "dashed",
      _combo: {
        linkIds: [
          "07610039694-07817341678",
          "07817341678-07610039694",
          "07869748073-07817341678",
          "07817341678-07869748073",
          "07817341678-07771486427",
          "07771486427-07817341678",
          "07817341678-07981267897",
          "07817341678-01887771702",
          "01887771702-07817341678",
          "07817341678-07312279168",
          "07312279168-07817341678",
          "07817341678-07541477895",
          "07541477895-07817341678",
          "07817341678-01944462488",
          "07641036117-07817341678",
          "07817341678-044",
        ],
      },
    },
    _combolink_12: {
      type: "link",
      id: "_combolink_12",
      id1: "07817341678",
      id2: "_combo_11",
      a2: true,
      off: 0,
      parentId: null,
      a1: true,
      hi: false,
      w: 6,
      ls: "dashed",
      _combo: {
        linkIds: [
          "07817341678-07309001273",
          "07309001273-07817341678",
          "07817341678-07110730864",
          "07110730864-07817341678",
          "07817341678-01546219380",
          "07817341678-01265321865",
        ],
      },
    },
    _combolink_13: {
      type: "link",
      id: "_combolink_13",
      id1: "9",
      id2: "_combo_11",
      a2: true,
      off: 0,
      parentId: null,
      a1: false,
      hi: false,
      w: 6,
      ls: "dashed",
      _combo: {
        linkIds: [
          "9-07110730864",
          "9-07839321359",
          "9-07456622368",
          "9-07607124303",
          "9-07166594208",
          "9-07086312446",
          "9-07541486388",
          "9-07681546436",
        ],
      },
    },
    _combolink_14: {
      type: "link",
      id: "_combolink_14",
      id1: "_combo_11",
      id2: "_combo_3",
      a2: true,
      off: 0,
      parentId: null,
      a1: true,
      hi: false,
      w: 6,
      ls: "dashed",
      _combo: {
        linkIds: [
          "07110730864-07981267897",
          "07771486427-07110730864",
          "07110730864-01887771702",
          "07610039694-01265321865",
          "07166594208-044",
          "07086312446-07610039694",
          "07541486388-07641036117",
          "07541477895-07541486388",
          "07681546436-07610039694",
          "07681546436-07641036117",
          "07641036117-07681546436",
          "07681546436-07981267897",
          "07981267897-07681546436",
          "07681546436-07541477895",
          "07541477895-07681546436",
          "07681546436-07312279168",
          "07681546436-01944462488",
        ],
      },
    },
    _combo_1: {
      id: "_combo_1",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: 270.4000340885003,
      y: -44.07830037672991,
      t: "",
      oc: {
        w: 320,
      },
      g: [
        {
          p: "ne",
          c: "rgb(255, 0, 0)",
          t: "12",
        },
      ],
      hi: false,
      bg: false,
      _combo: {
        nodeIds: [
          "208",
          "3305122",
          "3396625",
          "07279151148",
          "07613917675",
          "07587572122",
          "07758045718",
          "07394508492",
          "01016394976",
          "01701659249",
          "07996736026",
          "07957853618",
        ],
        linkIds: [],
        open: true,
        e: 1,
        g: "ne",
      },
      _offsets: [
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
      ],
    },
    _combo_3: {
      id: "_combo_3",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -190.03346448000164,
      y: 202.11408061840717,
      t: "",
      oc: {
        w: 316,
      },
      g: [
        {
          p: "ne",
          c: "rgb(255, 0, 0)",
          t: "10",
        },
      ],
      hi: false,
      bg: false,
      _combo: {
        nodeIds: [
          "07610039694",
          "07869748073",
          "07771486427",
          "07981267897",
          "01887771702",
          "07312279168",
          "07541477895",
          "01944462488",
          "07641036117",
          "044",
        ],
        linkIds: [
          "07610039694-07541477895",
          "07541477895-07610039694",
          "07610039694-07641036117",
          "07610039694-07312279168",
          "07610039694-07869748073",
          "07869748073-07610039694",
          "07610039694-01887771702",
          "07981267897-07610039694",
          "07610039694-07981267897",
          "07641036117-07771486427",
          "07771486427-07981267897",
          "07981267897-07771486427",
          "07981267897-07641036117",
          "07641036117-07981267897",
          "07981267897-07541477895",
          "07641036117-07541477895",
          "07541477895-07641036117",
        ],
        open: true,
        e: 1,
        g: "ne",
      },
      _offsets: [
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
      ],
    },
    _combo_11: {
      id: "_combo_11",
      type: "node",
      bw: 2,
      c: "#f58742",
      x: -270.4000340885003,
      y: -200.11408061840717,
      t: "",
      oc: {
        w: 320,
      },
      g: [
        {
          p: "ne",
          c: "rgb(255, 0, 0)",
          t: "11",
        },
      ],
      hi: false,
      bg: false,
      _combo: {
        nodeIds: [
          "07309001273",
          "07110730864",
          "01546219380",
          "01265321865",
          "07839321359",
          "07456622368",
          "07607124303",
          "07166594208",
          "07086312446",
          "07541486388",
          "07681546436",
        ],
        linkIds: [
          "07110730864-07309001273",
          "07309001273-07110730864",
          "07110730864-07681546436",
          "07681546436-07110730864",
          "07541486388-07110730864",
          "07456622368-01546219380",
          "07681546436-01546219380",
          "07166594208-01546219380",
          "07607124303-07839321359",
          "07839321359-07607124303",
          "07541486388-07607124303",
          "07166594208-07681546436",
          "07681546436-07166594208",
          "07541486388-07086312446",
        ],
        open: true,
        e: 1,
        g: "ne",
      },
      _offsets: [
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
        {
          x: 0,
          y: 0,
        },
      ],
    },
  },
};
<!doctype html>
<html lang="en" style="background-color: #2d383f">
  <head>
    <meta charset="utf-8" />
    <title>Combos: Reveal Links</title>
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/keylines.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/minimalsdk.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/sdk-layout.css" />
    <link rel="stylesheet" type="text/css" href="@ci/theme/kl/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css" />
  </head>
  <body>
    <div id="klchart" class="klchart"></div>
    <script type="module" src="./code.js"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.