@likec4/diagram 1.27.0 → 1.27.2

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -0,0 +1,195 @@
+import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
+import {
+  type AbstractRelation,
+  type DiagramEdge,
+  type DiagramView,
+  type EdgeId,
+  type Fqn,
+  type LikeC4Model,
+  type XYPoint,
+  compareFqnHierarchically,
+  compareRelations,
+  DiagramNode,
+  invariant,
+  isAncestor,
+  nonNullable,
+  Queue,
+} from '@likec4/core'
+import { useSelector } from '@xstate/react'
+import { deepEqual } from 'fast-equals'
+import { useMemo } from 'react'
+import { filter, first, forEach, hasAtLeast, isTruthy, map, pipe, prop, reverse, sort, sortBy, takeWhile } from 'remeda'
+import { ZIndexes } from '../../base/const'
+import { useLikeC4Model } from '../../likec4model'
+import type { RelationshipDetailsTypes } from './_types'
+import type { RelationshipDetailsSnapshot } from './actor'
+import {
+  type RelationshipDetailsViewData,
+  computeEdgeDetailsViewData,
+  computeRelationshipDetailsViewData,
+} from './compute'
+import { useRelationshipDetailsActor, useRelationshipDetailsState } from './hooks'
+import { type LayoutResult, layoutRelationshipDetails } from './layout'
+
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
+export function layoutResultToXYFlow(
+  layout: LayoutResult,
+): {
+  xynodes: RelationshipDetailsTypes.Node[]
+  xyedges: RelationshipDetailsTypes.Edge[]
+  bounds: { x: number; y: number; width: number; height: number }
+} {
+  const xynodes = [] as RelationshipDetailsTypes.Node[],
+    xyedges = [] as RelationshipDetailsTypes.Edge[],
+    nodeLookup = new Map<Fqn, LayoutResult.Node>()
+
+  type TraverseItem = {
+    node: LayoutResult.Node
+    parent: LayoutResult.Node | null
+  }
+  const queue = Queue.from(layout.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node)
+      if (!node.parent) {
+        acc.push({ node, parent: null })
+      }
+      return acc
+    },
+    [] as TraverseItem[],
+  ))
+  const ns = ''
+  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
+
+  let next: TraverseItem | undefined
+  while ((next = queue.dequeue())) {
+    const { node, parent } = next
+    const isCompound = hasAtLeast(node.children, 1)
+    if (isCompound) {
+      for (const child of node.children) {
+        queue.enqueue({ node: nodeById(child), parent: node })
+      }
+    }
+
+    const position = {
+      x: node.position[0],
+      y: node.position[1],
+    }
+    if (parent) {
+      position.x -= parent.position[0]
+      position.y -= parent.position[1]
+    }
+
+    const id = ns + node.id
+
+    const base = {
+      id,
+      draggable: false,
+      selectable: true,
+      focusable: true,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      style: {
+        width: node.width,
+        height: node.height,
+      },
+      initialWidth: node.width,
+      initialHeight: node.height,
+      ...(parent && {
+        parentId: ns + parent.id,
+      }),
+    } satisfies Omit<RelationshipDetailsTypes.Node, 'data' | 'type'>
+
+    const fqn = node.modelRef
+    const navigateTo = { navigateTo: node.navigateTo ?? null }
+
+    switch (true) {
+      case isCompound: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'compound',
+            data: {
+              column: node.column,
+              title: node.title,
+              color: node.color,
+              style: node.style,
+              depth: node.depth ?? 0,
+              icon: node.icon ?? 'none',
+              ports: node.ports,
+              fqn,
+              ...navigateTo,
+            },
+          },
+        )
+        break
+      }
+      default: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'element' as const,
+            data: {
+              column: node.column,
+              fqn,
+              title: node.title,
+              technology: node.technology,
+              description: node.description,
+              height: node.height,
+              width: node.width,
+              color: node.color,
+              shape: node.shape,
+              icon: node.icon ?? 'none',
+              ports: node.ports,
+              style: node.style,
+              ...navigateTo,
+            },
+          },
+        )
+      }
+    }
+  }
+  for (
+    const {
+      source,
+      target,
+      relationId,
+      label,
+      technology,
+      description,
+      navigateTo = null,
+      color = 'gray',
+      line = 'dashed',
+      ...edge
+    } of layout.edges
+  ) {
+    const id = ns + edge.id
+    xyedges.push({
+      id,
+      type: 'relationship',
+      source: ns + source,
+      target: ns + target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
+      zIndex: ZIndexes.Edge,
+      // selectable: selectable,
+      // hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        relationId,
+        label,
+        color,
+        navigateTo,
+        line,
+        ...(technology && { technology }),
+        ...(description && { description }),
+      },
+    })
+  }
+
+  return {
+    xynodes,
+    xyedges,
+    bounds: layout.bounds,
+  }
+}

package/src/overlays/relationship-details/layout.ts

@@ -0,0 +1,470 @@
+import {
+  treeFromElements,
+} from '@likec4/core/compute-view/relationships'
+import type {
+  DiagramEdge,
+  DiagramNode,
+  DiagramView,
+  EdgeId,
+  Fqn,
+  IconUrl,
+  NodeId,
+  NonEmptyArray,
+  Point,
+  RelationId,
+} from '@likec4/core/types'
+
+import dagre, { type EdgeConfig, type GraphLabel } from '@dagrejs/dagre'
+import { invariant } from '@likec4/core'
+import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
+import {
+  DefaultMap,
+  ifind,
+} from '@likec4/core/utils'
+import {
+  filter,
+  find,
+  map,
+  mapToObj,
+  pipe,
+  prop,
+  reduce,
+  sortBy,
+  tap,
+} from 'remeda'
+import type { RelationshipDetailsTypes } from './_types'
+import type { RelationshipDetailsViewData } from './compute'
+
+/**
+ * All constants related to the layout
+ */
+const Sizes = {
+  dagre: {
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25,
+  } satisfies GraphLabel,
+  edgeLabel: {
+    width: 220,
+    height: 14,
+    // minlen: 1,
+  } satisfies EdgeConfig,
+
+  nodeWidth: 330,
+  nodeHeight: 180,
+
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+
+  compound: {
+    labelHeight: 2,
+    paddingTop: 50,
+    paddingBottom: 32,
+  },
+}
+
+// /**
+//  * All constants related to the layout
+//  */
+// const Sizes = {
+//   dagre: {
+//     ranksep: 60,
+//     nodesep: 35,
+//     edgesep: 25,
+//   } satisfies GraphLabel,
+//   edgeLabel: {
+//     width: 120,
+//     height: 10,
+//     minlen: 1,
+//     weight: 1,
+//   } satisfies EdgeConfig,
+
+//   emptyNodeOffset: 120,
+
+//   nodeWidth: 330,
+//   nodeHeight: 180,
+
+//   // Spacer between elements in a compound node
+//   // 0 means no spacer
+//   spacerHeight: 0,
+
+//   compound: {
+//     labelHeight: 2,
+//     paddingTop: 50,
+//     paddingBottom: 32,
+//   },
+// }
+type NodeData = {
+  column: RelationshipDetailsTypes.Column
+  portId: string
+  element: ElementModel
+  isCompound: boolean
+  inPorts: string[]
+  outPorts: string[]
+}
+function createGraph() {
+  const g = new dagre.graphlib.Graph<NodeData>({
+    directed: true,
+    compound: true,
+    multigraph: true,
+  })
+  g.setGraph({
+    ...Sizes.dagre,
+    rankdir: 'LR',
+  })
+  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
+  g.setDefaultNodeLabel(() => ({}))
+
+  return g
+}
+type G = ReturnType<typeof createGraph>
+
+const PortSuffix = '-port'
+
+function createNodes(
+  column: RelationshipDetailsTypes.Column,
+  elements: ReadonlySet<ElementModel>,
+  g: G,
+) {
+  const graphNodes = new DefaultMap<Fqn, { id: string; portId: string }>(key => ({
+    id: `${column}-${key}`,
+    portId: `${column}-${key}`,
+  }))
+  const tree = treeFromElements(elements)
+  for (const element of tree.sorted) {
+    const isCompound = tree.children(element).length > 0
+    const fqn = element.id
+    const id = `${column}-${fqn}`
+    const portId = isCompound ? `${id}${PortSuffix}` : id
+    graphNodes.set(fqn, {
+      id,
+      portId,
+    })
+    g.setNode(id, {
+      column,
+      element,
+      isCompound,
+      portId,
+      inPorts: [],
+      outPorts: [],
+      width: Sizes.nodeWidth,
+      height: Sizes.nodeHeight,
+    })
+
+    if (isCompound) {
+      g.setNode(portId, {
+        element,
+        portId,
+        isCompound,
+        inPorts: [],
+        outPorts: [],
+        width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+        height: Sizes.compound.labelHeight,
+      })
+      g.setParent(portId, id)
+      // g.node(id).padding = 60
+    }
+
+    const parent = tree.parent(element)
+    if (parent) {
+      g.setParent(id, `${column}-${parent.id}`)
+    }
+  }
+  return {
+    ...tree,
+    byId: (id: string) => {
+      const element = tree.byId(id)
+      const graph = graphNodes.get(element.id)
+      return {
+        element,
+        graph,
+      }
+    },
+    graphNodes,
+  }
+}
+
+/**
+ * Apply dagre layout to the graph
+ * And return a function to get node bounds for xyflow
+ */
+function applyDagreLayout(g: G) {
+  dagre.layout(g, {
+    // disableOptimalOrderHeuristic: true,
+  })
+  return (nodeId: string) => {
+    const node = g.node(nodeId)
+    const { x, y, width, height } = node
+    return {
+      position: {
+        x: x - Math.round(width / 2),
+        y: y - Math.round(height / 2),
+      },
+      width,
+      height,
+    }
+  }
+}
+
+export type LayoutResult = {
+  // subject: Fqn
+  // subjectExistsInScope: boolean
+  nodes: LayoutResult.Node[]
+  edges: LayoutResult.Edge[]
+  bounds: DiagramView['bounds']
+}
+
+export namespace LayoutResult {
+  export type Node = Omit<DiagramNode, 'modelRef' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    modelRef: Fqn
+    column: RelationshipDetailsTypes.Column
+    ports: RelationshipDetailsTypes.Ports
+    // existsInCurrentView: boolean
+  }
+  export type Edge = Omit<DiagramEdge, 'relations'> & {
+    relationId: RelationId
+    sourceHandle: string
+    targetHandle: string
+    // existsInCurrentView: boolean
+    // column: RelationshipsBrowserTypes.Column
+  }
+}
+
+export function layoutRelationshipDetails(
+  data: RelationshipDetailsViewData,
+  scope: LikeC4ViewModel<AnyAux> | null,
+): LayoutResult {
+  const g = createGraph()
+
+  const sources = createNodes('sources', data.sources, g),
+    targets = createNodes('targets', data.targets, g)
+
+  const edges: Array<{
+    name: string
+    source: string // node id
+    target: string // node id
+    sourceHandle: string
+    targetHandle: string
+    relationship: RelationshipModel
+  }> = Array.from(data.relationships).map(r => {
+    const source = sources.byId(r.source.id).graph
+    const target = targets.byId(r.target.id).graph
+    const name = r.id
+
+    g.node(source.id).outPorts.push(target.id)
+    g.node(target.id).inPorts.push(source.id)
+
+    g.setEdge(source.portId, target.portId, {
+      ...Sizes.edgeLabel,
+    }, name)
+    return {
+      name,
+      source: source.id,
+      sourceHandle: source.id + '_out' + (g.node(source.id).outPorts.length - 1),
+      target: target.id,
+      targetHandle: target.id + '_in' + (g.node(target.id).inPorts.length - 1),
+      relationship: r,
+    }
+  })
+
+  // Grow nodes with more than 2 ports
+  const nodeIds = [
+    ...sources.graphNodes.values(),
+    ...targets.graphNodes.values(),
+  ]
+  for (const { id: nodeId } of nodeIds) {
+    const node = g.node(nodeId)
+    if (node.isCompound) {
+      continue
+    }
+    const edgeCount = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0)
+    if (edgeCount > 3) {
+      node.height = node.height + (edgeCount - 4) * 14
+    }
+  }
+
+  const edgeCount = g.edgeCount()
+  if (edgeCount > 5) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 10 ? 800 : 400,
+      })
+    }
+  }
+
+  const dagreBounds = applyDagreLayout(g)
+
+  // Calculate bounds for all nodes except compounds
+  // We shrink compounds to fit their children
+  const _calculatedNodeBounds = pipe(
+    nodeIds,
+    // Compound nodes have different portId
+    filter(n => n.id === n.portId),
+    mapToObj(n => [n.id, dagreBounds(n.id)]),
+  )
+
+  function nodeBounds(nodeId: string): ReturnType<typeof dagreBounds> {
+    return _calculatedNodeBounds[nodeId] ??= pipe(
+      g.children(nodeId) as string[] | undefined ?? [],
+      filter(id => !id.endsWith(PortSuffix)),
+      map(id => nodeBounds(id)),
+      tap(bounds => {
+        invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`)
+      }),
+      reduce((acc, bounds) => {
+        return {
+          minY: Math.min(acc.minY, bounds.position.y),
+          maxY: Math.max(acc.maxY, bounds.position.y + bounds.height),
+        }
+      }, { minY: Infinity, maxY: -Infinity }),
+      ({ minY, maxY }) => {
+        const {
+          position: { x },
+          width,
+        } = dagreBounds(nodeId)
+        minY = minY - Sizes.compound.paddingTop
+        maxY = maxY + Sizes.compound.paddingBottom
+
+        return {
+          position: {
+            x,
+            y: minY,
+          },
+          width,
+          height: maxY - minY,
+        }
+      },
+    )
+  }
+
+  function nodeLevel(nodeId: string): number {
+    const parent = g.parent(nodeId)
+    if (parent) {
+      return nodeLevel(parent) + 1
+    }
+    return 0
+  }
+  function nodeDepth(nodeId: string): number {
+    const children = g.children(nodeId) as string[] | undefined ?? []
+    if (children.length === 0) {
+      return 0
+    }
+    return 1 + Math.max(...children.map(nodeDepth))
+  }
+
+  // Sort ports in subject vertically
+  const sortedPorts = (nodeId: string, type: 'in' | 'out', ports: string[]) => {
+    return pipe(
+      ports,
+      map((port, index) => {
+        return {
+          port: nodeId + '_' + type + index,
+          topY: nodeBounds(port).position.y,
+        }
+      }),
+      sortBy(prop('topY')),
+      map(prop('port')),
+    )
+  }
+  // In case we got negative positions
+  let minX = 0
+  let minY = 0
+
+  const nodes = nodeIds.map(({ id }): LayoutResult.Node => {
+    const { element, inPorts, outPorts, column } = g.node(id)
+    let { position, width, height } = nodeBounds(id)
+
+    const parentId = g.parent(id)
+
+    const children = (g.children(id) as NodeId[] | undefined ?? []).filter(c => !c.endsWith(PortSuffix))
+
+    minX = Math.min(minX, position.x)
+    minY = Math.min(minY, position.y)
+
+    const navigateTo = scope ? ifind(element.scopedViews(), v => v.id !== scope.id)?.id ?? null : null
+
+    const inheritFromNode = scope?.findNodeWithElement(element.id)
+    const scopedAncestor = scope && !inheritFromNode
+      ? ifind(element.ancestors(), a => !!scope.findNodeWithElement(a.id))?.id
+      : null
+    const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor))
+
+    return {
+      id: id as NodeId,
+      parent: parentId as NodeId ?? null,
+      position: [position.x, position.y],
+      title: element.title,
+      description: element.description,
+      technology: element.technology,
+      tags: null,
+      links: null,
+      color: inheritFromNodeOrAncestor?.color ?? element.color,
+      shape: inheritFromNode?.shape ?? element.shape,
+      icon: inheritFromNode?.icon ?? element.icon ?? 'none' as IconUrl,
+      modelRef: element.id,
+      kind: element.kind,
+      level: nodeLevel(id),
+      labelBBox: {
+        x: position.x,
+        y: position.y,
+        width: width,
+        height: height,
+      },
+      style: {
+        ...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
+        ...element.$element.style,
+      },
+      navigateTo,
+      ...(children.length > 0 && { depth: nodeDepth(id) }),
+      children,
+      width,
+      height,
+      column,
+      ports: {
+        in: sortedPorts(id, 'in', inPorts),
+        out: sortedPorts(id, 'out', outPorts),
+      },
+    }
+  })
+
+  return {
+    bounds: {
+      x: Math.min(minX, 0),
+      y: Math.min(minY, 0),
+      width: g.graph().width ?? 100,
+      height: g.graph().height ?? 100,
+    },
+    nodes,
+    edges: g.edges().reduce((acc, e) => {
+      const edge = g.edge(e)
+      const ename = e.name
+      if (!ename) {
+        return acc
+      }
+      const { name, source, target, relationship, sourceHandle, targetHandle } = find(edges, e => e.name === ename)!
+      const label = relationship.title ?? 'untitled'
+      const navigateTo = relationship.navigateTo?.id ?? null
+      const description = relationship.description ?? null
+      const technology = relationship.technology ?? null
+      acc.push({
+        id: name as EdgeId,
+        source: source as NodeId,
+        sourceHandle,
+        target: target as NodeId,
+        targetHandle,
+        label,
+        color: relationship.color,
+        ...(navigateTo && { navigateTo }),
+        ...(description && { description }),
+        ...(technology && { technology }),
+        points: edge.points.map(p => [p.x, p.y] as Point) as unknown as NonEmptyArray<Point>,
+        line: relationship.line,
+        relationId: relationship.id,
+        parent: null,
+      })
+      return acc
+    }, [] as LayoutResult.Edge[]),
+  }
+}

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -8,7 +8,6 @@ import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
-import { useRelationshipsView } from './-useRelationshipsView'
 import type { RelationshipsBrowserTypes, RelationshipsBrowserTypes as Types } from './_types'
 import type { RelationshipsBrowserActorRef } from './actor'
 import { ViewPadding } from './const'
@@ -18,6 +17,7 @@ import {
   useRelationshipsBrowser,
   useRelationshipsBrowserState,
 } from './hooks'
+import { useRelationshipsView } from './layout'
 import { SelectElement } from './SelectElement'
 
 const nodeTypes = {
@@ -168,7 +168,7 @@ const RelationshipsBrowserInner = memo(() => {
     if (instance.viewportInitialized) {
       browser.send({ type: 'xyflow.init', instance, store })
     }
-  }, [store, instance, browser])
+  }, [store, instance.viewportInitialized, browser])
 
   const layouted = useRelationshipsView(subjectId, viewId, scope)
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)

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

@@ -61,9 +61,9 @@ export const SelectElement = memo(() => {
   }, [subjectId])
 
   return (
-    <Group ref={root} gap={'xs'} wrap={'nowrap'} pos={'relative'}>
+    <Group ref={root} gap={'xs'} pos={'relative'}>
       {enableSelectSubject && (
-        <>
+        <Group gap={4} wrap="nowrap">
           <Box
             fz={'xs'}
             fw={'500'}
@@ -159,10 +159,10 @@ export const SelectElement = memo(() => {
               </PopoverDropdown>
             </Popover>
           </Box>
-        </>
+        </Group>
       )}
       {enableChangeScope && (
-        <>
+        <Group gap={4} wrap="nowrap">
           {/* Show if only "select" is enabled  */}
           {enableSelectSubject && (
             <Box
@@ -220,7 +220,7 @@ export const SelectElement = memo(() => {
               />
             </Tooltip>
           </div>
-        </>
+        </Group>
       )}
     </Group>
   )