@likec4/diagram 1.19.1 → 1.20.0

package/dist/overlays/relationships-browser/-useRelationshipsView.d.ts

@@ -0,0 +1,39 @@
+import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, ViewId } from '@likec4/core/types';
+import { ElementModel, RelationshipModel } from '@likec4/core/model';
+import { RelationshipsBrowserTypes } from './_types';
+export type RelationshipsViewData = {
+    incomers: ReadonlySet<ElementModel>;
+    incoming: ReadonlySet<RelationshipModel>;
+    subjects: ReadonlySet<ElementModel>;
+    outgoing: ReadonlySet<RelationshipModel>;
+    outgoers: ReadonlySet<ElementModel>;
+};
+export type LayoutRelationshipsViewResult = {
+    nodes: LayoutRelationshipsViewResult.Node[];
+    edges: LayoutRelationshipsViewResult.Edge[];
+    bounds: DiagramView['bounds'];
+};
+export declare namespace LayoutRelationshipsViewResult {
+    const Empty: ElementKind;
+    type Node = DiagramNode & {
+        column: RelationshipsBrowserTypes.Column;
+        ports: RelationshipsBrowserTypes.Ports;
+    };
+    type Edge = DiagramEdge & {};
+}
+export declare function layoutRelationshipsView(data: RelationshipsViewData): LayoutRelationshipsViewResult;
+export declare function useRelationshipsView(fqn: Fqn): {
+    nodes: LayoutRelationshipsViewResult.Node[];
+    edges: LayoutRelationshipsViewResult.Edge[];
+    bounds: DiagramView["bounds"];
+    id: ViewId;
+    title: string;
+    description: null;
+    autoLayout: {
+        direction: string;
+    };
+    tags: null;
+    links: null;
+    hash: string;
+    customColorDefinitions: {};
+};

package/dist/overlays/relationships-browser/-useRelationshipsView.js

@@ -0,0 +1,488 @@
+import { computeRelationshipsView, toArray, sortParentsFirst, invariant, DefaultMap, isDescendantOf, isAncestor, nonNullable } from "@likec4/core";
+import { useMemo } from "react";
+import dagre from "@dagrejs/dagre";
+import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, hasAtLeast, tap, reduce, sortBy } from "remeda";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+const Sizes = {
+  dagre: {
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25
+  },
+  edgeLabel: {
+    width: 120,
+    height: 10,
+    minlen: 1,
+    weight: 1
+  },
+  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
+  }
+};
+function createGraph() {
+  const g = new dagre.graphlib.Graph({
+    directed: true,
+    compound: true,
+    multigraph: true
+  });
+  g.setGraph({
+    ...Sizes.dagre,
+    rankdir: "LR"
+  });
+  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+  g.setDefaultNodeLabel(() => ({}));
+  return g;
+}
+const PortSuffix = "-port";
+function treeFromElements(elements) {
+  const sorted = sortParentsFirst([...elements]);
+  const root = new Set(sorted);
+  const map2 = new Map(sorted.map((e) => [e.id, e]));
+  const parents = new DefaultMap(() => 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((acc2, el) => {
+        if (!acc2.some(isAncestor(el))) {
+          acc2.push(el);
+          parents.set(el, parent);
+        }
+        return acc2;
+      }, [])
+    );
+    return acc;
+  }, new DefaultMap(() => []));
+  return {
+    sorted,
+    byId: (id) => nonNullable(map2.get(id), `Element not found by id: ${id}`),
+    root,
+    parent: (el) => parents.get(el),
+    children: (el) => children.get(el)
+  };
+}
+function createNodes(column, elements, g) {
+  const graphNodes = new DefaultMap((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);
+    }
+    const parent = tree.parent(element);
+    if (parent) {
+      g.setParent(id, `${column}-${parent.id}`);
+    }
+  }
+  return {
+    ...tree,
+    byId: (id) => {
+      const element = tree.byId(id);
+      const graph = graphNodes.get(element.id);
+      return {
+        element,
+        graph
+      };
+    },
+    graphNodes
+  };
+}
+function applyDagreLayout(g) {
+  dagre.layout(g, {
+    // disableOptimalOrderHeuristic: true,
+  });
+  return (nodeId) => {
+    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
+    };
+  };
+}
+var LayoutRelationshipsViewResult;
+((LayoutRelationshipsViewResult2) => {
+  LayoutRelationshipsViewResult2.Empty = "@empty";
+})(LayoutRelationshipsViewResult || (LayoutRelationshipsViewResult = {}));
+function layoutRelationshipsView(data) {
+  var _a, _b;
+  const g = createGraph();
+  const incomers = createNodes("incomers", data.incomers, g), subjects = createNodes("subjects", data.subjects, g), outgoers = createNodes("outgoers", data.outgoers, g);
+  const edges = [];
+  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.node(source.id).outPorts.push(target.id);
+      g.node(target.id).inPorts.push(source.id);
+      g.setEdge(source.portId, target.portId, {
+        ...Sizes.edgeLabel
+      }, name);
+      edges.push({
+        name,
+        source: source.id,
+        target: target.id,
+        relations: map(grouped, prop("relation"))
+      });
+    })
+  );
+  for (const subjectNode of subjects.graphNodes.values()) {
+    const nodeId = subjectNode.id;
+    const node = g.node(nodeId);
+    if (node.isCompound) {
+      continue;
+    }
+    const edgeCount = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
+    if (edgeCount > 2) {
+      node.height = node.height + (edgeCount - 3) * 14;
+    }
+  }
+  const nodeIds = [
+    ...incomers.graphNodes.values(),
+    ...subjects.graphNodes.values(),
+    ...outgoers.graphNodes.values()
+  ];
+  if (incomers.graphNodes.size == 0) {
+    const id = "incomers-empty";
+    g.setNode(id, {
+      column: "incomers",
+      element: null,
+      isCompound: false,
+      portId: id,
+      inPorts: [],
+      outPorts: [],
+      width: Sizes.nodeWidth,
+      height: Sizes.nodeHeight
+    });
+    for (const subjectNode of subjects.graphNodes.values()) {
+      g.setEdge(id, subjectNode.portId);
+    }
+    nodeIds.push({
+      id,
+      portId: id
+    });
+  }
+  if (outgoers.graphNodes.size == 0) {
+    const id = "outgoers-empty";
+    g.setNode(id, {
+      column: "outgoers",
+      element: null,
+      isCompound: false,
+      portId: id,
+      inPorts: [],
+      outPorts: [],
+      width: Sizes.nodeWidth,
+      height: Sizes.nodeHeight
+    });
+    for (const subjectNode of subjects.graphNodes.values()) {
+      g.setEdge(subjectNode.portId, id);
+    }
+    nodeIds.push({
+      id,
+      portId: id
+    });
+  }
+  const dagreBounds = applyDagreLayout(g);
+  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) {
+    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = pipe(
+      g.children(nodeId) ?? [],
+      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: minY2, maxY }) => {
+        const {
+          position: { x },
+          width
+        } = dagreBounds(nodeId);
+        minY2 = minY2 - Sizes.compound.paddingTop;
+        maxY = maxY + Sizes.compound.paddingBottom;
+        return {
+          position: {
+            x,
+            y: minY2
+          },
+          width,
+          height: maxY - minY2
+        };
+      }
+    ));
+  }
+  function nodeLevel(nodeId) {
+    const parent = g.parent(nodeId);
+    if (parent) {
+      return nodeLevel(parent) + 1;
+    }
+    return 0;
+  }
+  function nodeDepth(nodeId) {
+    const children = g.children(nodeId) ?? [];
+    if (children.length === 0) {
+      return 0;
+    }
+    return 1 + Math.max(...children.map(nodeDepth));
+  }
+  const sortedPorts = (ports) => {
+    if (ports.length < 2) {
+      return ports;
+    }
+    return pipe(
+      ports,
+      map((port) => {
+        return {
+          port,
+          topY: nodeBounds(port).position.y
+        };
+      }),
+      sortBy(prop("topY")),
+      map(prop("port"))
+    );
+  };
+  let minX = 0;
+  let minY = 0;
+  const [subject] = [...subjects.root];
+  invariant(subject, "Subjects should not be empty");
+  let subjectBounds = nodeBounds(subjects.graphNodes.get(subject.id).id);
+  const nodes = nodeIds.map(({ id }) => {
+    var _a2;
+    const { element, inPorts, outPorts, column } = g.node(id);
+    let { position, width, height } = nodeBounds(id);
+    if (!element) {
+      height = Math.min(subjectBounds.height, 300);
+      position.y = subjectBounds.position.y + subjectBounds.height / 2 - height / 2;
+      if (column === "incomers") {
+        width = subjectBounds.position.x - Sizes.emptyNodeOffset - position.x;
+      } else {
+        const rightX = position.x + width;
+        position.x = subjectBounds.position.x + subjectBounds.width + Sizes.emptyNodeOffset;
+        width = rightX - position.x;
+      }
+      return {
+        id,
+        parent: null,
+        position: [position.x, position.y],
+        title: "empty node",
+        description: null,
+        technology: null,
+        tags: null,
+        links: null,
+        color: "muted",
+        shape: "rectangle",
+        style: {
+          border: "dashed",
+          opacity: 50
+        },
+        kind: LayoutRelationshipsViewResult.Empty,
+        level: 0,
+        labelBBox: {
+          x: position.x,
+          y: position.y,
+          width,
+          height
+        },
+        inEdges: [],
+        outEdges: [],
+        children: [],
+        width,
+        height,
+        column,
+        ports: {
+          in: [],
+          out: []
+        }
+      };
+    }
+    const parentId = g.parent(id);
+    const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
+    minX = Math.min(minX, position.x);
+    minY = Math.min(minY, position.y);
+    const navigateTo = ((_a2 = element.defaultView) == null ? void 0 : _a2.id) ?? null;
+    return {
+      id,
+      parent: parentId ?? 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,
+      icon: element.icon ?? "none",
+      modelRef: element.id,
+      kind: element.kind,
+      level: nodeLevel(id),
+      labelBBox: {
+        x: position.x,
+        y: position.y,
+        width,
+        height
+      },
+      style: {
+        ...element.$element.style
+      },
+      navigateTo,
+      inEdges: [],
+      outEdges: [],
+      ...children.length > 0 && { depth: nodeDepth(id) },
+      children,
+      width,
+      height,
+      column,
+      ports: {
+        in: sortedPorts(inPorts),
+        out: sortedPorts(outPorts)
+      }
+    };
+  });
+  return {
+    bounds: {
+      x: minX,
+      y: minY,
+      width: g.graph().width ?? 100,
+      height: g.graph().height ?? 100
+    },
+    nodes,
+    edges: g.edges().reduce((acc, e) => {
+      var _a2;
+      const edge = g.edge(e);
+      const ename = e.name;
+      if (!ename) {
+        return acc;
+      }
+      const { name, source, target, relations } = find(edges, (e2) => e2.name === ename);
+      const onlyRelation = only(relations);
+      const label = (onlyRelation == null ? void 0 : onlyRelation.title) ?? "untitled";
+      const isMultiple = relations.length > 1;
+      const points = edge.points.map((p) => [p.x, p.y]);
+      if (!hasAtLeast(points, 1)) {
+        return acc;
+      }
+      const navigateTo = ((_a2 = onlyRelation == null ? void 0 : onlyRelation.navigateTo) == null ? void 0 : _a2.id) ?? null;
+      acc.push({
+        id: name,
+        source,
+        target,
+        label: isMultiple ? `${relations.length} relationships` : label,
+        relations: relations.map((r) => r.id),
+        parent: null,
+        points,
+        ...navigateTo && { navigateTo },
+        head: "normal",
+        tail: "none",
+        line: (onlyRelation == null ? void 0 : onlyRelation.$relationship.line) ?? "dashed"
+      });
+      return acc;
+    }, [])
+  };
+}
+function useRelationshipsView(fqn) {
+  const model = useLikeC4Model(true);
+  return useMemo(() => {
+    return {
+      id: `relationships-${fqn}`,
+      title: `Relationships of ${fqn}`,
+      description: null,
+      autoLayout: {
+        direction: "LR"
+      },
+      tags: null,
+      links: null,
+      hash: "empty",
+      customColorDefinitions: {},
+      ...layoutRelationshipsView(computeRelationshipsView(fqn, model))
+    };
+  }, [model, fqn, computeRelationshipsView]);
+}
+export {
+  LayoutRelationshipsViewResult,
+  layoutRelationshipsView,
+  useRelationshipsView
+};

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -0,0 +1,5 @@
+import { RelationshipsBrowserActorRef } from './actor';
+export type RelationshipsBrowserProps = {
+    actorRef: RelationshipsBrowserActorRef;
+};
+export declare function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps): import("react/jsx-runtime").JSX.Element;