@likec4/diagram 1.27.0 → 1.27.2

package/dist/overlays/relationships-browser/actor.d.ts

@@ -2,8 +2,8 @@ import { BBox, Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineTy
 import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent } from 'xstate';
 import { Base } from '../../base';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
+import { LayoutRelationshipsViewResult } from './layout';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
@@ -156,10 +156,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
         type: "update.view";
         params: NonReducibleUnknown;
     };
-    "xyflow:updateNodeInternals": {
-        type: "xyflow:updateNodeInternals";
-        params: unknown;
-    };
     "xyflow:fitDiagram": {
         type: "xyflow:fitDiagram";
         params: {
@@ -167,16 +163,24 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
             bounds?: BBox;
         } | undefined;
     };
+    "xyflow:updateNodeInternals": {
+        type: "xyflow:updateNodeInternals";
+        params: unknown;
+    };
 }>, Values<{
     isReady: {
         type: "isReady";
         params: unknown;
     };
+    hasViewId: {
+        type: "hasViewId";
+        params: unknown;
+    };
     anotherSubject: {
         type: "anotherSubject";
         params: unknown;
     };
-}>, never, "isReady" | "initializing" | "closed" | {
+}>, never, "closed" | "isReady" | "initializing" | {
     active: "idle" | "layouting";
 }, "active", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "relationships-browser";
@@ -213,6 +217,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -264,6 +270,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -322,6 +330,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -481,10 +491,80 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                             type: "update.view";
                             params: NonReducibleUnknown;
                         };
+                        "xyflow:fitDiagram": {
+                            type: "xyflow:fitDiagram";
+                            params: {
+                                duration?: number;
+                                bounds?: BBox;
+                            } | undefined;
+                        };
                         "xyflow:updateNodeInternals": {
                             type: "xyflow:updateNodeInternals";
                             params: unknown;
                         };
+                    }>, Values<{
+                        isReady: {
+                            type: "isReady";
+                            params: unknown;
+                        };
+                        hasViewId: {
+                            type: "hasViewId";
+                            params: unknown;
+                        };
+                        anotherSubject: {
+                            type: "anotherSubject";
+                            params: unknown;
+                        };
+                    }>, never, EventObject>;
+                };
+                readonly 'xyflow.edgeClick': {
+                    readonly guard: "hasViewId";
+                    readonly actions: ActionFunction<Readonly<{
+                        subject: Fqn;
+                        viewId: ViewId | null;
+                        scope: "global" | "view";
+                        closeable: boolean;
+                        enableSelectSubject: boolean;
+                        enableChangeScope: boolean;
+                        xyflow: XYFLowInstance | null;
+                        xystore: XYStoreApi | null;
+                        layouted: LayoutRelationshipsViewResult | null;
+                        navigateFromNode: string | null;
+                        xynodes: RelationshipsBrowserTypes.Node[];
+                        xyedges: RelationshipsBrowserTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeClick";
+                        edge: RelationshipsBrowserTypes.Edge;
+                    }, Events, undefined, {
+                        src: "layouter";
+                        logic: PromiseActorLogic<{
+                            xyedges: RelationshipsBrowserTypes.Edge[];
+                            xynodes: RelationshipsBrowserTypes.Node[];
+                        }, {
+                            subjectId: Fqn;
+                            navigateFromNode: string | null;
+                            xyflow: XYFLowInstance;
+                            xystore: XYStoreApi;
+                            update: LayoutRelationshipsViewResult;
+                        }, EventObject>;
+                        id: "layouter";
+                    }, Values<{
+                        "xyflow.init": {
+                            type: "xyflow.init";
+                            params: NonReducibleUnknown;
+                        };
+                        "xyflow.applyNodeChanges": {
+                            type: "xyflow.applyNodeChanges";
+                            params: NonReducibleUnknown;
+                        };
+                        "xyflow.applyEdgeChanges": {
+                            type: "xyflow.applyEdgeChanges";
+                            params: NonReducibleUnknown;
+                        };
+                        "update.view": {
+                            type: "update.view";
+                            params: NonReducibleUnknown;
+                        };
                         "xyflow:fitDiagram": {
                             type: "xyflow:fitDiagram";
                             params: {
@@ -492,11 +572,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                 bounds?: BBox;
                             } | undefined;
                         };
+                        "xyflow:updateNodeInternals": {
+                            type: "xyflow:updateNodeInternals";
+                            params: unknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
                             params: unknown;
                         };
+                        hasViewId: {
+                            type: "hasViewId";
+                            params: unknown;
+                        };
                         anotherSubject: {
                             type: "anotherSubject";
                             params: unknown;
@@ -623,6 +711,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -945,10 +1035,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     type: "update.view";
                                     params: NonReducibleUnknown;
                                 };
-                                "xyflow:updateNodeInternals": {
-                                    type: "xyflow:updateNodeInternals";
-                                    params: unknown;
-                                };
                                 "xyflow:fitDiagram": {
                                     type: "xyflow:fitDiagram";
                                     params: {
@@ -956,11 +1042,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                         bounds?: BBox;
                                     } | undefined;
                                 };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
                             }>, Values<{
                                 isReady: {
                                     type: "isReady";
                                     params: unknown;
                                 };
+                                hasViewId: {
+                                    type: "hasViewId";
+                                    params: unknown;
+                                };
                                 anotherSubject: {
                                     type: "anotherSubject";
                                     params: unknown;
@@ -1034,6 +1128,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                 focusable?: boolean;
                                 type: "relationship";
                                 data: {
+                                    sourceFqn: Fqn;
+                                    targetFqn: Fqn;
                                     relations: NonEmptyArray<RelationId>;
                                     color: Color | undefined;
                                     label: string | null;
@@ -1076,6 +1172,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1115,6 +1213,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1153,6 +1253,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1191,6 +1293,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1229,6 +1333,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1267,6 +1373,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1306,6 +1414,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1344,6 +1454,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1406,10 +1518,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     type: "update.view";
                                     params: NonReducibleUnknown;
                                 };
-                                "xyflow:updateNodeInternals": {
-                                    type: "xyflow:updateNodeInternals";
-                                    params: unknown;
-                                };
                                 "xyflow:fitDiagram": {
                                     type: "xyflow:fitDiagram";
                                     params: {
@@ -1417,11 +1525,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                         bounds?: BBox;
                                     } | undefined;
                                 };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
                             }>, Values<{
                                 isReady: {
                                     type: "isReady";
                                     params: unknown;
                                 };
+                                hasViewId: {
+                                    type: "hasViewId";
+                                    params: unknown;
+                                };
                                 anotherSubject: {
                                     type: "anotherSubject";
                                     params: unknown;

package/dist/overlays/relationships-browser/actor.js

@@ -6,6 +6,7 @@ import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise
 import { MinZoom, ZIndexes } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
+import { typedSystem } from '../../state/utils.js';
 import { ViewPadding } from './const.js';
 import { viewToNodesEdge } from './useViewToNodesEdges.js';
 import { Base } from '../../base/types.js';
@@ -129,6 +130,7 @@ const relationshipsBrowserLogic = setup({
     layouter
   },
   guards: {
+    hasViewId: ({ context }) => context.viewId !== null,
     isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
     anotherSubject: ({ context, event }) => {
       if (event.type === "update.view") {
@@ -271,10 +273,24 @@ const relationshipsBrowserLogic = setup({
             }
           })
         },
+        "xyflow.edgeClick": {
+          guard: "hasViewId",
+          actions: enqueueActions(({ event, context, system, enqueue }) => {
+            if (event.edge.selected || event.edge.data.relations.length > 1) {
+              enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+                type: "open.relationshipDetails",
+                viewId: context.viewId,
+                source: event.edge.data.sourceFqn,
+                target: event.edge.data.targetFqn
+              });
+            }
+          })
+        },
         "navigate.to": {
           actions: [
             assign({
               subject: ({ event }) => event.subject,
+              viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
               navigateFromNode: ({ event }) => event.fromNode ?? null
             })
           ]
@@ -321,7 +337,7 @@ const relationshipsBrowserLogic = setup({
               actions: [
                 assign({
                   xyedges: ({ context, event }) => {
-                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
                     return context.xyedges.map((edge) => {
                       if (edge.id === event.edge.id) {
                         return Base.setData(edge, {
@@ -329,24 +345,26 @@ const relationshipsBrowserLogic = setup({
                           dimmed: false
                         });
                       }
-                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
                     });
                   }
                 }),
                 cancel("undim.edges"),
                 cancel("dim.nonhovered.edges"),
-                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 100 })
+                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 200 })
               ]
             },
             "xyflow.edgeMouseLeave": {
               actions: [
                 assign({
-                  xyedges: ({ context, event }) => context.xyedges.map((edge) => {
-                    if (edge.id === event.edge.id) {
-                      return Base.setHovered(edge, false);
-                    }
-                    return edge;
-                  })
+                  xyedges: ({ context, event }) => {
+                    return context.xyedges.map((edge) => {
+                      if (edge.id === event.edge.id) {
+                        return Base.setHovered(edge, false);
+                      }
+                      return edge;
+                    });
+                  }
                 }),
                 cancel("dim.nonhovered.edges"),
                 raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
@@ -354,18 +372,14 @@ const relationshipsBrowserLogic = setup({
             },
             "dim.nonhovered.edges": {
               actions: assign({
-                xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+                xyedges: ({ context }) => context.xyedges.map(
+                  (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
+                )
               })
             },
             "undim.edges": {
               actions: assign({
                 xyedges: ({ context }) => {
-                  const hasSelected = context.xyedges.some((edge) => edge.selected === true);
-                  if (hasSelected) {
-                    return context.xyedges.map(
-                      (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
-                    );
-                  }
                   return context.xyedges.map(Base.setDimmed(false));
                 }
               })

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -1,18 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = (props) => {
-  const { enableNavigateTo, enableVscode } = useEnabledFeature("NavigateTo", "Vscode");
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const diagram = useDiagram();
+  const currentViewId = useCurrentViewId();
   const browser = useRelationshipsBrowser();
   const subject = useRelationshipsBrowserState((s) => s.context.subject);
   const buttons = [];
   const { navigateTo, fqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: "navigate",
       icon: /* @__PURE__ */ jsx(IconZoomScan, {}),

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,6 +1,6 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;
     selected?: boolean;
@@ -33,6 +33,8 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         active?: boolean;
         dimmed?: import("../../../base").Base.Dimmed;
     } & {
+        sourceFqn: Fqn;
+        targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;
         color: Color | undefined;
         label: string | null;

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -61,7 +61,7 @@ const RelationshipEdge = customEdge((props) => {
         c: "black",
         label: "This relationship is not included in the current view",
         portalProps: {
-          target: `#${browser.rootElementId.replaceAll(":", "\\:")}`
+          target: `#${browser.rootElementId}`
         },
         openDelay: 800,
         children: label

package/dist/overlays/relationships-browser/hooks.d.ts

@@ -1,6 +1,6 @@
 import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
+import { LayoutRelationshipsViewResult } from './layout';
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
@@ -45,6 +45,8 @@ export declare function useRelationshipsBrowser(): {
             focusable?: boolean;
             type: "relationship";
             data: {
+                sourceFqn: Fqn;
+                targetFqn: Fqn;
                 relations: NonEmptyArray<RelationId>;
                 color: Color | undefined;
                 label: string | null;

package/dist/overlays/relationships-browser/hooks.js

@@ -18,7 +18,7 @@ function useRelationshipsBrowser() {
   return useMemo(() => ({
     actor,
     get rootElementId() {
-      return `relationships-browser-${actor.sessionId}`;
+      return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;
     },
     getState: () => actor.getSnapshot().context,
     send: actor.send,

package/dist/overlays/relationships-browser/{-useRelationshipsView.d.ts → layout.d.ts}

@@ -17,6 +17,8 @@ export declare namespace LayoutRelationshipsViewResult {
         existsInCurrentView: boolean;
     };
     type Edge = DiagramEdge & {
+        sourceFqn: Fqn;
+        targetFqn: Fqn;
         sourceHandle: string;
         targetHandle: string;
         existsInCurrentView: boolean;

package/dist/overlays/relationships-browser/{-useRelationshipsView.js → layout.js}

@@ -128,6 +128,8 @@ function layoutRelationshipsView(data, scope) {
         toArray(data.incoming),
         map((r) => ({
           id: r.source.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: incomers.byId(r.source.id).graph,
           target: subjects.byId(r.target.id).graph,
           relation: r
@@ -137,6 +139,8 @@ function layoutRelationshipsView(data, scope) {
         toArray(data.outgoing),
         map((r) => ({
           id: r.target.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: subjects.byId(r.source.id).graph,
           target: outgoers.byId(r.target.id).graph,
           relation: r
@@ -160,6 +164,8 @@ function layoutRelationshipsView(data, scope) {
       }, name);
       edges.push({
         name,
+        sourceFqn: grouped[0].sourceFqn,
+        targetFqn: grouped[0].targetFqn,
         source: source.id,
         sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
         target: target.id,
@@ -357,7 +363,7 @@ function layoutRelationshipsView(data, scope) {
     const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
     minX = Math.min(minX, position.x);
     minY = Math.min(minY, position.y);
-    const navigateTo = element.defaultView?.id ?? null;
+    const navigateTo = scope ? ifind(element.scopedViews(), (v) => v.id !== scope.id)?.id ?? null : null;
     const inheritFromNode = scope?.findNodeWithElement(element.id);
     const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
     const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
@@ -416,15 +422,26 @@ function layoutRelationshipsView(data, scope) {
       if (!ename) {
         return acc;
       }
-      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
+      const {
+        name,
+        source,
+        sourceFqn,
+        target,
+        targetFqn,
+        relations,
+        sourceHandle,
+        targetHandle
+      } = find(edges, (e2) => e2.name === ename);
       const onlyRelation = only(relations);
       const label = onlyRelation?.title ?? "untitled";
       const isMultiple = relations.length > 1;
       const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
       acc.push({
         id: name,
+        sourceFqn,
         source,
         sourceHandle,
+        targetFqn,
         target,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,

package/dist/overlays/relationships-browser/useViewToNodesEdges.d.ts

@@ -1,5 +1,5 @@
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
+import { LayoutRelationshipsViewResult } from './layout';
 export declare function viewToNodesEdge(view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>): {
     xynodes: RelationshipsBrowserTypes.Node[];
     xyedges: RelationshipsBrowserTypes.Edge[];

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -2,7 +2,7 @@ import { Queue, ElementKind, nonNullable, DiagramNode, invariant } from '@likec4
 import '@react-hookz/web';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView.js';
+import { LayoutRelationshipsViewResult } from './layout.js';
 
 function viewToNodesEdge(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
@@ -142,6 +142,8 @@ function viewToNodesEdge(view) {
       // hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
+        sourceFqn: edge.sourceFqn,
+        targetFqn: edge.targetFqn,
         relations: edge.relations,
         color: edge.color ?? "gray",
         label: edge.label,

package/dist/packages/core/src/compute-view/relationships-view/compute.js

@@ -1,6 +1,6 @@
 import { pipe } from 'remeda';
 import { invariant } from '../../errors/index.js';
-import { sortParentsFirst, isDescendantOf } from '../../utils/fqn.js';
+import { isDescendantOf, sortParentsFirst } from '../../utils/fqn.js';
 import { treeFromElements } from './utils.js';
 import { toSet, toArray } from '../../utils/iterable/to.js';
 import { ifilter } from '../../utils/iterable/filter.js';