@smwb/ui-react 2.8.0 → 2.10.0

package/dist/components/dataDisplay/dagView/dagView.js

@@ -0,0 +1,543 @@
+import { jsxs as S, jsx as d, Fragment as bt } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/dagView/dagView.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                         */
+import i from "react";
+import be from "clsx";
+import { useControllableState as Xe } from "../../../hooks/useControllableState.js";
+import { useForkRef as vt } from "../../../hooks/useForkRef.js";
+import { useId as yt } from "../../../hooks/useId.js";
+import { useSafeLayoutEffect as O } from "../../../hooks/useSafeLayoutEffect.js";
+import { dagLayout as _t, dagEdgePath as xt } from "./dagLayout.js";
+import { viewportTransform as Rt, centerOn as At, zoomAt as Mt, fitBounds as St, createPanZoom as kt, isVisible as Bt } from "./panZoom.js";
+const b = 24, Ye = {
+  roleDescription: "dependency graph",
+  status: "Status",
+  dependsOn: "Depends on",
+  requiredBy: "Required by",
+  statuses: {
+    idle: "Idle",
+    pending: "Pending",
+    running: "Running",
+    success: "Success",
+    warning: "Warning",
+    error: "Error",
+    skipped: "Skipped"
+  },
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fitView: "Fit to view",
+  controls: "Zoom"
+}, Dt = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])', Nt = (g) => typeof g == "number" ? `${g}px` : g, zt = (g, k) => g.length === k.length && g.every((R, J) => R === k[J]), It = (g, k) => {
+  const R = g == null ? void 0 : g.label;
+  return typeof R == "string" || typeof R == "number" ? String(R) : k;
+}, $t = (g) => console.warn(`[smwb] DagView: ${g}`), Lt = i.forwardRef(function(k, R) {
+  const {
+    className: J,
+    style: ve,
+    label: Je,
+    summary: Q,
+    nodes: ye,
+    edges: _e,
+    renderNode: z,
+    direction: _ = "LR",
+    nodeWidth: xe = 180,
+    nodeHeight: Re = 56,
+    rankGap: ee = 64,
+    nodeGap: te = 24,
+    layout: Ae,
+    selectedId: Qe,
+    defaultSelectedId: re,
+    onSelectedChange: et,
+    onNodeClick: ne,
+    dimUnrelated: Me = !1,
+    viewport: tt,
+    defaultViewport: se,
+    onViewportChange: rt,
+    fit: Se = !0,
+    minZoom: ke = 0.1,
+    maxZoom: Be = 2,
+    wheel: De = "zoom",
+    controls: nt = !0,
+    labels: I,
+    height: Ne,
+    apiRef: ze,
+    "data-testid": st = "dag-view",
+    ...ot
+  } = k, W = yt(), Ie = `${W}-arrow`, $e = `${W}-arrow-active`, Le = `${W}-summary`, B = i.useRef(null), $ = i.useRef(/* @__PURE__ */ new Map()), v = i.useMemo(
+    () => ({
+      ...Ye,
+      ...I,
+      statuses: { ...Ye.statuses, ...I == null ? void 0 : I.statuses }
+    }),
+    [I]
+  ), Ve = (e) => {
+    var t;
+    return (t = v.statuses[e]) != null ? t : e;
+  }, x = i.useMemo(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of ye) e.has(t.id) || e.set(t.id, t);
+    return e;
+  }, [ye]), oe = i.useMemo(() => [...x.keys()], [x]), U = i.useRef(oe);
+  zt(U.current, oe) || (U.current = oe);
+  const L = U.current, ae = i.useMemo(() => {
+    const e = [...x.values()].map((n) => {
+      var o, a;
+      return {
+        id: n.id,
+        width: (o = n.width) != null ? o : xe,
+        height: (a = n.height) != null ? a : Re
+      };
+    }), t = _e.map((n) => ({ id: n.id, source: n.source, target: n.target })), r = {
+      nodes: e,
+      edges: t,
+      direction: _,
+      rankGap: ee,
+      nodeGap: te,
+      warn: $t
+    };
+    return { key: JSON.stringify([
+      _,
+      ee,
+      te,
+      e.map((n) => [n.id, n.width, n.height]),
+      t.map((n) => {
+        var o;
+        return [(o = n.id) != null ? o : null, n.source, n.target];
+      })
+    ]), input: r };
+  }, [x, _e, _, xe, Re, ee, te]), ie = i.useRef(ae);
+  ie.current.key !== ae.key && (ie.current = ae);
+  const Ze = ie.current, h = i.useRef({ fit: Se, minZoom: ke, maxZoom: Be, wheel: De, apiRef: ze, layout: Ae });
+  h.current = { fit: Se, minZoom: ke, maxZoom: Be, wheel: De, apiRef: ze, layout: Ae };
+  const l = i.useMemo(
+    () => {
+      var e;
+      return ((e = h.current.layout) != null ? e : _t)(Ze.input);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [Ze]
+  ), H = (e) => _ === "TB" ? e.x : e.y, p = i.useMemo(() => {
+    const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+    for (const n of l.edges)
+      e.has(n.target) || e.set(n.target, []), t.has(n.source) || t.set(n.source, []), e.get(n.target).push(n), t.get(n.source).push(n);
+    const r = [...l.nodes.values()].sort((n, o) => n.layer - o.layer || H(n) - H(o)), s = /* @__PURE__ */ new Map();
+    for (const n of r)
+      s.has(n.layer) || s.set(n.layer, []), s.get(n.layer).push(n);
+    return { incoming: e, outgoing: t, ordered: r, layers: s };
+  }, [l, _]), [m, P] = Xe({
+    value: Qe,
+    defaultValue: re != null ? re : null,
+    onChange: et
+  }), D = i.useMemo(() => {
+    var n, o;
+    const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+    if (m === null || !l.nodes.has(m)) return { active: !1, edges: e, nodes: t };
+    const { incoming: r, outgoing: s } = p;
+    for (const a of (n = r.get(m)) != null ? n : [])
+      e.set(a.id, "upstream"), t.set(a.source, "upstream");
+    for (const a of (o = s.get(m)) != null ? o : [])
+      e.set(a.id, "downstream"), t.set(a.target, "downstream");
+    return { active: !0, edges: e, nodes: t };
+  }, [m, l, p]), [q, Ee] = i.useState(null), [ce, ue] = i.useState(null), K = i.useMemo(() => {
+    var e, t;
+    return q !== null && l.nodes.has(q) ? q : m !== null && l.nodes.has(m) ? m : (t = (e = p.ordered[0]) == null ? void 0 : e.id) != null ? t : null;
+  }, [l, q, m, p]), [A, de] = Xe({
+    value: tt,
+    defaultValue: se != null ? se : { x: 0, y: 0, zoom: 1 },
+    onChange: rt
+  }), [at, it] = i.useState(!1), ct = A.zoom < 0.45, N = i.useRef(A);
+  N.current = A;
+  const Fe = i.useRef(m);
+  Fe.current = m;
+  const le = i.useRef(ce);
+  le.current = ce;
+  const me = i.useRef(K);
+  me.current = K;
+  const Te = i.useRef(P);
+  Te.current = P;
+  const V = i.useRef(de);
+  V.current = de;
+  const j = i.useRef(l);
+  j.current = l;
+  const fe = i.useRef(z);
+  fe.current = z;
+  const ge = i.useRef(!1), Z = () => {
+    var e, t, r, s;
+    return {
+      width: (t = (e = B.current) == null ? void 0 : e.clientWidth) != null ? t : 0,
+      height: (s = (r = B.current) == null ? void 0 : r.clientHeight) != null ? s : 0
+    };
+  }, we = () => {
+    const { width: e, height: t } = Z();
+    return e > 0 && t > 0;
+  }, ut = () => ({
+    width: j.current.width + b * 2,
+    height: j.current.height + b * 2
+  }), Ce = (e) => {
+    const t = j.current.nodes.get(e);
+    return t && { x: t.x + b, y: t.y + b, width: t.width, height: t.height };
+  }, he = i.useRef(null);
+  if (he.current === null) {
+    const e = {
+      fitView() {
+        if (!we()) return;
+        const t = ut();
+        V.current(
+          St(
+            { x: 0, y: 0, ...t },
+            Z(),
+            0,
+            h.current.minZoom,
+            Math.max(h.current.minZoom, Math.min(1, h.current.maxZoom))
+          )
+        );
+      },
+      zoomTo(t) {
+        e.zoomBy(t / N.current.zoom);
+      },
+      zoomBy(t) {
+        const { width: r, height: s } = Z();
+        V.current(
+          Mt(
+            N.current,
+            { x: r / 2, y: s / 2 },
+            t,
+            h.current.minZoom,
+            h.current.maxZoom
+          )
+        );
+      },
+      centerNode(t) {
+        const r = Ce(t);
+        r && V.current(
+          At(N.current, { x: r.x + r.width / 2, y: r.y + r.height / 2 }, Z())
+        );
+      }
+    };
+    he.current = e;
+  }
+  const y = he.current, Oe = (e) => {
+    const t = Ce(e);
+    t && we() && !Bt(N.current, t, Z(), 8) && y.centerNode(e);
+  }, We = () => {
+    !ge.current || !we() || (ge.current = !1, y.fitView());
+  };
+  O(() => {
+    h.current.fit && (ge.current = !0, We());
+  }, [l]), O(() => {
+    var n, o;
+    const e = B.current;
+    if (!e) return;
+    const t = kt(e, {
+      viewport: () => N.current,
+      write: (a) => V.current(a),
+      minZoom: () => h.current.minZoom,
+      maxZoom: () => h.current.maxZoom,
+      wheel: () => h.current.wheel,
+      onInteracting: it
+    });
+    let r = 0;
+    const s = typeof ResizeObserver == "function" ? new ResizeObserver(() => {
+      cancelAnimationFrame(r), r = requestAnimationFrame(We);
+    }) : void 0;
+    return s == null || s.observe(e), (o = (n = h.current).apiRef) == null || o.call(n, y), () => {
+      t(), s == null || s.disconnect(), cancelAnimationFrame(r);
+    };
+  }, []);
+  const Ue = (e, t) => {
+    const r = x.get(e);
+    !r || r.disabled || (P(e), ne == null || ne(r, t));
+  }, pe = (e) => {
+    var t;
+    e !== void 0 && (Ee(e), (t = $.current.get(e)) == null || t.focus({ preventScroll: !0 }), Oe(e));
+  }, He = i.useRef(null);
+  O(() => {
+    var a, c;
+    const e = He.current;
+    if (He.current = L, e === null || e === L) return;
+    const t = new Set(L), r = Fe.current;
+    r !== null && !t.has(r) && e.includes(r) && Te.current(null);
+    const s = le.current;
+    if (s === null || t.has(s)) return;
+    ue(null);
+    const n = (a = B.current) == null ? void 0 : a.ownerDocument, o = me.current;
+    n && (n.activeElement === null || n.activeElement === n.body) && o !== null && ((c = $.current.get(o)) == null || c.focus({ preventScroll: !0 }));
+  }, [L]);
+  const Pe = i.useRef(/* @__PURE__ */ new WeakMap()), qe = i.useRef(/* @__PURE__ */ new WeakMap()), G = i.useCallback(() => {
+    var s, n;
+    const e = me.current, t = Pe.current, r = qe.current;
+    for (const [o, a] of $.current)
+      for (const c of a.querySelectorAll(Dt)) {
+        t.has(c) || t.set(c, c.getAttribute("tabindex")), c.getAttribute("tabindex") !== ((s = r.get(c)) != null ? s : null) && t.set(c, c.getAttribute("tabindex"));
+        const u = o === e ? (n = t.get(c)) != null ? n : null : "-1";
+        if (c.getAttribute("tabindex") === u) {
+          r.set(c, u);
+          continue;
+        }
+        u === null ? c.removeAttribute("tabindex") : c.setAttribute("tabindex", u), r.set(c, u);
+      }
+  }, []);
+  O(() => {
+    fe.current && G();
+  }, [K, G]), O(() => {
+    const e = B.current;
+    if (!e || typeof MutationObserver != "function") return;
+    const t = new MutationObserver((r) => {
+      var a;
+      if (!fe.current) return;
+      const s = Pe.current, n = qe.current;
+      let o = !1;
+      for (const c of r) {
+        if (c.type !== "attributes") {
+          o = !0;
+          continue;
+        }
+        const u = c.target;
+        if (!n.has(u)) continue;
+        const w = u.getAttribute("tabindex");
+        w !== ((a = n.get(u)) != null ? a : null) && (s.set(u, w), o = !0);
+      }
+      o && G();
+    });
+    return t.observe(e, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["tabindex"] }), () => t.disconnect();
+  }, [G]);
+  const dt = (e, t) => {
+    var E, Y, F, f, T;
+    const r = _ === "TB", s = r ? "ArrowDown" : "ArrowRight", n = r ? "ArrowUp" : "ArrowLeft", o = r ? "ArrowLeft" : "ArrowUp", a = r ? "ArrowRight" : "ArrowDown", c = (M) => {
+      var Ge;
+      return (Ge = M.map((C) => l.nodes.get(C)).filter((C) => C !== void 0).sort((C, pt) => H(C) - H(pt))[0]) == null ? void 0 : Ge.id;
+    };
+    if (t === s) return c(((E = p.outgoing.get(e)) != null ? E : []).map((M) => M.target));
+    if (t === n) return c(((Y = p.incoming.get(e)) != null ? Y : []).map((M) => M.source));
+    const u = l.nodes.get(e);
+    if (!u) return;
+    const w = (F = p.layers.get(u.layer)) != null ? F : [], X = w.findIndex((M) => M.id === e);
+    if (t === o) return (f = w[X - 1]) == null ? void 0 : f.id;
+    if (t === a) return (T = w[X + 1]) == null ? void 0 : T.id;
+  }, lt = (e) => {
+    var n, o, a;
+    const t = e.target, r = (n = t.dataset) == null ? void 0 : n.dagId;
+    if (r === void 0 || !t.classList.contains("smwb-dag-view__node") || e.ctrlKey || e.metaKey || e.altKey) return;
+    const s = e.key;
+    if (s.startsWith("Arrow") && e.shiftKey) {
+      const u = s === "ArrowLeft" ? 48 : s === "ArrowRight" ? -48 : 0, w = s === "ArrowUp" ? 48 : s === "ArrowDown" ? -48 : 0;
+      de({ x: A.x + u, y: A.y + w, zoom: A.zoom }), e.preventDefault();
+      return;
+    }
+    if (s.startsWith("Arrow")) {
+      e.preventDefault(), pe(dt(r, s));
+      return;
+    }
+    switch (s) {
+      case "Home":
+        e.preventDefault(), pe((o = p.ordered[0]) == null ? void 0 : o.id);
+        return;
+      case "End":
+        e.preventDefault(), pe((a = p.ordered[p.ordered.length - 1]) == null ? void 0 : a.id);
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault(), Ue(r, e);
+        return;
+      case "Escape":
+        if (m === null) return;
+        e.preventDefault(), P(null);
+        return;
+      case "+":
+      case "=":
+        e.preventDefault(), y.zoomBy(1.25);
+        return;
+      case "-":
+      case "_":
+        e.preventDefault(), y.zoomBy(0.8);
+        return;
+      case "0":
+        e.preventDefault(), y.fitView();
+        return;
+    }
+  }, mt = (e) => {
+    var t;
+    return /* @__PURE__ */ S(bt, { children: [
+      /* @__PURE__ */ d("span", { className: "smwb-dag-view__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ d("span", { className: "smwb-dag-view__label", children: (t = e.label) != null ? t : e.id }),
+      e.status ? /* @__PURE__ */ d("span", { className: "smwb-dag-view__status", children: Ve(e.status) }) : null
+    ] });
+  }, ft = (e) => {
+    var a, c;
+    const t = x.get(e), r = [];
+    t != null && t.status && r.push(`${v.status}: ${Ve(t.status)}.`);
+    const s = (u) => u.map((w) => It(x.get(w), w)).join(", "), n = ((a = p.incoming.get(e)) != null ? a : []).map((u) => u.source), o = ((c = p.outgoing.get(e)) != null ? c : []).map((u) => u.target);
+    return n.length && r.push(`${v.dependsOn}: ${s(n)}.`), o.length && r.push(`${v.requiredBy}: ${s(o)}.`), r.join(" ");
+  }, gt = (e, t) => {
+    var F;
+    const r = x.get(e), s = r != null ? r : { id: e }, n = {
+      selected: m === e,
+      related: (F = D.nodes.get(e)) != null ? F : null,
+      dimmed: !!Me && D.active && m !== e && !D.nodes.has(e),
+      focused: ce === e
+    }, o = `${W}-node-${t}`, a = l.nodes.get(e), c = a ? {
+      left: `${a.x + b}px`,
+      top: `${a.y + b}px`,
+      width: `${a.width}px`,
+      height: `${a.height}px`
+    } : { display: "none" }, u = r == null ? void 0 : r.accent;
+    u && (c["--smwb-dag-view-node-accent"] = u);
+    const w = (f) => {
+      if (f.target !== f.currentTarget) return;
+      Ee(e), ue(e);
+      let T = !0;
+      try {
+        T = f.currentTarget.matches(":focus-visible");
+      } catch {
+      }
+      T && Oe(e);
+    }, X = (f) => {
+      f.target !== f.currentTarget || le.current !== e || U.current.includes(e) && ue(null);
+    }, E = ft(e), Y = (z != null ? z : mt)(s, n);
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        role: "option",
+        "data-dag-id": e,
+        ref: (f) => {
+          f ? $.current.set(e, f) : $.current.delete(e);
+        },
+        className: be("smwb-dag-view__node", {
+          "smwb-dag-view__node--selected": n.selected,
+          "smwb-dag-view__node--upstream": n.related === "upstream",
+          "smwb-dag-view__node--downstream": n.related === "downstream",
+          "smwb-dag-view__node--dimmed": n.dimmed,
+          "smwb-dag-view__node--disabled": !!(r != null && r.disabled)
+        }),
+        "data-status": r == null ? void 0 : r.status,
+        "aria-selected": n.selected,
+        "aria-disabled": r != null && r.disabled ? !0 : void 0,
+        "aria-describedby": E ? o : void 0,
+        tabIndex: K === e ? 0 : -1,
+        style: c,
+        onClick: (f) => Ue(e, f),
+        onFocus: w,
+        onBlur: X,
+        children: [
+          Y,
+          /* @__PURE__ */ d("span", { id: o, hidden: !0, children: E })
+        ]
+      },
+      e
+    );
+  }, wt = (e) => {
+    const t = D.edges.get(e.id);
+    return be("smwb-dag-view__edge", {
+      "smwb-dag-view__edge--active": t !== void 0,
+      "smwb-dag-view__edge--upstream": t === "upstream",
+      "smwb-dag-view__edge--downstream": t === "downstream",
+      "smwb-dag-view__edge--dimmed": !!Me && D.active && t === void 0,
+      "smwb-dag-view__edge--reversed": e.reversed
+    });
+  }, Ke = l.width + b * 2, je = l.height + b * 2, ht = vt(R, B);
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      "data-testid": st,
+      ...ot,
+      ref: ht,
+      className: be("smwb-dag-view", J),
+      style: Ne === void 0 ? ve : { ...ve, height: Nt(Ne) },
+      "data-direction": _,
+      "data-zoom": ct ? "far" : void 0,
+      "data-interacting": at ? "" : void 0,
+      children: [
+        /* @__PURE__ */ S(
+          "div",
+          {
+            className: "smwb-dag-view__world",
+            role: "listbox",
+            "aria-label": Je,
+            "aria-roledescription": v.roleDescription,
+            "aria-describedby": Q ? Le : void 0,
+            style: {
+              width: `${Ke}px`,
+              height: `${je}px`,
+              transform: Rt(A)
+            },
+            onKeyDown: lt,
+            children: [
+              /* @__PURE__ */ S("svg", { className: "smwb-dag-view__edges", width: Ke, height: je, "aria-hidden": "true", children: [
+                /* @__PURE__ */ S("defs", { children: [
+                  /* @__PURE__ */ d(
+                    "marker",
+                    {
+                      id: Ie,
+                      viewBox: "0 0 10 10",
+                      refX: "9",
+                      refY: "5",
+                      markerWidth: "10",
+                      markerHeight: "10",
+                      markerUnits: "userSpaceOnUse",
+                      orient: "auto-start-reverse",
+                      children: /* @__PURE__ */ d("path", { className: "smwb-dag-view__arrow", d: "M0,1 L9,5 L0,9 z" })
+                    }
+                  ),
+                  /* @__PURE__ */ d(
+                    "marker",
+                    {
+                      id: $e,
+                      viewBox: "0 0 10 10",
+                      refX: "9",
+                      refY: "5",
+                      markerWidth: "10",
+                      markerHeight: "10",
+                      markerUnits: "userSpaceOnUse",
+                      orient: "auto-start-reverse",
+                      children: /* @__PURE__ */ d("path", { className: "smwb-dag-view__arrow smwb-dag-view__arrow--active", d: "M0,1 L9,5 L0,9 z" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ d("g", { transform: `translate(${b} ${b})`, children: l.edges.map((e) => /* @__PURE__ */ d(
+                  "path",
+                  {
+                    className: wt(e),
+                    "data-source": e.source,
+                    "data-target": e.target,
+                    d: xt(e.points, _),
+                    markerEnd: `url(#${D.edges.has(e.id) ? $e : Ie})`
+                  },
+                  e.id
+                )) })
+              ] }),
+              L.map((e, t) => gt(e, t))
+            ]
+          }
+        ),
+        Q ? /* @__PURE__ */ d("p", { id: Le, className: "smwb-dag-view__summary", children: Q }) : null,
+        nt ? /* @__PURE__ */ S("div", { className: "smwb-dag-view__controls", role: "group", "aria-label": v.controls, children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              className: "smwb-dag-view__control",
+              title: v.zoomIn,
+              onClick: () => y.zoomBy(1.25),
+              children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ d("path", { d: "M12 5v14M5 12h14" }) })
+            }
+          ),
+          /* @__PURE__ */ d(
+            "button",
+            {
+              type: "button",
+              className: "smwb-dag-view__control",
+              title: v.zoomOut,
+              onClick: () => y.zoomBy(0.8),
+              children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ d("path", { d: "M5 12h14" }) })
+            }
+          ),
+          /* @__PURE__ */ d("button", { type: "button", className: "smwb-dag-view__control", title: v.fitView, onClick: () => y.fitView(), children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ d("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) }) })
+        ] }) : null
+      ]
+    }
+  );
+}), qt = Lt;
+export {
+  qt as DagView
+};
+//# sourceMappingURL=dagView.js.map