@likec4/diagram 1.24.0 → 1.25.0

package/dist/overlays/relationship-details/actor.d.ts

@@ -1,7 +1,10 @@
-import { BBox, DiagramView, EdgeId } from '@likec4/core';
-import { ReactFlowInstance } from '@xyflow/react';
-import { ActorLogicFrom, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
+import { BBox, DiagramView, EdgeId, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { EdgeChange, NodeChange, ReactFlowInstance } from '@xyflow/react';
+import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
+import { Base } from '../../base';
 import { RelationshipDetailsTypes } from './_types';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 export type Input = {
     edgeId: EdgeId;
@@ -10,6 +13,8 @@ export type Input = {
 export type Context = Readonly<Input & {
     xyflow: XYFLowInstance | null;
     initialized: boolean;
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 }>;
 export type Events = {
     type: 'xyflow.init';
@@ -20,10 +25,34 @@ export type Events = {
 } | {
     type: 'xyflow.edgeClick';
     edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'xyflow.edgeMouseEnter';
+    edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'xyflow.edgeMouseLeave';
+    edge: RelationshipDetailsTypes.Edge;
+} | {
+    type: 'dim.nonhovered.edges';
+} | {
+    type: 'undim.edges';
+} | {
+    type: 'xyflow.selectionChange';
+    nodes: RelationshipDetailsTypes.Node[];
+    edges: RelationshipDetailsTypes.Edge[];
+} | {
+    type: 'xyflow.applyNodeChanges';
+    changes: NodeChange<RelationshipDetailsTypes.Node>[];
+} | {
+    type: 'xyflow.applyEdgeChanges';
+    changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';
 } | {
     type: 'xyflow.resized';
+} | {
+    type: 'update.xydata';
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 } | {
     type: 'fitDiagram';
     duration?: number;
@@ -37,6 +66,8 @@ export type Events = {
 export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
     xyflow: XYFLowInstance | null;
     initialized: boolean;
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
 }>, Events, {}, never, {
     type: "xyflow:fitDiagram";
     params: {
@@ -62,10 +93,14 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
         self: ActorRef<MachineSnapshot<Readonly<Input & {
             xyflow: XYFLowInstance | null;
             initialized: boolean;
+            xynodes: RelationshipDetailsTypes.Node[];
+            xyedges: RelationshipDetailsTypes.Edge[];
         }>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
     }) => {
         initialized: false;
         xyflow: null;
+        xynodes: never[];
+        xyedges: never[];
         edgeId: EdgeId;
         view: DiagramView;
     };
@@ -76,6 +111,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                     readonly actions: ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "xyflow.init";
                         instance: XYFLowInstance;
@@ -95,16 +132,123 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                 };
             };
             readonly on: {
+                readonly 'xyflow.edgeMouseEnter': {
+                    readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseEnter";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>];
+                };
+                readonly 'xyflow.edgeMouseLeave': {
+                    readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>, CancelAction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, undefined, Events>, ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeMouseLeave";
+                        edge: RelationshipDetailsTypes.Edge;
+                    }, Events, undefined, never, never, never, never, never>];
+                };
+                readonly 'dim.nonhovered.edges': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "dim.nonhovered.edges";
+                    }, Events, undefined, never, never, never, never, never>;
+                };
+                readonly 'undim.edges': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "undim.edges";
+                    }, Events, undefined, never, never, never, never, never>;
+                };
+                readonly 'xyflow.selectionChange': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                    }>, {
+                        type: "xyflow.selectionChange";
+                        nodes: RelationshipDetailsTypes.Node[];
+                        edges: RelationshipDetailsTypes.Edge[];
+                    }, Events, undefined, never, {
+                        type: "xyflow:fitDiagram";
+                        params: {
+                            duration?: number;
+                            bounds?: BBox;
+                        } | undefined;
+                    }, {
+                        type: "enable: navigate.to";
+                        params: unknown;
+                    }, never, EventObject>;
+                };
                 readonly 'navigate.to': {
                     readonly actions: readonly [ ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "navigate.to";
                         edgeId: EdgeId;
                     }, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                     }>, {
                         type: "navigate.to";
                         edgeId: EdgeId;
@@ -117,6 +261,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
             readonly exit: ActionFunction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, Events, Events, undefined, never, never, never, never, never>;
         };
         readonly closed: {
@@ -131,6 +277,47 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
                     context: Readonly<Input & {
                         xyflow: XYFLowInstance | null;
                         initialized: boolean;
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: {
+                            id: string;
+                            source: string;
+                            target: string;
+                            sourceHandle?: string | null;
+                            targetHandle?: string | null;
+                            animated?: boolean;
+                            hidden?: boolean;
+                            deletable?: boolean;
+                            selectable?: boolean;
+                            selected?: boolean;
+                            markerStart?: EdgeMarkerType;
+                            markerEnd?: EdgeMarkerType;
+                            zIndex?: number;
+                            ariaLabel?: string;
+                            interactionWidth?: number;
+                            label?: ReactNode;
+                            labelStyle?: CSSProperties;
+                            labelShowBg?: boolean;
+                            labelBgStyle?: CSSProperties;
+                            labelBgPadding?: [number, number];
+                            labelBgBorderRadius?: number;
+                            style?: CSSProperties;
+                            className?: string;
+                            reconnectable?: boolean | HandleType;
+                            focusable?: boolean;
+                            type: "relationship";
+                            data: {
+                                relationId: RelationId;
+                                color: Color | undefined;
+                                label: string | null;
+                                technology?: string | undefined | undefined;
+                                description?: string | undefined | undefined;
+                                navigateTo: ViewId | null;
+                                line: RelationshipLineType;
+                                hovered?: boolean;
+                                active?: boolean;
+                                dimmed?: Base.Dimmed;
+                            };
+                        }[];
                     }>;
                     event: {
                         type: "fitDiagram";
@@ -148,15 +335,53 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
             readonly actions: readonly [ CancelAction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, {
                 type: "xyflow.resized";
             }, undefined, Events>, ActionFunction<Readonly<Input & {
                 xyflow: XYFLowInstance | null;
                 initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
             }>, {
                 type: "xyflow.resized";
             }, Events, undefined, never, never, never, never, never>];
         };
+        readonly 'update.xydata': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "update.xydata";
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
+        readonly 'xyflow.applyNodeChanges': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "xyflow.applyNodeChanges";
+                changes: NodeChange<RelationshipDetailsTypes.Node>[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
+        readonly 'xyflow.applyEdgeChanges': {
+            readonly actions: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+                xynodes: RelationshipDetailsTypes.Node[];
+                xyedges: RelationshipDetailsTypes.Edge[];
+            }>, {
+                type: "xyflow.applyEdgeChanges";
+                changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
+            }, Events, undefined, never, never, never, never, never>;
+        };
     };
 }>;
 export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {

package/dist/overlays/relationship-details/actor.js

@@ -1,8 +1,9 @@
 import { invariant } from "@likec4/core";
-import "@xyflow/react";
+import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { prop } from "remeda";
-import { setup, cancel, raise, assign } from "xstate";
+import { setup, assign, cancel, raise, enqueueActions } from "xstate";
 import { MinZoom } from "../../base/const.js";
+import { Base } from "../../base/types.js";
 const relationshipDetailsLogic = setup({
   types: {
     context: {},
@@ -38,7 +39,9 @@ const relationshipDetailsLogic = setup({
   context: ({ input }) => ({
     ...input,
     initialized: false,
-    xyflow: null
+    xyflow: null,
+    xynodes: [],
+    xyedges: []
   }),
   states: {
     "opening": {
@@ -61,17 +64,66 @@ const relationshipDetailsLogic = setup({
         params: { duration: 0 }
       },
       on: {
-        // 'xyflow.nodeClick': {
-        //   actions: enqueueActions(({ event, enqueue }) => {
-        //     if ('fqn' in event.node.data) {
-        //       const fqn = event.node.data.fqn
-        //       enqueue.assign({
-        //         subject: fqn,
-        //       })
-        //       enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
-        //     }
-        //   }),
-        // },
+        "xyflow.edgeMouseEnter": {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) => {
+                const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                return context.xyedges.map((edge) => {
+                  if (edge.id === event.edge.id) {
+                    return Base.setData(edge, {
+                      hovered: true,
+                      dimmed: false
+                    });
+                  }
+                  return hasDimmed && !edge.data.dimmed && !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 })
+          ]
+        },
+        "xyflow.edgeMouseLeave": {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) => 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 })
+          ]
+        },
+        "dim.nonhovered.edges": {
+          actions: assign({
+            xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== 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));
+            }
+          })
+        },
+        "xyflow.selectionChange": {
+          actions: enqueueActions(({ event, context, enqueue }) => {
+            if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) {
+              enqueue.raise({ type: "undim.edges" });
+            }
+          })
+        },
         "navigate.to": {
           actions: [
             assign({
@@ -105,6 +157,26 @@ const relationshipDetailsLogic = setup({
         cancel("fitDiagram"),
         raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
       ]
+    },
+    "update.xydata": {
+      actions: assign({
+        xynodes: ({ event }) => event.xynodes,
+        xyedges: ({ event }) => event.xyedges
+      })
+    },
+    "xyflow.applyNodeChanges": {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes);
+        }
+      })
+    },
+    "xyflow.applyEdgeChanges": {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges);
+        }
+      })
     }
   }
 });

package/dist/overlays/relationship-details/hooks.d.ts

@@ -7,6 +7,7 @@ export declare const RelationshipDetailsActorContext: Context<RelationshipDetail
 export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
 export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export declare function useRelationshipDetails(): {
+    actor: RelationshipDetailsActorRef;
     getState: () => Readonly< Input & {
         xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {
             id: string;
@@ -51,6 +52,8 @@ export declare function useRelationshipDetails(): {
             viewportInitialized: boolean;
         }) | null;
         initialized: boolean;
+        xynodes: import("./_types").RelationshipDetailsTypes.Node[];
+        xyedges: import("./_types").RelationshipDetailsTypes.Edge[];
     }>;
     send: (event: Events) => void;
     navigateTo: (edgeId: EdgeId) => void;

package/dist/overlays/relationship-details/hooks.js

@@ -16,6 +16,7 @@ function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (edgeId) => {
@@ -32,9 +33,12 @@ function useRelationshipDetails() {
       });
     },
     close: () => {
-      startTransition(() => {
+      var _a;
+      if (actor._parent) {
+        (_a = actor._parent) == null ? void 0 : _a.send({ type: "close", actorId: actor.id });
+      } else {
         actor.send({ type: "close" });
-      });
+      }
     }
   }), [actor]);
 }

package/dist/overlays/relationship-details/useLayoutedDetails.js

@@ -19,9 +19,10 @@ const Sizes = {
   compoundLabelHeight: 5
 };
 const ZIndexes = {
-  compound: 2,
-  edge: 3,
-  element: 4,
+  compound: 0,
+  // keep edges and elements in the same layer
+  edge: 2,
+  element: 2,
   max: 5
 };
 function createGraph() {

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

@@ -205,9 +205,9 @@ function layoutRelationshipsView(data) {
     if (node.isCompound) {
       continue;
     }
-    const edgeCount = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
-    if (edgeCount > 2) {
-      node.height = node.height + (edgeCount - 3) * 14;
+    const edgeCount2 = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
+    if (edgeCount2 > 2) {
+      node.height = node.height + (edgeCount2 - 3) * 14;
     }
   }
   const nodeIds = [
@@ -255,6 +255,15 @@ function layoutRelationshipsView(data) {
       portId: id
     });
   }
+  const edgeCount = g.edgeCount();
+  if (edgeCount > 10) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 30 ? 800 : 400
+      });
+    }
+  }
   const dagreBounds = applyDagreLayout(g);
   const _calculatedNodeBounds = pipe(
     nodeIds,

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

@@ -18,8 +18,8 @@ function RelationshipsBrowser({ actorRef }) {
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
-      defaultNodes: [],
-      defaultEdges: []
+      initialNodes: [],
+      initialEdges: []
     };
   }
   return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
@@ -49,6 +49,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       className: clsx(isActive ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
+      fitView: false,
       fitViewPadding: ViewPadding,
       onNodeClick: useCallbackRef((e, node) => {
         e.stopPropagation();
@@ -75,8 +76,16 @@ const RelationshipsBrowserXYFlow = memo(() => {
       onEdgesChange: useCallbackRef((changes) => {
         browser.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
+      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+        browser.send({ type: "xyflow.edgeMouseEnter", edge });
+      }),
+      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+        browser.send({ type: "xyflow.edgeMouseLeave", edge });
+      }),
+      onSelectionChange: useCallbackRef((params) => {
+        browser.send({ type: "xyflow.selectionChange", ...params });
+      }),
       nodesDraggable: false,
-      fitView: false,
       pannable: true,
       zoomable: true,
       children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})