Skip to content

[Contextual Security] add relationship node type for entity graph #249479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexreal1314 merged 15 commits into from
Feb 1, 2026
Merged

[Contextual Security] add relationship node type for entity graph #249479

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f936d35
add relationship node type for entity graph
alexreal1314 Jan 13, 2026
fa5edfa
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Jan 18, 2026
dea41f1
update relationships node data schema
alexreal1314 Jan 18, 2026
a51ff8e
fix relationship node alignement
alexreal1314 Jan 18, 2026
c1e88b7
fix type error in graph api integration test file
alexreal1314 Jan 19, 2026
d316264
remove duplicate util functions
alexreal1314 Jan 19, 2026
31cc552
add EventsAndRelationshipsStacked story with stacked event actions an…
alexreal1314 Jan 20, 2026
5f24bcd
move relationship node test ids to a different file and update unit t…
alexreal1314 Jan 20, 2026
7f9f3e0
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Jan 20, 2026
5599a55
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Jan 22, 2026
af5bfdd
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Jan 28, 2026
cf99142
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Jan 30, 2026
0538f11
add support for relationship nodes in minimap
alexreal1314 Jan 31, 2026
287e3c4
fix graph nodes being clickable and have hover effect even when itera…
alexreal1314 Jan 31, 2026
dda90fb
Merge branch 'main' into 247768-relationship-edge-type
alexreal1314 Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion x-pack/solutions/security/packages/kbn-cloud-security-posture/common/schema/graph/v1.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,12 @@ export const REACHED_NODES_LIMIT = 'REACHED_NODES_LIMIT';
export const graphResponseSchema = () =>
schema.object({
nodes: schema.arrayOf(
schema.oneOf([entityNodeDataSchema, groupNodeDataSchema, labelNodeDataSchema])
schema.oneOf([
entityNodeDataSchema,
groupNodeDataSchema,
labelNodeDataSchema,
relationshipNodeDataSchema,
])
),
edges: schema.arrayOf(edgeDataSchema),
messages: schema.maybe(schema.arrayOf(schema.oneOf([schema.literal(REACHED_NODES_LIMIT)]))),
Expand All @@ -115,6 +120,7 @@ export const nodeShapeSchema = schema.oneOf([
schema.literal('diamond'),
schema.literal('label'),
schema.literal('group'),
schema.literal('relationship'),

@kfirpeled kfirpeled Jan 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a side note, the naming convention here is not aligned with the current design. However, I'm thinking to propose a new change to the existing node's names.

Instead of shape, we will have element type: relationship/entity/event/stack.

So I'm ok with keeping it now as it is.

@albertoblaz albertoblaz Jan 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"relationship" sounds very business-domain specific to me, though I don't have a better suggestion.

On the other hand, I like the idea of future renaming label nodes to event, since we also have labels in each node

@alexreal1314 alexreal1314 Jan 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with both comments - right now we are coupling shape with node type. As I see it we should have the following:

  • node.type = element type - as mentioned @kfirpeled relationship/entity/event/stack.
  • one of the node params should be the shape. so we could reuse the component to display similar types - although need to check if its possible without major changes.

this would also require us to return additional property for each node - type.
For now i would leave current behavior and do it in a separate task.

]);

export const nodeBaseDataSchema = schema.object({
Expand Down Expand Up @@ -164,6 +170,14 @@ export const labelNodeDataSchema = schema.allOf([
}),
]);

export const relationshipNodeDataSchema = schema.allOf([
nodeBaseDataSchema,
schema.object({
shape: schema.literal('relationship'),
parentId: schema.maybe(schema.string()),

@kfirpeled kfirpeled Jan 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure we would like to stack relationships - worth to double check with design

@alexreal1314 alexreal1314 Jan 18, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left a question.

@alexreal1314 alexreal1314 Jan 20, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

decided to support stacked nodes for relationships as well.

@alexreal1314 alexreal1314 Jan 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

depending on the proposed design - we could add more fields such as count and documentsData as a placeholder to store entities data if we decide to add some popover menu actions later.

@alexreal1314 alexreal1314 Jan 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kfirpeled as discussed in the sync - we are going to show relationship nodes in stacked groupes as well.

@kfirpeled kfirpeled Jan 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since then I think we reverted that decision not to stack.. anyway. Lets leave it here for now

@alexreal1314 alexreal1314 Jan 31, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I would leave it for now to see if all cases are covered - if not ill remove it.

}),
]);

export const edgeDataSchema = schema.object({
id: schema.string(),
source: schema.string(),
Expand Down
9 changes: 8 additions & 1 deletion x-pack/solutions/security/packages/kbn-cloud-security-posture/common/types/graph/v1.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {
graphResponseSchema,
groupNodeDataSchema,
labelNodeDataSchema,
relationshipNodeDataSchema,
nodeColorSchema,
nodeShapeSchema,
nodeDocumentDataSchema,
Expand Down Expand Up @@ -49,9 +50,15 @@ export type GroupNodeDataModel = TypeOf<typeof groupNodeDataSchema>;

export type LabelNodeDataModel = TypeOf<typeof labelNodeDataSchema>;

export type RelationshipNodeDataModel = TypeOf<typeof relationshipNodeDataSchema>;

export type EdgeDataModel = TypeOf<typeof edgeDataSchema>;

export type NodeDataModel = EntityNodeDataModel | GroupNodeDataModel | LabelNodeDataModel;
export type NodeDataModel =
| EntityNodeDataModel
| GroupNodeDataModel
| LabelNodeDataModel
| RelationshipNodeDataModel;

export type NodeDocumentDataModel = TypeOf<typeof nodeDocumentDataSchema>;

Expand Down
11 changes: 6 additions & 5 deletions ...s/security/packages/kbn-cloud-security-posture/graph/src/components/edge/default_edge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,15 @@ import { getMarkerEnd } from './markers';
import { useEdgeColor } from './styles';
import { STACK_NODE_HORIZONTAL_PADDING } from '../constants';
import { GRAPH_EDGE_ID } from '../test_ids';
import { isConnectorShape } from '../utils';

type EdgeColor = EdgeViewModel['color'];

const dashedStyle = {
strokeDasharray: '2 2',
};

const NODES_WITHOUT_MARKER = ['label', 'group'];
const NODES_WITHOUT_MARKER = ['label', 'group', 'relationship'];

export const DefaultEdge = memo(
({
Expand All @@ -35,9 +36,9 @@ export const DefaultEdge = memo(
data,
}: EdgeProps) => {
const color: EdgeColor = data?.color || 'primary';
const entityToLabel = data?.sourceShape !== 'group' && data?.targetShape === 'label';
const labelToEntity = data?.sourceShape === 'label' && data?.targetShape !== 'group';
const isExtraAlignment = entityToLabel || labelToEntity;
const entityToConnector = data?.sourceShape !== 'group' && isConnectorShape(data?.targetShape);

@kfirpeled kfirpeled Jan 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

const connectorToEntity = isConnectorShape(data?.sourceShape) && data?.targetShape !== 'group';
const isExtraAlignment = entityToConnector || connectorToEntity;
const sourceMargin = getShapeHandlePosition(data?.sourceShape);
const targetMargin = getShapeHandlePosition(data?.targetShape);
const markerEnd =
Expand All @@ -56,7 +57,7 @@ export const DefaultEdge = memo(
? targetX + xOffset
: targetX -
xOffset +
(isExtraAlignment ? STACK_NODE_HORIZONTAL_PADDING / 2 : 0) * (labelToEntity ? 1 : -1);
(isExtraAlignment ? STACK_NODE_HORIZONTAL_PADDING / 2 : 0) * (connectorToEntity ? 1 : -1);

const [edgePath] = getSmoothStepPath({
// sourceX and targetX are adjusted to account for the shape handle position
Expand Down
1 change: 1 addition & 0 deletions ...solutions/security/packages/kbn-cloud-security-posture/graph/src/components/edge/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export function getShapeHandlePosition(shape?: NodeShape) {
case 'diamond':
return 14;
case 'label':
case 'relationship':

@kfirpeled kfirpeled Jan 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

return 3;
case 'group':
return 0;
Expand Down
27 changes: 14 additions & 13 deletions ...lutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph/graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ import {
DiamondNode,
LabelNode,
EdgeGroupNode,
RelationshipNode,
} from '../node';
import { layoutGraph } from './layout_graph';
import { DefaultEdge } from '../edge';
import { Minimap } from '../minimap/minimap';
import type { EdgeViewModel, NodeViewModel } from '../types';
import { isConnectorShape } from '../utils';
import { ONLY_RENDER_VISIBLE_ELEMENTS, GRID_SIZE } from '../constants';

import '@xyflow/react/dist/style.css';
Expand Down Expand Up @@ -91,6 +93,7 @@ const nodeTypes = {
diamond: DiamondNode,
label: LabelNode,
group: EdgeGroupNode,
relationship: RelationshipNode,
};

const edgeTypes = {
Expand Down Expand Up @@ -329,7 +332,10 @@ const processGraph = (
node.targetPosition = Position.Left;
node.resizing = false;
node.focusable = false;
} else if (nodeData.shape === 'label' && nodeData.parentId) {
} else if (
(nodeData.shape === 'label' || nodeData.shape === 'relationship') &&
nodeData.parentId
) {
node.parentId = nodeData.parentId;
node.extent = 'parent';
node.expandParent = false;
Expand All @@ -342,18 +348,13 @@ const processGraph = (
const initialEdges: Array<Edge<EdgeViewModel>> = edgesModel
.filter((edgeData) => nodesById[edgeData.source] && nodesById[edgeData.target])
.map((edgeData) => {
const isIn =
nodesById[edgeData.source].shape !== 'label' &&
nodesById[edgeData.target].shape === 'group';
const isInside =
nodesById[edgeData.source].shape === 'group' &&
nodesById[edgeData.target].shape === 'label';
const isOut =
nodesById[edgeData.source].shape === 'label' &&
nodesById[edgeData.target].shape === 'group';
const isOutside =
nodesById[edgeData.source].shape === 'group' &&
nodesById[edgeData.target].shape !== 'label';
const sourceShape = nodesById[edgeData.source].shape;
const targetShape = nodesById[edgeData.target].shape;

const isIn = !isConnectorShape(sourceShape) && targetShape === 'group';
const isInside = sourceShape === 'group' && isConnectorShape(targetShape);
const isOut = isConnectorShape(sourceShape) && targetShape === 'group';
const isOutside = sourceShape === 'group' && !isConnectorShape(targetShape);

return {
id: edgeData.id,
Expand Down
10 changes: 5 additions & 5 deletions ...s/security/packages/kbn-cloud-security-posture/graph/src/components/graph/layout_graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Dagre from '@dagrejs/dagre';
import type { Node, Edge } from '@xyflow/react';
import type { EdgeViewModel, NodeViewModel, Size } from '../types';
import { getStackNodeStyle } from '../node/styles';
import { isEntityNode, isLabelNode, isStackNode, isStackedLabel } from '../utils';
import { isEntityNode, isConnectorNode, isStackNode, isStackedLabel } from '../utils';
import {
GRID_SIZE,
STACK_NODE_VERTICAL_PADDING,
Expand Down Expand Up @@ -55,7 +55,7 @@ export const layoutGraph = (
nodes.forEach((node) => {
let size = { width: NODE_WIDTH, height: node.measured?.height ?? NODE_HEIGHT };

if (isLabelNode(node.data)) {
if (isConnectorNode(node.data)) {
size = {
height: NODE_LABEL_TOTAL_HEIGHT,
width: NODE_LABEL_WIDTH,
Expand Down Expand Up @@ -100,7 +100,7 @@ export const layoutGraph = (

const layoutedNodes = nodes.map((node) => {
// For stacked nodes, we want to keep the original position relative to the parent
if (isLabelNode(node.data) && node.data.parentId) {
if (isConnectorNode(node.data) && node.data.parentId) {
return {
...node,
position: nodesById[node.data.id].position,
Expand All @@ -114,7 +114,7 @@ export const layoutGraph = (

const dagreNode = g.node(node.data.id);

if (isLabelNode(node.data)) {
if (isConnectorNode(node.data)) {
const x = snapped(Math.round(dagreNode.x - (dagreNode.width ?? 0) / 2));
const y = Math.round(dagreNode.y - NODE_LABEL_HEIGHT / 2);

Expand Down Expand Up @@ -166,7 +166,7 @@ const layoutStackedLabels = (
nodes: Array<Node<NodeViewModel>>
): { size: Size; children: Array<Node<NodeViewModel>> } => {
const children = nodes.filter(
(child) => isLabelNode(child.data) && child.parentId === groupNode.id
(child) => isConnectorNode(child.data) && child.parentId === groupNode.id
);
const stackSize = children.length;
const stackWidth = NODE_LABEL_WIDTH + STACK_NODE_HORIZONTAL_PADDING * 2;
Expand Down
Loading
Loading