@likec4/diagram 1.17.1 → 1.19.0

package/src/overlays/element-details/TabPanelStructure.tsx

@@ -7,27 +7,27 @@ import * as css from './TabPanelStructure.css'
 interface ElementTreeNodeData {
   label: ReactNode
   value: string
-  element: LikeC4Model.ElementModel
+  element: LikeC4Model.Element
   type: 'ancestor' | 'current' | 'descedant'
   children: TreeNodeData[]
 }
 
-interface MessageNodeData {
+export interface MessageNodeData {
   label: ReactNode
   value: string
   type: 'message'
   children: TreeNodeData[]
 }
 
-type TreeNodeData = ElementTreeNodeData | MessageNodeData
+export type TreeNodeData = ElementTreeNodeData | MessageNodeData
 
-type TabElementStructureProps = {
-  element: LikeC4Model.ElementModel
+type TabPanelStructureProps = {
+  element: LikeC4Model.Element
 }
 
-const ElementLabel = ({
+export const ElementLabel = ({
   element
-}: { element: LikeC4Model.ElementModel; type: 'ancestor' | 'current' | 'descedant' }) => (
+}: { element: LikeC4Model.Element; type: 'ancestor' | 'current' | 'descedant' }) => (
   <Box className={css.elementLabel}>
     <Text component="div" fz={'sm'} fw={'500'}>{element.title}</Text>
   </Box>
@@ -38,9 +38,9 @@ const ElementLabel = ({
 // }: RenderTreeNodePayload) => {
 // }
 
-export function TabElementStructure({
+export function TabPanelStructure({
   element
-}: TabElementStructureProps) {
+}: TabPanelStructureProps) {
   const tree = useTree({
     multiple: false
   })
@@ -60,7 +60,7 @@ export function TabElementStructure({
       value: element.id,
       element,
       type: 'current',
-      children: element.children().map((child): TreeNodeData => ({
+      children: [...element.children()].map((child): TreeNodeData => ({
         label: <ElementLabel type="descedant" element={child} />,
         value: child.id,
         element: child,

package/src/overlays/relationships-of/RelationshipsOverlay.tsx

@@ -93,7 +93,7 @@ export const RelationshipsOverlay = memo<{ subjectId: Fqn }>(function Relationsh
             <Box flex={'1 0 auto'}>
               <SelectElement
                 scope={scope}
-                subject={subject.element}
+                subject={subject.$element}
                 onSelect={fqn =>
                   overlay.openOverlay({
                     relationshipsOf: fqn

package/src/overlays/relationships-of/RelationshipsXYFlow.tsx

@@ -1,13 +1,8 @@
-import { delay, type DiagramView, type Fqn, isAncestor, type Relation } from '@likec4/core'
-import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
-import { useId, useLocalStorage, useStateHistory } from '@mantine/hooks'
+import { type AbstractRelation, delay, type DiagramView, type Fqn, isAncestor } from '@likec4/core'
+import { useId } from '@mantine/hooks'
 import { useDebouncedCallback, useDeepCompareEffect, useSyncedRef } from '@react-hookz/web'
-import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
 import {
-  Background,
-  BackgroundVariant,
   getViewportForBounds,
-  Panel,
   ReactFlow,
   type ReactFlowInstance,
   type ReactFlowProps,
@@ -19,16 +14,13 @@ import {
   useStoreApi
 } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
-import { memo, type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, useRef, useState } from 'react'
 import { isNullish, map, omit, only, prop, setPath, unique } from 'remeda'
 import { useUpdateEffect } from '../../hooks'
-import { useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { centerXYInternalNode } from '../../xyflow/utils'
-import { useOverlayDialog } from '../OverlayContext'
 import { cssReactflowMarker } from '../Overlays.css'
-import type { XYFlowTypes } from './_types'
-import { SelectElement } from './SelectElement'
-import { useLayoutedRelationships, ZIndexes } from './use-layouted-relationships'
+import type { RelationshipsOfFlowTypes } from './_types'
+import { ZIndexes } from './use-layouted-relationships'
 import { CompoundNode } from './xyflow/CompoundNode'
 import { ElementNode } from './xyflow/ElementNode'
 import { EmptyNode } from './xyflow/EmptyNode'
@@ -46,10 +38,10 @@ const edgeTypes = {
 /**
  * Root node in 'subjects' column
  */
-const findRootSubject = (nodes: XYFlowTypes.Node[]) =>
-  nodes.find((n): n is XYFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
+const findRootSubject = (nodes: RelationshipsOfFlowTypes.Node[]) =>
+  nodes.find((n): n is RelationshipsOfFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
 
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
+const resetDimmedAndHovered = (xyflow: ReactFlowInstance<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
     edges.map(edge => ({
       ...edge,
@@ -70,12 +62,12 @@ const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlo
           dimmed: false,
           hovered: false
         }
-      }) as XYFlowTypes.Node
+      }) as RelationshipsOfFlowTypes.Node
     )
   )
 }
 
-const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowTypes.Edge[]) => {
+const animateEdge = (node: RelationshipsOfFlowTypes.Node, animated = true) => (edges: RelationshipsOfFlowTypes.Edge[]) => {
   return edges.map(edge => {
     const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
       || isAncestor(node.id, edge.target)
@@ -86,10 +78,10 @@ const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowT
   })
 }
 
-const onlyOneUnique = <T extends keyof Relation>(
-  data: XYFlowTypes.Edge['data'],
+const onlyOneUnique = <T extends keyof AbstractRelation>(
+  data: RelationshipsOfFlowTypes.Edge['data'],
   property: T
-): Relation[T] | undefined => {
+): AbstractRelation[T] | undefined => {
   return only(unique(map(data.relations, prop(property))))
 }
 
@@ -97,8 +89,8 @@ type RelationshipsXYFlowProps =
   & PropsWithChildren<{
     subjectId: Fqn
     view: DiagramView
-    nodes: XYFlowTypes.Node[]
-    edges: XYFlowTypes.Edge[]
+    nodes: RelationshipsOfFlowTypes.Node[]
+    edges: RelationshipsOfFlowTypes.Edge[]
     bounds: {
       x: number
       y: number
@@ -108,7 +100,7 @@ type RelationshipsXYFlowProps =
     viewportPadding?: number | undefined
   }>
   & Pick<
-    ReactFlowProps<XYFlowTypes.Node, XYFlowTypes.Edge>,
+    ReactFlowProps<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>,
     | 'onNodeClick'
     | 'elementsSelectable'
     | 'maxZoom'
@@ -130,10 +122,10 @@ function RelationshipsXYFlowWrapped({
 }: RelationshipsXYFlowProps) {
   const id = useId()
 
-  const lastClickedNodeRef = useRef<XYFlowTypes.NonEmptyNode | null>(null)
+  const lastClickedNodeRef = useRef<RelationshipsOfFlowTypes.NonEmptyNode | null>(null)
 
-  const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
+  const xyflow = useReactFlow<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
+  const xystore = useStoreApi<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
 
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true)
 
@@ -191,7 +183,7 @@ function RelationshipsXYFlowWrapped({
 
     // If subject node is the same, don't animate
     if (currentSubjectNode && nextSubjectNode?.data.fqn === currentSubjectNode.data.fqn) {
-      setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
+      setNodes(map(nodes, setPath(['data', 'entering'], false)))
       setEdges(edges)
       fitview()
       return
@@ -235,7 +227,7 @@ function RelationshipsXYFlowWrapped({
               dimmed: n.data.column === 'subjects' ? 'immediate' : false
             }
             // hidden: n.data.column === 'subjects'
-          } as XYFlowTypes.Node
+          } as RelationshipsOfFlowTypes.Node
         }
         // Move existing node
         return {
@@ -250,7 +242,7 @@ function RelationshipsXYFlowWrapped({
             leaving: false,
             dimmed: false
           }
-        } as XYFlowTypes.Node
+        } as RelationshipsOfFlowTypes.Node
       }))
       setEdges(_edges.map(e => ({
         ...e,
@@ -290,7 +282,7 @@ function RelationshipsXYFlowWrapped({
         isCancelled = true
       }
     }
-    setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
+    setNodes(map(nodes, setPath(['data', 'entering'], false)))
     setEdges(edges)
     fitview()
     return undefined
@@ -299,8 +291,8 @@ function RelationshipsXYFlowWrapped({
   return (
     <ReactFlow
       id={id}
-      defaultEdges={[] as XYFlowTypes.Edge[]}
-      defaultNodes={[] as XYFlowTypes.Node[]}
+      defaultEdges={[] as RelationshipsOfFlowTypes.Edge[]}
+      defaultNodes={[] as RelationshipsOfFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultMarkerColor="var(--likec4-relation-lineColor)"
@@ -352,7 +344,7 @@ function RelationshipsXYFlowWrapped({
               ...n.data,
               dimmed: n.id !== edge.source && n.id !== edge.target
             }
-          } as XYFlowTypes.Node))
+          } as RelationshipsOfFlowTypes.Node))
         )
       }}
       onEdgeMouseLeave={() => {

package/src/overlays/relationships-of/SelectElement.tsx

@@ -1,4 +1,4 @@
-import { ancestorsFqn, type Element, type Fqn, type ViewID } from '@likec4/core'
+import { ancestorsFqn, type Element, type Fqn, type ViewId } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -25,7 +25,7 @@ export const SelectElement = ({
   onSelect
 }: {
   subject: Element
-  viewId: ViewID
+  viewId: ViewId
   scope: 'global' | 'view'
   onSelect: (id: Fqn) => void
 }) => {

package/src/overlays/relationships-of/_types.ts

@@ -1,78 +1,40 @@
-import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
-import type {
-  Edge as ReactFlowEdge,
-  InternalNode as ReactFlowInternalNode,
-  Node as ReactFlowNode,
-  ReactFlowInstance
-} from '@xyflow/react'
-import type { SetRequired } from 'type-fest'
+import type { AddEdgeData, AddNodeData } from '../../utils/types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+
+export namespace RelationshipsOfFlowTypes {
 
-export namespace XYFlowTypes {
   /**
-   * Handle in ReactFlow terms
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the node types
+   * provided by SharedFlowTypes.
    */
-  export type Port = {
-    id: string
-    type: 'in' | 'out'
-  }
-
-  type NodeProps = {
+  type RelationshipsOfNodeData = {
     depth?: number
     column: 'incomers' | 'subjects' | 'outgoers'
-    fqn: Fqn
     existsInCurrentView: boolean
-    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
-    ports: {
-      left: Port[]
-      right: Port[]
-    }
-    navigateTo: ViewID | null
-    hovered?: boolean
     layoutId?: string
-    leaving?: boolean
-    /**
-     * @default true
-     */
-    initialAnimation?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
   }
 
-  export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
+  // Extend the node types provided by SharedFlowTypes with RelationshipsOfNodeData
+
+  export type ElementNode = AddNodeData<SharedFlowTypes.ElementNode, RelationshipsOfNodeData>
 
-  export type CompoundNode = SetRequired<ReactFlowNode<NodeProps, 'compound'>, 'type'>
+  export type CompoundNode = AddNodeData<SharedFlowTypes.CompoundNode, RelationshipsOfNodeData>
 
   export type NonEmptyNode = ElementNode | CompoundNode
 
-  export type EmptyNode = SetRequired<
-    ReactFlowNode<{
-      column: 'incomers' | 'subjects' | 'outgoers'
-      hovered?: boolean
-      dimmed?: boolean
-      /**
-       * @default true
-       */
-      initialAnimation?: boolean
-    }, 'empty'>,
-    'type'
-  >
+  export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>
 
   export type Node = NonEmptyNode | EmptyNode
 
-  export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
-    data: {
-      relations: [Relation, ...Relation[]]
-      includedInCurrentView: boolean
-      hovered?: boolean
-      dimmed?: 'immediate' | boolean
-    }
-    type: 'relation'
+  /**
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type RelationshipsOfEdgeData = {
+    existsInCurrentView: boolean
   }
 
-  export type Instance = ReactFlowInstance<Node, Edge>
+  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
-  export type InternalNode = ReactFlowInternalNode<Node>
+  export type Edge = AddEdgeData<SharedFlowTypes.Edge, RelationshipsOfEdgeData>
 }

package/src/overlays/relationships-of/use-layouted-relationships.ts

@@ -11,7 +11,7 @@ import {
   type LikeC4Model,
   nonNullable,
   parentFqn,
-  type RelationID
+  type RelationId
 } from '@likec4/core'
 import { MarkerType } from '@xyflow/system'
 import { useMemo } from 'react'
@@ -38,7 +38,7 @@ import {
   tap
 } from 'remeda'
 import { useLikeC4Model } from '../../likec4model'
-import type { XYFlowTypes } from './_types'
+import type { RelationshipsOfFlowTypes } from './_types'
 
 const columns = ['incomers', 'subjects', 'outgoers'] as const
 type ColumnKey = typeof columns[number]
@@ -118,15 +118,12 @@ function createGraph() {
   return g
 }
 
-type LikeC4ModelElement = LikeC4Model.ElementModel
-// type LikeC4ModelElement = LikeC4ViewModel.Element
-
 type Context = {
   scope: 'global' | 'view'
   g: dagre.graphlib.Graph
   subjectId: Fqn
   diagramNodes: Map<Fqn, DiagramNode>
-  subjectElement: LikeC4ModelElement
+  subjectElement: LikeC4Model.Element
   // likec4model: LikeC4Model
   // subject: XYFlowTypes.ElementNode
   // Model
@@ -137,11 +134,11 @@ type Context = {
     outgoers: Set<Fqn>
   }
   columns: {
-    incomers: Map<Fqn, XYFlowTypes.Node>
-    subjects: Map<Fqn, XYFlowTypes.Node>
-    outgoers: Map<Fqn, XYFlowTypes.Node>
+    incomers: Map<Fqn, RelationshipsOfFlowTypes.Node>
+    subjects: Map<Fqn, RelationshipsOfFlowTypes.Node>
+    outgoers: Map<Fqn, RelationshipsOfFlowTypes.Node>
   }
-  edges: XYFlowTypes.Edge[]
+  edges: RelationshipsOfFlowTypes.Edge[]
 }
 
 const sized = (height: number = Sizes.hodeHeight) => ({
@@ -149,7 +146,7 @@ const sized = (height: number = Sizes.hodeHeight) => ({
   height
 })
 
-const graphId = (node: XYFlowTypes.Node) => ({
+const graphId = (node: RelationshipsOfFlowTypes.Node) => ({
   id: node.id,
   port: node.type === 'compound' ? `${node.id}::port` : node.id,
   body: `${node.id}`,
@@ -157,9 +154,9 @@ const graphId = (node: XYFlowTypes.Node) => ({
 })
 
 function nodeData(
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context
-): Omit<XYFlowTypes.NonEmptyNode['data'], 'column'> {
+): Omit<RelationshipsOfFlowTypes.NonEmptyNode['data'], 'column'> {
   // We try to inherit style from existing diagram node
   let diagramNode = ctx.diagramNodes.get(element.id)
 
@@ -167,7 +164,7 @@ function nodeData(
   // color from it if there is no diagram node
   const ancestor = diagramNode ?? (ctx.scope === 'view'
     ? pipe(
-      element.ancestors(),
+      element.ancestors().toArray(),
       map(ancestor => ctx.diagramNodes.get(ancestor.id)),
       filter(isTruthy),
       first()
@@ -180,14 +177,14 @@ function nodeData(
     element: {
       kind: element.kind,
       title: diagramNode?.title ?? element.title,
-      description: diagramNode?.description ?? element.element.description,
+      description: diagramNode?.description ?? element.description,
       color: diagramNode?.color ?? ancestor?.color ?? element.color,
       shape: diagramNode?.shape ?? element.shape
     },
-    navigateTo: diagramNode?.navigateTo ?? first(element.viewsOf())?.id ?? null,
+    navigateTo: diagramNode?.navigateTo ?? element.defaultView?.id ?? null,
     ports: {
-      left: [],
-      right: []
+      in: [],
+      out: []
     }
   }
 }
@@ -195,7 +192,7 @@ function nodeData(
 function createEmptyNode(
   column: ColumnKey,
   ctx: Context
-): XYFlowTypes.EmptyNode {
+): RelationshipsOfFlowTypes.EmptyNode {
   const id = `${column}__empty` as Fqn
   const xynodes = ctx.columns[column]
   let node = xynodes.get(id)
@@ -203,12 +200,13 @@ function createEmptyNode(
     invariant(node.type === 'empty', 'Node is not empty')
     return node
   }
-  const xynode: XYFlowTypes.EmptyNode = {
+  const xynode: RelationshipsOfFlowTypes.EmptyNode = {
     type: 'empty',
     id,
     position: { x: 0, y: 0 },
     data: {
-      column
+      column,
+      existsInCurrentView: true
     },
     zIndex: ZIndexes.empty
   }
@@ -227,11 +225,11 @@ function createEmptyNode(
 
 function createNode(
   column: ColumnKey,
-  nodeType: Exclude<XYFlowTypes.Node['type'], 'empty'>,
-  element: LikeC4Model.ElementModel,
+  nodeType: Exclude<RelationshipsOfFlowTypes.Node['type'], 'empty'>,
+  element: LikeC4Model.Element,
   ctx: Context,
   depth: number = 0
-): XYFlowTypes.ElementNode | XYFlowTypes.CompoundNode {
+): RelationshipsOfFlowTypes.ElementNode | RelationshipsOfFlowTypes.CompoundNode {
   const xynodes = ctx.columns[column]
   let node = xynodes.get(element.id)
   if (node) {
@@ -245,7 +243,7 @@ function createNode(
 
   // Create parent node
   const parent = pipe(
-    element.ancestors(),
+    element.ancestors().toArray(),
     takeWhile(ancestor => !isAncestor(ancestor.id, ctx.subjectId)),
     find(ancestor =>
       ctx.diagramNodes.has(ancestor.id) || ctx.connected[column].has(ancestor.id)
@@ -254,7 +252,7 @@ function createNode(
     found => found ? createNode(column, 'compound', found, ctx, depth + 2) : null
   )
 
-  const xynode: XYFlowTypes.NonEmptyNode = {
+  const xynode: RelationshipsOfFlowTypes.NonEmptyNode = {
     type: nodeType,
     id: `${column}::${element.id}`,
     position: { x: 0, y: 0 },
@@ -292,7 +290,7 @@ function createNode(
  * And return a function to get node bounds for xyflow
  */
 function applyDagreLayout(g: dagre.graphlib.Graph) {
-  type NodeBounds = Required<Pick<XYFlowTypes.Node, 'position' | 'width' | 'height'>>
+  type NodeBounds = Required<Pick<RelationshipsOfFlowTypes.Node, 'position' | 'width' | 'height'>>
   dagre.layout(g)
   return function nodeBounds(nodeId: string): NodeBounds {
     const { x, y, width, height } = g.node(nodeId)
@@ -310,18 +308,18 @@ function applyDagreLayout(g: dagre.graphlib.Graph) {
 function addEdge(
   ctx: Context,
   props: {
-    includedInCurrentView: boolean
+    existsInCurrentView: boolean
     source: string
     target: string
-    relations: XYFlowTypes.Edge['data']['relations']
+    relations: RelationshipsOfFlowTypes.Edge['data']['relations']
   }
 ) {
-  const { source, target, relations, includedInCurrentView } = props
+  const { source, target, relations, existsInCurrentView } = props
   const ids = relations.map(r => r.id).join('_')
   const label = only(relations)?.title ?? 'untitled'
 
   const isMultiple = relations.length > 1
-  const edge: XYFlowTypes.Edge = {
+  const edge: RelationshipsOfFlowTypes.Edge = {
     id: `rel${ctx.edges.length + 1}_${ids}`,
     type: 'relation',
     source,
@@ -329,7 +327,7 @@ function addEdge(
     sourceHandle: target,
     targetHandle: source,
     data: {
-      includedInCurrentView,
+      existsInCurrentView: existsInCurrentView,
       relations
     },
     label: isMultiple ? `${relations.length} relationships` : label,
@@ -363,9 +361,9 @@ function layout(
 ): {
   viewIncludesSubject: boolean
   notIncludedRelations: number
-  subject: LikeC4ModelElement
-  nodes: XYFlowTypes.Node[]
-  edges: XYFlowTypes.Edge[]
+  subject: LikeC4Model.Element
+  nodes: RelationshipsOfFlowTypes.Node[]
+  edges: RelationshipsOfFlowTypes.Edge[]
   bounds: {
     x: number
     y: number
@@ -375,13 +373,14 @@ function layout(
 } {
   const diagramNodes = new Map(view.nodes.map(n => [n.id, n]))
   const subjectElement = likec4model.element(subjectId)
+
   const viewIncludesSubject = diagramNodes.has(subjectId)
 
   const viewRelationships = new Set(
     view.edges.flatMap(e => e.relations)
   )
   // Relations that are not included in the view
-  const notIncludedRelations = new Set<RelationID>()
+  const notIncludedRelations = new Set<RelationId>()
 
   if (!viewIncludesSubject) {
     // Reset scope to global if subject is not in the view
@@ -401,16 +400,18 @@ function layout(
 
   if (scope === 'global') {
     relationships = {
-      incoming: subjectElement.incoming().map(r => r.relationship),
-      outgoing: subjectElement.outgoing().map(r => r.relationship)
+      incoming: subjectElement.incoming().map(r => r.$relationship).toArray(),
+      outgoing: subjectElement.outgoing().map(r => r.$relationship).toArray()
     }
   } else {
-    const subjectViewModel = likec4model.view(view.id).element(subjectId)
+    const subjectViewModel = likec4model.view(view.id).node(subjectId)
     relationships = {
       incoming: subjectViewModel.incoming()
-        .flatMap(c => c.relationships().map(r => r.relationship)),
+        .flatMap(c => c.relationships('model').map(r => r.$relationship))
+        .toArray(),
       outgoing: subjectViewModel.outgoing()
-        .flatMap(c => c.relationships().map(r => r.relationship))
+        .flatMap(c => c.relationships('model').map(r => r.$relationship))
+        .toArray()
     }
   }
 
@@ -445,7 +446,7 @@ function layout(
   })
 
   if (viewIncludesSubject) {
-    const subjectViewModel = likec4model.view(view.id).element(subjectId)
+    const subjectViewModel = likec4model.view(view.id).node(subjectId)
     subjectViewModel.incomers().forEach(incomer => {
       ctx.connected.incomers.add(incomer.id)
     })
@@ -501,7 +502,7 @@ function layout(
           relation,
           source,
           target,
-          includedInCurrentView: viewRelationships.has(relation.id),
+          existsInCurrentView: viewRelationships.has(relation.id),
           id: `${source.id}:${target.id}`
         })
       })
@@ -513,14 +514,8 @@ function layout(
       const { source, target } = grouped[0]
       const relations = map(grouped, g => g.relation)
 
-      source.data.ports.right.push({
-        id: target.id,
-        type: 'out'
-      })
-      target.data.ports.left.push({
-        id: source.id,
-        type: 'in'
-      })
+      source.data.ports.out.push(target.id)
+      target.data.ports.in.push(source.id)
 
       const isAnyCompound = source.type === 'compound' || target.type === 'compound'
 
@@ -531,7 +526,7 @@ function layout(
 
       addEdge(ctx, {
         // if view does not include subject - do not highlight
-        includedInCurrentView: !viewIncludesSubject || grouped.every(g => g.includedInCurrentView),
+        existsInCurrentView: !viewIncludesSubject || grouped.every(g => g.existsInCurrentView),
         source: source.id,
         target: target.id,
         relations
@@ -556,7 +551,7 @@ function layout(
     if (subject.type !== 'element') {
       continue
     }
-    const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length)
+    const subjectPortsCount = Math.max(subject.data.ports.in.length, subject.data.ports.out.length)
     if (subjectPortsCount > 2) {
       g.node(subject.id).height = Sizes.hodeHeight + (subjectPortsCount - 3) * 14
     }
@@ -629,13 +624,13 @@ function layout(
   }
 
   // Sort ports in subject vertically
-  const sortedPorts = (ports: XYFlowTypes.Port[]) => {
+  const sortedPorts = (ports: string[]) => {
     return pipe(
       ports,
       map(port => {
         return {
           port,
-          topY: nodeBounds(port.id).position.y
+          topY: nodeBounds(port).position.y
         }
       }),
       sortBy(prop('topY')),
@@ -659,11 +654,11 @@ function layout(
       continue
     }
     // Sort ports by their position
-    if (node.data.ports.left.length > 1) {
-      node.data.ports.left = sortedPorts(node.data.ports.left)
+    if (node.data.ports.in.length > 1) {
+      node.data.ports.in = sortedPorts(node.data.ports.in)
     }
-    if (node.data.ports.right.length > 1) {
-      node.data.ports.right = sortedPorts(node.data.ports.right)
+    if (node.data.ports.out.length > 1) {
+      node.data.ports.out = sortedPorts(node.data.ports.out)
     }
   }