@likec4/diagram 1.19.2 → 1.20.1

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

@@ -0,0 +1,209 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, Group, Box } from "@mantine/core";
+import { useStateHistory, useCallbackRef } from "@mantine/hooks";
+import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { ReactFlowProvider, Panel } from "@xyflow/react";
+import clsx from "clsx";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
+import { useRef, memo, useEffect } from "react";
+import { BaseXYFlow } from "../../base/BaseXYFlow.js";
+import { useRelationshipsView } from "./-useRelationshipsView.js";
+import { edgeTypes } from "./custom/edgeTypes.js";
+import { nodeTypes } from "./custom/nodeTypes.js";
+import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
+import { SelectElement } from "./SelectElement.js";
+function RelationshipsBrowser({ actorRef }) {
+  const initialRef = useRef(null);
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultNodes: [],
+      defaultEdges: []
+    };
+  }
+  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {}) }) });
+}
+const selector = (state) => ({
+  subjectId: state.context.subject,
+  initialized: state.context.initialized,
+  scope: state.context.scope,
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges,
+  closeable: state.context.closeable,
+  enableNavigationMenu: state.context.enableNavigationMenu
+});
+const RelationshipsBrowserInner = memo(() => {
+  const browser = useRelationshipsBrowser();
+  const {
+    subjectId,
+    initialized,
+    scope,
+    nodes,
+    edges,
+    closeable,
+    enableNavigationMenu
+  } = useRelationshipsBrowserState(selector);
+  const layouted = useRelationshipsView(subjectId);
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId);
+    }
+  }, [subjectId]);
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      browser.navigateTo(historySubjectId);
+    }
+  }, [historySubjectId]);
+  useEffect(() => {
+    browser.send({ type: "update.view", layouted });
+  }, [layouted]);
+  const hasStepBack = current > 0;
+  const hasStepForward = current + 1 < history.length;
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+    BaseXYFlow,
+    {
+      id: "relationships-browser",
+      nodes,
+      edges,
+      className: clsx(initialized ? "initialized" : "not-initialized"),
+      nodeTypes,
+      edgeTypes,
+      fitViewPadding: 0.05,
+      onInit: useCallbackRef((instance) => {
+        browser.send({ type: "xyflow.init", instance });
+      }),
+      onNodeClick: useCallbackRef((e, node) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.nodeClick", node });
+      }),
+      onEdgeClick: useCallbackRef((e, edge) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.edgeClick", edge });
+      }),
+      onPaneClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.paneClick" });
+      }),
+      onDoubleClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        browser.send({ type: "xyflow.paneDblClick" });
+      }),
+      onViewportResize: () => {
+        browser.send({ type: "xyflow.resized" });
+      },
+      onNodesChange: useCallbackRef((changes) => {
+        browser.send({ type: "xyflow.applyNodeChages", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        browser.send({ type: "xyflow.applyEdgeChages", changes });
+      }),
+      nodesDraggable: false,
+      fitView: false,
+      pannable: true,
+      zoomable: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          TopLeftPanel,
+          {
+            enableNavigationMenu,
+            subjectId,
+            hasStepBack,
+            hasStepForward,
+            onStepBack: () => historyOps.back(),
+            onStepForward: () => historyOps.forward()
+          }
+        ),
+        closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              browser.close();
+            },
+            children: /* @__PURE__ */ jsx(IconX, {})
+          }
+        ) })
+      ]
+    }
+  ) });
+});
+const TopLeftPanel = ({
+  enableNavigationMenu,
+  subjectId,
+  hasStepBack,
+  hasStepForward,
+  onStepBack,
+  onStepForward
+}) => {
+  var _a;
+  const browser = useRelationshipsBrowser();
+  return /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(Group, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
+    hasStepBack && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(-5px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0.05,
+          transform: "translateX(-10px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              onStepBack();
+            },
+            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+          }
+        )
+      },
+      "back"
+    ),
+    hasStepForward && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(5px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0,
+          transform: "translateX(5px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            variant: "default",
+            color: "gray",
+            onClick: (e) => {
+              e.stopPropagation();
+              onStepForward();
+            },
+            children: /* @__PURE__ */ jsx(IconChevronRight, {})
+          }
+        )
+      },
+      "forward"
+    ),
+    enableNavigationMenu && /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: [
+      /* @__PURE__ */ jsx(Box, { fz: "xs", fw: "500", style: { whiteSpace: "nowrap", userSelect: "none" }, children: "Relationships of" }),
+      /* @__PURE__ */ jsx(
+        SelectElement,
+        {
+          subjectId,
+          onSelect: (id) => browser.navigateTo(id),
+          viewId: ((_a = browser.getState().scope) == null ? void 0 : _a.id) ?? "",
+          scope: "global"
+        }
+      )
+    ] })
+  ] }) }) });
+};
+export {
+  RelationshipsBrowser
+};

package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.css.d.ts

@@ -1,2 +1,3 @@
 export declare const node: string;
 export declare const label: string;
+export declare const scrollArea: string;

package/dist/overlays/relationships-browser/SelectElement.css.js

@@ -0,0 +1,9 @@
+/* empty css                                 */
+var node = "_9mmte0";
+var label = "_9mmte1";
+var scrollArea = "_9mmte2";
+export {
+  label,
+  node,
+  scrollArea
+};

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

@@ -0,0 +1,7 @@
+import { Fqn, ViewId } from '@likec4/core';
+export declare const SelectElement: ({ subjectId, viewId, scope, onSelect, }: {
+    subjectId: Fqn;
+    viewId: ViewId;
+    scope: "global" | "view";
+    onSelect: (id: Fqn) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/overlays/{relationships-of → relationships-browser}/SelectElement.js

@@ -4,24 +4,28 @@ import { useTree, useComputedColorScheme, Popover, PopoverTarget, Button, Popove
 import { IconSelector, IconChevronRight } from "@tabler/icons-react";
 import { useRef, useEffect } from "react";
 import * as SelectElement_css from "./SelectElement.css.js";
+import { scrollArea } from "./SelectElement.css.js";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useLikeC4ElementsTree } from "../../likec4model/useLikeC4ElementsTree.js";
 const SelectElement = ({
-  subject,
+  subjectId,
   viewId,
   scope,
   onSelect
 }) => {
   const viewport = useRef(null);
+  const model = useLikeC4Model(true);
+  const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" ? viewId : void 0);
   const tree = useTree({
     multiple: false
   });
   useEffect(() => {
-    ancestorsFqn(subject.id).reverse().forEach((id) => {
+    ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree.expand(id);
     });
-    tree.select(subject.id);
-  }, [subject.id]);
+    tree.select(subjectId);
+  }, [subjectId]);
   const theme = useComputedColorScheme();
   return /* @__PURE__ */ jsxs(
     Popover,
@@ -35,8 +39,7 @@ const SelectElement = ({
       onOpen: () => {
         setTimeout(() => {
           var _a;
-          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-value="${subject.id}"]`);
-          console.log("item", item);
+          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-value="${subjectId}"]`);
           item == null ? void 0 : item.scrollIntoView({ behavior: "instant", block: "nearest" });
         }, 100);
       },
@@ -51,10 +54,10 @@ const SelectElement = ({
             maw: 250,
             style: { padding: "0.25rem 0.75rem" },
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
-            children: subject.title
+            children: (subject == null ? void 0 : subject.title) ?? "???"
           }
         ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { scrollbars: "y", type: "never", viewportRef: viewport, className: scrollArea, children: /* @__PURE__ */ jsx(
           Tree,
           {
             allowRangeSelection: false,

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

@@ -0,0 +1,40 @@
+import { Color, DiagramNode, Fqn, RelationshipLineType, ViewId } from '@likec4/core';
+import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
+export declare namespace RelationshipsBrowserTypes {
+    type Column = 'incomers' | 'subjects' | 'outgoers';
+    /**
+     * The node's incoming and outgoing ports
+     */
+    type Ports = {
+        in: string[];
+        out: string[];
+    };
+    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo'>> & {
+        column: Column;
+        fqn: Fqn;
+        icon: string | null;
+        ports: Ports;
+    }>;
+    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+        column: Column;
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+        ports: Ports;
+    }>;
+    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
+    type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
+    type EmptyNodeData = Base.NodeData<{
+        column: Column;
+    }>;
+    type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>;
+    type Node = ElementNode | CompoundNode | EmptyNode;
+    type NodeData = Node['data'];
+    type EdgeData = Base.EdgeData<{
+        color: Color | undefined;
+        label: string | null;
+        navigateTo: ViewId | null;
+        line: RelationshipLineType;
+    }>;
+    type Edge = ReactFlowEdge<EdgeData, 'relationships'>;
+}

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

@@ -0,0 +1,66 @@
+import { BBox, DiagramView, Fqn } from '@likec4/core';
+import { EdgeChange, NodeChange, ReactFlowInstance } from '@xyflow/react';
+import { ActorLogic, ActorRefFromLogic, MachineSnapshot, SnapshotFrom } from 'xstate';
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
+import { RelationshipsBrowserTypes } from './_types';
+type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
+export type Input = {
+    subject: Fqn;
+    scope?: DiagramView | null;
+    closeable?: boolean;
+    enableNavigationMenu?: boolean;
+};
+export type Context = Readonly<Input & {
+    closeable: boolean;
+    enableNavigationMenu: boolean;
+    xyflow: XYFLowInstance | null;
+    initialized: boolean;
+    layouted: LayoutRelationshipsViewResult | null;
+    xynodes: RelationshipsBrowserTypes.Node[];
+    xyedges: RelationshipsBrowserTypes.Edge[];
+}>;
+export type Events = {
+    type: 'xyflow.init';
+    instance: XYFLowInstance;
+} | {
+    type: 'xyflow.nodeClick';
+    node: RelationshipsBrowserTypes.Node;
+} | {
+    type: 'xyflow.edgeClick';
+    edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'xyflow.applyNodeChages';
+    changes: NodeChange<RelationshipsBrowserTypes.Node>[];
+} | {
+    type: 'xyflow.applyEdgeChages';
+    changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
+} | {
+    type: 'xyflow.paneClick';
+} | {
+    type: 'xyflow.paneDblClick';
+} | {
+    type: 'xyflow.resized';
+} | {
+    type: 'xyflow.edgeMouseEnter';
+    edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'xyflow.edgeMouseLeave';
+    edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'fitDiagram';
+    duration?: number;
+    bounds?: BBox;
+} | {
+    type: 'navigate.to';
+    subject: Fqn;
+} | {
+    type: 'update.view';
+    layouted: LayoutRelationshipsViewResult;
+} | {
+    type: 'close';
+};
+export declare const relationshipsBrowserActor: ActorLogic<MachineSnapshot<Context, Events, any, "opening" | "active" | "closed", any, any, any, any>, Events, Input, any, any>;
+export type RelationshipsBrowserLogic = typeof relationshipsBrowserActor;
+export type RelationshipsBrowserActorRef = ActorRefFromLogic<typeof relationshipsBrowserActor>;
+export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserActorRef>;
+export {};

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

@@ -0,0 +1,159 @@
+import { invariant } from "@likec4/core";
+import { applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
+import { prop } from "remeda";
+import { setup, assign, enqueueActions, cancel, raise } from "xstate";
+import { MinZoom } from "../../base/const.js";
+import { updateEdges } from "../../base/updateEdges.js";
+import { updateNodes } from "../../base/updateNodes.js";
+import { viewToNodesEdge } from "./useViewToNodesEdges.js";
+const relationshipsBrowserActor = setup({
+  types: {
+    context: {},
+    input: {},
+    events: {}
+  },
+  actions: {
+    "xyflow:fitDiagram": ({ context }, params) => {
+      const {
+        duration = 450,
+        bounds
+      } = params ?? {};
+      const { xyflow } = context;
+      invariant(xyflow, "xyflow is not initialized");
+      if (bounds) {
+        xyflow.fitBounds(bounds, duration > 0 ? { duration } : void 0);
+      } else {
+        const maxZoom = Math.max(xyflow.getZoom(), 1);
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: 0.1,
+          ...duration > 0 && { duration }
+        });
+      }
+    }
+  },
+  guards: {
+    "enable: navigate.to": () => true
+  }
+}).createMachine({
+  initial: "waiting-data",
+  context: ({ input }) => ({
+    ...input,
+    closeable: input.closeable ?? true,
+    enableNavigationMenu: input.enableNavigationMenu ?? true,
+    initialized: false,
+    xyflow: null,
+    layouted: null,
+    xynodes: [],
+    xyedges: []
+  }),
+  states: {
+    "waiting-data": {
+      on: {
+        "update.view": {
+          actions: assign(({ event }) => {
+            return {
+              layouted: event.layouted,
+              ...viewToNodesEdge(event.layouted)
+            };
+          }),
+          target: "opening"
+        }
+      }
+    },
+    "opening": {
+      on: {
+        "xyflow.init": {
+          actions: assign({
+            initialized: true,
+            xyflow: ({ event }) => event.instance
+          }),
+          target: "active"
+        },
+        "close": {
+          target: "closed"
+        }
+      }
+    },
+    "active": {
+      entry: {
+        type: "xyflow:fitDiagram",
+        params: { duration: 0 }
+      },
+      on: {
+        "xyflow.nodeClick": {
+          guard: "enable: navigate.to",
+          actions: enqueueActions(({ event, enqueue }) => {
+            if ("fqn" in event.node.data) {
+              const fqn = event.node.data.fqn;
+              enqueue.assign({
+                subject: fqn
+              });
+            }
+          })
+        },
+        "navigate.to": {
+          guard: "enable: navigate.to",
+          actions: [
+            assign({
+              subject: ({ event }) => event.subject
+            })
+          ]
+        },
+        "xyflow.paneDblClick": {
+          actions: "xyflow:fitDiagram"
+        },
+        "update.view": {
+          actions: enqueueActions(({ context, event, enqueue }) => {
+            const updated = viewToNodesEdge(event.layouted);
+            enqueue.assign({
+              layouted: event.layouted,
+              xynodes: updateNodes(context.xynodes, updated.xynodes),
+              xyedges: updateEdges(context.xyedges, updated.xyedges)
+            });
+            enqueue.raise({ type: "fitDiagram" }, { delay: 50 });
+          })
+        },
+        "close": {
+          guard: ({ context }) => context.closeable,
+          target: "closed"
+        }
+      },
+      exit: assign({
+        initialized: false,
+        xyflow: null
+      })
+    },
+    "closed": {
+      type: "final"
+    }
+  },
+  on: {
+    "fitDiagram": {
+      actions: {
+        type: "xyflow:fitDiagram",
+        params: prop("event")
+      }
+    },
+    "xyflow.resized": {
+      actions: [
+        cancel("fitDiagram"),
+        raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
+      ]
+    },
+    "xyflow.applyNodeChages": {
+      actions: assign({
+        xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes)
+      })
+    },
+    "xyflow.applyEdgeChages": {
+      actions: assign({
+        xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges)
+      })
+    }
+  }
+});
+export {
+  relationshipsBrowserActor
+};

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

@@ -0,0 +1,5 @@
+import { NodeProps } from '../../../base/types';
+import { RelationshipsBrowserTypes as Types } from '../_types';
+type ElementActionsProps = NodeProps<Types.ElementNodeData>;
+export declare const ElementActions: (props: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { IconZoomScan, IconTransform } from "@tabler/icons-react";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useRelationshipsBrowser } from "../hooks.js";
+import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+const ElementActions = (props) => {
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const diagram = useDiagram();
+  const browser = useRelationshipsBrowser();
+  const buttons = [];
+  const { navigateTo, fqn } = props.data;
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: "navigate",
+      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.navigateTo(navigateTo);
+      }
+    });
+  }
+  if (fqn !== browser.getState().subject) {
+    buttons.push({
+      key: "relationships",
+      icon: /* @__PURE__ */ jsx(IconTransform, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        browser.navigateTo(fqn);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    ElementActionButtons,
+    {
+      buttons,
+      ...props
+    }
+  );
+};
+export {
+  ElementActions
+};

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

@@ -0,0 +1,5 @@
+import { NodeProps } from '../../../base';
+import { RelationshipsBrowserTypes } from '../_types';
+type EmptyNodeProps = NodeProps<Pick<RelationshipsBrowserTypes.EmptyNodeData, 'column'>>;
+export declare function EmptyNode({ data: { column, }, }: EmptyNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/{relationships-of/xyflow → relationships-browser/custom}/EmptyNode.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box } from "@mantine/core";
-import "@xyflow/react";
+import { Box, Text } from "@mantine/core";
 import { emptyNode } from "./styles.css.js";
-import { Text } from "../../../controls/Text.js";
 function EmptyNode({
   data: {
     column

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

@@ -0,0 +1,46 @@
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position } from '@xyflow/system';
+import { Color, ViewId, RelationshipLineType } from '@likec4/core';
+export declare const edgeTypes: {
+    relationships: NamedExoticComponent<{
+        source: string;
+        target: string;
+        style?: CSSProperties;
+        id: string;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        animated?: boolean;
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+        sourcePosition: Position;
+        targetPosition: Position;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        sourceHandleId?: string | null;
+        targetHandleId?: string | null;
+        markerStart?: string;
+        markerEnd?: string;
+        pathOptions?: any;
+        interactionWidth?: number;
+        data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../../base").Base.Dimmed;
+        } & {
+            color: Color | undefined;
+            label: string | null;
+            navigateTo: ViewId | null;
+            line: RelationshipLineType;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../../base").Base.Dimmed;
+        };
+    }>;
+};