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: "/public/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,
// ...truncated 566 lines<!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>