@likec4/diagram 1.27.1 → 1.27.2

package/dist/overlays/relationship-details/layout.js

@@ -0,0 +1,314 @@
+import dagre from '@dagrejs/dagre';
+import { invariant } from '@likec4/core';
+import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
+import { ifind } from '../../packages/core/src/utils/iterable/find.js';
+import DefaultMap from '../../_virtual/default-map.js';
+import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
+
+const Sizes = {
+  dagre: {
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25
+  },
+  edgeLabel: {
+    width: 220,
+    height: 14
+    // minlen: 1,
+  },
+  nodeWidth: 330,
+  nodeHeight: 180,
+  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 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
+    };
+  };
+}
+function layoutRelationshipDetails(data, scope) {
+  const g = createGraph();
+  const sources = createNodes("sources", data.sources, g), targets = createNodes("targets", data.targets, g);
+  const edges = 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
+    };
+  });
+  const nodeIds = [
+    ...sources.graphNodes.values(),
+    ...targets.graphNodes.values()
+  ];
+  for (const { id: nodeId } of nodeIds) {
+    const node = g.node(nodeId);
+    if (node.isCompound) {
+      continue;
+    }
+    const edgeCount2 = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
+    if (edgeCount2 > 3) {
+      node.height = node.height + (edgeCount2 - 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);
+  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] ??= 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 = (nodeId, type, ports) => {
+    return pipe(
+      ports,
+      map((port, index) => {
+        return {
+          port: nodeId + "_" + type + index,
+          topY: nodeBounds(port).position.y
+        };
+      }),
+      sortBy(prop("topY")),
+      map(prop("port"))
+    );
+  };
+  let minX = 0;
+  let minY = 0;
+  const nodes = nodeIds.map(({ id }) => {
+    const { element, inPorts, outPorts, column } = g.node(id);
+    let { position, width, height } = nodeBounds(id);
+    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 = 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,
+      parent: parentId ?? 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",
+      modelRef: element.id,
+      kind: element.kind,
+      level: nodeLevel(id),
+      labelBBox: {
+        x: position.x,
+        y: position.y,
+        width,
+        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, (e2) => e2.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,
+        source,
+        sourceHandle,
+        target,
+        targetHandle,
+        label,
+        color: relationship.color,
+        ...navigateTo && { navigateTo },
+        ...description && { description },
+        ...technology && { technology },
+        points: edge.points.map((p) => [p.x, p.y]),
+        line: relationship.line,
+        relationId: relationship.id,
+        parent: null
+      });
+      return acc;
+    }, [])
+  };
+}
+
+export { layoutRelationshipDetails };

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

@@ -1,7 +1,7 @@
 import { RelationshipsBrowserActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
         id: string;
@@ -35,6 +35,8 @@ export declare const edgeTypes: {
             active?: boolean;
             dimmed?: import("../../base").Base.Dimmed;
         } & {
+            sourceFqn: Fqn;
+            targetFqn: Fqn;
             relations: NonEmptyArray<RelationId>;
             color: Color | undefined;
             label: string | null;

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

@@ -8,9 +8,9 @@ import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
 import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { useRelationshipsView } from './-useRelationshipsView.js';
 import { ViewPadding } from './const.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
+import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode, CompoundNode, ElementNode } from './custom/nodeTypes.js';
@@ -124,7 +124,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);
   useEffect(() => {

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

@@ -33,6 +33,8 @@ export declare namespace RelationshipsBrowserTypes {
     type Node = ElementNode | CompoundNode | EmptyNode;
     type NodeData = Node['data'];
     type EdgeData = Base.EdgeData<{
+        sourceFqn: Fqn;
+        targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;
         color: Color | undefined;
         label: string | null;

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

@@ -2,8 +2,8 @@ import { BBox, Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineTy
 import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent } from 'xstate';
 import { Base } from '../../base';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
+import { LayoutRelationshipsViewResult } from './layout';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
@@ -156,10 +156,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
         type: "update.view";
         params: NonReducibleUnknown;
     };
-    "xyflow:updateNodeInternals": {
-        type: "xyflow:updateNodeInternals";
-        params: unknown;
-    };
     "xyflow:fitDiagram": {
         type: "xyflow:fitDiagram";
         params: {
@@ -167,16 +163,24 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
             bounds?: BBox;
         } | undefined;
     };
+    "xyflow:updateNodeInternals": {
+        type: "xyflow:updateNodeInternals";
+        params: unknown;
+    };
 }>, Values<{
     isReady: {
         type: "isReady";
         params: unknown;
     };
+    hasViewId: {
+        type: "hasViewId";
+        params: unknown;
+    };
     anotherSubject: {
         type: "anotherSubject";
         params: unknown;
     };
-}>, never, "isReady" | "initializing" | "closed" | {
+}>, never, "closed" | "isReady" | "initializing" | {
     active: "idle" | "layouting";
 }, "active", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "relationships-browser";
@@ -213,6 +217,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -264,6 +270,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -322,6 +330,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                         focusable?: boolean;
                         type: "relationship";
                         data: {
+                            sourceFqn: Fqn;
+                            targetFqn: Fqn;
                             relations: NonEmptyArray<RelationId>;
                             color: Color | undefined;
                             label: string | null;
@@ -481,10 +491,80 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                             type: "update.view";
                             params: NonReducibleUnknown;
                         };
+                        "xyflow:fitDiagram": {
+                            type: "xyflow:fitDiagram";
+                            params: {
+                                duration?: number;
+                                bounds?: BBox;
+                            } | undefined;
+                        };
                         "xyflow:updateNodeInternals": {
                             type: "xyflow:updateNodeInternals";
                             params: unknown;
                         };
+                    }>, Values<{
+                        isReady: {
+                            type: "isReady";
+                            params: unknown;
+                        };
+                        hasViewId: {
+                            type: "hasViewId";
+                            params: unknown;
+                        };
+                        anotherSubject: {
+                            type: "anotherSubject";
+                            params: unknown;
+                        };
+                    }>, never, EventObject>;
+                };
+                readonly 'xyflow.edgeClick': {
+                    readonly guard: "hasViewId";
+                    readonly actions: ActionFunction<Readonly<{
+                        subject: Fqn;
+                        viewId: ViewId | null;
+                        scope: "global" | "view";
+                        closeable: boolean;
+                        enableSelectSubject: boolean;
+                        enableChangeScope: boolean;
+                        xyflow: XYFLowInstance | null;
+                        xystore: XYStoreApi | null;
+                        layouted: LayoutRelationshipsViewResult | null;
+                        navigateFromNode: string | null;
+                        xynodes: RelationshipsBrowserTypes.Node[];
+                        xyedges: RelationshipsBrowserTypes.Edge[];
+                    }>, {
+                        type: "xyflow.edgeClick";
+                        edge: RelationshipsBrowserTypes.Edge;
+                    }, Events, undefined, {
+                        src: "layouter";
+                        logic: PromiseActorLogic<{
+                            xyedges: RelationshipsBrowserTypes.Edge[];
+                            xynodes: RelationshipsBrowserTypes.Node[];
+                        }, {
+                            subjectId: Fqn;
+                            navigateFromNode: string | null;
+                            xyflow: XYFLowInstance;
+                            xystore: XYStoreApi;
+                            update: LayoutRelationshipsViewResult;
+                        }, EventObject>;
+                        id: "layouter";
+                    }, Values<{
+                        "xyflow.init": {
+                            type: "xyflow.init";
+                            params: NonReducibleUnknown;
+                        };
+                        "xyflow.applyNodeChanges": {
+                            type: "xyflow.applyNodeChanges";
+                            params: NonReducibleUnknown;
+                        };
+                        "xyflow.applyEdgeChanges": {
+                            type: "xyflow.applyEdgeChanges";
+                            params: NonReducibleUnknown;
+                        };
+                        "update.view": {
+                            type: "update.view";
+                            params: NonReducibleUnknown;
+                        };
                         "xyflow:fitDiagram": {
                             type: "xyflow:fitDiagram";
                             params: {
@@ -492,11 +572,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                 bounds?: BBox;
                             } | undefined;
                         };
+                        "xyflow:updateNodeInternals": {
+                            type: "xyflow:updateNodeInternals";
+                            params: unknown;
+                        };
                     }>, Values<{
                         isReady: {
                             type: "isReady";
                             params: unknown;
                         };
+                        hasViewId: {
+                            type: "hasViewId";
+                            params: unknown;
+                        };
                         anotherSubject: {
                             type: "anotherSubject";
                             params: unknown;
@@ -623,6 +711,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -945,10 +1035,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     type: "update.view";
                                     params: NonReducibleUnknown;
                                 };
-                                "xyflow:updateNodeInternals": {
-                                    type: "xyflow:updateNodeInternals";
-                                    params: unknown;
-                                };
                                 "xyflow:fitDiagram": {
                                     type: "xyflow:fitDiagram";
                                     params: {
@@ -956,11 +1042,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                         bounds?: BBox;
                                     } | undefined;
                                 };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
                             }>, Values<{
                                 isReady: {
                                     type: "isReady";
                                     params: unknown;
                                 };
+                                hasViewId: {
+                                    type: "hasViewId";
+                                    params: unknown;
+                                };
                                 anotherSubject: {
                                     type: "anotherSubject";
                                     params: unknown;
@@ -1034,6 +1128,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                 focusable?: boolean;
                                 type: "relationship";
                                 data: {
+                                    sourceFqn: Fqn;
+                                    targetFqn: Fqn;
                                     relations: NonEmptyArray<RelationId>;
                                     color: Color | undefined;
                                     label: string | null;
@@ -1076,6 +1172,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1115,6 +1213,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1153,6 +1253,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1191,6 +1293,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1229,6 +1333,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1267,6 +1373,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1306,6 +1414,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1344,6 +1454,8 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     focusable?: boolean;
                                     type: "relationship";
                                     data: {
+                                        sourceFqn: Fqn;
+                                        targetFqn: Fqn;
                                         relations: NonEmptyArray<RelationId>;
                                         color: Color | undefined;
                                         label: string | null;
@@ -1406,10 +1518,6 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     type: "update.view";
                                     params: NonReducibleUnknown;
                                 };
-                                "xyflow:updateNodeInternals": {
-                                    type: "xyflow:updateNodeInternals";
-                                    params: unknown;
-                                };
                                 "xyflow:fitDiagram": {
                                     type: "xyflow:fitDiagram";
                                     params: {
@@ -1417,11 +1525,19 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                         bounds?: BBox;
                                     } | undefined;
                                 };
+                                "xyflow:updateNodeInternals": {
+                                    type: "xyflow:updateNodeInternals";
+                                    params: unknown;
+                                };
                             }>, Values<{
                                 isReady: {
                                     type: "isReady";
                                     params: unknown;
                                 };
+                                hasViewId: {
+                                    type: "hasViewId";
+                                    params: unknown;
+                                };
                                 anotherSubject: {
                                     type: "anotherSubject";
                                     params: unknown;