@truedat/core 8.11.5 → 8.11.7

package/src/components/graph/ConceptNode.js

@@ -1,13 +1,22 @@
-import { memo } from "react";
+import { memo, useContext } from "react";
+import PropTypes from "prop-types";
 import { Handle, Position } from "@xyflow/react";
-import "./ConceptNode.less";
+import { EdgeHoverContext } from "./ColoredEdge";
 
-const ConceptNode = ({ data }) => {
+const ConceptNode = ({ id, data }) => {
+  const hoverCtx = useContext(EdgeHoverContext);
+  const isConnected =
+    (hoverCtx?.connectedNodeIds && hoverCtx.connectedNodeIds.has(id)) ||
+    (hoverCtx?.hoveredEdgeEndpoints &&
+      (hoverCtx.hoveredEdgeEndpoints.source === id ||
+        hoverCtx.hoveredEdgeEndpoints.target === id));
   const { label, isActive } = data;
 
   return (
     <div
-      className={`td-concept-node${isActive ? " td-concept-node--active" : ""}`}
+      className={`td-concept-node${isActive ? " td-concept-node--active" : ""}${isConnected ? " td-concept-node--connected" : ""}`}
+      onMouseEnter={() => hoverCtx?.setHoveredNodeId(id)}
+      onMouseLeave={() => hoverCtx?.setHoveredNodeId(null)}
     >
       <Handle type="target" position={Position.Left} />
       <span className="td-concept-node__label">{label}</span>
@@ -16,4 +25,12 @@ const ConceptNode = ({ data }) => {
   );
 };
 
+ConceptNode.propTypes = {
+  id: PropTypes.string,
+  data: PropTypes.shape({
+    isActive: PropTypes.bool,
+    label: PropTypes.node,
+  }),
+};
+
 export default memo(ConceptNode);

package/src/components/graph/FlowPorts.js

@@ -0,0 +1 @@
+export { ControlButton, Handle, Position } from "@xyflow/react";

package/src/components/graph/LineageGroupNode.js

@@ -0,0 +1,320 @@
+import { memo, useContext } from "react";
+import PropTypes from "prop-types";
+import { Icon, Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Handle, Position } from "@xyflow/react";
+import LineageQueryOrigin from "./LineageQueryOrigin";
+import { EdgeHoverContext } from "./ColoredEdge";
+import lineageNodeIcon from "./lineageNodeIcon";
+
+const relationTooltip = ({ sources = 0, targets = 0, total = 0 } = {}) =>
+  `Hidden relations: ${total}\nSources: ${sources}\nTargets: ${targets}`;
+
+const stopNodeAction = (callback) => (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  callback && callback();
+};
+
+const LineageGroupNode = ({ id, data = {} }) => {
+  const { formatMessage } = useIntl();
+  const hoverCtx = useContext(EdgeHoverContext);
+  const isHovered = hoverCtx?.hoveredNodeId === id;
+  const isConnected =
+    (hoverCtx?.connectedNodeIds && hoverCtx.connectedNodeIds.has(id)) ||
+    (hoverCtx?.hoveredEdgeEndpoints &&
+      (hoverCtx.hoveredEdgeEndpoints.source === id ||
+        hoverCtx.hoveredEdgeEndpoints.target === id));
+  const handleMouseEnter = () => hoverCtx?.setHoveredNodeId(id);
+  const handleMouseLeave = () => hoverCtx?.setHoveredNodeId(null);
+  const {
+    canCollapse,
+    collapsed,
+    collapsedRelationCounts,
+    connectedHandleIds = [],
+    count,
+    designVariant,
+    hiddenChildrenCount,
+    iconName,
+    isActive,
+    focusDirect,
+    focusDimmed,
+    queryOrigin,
+    label,
+    nodeCount,
+    groupCount,
+    onExpandDescendants,
+    onToggleCollapse,
+    onConfirmOversizedExpand,
+    onDismissOversizedWarning,
+    oversized,
+    oversizedWarningOpen,
+    resourceContainer,
+    systemTypeClassName,
+    systemTypeLabel,
+    systemTypeMissing,
+    variant,
+    z,
+  } = data;
+  const connectedHandles = new Set(connectedHandleIds);
+  const connectedHandleClassName = (handleId) =>
+    connectedHandles.has(handleId) ? "td-lineage-node-handle--connected" : "";
+  const hasHiddenChildren = Number(hiddenChildrenCount) > 0;
+  const hasCollapsedRelations =
+    collapsed && Number(collapsedRelationCounts?.total) > 0;
+  const collapsedRelationsTooltip = relationTooltip(collapsedRelationCounts);
+  const hiddenChildrenTooltip = `Hidden child nodes: ${hiddenChildrenCount}`;
+  const contentSummary = [
+    nodeCount ? `${nodeCount} ${nodeCount === 1 ? "nodo" : "nodos"}` : "",
+    groupCount ? `${groupCount} ${groupCount === 1 ? "grupo" : "grupos"}` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  const showContentSummary = collapsed && contentSummary;
+  const oversizedWarningMessage = formatMessage(
+    {
+      id: "lineage.graph.oversized.warning",
+      defaultMessage:
+        "This element contains more than {count} nodes. Its rendering may be affected.",
+    },
+    { count: 20 },
+  );
+  const oversizedWarningTitle = formatMessage({
+    id: "lineage.graph.oversized.header",
+    defaultMessage: "Warning",
+  });
+  const oversizedWarningTrigger = (
+    <button
+      aria-label={oversizedWarningMessage}
+      className="td-lineage-group-node__oversized-warning nodrag nopan"
+      type="button"
+    >
+      <Icon name="warning sign" />
+    </button>
+  );
+  const oversizedWarningContent = (
+    <div className="td-lineage-group-node__oversized-content">
+      <span className="td-lineage-group-node__oversized-header">
+        {oversizedWarningTitle}
+      </span>
+      <span>{oversizedWarningMessage}</span>
+      {oversizedWarningOpen && onConfirmOversizedExpand ? (
+        <button
+          className="td-lineage-group-node__oversized-open"
+          onClick={stopNodeAction(onConfirmOversizedExpand)}
+          type="button"
+        >
+          {formatMessage({
+            id: "lineage.graph.oversized.open",
+            defaultMessage: "Open",
+          })}
+        </button>
+      ) : null}
+    </div>
+  );
+  const oversizedWarningBadge = oversized ? (
+    <Popup
+      className="td-lineage-group-node__oversized-popup"
+      content={oversizedWarningContent}
+      on={oversizedWarningOpen ? "click" : "hover"}
+      onClose={oversizedWarningOpen ? onDismissOversizedWarning : undefined}
+      open={oversizedWarningOpen ? true : undefined}
+      position="top left"
+      trigger={oversizedWarningTrigger}
+    />
+  ) : null;
+  const groupIcon =
+    iconName || lineageNodeIcon({ kind: "group", resourceContainer, z });
+  const className = [
+    "td-lineage-group-node",
+    systemTypeClassName
+      ? `td-lineage-group-node--system-type-${systemTypeClassName}`
+      : "",
+    variant ? `td-lineage-group-node--${variant}` : "",
+    designVariant ? `td-lineage-group-node--design-${designVariant}` : "",
+    z !== undefined
+      ? `td-lineage-group-node--depth-${Math.min(Number(z) || 0, 6)}`
+      : "",
+    z === 0 ? "td-lineage-group-node--root" : "",
+    isActive ? "td-lineage-group-node--active" : "",
+    focusDirect ? "td-lineage-group-node--focus-direct" : "",
+    focusDimmed ? "td-lineage-group-node--focus-dimmed" : "",
+    queryOrigin ? "td-lineage-group-node--query-origin" : "",
+    isHovered ? "td-lineage-group-node--hovered" : "",
+    collapsed ? "td-lineage-group-node--collapsed" : "",
+    oversized ? "td-lineage-group-node--oversized" : "",
+    resourceContainer ? "td-lineage-group-node--resource-container" : "",
+    isConnected ? "td-lineage-group-node--connected" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handles = (
+    <>
+      <Handle
+        className={connectedHandleClassName("start-node")}
+        id="start-node"
+        type="target"
+        position={Position.Left}
+      />
+      <Handle
+        className={connectedHandleClassName("end-node")}
+        id="end-node"
+        type="source"
+        position={Position.Right}
+      />
+      <Handle
+        className={connectedHandleClassName("source-left-node")}
+        id="source-left-node"
+        type="source"
+        position={Position.Left}
+      />
+      <Handle
+        className={connectedHandleClassName("target-right-node")}
+        id="target-right-node"
+        type="target"
+        position={Position.Right}
+      />
+    </>
+  );
+
+  const absoluteBody = (
+    <>
+      {label ? (
+        <div className="td-lineage-group-node__absolute-header">
+          <Icon
+            aria-hidden="true"
+            className="td-lineage-group-node__type-icon"
+            name={groupIcon}
+          />
+          <span className="td-lineage-group-node__absolute-label" title={label}>
+            {label}
+            <LineageQueryOrigin origin={queryOrigin} />
+          </span>
+          {!systemTypeMissing && systemTypeLabel ? (
+            <span className="td-lineage-group-node__system-type">
+              {systemTypeLabel}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      {showContentSummary ? (
+        <div className="td-lineage-group-node__footer">
+          <span className="td-lineage-group-node__content-summary">
+            {contentSummary}
+          </span>
+        </div>
+      ) : null}
+      {canCollapse && (onToggleCollapse || onExpandDescendants) ? (
+        <span className="td-lineage-group-node__actions">
+          {onToggleCollapse ? (
+            <button
+              aria-label={collapsed ? "Expand group" : "Collapse group"}
+              className="td-lineage-group-node__toggle nodrag nopan"
+              onClick={stopNodeAction(onToggleCollapse)}
+              type="button"
+            >
+              {collapsed ? "+" : "-"}
+            </button>
+          ) : null}
+          {onExpandDescendants ? (
+            <button
+              aria-label="Expand group and descendants"
+              className="td-lineage-group-node__toggle td-lineage-group-node__toggle--descendants nodrag nopan"
+              onClick={stopNodeAction(onExpandDescendants)}
+              type="button"
+            >
+              ++
+            </button>
+          ) : null}
+        </span>
+      ) : null}
+      {oversizedWarningBadge}
+      {hasCollapsedRelations ? (
+        <span
+          aria-label={collapsedRelationsTooltip}
+          className="td-lineage-group-node__collapsed-relations"
+          data-tooltip={collapsedRelationsTooltip}
+        >
+          {collapsedRelationCounts.total}
+        </span>
+      ) : null}
+      {collapsed && hasHiddenChildren ? (
+        <span
+          aria-label={hiddenChildrenTooltip}
+          className="td-lineage-group-node__collapsed-count"
+          data-tooltip={hiddenChildrenTooltip}
+        >
+          {hiddenChildrenCount}
+        </span>
+      ) : null}
+    </>
+  );
+
+  const defaultBody = (
+    <div className="td-lineage-group-node__header">
+      <Icon
+        aria-hidden="true"
+        className="td-lineage-group-node__type-icon"
+        name={groupIcon}
+      />
+      <span className="td-lineage-group-node__label" title={label}>
+        {label}
+        <LineageQueryOrigin origin={queryOrigin} />
+      </span>
+      {count ? (
+        <span className="td-lineage-group-node__count">{count}</span>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {handles}
+      {variant === "absolute" ? absoluteBody : defaultBody}
+    </div>
+  );
+};
+
+LineageGroupNode.propTypes = {
+  id: PropTypes.string,
+  data: PropTypes.shape({
+    canCollapse: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    collapsedRelationCounts: PropTypes.shape({
+      sources: PropTypes.number,
+      targets: PropTypes.number,
+      total: PropTypes.number,
+    }),
+    connectedHandleIds: PropTypes.arrayOf(PropTypes.string),
+    count: PropTypes.number,
+    designVariant: PropTypes.oneOf(["classic", "redesigned"]),
+    hiddenChildrenCount: PropTypes.number,
+    iconName: PropTypes.string,
+    isActive: PropTypes.bool,
+    focusDirect: PropTypes.bool,
+    focusDimmed: PropTypes.bool,
+    queryOrigin: PropTypes.oneOf(["direct", "contained"]),
+    label: PropTypes.node,
+    nodeCount: PropTypes.number,
+    groupCount: PropTypes.number,
+    onExpandDescendants: PropTypes.func,
+    onToggleCollapse: PropTypes.func,
+    onConfirmOversizedExpand: PropTypes.func,
+    onDismissOversizedWarning: PropTypes.func,
+    oversized: PropTypes.bool,
+    oversizedWarningOpen: PropTypes.bool,
+    resourceContainer: PropTypes.bool,
+    systemTypeClassName: PropTypes.string,
+    systemTypeLabel: PropTypes.string,
+    systemTypeMissing: PropTypes.bool,
+    variant: PropTypes.string,
+    z: PropTypes.number,
+  }),
+};
+
+export default memo(LineageGroupNode);

package/src/components/graph/LineageQueryOrigin.js

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { queryOriginMessages } from "./lineageQueryOriginMessages";
+
+const LineageQueryOrigin = ({ origin }) => {
+  const { formatMessage, locale } = useIntl();
+  if (!origin) return null;
+  const id =
+    origin === "direct"
+      ? "lineage.graph.query_origin"
+      : "lineage.graph.query_origin.contained";
+
+  const defaults =
+    queryOriginMessages[locale.split("-")[0]] || queryOriginMessages.en;
+  const label = formatMessage({ id, defaultMessage: defaults[id] });
+  return (
+    <span className="td-lineage-query-origin" title={label}>
+      {label}
+    </span>
+  );
+};
+
+LineageQueryOrigin.propTypes = {
+  origin: PropTypes.oneOf(["direct", "contained"]),
+};
+
+export default LineageQueryOrigin;

package/src/components/graph/edgeLayout.js

@@ -1,12 +1,15 @@
-const TARGET_SLOT_STEP = 10;
-const MAX_TARGET_SLOT_SPAN = 22;
+const TARGET_SLOT_STEP = 8;
 
-export const getTargetSlotOffset = (slotIndex = 0, slotCount = 1) => {
+export const getTargetSlotOffset = (
+  slotIndex = 0,
+  slotCount = 1,
+  availableSpan = Number.POSITIVE_INFINITY,
+) => {
   if (!slotCount || slotCount <= 1) return 0;
 
   const totalSpan = Math.min(
     (slotCount - 1) * TARGET_SLOT_STEP,
-    MAX_TARGET_SLOT_SPAN,
+    Math.max(0, availableSpan),
   );
   const step = totalSpan / (slotCount - 1);
 

package/src/components/graph/lineageNodeIcon.js

@@ -0,0 +1,17 @@
+export const lineageNodeIcon = ({
+  kind,
+  lineageKind,
+  resourceContainer,
+  z,
+} = {}) => {
+  const resolvedKind = kind || lineageKind;
+
+  if (resolvedKind === "process") return "random";
+  if (resolvedKind === "resource") return "table";
+  if (resourceContainer) return "table";
+  if (z !== undefined) return Number(z) >= 2 ? "database" : "server";
+
+  return "database";
+};
+
+export default lineageNodeIcon;

package/src/components/graph/lineageQueryOriginMessages.js

@@ -0,0 +1,10 @@
+export const queryOriginMessages = {
+  en: {
+    "lineage.graph.query_origin": "Query origin",
+    "lineage.graph.query_origin.contained": "Contains query origin",
+  },
+  es: {
+    "lineage.graph.query_origin": "Origen de consulta",
+    "lineage.graph.query_origin.contained": "Contiene origen de consulta",
+  },
+};

package/src/styles/ColoredEdge.less

@@ -0,0 +1,3 @@
+.td-graph-edge {
+  vector-effect: non-scaling-stroke;
+}

package/src/styles/CommonGraphs.less

@@ -0,0 +1,76 @@
+.td-graph-container {
+  height: var(--td-graph-container-height, 640px);
+
+  .react-flow {
+    background: var(--td-graph-bg, #f7f8fa);
+  }
+
+  .td-graph__space-pan-active,
+  .td-graph__space-pan-active .react-flow__pane,
+  .td-graph__space-pan-active .react-flow__node {
+    cursor: grab;
+  }
+
+  .td-graph__space-pan-active:active,
+  .td-graph__space-pan-active:active .react-flow__pane,
+  .td-graph__space-pan-active:active .react-flow__node {
+    cursor: grabbing;
+  }
+
+  .react-flow__controls {
+    margin: 8px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .react-flow__controls-button.td-graph-controls-return {
+    width: auto;
+    min-width: 128px;
+    padding: 0 12px;
+    font-size: 11px;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .react-flow__controls.td-graph-controls--vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+    overflow: visible;
+  }
+
+  .react-flow__controls.td-graph-controls--vertical > span {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .react-flow__controls.td-graph-controls--vertical
+    .react-flow__controls-button {
+    width: 34px;
+    min-width: 34px;
+    height: 34px;
+    min-height: 34px;
+    padding: 0;
+  }
+
+  .react-flow__controls-button svg {
+    width: auto;
+    max-width: none;
+    max-height: none;
+    fill: none;
+  }
+}
+
+.td-graph-edge-label {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 1000;
+}

package/src/styles/ConceptGraph.less

@@ -0,0 +1,6 @@
+@import "./ConceptNode.less";
+
+.td-concept-node.td-concept-node--connected {
+  border-color: var(--td-graph-accent, #ed5c17);
+  box-shadow: 0 0 0 2px rgba(237, 92, 23, 0.22);
+}