@truedat/dd 8.11.4 → 8.11.7

package/src/components/LineageInspectorPanel.js

@@ -0,0 +1,748 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useLayoutEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router";
+import { Icon, Popup } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import { excludeNode, createGraph } from "../routines";
+
+const compactText = (value) => {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "object") {
+    return compactText(
+      value.name || value.label || value.value || value.external_id || value.id,
+    );
+  }
+
+  return `${value}`;
+};
+
+const normalizeNodeEntityType = (node = {}) => {
+  const raw = node.entityType || node.type;
+
+  if (raw === undefined || raw === null) return undefined;
+
+  const normalized = compactText(raw)
+    .trim()
+    .toLowerCase()
+    .replace(/^lineage[\s_-]*/, "")
+    .replace(/[\s_]+/g, "-");
+
+  return normalized || undefined;
+};
+
+const capitalize = (value = "") =>
+  value ? value.charAt(0).toUpperCase() + value.slice(1) : value;
+
+const firstText = (...values) =>
+  values.map(compactText).find((value) => !_.isEmpty(value));
+
+const normalizeId = (value) =>
+  value === undefined || value === null ? "" : `${value}`;
+
+export const formatMetadataValue = (value) => {
+  if (value === undefined || value === null || value === "") return "—";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return `${value}`;
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return `${value}`;
+  }
+};
+
+const qualityLevel = (quality) => {
+  const score = Number.parseFloat(quality);
+
+  if (!Number.isFinite(score)) return "neutral";
+  if (score >= 90) return "good";
+  if (score >= 75) return "warning";
+  return "poor";
+};
+
+const nodePath = (node = {}) => {
+  const path = Array.isArray(node.path) ? node.path.map(compactText) : [];
+  const selectedName = firstText(node.name, node.label, node.id);
+
+  if (!_.isEmpty(path)) {
+    return path.at(-1) === selectedName ? path : [...path, selectedName];
+  }
+
+  return [
+    firstText(node.system, node.system_name),
+    firstText(node.schema, node.schema_name, node.database),
+    selectedName,
+  ]
+    .filter(Boolean)
+    .filter((part, index, parts) => index === 0 || part !== parts[index - 1]);
+};
+
+export const HierarchyPath = ({ parts }) => {
+  const measureRef = useRef(null);
+  const [truncated, setTruncated] = useState(false);
+  const fullPath = parts.join(" › ");
+  const summary =
+    parts.length > 1 ? `${parts[0]} › … › ${parts.at(-1)}` : fullPath;
+
+  useLayoutEffect(() => {
+    const measure = measureRef.current;
+    if (!measure) return undefined;
+
+    const update = () => {
+      const lineHeight = Number.parseFloat(
+        getComputedStyle(measure).lineHeight,
+      );
+      setTruncated(measure.scrollHeight > (lineHeight || 17.4) * 2 + 1);
+    };
+
+    update();
+    if (typeof ResizeObserver === "undefined") return undefined;
+
+    const observer = new ResizeObserver(update);
+    observer.observe(measure);
+
+    return () => observer.disconnect();
+  }, [fullPath]);
+
+  const path = (
+    <span
+      className={`lineage-inspector__path${
+        truncated ? " lineage-inspector__path--truncated" : ""
+      }`}
+      tabIndex={truncated ? 0 : undefined}
+    >
+      {truncated ? summary : fullPath}
+    </span>
+  );
+
+  return (
+    <div className="lineage-inspector__path-wrap">
+      <span
+        aria-hidden="true"
+        className="lineage-inspector__path lineage-inspector__path--measure"
+        ref={measureRef}
+      >
+        {fullPath}
+      </span>
+      {truncated ? (
+        <Popup
+          content={fullPath}
+          on={["hover", "focus"]}
+          position="top center"
+          trigger={path}
+        />
+      ) : (
+        path
+      )}
+    </div>
+  );
+};
+
+HierarchyPath.propTypes = {
+  parts: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const InspectorHeader = ({ context, onMinimize, pinned }) => {
+  const { formatMessage } = useIntl();
+  const edgeSelected = context.type === "edge";
+  const entityLabel = normalizeNodeEntityType(context.node);
+  const title = edgeSelected
+    ? `${context.edge?.sourceName || context.edge?.source} → ${
+        context.edge?.targetName || context.edge?.target
+      }`
+    : firstText(context.node?.name, context.node?.label, context.node?.id);
+
+  return (
+    <div
+      className={`lineage-inspector__header${
+        edgeSelected ? " lineage-inspector__header--edge" : ""
+      }`}
+    >
+      <button
+        aria-label={formatMessage({
+          id: "lineage.inspector.minimize",
+          defaultMessage: "Minimize inspector",
+        })}
+        className={`lineage-inspector__minimize${
+          pinned ? " lineage-inspector__minimize--pinned" : ""
+        }`}
+        onClick={onMinimize}
+        type="button"
+      >
+        <Icon name="chevron right" />
+      </button>
+      <span className="lineage-inspector__header-icon" aria-hidden="true">
+        <Icon
+          name={
+            edgeSelected
+              ? context.iconName || "exchange"
+              : context.node?.iconName || "database"
+          }
+        />
+      </span>
+      <div className="lineage-inspector__header-copy">
+        <span className="lineage-inspector__eyebrow">
+          {edgeSelected
+            ? formatMessage({
+                id: "lineage.inspector.edge",
+                defaultMessage: "Connection metadata",
+              })
+            : entityLabel
+              ? formatMessage({
+                  id: `lineage.graph.entity_type.${entityLabel}`,
+                  defaultMessage: capitalize(entityLabel),
+                })
+              : formatMessage({
+                  id:
+                    context.node?.lineageKind === "resource"
+                      ? "lineage.inspector.resource"
+                      : "lineage.inspector.group",
+                  defaultMessage:
+                    context.node?.lineageKind === "resource"
+                      ? "Data structure"
+                      : "Group",
+                })}
+        </span>
+        <strong title={title}>{title}</strong>
+      </div>
+    </div>
+  );
+};
+
+InspectorHeader.propTypes = {
+  context: PropTypes.object.isRequired,
+  onMinimize: PropTypes.func.isRequired,
+  pinned: PropTypes.bool,
+};
+
+const NodeInspector = ({
+  createGraph,
+  excludeNode,
+  levels,
+  node: selectedNode,
+  onAction,
+  onCenterNode,
+  onTogglePin,
+  pinned,
+}) => {
+  const { formatMessage } = useIntl();
+  const [originalId, setOriginalId] = useState(null);
+  const original =
+    selectedNode.originals?.find(({ id }) => id === originalId) ||
+    selectedNode.originals?.[0];
+  const node = original
+    ? { ...selectedNode, ...original, structure_id: original.structure_id }
+    : selectedNode;
+  const nodeId = normalizeId(node.id);
+  const isResource = node.lineageKind === "resource";
+  const structureId = node.structure_id;
+  const path = nodePath(node);
+  const systemTypeCandidate = firstText(
+    node.systemTypeLabel,
+    node.system_group_name,
+    node.system_group,
+  );
+  const normalizedSystemType = compactText(systemTypeCandidate)
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_]+/g, " ");
+  const systemType =
+    !normalizedSystemType ||
+    normalizedSystemType === "without system group" ||
+    normalizedSystemType.startsWith("without system") ||
+    normalizedSystemType.startsWith("sin grupo") ||
+    normalizedSystemType === "sin sistema" ||
+    normalizedSystemType === "unknown" ||
+    normalizedSystemType === "n/a"
+      ? ""
+      : systemTypeCandidate;
+  const status = firstText(node.status, node.health, node.state);
+  const nodeType = normalizeNodeEntityType(node);
+  const quality = firstText(
+    node.quality,
+    node.quality_score,
+    node.metadata?.quality,
+    node.metadata?.quality_score,
+    node.metadata?.score,
+  );
+  const fieldsKnown =
+    node.fieldsKnown ??
+    [
+      node.fields,
+      node.columns,
+      node.metadata?.fields,
+      node.metadata?.columns,
+      node.data_fields,
+    ].some(Array.isArray);
+  const fieldCount =
+    fieldsKnown && (nodeType || "").toLowerCase() !== "column"
+      ? Array.isArray(node.fields)
+        ? node.fields.length
+        : node.totalFields
+      : undefined;
+  const handleCreateGraph = (type) => () => {
+    onAction();
+    createGraph({
+      ids: [nodeId],
+      levels,
+      type,
+      isRedirected: true,
+    });
+  };
+  const handleExclude = () => {
+    onAction();
+    excludeNode({ id: nodeId, isRedirected: true });
+  };
+
+  return (
+    <div className="lineage-inspector__body">
+      {!_.isEmpty(path) ? (
+        <section className="lineage-inspector__section">
+          <span className="lineage-inspector__section-title">
+            <FormattedMessage
+              id="lineage.inspector.path"
+              defaultMessage="Hierarchy path"
+            />
+          </span>
+          <HierarchyPath parts={path} />
+        </section>
+      ) : null}
+
+      {selectedNode.originals?.length > 1 ? (
+        <section className="lineage-inspector__section">
+          <label
+            htmlFor="lineage-original-resource"
+            className="lineage-inspector__section-title"
+          >
+            <FormattedMessage
+              id="lineage.inspector.original_resource"
+              defaultMessage="Original resource"
+            />
+          </label>
+          <select
+            id="lineage-original-resource"
+            className="lineage-inspector__original-resource"
+            value={nodeId}
+            onChange={(event) => setOriginalId(event.target.value)}
+          >
+            {selectedNode.originals.map(({ id }) => (
+              <option key={id} value={id}>
+                {id}
+              </option>
+            ))}
+          </select>
+          <p className="lineage-inspector__path">{nodeId}</p>
+        </section>
+      ) : null}
+
+      {systemType || status || nodeType || fieldCount !== undefined ? (
+        <section className="lineage-inspector__facts">
+          {systemType ? (
+            <div>
+              <span>
+                <FormattedMessage
+                  id="lineage.inspector.system"
+                  defaultMessage="System"
+                />
+              </span>
+              <strong>{systemType}</strong>
+            </div>
+          ) : null}
+          {status ? (
+            <div>
+              <span>
+                <FormattedMessage
+                  id="lineage.inspector.status"
+                  defaultMessage="Status"
+                />
+              </span>
+              <strong>{status}</strong>
+            </div>
+          ) : null}
+          {nodeType ? (
+            <div>
+              <span>
+                <FormattedMessage
+                  id="lineage.inspector.type"
+                  defaultMessage="Type"
+                />
+              </span>
+              <strong>
+                {formatMessage({
+                  id: `lineage.graph.entity_type.${nodeType}`,
+                  defaultMessage: capitalize(nodeType),
+                })}
+              </strong>
+            </div>
+          ) : null}
+          {fieldCount !== undefined ? (
+            <div>
+              <span>
+                <FormattedMessage
+                  id="lineage.inspector.fields"
+                  defaultMessage="Fields"
+                />
+              </span>
+              <strong>{fieldCount}</strong>
+            </div>
+          ) : null}
+        </section>
+      ) : null}
+
+      {quality ? (
+        <section
+          className={`lineage-inspector__quality lineage-inspector__quality--${qualityLevel(
+            quality,
+          )}`}
+        >
+          <span>
+            <Icon name="check circle outline" />
+            <FormattedMessage
+              id="lineage.inspector.quality"
+              defaultMessage="Data quality"
+            />
+          </span>
+          <strong>{quality}</strong>
+        </section>
+      ) : null}
+
+      <section className="lineage-inspector__section lineage-inspector__section--actions">
+        <div className="lineage-inspector__actions">
+          <div className="lineage-inspector__action-group lineage-inspector__action-group--local">
+            {onCenterNode ? (
+              <button
+                aria-label={formatMessage({
+                  id: "lineage.inspector.center_node",
+                  defaultMessage: "Center in graph",
+                })}
+                className="lineage-inspector__action"
+                onClick={() => onCenterNode(node.graphNodeId || node.id)}
+                type="button"
+              >
+                <Icon name="target" />
+              </button>
+            ) : null}
+            {onTogglePin ? (
+              <Popup
+                content={formatMessage({
+                  id: pinned
+                    ? "lineage.context_menu.unpin_focus"
+                    : "lineage.context_menu.pin_focus",
+                  defaultMessage: pinned ? "Unpin focus" : "Pin focus",
+                })}
+                mouseEnterDelay={120}
+                position="top center"
+                trigger={
+                  <button
+                    aria-label={formatMessage({
+                      id: pinned
+                        ? "lineage.context_menu.unpin_focus"
+                        : "lineage.context_menu.pin_focus",
+                      defaultMessage: pinned ? "Unpin focus" : "Pin focus",
+                    })}
+                    aria-pressed={pinned}
+                    className={`lineage-inspector__action${
+                      pinned ? " lineage-inspector__action--active" : ""
+                    }`}
+                    onClick={onTogglePin}
+                    type="button"
+                  >
+                    <Icon
+                      className={pinned ? "lineage-unpin-icon" : undefined}
+                      name="pin"
+                    />
+                  </button>
+                }
+              />
+            ) : null}
+            {isResource ? (
+              <Popup
+                content={formatMessage({
+                  id: "navigation.lineage.exclude",
+                  defaultMessage: "Exclude",
+                })}
+                mouseEnterDelay={120}
+                position="top center"
+                trigger={
+                  <button
+                    aria-label={formatMessage({
+                      id: "navigation.lineage.exclude",
+                      defaultMessage: "Exclude",
+                    })}
+                    className="lineage-inspector__action lineage-inspector__action--danger"
+                    onClick={handleExclude}
+                    type="button"
+                  >
+                    <Icon name="eye slash outline" />
+                  </button>
+                }
+              />
+            ) : null}
+          </div>
+          {isResource || structureId ? (
+            <span
+              aria-hidden="true"
+              className="lineage-inspector__action-divider"
+            />
+          ) : null}
+          <div className="lineage-inspector__action-group lineage-inspector__action-group--navigation">
+            {isResource ? (
+              <>
+                <Popup
+                  content={formatMessage({
+                    id: "navigation.lineage.lineage",
+                    defaultMessage: "Lineage",
+                  })}
+                  mouseEnterDelay={120}
+                  position="top center"
+                  trigger={
+                    <button
+                      aria-label={formatMessage({
+                        id: "navigation.lineage.lineage",
+                        defaultMessage: "Lineage",
+                      })}
+                      className="lineage-inspector__action"
+                      onClick={handleCreateGraph("lineage")}
+                      type="button"
+                    >
+                      <Icon name="random" flipped="horizontally" />
+                    </button>
+                  }
+                />
+                <Popup
+                  content={formatMessage({
+                    id: "navigation.lineage.impact",
+                    defaultMessage: "Impact",
+                  })}
+                  mouseEnterDelay={120}
+                  position="top center"
+                  trigger={
+                    <button
+                      aria-label={formatMessage({
+                        id: "navigation.lineage.impact",
+                        defaultMessage: "Impact",
+                      })}
+                      className="lineage-inspector__action"
+                      onClick={handleCreateGraph("impact")}
+                      type="button"
+                    >
+                      <Icon name="random" />
+                    </button>
+                  }
+                />
+              </>
+            ) : null}
+            {structureId ? (
+              <Popup
+                content={formatMessage({
+                  id: "lineage.context_menu.quality_rules",
+                  defaultMessage: "View Quality Rules",
+                })}
+                mouseEnterDelay={120}
+                position="top center"
+                trigger={
+                  <Link
+                    aria-label={formatMessage({
+                      id: "lineage.context_menu.quality_rules",
+                      defaultMessage: "View Quality Rules",
+                    })}
+                    className="lineage-inspector__action"
+                    onClick={onAction}
+                    to={linkTo.STRUCTURE_RULES({ id: structureId })}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Icon name="check circle outline" />
+                  </Link>
+                }
+              />
+            ) : null}
+            {structureId ? (
+              <Popup
+                content={formatMessage({
+                  id: "navigation.lineage.view",
+                  defaultMessage: "View in Data Catalog",
+                })}
+                mouseEnterDelay={120}
+                position="top center"
+                trigger={
+                  <Link
+                    aria-label={formatMessage({
+                      id: "navigation.lineage.view",
+                      defaultMessage: "View in Data Catalog",
+                    })}
+                    className="lineage-inspector__action lineage-inspector__action--view-detail"
+                    onClick={onAction}
+                    to={linkTo.STRUCTURE({ id: structureId })}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Icon name="external alternate" />
+                  </Link>
+                }
+              />
+            ) : null}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+NodeInspector.propTypes = {
+  createGraph: PropTypes.func.isRequired,
+  excludeNode: PropTypes.func.isRequired,
+  levels: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  node: PropTypes.object.isRequired,
+  onAction: PropTypes.func.isRequired,
+  onCenterNode: PropTypes.func,
+  onTogglePin: PropTypes.func,
+  pinned: PropTypes.bool,
+};
+
+const EdgeInspector = ({ edge }) => {
+  const metadataPairs = _.toPairs(edge.metadata || {});
+  const relationType = String(edge.relationType || "").toUpperCase();
+
+  return (
+    <div className="lineage-inspector__body">
+      <section className="lineage-inspector__edge-summary">
+        <div>
+          <span>
+            <FormattedMessage
+              id="lineage.inspector.edge.source"
+              defaultMessage="Source"
+            />
+          </span>
+          <strong title={edge.originalSource}>
+            {edge.sourceName || edge.source}
+          </strong>
+        </div>
+        <Icon name="long arrow alternate right" />
+        <div>
+          <span>
+            <FormattedMessage
+              id="lineage.inspector.edge.target"
+              defaultMessage="Target"
+            />
+          </span>
+          <strong title={edge.originalTarget}>
+            {edge.targetName || edge.target}
+          </strong>
+        </div>
+      </section>
+      {["CONTAINS", "DEPENDS"].includes(relationType) ? (
+        <section className="lineage-inspector__relation-type">
+          <span>
+            <FormattedMessage
+              id="lineage.inspector.edge.type"
+              defaultMessage="Relation type"
+            />
+          </span>
+          <strong>{relationType}</strong>
+        </section>
+      ) : null}
+      {metadataPairs.length ? (
+        <section className="lineage-inspector__section lineage-inspector__metadata-section">
+          <dl className="lineage-inspector__metadata-list">
+            {metadataPairs.map(([key, value]) => (
+              <div className="lineage-inspector__metadata-item" key={key}>
+                <dt>{key}</dt>
+                <dd>
+                  <pre>{formatMetadataValue(value)}</pre>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </section>
+      ) : null}
+    </div>
+  );
+};
+
+EdgeInspector.propTypes = {
+  edge: PropTypes.object.isRequired,
+};
+
+export const LineageInspectorPanel = ({
+  context,
+  createGraph,
+  excludeNode,
+  levels,
+  onClose,
+  onCenterNode,
+  onMinimize,
+  onTogglePin,
+  pinned,
+  showHeader = true,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (!context) return null;
+
+  return (
+    <aside
+      aria-label={formatMessage({
+        id: "lineage.inspector.label",
+        defaultMessage: "Lineage inspector",
+      })}
+      className={`lineage-inspector${
+        showHeader ? "" : " lineage-inspector--body-only"
+      }`}
+      onClick={(event) => event.stopPropagation()}
+      onMouseDown={(event) => event.stopPropagation()}
+    >
+      {showHeader ? (
+        <InspectorHeader
+          context={context}
+          onMinimize={onMinimize}
+          pinned={pinned}
+        />
+      ) : null}
+      {context.type === "node" ? (
+        <NodeInspector
+          createGraph={createGraph}
+          excludeNode={excludeNode}
+          levels={levels}
+          node={context.node}
+          onAction={onClose}
+          onCenterNode={onCenterNode}
+          onTogglePin={onTogglePin}
+          pinned={pinned}
+        />
+      ) : (
+        <EdgeInspector edge={context.edge} />
+      )}
+    </aside>
+  );
+};
+
+LineageInspectorPanel.propTypes = {
+  context: PropTypes.shape({
+    edge: PropTypes.object,
+    node: PropTypes.object,
+    type: PropTypes.oneOf(["node", "edge"]).isRequired,
+  }),
+  createGraph: PropTypes.func,
+  excludeNode: PropTypes.func,
+  levels: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  onClose: PropTypes.func.isRequired,
+  onCenterNode: PropTypes.func,
+  onMinimize: PropTypes.func.isRequired,
+  onTogglePin: PropTypes.func,
+  pinned: PropTypes.bool,
+  showHeader: PropTypes.bool,
+};
+
+const mapStateToProps = ({ lineageQuery }) => ({
+  levels: _.prop("levels")(lineageQuery),
+});
+
+export default connect(mapStateToProps, { excludeNode, createGraph })(
+  LineageInspectorPanel,
+);