@likec4/diagram 1.39.5 → 1.40.0

package/src/bundle/LikeC4View.tsx

@@ -5,9 +5,9 @@ import { shallowEqual, useCallbackRef } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { memo, useState } from 'react'
 import { isBoolean } from 'remeda'
+import { FitViewPaddings } from '../base/const'
 import { FramerMotionConfig } from '../context/FramerMotionConfig'
 import { LikeC4Diagram } from '../LikeC4Diagram'
-import type { ViewPadding } from '../LikeC4Diagram.props'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { Overlay } from '../overlays/overlay/Overlay'
 import type { LikeC4ViewProps } from './LikeC4View.props'
@@ -37,13 +37,6 @@ export function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
-const DEFAULT_BROWSER_PADDING: ViewPadding = {
-  top: '50px',
-  bottom: '16px',
-  left: '16px',
-  right: '16px',
-}
-
 type LikeC4ViewInnerProps<A extends t.aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
   view: t.DiagramView<A>
 }
@@ -56,8 +49,6 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
   colorScheme: explicitColorScheme,
   injectFontCss = true,
   controls = false,
-  fitView = true,
-  fitViewPadding = '16px',
   background = 'transparent',
   browser = true,
   showDiagramTitle = false,
@@ -129,8 +120,8 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
             pannable={pannable}
             zoomable={zoomable}
             background={background}
-            fitView={fitView}
-            fitViewPadding={fitViewPadding}
+            fitView={true}
+            fitViewPadding={FitViewPaddings.default}
             showDiagramTitle={showDiagramTitle}
             showNotations={showNotations && hasNotations}
             enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
@@ -152,7 +143,6 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
             // so we don't want enable search and hotkeys
             enableSearch={false}
             {...isBrowserEnabled && {
-              onNavigateTo: onNavigateTo,
               onCanvasClick: onNavigateToThisView,
               onNodeClick: onNavigateToThisView,
             }}
@@ -176,8 +166,8 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps<t.aux.UnknownLayouted>>(({
                 controls="next"
                 readonly
                 fitView
-                fitViewPadding={DEFAULT_BROWSER_PADDING}
                 {...props}
+                fitViewPadding={FitViewPaddings.withControls}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&
                   (browserView.notation?.nodes.length ?? 0) > 0}

package/src/bundle/ReactLikeC4.tsx

@@ -1,5 +1,4 @@
 import type * as t from '@likec4/core/types'
-import type { DiagramView } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type CSSProperties } from 'react'
 import { isFunction, isString } from 'remeda'
@@ -65,7 +64,7 @@ export function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({
 }
 
 type ReactLikeC4InnerProps<A extends t.aux.Any> = Omit<ReactLikeC4Props<A>, 'viewId'> & {
-  view: DiagramView<A>
+  view: t.DiagramView<A>
 }
 function ReactLikeC4Inner<A extends t.aux.Any>({
   className,

package/src/custom/customNodes.ts

@@ -266,10 +266,17 @@ export type CustomViewGroupNodeProps = {
   nodeModel: NodeModel.IsGroup<Any>
 }
 
+export const sequenceActorNode: CustomNodeComponent<CustomSequenceActorNodeProps> = customDiagramNode as any
+export type CustomSequenceActorNodeProps = {
+  nodeProps: NodeProps<Types.SequenceActorNodeData, 'seq-actor'>
+  nodeModel: NodeModel.WithElement<Any>
+}
+
 export interface CustomNodes {
   element?: FunctionComponent<NodeProps<Types.ElementNodeData, 'element'>>
   deployment?: FunctionComponent<NodeProps<Types.DeploymentElementNodeData, 'deployment'>>
   compoundElement?: FunctionComponent<NodeProps<Types.CompoundElementNodeData, 'compound-element'>>
   compoundDeployment?: FunctionComponent<NodeProps<Types.CompoundDeploymentNodeData, 'compound-deployment'>>
   viewGroup?: FunctionComponent<NodeProps<Types.ViewGroupNodeData, 'view-group'>>
+  sequenceActor?: FunctionComponent<NodeProps<Types.SequenceActorNodeData, 'seq-actor'>>
 }

package/src/hooks/useDiagram.ts

@@ -3,6 +3,7 @@ import {
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
+  type DynamicViewDisplayVariant,
   type NodeId,
   type NodeNotation as ElementNotation,
   type scalar,
@@ -115,6 +116,11 @@ export interface DiagramApi {
   highlightNotation(notation: ElementNotation, kind?: string): void
   unhighlightNotation(): void
   openSearch(searchValue?: string): void
+
+  /**
+   * Switch dynamic view display variant
+   */
+  switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void
 }
 
 /**
@@ -246,6 +252,10 @@ export function useDiagram(): DiagramApi {
     openSearch: (searchValue?: string) => {
       actor.send({ type: 'open.search', ...(searchValue && { search: searchValue }) })
     },
+
+    switchDynamicViewVariant: (variant: DynamicViewDisplayVariant) => {
+      actor.send({ type: 'switch.dynamicViewVariant', variant })
+    },
   }), [actor])
 }
 

package/src/likec4diagram/DiagramUI.tsx

@@ -32,7 +32,7 @@ export const DiagramUI = memo(() => {
         : <Controls />}
       {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
       {enableNotations && <NotationPanel />}
-      {enableControls !== 'next' && (
+      {enableControls === true && (
         <>
           {enableViewTitle && <DiagramTitlePanel />}
           {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}

package/src/likec4diagram/DiagramXYFlow.tsx

@@ -3,7 +3,7 @@ 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 { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { type PropsWithChildren } from 'react'
 import type { Simplify } from 'type-fest'
 import { BaseXYFlow } from '../base/BaseXYFlow'
@@ -13,7 +13,7 @@ import { useUpdateEffect } from '../hooks'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
-import { BuiltinNodes as defaultNodeTypes, edgeTypes } from './custom'
+import { BuiltinNodes as defaultNodeTypes, edgeTypes, SequenceParallelArea } from './custom'
 import { DiagramUI } from './DiagramUI'
 import type { Types } from './types'
 import { useLayoutConstraints } from './useLayoutConstraints'
@@ -26,7 +26,9 @@ const selectXYProps = (ctx: DiagramContext) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly,
+  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly
+    // if dynamic view display mode is sequence, enable readonly
+    || (ctx.dynamicViewVariant === 'sequence' && ctx.view._type === 'dynamic'),
   ...(!ctx.features.enableFitView && {
     viewport: {
       x: -Math.min(ctx.view.bounds.x, 0),
@@ -41,7 +43,7 @@ const equalsXYProps = (a: ReturnType<typeof selectXYProps>, b: ReturnType<typeof
   a.zoomable === b.zoomable &&
   a.enableFitView === b.enableFitView &&
   a.enableReadOnly === b.enableReadOnly &&
-  shallowEqual(a.fitViewPadding, b.fitViewPadding) &&
+  deepEqual(a.fitViewPadding, b.fitViewPadding) &&
   shallowEqual(a.nodes, b.nodes) &&
   shallowEqual(a.edges, b.edges) &&
   shallowEqual(a.viewport ?? null, b.viewport ?? null)
@@ -123,7 +125,9 @@ export function LikeC4DiagramXYFlow({
           'compound-element': renderNodes?.compoundElement ?? defaultNodeTypes.compoundElement,
           'compound-deployment': renderNodes?.compoundDeployment ?? defaultNodeTypes.compoundDeployment,
           'view-group': renderNodes?.viewGroup ?? defaultNodeTypes.viewGroup,
-        }
+          'seq-actor': renderNodes?.sequenceActor ?? defaultNodeTypes.sequenceActor,
+          'seq-parallel': SequenceParallelArea,
+        } satisfies Record<Types.Node['type'], any>
       },
       [renderNodes],
       shallowEqual,
@@ -224,6 +228,7 @@ export function LikeC4DiagramXYFlow({
         }}
         nodesDraggable={notReadOnly && nodesDraggable}
         nodesSelectable={nodesSelectable}
+        edgesFocusable={false}
         {...(notReadOnly && nodesDraggable && layoutConstraints)}
         {...props}
         {...reactFlowProps}>

package/src/likec4diagram/convert-to-xyflow.ts

@@ -0,0 +1,45 @@
+import type { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types'
+import type { Types } from './types'
+import { diagramToXY } from './xyflow-diagram/diagram-view'
+import { sequenceViewToXY } from './xyflow-sequence/sequence-view'
+
+type ConvertToXYFlowInput = {
+  view: LayoutedView
+  where: WhereOperator | null
+  nodesSelectable: boolean
+  dynamicViewVariant: DynamicViewDisplayVariant
+}
+
+export function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
+  view: LayoutedView
+  xynodes: Types.Node[]
+  xyedges: Types.Edge[]
+} {
+  const view = params.view
+  const isDynamic = view._type === 'dynamic'
+
+  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === 'sequence'
+    ? sequenceViewToXY(view)
+    : diagramToXY(params)
+
+  if (isDynamic && view.variant !== dynamicViewVariant) {
+    return {
+      view: {
+        ...view,
+        bounds,
+        variant: dynamicViewVariant,
+      },
+      xynodes,
+      xyedges,
+    }
+  }
+
+  return {
+    view: bounds === view.bounds ? view : {
+      ...view,
+      bounds,
+    },
+    xynodes,
+    xyedges,
+  }
+}

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

@@ -329,7 +329,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           <EdgeLabel edgeProps={props}>
             {navigateTo && (
               <EdgeActionButton
-                {...props}
                 onClick={e => {
                   e.stopPropagation()
                   diagram.navigateTo(navigateTo)

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

@@ -0,0 +1,65 @@
+import { getSmoothStepPath } from '@xyflow/system'
+import type { EdgeProps } from '../../../base'
+import { EdgeActionButton, EdgeContainer, EdgeLabel, EdgeLabelContainer, EdgePath } from '../../../base/primitives'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+
+const LABEL_OFFSET = 16
+export function SequenceStepEdge(props: EdgeProps<Types.SequenceStepEdgeData>) {
+  const diagram = useDiagram()
+  const { navigateTo } = props.data
+  const isSelfLoop = props.source === props.target
+  const isBack = props.sourceX > props.targetX
+  const [path] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+    ...(isSelfLoop && {
+      offset: 30,
+      borderRadius: 16,
+    }),
+  })
+
+  let labelX = props.sourceX
+  switch (true) {
+    case isSelfLoop:
+      labelX = props.sourceX + 24 + LABEL_OFFSET
+      break
+    case isBack:
+      labelX = props.sourceX - LABEL_OFFSET
+      break
+    default:
+      labelX = props.sourceX + LABEL_OFFSET
+      break
+  }
+
+  return (
+    <EdgeContainer {...props}>
+      <EdgePath
+        edgeProps={props}
+        svgPath={path}
+      />
+      <EdgeLabelContainer
+        edgeProps={props}
+        labelPosition={{
+          x: labelX,
+          y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
+          translate: isBack ? 'translate(-100%, 0)' : undefined,
+        }}
+      >
+        <EdgeLabel edgeProps={props}>
+          {navigateTo && (
+            <EdgeActionButton
+              onClick={e => {
+                e.stopPropagation()
+                diagram.navigateTo(navigateTo)
+              }} />
+          )}
+        </EdgeLabel>
+      </EdgeLabelContainer>
+    </EdgeContainer>
+  )
+}

package/src/likec4diagram/custom/index.ts

@@ -1,13 +1,15 @@
 import type { CustomNodes } from '../../custom/customNodes'
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
+import { SequenceStepEdge } from './edges/SequenceStepEdge'
 import {
   CompoundDeploymentNode,
   CompoundElementNode,
   DeploymentNode,
   ElementNode,
+  SequenceActorNode,
   ViewGroupNode,
-} from './nodes/nodes'
+} from './nodes'
 
 export const BuiltinNodes = {
   element: ElementNode,
@@ -15,8 +17,12 @@ export const BuiltinNodes = {
   compoundElement: CompoundElementNode,
   compoundDeployment: CompoundDeploymentNode,
   viewGroup: ViewGroupNode,
+  sequenceActor: SequenceActorNode,
 } satisfies Required<CustomNodes>
 
+export { SequenceParallelArea } from './nodes/SequenceActorNode'
+
 export const edgeTypes = {
   relationship: RelationshipEdge,
+  'seq-step': SequenceStepEdge,
 } satisfies { [key in Types.Edge['type']]: any }

package/src/likec4diagram/custom/nodes/ElementActions.tsx

@@ -1,4 +1,4 @@
-import type { NodeId } from '@likec4/core'
+import type { NodeId } from '@likec4/core/types'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { useMemo } from 'react'
 import { hasAtLeast } from 'remeda'
@@ -8,6 +8,8 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
+type RequiredData = Pick<Types.ElementNodeData, 'modelFqn' | 'navigateTo'>
+
 type WithExtraButtons = {
   /**
    * Add extra action buttons
@@ -31,7 +33,7 @@ type WithExtraButtons = {
   extraButtons?: ElementActionButtons.Item[]
 }
 
-export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons
+export type ElementActionsProps = NodeProps<RequiredData> & WithExtraButtons
 
 export const ElementActions = ({
   extraButtons,

package/src/likec4diagram/custom/nodes/SequenceActorNode.tsx

@@ -0,0 +1,175 @@
+import { defaultTheme } from '@likec4/core'
+import { css } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
+import type { NodeProps } from '@xyflow/react'
+import { Handle } from '@xyflow/react'
+import { Position } from '@xyflow/system'
+import { ElementNodeContainer, ElementShape, ElementTitle } from '../../../custom'
+import { type Types } from '../../types'
+import { ElementActions } from './ElementActions'
+import { ElementDetailsButtonWithHandler } from './nodes'
+
+const positionMap: Record<Types.SequenceActorNodePort['position'], Position> = {
+  left: Position.Left,
+  right: Position.Right,
+  top: Position.Top,
+  bottom: Position.Bottom,
+}
+
+const ActorStepPort = ({
+  data,
+  port: p,
+}: {
+  data: Types.SequenceActorNodeData
+  port: Types.SequenceActorNodePort
+}) => {
+  return (
+    <>
+      <Box
+        data-likec4-color={data.color}
+        className={css({
+          position: 'absolute',
+          backgroundColor: 'var(--likec4-palette-fill)',
+          rounded: 'xs',
+          width: {
+            base: '5px',
+            _whenHovered: '7px',
+            _whenSelected: '7px',
+          },
+          // pointerEvents: 'none',
+          transition: 'fast',
+          translateX: '-1/2',
+          translateY: '-1/2',
+          translate: 'auto',
+          // transform: 'translate',
+        })}
+        style={{
+          top: p.cy,
+          left: p.cx,
+          height: p.height,
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }}
+      />
+      <Handle
+        id={p.id}
+        type={p.type}
+        position={positionMap[p.position]}
+        style={{
+          top: p.cy - 3,
+          left: p.cx - 3,
+          width: 6,
+          height: 6,
+          right: 'unset',
+          bottom: 'unset',
+          visibility: 'hidden',
+          transform: p.position === 'left' ? 'translate(-150%, 0)' : 'translate(100%, 0)',
+        }} />
+    </>
+  )
+}
+
+export function SequenceActorNode(props: NodeProps<Types.SequenceActorNode>) {
+  const data = props.data
+  const {
+    positionAbsoluteY,
+    data: {
+      viewHeight,
+      hovered: isHovered = false,
+      ports,
+    },
+  } = props
+
+  return (
+    <>
+      <Box
+        className={css({
+          position: 'absolute',
+          rounded: 'xs',
+          top: '1',
+          pointerEvents: 'none',
+          transition: 'fast',
+          translateX: '-1/2',
+          translate: 'auto',
+          // transform: 'translate',
+        })}
+        style={{
+          // position: 'absolute',
+          backgroundColor: defaultTheme.elements.gray.fill,
+          opacity: isHovered ? 0.5 : 0.4,
+          left: '50%',
+          width: isHovered ? 3 : 2,
+          height: viewHeight - positionAbsoluteY,
+          zIndex: -1,
+          pointerEvents: 'none',
+          // top: p.y,
+          // left: p.width / 2,
+          // height: p.type === 'source' ? 48 : 32,
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }}
+      />
+      {
+        /* <div
+        // css={{
+        //   backgroundColor: 'var(--likec4-palette-fill)',
+        // }}
+        style={{
+          position: 'absolute',
+          backgroundColor: defaultTheme.elements.gray.fill,
+          opacity: 0.5,
+          top: 8,
+          left: 'calc(50% - 1px)',
+          width: 2,
+          height: viewHeight - positionAbsoluteY,
+          zIndex: -1,
+          pointerEvents: 'none',
+        }}>
+      </div> */
+      }
+      <ElementNodeContainer nodeProps={props}>
+        <ElementShape {...props} />
+        <ElementTitle {...props} />
+        {data.modelFqn && (
+          <>
+            <ElementActions {...props} data={data as Types.ElementNodeData} />
+            <ElementDetailsButtonWithHandler {...props} data={data as Types.ElementNodeData} />
+          </>
+        )}
+      </ElementNodeContainer>
+      {ports.map(p => <ActorStepPort key={p.id} port={p} data={props.data} />)}
+    </>
+  )
+}
+
+export function SequenceParallelArea(props: NodeProps<Types.SequenceActorNode>) {
+  return (
+    <Box
+      data-likec4-color={props.data.color}
+      css={{
+        width: '100%',
+        height: '100%',
+        border: 'default',
+        rounded: 'sm',
+        borderWidth: 1,
+        '--_color': {
+          base: 'var(--likec4-palette-stroke)',
+          _dark: '[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]',
+        },
+        borderColor: '[var(--_color)/30]',
+        backgroundColor: 'var(--likec4-palette-fill)/15',
+        pointerEvents: 'none',
+        paddingLeft: '2',
+        paddingTop: '0.5',
+        fontSize: 'xs',
+        fontWeight: 'bold',
+        letterSpacing: '.75px',
+        color: '[var(--_color)/75]',
+      }}
+    >
+      PARALLEL
+    </Box>
+  )
+}

package/src/likec4diagram/custom/nodes/index.ts

@@ -9,6 +9,7 @@ export {
   ElementNode,
   ViewGroupNode,
 } from './nodes'
+export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode'
 
 export * from './CompoundActions'
 export * from './ElementActions'

package/src/likec4diagram/custom/nodes/nodes.tsx

@@ -20,7 +20,7 @@ import { DeploymentElementActions, ElementActions } from './ElementActions'
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
 
-type CustomNodes = Required<CustomNodesType>
+export type CustomNodes = Required<CustomNodesType>
 
 export function ElementDetailsButtonWithHandler(
   props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>,

package/src/likec4diagram/relationship-popover/RelationshipPopover.tsx

@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { clamp, filter, isTruthy, map, partition, pipe } from 'remeda'
+import { clamp, filter, isEmpty, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../components/Link'
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
 import { useEnabledFeatures } from '../../context/DiagramFeatures'
@@ -61,6 +61,7 @@ function selectDiagramContext(c: DiagramContext) {
 }
 
 export const RelationshipPopover = memo(() => {
+  const likec4model = useLikeC4Model()
   const actorRef = useActorRef(RelationshipPopoverActorLogic)
   const diagram = useDiagram()
   const { viewId, selected } = useDiagramContext(selectDiagramContext)
@@ -132,13 +133,42 @@ export const RelationshipPopover = memo(() => {
     [openedEdgeId],
   )
 
-  if (!diagramEdge || !sourceNode || !targetNode) {
+  if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) {
+    return null
+  }
+
+  const [direct, nested] = pipe(
+    diagramEdge.relations,
+    map(id => {
+      try {
+        return likec4model.relationship(id)
+      } catch (e) {
+        // View was cached, but likec4model based on new data
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
+          e,
+        )
+        return null
+      }
+    }),
+    filter(isTruthy),
+    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
+  )
+
+  if (direct.length === 0 && nested.length === 0) {
+    console.warn('No relationships found  diagram edge', {
+      diagramEdge,
+      sourceNode,
+      targetNode,
+    })
     return null
   }
 
   return (
     <RelationshipPopoverInternal
       viewId={viewId}
+      direct={direct}
+      nested={nested}
       diagramEdge={diagramEdge}
       sourceNode={sourceNode}
       targetNode={targetNode}
@@ -153,6 +183,8 @@ const getEdgeLabelElement = (edgeId: string, container: HTMLDivElement | undefin
 
 type RelationshipPopoverInternalProps = {
   viewId: ViewId
+  direct: LikeC4Model.AnyRelation[]
+  nested: LikeC4Model.AnyRelation[]
   diagramEdge: DiagramEdge
   sourceNode: DiagramNode
   targetNode: DiagramNode
@@ -163,6 +195,8 @@ const POPOVER_PADDING = 8
 const RelationshipPopoverInternal = ({
   viewId,
   diagramEdge,
+  direct,
+  nested,
   sourceNode,
   targetNode,
   onMouseEnter,
@@ -240,36 +274,8 @@ const RelationshipPopoverInternal = ({
     }
   }, [referenceEl])
 
-  const likec4model = useLikeC4Model()
   const diagram = useDiagram()
 
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map(id => {
-      try {
-        return likec4model.relationship(id)
-      } catch (e) {
-        // View was cached, but likec4model based on new data
-        console.error(
-          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
-          e,
-        )
-        return null
-      }
-    }),
-    filter(isTruthy),
-    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
-  )
-
-  if (direct.length === 0 && nested.length === 0) {
-    console.error('No relationships found  diagram edge', {
-      diagramEdge,
-      sourceNode,
-      targetNode,
-    })
-    return null
-  }
-
   const navigateTo = enableNavigateTo
     ? (viewId: ViewId) => {
       diagram.navigateTo(viewId)