@truedat/dd 8.11.6 → 8.11.7

package/src/components/LineageResourceNode.js

@@ -0,0 +1,501 @@
+import LineageQueryOrigin from "@truedat/core/components/graph/LineageQueryOrigin";
+import { memo, useContext } from "react";
+import PropTypes from "prop-types";
+import { Icon } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Handle, Position } from "@truedat/core/components/graph/FlowPorts";
+import { EdgeHoverContext } from "@truedat/core/components/graph/ColoredEdge";
+
+const nodeText = (value) => {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "object") {
+    return nodeText(value.name || value.label || value.value || value.id);
+  }
+
+  return `${value}`;
+};
+
+const fieldName = (field) => {
+  if (typeof field === "string") return field;
+
+  return nodeText(
+    field?.name ||
+      field?.label ||
+      field?.field ||
+      field?.external_id ||
+      field?.id,
+  );
+};
+
+const fieldType = (field) =>
+  typeof field === "object" && field
+    ? nodeText(
+        field.type || field.data_type || field.dataType || field.metadata?.type,
+      )
+    : "";
+
+const fieldKey = (field, index) => `${fieldName(field) || "field"}-${index}`;
+const fieldSourceHandleId = (index) => `field-source-${index}`;
+const fieldTargetHandleId = (index) => `field-target-${index}`;
+const fieldSourceLeftHandleId = (index) => `field-source-left-${index}`;
+const fieldTargetRightHandleId = (index) => `field-target-right-${index}`;
+
+const toQualityScore = (value) => {
+  if (value === undefined || value === null || value === "") return undefined;
+
+  const number =
+    typeof value === "number"
+      ? value
+      : Number(`${value}`.trim().replace(/%$/, ""));
+
+  if (!Number.isFinite(number)) return undefined;
+
+  return number <= 1 ? number * 100 : number;
+};
+
+export const lineageQualityLevel = (quality) => {
+  const score = toQualityScore(quality);
+
+  if (score === undefined) return undefined;
+  if (score >= 90) return "good";
+  if (score >= 75) return "warning";
+
+  return "poor";
+};
+
+const statusClass = (status) => {
+  const text = nodeText(status);
+  if (!text) return "";
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+};
+
+const focusModifier = (focusSelected, focusDirect, focusDimmed) => {
+  if (focusSelected) return "td-lineage-resource-node--focus-selected";
+  if (focusDirect) return "td-lineage-resource-node--focus-direct";
+  if (focusDimmed) return "td-lineage-resource-node--focus-dimmed";
+  return "";
+};
+
+const LineageField = ({
+  edgeState,
+  field,
+  index,
+  showHandles,
+  sourceConnected,
+  sourceLeftConnected,
+  targetConnected,
+  targetRightConnected,
+}) => {
+  const name = fieldName(field);
+  const type = fieldType(field);
+  const isPK =
+    typeof field === "object" &&
+    (field?.isPK || field?.is_pk || field?.primary_key);
+  const isFK =
+    typeof field === "object" &&
+    (field?.isFK || field?.is_fk || field?.foreign_key);
+  const isCDE =
+    typeof field === "object" &&
+    (field?.isCDE ||
+      field?.is_cde ||
+      field?.critical_data_element ||
+      field?.metadata?.isCDE ||
+      field?.metadata?.is_cde);
+  const className = [
+    "td-lineage-resource-node__field",
+    edgeState ? `td-lineage-resource-node__field--${edgeState}` : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={className}>
+      {showHandles ? (
+        <Handle
+          id={fieldTargetHandleId(index)}
+          type="target"
+          position={Position.Left}
+          className={`td-lineage-resource-node__field-handle td-lineage-resource-node__field-handle--target td-lineage-resource-node__field-handle--edge-target${
+            targetConnected ? " td-lineage-node-handle--connected" : ""
+          }`}
+        />
+      ) : null}
+      <span className="td-lineage-resource-node__field-name" title={name}>
+        {isPK ? (
+          <span className="td-lineage-resource-node__field-key">PK</span>
+        ) : null}
+        {isFK ? (
+          <span className="td-lineage-resource-node__field-key">FK</span>
+        ) : null}
+        {isCDE ? (
+          <Icon
+            aria-label="Critical data element"
+            className="td-lineage-resource-node__field-cde"
+            name="certificate"
+          />
+        ) : null}
+        {name}
+      </span>
+      {type ? (
+        <span
+          className="td-lineage-resource-node__field-key td-lineage-resource-node__field-type-badge"
+          title={type}
+        >
+          {type}
+        </span>
+      ) : null}
+      {showHandles ? (
+        <Handle
+          id={fieldSourceLeftHandleId(index)}
+          type="source"
+          position={Position.Left}
+          className={`td-lineage-resource-node__field-handle td-lineage-resource-node__field-handle--source-left td-lineage-resource-node__field-handle--edge-source${
+            sourceLeftConnected ? " td-lineage-node-handle--connected" : ""
+          }`}
+        />
+      ) : null}
+      {showHandles ? (
+        <Handle
+          id={fieldSourceHandleId(index)}
+          type="source"
+          position={Position.Right}
+          className={`td-lineage-resource-node__field-handle td-lineage-resource-node__field-handle--source td-lineage-resource-node__field-handle--edge-source${
+            sourceConnected ? " td-lineage-node-handle--connected" : ""
+          }`}
+        />
+      ) : null}
+      {showHandles ? (
+        <Handle
+          id={fieldTargetRightHandleId(index)}
+          type="target"
+          position={Position.Right}
+          className={`td-lineage-resource-node__field-handle td-lineage-resource-node__field-handle--target-right td-lineage-resource-node__field-handle--edge-target${
+            targetRightConnected ? " td-lineage-node-handle--connected" : ""
+          }`}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+LineageField.propTypes = {
+  edgeState: PropTypes.oneOf(["source", "target", "dimmed"]),
+  field: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  index: PropTypes.number,
+  showHandles: PropTypes.bool,
+  sourceConnected: PropTypes.bool,
+  sourceLeftConnected: PropTypes.bool,
+  targetConnected: PropTypes.bool,
+  targetRightConnected: PropTypes.bool,
+};
+
+const LineageResourceNode = ({ 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 {
+    connectedHandleIds = [],
+    entityType,
+    fields = [],
+    fieldHandleLimit = fields.length,
+    fieldsExpanded,
+    focusDimmed,
+    focusDirect,
+    focusSelected,
+    hiddenFieldsCount = 0,
+    isActive,
+    queryOrigin,
+    kind,
+    label,
+    lineageNode,
+    onToggleFields,
+    quality,
+    status,
+    systemTypeClassName,
+    systemTypeLabel,
+    systemTypeMissing,
+    totalFields = fields.length,
+    variant,
+  } = data;
+  const connectedHandles = new Set(connectedHandleIds);
+  const compact = variant === "lineage-compact";
+  const fieldLike = variant === "lineage-field";
+  const redesigned = variant === "lineage-redesigned" || fieldLike;
+  const resolvedKind = data.kind || data.lineageKind;
+  const isLeaf = totalFields === 0;
+  const entityTypeBadge = entityType ? (
+    <span className="td-lineage-resource-node__entity-badge" title={entityType}>
+      {formatMessage({
+        id: `lineage.graph.entity_type.${entityType}`,
+        defaultMessage: entityType,
+      })}
+    </span>
+  ) : null;
+  const statusText = status || "";
+  const qualityLevel = lineageQualityLevel(quality);
+  const hoveredEdgeTouchesNode =
+    hoverCtx?.hoveredEdgeEndpoints?.source === id ||
+    hoverCtx?.hoveredEdgeEndpoints?.target === id;
+  const fieldLikeSource =
+    fieldLike && hoverCtx?.hoveredEdgeEndpoints?.source === id;
+  const fieldLikeTarget =
+    fieldLike && hoverCtx?.hoveredEdgeEndpoints?.target === id;
+  const fieldLikePrimaryKey =
+    fieldLike &&
+    (lineageNode?.isPK ||
+      lineageNode?.is_pk ||
+      lineageNode?.primary_key ||
+      lineageNode?.metadata?.isPK ||
+      lineageNode?.metadata?.is_pk);
+  const fieldLikeCDE =
+    fieldLike &&
+    (lineageNode?.isCDE ||
+      lineageNode?.is_cde ||
+      lineageNode?.critical_data_element ||
+      lineageNode?.metadata?.isCDE ||
+      lineageNode?.metadata?.is_cde);
+  const edgeStateForField = (index) => {
+    if (!hoveredEdgeTouchesNode) return undefined;
+
+    if (
+      hoverCtx.hoveredEdgeEndpoints.source === id &&
+      hoverCtx.hoveredEdgeEndpoints.sourceFieldIndex === index
+    ) {
+      return "source";
+    }
+
+    if (
+      hoverCtx.hoveredEdgeEndpoints.target === id &&
+      hoverCtx.hoveredEdgeEndpoints.targetFieldIndex === index
+    ) {
+      return "target";
+    }
+
+    return "dimmed";
+  };
+  const hasFieldDisclosure = totalFields > 6 && onToggleFields;
+  const fieldsId = `lineage-node-fields-${id || "unknown"}`;
+  const fieldDisclosureLabel = fieldsExpanded
+    ? formatMessage({
+        id: "lineage.graph.node.fields.less",
+        defaultMessage: "Show less",
+      })
+    : formatMessage(
+        {
+          id: "lineage.graph.node.fields.more",
+          defaultMessage: "+ {count} elements",
+        },
+        { count: hiddenFieldsCount },
+      );
+  const resolvedStatusClass = statusClass(status);
+  const className = [
+    "td-lineage-resource-node",
+    compact ? "td-lineage-resource-node--compact" : "",
+    redesigned ? "td-lineage-resource-node--redesigned" : "",
+    isLeaf ? "td-lineage-resource-node--leaf" : "",
+    fieldLike ? "td-lineage-resource-node--field-like" : "",
+    fieldLikeSource ? "td-lineage-resource-node--field-source" : "",
+    fieldLikeTarget ? "td-lineage-resource-node--field-target" : "",
+    kind ? `td-lineage-resource-node--${kind}` : "",
+    systemTypeClassName
+      ? `td-lineage-resource-node--system-type-${systemTypeClassName}`
+      : "",
+    resolvedStatusClass
+      ? `td-lineage-resource-node--status-${resolvedStatusClass}`
+      : "",
+    qualityLevel ? `td-lineage-resource-node--quality-${qualityLevel}` : "",
+    focusModifier(focusSelected, focusDirect, focusDimmed),
+    isActive ? "td-lineage-resource-node--active" : "",
+    queryOrigin ? "td-lineage-resource-node--query-origin" : "",
+    isHovered ? "td-lineage-resource-node--hovered" : "",
+    isConnected ? "td-lineage-resource-node--connected" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Handle
+        className={
+          connectedHandles.has("start-node")
+            ? "td-lineage-node-handle--connected"
+            : ""
+        }
+        id="start-node"
+        type="target"
+        position={Position.Left}
+      />
+      <Handle
+        className={
+          connectedHandles.has("source-left-node")
+            ? "td-lineage-node-handle--connected"
+            : ""
+        }
+        id="source-left-node"
+        type="source"
+        position={Position.Left}
+      />
+      <div className="td-lineage-resource-node__header">
+        <span className="td-lineage-resource-node__title">
+          {fieldLikePrimaryKey ? (
+            <span className="td-lineage-resource-node__field-key">PK</span>
+          ) : null}
+          {fieldLikeCDE ? (
+            <Icon
+              aria-label="Critical data element"
+              className="td-lineage-resource-node__field-cde"
+              name="certificate"
+            />
+          ) : null}
+          <span className="td-lineage-resource-node__label" title={label}>
+            {label}
+          </span>
+          <LineageQueryOrigin origin={queryOrigin} />
+          {!queryOrigin &&
+          !fieldLike &&
+          !systemTypeMissing &&
+          systemTypeLabel ? (
+            <span className="td-lineage-resource-node__kind">
+              <span className="td-lineage-resource-node__system-group">
+                {systemTypeLabel}
+              </span>
+            </span>
+          ) : null}
+        </span>
+        <span className="td-lineage-resource-node__header-meta">
+          {entityTypeBadge}
+          {quality ? (
+            <span
+              className={`td-lineage-resource-node__quality${
+                qualityLevel
+                  ? ` td-lineage-resource-node__quality--${qualityLevel}`
+                  : ""
+              }`}
+            >
+              <Icon name="bolt" />
+              {quality} QC
+            </span>
+          ) : null}
+          {status ? (
+            <span
+              className="td-lineage-resource-node__header-status"
+              title={statusText}
+            >
+              <span className="td-lineage-resource-node__status-dot" />
+            </span>
+          ) : null}
+        </span>
+      </div>
+      {fields.length ? (
+        <div
+          className={`td-lineage-resource-node__fields nowheel${
+            fieldsExpanded && totalFields > 10
+              ? " td-lineage-resource-node__fields--scrollable"
+              : ""
+          }`}
+          id={fieldsId}
+          onWheel={(event) => event.stopPropagation()}
+        >
+          {fields.map((field, index) => (
+            <LineageField
+              edgeState={edgeStateForField(index)}
+              field={field}
+              index={index}
+              key={fieldKey(field, index)}
+              showHandles={index < fieldHandleLimit}
+              sourceConnected={connectedHandles.has(fieldSourceHandleId(index))}
+              sourceLeftConnected={connectedHandles.has(
+                fieldSourceLeftHandleId(index),
+              )}
+              targetConnected={connectedHandles.has(fieldTargetHandleId(index))}
+              targetRightConnected={connectedHandles.has(
+                fieldTargetRightHandleId(index),
+              )}
+            />
+          ))}
+        </div>
+      ) : null}
+      {hasFieldDisclosure ? (
+        <button
+          aria-controls={fieldsId}
+          aria-expanded={Boolean(fieldsExpanded)}
+          className="td-lineage-resource-node__field-more nodrag nopan nowheel"
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggleFields();
+          }}
+          onMouseDown={(event) => event.stopPropagation()}
+          onPointerDown={(event) => event.stopPropagation()}
+          type="button"
+        >
+          {fieldDisclosureLabel}
+        </button>
+      ) : null}
+      <Handle
+        className={
+          connectedHandles.has("end-node")
+            ? "td-lineage-node-handle--connected"
+            : ""
+        }
+        id="end-node"
+        type="source"
+        position={Position.Right}
+      />
+      <Handle
+        className={
+          connectedHandles.has("target-right-node")
+            ? "td-lineage-node-handle--connected"
+            : ""
+        }
+        id="target-right-node"
+        type="target"
+        position={Position.Right}
+      />
+    </div>
+  );
+};
+
+LineageResourceNode.propTypes = {
+  id: PropTypes.string,
+  data: PropTypes.shape({
+    allFields: PropTypes.array,
+    connectedHandleIds: PropTypes.arrayOf(PropTypes.string),
+    entityType: PropTypes.string,
+    fields: PropTypes.array,
+    fieldHandleLimit: PropTypes.number,
+    fieldsExpanded: PropTypes.bool,
+    focusDimmed: PropTypes.bool,
+    focusDirect: PropTypes.bool,
+    focusSelected: PropTypes.bool,
+    hiddenFieldsCount: PropTypes.number,
+    iconName: PropTypes.string,
+    isActive: PropTypes.bool,
+    queryOrigin: PropTypes.oneOf(["direct", "contained"]),
+    kind: PropTypes.string,
+    label: PropTypes.string,
+    lineageNode: PropTypes.object,
+    meta: PropTypes.string,
+    onToggleFields: PropTypes.func,
+    quality: PropTypes.string,
+    status: PropTypes.string,
+    systemTypeClassName: PropTypes.string,
+    systemTypeLabel: PropTypes.string,
+    systemTypeMissing: PropTypes.bool,
+    totalFields: PropTypes.number,
+    variant: PropTypes.string,
+  }),
+};
+
+export default memo(LineageResourceNode);

package/src/components/LineageRoutes.js

@@ -9,9 +9,8 @@ export const LineageRoutes = () => {
   return (
     <Routes>
       <Route path={GRAPHS} element={<ProtectedRoute authorization="lineage" />}>
-        <Route index element={<Graphs />} />
         <Route
-          path=":id"
+          path=":id?"
           element={
             <>
               <Graphs />

package/src/components/LineageSelectionPanel.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Icon } from "semantic-ui-react";
+import { TrendingUpDown } from "lucide-react";
 import { fetchLineageEvents } from "../routines";
 import LineageForm from "./LineageForm";
 import LineageEventsPanel from "./LineageEventsPanel";
@@ -24,10 +25,7 @@ export const LineageSelectionPanel = ({
   const toggleLabel = formatMessage({
     id: collapsed ? "lineage.sidebar.expand" : "lineage.sidebar.collapse",
   });
-  const activeRailLabel =
-    activeSidebarTab === "events"
-      ? "lineage.sidebar.tabs.graphs"
-      : "lineage.sidebar.tabs.lineage";
+  const activeRailLabel = "lineage.sidebar.rail";
   const openTab = (tab) => {
     setActiveSidebarTab(tab);
     if (tab === "events") fetchLineageEvents();
@@ -40,14 +38,28 @@ export const LineageSelectionPanel = ({
   useEffect(() => {
     if (collapsed) return;
 
-    const handleClickOutside = (e) => {
+    const handleGraphInteraction = (e) => {
+      if (e.target.closest?.(".lineage-events-panel__status-popup")) return;
       if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
         onToggle();
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handleGraphInteraction, {
+      capture: true,
+    });
+    document.addEventListener("wheel", handleGraphInteraction, {
+      capture: true,
+      passive: true,
+    });
+    return () => {
+      document.removeEventListener("mousedown", handleGraphInteraction, {
+        capture: true,
+      });
+      document.removeEventListener("wheel", handleGraphInteraction, {
+        capture: true,
+      });
+    };
   }, [collapsed, onToggle]);
 
   return (
@@ -67,7 +79,7 @@ export const LineageSelectionPanel = ({
               type="button"
             >
               <span className="lineage-view__sidebar-tab-icon">
-                <Icon name="sitemap" />
+                <TrendingUpDown size={16} aria-hidden="true" />
               </span>
               <span className="lineage-view__sidebar-tab-label">
                 <FormattedMessage
@@ -113,16 +125,17 @@ export const LineageSelectionPanel = ({
         <div
           className={`lineage-view__sidebar-content lineage-view__sidebar-content--${activeSidebarTab}`}
         >
-          {activeSidebarTab === "lineage" ? (
+          <div hidden={activeSidebarTab !== "lineage"}>
             <LineageForm
               autoCollapse={false}
               collapsible={false}
               onGraphSubmit={onGraphLoad}
               showDownloadButton={false}
             />
-          ) : (
+          </div>
+          {activeSidebarTab === "events" ? (
             <LineageEventsPanel onGraphLoad={onGraphLoad} />
-          )}
+          ) : null}
         </div>
       </div>
       <Button
@@ -140,7 +153,10 @@ export const LineageSelectionPanel = ({
       >
         <Icon name="angle right" />
         <span>
-          <FormattedMessage id={activeRailLabel} />
+          <FormattedMessage
+            id={activeRailLabel}
+            defaultMessage="Trazar linaje"
+          />
         </span>
       </Button>
     </aside>

package/src/components/StructureGraph.js

@@ -14,6 +14,7 @@ export const StructureGraph = ({
   id,
   graphId,
   height,
+  simplified,
   type,
 }) => {
   useEffect(() => {
@@ -25,7 +26,12 @@ export const StructureGraph = ({
   return degree ? (
     <>
       <GraphRedirector />
-      <LineageGraph height={height || "640px"} graph={graph} />
+      <LineageGraph
+        height={height || "640px"}
+        graph={graph}
+        simplified={simplified}
+        structureId={id}
+      />
     </>
   ) : null;
 };
@@ -38,6 +44,7 @@ StructureGraph.propTypes = {
   id: PropTypes.string,
   graphId: PropTypes.number,
   height: PropTypes.string,
+  simplified: PropTypes.bool,
   type: PropTypes.string,
 };
 

package/src/components/StructureGraphView.js

@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import StructureGraph from "./StructureGraph";
+
+export const StructureGraphView = (props) => (
+  <div className="structure-lineage">
+    <StructureGraph {...props} height="100%" simplified />
+  </div>
+);
+
+StructureGraphView.propTypes = {
+  graph: PropTypes.object,
+};
+
+export default StructureGraphView;

package/src/components/StructureImpact.js

@@ -1,25 +1,5 @@
 import { connect } from "react-redux";
-import PropTypes from "prop-types";
-import { Grid } from "semantic-ui-react";
-import StructureGraph from "./StructureGraph";
-import LineageDownloadButton from "./LineageDownloadButton";
-
-export const StructureImpact = (props) => (
-  <>
-    <Grid>
-      <Grid.Row>
-        <Grid.Column width={1} floated="right">
-          <LineageDownloadButton graph={props.graph} />
-        </Grid.Column>
-      </Grid.Row>
-    </Grid>
-    <StructureGraph {...props} />
-  </>
-);
-
-StructureImpact.propTypes = {
-  graph: PropTypes.object,
-};
+import StructureGraphView from "./StructureGraphView";
 
 const mapStateToProps = ({
   structureImpactId: graphId,
@@ -30,4 +10,4 @@ const mapStateToProps = ({
   type: "impact",
 });
 
-export default connect(mapStateToProps)(StructureImpact);
+export default connect(mapStateToProps)(StructureGraphView);