@likec4/core 1.19.1 → 1.20.0

package/src/compute-view/relationships-view/layout.ts

@@ -0,0 +1,357 @@
+import dagre, { type EdgeConfig, type GraphLabel } from '@dagrejs/dagre'
+import DefaultMap from 'mnemonist/default-map'
+import { concat, filter, forEachObj, groupBy, map, mapToObj, pipe, prop, reduce, tap } from 'remeda'
+import { invariant } from '../../errors'
+import type { ElementModel } from '../../model/ElementModel'
+import type { RelationshipModel } from '../../model/RelationModel'
+import type { DiagramNode, DiagramView, Fqn, NodeId } from '../../types'
+import { sortParentsFirst } from '../../utils'
+import { toArray } from '../../utils/iterable'
+import type { RelationshipsViewData } from './_types'
+import { treeFromElements } from './utils'
+
+/**
+ * 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: 320,
+  nodeHeight: 180,
+
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+
+  compound: {
+    labelHeight: 1,
+    paddingTop: 60,
+    paddingBottom: 32,
+  },
+}
+type NodeData = {
+  portId: string
+  element: ElementModel
+  isCompound: boolean
+}
+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(() => ({}))
+
+  // columns.reduce((prev, column) => {
+  //   const c = graphColumn(column)
+  //   g.setNode(c.id, {})
+  //   g.setNode(c.anchor, { width: 40, height: 2 })
+  //   g.setParent(c.anchor, c.id)
+  //   if (prev) {
+  //     g.setEdge(prev, c.anchor, {
+  //       width: 0
+  //     })
+  //   }
+  //   return c.anchor
+  // }, null as string | null)
+
+  return g
+}
+type G = ReturnType<typeof createGraph>
+
+const PortSuffix = '-port'
+
+function createNodes(
+  prefix: string,
+  elements: ReadonlySet<ElementModel>,
+  g: G,
+) {
+  const graphNodes = new DefaultMap<Fqn, { id: string; portId: string }>(key => ({
+    id: `${prefix}-${key}`,
+    portId: `${prefix}-${key}`,
+  }))
+  const tree = treeFromElements(elements)
+  for (const element of tree.sorted) {
+    const isCompound = tree.children(element).length > 0
+    const fqn = element.id
+    const id = `${prefix}-${fqn}`
+    const portId = isCompound ? `${id}${PortSuffix}` : id
+    graphNodes.set(fqn, {
+      id,
+      portId,
+    })
+    g.setNode(id, {
+      element,
+      isCompound,
+      portId,
+      width: Sizes.nodeWidth,
+      height: Sizes.nodeHeight,
+    })
+
+    if (isCompound) {
+      g.setNode(portId, {
+        element,
+        portId,
+        isCompound,
+        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, `${prefix}-${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 function layoutRelationshipsView(data: RelationshipsViewData): Pick<DiagramView, 'nodes' | 'edges' | 'bounds'> {
+  const g = createGraph()
+
+  const incomers = createNodes('in', data.incomers, g),
+    subjects = createNodes('subject', data.subjects, g),
+    outgoers = createNodes('out', data.outgoers, g)
+
+  const edges = [] as Array<{
+    name: string
+    source: string // node id
+    target: string // node id
+    relations: RelationshipModel[]
+  }>
+
+  pipe(
+    concat(
+      pipe(
+        toArray(data.incoming),
+        map(r => ({
+          id: r.source.id,
+          source: incomers.byId(r.source.id).graph,
+          target: subjects.byId(r.target.id).graph,
+          relation: r,
+        })),
+        // Sort by source
+        sortParentsFirst,
+      ),
+      pipe(
+        toArray(data.outgoing),
+        map(r => ({
+          id: r.target.id,
+          source: subjects.byId(r.source.id).graph,
+          target: outgoers.byId(r.target.id).graph,
+          relation: r,
+        })),
+        // Sort by target
+        sortParentsFirst,
+      ),
+    ),
+    map(r => ({
+      ...r,
+      expr: `${r.source.id}->${r.target.id}`,
+    })),
+    // Group if same source and target
+    groupBy(prop('expr')),
+    forEachObj((grouped) => {
+      const source = grouped[0].source
+      const target = grouped[0].target
+      const name = grouped[0].expr
+
+      g.setEdge(source.portId, target.portId, {
+        ...Sizes.edgeLabel,
+      }, name)
+      edges.push({
+        name,
+        source: source.id,
+        target: target.id,
+        relations: map(grouped, prop('relation')),
+      })
+    }),
+  )
+
+  // Grow nodes with more than 2 ports
+  for (const subjectNode of subjects.graphNodes.values()) {
+    const nodeId = subjectNode.id
+    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 > 2) {
+      node.height = node.height + (edgeCount - 3) * 14
+    }
+  }
+
+  const dagreBounds = applyDagreLayout(g)
+
+  const nodeIds = [
+    ...incomers.graphNodes.values(),
+    ...subjects.graphNodes.values(),
+    ...outgoers.graphNodes.values(),
+  ]
+
+  // 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))
+  }
+
+  const nodes = nodeIds.map(({ id }): DiagramNode => {
+    const { element } = g.node(id)
+    let { position, width, height } = nodeBounds(id)
+    const parentId = g.parent(id)
+    // if (parentId) {
+    //   const parentPos = nodeBounds(parentId).position
+    //   position = {
+    //     x: position.x - parentPos.x,
+    //     y: position.y - parentPos.y,
+    //   }
+    // }
+    const children = (g.children(id) as NodeId[] | undefined ?? []).filter(c => !c.endsWith(PortSuffix))
+
+    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: element.color,
+      shape: element.shape,
+      modelRef: element.id,
+      kind: element.kind,
+      level: nodeLevel(id),
+      labelBBox: {
+        x: position.x,
+        y: position.y,
+        width: width,
+        height: height,
+      },
+      style: {
+        ...element.$element.style,
+      },
+      inEdges: [],
+      outEdges: [],
+      ...(children.length > 0 && { depth: nodeDepth(id) }),
+      children,
+      width,
+      height,
+    }
+  })
+
+  return {
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 100,
+      height: g.graph().height ?? 100,
+    },
+    nodes,
+    edges: [],
+  }
+}

package/src/compute-view/relationships-view/utils.ts

@@ -0,0 +1,40 @@
+import DefaultMap from 'mnemonist/default-map'
+import { nonNullable } from '../../errors'
+import type { ElementModel } from '../../model/ElementModel'
+import type { Fqn } from '../../types'
+import { isAncestor, isDescendantOf, sortParentsFirst } from '../../utils/fqn'
+
+export function treeFromElements(elements: Iterable<ElementModel>) {
+  const sorted = sortParentsFirst([...elements]) as ReadonlyArray<ElementModel>
+  const root = new Set(sorted)
+  const map = new Map(sorted.map(e => [e.id, e]))
+  const parents = new DefaultMap<ElementModel, ElementModel | null>(() => null)
+  const children = sorted.reduce((acc, parent, index, all) => {
+    acc.set(
+      parent,
+      all
+        .slice(index + 1)
+        .filter(isDescendantOf(parent))
+        .map(e => {
+          root.delete(e)
+          return e
+        })
+        .reduce((acc, el) => {
+          if (!acc.some(isAncestor(el))) {
+            acc.push(el)
+            parents.set(el, parent)
+          }
+          return acc
+        }, [] as ElementModel[]),
+    )
+    return acc
+  }, new DefaultMap<ElementModel, ElementModel[]>(() => []))
+
+  return {
+    sorted,
+    byId: (id: string) => nonNullable(map.get(id as Fqn), `Element not found by id: ${id}`),
+    root: root as ReadonlySet<ElementModel>,
+    parent: (el: ElementModel) => parents.get(el),
+    children: (el: ElementModel): ReadonlyArray<ElementModel> => children.get(el),
+  }
+}

package/src/compute-view/utils/relationExpressionToPredicates.ts

@@ -1,13 +1,14 @@
+import { pick } from 'remeda'
 import { nonexhaustive } from '../../errors'
 import type { Element } from '../../types/element'
 import {
+  type RelationExpression,
+  type RelationWhereExpr,
   isIncoming,
   isInOut,
   isOutgoing,
   isRelation,
   isRelationWhere,
-  type RelationExpression,
-  type RelationWhereExpr
 } from '../../types/expression'
 import { whereOperatorAsPredicate } from '../../types/operators'
 import type { ModelRelation } from '../../types/relation'
@@ -21,13 +22,19 @@ export type FilterableEdge = Pick<ModelRelation, 'kind' | 'tags'> & {
 }
 
 export function relationExpressionToPredicates<T extends FilterableEdge>(
-  expr: RelationExpression | RelationWhereExpr
+  expr: RelationExpression | RelationWhereExpr,
 ): Predicate<T> {
   switch (true) {
     case isRelationWhere(expr): {
       const predicate = relationExpressionToPredicates(expr.where.expr)
       const where = whereOperatorAsPredicate(expr.where.condition)
-      return e => predicate(e) && where(e)
+      return e =>
+        predicate(e) && where({
+          source: { tags: e.source.tags, kind: e.source.kind },
+          target: { tags: e.target.tags, kind: e.target.kind },
+          ...(e.tags && { tags: e.tags }),
+          ...(e.kind && { kind: e.kind }),
+        })
     }
     case isRelation(expr): {
       const isSource = elementExprToPredicate(expr.source)

package/src/index.ts

@@ -1,3 +1,11 @@
+import DefaultMap from 'mnemonist/default-map'
+import LinkedList from 'mnemonist/linked-list'
+import Queue from 'mnemonist/queue'
+import Stack from 'mnemonist/stack'
+// import dagre from '@dagrejs/dagre'
+
+export { DefaultMap, LinkedList, Queue, Stack }
+
 export {
   computeColorValues,
   defaultTheme,
@@ -24,3 +32,11 @@ export * from './types'
 export * from './utils'
 
 export * as Expr from './types/expression'
+
+export {
+  computeRelationshipsView,
+  computeView,
+  computeViews,
+  unsafeComputeView,
+} from './compute-view'
+export type { ComputeViewResult } from './compute-view'

package/src/model/DeploymentElementModel.ts

@@ -11,6 +11,7 @@ import {
   type ElementShape as C4ElementShape,
   type IteratorLike,
   type Link,
+  type RelationshipKind,
   type Tag,
   type Tag as C4Tag,
   type ThemeColor,
@@ -62,6 +63,10 @@ abstract class AbstractDeploymentElementModel<M extends AnyAux = AnyAux> {
     return this.$node.tags ?? []
   }
 
+  get kind(): DeploymentNodeKind | string | null {
+    return this.$node.kind ?? null
+  }
+
   get description(): string | null {
     return this.$node.description ?? null
   }
@@ -223,7 +228,7 @@ export class DeploymentNodeModel<M extends AnyAux = AnyAux> extends AbstractDepl
     return this.$model.parent(this)
   }
 
-  get kind(): DeploymentNodeKind {
+  override get kind(): DeploymentNodeKind {
     return this.$node.kind
   }
 
@@ -367,6 +372,10 @@ export class DeployedInstanceModel<M extends AnyAux = AnyAux> extends AbstractDe
     return this.$instance.tags ?? []
   }
 
+  override get kind(): string | null {
+    return this.$instance.kind ?? null
+  }
+
   override get description(): string | null {
     return this.$instance.description ?? this.element.description
   }
@@ -514,6 +523,10 @@ export class DeploymentRelationModel<M extends AnyAux = AnyAux> {
     return this.$relationship.tags ?? []
   }
 
+  get kind(): RelationshipKind | null {
+    return this.$relationship.kind ?? null
+  }
+
   get navigateTo(): LikeC4ViewModel<M> | null {
     return this.$relationship.navigateTo ? this.$model.$model.view(this.$relationship.navigateTo) : null
   }
@@ -530,6 +543,10 @@ export class DeploymentRelationModel<M extends AnyAux = AnyAux> {
     }
     return
   }
+
+  public isDeploymentRelation(): this is DeploymentRelationModel<M> {
+    return true
+  }
 }
 
 export class RelationshipsAccum<M extends AnyAux> {

package/src/model/ElementModel.ts

@@ -3,6 +3,7 @@ import {
   type Element as C4Element,
   type ElementKind as C4ElementKind,
   type ElementShape as C4ElementShape,
+  type IconUrl,
   type IteratorLike,
   type Link,
   type Tag as C4Tag,
@@ -47,6 +48,10 @@ export class ElementModel<M extends AnyAux = AnyAux> {
     return this.$element.color as ThemeColor ?? DefaultThemeColor
   }
 
+  get icon(): IconUrl | null {
+    return this.$element.icon ?? null
+  }
+
   get tags(): ReadonlyArray<C4Tag> {
     return this.$element.tags ?? []
   }
@@ -71,6 +76,10 @@ export class ElementModel<M extends AnyAux = AnyAux> {
     return this.scopedViews().next().value ?? null
   }
 
+  get isRoot(): boolean {
+    return this.parent === null
+  }
+
   public isAncestorOf(another: ElementModel<M>): boolean {
     return isAncestor(this, another)
   }
@@ -219,3 +228,7 @@ export class ElementModel<M extends AnyAux = AnyAux> {
     return this.$model.deployment.instancesOf(this)
   }
 }
+
+export function isElementModel<M extends AnyAux = AnyAux>(element: any): element is ElementModel<M> {
+  return element instanceof ElementModel
+}

package/src/model/LikeC4Model.ts

@@ -239,8 +239,8 @@ export class LikeC4Model<M extends AnyAux = LikeC4Model.Any> {
   public view(viewId: M['View']): LikeC4ViewModel<M> {
     return nonNullable(this.#views.get(viewId as any), `View ${viewId} not found`)
   }
-  public findView(viewId: M['View']): LikeC4ViewModel<M> {
-    return nonNullable(this.#views.get(viewId as M['ViewId']), `View ${viewId} not found`)
+  public findView(viewId: M['View']): LikeC4ViewModel<M> | null {
+    return this.#views.get(viewId as M['ViewId']) ?? null
   }
 
   /**

package/src/model/RelationModel.ts

@@ -3,6 +3,7 @@ import type { IteratorLike } from '../types'
 import type { Link, Tag } from '../types/element'
 import type { ModelRelation } from '../types/relation'
 import { commonAncestor } from '../utils/fqn'
+import type { DeploymentRelationModel } from './DeploymentElementModel'
 import type { ElementModel } from './ElementModel'
 import type { LikeC4Model } from './LikeC4Model'
 import type { AnyAux } from './types'
@@ -67,6 +68,10 @@ export class RelationshipModel<M extends AnyAux = AnyAux> {
     return this.$relationship.tags ?? []
   }
 
+  get kind(): string | null {
+    return this.$relationship.kind ?? null
+  }
+
   get links(): ReadonlyArray<Link> {
     return this.$relationship.links ?? []
   }
@@ -82,4 +87,8 @@ export class RelationshipModel<M extends AnyAux = AnyAux> {
     }
     return
   }
+
+  public isDeploymentRelation(): this is DeploymentRelationModel<M> {
+    return false
+  }
 }

package/src/model/connection/deployment/DeploymentConnectionModel.ts

@@ -110,11 +110,21 @@ export class DeploymentConnectionModel<M extends AnyAux = AnyAux>
     yield* this.relations.deployment
   }
 
+  /**
+   * Merge with another connections, if it has the same source and target.
+   * Returns new connection with union of relationships.
+   */
+  public mergeWith(others: DeploymentConnectionModel<M>[]): DeploymentConnectionModel<M>
   /**
    * Merge with another connection, if it has the same source and target.
    * Returns new connection with union of relationships.
    */
-  public mergeWith(other: DeploymentConnectionModel<M>) {
+  public mergeWith(other: DeploymentConnectionModel<M>): DeploymentConnectionModel<M>
+  public mergeWith(other: DeploymentConnectionModel<M> | DeploymentConnectionModel<M>[]): DeploymentConnectionModel<M> {
+    if (Array.isArray(other)) {
+      return other.reduce((acc, o) => acc.mergeWith(o), this)
+    }
+
     invariant(this.source.id === other.source.id, 'Cannot merge connections with different sources')
     invariant(this.target.id === other.target.id, 'Cannot merge connections with different targets')
     return new DeploymentConnectionModel(

package/src/model/guards.ts

@@ -1,4 +1,10 @@
-import type { DeployedInstanceModel, DeploymentElementModel, DeploymentNodeModel } from './DeploymentElementModel'
+import type {
+  DeploymentElementModel,
+  DeploymentRelationEndpoint,
+  NestedElementOfDeployedInstanceModel,
+} from './DeploymentElementModel'
+import { DeployedInstanceModel, DeploymentNodeModel } from './DeploymentElementModel'
+import type { AnyAux } from './types'
 
 export function isDeploymentNode(model: DeploymentElementModel): model is DeploymentNodeModel {
   return model.isDeploymentNode()
@@ -7,3 +13,13 @@ export function isDeploymentNode(model: DeploymentElementModel): model is Deploy
 export function isDeployedInstance(model: DeploymentElementModel): model is DeployedInstanceModel {
   return model.isInstance()
 }
+
+export function isNestedElementOfDeployedInstanceModel<M extends AnyAux = AnyAux>(
+  model: DeploymentRelationEndpoint<M>,
+): model is NestedElementOfDeployedInstanceModel<M> {
+  return !model.isInstance() && !model.isDeploymentNode()
+}
+
+export function isDeploymentElementModel(x: any): x is DeploymentElementModel {
+  return x instanceof DeploymentNodeModel || x instanceof DeployedInstanceModel
+}

package/src/model/view/LikeC4ViewModel.ts

@@ -16,7 +16,7 @@ import {
   isElementView,
   isScopedElementView,
 } from '../../types/view'
-import { compareByFqnHierarchically, getOrCreate } from '../../utils'
+import { compareByFqnHierarchically, getOrCreate, ifind } from '../../utils'
 import type { ElementModel } from '../ElementModel'
 import type { LikeC4Model } from '../LikeC4Model'
 import { type AnyAux, getId } from '../types'
@@ -138,6 +138,12 @@ export class LikeC4ViewModel<M extends AnyAux, V extends ComputedView | DiagramV
   public findNode(node: M['NodeOrId']): NodeModel<M, V> | null {
     return this.#nodes.get(getId(node) as C4NodeId) ?? null
   }
+
+  public findNodeWithElement(fqn: M['Element']): NodeModel.WithElement<M, V> | null {
+    const nd = ifind(this.#nodes.values(), node => node.element?.id === fqn) ?? null
+    return nd && nd.hasElement() ? nd : null
+  }
+
   /**
    * Iterate over all nodes.
    */

package/src/model/view/NodeModel.ts

@@ -4,6 +4,7 @@ import {
   type DeploymentNodeKind,
   type DiagramView,
   type ElementShape as C4ElementShape,
+  type IconUrl,
   type IteratorLike,
   type Link,
   type NodeId,
@@ -97,6 +98,10 @@ export class NodeModel<M extends AnyAux, V extends ComputedView | DiagramView =
     return this.$node.color
   }
 
+  get icon(): IconUrl | null {
+    return this.$node.icon ?? null
+  }
+
   get tags(): ReadonlyArray<C4Tag> {
     return this.$node.tags ?? []
   }

package/src/types/deployments.ts

@@ -42,6 +42,7 @@ export interface DeployedInstance {
   readonly title?: string
   readonly description?: string | null
   readonly technology?: string | null
+  readonly kind?: string | null // TODO: ensure the property is set
   readonly tags?: NonEmptyArray<Tag> | null
   readonly links?: NonEmptyArray<Link> | null
   readonly style?: DeploymentElementStyle