@likec4/diagram 1.31.0 → 1.32.0

package/src/hooks/useDiagram.ts

@@ -1,17 +1,19 @@
 import {
+  type aux,
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
   type EdgeId,
-  type ElementNotation,
   type Fqn,
   type NodeId,
+  type NodeNotation as ElementNotation,
+  type scalar,
   type ViewId,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector as useXstateSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { useMemo } from 'react'
+import { type DependencyList, useCallback, useMemo } from 'react'
 import type { PartialDeep } from 'type-fest'
 import type { FeatureName } from '../context/DiagramFeatures'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
@@ -19,6 +21,7 @@ import type { Types } from '../likec4diagram/types'
 import type { AlignmentMode } from '../state/aligners'
 import type {
   DiagramActorEvent,
+  DiagramActorRef,
   DiagramActorSnapshot,
   DiagramContext,
   SyncLayoutActorRef,
@@ -29,13 +32,96 @@ import { useDiagramActorRef } from './safeContext'
 
 export { useDiagramActorRef }
 
+export interface DiagramApi {
+  readonly actor: DiagramActorRef
+  /**
+   * @warning Do not use in render phase
+   */
+  readonly currentView: DiagramView
+  /**
+   * Send event to diagram actor
+   */
+  send(event: DiagramActorEvent): void
+  /**
+   * Navigate to view
+   */
+  navigateTo(viewId: scalar.ViewId, fromNode?: scalar.NodeId): void
+  /**
+   * Navigate back or forward in history
+   */
+  navigate(direction: 'back' | 'forward'): void
+  /**
+   * Fit diagram to view
+   */
+  fitDiagram(duration?: number): void
+  /**
+   * Open relationships browser
+   */
+  openRelationshipsBrowser(fqn: scalar.Fqn): void
+  /**
+   * If running in editor, trigger opening source file
+   */
+  openSource(params: OpenSourceParams<aux.Unknown>): void
+  /**
+   * Open element details card
+   */
+  openElementDetails(fqn: scalar.Fqn, fromNode?: scalar.NodeId): void
+  openRelationshipDetails(...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]): void
+  updateNodeData(nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>): void
+  updateEdgeData(edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>): void
+  /**
+   * Schedule save manual layout
+   */
+  scheduleSaveManualLayout(): void
+  /**
+   * @returns true if there was pending request to save layout
+   */
+  cancelSaveManualLayout(): boolean
+  /**
+   * Align nodes
+   */
+  align(mode: AlignmentMode): void
+  /**
+   * Reset edge control points
+   */
+  resetEdgeControlPoints(): void
+  /**
+   * Focus node
+   */
+  focusNode(nodeId: NodeId): void
+
+  /**
+   * @warning Do not use in render phase
+   */
+  getSnapshot(): DiagramActorSnapshot
+  /**
+   * @warning Do not use in render phase
+   */
+  getContext(): DiagramContext
+  /**
+   * @warning Do not use in render phase
+   */
+  findDiagramNode(xynodeId: string): DiagramNode | null
+  /**
+   * @warning Do not use in render phase
+   */
+  findDiagramEdge(xyedgeId: string): DiagramEdge | null
+  startWalkthrough(): void
+  walkthroughStep(direction?: 'next' | 'previous'): void
+  stopWalkthrough(): void
+  toggleFeature(feature: FeatureName, forceValue?: boolean): void
+  highlightNotation(notation: ElementNotation, kind?: string): void
+  unhighlightNotation(): void
+  openSearch(searchValue?: string): void
+}
+
 /**
  * Diagram API
  * Mostly for internal use
  */
-export function useDiagram() {
+export function useDiagram(): DiagramApi {
   const actor = useDiagramActorRef()
-  return useMemo(() => ({
+  return useMemo((): DiagramApi => ({
     actor,
     send: (event: DiagramActorEvent) => actor.send(event),
     navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
@@ -51,16 +137,16 @@ export function useDiagram() {
     fitDiagram: (duration = 350) => {
       actor.send({ type: 'fitDiagram', duration })
     },
-    openRelationshipsBrowser: (fqn: Fqn) => {
+    openRelationshipsBrowser: (fqn) => {
       actor.send({ type: 'open.relationshipsBrowser', fqn })
     },
-    openSource: (params: OpenSourceParams) => {
+    openSource: (params: OpenSourceParams<aux.Unknown>) => {
       actor.send({ type: 'open.source', ...params })
     },
-    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
+    openElementDetails: (fqn, fromNode?: scalar.NodeId) => {
       actor.send({ type: 'open.elementDetails', fqn, fromNode })
     },
-    openRelationshipDetails: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => {
+    openRelationshipDetails: (...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]) => {
       if (params.length === 1) {
         actor.send({ type: 'open.relationshipDetails', params: { edgeId: params[0] } })
       } else {
@@ -68,10 +154,10 @@ export function useDiagram() {
       }
     },
 
-    updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
+    updateNodeData: (nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>) => {
       actor.send({ type: 'update.nodeData', nodeId, data })
     },
-    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.EdgeData>) => {
+    updateEdgeData: (edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>) => {
       actor.send({
         type: 'update.edgeData',
         edgeId,
@@ -151,6 +237,10 @@ export function useDiagram() {
     unhighlightNotation: () => {
       actor.send({ type: 'notations.unhighlight' })
     },
+
+    openSearch: (searchValue?: string) => {
+      actor.send({ type: 'open.search', ...(searchValue && { search: searchValue }) })
+    },
   }), [actor])
 }
 
@@ -176,7 +266,9 @@ export function useDiagramSyncLayoutState<T = unknown>(
 export function useDiagramContext<T = unknown>(
   selector: (context: DiagramContext) => T,
   compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+  deps?: DependencyList,
 ): T {
   const actorRef = useDiagramActorRef()
-  return useXstateSelector(actorRef, useCallbackRef(s => selector(s.context)), compare)
+  const select = useCallback((s: DiagramActorSnapshot) => selector(s.context), deps ?? [])
+  return useXstateSelector(actorRef, select, compare)
 }

package/src/hooks/useMantinePortalProps.ts

@@ -2,7 +2,16 @@ import { useMemo } from 'react'
 
 import { useRootContainer } from '../context'
 
-export function useMantinePortalProps() {
+export function useMantinePortalProps():
+  | {
+    portalProps: { target: HTMLDivElement }
+    withinPortal: true
+  }
+  | {
+    withinPortal: false
+    portalProps?: never
+  }
+{
   const target = useRootContainer()
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
 }

package/src/hooks/useSearchActor.ts

@@ -0,0 +1,11 @@
+import type { SearchActorRef } from '../search/searchActor'
+import type { DiagramActorSnapshot } from '../state/types'
+import { useDiagramActorSnapshot } from './useDiagram'
+
+const select = (s: DiagramActorSnapshot) => {
+  return s.children.search ?? null
+}
+
+export function useSearchActorRef(): SearchActorRef | null {
+  return useDiagramActorSnapshot(select, Object.is)
+}

package/src/hooks/useUpdateEffect.ts

@@ -2,7 +2,7 @@ import {
   type DependenciesComparator,
   type EffectHook,
   useCustomCompareEffect,
-  useFirstMountState
+  useFirstMountState,
 } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { type DependencyList, type EffectCallback } from 'react'
@@ -17,6 +17,9 @@ export const depsShallowEqual: DependenciesComparator = (d1, d2) => {
     return false
   }
   for (const [i, element] of d1.entries()) {
+    if (element === d2[i]) {
+      continue
+    }
     if (!shallowEqual(element, d2[i])) {
       return false
     }
@@ -26,18 +29,18 @@ export const depsShallowEqual: DependenciesComparator = (d1, d2) => {
 
 export function useUpdateEffect<
   Callback extends EffectCallback = EffectCallback,
-  Deps extends DependencyList = DependencyList
+  Deps extends DependencyList = DependencyList,
 >(
   callback: Callback,
   deps: Deps,
   equalityFn?: DependenciesComparator<Deps>,
-  effectHook?: EffectHook<Callback, Deps>
+  effectHook?: EffectHook<Callback, Deps>,
 ) {
   const isFirstMount = useFirstMountState()
   useCustomCompareEffect(
     isFirstMount ? noop as Callback : callback,
     deps,
     equalityFn ?? depsShallowEqual,
-    effectHook
+    effectHook,
   )
 }

package/src/hooks/useXYFlow.ts

@@ -20,6 +20,11 @@ export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
 export const useXYInternalNode = useInternalNode<Types.Node>
 
+const selectCurrentZoom = (state: ReactFlowState) => Math.round(state.transform[2] * 100) / 100
+export function useCurrentZoom(): number {
+  return useStore(selectCurrentZoom)
+}
+
 const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
 export function useIsZoomTooSmall(): boolean {
   return useStore(selectZoom)

package/src/likec4diagram/DiagramUI.tsx

@@ -1,7 +1,9 @@
 import { memo } from 'react'
 import { useEnabledFeatures } from '../context'
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
+import { useSearchActorRef } from '../hooks/useSearchActor'
 import { Overlays } from '../overlays/Overlays'
+import { Search } from '../search/Search'
 import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
 
 export const DiagramUI = memo(() => {
@@ -9,9 +11,11 @@ export const DiagramUI = memo(() => {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough,
+    enableSearch,
   } = useEnabledFeatures()
 
   const overlaysActorRef = useOverlaysActorRef()
+  const searchActorRef = useSearchActorRef()
 
   return (
     <>
@@ -20,6 +24,7 @@ export const DiagramUI = memo(() => {
       {enableViewTitle && <DiagramTitlePanel />}
       {enableNotations && <NotationPanel />}
       {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
     </>
   )
 })

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -3,8 +3,9 @@ import { cx } from '@likec4/styles/css'
 import { useCallbackRef, useDebouncedCallback, useTimeout } from '@mantine/hooks'
 import { useCustomCompareMemo } from '@react-hookz/web'
 import type { OnMove, OnMoveEnd } from '@xyflow/system'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, memo } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren } from 'react'
+import type { Simplify } from 'type-fest'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics'
@@ -46,32 +47,25 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   shallowEqual(a.viewport ?? null, b.viewport ?? null)
 
 export type LikeC4DiagramXYFlowProps = PropsWithChildren<
-  Pick<
-    LikeC4DiagramProperties,
-    | 'background'
-    | 'nodesDraggable'
-    | 'nodesSelectable'
-    | 'reactFlowProps'
-    | 'renderNodes'
+  Simplify<
+    Pick<
+      LikeC4DiagramProperties<any>,
+      | 'background'
+      | 'nodesDraggable'
+      | 'nodesSelectable'
+      | 'reactFlowProps'
+      | 'renderNodes'
+    >
   >
 >
-
-const compareProps = <T extends LikeC4DiagramXYFlowProps>(a: T, b: T): boolean =>
-  a.nodesDraggable == b.nodesDraggable &&
-  a.nodesSelectable == b.nodesSelectable &&
-  a.children == b.children &&
-  deepEqual(a.background, b.background) &&
-  deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {}) &&
-  shallowEqual(a.renderNodes ?? {}, b.renderNodes ?? {})
-
-export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
+export function LikeC4DiagramXYFlow({
   background = 'dots',
   nodesDraggable = false,
   nodesSelectable = false,
   reactFlowProps = {},
   children,
   renderNodes,
-}) => {
+}: LikeC4DiagramXYFlowProps) {
   const diagram = useDiagram()
   const {
     initialized,
@@ -131,7 +125,9 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
           'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes['compound-element'],
           'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes['compound-deployment'],
           'view-group': renderNodes?.viewGroup ?? defaultNodeTypes['view-group'],
-        } satisfies { [key in Types.Node['type']]: any }
+        } satisfies {
+          [key in Types.Node['type']]: any
+        }
       },
       [renderNodes],
       shallowEqual,
@@ -139,104 +135,105 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
 
   useUpdateEffect(() => {
     console.warn('renderNodes changed - this might degrade performance')
-  }, [renderNodes])
+  }, [nodeTypes])
 
   return (
-    <BaseXYFlow<Types.Node, Types.Edge>
-      nodes={nodes}
-      edges={edges}
-      className={cx(initialized ? 'initialized' : 'not-initialized')}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      onNodesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyNodeChanges', changes })
-      })}
-      onEdgesChange={useCallbackRef((changes) => {
-        diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
-      })}
-      background={initialized ? background : 'transparent'}
-      // Fitview is handled in onInit
-      fitView={false}
-      onNodeClick={useCallbackRef((e, node) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.nodeClick', node })
-        onNodeClick?.(diagram.findDiagramNode(node.id as NodeId)!, e)
-      })}
-      onEdgeClick={useCallbackRef((e, edge) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.edgeClick', edge })
-        onEdgeClick?.(diagram.findDiagramEdge(edge.id as EdgeId)!, e)
-      })}
-      onPaneClick={useCallbackRef((e) => {
-        e.stopPropagation()
-        diagram.send({ type: 'xyflow.paneClick' })
-        onCanvasClick?.(e as any)
-      })}
-      onDoubleClick={useCallbackRef(e => {
-        e.stopPropagation()
-        e.preventDefault()
-        diagram.send({ type: 'xyflow.paneDblClick' })
-        onCanvasDblClick?.(e as any)
-      })}
-      onNodeMouseEnter={useCallbackRef((_event, node) => {
-        _event.stopPropagation()
-        if (!node.data.hovered) {
-          diagram.send({ type: 'xyflow.nodeMouseEnter', node })
-        }
-      })}
-      onNodeMouseLeave={useCallbackRef((_event, node) => {
-        _event.stopPropagation()
-        if (node.data.hovered) {
-          diagram.send({ type: 'xyflow.nodeMouseLeave', node })
-        }
-      })}
-      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        _event.stopPropagation()
-        if (!edge.data.hovered) {
-          diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
-        }
-      })}
-      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        _event.stopPropagation()
-        if (edge.data.hovered) {
-          diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
-        }
-      })}
-      {...props.pannable && {
-        onMove,
-      }}
-      onMoveEnd={onMoveEnd}
-      onInit={useCallbackRef((instance) => {
-        diagram.send({ type: 'xyflow.init', instance })
-      })}
-      onNodeContextMenu={useCallbackRef((event, node) => {
-        const diagramNode = nonNullable(
-          diagram.findDiagramNode(node.id as NodeId),
-          `diagramNode ${node.id} not found`,
-        )
-        onNodeContextMenu?.(diagramNode, event)
-      })}
-      onEdgeContextMenu={useCallbackRef((event, edge) => {
-        const diagramEdge = nonNullable(
-          diagram.findDiagramEdge(edge.id as EdgeId),
-          `diagramEdge ${edge.id} not found`,
-        )
-        onEdgeContextMenu?.(diagramEdge, event)
-      })}
-      onPaneContextMenu={useCallbackRef((event) => {
-        onCanvasContextMenu?.(event as any)
-      })}
-      {...enableFitView && {
-        onViewportResize,
-      }}
-      nodesDraggable={notReadOnly && nodesDraggable}
-      nodesSelectable={nodesSelectable}
-      {...(notReadOnly && nodesDraggable && layoutConstraints)}
-      {...props}
-      {...reactFlowProps}>
+    <>
+      <BaseXYFlow<Types.Node, Types.Edge>
+        nodes={nodes}
+        edges={edges}
+        className={cx(initialized ? 'initialized' : 'not-initialized')}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onNodesChange={useCallbackRef((changes) => {
+          diagram.send({ type: 'xyflow.applyNodeChanges', changes })
+        })}
+        onEdgesChange={useCallbackRef((changes) => {
+          diagram.send({ type: 'xyflow.applyEdgeChanges', changes })
+        })}
+        background={initialized ? background : 'transparent'}
+        // Fitview is handled in onInit
+        fitView={false}
+        onNodeClick={useCallbackRef((e, node) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.nodeClick', node })
+          onNodeClick?.(diagram.findDiagramNode(node.id as NodeId)!, e)
+        })}
+        onEdgeClick={useCallbackRef((e, edge) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.edgeClick', edge })
+          onEdgeClick?.(diagram.findDiagramEdge(edge.id as EdgeId)!, e)
+        })}
+        onPaneClick={useCallbackRef((e) => {
+          e.stopPropagation()
+          diagram.send({ type: 'xyflow.paneClick' })
+          onCanvasClick?.(e as any)
+        })}
+        onDoubleClick={useCallbackRef(e => {
+          e.stopPropagation()
+          e.preventDefault()
+          diagram.send({ type: 'xyflow.paneDblClick' })
+          onCanvasDblClick?.(e as any)
+        })}
+        onNodeMouseEnter={useCallbackRef((_event, node) => {
+          _event.stopPropagation()
+          if (!node.data.hovered) {
+            diagram.send({ type: 'xyflow.nodeMouseEnter', node })
+          }
+        })}
+        onNodeMouseLeave={useCallbackRef((_event, node) => {
+          _event.stopPropagation()
+          if (node.data.hovered) {
+            diagram.send({ type: 'xyflow.nodeMouseLeave', node })
+          }
+        })}
+        onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+          _event.stopPropagation()
+          if (!edge.data.hovered) {
+            diagram.send({ type: 'xyflow.edgeMouseEnter', edge })
+          }
+        })}
+        onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+          _event.stopPropagation()
+          if (edge.data.hovered) {
+            diagram.send({ type: 'xyflow.edgeMouseLeave', edge })
+          }
+        })}
+        {...props.pannable && {
+          onMove,
+        }}
+        onMoveEnd={onMoveEnd}
+        onInit={useCallbackRef((instance) => {
+          diagram.send({ type: 'xyflow.init', instance })
+        })}
+        onNodeContextMenu={useCallbackRef((event, node) => {
+          const diagramNode = nonNullable(
+            diagram.findDiagramNode(node.id as NodeId),
+            `diagramNode ${node.id} not found`,
+          )
+          onNodeContextMenu?.(diagramNode, event)
+        })}
+        onEdgeContextMenu={useCallbackRef((event, edge) => {
+          const diagramEdge = nonNullable(
+            diagram.findDiagramEdge(edge.id as EdgeId),
+            `diagramEdge ${edge.id} not found`,
+          )
+          onEdgeContextMenu?.(diagramEdge, event)
+        })}
+        onPaneContextMenu={useCallbackRef((event) => {
+          onCanvasContextMenu?.(event as any)
+        })}
+        {...enableFitView && {
+          onViewportResize,
+        }}
+        nodesDraggable={notReadOnly && nodesDraggable}
+        nodesSelectable={nodesSelectable}
+        {...(notReadOnly && nodesDraggable && layoutConstraints)}
+        {...props}
+        {...reactFlowProps}>
+        {children}
+      </BaseXYFlow>
       <DiagramUI key={'DiagramUI'} />
-      {children}
-    </BaseXYFlow>
+    </>
   )
-}, compareProps)
-LikeC4DiagramXYFlow.displayName = 'LikeC4DiagramXYFlow'
+}

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -193,6 +193,10 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       }
       setIsControlPointDragging(false)
     }
+    const onClick = (e: MouseEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+    }
 
     domNode.addEventListener('pointermove', onPointerMove, {
       capture: true,
@@ -201,6 +205,11 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       once: true,
       capture: true,
     })
+    // Handle click to prevent it from being handled by the edge #1945
+    domNode.addEventListener('click', onClick, {
+      capture: true,
+      once: true,
+    })
   }
 
   const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -1,11 +1,10 @@
 import {
   type DiagramEdge,
+  type DiagramNode,
   type EdgeId,
-  type LikeC4Model,
-  type NodeId,
-  DiagramNode,
   nameFromFqn,
 } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { css, cx } from '@likec4/styles/css'
 import {
   type StackProps,
@@ -63,13 +62,15 @@ export const RelationshipsDropdownMenu = memo((
   }>,
 ) => {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    useCallback(ctx => ({
+    ctx => ({
       diagramEdge: findDiagramEdge(ctx, edgeId),
       sourceNode: findDiagramNode(ctx, source),
       targetNode: findDiagramNode(ctx, target),
-    }), [edgeId, source, target]),
+    }),
+    undefined,
+    [edgeId, source, target],
   )
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const diagram = useDiagram()
 
   const portalProps = useMantinePortalProps()
@@ -266,15 +267,15 @@ const Relationship = forwardRef<
 })
 
 function getShortId(
-  r: LikeC4Model.AnyRelation<LikeC4Model.Any>,
-  actualEndpointId: NodeId<string>,
+  r: LikeC4Model.AnyRelation,
+  actualEndpointId: string,
   diagramNode: DiagramNode,
 ) {
   const diagramNodeId = r.isDeploymentRelation()
     // Relation defined in deployment model. Use id of the deployment node as is.
     ? diagramNode.id
     // Relation defined in model. Get id of the model element
-    : DiagramNode.modelRef(diagramNode) || ''
+    : diagramNode.modelRef || ''
 
   return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length)
 }