Click on nodes to foreground their neighbors.
Neighbors are nodes directly connected to each other. To calculate them, you must import the neighbors method from the ReGraph analysis module.
To apply foregrounding, set the fade property to false for the selected item and its neighbors in the setStyle function passed to the onItemInteraction event handler.
Setting fade: false automatically backgrounds every other chart item that doesn't have this set.
See also
import React from "react";
import { createRoot } from "react-dom/client";
import mapValues from "lodash/mapValues";
import { Chart } from "regraph";
import { neighbors } from "regraph/analysis";
import data from "./data";
const layout = { tightness: 3 };
export const Demo = () => <NeighborsDemo items={data()} />;
function NeighborsDemo(props) {
const { items } = props;
const handleItemInteraction = async ({ selected, id, setStyle }) => {
if (selected) {
const nodesAndLinks = await neighbors(items, id);
// set fade to false to foreground selected item and neighbors
// this automatically fades everything else
const newStyles = mapValues({ ...nodesAndLinks, [id]: true }, () => {
return { fade: false };
});
setStyle(newStyles);
}
};
return (
<div style={{ width: "100%", height: "100%" }}>
<Chart
items={items}
layout={layout}
onItemInteraction={handleItemInteraction}
options={{ navigation: false, overview: false }}
/>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
function data() {
return {
"ned - susan": {
...style.link,
end2: { arrow: true },
id1: "ned",
id2: "susan",
},
"ned - lisa": {
...style.link,
end2: { arrow: true },
id1: "ned",
id2: "lisa",
},
"ned - marge": {
...style.link,
end2: { arrow: true },
id1: "ned",
id2: "marge",
},
"ned - bob": {
...style.link,
end2: { arrow: true },
id1: "ned",
id2: "bob",
},
"john - susan": {
...style.link,
end2: { arrow: true },
id1: "john",
id2: "susan",
},
"john - homer": {
...style.link,
end2: { arrow: true },
id1: "john",
id2: "homer",
},
"john - lisa": {
...style.link,
end2: { arrow: true },
id1: "john",
id2: "lisa",
},
"john - marge": {
...style.link,
end2: { arrow: true },
id1: "john",
id2: "marge",
},
"john - bob": {
...style.link,
end2: { arrow: true },
id1: "john",
id2: "bob",
},
"bob - richard": {
...style.link,
end2: { arrow: true },
id1: "bob",
id2: "richard",
},
"bob - susan": {
...style.link,
end2: { arrow: true },
id1: "bob",
id2: "susan",
},
"bob - marge": {
...style.link,
end2: { arrow: true },
id1: "bob",
id2: "marge",
},
"bob - ned": {
...style.link,
end2: { arrow: true },
id1: "bob",
id2: "ned",
},
"marge - susan": {
...style.link,
end2: { arrow: true },
id1: "marge",
id2: "susan",
},
"marge - lisa": {
...style.link,
end2: { arrow: true },
id1: "marge",
id2: "lisa",
},
"marge - ned": {
...style.link,
end2: { arrow: true },
id1: "marge",
id2: "ned",
},
"marge - john": {
...style.link,
end2: { arrow: true },
id1: "marge",
id2: "john",
},
"lisa - susan": {
...style.link,
end2: { arrow: true },
id1: "lisa",
id2: "susan",
},
"lisa - homer": {
...style.link,
end2: { arrow: true },
id1: "lisa",
id2: "homer",
},
"lisa - marge": {
...style.link,
end2: { arrow: true },
id1: "lisa",
id2: "marge",
},
"lisa - bob": {
...style.link,
end2: { arrow: true },
id1: "lisa",
id2: "bob",
},
"lisa - ned": {
...style.link,
end2: { arrow: true },
id1: "lisa",
id2: "ned",
},
"ken - richard": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "richard",
},
"ken - susan": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "susan",
},
"ken - homer": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "homer",
},
"ken - lisa": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "lisa",
},
"ken - marge": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "marge",
},
"ken - bob": {
...style.link,
end2: { arrow: true },
id1: "ken",
id2: "bob",
},
"homer - susan": {
...style.link,
end2: { arrow: true },
id1: "homer",
id2: "susan",
},
"homer - ken": {
...style.link,
end2: { arrow: true },
id1: "homer",
id2: "ken",
},
"homer - marge": {
...style.link,
end2: { arrow: true },
id1: "homer",
id2: "marge",
},
"homer - john": {
...style.link,
end2: { arrow: true },
id1: "homer",
id2: "john",
},
"susan - richard": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "richard",
},
"susan - susan": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "homer",
},
"susan - ken": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "ken",
},
"susan - lisa": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "lisa",
},
"susan - marge": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "marge",
},
"susan - bob": {
...style.link,
end2: { arrow: true },
id1: "susan",
id2: "bob",
},
"richard - susan": {
...style.link,
end2: { arrow: true },
id1: "richard",
id2: "susan",
},
"richard - marge": {
...style.link,
end2: { arrow: true },
id1: "richard",
id2: "marge",
},
"richard - ned": {
...style.link,
end2: { arrow: true },
id1: "richard",
id2: "ned",
},
"richard - john": {
...style.link,
end2: { arrow: true },
id1: "richard",
id2: "john",
},
john: {
...style.primary1,
label: { text: "John", ...style.primaryLabel1 },
},
ned: {
...style.primary1,
label: { text: "Ned", ...style.primaryLabel1 },
},
bob: {
...style.primary1,
label: { text: "Bob", ...style.primaryLabel1 },
},
marge: {
...style.primary1,
label: { text: "Marge", ...style.primaryLabel1 },
},
lisa: {
...style.primary1,
label: { text: "Lisa", ...style.primaryLabel1 },
},
ken: {
...style.primary1,
label: { text: "Ken", ...style.primaryLabel1 },
},
homer: {
...style.primary1,
label: { text: "Homer", ...style.primaryLabel1 },
},
susan: {
...style.primary1,
label: { text: "Susan", ...style.primaryLabel1 },
},
richard: {
...style.primary1,
label: { text: "Richard", ...style.primaryLabel1 },
},
};
}
export default data;<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>