add support for merges relation in the graph (#590)add-merge-relations

new relation called "merges"
we use orange dashed line to represent it
works just like how extends, updates, etc are displayed

2 files changed, 7 insertions, 2 deletions

diff --git a/packages/memory-graph/src/components/graph-canvas.tsx b/packages/memory-graph/src/components/graph-canvas.tsx
index 59efa74d..ae233a19 100644
--- a/packages/memory-graph/src/components/graph-canvas.tsx
+++ b/packages/memory-graph/src/components/graph-canvas.tsx
@@ -241,7 +241,8 @@ export const GraphCanvas = memo<GraphCanvasProps>(
 							connectionColor = colors.connection.medium;
 					} else if (edge.edgeType === "version") {
 						// Version chains: Double line effect with relation-specific colors
-						dashPattern = [];
+						// Special dashed pattern for "merges" relation
+						dashPattern = edge.relationType === "merges" ? [8, 4] : [];
 						connectionColor = edge.color || colors.relations.updates;
 						opacity = 0.8;
 						lineWidth = 2;
diff --git a/packages/memory-graph/src/components/legend.tsx b/packages/memory-graph/src/components/legend.tsx
index 16f588a9..b36c8ffe 100644
--- a/packages/memory-graph/src/components/legend.tsx
+++ b/packages/memory-graph/src/components/legend.tsx
@@ -229,11 +229,15 @@ export const Legend = memo(function Legend({
 												["updates", colors.relations.updates],
 												["extends", colors.relations.extends],
 												["derives", colors.relations.derives],
+												["merges", colors.relations.merges],
 											].map(([label, color]) => (
 												<div className={styles.legendItem} key={label}>
 													<div
 														className={styles.relationLine}
-														style={{ borderColor: color }}
+														style={{
+															borderColor: color,
+															borderStyle: label === "merges" ? "dashed" : "solid"
+														}}
 													/>
 													<span
 														className={styles.legendText}