@likec4/diagram 1.19.2 → 1.20.0

package/dist/overlays/relationship-details/custom/ElementActions.d.ts

@@ -0,0 +1,5 @@
+import { NodeProps } from '../../../base/types';
+import { RelationshipDetailsTypes 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/relationship-details/custom/ElementActions.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { IconZoomScan } from "@tabler/icons-react";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useRelationshipDetails } from "../hooks.js";
+import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+const ElementActions = (props) => {
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const diagram = useDiagram();
+  useRelationshipDetails();
+  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);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    ElementActionButtons,
+    {
+      buttons,
+      ...props
+    }
+  );
+};
+export {
+  ElementActions
+};

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -0,0 +1,49 @@
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position } from '@xyflow/system';
+import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+export declare const edgeTypes: {
+    relationship: 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;
+        } & {
+            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?: import("../../../base").Base.Dimmed;
+        };
+    }>;
+};

package/dist/overlays/relationship-details/custom/edgeTypes.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBezierPath } from "@xyflow/system";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { customEdge } from "../../../base/primitives/customEdge.js";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
+import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
+import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
+import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
+const edgeTypes = {
+  relationship: customEdge((props) => {
+    const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+    const {
+      sourceX,
+      targetY,
+      data: { navigateTo }
+    } = props;
+    const [svgPath, labelX, labelY] = getBezierPath(props);
+    const diagram = useDiagram();
+    return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
+      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+      /* @__PURE__ */ jsx(
+        EdgeLabel,
+        {
+          edgeProps: props,
+          labelPosition: {
+            x: labelX,
+            y: labelY,
+            translate: "translate(-50%, 0)"
+          },
+          style: {
+            maxWidth: Math.abs(props.targetX - props.sourceX - 70)
+          },
+          children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+            EdgeActionButton,
+            {
+              ...props,
+              onClick: (e) => {
+                e.stopPropagation();
+                diagram.navigateTo(navigateTo);
+              }
+            }
+          )
+        }
+      )
+    ] });
+  })
+};
+export {
+  edgeTypes
+};

package/dist/overlays/relationship-details/custom/index.d.ts

@@ -0,0 +1,2 @@
+export { edgeTypes } from './edgeTypes';
+export { nodeTypes } from './nodeTypes';

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -0,0 +1,39 @@
+import { NodeProps } from '../../../base';
+import { RelationshipDetailsTypes } from '../_types';
+import { NamedExoticComponent } from 'react';
+import { ElementStyle, Color, ViewId, Fqn } from '@likec4/core';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
+        title: string;
+        description: string | null;
+        width: number;
+        height: number;
+        technology: string | null;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        navigateTo: ViewId<string> | null | undefined;
+        fqn: Fqn;
+        icon: string | null;
+        ports: RelationshipDetailsTypes.Ports;
+        hovered?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    }>>;
+    compound: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
+        title: string;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+        ports: RelationshipDetailsTypes.Ports;
+        hovered?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    }>>;
+};
+type ElementPortsProps = NodeProps<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+type CompoundPortsProps = NodeProps<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ElementActions } from "./ElementActions.js";
+import { Handle } from "@xyflow/react";
+import { Position } from "@xyflow/system";
+import { customNode } from "../../../base/primitives/customNode.js";
+import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
+import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
+import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
+const nodeTypes = {
+  element: customNode((props) => {
+    return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementShape, { ...props }),
+      /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+      /* @__PURE__ */ jsx(ElementActions, { ...props }),
+      /* @__PURE__ */ jsx(ElementPorts, { ...props })
+    ] });
+  }),
+  compound: customNode((props) => {
+    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
+    ] });
+  })
+};
+const ElementPorts = ({ data: { ports, height: h } }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ports.in.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        }
+      },
+      id
+    )),
+    ports.out.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        }
+      },
+      id
+    ))
+  ] });
+};
+const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  data.ports.in.map((id, i) => /* @__PURE__ */ jsx(
+    Handle,
+    {
+      id,
+      type: "target",
+      position: Position.Left,
+      style: {
+        visibility: "hidden",
+        top: `${20 * (i + 1)}px`
+      }
+    },
+    id
+  )),
+  data.ports.out.map((id, i) => /* @__PURE__ */ jsx(
+    Handle,
+    {
+      id,
+      type: "source",
+      position: Position.Right,
+      style: {
+        visibility: "hidden",
+        top: `${20 * (i + 1)}px`
+      }
+    },
+    id
+  ))
+] });
+export {
+  CompoundPorts,
+  ElementPorts,
+  nodeTypes
+};

package/dist/overlays/relationship-details/custom/styles.css.d.ts

@@ -0,0 +1 @@
+export declare const emptyNode: string;

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

@@ -0,0 +1,59 @@
+import { EdgeId, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Input, Events } from './actor';
+import { Context, ReactNode, CSSProperties } from 'react';
+import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
+export declare function useRelationshipsBrowserActor(): RelationshipDetailsActorRef;
+export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
+export declare function useRelationshipDetails(): {
+    getState: () => Readonly< Input & {
+        xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {
+            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?: import("../../base").Base.Dimmed;
+            };
+        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+            viewportInitialized: boolean;
+        }) | null;
+        initialized: boolean;
+    }>;
+    send: (event: Events) => void;
+    navigateTo: (edgeId: EdgeId) => void;
+    fitDiagram: () => void;
+    close: () => void;
+};

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

@@ -0,0 +1,46 @@
+import { nonNullable } from "@likec4/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { useSelector } from "@xstate/react";
+import { shallowEqual } from "fast-equals";
+import { createContext, useTransition, useMemo, useContext } from "react";
+const RelationshipDetailsActorContext = createContext(null);
+function useRelationshipsBrowserActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipsBrowserActorContext");
+}
+function useRelationshipsBrowserState(selector, compare = shallowEqual) {
+  const select = useCallbackRef(selector);
+  const actor = useRelationshipsBrowserActor();
+  return useSelector(actor, select, compare);
+}
+function useRelationshipDetails() {
+  const actor = useRelationshipsBrowserActor();
+  const [, startTransition] = useTransition();
+  return useMemo(() => ({
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (edgeId) => {
+      startTransition(() => {
+        actor.send({
+          type: "navigate.to",
+          edgeId
+        });
+      });
+    },
+    fitDiagram: () => {
+      startTransition(() => {
+        actor.send({ type: "fitDiagram" });
+      });
+    },
+    close: () => {
+      startTransition(() => {
+        actor.send({ type: "close" });
+      });
+    }
+  }), [actor]);
+}
+export {
+  RelationshipDetailsActorContext,
+  useRelationshipDetails,
+  useRelationshipsBrowserActor,
+  useRelationshipsBrowserState
+};

package/dist/overlays/{edge-details/use-layouted-edge-details.d.ts → relationship-details/useLayoutedDetails.d.ts}

@@ -1,17 +1,15 @@
 import { DiagramEdge, DiagramView, EdgeId } from '@likec4/core';
-import { SharedFlowTypes } from '../shared/xyflow/_types';
-import { EdgeDetailsFlowTypes } from './_types';
+import { RelationshipDetailsTypes } from './_types';
 export declare const ZIndexes: {
     compound: number;
     edge: number;
     element: number;
     max: number;
 };
-export declare function useLayoutedEdgeDetails(edgeId: EdgeId): {
-    view: DiagramView;
+export declare function useLayoutedDetails(edgeId: EdgeId, view: DiagramView): {
     edge: DiagramEdge;
-    nodes: SharedFlowTypes.Node[];
-    edges: EdgeDetailsFlowTypes.Edge[];
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
     bounds: {
         x: number;
         y: number;

package/dist/overlays/{edge-details/use-layouted-edge-details.js → relationship-details/useLayoutedDetails.js}

@@ -1,21 +1,21 @@
 import dagre from "@dagrejs/dagre";
 import { invariant, compareRelations, compareFqnHierarchically, isAncestor } from "@likec4/core";
-import { MarkerType } from "@xyflow/system";
 import { useMemo } from "react";
 import { pipe, sort, reverse, forEach, takeWhile, first, map, sortBy, prop, filter, isTruthy } from "remeda";
-import { useDiagramState } from "../../hooks/useDiagramState.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 const Sizes = {
   dagre: {
-    ranksep: 40,
-    nodesep: 25,
-    edgesep: 15
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25
   },
   edgeLabel: {
-    width: 120
+    width: 120,
+    height: 10,
+    minlen: 1
   },
-  nodeWidth: 270,
-  hodeHeight: 160,
+  nodeWidth: 330,
+  hodeHeight: 180,
   // Spacer between elements in a compound node
   // 0 means no spacer
   spacerHeight: 0,
@@ -46,9 +46,7 @@ const sized = (height = Sizes.hodeHeight) => ({
 });
 const graphId = (node) => ({
   id: node.id,
-  port: node.type === "compound" ? `${node.id}::port` : node.id,
-  body: `${node.id}`,
-  spacer: `${node.id}:spacer`
+  port: node.type === "compound" ? `${node.id}::port` : node.id
 });
 function nodeData(element, ctx) {
   var _a;
@@ -61,42 +59,52 @@ function nodeData(element, ctx) {
   );
   return {
     fqn: element.id,
-    element: {
-      kind: element.kind,
-      title: (diagramNode == null ? void 0 : diagramNode.title) ?? element.title,
-      description: (diagramNode == null ? void 0 : diagramNode.description) ?? element.description,
-      color: (diagramNode == null ? void 0 : diagramNode.color) ?? (ancestor == null ? void 0 : ancestor.color) ?? element.color,
-      shape: (diagramNode == null ? void 0 : diagramNode.shape) ?? element.shape
-    },
+    title: (diagramNode == null ? void 0 : diagramNode.title) ?? element.title,
+    technology: (diagramNode == null ? void 0 : diagramNode.technology) ?? element.technology,
+    description: (diagramNode == null ? void 0 : diagramNode.description) ?? element.description,
+    color: (diagramNode == null ? void 0 : diagramNode.color) ?? (ancestor == null ? void 0 : ancestor.color) ?? element.color,
+    shape: (diagramNode == null ? void 0 : diagramNode.shape) ?? element.shape,
+    icon: (diagramNode == null ? void 0 : diagramNode.icon) ?? element.icon,
+    style: (diagramNode == null ? void 0 : diagramNode.style) ?? element.$element.style ?? {},
     navigateTo: (diagramNode == null ? void 0 : diagramNode.navigateTo) ?? ((_a = first(element.scopedViews().take(1).toArray())) == null ? void 0 : _a.id) ?? null,
+    width: 0,
+    height: 0,
+    depth: 1,
     ports: {
       in: [],
       out: []
     }
   };
 }
-function createNode(nodeType, element, ctx) {
+function createXYNode(nodeType, element, ctx) {
   let node = ctx.xynodes.get(element.id);
   if (node) {
     return node;
   }
   const g = ctx.g;
   const parent = pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     takeWhile((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
     first(),
-    (found) => found ? createNode("compound", found, ctx) : null
+    (found) => found ? createXYNode("compound", found, ctx) : null
   );
-  const xynode = {
-    type: nodeType,
+  const base = {
     id: element.id,
+    draggable: false,
+    selectable: true,
+    focusable: true,
+    deletable: false,
     position: { x: 0, y: 0 },
-    data: {
-      ...nodeData(element, ctx)
-    },
     zIndex: ZIndexes[nodeType],
+    initialWidth: 0,
+    initialHeight: 0,
     ...!!parent && { parentId: parent.id }
   };
+  const xynode = {
+    ...base,
+    type: nodeType,
+    data: nodeData(element, ctx)
+  };
   ctx.xynodes.set(element.id, xynode);
   const k = graphId(xynode);
   g.setNode(k.id, sized());
@@ -108,7 +116,7 @@ function createNode(nodeType, element, ctx) {
     g.setParent(k.port, k.id);
   }
   if (parent) {
-    const parentGraphId = graphId(parent).body;
+    const parentGraphId = graphId(parent).id;
     g.setParent(k.id, parentGraphId);
   }
   return xynode;
@@ -139,9 +147,7 @@ function applyDagreLayout(g) {
     };
   };
 }
-function layout(edgeId, view, likec4model) {
-  const edge = view.edges.find((e) => e.id === edgeId);
-  invariant(edge, "edge not found");
+function layout(edge, view, likec4model) {
   const all = /* @__PURE__ */ new Set([edge.source, edge.target]);
   const relations = edge.relations.map((r) => {
     const relation = likec4model.relationship(r);
@@ -160,7 +166,7 @@ function layout(edgeId, view, likec4model) {
     xynodes: /* @__PURE__ */ new Map(),
     edge,
     diagramNodes,
-    edges: []
+    xyedges: []
   };
   pipe(
     [...all],
@@ -168,7 +174,7 @@ function layout(edgeId, view, likec4model) {
     reverse(),
     forEach((id) => {
       const element = likec4model.element(id);
-      createNode("element", element, ctx);
+      createXYNode("element", element, ctx);
     })
   );
   if (relations.length === 1 && all.size < 4) {
@@ -184,29 +190,23 @@ function layout(edgeId, view, likec4model) {
     g.setEdge(graphId(source).port, graphId(target).port);
     const edge2 = {
       id: relation.id,
-      type: "relation",
+      type: "relationship",
       source: source.id,
       target: target.id,
       sourceHandle: target.id,
       targetHandle: source.id,
       data: {
-        relations: [relation],
+        relationId: relation.id,
+        color: relation.color,
+        label: relation.title ?? null,
+        technology: relation.technology,
+        description: relation.description,
         navigateTo: relation.navigateTo ?? null,
-        technology: relation.technology ?? null,
-        description: relation.description ?? null
+        line: relation.line ?? "dashed"
       },
-      label: relation.title,
-      zIndex: ZIndexes.edge,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 10
-      },
-      style: {
-        strokeWidth: 2.2,
-        strokeDasharray: "5, 5"
-      }
+      zIndex: ZIndexes.edge
     };
-    ctx.edges.push(edge2);
+    ctx.xyedges.push(edge2);
   }
   const nodebounds = applyDagreLayout(ctx.g);
   const sortedPorts = (ports) => {
@@ -226,22 +226,26 @@ function layout(edgeId, view, likec4model) {
     );
   };
   const xynodes = [...ctx.xynodes.values()].map((node) => {
-    if (node.data.ports.in.length > 1) {
-      node.data.ports.in = sortedPorts(node.data.ports.in);
-    }
-    if (node.data.ports.out.length > 1) {
-      node.data.ports.out = sortedPorts(node.data.ports.out);
+    const { position, width, height } = nodebounds(node.id, node.parentId);
+    node.data.ports.in = sortedPorts(node.data.ports.in);
+    node.data.ports.out = sortedPorts(node.data.ports.out);
+    if (node.type === "element") {
+      node.data.width = width;
+      node.data.height = height;
     }
-    return {
-      ...node,
-      ...nodebounds(node.id, node.parentId)
+    node.position = position;
+    node.initialHeight = height;
+    node.initialWidth = width;
+    node.style = {
+      width,
+      height
     };
+    return node;
   });
   return {
-    view,
     edge,
-    edges: ctx.edges,
-    nodes: xynodes,
+    xyedges: ctx.xyedges,
+    xynodes,
     bounds: {
       x: 0,
       y: 0,
@@ -250,21 +254,21 @@ function layout(edgeId, view, likec4model) {
     }
   };
 }
-function useLayoutedEdgeDetails(edgeId) {
-  const view = useDiagramState((s) => s.view);
+function useLayoutedDetails(edgeId, view) {
+  const edge = view.edges.find((e) => e.id === edgeId);
+  invariant(edge, `edge ${edgeId} not found in ${view.id}`);
   const likec4model = useLikeC4Model(true);
   return useMemo(() => layout(
-    edgeId,
+    edge,
     view,
     likec4model
   ), [
-    edgeId,
+    edge,
     view,
-    likec4model,
     layout
   ]);
 }
 export {
   ZIndexes,
-  useLayoutedEdgeDetails
+  useLayoutedDetails
 };