@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/headless/source/components/dataDisplay/dagView/dagView.jsx

@@ -0,0 +1,639 @@
+import {
+  DEV,
+  For,
+  Show,
+  createEffect,
+  createMemo,
+  createSelector,
+  createSignal,
+  createUniqueId,
+  mergeProps,
+  on,
+  onCleanup,
+  onMount,
+  splitProps,
+  untrack
+} from "solid-js";
+import cn from "clsx";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
+import {
+  dagEdgePath,
+  dagLayout
+} from "./dagLayout";
+import { centerOn, createPanZoom, fitBounds, isVisible, viewportTransform, zoomAt } from "./panZoom";
+const PADDING = 24;
+const DEFAULT_LABELS = {
+  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"
+};
+const NODE_KEYS = ["label", "status", "accent", "width", "height", "data", "disabled"];
+const INNER_FOCUSABLE = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])';
+const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const sameList = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+const nameOf = (node, id) => {
+  const label = node?.label;
+  return typeof label === "string" || typeof label === "number" ? String(label) : id;
+};
+const warn = DEV ? (message) => console.warn(`[smwb] DagView: ${message}`) : void 0;
+function DagView(props) {
+  const merged = mergeProps(
+    {
+      direction: "LR",
+      nodeWidth: 180,
+      nodeHeight: 56,
+      rankGap: 64,
+      nodeGap: 24,
+      fit: true,
+      minZoom: 0.1,
+      maxZoom: 2,
+      wheel: "zoom",
+      controls: true
+    },
+    props
+  );
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "style",
+    "label",
+    "summary",
+    "nodes",
+    "edges",
+    "renderNode",
+    "direction",
+    "nodeWidth",
+    "nodeHeight",
+    "rankGap",
+    "nodeGap",
+    "layout",
+    "selectedId",
+    "defaultSelectedId",
+    "onSelectedChange",
+    "onNodeClick",
+    "dimUnrelated",
+    "viewport",
+    "defaultViewport",
+    "onViewportChange",
+    "fit",
+    "minZoom",
+    "maxZoom",
+    "wheel",
+    "controls",
+    "labels",
+    "height",
+    "apiRef",
+    "ref",
+    "data-testid"
+  ]);
+  const uid = createUniqueId();
+  const arrowId = `${uid}-arrow`;
+  const activeArrowId = `${uid}-arrow-active`;
+  const summaryId = `${uid}-summary`;
+  let root;
+  const elements = /* @__PURE__ */ new Map();
+  const labels = createMemo(
+    () => ({
+      ...DEFAULT_LABELS,
+      ...local.labels,
+      statuses: { ...DEFAULT_LABELS.statuses, ...local.labels?.statuses }
+    })
+  );
+  const statusWord = (status) => labels().statuses[status] ?? status;
+  const byId = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const node of local.nodes) if (!map.has(node.id)) map.set(node.id, node);
+    return map;
+  });
+  const ids = createMemo(() => [...byId().keys()], [], { equals: sameList });
+  const structure = createMemo(
+    () => {
+      const nodes = [...byId().values()].map((node) => ({
+        id: node.id,
+        width: node.width ?? local.nodeWidth,
+        height: node.height ?? local.nodeHeight
+      }));
+      const edges = local.edges.map((edge) => ({ id: edge.id, source: edge.source, target: edge.target }));
+      const input = {
+        nodes,
+        edges,
+        direction: local.direction,
+        rankGap: local.rankGap,
+        nodeGap: local.nodeGap,
+        warn
+      };
+      const key = JSON.stringify([
+        local.direction,
+        local.rankGap,
+        local.nodeGap,
+        nodes.map((n) => [n.id, n.width, n.height]),
+        edges.map((e) => [e.id ?? null, e.source, e.target])
+      ]);
+      return { key, input };
+    },
+    void 0,
+    { equals: (a, b) => a.key === b.key }
+  );
+  const layout = createMemo(() => (local.layout ?? dagLayout)(structure().input));
+  const across = (node) => local.direction === "TB" ? node.x : node.y;
+  const graph = createMemo(() => {
+    const result = layout();
+    const incoming = /* @__PURE__ */ new Map();
+    const outgoing = /* @__PURE__ */ new Map();
+    for (const edge of result.edges) {
+      if (!incoming.has(edge.target)) incoming.set(edge.target, []);
+      if (!outgoing.has(edge.source)) outgoing.set(edge.source, []);
+      incoming.get(edge.target).push(edge);
+      outgoing.get(edge.source).push(edge);
+    }
+    const ordered = [...result.nodes.values()].sort((a, b) => a.layer - b.layer || across(a) - across(b));
+    const layers = /* @__PURE__ */ new Map();
+    for (const node of ordered) {
+      if (!layers.has(node.layer)) layers.set(node.layer, []);
+      layers.get(node.layer).push(node);
+    }
+    return { incoming, outgoing, ordered, layers };
+  });
+  const [selected, setSelected] = createControllableState({
+    value: () => local.selectedId,
+    defaultValue: untrack(() => local.defaultSelectedId) ?? null,
+    onChange: (id) => local.onSelectedChange?.(id)
+  });
+  const isSelected = createSelector(selected);
+  const relations = createMemo(() => {
+    const id = selected();
+    const edges = /* @__PURE__ */ new Map();
+    const nodes = /* @__PURE__ */ new Map();
+    if (id === null || !layout().nodes.has(id)) return { active: false, edges, nodes };
+    const { incoming, outgoing } = graph();
+    for (const edge of incoming.get(id) ?? []) {
+      edges.set(edge.id, "upstream");
+      nodes.set(edge.source, "upstream");
+    }
+    for (const edge of outgoing.get(id) ?? []) {
+      edges.set(edge.id, "downstream");
+      nodes.set(edge.target, "downstream");
+    }
+    return { active: true, edges, nodes };
+  });
+  const [active, setActive] = createSignal(null);
+  const [focused, setFocused] = createSignal(null);
+  const tabStop = createMemo(() => {
+    const nodes = layout().nodes;
+    const last = active();
+    if (last !== null && nodes.has(last)) return last;
+    const chosen = selected();
+    if (chosen !== null && nodes.has(chosen)) return chosen;
+    return graph().ordered[0]?.id ?? null;
+  });
+  const [viewport, setViewport] = createControllableState({
+    value: () => local.viewport,
+    defaultValue: untrack(() => local.defaultViewport) ?? { x: 0, y: 0, zoom: 1 },
+    onChange: (next) => local.onViewportChange?.(next)
+  });
+  const [interacting, setInteracting] = createSignal(false);
+  const far = createMemo(() => viewport().zoom < 0.45);
+  const size = () => ({
+    width: root?.clientWidth ?? 0,
+    height: root?.clientHeight ?? 0
+  });
+  const hasSize = () => {
+    const { width, height } = size();
+    return width > 0 && height > 0;
+  };
+  const worldSize = () => ({
+    width: layout().width + PADDING * 2,
+    height: layout().height + PADDING * 2
+  });
+  const nodeRect = (id) => {
+    const box = layout().nodes.get(id);
+    return box && { x: box.x + PADDING, y: box.y + PADDING, width: box.width, height: box.height };
+  };
+  const api = {
+    fitView() {
+      if (!hasSize()) return;
+      const world = worldSize();
+      setViewport(
+        fitBounds(
+          { x: 0, y: 0, ...world },
+          size(),
+          0,
+          local.minZoom,
+          Math.max(local.minZoom, Math.min(1, local.maxZoom))
+        )
+      );
+    },
+    zoomTo(zoom) {
+      api.zoomBy(zoom / viewport().zoom);
+    },
+    zoomBy(factor) {
+      const { width, height } = size();
+      setViewport(zoomAt(viewport(), { x: width / 2, y: height / 2 }, factor, local.minZoom, local.maxZoom));
+    },
+    centerNode(id) {
+      const rect = nodeRect(id);
+      if (!rect) return;
+      setViewport(centerOn(viewport(), { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }, size()));
+    }
+  };
+  const ensureVisible = (id) => {
+    const rect = nodeRect(id);
+    if (rect && hasSize() && !isVisible(viewport(), rect, size(), 8)) api.centerNode(id);
+  };
+  let fitPending = false;
+  const tryFit = () => {
+    if (!fitPending || !hasSize()) return;
+    fitPending = false;
+    api.fitView();
+  };
+  createEffect(
+    on(
+      layout,
+      () => {
+        if (!untrack(() => local.fit)) return;
+        fitPending = true;
+        tryFit();
+      },
+      { defer: true }
+    )
+  );
+  onMount(() => {
+    const dispose = createPanZoom(root, {
+      viewport,
+      write: setViewport,
+      minZoom: () => local.minZoom,
+      maxZoom: () => local.maxZoom,
+      wheel: () => local.wheel,
+      onInteracting: setInteracting
+    });
+    let frame = 0;
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(tryFit);
+    }) : void 0;
+    resizeObserver?.observe(root);
+    onCleanup(() => {
+      dispose();
+      resizeObserver?.disconnect();
+      cancelAnimationFrame(frame);
+    });
+    fitPending = local.fit;
+    tryFit();
+    local.apiRef?.(api);
+  });
+  const choose = (id, event) => {
+    const node = byId().get(id);
+    if (!node || node.disabled) return;
+    setSelected(id);
+    local.onNodeClick?.(node, event);
+  };
+  const focusNode = (id) => {
+    if (id === void 0) return;
+    setActive(id);
+    elements.get(id)?.focus({ preventScroll: true });
+    ensureVisible(id);
+  };
+  createEffect((before) => {
+    const now = ids();
+    if (before) {
+      untrack(() => {
+        const present = new Set(now);
+        const chosen = selected();
+        if (chosen !== null && !present.has(chosen) && before.includes(chosen)) setSelected(null);
+        const had = focused();
+        if (had === null || present.has(had)) return;
+        setFocused(null);
+        const doc = root?.ownerDocument;
+        const stop = tabStop();
+        if (doc && (doc.activeElement === null || doc.activeElement === doc.body) && stop !== null)
+          elements.get(stop)?.focus({ preventScroll: true });
+      });
+    }
+    return now;
+  });
+  const ownTabIndex = /* @__PURE__ */ new WeakMap();
+  const syncInnerTabStops = () => {
+    const stop = untrack(tabStop);
+    for (const [id, el] of elements) {
+      for (const inner of el.querySelectorAll(INNER_FOCUSABLE)) {
+        if (!ownTabIndex.has(inner)) ownTabIndex.set(inner, inner.getAttribute("tabindex"));
+        const own = ownTabIndex.get(inner) ?? null;
+        const next = id === stop ? own : "-1";
+        if (inner.getAttribute("tabindex") === next) continue;
+        if (next === null) inner.removeAttribute("tabindex");
+        else inner.setAttribute("tabindex", next);
+      }
+    }
+  };
+  onMount(() => {
+    if (!local.renderNode) return;
+    createEffect(on(tabStop, syncInnerTabStops));
+    if (typeof MutationObserver !== "function") return;
+    const observer = new MutationObserver(syncInnerTabStops);
+    observer.observe(root, { childList: true, subtree: true });
+    onCleanup(() => observer.disconnect());
+  });
+  const neighbour = (id, key) => {
+    const tb = local.direction === "TB";
+    const forward = tb ? "ArrowDown" : "ArrowRight";
+    const back = tb ? "ArrowUp" : "ArrowLeft";
+    const before = tb ? "ArrowLeft" : "ArrowUp";
+    const after = tb ? "ArrowRight" : "ArrowDown";
+    const nodes = layout().nodes;
+    const first = (list) => list.map((other) => nodes.get(other)).filter((node) => node !== void 0).sort((a, b) => across(a) - across(b))[0]?.id;
+    if (key === forward) return first((graph().outgoing.get(id) ?? []).map((e) => e.target));
+    if (key === back) return first((graph().incoming.get(id) ?? []).map((e) => e.source));
+    const self = nodes.get(id);
+    if (!self) return void 0;
+    const layer = graph().layers.get(self.layer) ?? [];
+    const index = layer.findIndex((node) => node.id === id);
+    if (key === before) return layer[index - 1]?.id;
+    if (key === after) return layer[index + 1]?.id;
+    return void 0;
+  };
+  const onKeyDown = (event) => {
+    const target = event.target;
+    const id = target.dataset?.["dagId"];
+    if (id === void 0 || !target.classList.contains("smwb-dag-view__node")) return;
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const key = event.key;
+    if (key.startsWith("Arrow") && event.shiftKey) {
+      const step = 48;
+      const v = viewport();
+      const dx = key === "ArrowLeft" ? step : key === "ArrowRight" ? -step : 0;
+      const dy = key === "ArrowUp" ? step : key === "ArrowDown" ? -step : 0;
+      setViewport({ x: v.x + dx, y: v.y + dy, zoom: v.zoom });
+      event.preventDefault();
+      return;
+    }
+    if (key.startsWith("Arrow")) {
+      event.preventDefault();
+      focusNode(neighbour(id, key));
+      return;
+    }
+    switch (key) {
+      case "Home":
+        event.preventDefault();
+        focusNode(graph().ordered[0]?.id);
+        return;
+      case "End":
+        event.preventDefault();
+        focusNode(graph().ordered[graph().ordered.length - 1]?.id);
+        return;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        choose(id, event);
+        return;
+      case "Escape":
+        if (selected() === null) return;
+        event.preventDefault();
+        setSelected(null);
+        return;
+      case "+":
+      case "=":
+        event.preventDefault();
+        api.zoomBy(1.25);
+        return;
+      case "-":
+      case "_":
+        event.preventDefault();
+        api.zoomBy(0.8);
+        return;
+      case "0":
+        event.preventDefault();
+        api.fitView();
+        return;
+    }
+  };
+  const defaultRender = (node) => <>
+      <span class="smwb-dag-view__dot" aria-hidden="true" />
+      <span class="smwb-dag-view__label">{node.label ?? node.id}</span>
+      <Show when={node.status}>{(status) => <span class="smwb-dag-view__status">{statusWord(status())}</span>}</Show>
+    </>;
+  const description = (id) => {
+    const node = byId().get(id);
+    const parts = [];
+    if (node?.status) parts.push(`${labels().status}: ${statusWord(node.status)}.`);
+    const names = (list) => list.map((other) => nameOf(byId().get(other), other)).join(", ");
+    const from = (graph().incoming.get(id) ?? []).map((e) => e.source);
+    const to = (graph().outgoing.get(id) ?? []).map((e) => e.target);
+    if (from.length) parts.push(`${labels().dependsOn}: ${names(from)}.`);
+    if (to.length) parts.push(`${labels().requiredBy}: ${names(to)}.`);
+    return parts.join(" ");
+  };
+  const renderNodeFor = (id, index) => {
+    const node = () => byId().get(id);
+    const view = { id };
+    for (const key of NODE_KEYS) Object.defineProperty(view, key, { enumerable: true, get: () => node()?.[key] });
+    const state = {
+      get selected() {
+        return isSelected(id);
+      },
+      get related() {
+        return relations().nodes.get(id) ?? null;
+      },
+      get dimmed() {
+        const r = relations();
+        return Boolean(local.dimUnrelated) && r.active && !isSelected(id) && !r.nodes.has(id);
+      },
+      get focused() {
+        return focused() === id;
+      }
+    };
+    const descriptionId = () => `${uid}-node-${index()}`;
+    const style = () => {
+      const box = layout().nodes.get(id);
+      const css = box ? {
+        left: `${box.x + PADDING}px`,
+        top: `${box.y + PADDING}px`,
+        width: `${box.width}px`,
+        height: `${box.height}px`
+      } : { display: "none" };
+      const accent = node()?.accent;
+      if (accent) css["--smwb-dag-view-node-accent"] = accent;
+      return css;
+    };
+    const onFocus = (event) => {
+      if (event.target !== event.currentTarget) return;
+      setActive(id);
+      setFocused(id);
+      let keyboard = true;
+      try {
+        keyboard = event.currentTarget.matches(":focus-visible");
+      } catch {
+      }
+      if (keyboard) ensureVisible(id);
+    };
+    const onBlur = (event) => {
+      if (event.target === event.currentTarget && focused() === id) setFocused(null);
+    };
+    const content = untrack(() => (local.renderNode ?? defaultRender)(view, state));
+    return <div
+      role="option"
+      data-dag-id={id}
+      ref={(el) => {
+        elements.set(id, el);
+        onCleanup(() => elements.get(id) === el && elements.delete(id));
+      }}
+      class={cn("smwb-dag-view__node", {
+        "smwb-dag-view__node--selected": state.selected,
+        "smwb-dag-view__node--upstream": state.related === "upstream",
+        "smwb-dag-view__node--downstream": state.related === "downstream",
+        "smwb-dag-view__node--dimmed": state.dimmed,
+        "smwb-dag-view__node--disabled": Boolean(node()?.disabled)
+      })}
+      data-status={node()?.status}
+      aria-selected={state.selected ? "true" : "false"}
+      aria-disabled={node()?.disabled ? "true" : void 0}
+      aria-describedby={description(id) ? descriptionId() : void 0}
+      tabIndex={tabStop() === id ? 0 : -1}
+      style={style()}
+      onClick={(event) => choose(id, event)}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+        {content}
+        <span id={descriptionId()} hidden>
+          {description(id)}
+        </span>
+      </div>;
+  };
+  const edgeClass = (edge) => {
+    const r = relations();
+    const relation = r.edges.get(edge.id);
+    return cn("smwb-dag-view__edge", {
+      "smwb-dag-view__edge--active": relation !== void 0,
+      "smwb-dag-view__edge--upstream": relation === "upstream",
+      "smwb-dag-view__edge--downstream": relation === "downstream",
+      "smwb-dag-view__edge--dimmed": Boolean(local.dimUnrelated) && r.active && relation === void 0,
+      "smwb-dag-view__edge--reversed": edge.reversed
+    });
+  };
+  const rootStyle = () => mergeStyle(local.style, { height: local.height === void 0 ? void 0 : cssLength(local.height) });
+  return <div
+    data-testid={local["data-testid"] ?? "dag-view"}
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => root = el)}
+    class={cn("smwb-dag-view", local.class)}
+    {...rootStyle() === void 0 ? {} : { style: rootStyle() }}
+    data-direction={local.direction}
+    data-zoom={far() ? "far" : void 0}
+    data-interacting={interacting() ? "" : void 0}
+  >
+      <div
+    class="smwb-dag-view__world"
+    role="listbox"
+    aria-label={local.label}
+    aria-roledescription={labels().roleDescription}
+    aria-describedby={local.summary ? summaryId : void 0}
+    style={{
+      width: `${worldSize().width}px`,
+      height: `${worldSize().height}px`,
+      transform: viewportTransform(viewport())
+    }}
+    onKeyDown={onKeyDown}
+  >
+        <svg class="smwb-dag-view__edges" width={worldSize().width} height={worldSize().height} aria-hidden="true">
+          <defs>
+            <marker
+    id={arrowId}
+    viewBox="0 0 10 10"
+    refX="9"
+    refY="5"
+    markerWidth="10"
+    markerHeight="10"
+    markerUnits="userSpaceOnUse"
+    orient="auto-start-reverse"
+  >
+              <path class="smwb-dag-view__arrow" d="M0,1 L9,5 L0,9 z" />
+            </marker>
+            <marker
+    id={activeArrowId}
+    viewBox="0 0 10 10"
+    refX="9"
+    refY="5"
+    markerWidth="10"
+    markerHeight="10"
+    markerUnits="userSpaceOnUse"
+    orient="auto-start-reverse"
+  >
+              <path class="smwb-dag-view__arrow smwb-dag-view__arrow--active" d="M0,1 L9,5 L0,9 z" />
+            </marker>
+          </defs>
+          <g transform={`translate(${PADDING} ${PADDING})`}>
+            <For each={layout().edges}>
+              {(edge) => <path
+    class={edgeClass(edge)}
+    data-source={edge.source}
+    data-target={edge.target}
+    d={dagEdgePath(edge.points, local.direction)}
+    marker-end={`url(#${relations().edges.has(edge.id) ? activeArrowId : arrowId})`}
+  />}
+            </For>
+          </g>
+        </svg>
+        <For each={ids()}>{(id, index) => renderNodeFor(id, index)}</For>
+      </div>
+      <Show when={local.summary}>
+        <p id={summaryId} class="smwb-dag-view__summary">
+          {local.summary}
+        </p>
+      </Show>
+      <Show when={local.controls}>
+        <div class="smwb-dag-view__controls" role="group" aria-label={labels().controls}>
+          <button
+    type="button"
+    class="smwb-dag-view__control"
+    title={labels().zoomIn}
+    onClick={() => api.zoomBy(1.25)}
+  >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </button>
+          <button
+    type="button"
+    class="smwb-dag-view__control"
+    title={labels().zoomOut}
+    onClick={() => api.zoomBy(0.8)}
+  >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 12h14" />
+            </svg>
+          </button>
+          <button
+    type="button"
+    class="smwb-dag-view__control"
+    title={labels().fitView}
+    onClick={() => api.fitView()}
+  >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
+            </svg>
+          </button>
+        </div>
+      </Show>
+    </div>;
+}
+var dagView_default = DagView;
+export {
+  DagView,
+  dagView_default as default
+};
+//# sourceMappingURL=dagView.jsx.map