Interaction

Reader interaction feeds straight back into the style expressions through view state.

Selecting a node#

1. The node is marked node.selected.
2. Directly connected nodes become node.active.
3. Unrelated nodes become node.dimmed.
4. Connected edges become edge.active.
5. The detail panel opens.

These flags are just fields in the expression context, so styling reacts automatically:

style node {
opacity: node.dimmed ? 0.35 : 1
border: node.selected ? chili : node.parent.selected ? scallion : border
}
style edge {
color: edge.active ? chili : bamboo
width: edge.active ? 3 : 1
}