@likec4/diagram 1.36.0 → 1.37.0

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -0,0 +1,441 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, autoPlacement, size, hide } from '@floating-ui/dom';
+import { nameFromFqn } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { VStack, styled, HStack, Box } from '@likec4/styles/jsx';
+import { bleed } from '@likec4/styles/patterns';
+import { Portal, ScrollAreaAutosize, Button, Divider, Space, Text, TooltipGroup, Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { useActorRef, useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { memo, useCallback, useRef, useState, useEffect, Fragment as Fragment$1, forwardRef } from 'react';
+import { pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
+import { Link } from '../../components/Link.js';
+import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
+import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+import { useDiagram, useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
+import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
+import { useXYStore } from '../../hooks/useXYFlow.js';
+import { findDiagramEdge, findDiagramNode } from '../../state/utils.js';
+import { RelationshipPopoverActorLogic } from './actor.js';
+import { endpoint, title } from './styles.css.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { roundDpr } from '../../utils/roundDpr.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+
+function selectDiagramContext(c) {
+  let selected = null;
+  for (const edge of c.xyedges) {
+    if (edge.selected) {
+      if (selected) {
+        selected = null;
+        break;
+      }
+      selected = edge.data.id;
+    }
+  }
+  return {
+    viewId: c.view.id,
+    selected
+  };
+}
+const RelationshipPopover = memo(() => {
+  const actorRef = useActorRef(RelationshipPopoverActorLogic);
+  const diagram = useDiagram();
+  const { viewId, selected } = useDiagramContext(selectDiagramContext);
+  const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
+  useUpdateEffect(() => {
+    actorRef.send({ type: "close" });
+  }, [viewId]);
+  useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
+    actorRef.send({ type: "xyedge.mouseEnter", edgeId: edge.data.id });
+  });
+  useOnDiagramEvent("edgeMouseLeave", () => {
+    actorRef.send({ type: "xyedge.mouseLeave" });
+  });
+  useOnDiagramEvent("edgeEditingStarted", () => {
+    actorRef.send({ type: "close" });
+  });
+  useOnDiagramEvent("walkthroughStarted", () => {
+    actorRef.send({ type: "close" });
+  });
+  useUpdateEffect(() => {
+    if (selected) {
+      actorRef.send({ type: "xyedge.select", edgeId: selected });
+    } else {
+      actorRef.send({ type: "xyedge.unselect" });
+    }
+  }, [selected]);
+  const onMouseEnter = useCallback((event) => {
+    if (!openedEdgeId) {
+      return;
+    }
+    actorRef.send({ type: "dropdown.mouseEnter" });
+    const edge = diagram.findEdge(openedEdgeId);
+    if (edge && !edge.data.hovered) {
+      diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
+    }
+  }, [actorRef, diagram, openedEdgeId]);
+  const onMouseLeave = useCallback((event) => {
+    if (!openedEdgeId) {
+      return;
+    }
+    actorRef.send({ type: "dropdown.mouseLeave" });
+    const edge = diagram.findEdge(openedEdgeId);
+    if (edge?.data.hovered) {
+      diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
+    }
+  }, [actorRef, diagram, openedEdgeId]);
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
+    (ctx) => {
+      const diagramEdge2 = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
+      const sourceNode2 = diagramEdge2 ? findDiagramNode(ctx, diagramEdge2.source) : null;
+      const targetNode2 = diagramEdge2 ? findDiagramNode(ctx, diagramEdge2.target) : null;
+      return {
+        diagramEdge: diagramEdge2,
+        sourceNode: sourceNode2,
+        targetNode: targetNode2
+      };
+    },
+    shallowEqual,
+    [openedEdgeId]
+  );
+  if (!diagramEdge || !sourceNode || !targetNode) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    RelationshipPopoverInternal,
+    {
+      viewId,
+      diagramEdge,
+      sourceNode,
+      targetNode,
+      onMouseEnter,
+      onMouseLeave
+    }
+  );
+});
+const getEdgeLabelElement = (edgeId, container) => {
+  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null;
+};
+const selectTransform = (s) => roundDpr(s.transform[0]) + " " + roundDpr(s.transform[1]) + " " + s.transform[2].toFixed(3);
+const RelationshipPopoverInternal = ({
+  viewId,
+  diagramEdge,
+  sourceNode,
+  targetNode,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const ref = useRef(null);
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+  const { onOpenSource } = useDiagramEventHandlers();
+  const { portalProps } = useMantinePortalProps();
+  const [referenceEl, setReferenceEl] = useState(null);
+  const viewport = useXYStore(selectTransform);
+  useEffect(() => {
+    setReferenceEl(getEdgeLabelElement(diagramEdge.id, portalProps?.target));
+  }, [diagramEdge, viewport]);
+  useEffect(() => {
+    const reference = referenceEl;
+    const popper = ref.current;
+    if (!reference || !popper) {
+      return;
+    }
+    let wasCanceled = false;
+    const update = () => {
+      computePosition(reference, popper, {
+        placement: "bottom",
+        middleware: [
+          offset(2),
+          autoPlacement({
+            padding: 16,
+            allowedPlacements: [
+              "bottom-start",
+              "bottom-end",
+              "top-start",
+              "top-end",
+              "right-start",
+              "right-end",
+              "left-start",
+              "left-end"
+            ]
+          }),
+          size({
+            padding: 16,
+            apply({ availableHeight, availableWidth, elements }) {
+              if (wasCanceled) {
+                return;
+              }
+              Object.assign(elements.floating.style, {
+                maxWidth: `${clamp(roundDpr(availableWidth), { min: 150, max: 400 })}px`,
+                maxHeight: `${clamp(roundDpr(availableHeight), { min: 0, max: 500 })}px`
+              });
+            }
+          }),
+          hide({
+            padding: 16
+          })
+        ]
+      }).then(({ x, y, middlewareData }) => {
+        if (wasCanceled) {
+          return;
+        }
+        popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`;
+        popper.style.visibility = middlewareData.hide?.referenceHidden ? "hidden" : "visible";
+      });
+    };
+    const cleanup = autoUpdate(reference, popper, update);
+    return () => {
+      wasCanceled = true;
+      cleanup();
+    };
+  }, [referenceEl]);
+  const likec4model = useLikeC4Model();
+  const diagram = useDiagram();
+  const [direct, nested] = pipe(
+    diagramEdge.relations,
+    map((id) => {
+      try {
+        return likec4model.relationship(id);
+      } catch (e) {
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
+          e
+        );
+        return null;
+      }
+    }),
+    filter(isTruthy),
+    partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
+  );
+  if (direct.length === 0 && nested.length === 0) {
+    console.error("No relationships found  diagram edge", {
+      diagramEdge,
+      sourceNode,
+      targetNode
+    });
+    return null;
+  }
+  const navigateTo = enableNavigateTo ? (viewId2) => {
+    diagram.navigateTo(viewId2);
+  } : void 0;
+  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    index > 0 && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Relationship,
+      {
+        viewId,
+        relationship,
+        sourceNode,
+        targetNode,
+        edge: diagramEdge,
+        onNavigateTo: navigateTo,
+        ...onOpenSource && enableVscode && {
+          onOpenSource: () => onOpenSource({ relation: relationship.id })
+        }
+      }
+    )
+  ] }, relationship.id);
+  return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+    ScrollAreaAutosize,
+    {
+      ref,
+      onMouseEnter,
+      onMouseLeave,
+      type: "auto",
+      scrollbars: "y",
+      scrollbarSize: 6,
+      styles: {
+        viewport: {
+          overscrollBehavior: "contain",
+          minWidth: 150
+        }
+      },
+      className: cx(
+        "react-flow__panel nowheel nopan nodrag",
+        css({
+          layerStyle: "likec4.dropdown",
+          p: "0",
+          pointerEvents: "all",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          width: "max-content",
+          cursor: "default"
+        })
+      ),
+      children: /* @__PURE__ */ jsxs(
+        VStack,
+        {
+          css: {
+            gap: "3.5",
+            padding: "4",
+            paddingTop: "2.5"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                color: "gray",
+                size: "compact-xs",
+                style: {
+                  alignSelf: "flex-start",
+                  fontWeight: 500,
+                  ["--button-fz"]: "var(--font-sizes-xxs)"
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.openRelationshipDetails(diagramEdge.id);
+                },
+                children: "browse relationships"
+              }
+            ),
+            direct.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { label: /* @__PURE__ */ jsx(Label, { children: "direct relationships" }), labelPosition: "left" }),
+              direct.map(renderRelationship)
+            ] }),
+            nested.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              direct.length > 0 && /* @__PURE__ */ jsx(Space, {}),
+              /* @__PURE__ */ jsx(Divider, { label: /* @__PURE__ */ jsx(Label, { children: "resolved from nested" }), labelPosition: "left" }),
+              nested.map(renderRelationship)
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
+const Relationship = forwardRef(({
+  viewId,
+  relationship: r,
+  edge,
+  sourceNode,
+  targetNode,
+  onNavigateTo,
+  onOpenSource
+}, ref) => {
+  const sourceId = getShortId(r, r.source.id, sourceNode);
+  const targetId = getShortId(r, r.target.id, targetNode);
+  const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
+  const links = r.links;
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      ref,
+      className: bleed({
+        block: "2",
+        inline: "2",
+        paddingBlock: "2",
+        paddingInline: "2",
+        gap: "1",
+        rounded: "sm",
+        backgroundColor: {
+          _hover: {
+            base: "mantine.colors.gray[1]",
+            _dark: "mantine.colors.dark[5]/70"
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: "0.5", children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId }),
+          /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
+          /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId }),
+          /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
+            navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "sm",
+                radius: "sm",
+                variant: "default",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onNavigateTo?.(navigateTo);
+                },
+                style: {
+                  alignSelf: "flex-end"
+                },
+                role: "button",
+                children: /* @__PURE__ */ jsx(IconZoomScan, { size: "80%", stroke: 2 })
+              }
+            ) }),
+            onOpenSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "sm",
+                radius: "sm",
+                variant: "default",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onOpenSource();
+                },
+                role: "button",
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { size: "80%", stroke: 2 })
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+        r.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "kind" }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.kind })
+        ] }),
+        r.technology && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
+          /* @__PURE__ */ jsx(Label, { children: "technology" }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
+        ] }),
+        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "description" }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              css: {
+                paddingLeft: "2.5",
+                py: "1.5",
+                borderLeft: "2px dotted",
+                borderLeftColor: {
+                  base: "mantine.colors.gray[3]",
+                  _dark: "mantine.colors.dark[4]"
+                }
+              },
+              children: /* @__PURE__ */ jsx(MarkdownBlock, { value: r.description, fontSize: "sm" })
+            }
+          )
+        ] }),
+        links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Label, { children: "links" }),
+          /* @__PURE__ */ jsx(HStack, { gap: "1", flexWrap: "wrap", children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url)) })
+        ] })
+      ]
+    }
+  );
+});
+const Label = styled("span", {
+  base: {
+    display: "inline-block",
+    fontSize: "xxs",
+    fontWeight: 500,
+    userSelect: "none",
+    lineHeight: "[1.11]",
+    color: "mantine.colors.dimmed"
+  }
+});
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  label: "",
+  children: null,
+  offset: 8,
+  withinPortal: false
+});
+function getShortId(r, actualEndpointId, diagramNode) {
+  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
+  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
+}
+
+export { RelationshipPopover };

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -0,0 +1,177 @@
+import { EdgeId } from '@likec4/core/types';
+import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject } from 'xstate';
+export type RelationshipPopoverActorEvent = {
+    type: 'xyedge.mouseEnter';
+    edgeId: EdgeId;
+} | {
+    type: 'xyedge.mouseLeave';
+} | {
+    type: 'xyedge.select';
+    edgeId: EdgeId;
+} | {
+    type: 'xyedge.unselect';
+} | {
+    type: 'close';
+} | {
+    type: 'dropdown.mouseEnter';
+} | {
+    type: 'dropdown.mouseLeave';
+};
+export interface RelationshipPopoverActorContext {
+    edgeId: EdgeId | null;
+    /**
+     * True if the edge was selected
+     */
+    edgeSelected: boolean;
+    /**
+     * The timeout for opening the popover
+     * If it was closed recently (<1.5s), it will be 300ms
+     * Otherwise, it will be 800ms
+     */
+    openTimeout: number;
+}
+declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, RelationshipPopoverActorEvent, {}, never, Values<{
+    "update edgeId": {
+        type: "update edgeId";
+        params: NonReducibleUnknown;
+    };
+    "increase open timeout": {
+        type: "increase open timeout";
+        params: NonReducibleUnknown;
+    };
+    "decrease open timeout": {
+        type: "decrease open timeout";
+        params: NonReducibleUnknown;
+    };
+    "reset edgeId": {
+        type: "reset edgeId";
+        params: NonReducibleUnknown;
+    };
+}>, Values<{
+    "edge was selected": {
+        type: "edge was selected";
+        params: unknown;
+    };
+    "edge was hovered": {
+        type: "edge was hovered";
+        params: unknown;
+    };
+}>, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
+    active: "hovered" | "opened" | "closing";
+}, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
+    readonly id: "breadcrumbs";
+    readonly context: () => {
+        edgeId: null;
+        edgeSelected: false;
+        openTimeout: number;
+    };
+    readonly initial: "idle";
+    readonly on: {
+        readonly close: {
+            readonly target: "#idle";
+            readonly actions: readonly ["reset edgeId", "increase open timeout"];
+        };
+    };
+    readonly states: {
+        readonly idle: {
+            readonly id: "idle";
+            readonly on: {
+                readonly 'xyedge.mouseEnter': {
+                    readonly target: "opening";
+                    readonly actions: "update edgeId";
+                };
+                readonly 'xyedge.select': {
+                    readonly target: "active";
+                    readonly actions: "update edgeId";
+                };
+            };
+            readonly after: {
+                readonly 'long idle': {
+                    readonly actions: "increase open timeout";
+                };
+            };
+        };
+        readonly opening: {
+            readonly on: {
+                readonly 'xyedge.mouseLeave': {
+                    readonly target: "idle";
+                };
+                readonly 'xyedge.select': {
+                    readonly target: "active";
+                    readonly actions: "update edgeId";
+                };
+            };
+            readonly after: {
+                readonly 'open timeout': {
+                    readonly actions: "decrease open timeout";
+                    readonly target: "active";
+                };
+            };
+        };
+        readonly active: {
+            readonly tags: readonly ["opened"];
+            readonly initial: "opened";
+            readonly exit: "reset edgeId";
+            readonly on: {
+                readonly 'xyedge.unselect': {
+                    readonly target: "idle";
+                    readonly actions: "increase open timeout";
+                };
+                readonly 'xyedge.select': {
+                    readonly actions: "update edgeId";
+                };
+            };
+            readonly states: {
+                readonly opened: {
+                    readonly on: {
+                        readonly 'dropdown.mouseEnter': {
+                            readonly target: "hovered";
+                        };
+                        readonly 'xyedge.mouseLeave': {
+                            readonly guard: "edge was hovered";
+                            readonly target: "closing";
+                        };
+                    };
+                };
+                readonly hovered: {
+                    readonly on: {
+                        readonly 'dropdown.mouseLeave': readonly [{
+                            readonly guard: "edge was selected";
+                            readonly target: "opened";
+                        }, {
+                            readonly target: "closing";
+                        }];
+                    };
+                };
+                readonly closing: {
+                    readonly on: {
+                        readonly 'xyedge.mouseEnter': {
+                            readonly guard: "edge was hovered";
+                            readonly target: "opened";
+                            readonly actions: "update edgeId";
+                        };
+                        readonly 'xyedge.select': {
+                            readonly target: "opened";
+                            readonly actions: "update edgeId";
+                        };
+                        readonly 'dropdown.mouseEnter': {
+                            readonly target: "hovered";
+                        };
+                    };
+                    readonly after: {
+                        readonly 'close timeout': {
+                            readonly target: "#idle";
+                        };
+                    };
+                };
+            };
+        };
+    };
+}>;
+export interface RelationshipPopoverActorLogic extends ActorLogicFrom<typeof _actorLogic> {
+}
+export declare const RelationshipPopoverActorLogic: RelationshipPopoverActorLogic;
+export type RelationshipPopoverActorSnapshot = SnapshotFrom<RelationshipPopoverActorLogic>;
+export interface RelationshipPopoverActorRef extends ActorRefFrom<RelationshipPopoverActorLogic> {
+}
+export {};