@truedat/dd 8.11.4 → 8.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.11.4",
+  "version": "8.11.7",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.11.4",
+    "@truedat/test": "8.11.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -67,6 +67,7 @@
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
+    "lucide-react": "^1.41.0",
     "match-sorter": "^8.0.1",
     "moment": "^2.30.1",
     "path-to-regexp": "^8.2.0",
@@ -89,5 +90,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "a80d09c5a9a8f88a4f20dce8a1c79a6db0d281c4"
+  "gitHead": "ae97c12c9013e8881f997e7e407402fe6b1eff0a"
 }

package/src/components/Graphs.js

@@ -1,5 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { useParams } from "react-router";
 import { Segment } from "semantic-ui-react";
 import LineageHeader from "./LineageHeader";
@@ -9,6 +14,27 @@ import LineageGraph from "./LineageGraph";
 
 export const Graphs = () => {
   const { id } = useParams();
+  const canvasRef = useRef(null);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const updateCanvasTop = () => {
+      canvas.style.setProperty(
+        "--td-lineage-canvas-top",
+        `${canvas.getBoundingClientRect().top}px`,
+      );
+    };
+    updateCanvasTop();
+    const observer = new ResizeObserver(updateCanvasTop);
+    observer.observe(canvas.parentElement);
+    observer.observe(canvas.parentElement.parentElement);
+    window.addEventListener("resize", updateCanvasTop);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", updateCanvasTop);
+    };
+  }, []);
+
   const [sidebarCollapsed, setSidebarCollapsed] = useState(Boolean(id));
   const [sidebarHintActive, setSidebarHintActive] = useState(Boolean(id));
   const [sidebarHintOn, setSidebarHintOn] = useState(Boolean(id));
@@ -97,9 +123,9 @@ export const Graphs = () => {
           sidebarHintOn={sidebarHintOn}
           sidebarHintToken={sidebarHintToken}
         />
-        <main className="lineage-view__main">
+        <main className="lineage-view__main" ref={canvasRef}>
           <GraphRedirector />
-          <LineageGraph />
+          <LineageGraph height="var(--td-lineage-canvas-height)" />
         </main>
       </div>
     </Segment>

package/src/components/LineageContextMenu.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Link } from "react-router";
-import { Menu, Icon } from "semantic-ui-react";
+import { Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { excludeNode, createGraph } from "../routines";
@@ -14,64 +14,188 @@ export const LineageContextMenu = ({
   resource,
   excludeNode,
   createGraph,
+  onAction,
+  onTogglePin,
+  pinned,
   structureId,
-}) => (
-  <Menu fluid={_.size(name) > 25} secondary size="small" vertical>
-    <Menu.Item header>{name}</Menu.Item>
-    {resource && (
-      <>
-        <Menu.Item
-          onClick={() =>
-            createGraph({
-              ids: [id],
-              levels: levels,
-              type: "lineage",
-              isRedirected: true,
-            })
-          }
-        >
-          <Icon name="random" flipped="horizontally" />
-          <FormattedMessage
-            id="navigation.lineage.lineage"
-            defaultMessage="Lineage"
-          />
-        </Menu.Item>
-        <Menu.Item
-          onClick={() =>
-            createGraph({
-              ids: [id],
-              levels: levels,
-              type: "impact",
-              isRedirected: true,
-            })
-          }
-        >
-          <Icon name="random" />
-          <FormattedMessage
-            id="navigation.lineage.impact"
-            defaultMessage="Impact"
-          />
-        </Menu.Item>
-        <Menu.Item onClick={() => excludeNode({ id, isRedirected: true })}>
-          <Icon name="eye slash outline" />
-          <FormattedMessage
-            id="navigation.lineage.exclude"
-            defaultMessage="Exclude"
-          />
-        </Menu.Item>
-      </>
-    )}
-    {structureId && (
-      <Menu.Item as={Link} to={linkTo.STRUCTURE({ id: structureId })}>
-        <Icon name="th list" />
-        <FormattedMessage
-          id="navigation.lineage.view"
-          defaultMessage="View in Data Catalog"
-        />
-      </Menu.Item>
-    )}
-  </Menu>
-);
+}) => {
+  const handleCreateGraph = (type) => () => {
+    onAction && onAction();
+    createGraph({
+      ids: [id],
+      levels,
+      type,
+      isRedirected: true,
+    });
+  };
+  const handleExclude = () => {
+    onAction && onAction();
+    excludeNode({ id, isRedirected: true });
+  };
+  const handleNavigate = () => {
+    onAction && onAction();
+  };
+  const handleTogglePin = () => {
+    onTogglePin && onTogglePin();
+  };
+
+  return (
+    <div
+      className={`lineage-context-menu${
+        _.size(name) > 25 ? " lineage-context-menu--wide" : ""
+      }`}
+    >
+      <div className="lineage-context-menu__header">
+        <span className="lineage-context-menu__header-icon" aria-hidden="true">
+          <Icon name={resource ? "sitemap" : "folder open outline"} />
+        </span>
+        <div className="lineage-context-menu__header-copy">
+          <span className="lineage-context-menu__eyebrow">
+            <FormattedMessage
+              id={
+                resource
+                  ? "lineage.sidebar.tabs.lineage"
+                  : "navigation.lineage.view"
+              }
+              defaultMessage={resource ? "Lineage" : "View detail"}
+            />
+          </span>
+          <span className="lineage-context-menu__title" title={name}>
+            {name}
+          </span>
+        </div>
+      </div>
+      <div className="lineage-context-menu__actions">
+        {onTogglePin ? (
+          <button
+            aria-pressed={pinned}
+            className={`lineage-context-menu__action lineage-context-menu__action--pin${
+              pinned ? " lineage-context-menu__action--active" : ""
+            }`}
+            onClick={handleTogglePin}
+            type="button"
+          >
+            <span className="lineage-context-menu__action-icon">
+              <Icon
+                className={pinned ? "lineage-unpin-icon" : undefined}
+                name="pin"
+              />
+            </span>
+            <span className="lineage-context-menu__action-copy">
+              <span className="lineage-context-menu__action-title">
+                <FormattedMessage
+                  id={
+                    pinned
+                      ? "lineage.context_menu.unpin_focus"
+                      : "lineage.context_menu.pin_focus"
+                  }
+                  defaultMessage={pinned ? "Unpin focus" : "Pin focus"}
+                />
+              </span>
+            </span>
+          </button>
+        ) : null}
+        {resource ? (
+          <>
+            <button
+              className="lineage-context-menu__action"
+              onClick={handleCreateGraph("lineage")}
+              type="button"
+            >
+              <span className="lineage-context-menu__action-icon">
+                <Icon name="random" flipped="horizontally" />
+              </span>
+              <span className="lineage-context-menu__action-copy">
+                <span className="lineage-context-menu__action-title">
+                  <FormattedMessage
+                    id="navigation.lineage.lineage"
+                    defaultMessage="Lineage"
+                  />
+                </span>
+              </span>
+            </button>
+            <button
+              className="lineage-context-menu__action"
+              onClick={handleCreateGraph("impact")}
+              type="button"
+            >
+              <span className="lineage-context-menu__action-icon">
+                <Icon name="random" />
+              </span>
+              <span className="lineage-context-menu__action-copy">
+                <span className="lineage-context-menu__action-title">
+                  <FormattedMessage
+                    id="navigation.lineage.impact"
+                    defaultMessage="Impact"
+                  />
+                </span>
+              </span>
+            </button>
+            <button
+              className="lineage-context-menu__action"
+              onClick={handleExclude}
+              type="button"
+            >
+              <span className="lineage-context-menu__action-icon">
+                <Icon name="eye slash outline" />
+              </span>
+              <span className="lineage-context-menu__action-copy">
+                <span className="lineage-context-menu__action-title">
+                  <FormattedMessage
+                    id="navigation.lineage.exclude"
+                    defaultMessage="Exclude"
+                  />
+                </span>
+              </span>
+            </button>
+          </>
+        ) : null}
+        {structureId ? (
+          <Link
+            className="lineage-context-menu__action lineage-context-menu__action--link"
+            onClick={handleNavigate}
+            target="_blank"
+            rel="noopener noreferrer"
+            to={linkTo.STRUCTURE({ id: structureId })}
+          >
+            <span className="lineage-context-menu__action-icon">
+              <Icon name="th list" />
+            </span>
+            <span className="lineage-context-menu__action-copy">
+              <span className="lineage-context-menu__action-title">
+                <FormattedMessage
+                  id="navigation.lineage.view"
+                  defaultMessage="View in Data Catalog"
+                />
+              </span>
+            </span>
+          </Link>
+        ) : null}
+        {structureId ? (
+          <Link
+            className="lineage-context-menu__action lineage-context-menu__action--link"
+            onClick={handleNavigate}
+            target="_blank"
+            rel="noopener noreferrer"
+            to={linkTo.STRUCTURE_RULES({ id: structureId })}
+          >
+            <span className="lineage-context-menu__action-icon">
+              <Icon name="check circle outline" />
+            </span>
+            <span className="lineage-context-menu__action-copy">
+              <span className="lineage-context-menu__action-title">
+                <FormattedMessage
+                  id="lineage.context_menu.quality_rules"
+                  defaultMessage="View Quality Rules"
+                />
+              </span>
+            </span>
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+};
 
 LineageContextMenu.propTypes = {
   createGraph: PropTypes.func,
@@ -79,6 +203,9 @@ LineageContextMenu.propTypes = {
   id: PropTypes.string,
   levels: PropTypes.number,
   name: PropTypes.string,
+  onAction: PropTypes.func,
+  onTogglePin: PropTypes.func,
+  pinned: PropTypes.bool,
   resource: PropTypes.bool,
   structureId: PropTypes.number,
 };

package/src/components/LineageDownloadButton.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Popup, Icon } from "semantic-ui-react";
+import { Button, Popup } from "semantic-ui-react";
+import { Loader2, Download } from "lucide-react";
 import { useIntl } from "react-intl";
 import { downloadCsvGraph } from "../routines";
 
@@ -26,6 +27,7 @@ export const LineageDownloadButton = ({
   content,
   compact = false,
   labelPosition = "left",
+  tooltipPosition = "top right",
   size,
 }) => {
   const { formatMessage } = useIntl();
@@ -40,11 +42,12 @@ export const LineageDownloadButton = ({
   return (
     !graphLoading && (
       <Popup
-        position="top right"
+        position={tooltipPosition}
         content={messagePopup}
         trigger={
           <span>
             <Button
+              aria-label={content || messagePopup}
               basic={basic}
               className={className}
               compact={compact}
@@ -60,10 +63,16 @@ export const LineageDownloadButton = ({
               secondary={!basic}
               size={size}
             >
-              <Icon
-                name={csvGraphDownloading ? "spinner" : "download"}
-                loading={csvGraphDownloading}
-              />
+              {csvGraphDownloading ? (
+                <Loader2
+                  aria-hidden="true"
+                  className="lineage-graph__dock-download-spinner"
+                  size={20}
+                  strokeWidth={2}
+                />
+              ) : (
+                <Download aria-hidden="true" size={20} strokeWidth={2} />
+              )}
             </Button>
           </span>
         }
@@ -83,6 +92,7 @@ LineageDownloadButton.propTypes = {
   graphLoading: PropTypes.bool,
   downloadCsvGraph: PropTypes.func,
   labelPosition: PropTypes.string,
+  tooltipPosition: PropTypes.string,
   size: PropTypes.string,
 };
 

package/src/components/LineageEventsPanel.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { useNavigate } from "react-router";
+import { useNavigate, useParams } from "react-router";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Icon, Popup } from "semantic-ui-react";
@@ -10,6 +10,7 @@ import {
   isCompletedStatus,
   isFailedStatus,
   lineageEventType,
+  graphIdentity,
   graphLabel,
   graphScope,
   graphDomain,
@@ -18,6 +19,7 @@ import {
   graphTypeIcon,
   eventErrorMessage,
   eventTimestamp,
+  groupLineageEvents,
 } from "./lineageEventHelpers";
 
 export const LineageEventsPanel = ({
@@ -27,7 +29,13 @@ export const LineageEventsPanel = ({
 }) => {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
-  const sortedEvents = [...lineageEvents].sort(
+  const { id: activeGraphId } = useParams();
+  const [copiedId, setCopiedId] = useState(null);
+  const copiedTimer = useRef(null);
+  const dedupedEvents = groupLineageEvents(lineageEvents).flatMap((group) =>
+    Object.values(group.eventsByType),
+  );
+  const sortedEvents = [...dedupedEvents].sort(
     (a, b) => eventTimestamp(b) - eventTimestamp(a),
   );
 
@@ -59,6 +67,21 @@ export const LineageEventsPanel = ({
               const scope = graphScope(event.graph_data);
               const domain = graphDomain(event);
               const firstLevel = graphFirstLevel(event);
+              const title = graphLabel(event, index);
+              const identity = graphIdentity(event, index);
+
+              const handleCopyError = (e) => {
+                e.stopPropagation();
+                const text = errorMessage || "";
+                navigator.clipboard.writeText(text).then(() => {
+                  setCopiedId(event.graph_id || event.id);
+                  clearTimeout(copiedTimer.current);
+                  copiedTimer.current = setTimeout(
+                    () => setCopiedId(null),
+                    2000,
+                  );
+                });
+              };
 
               const handleCardClick = () => {
                 if (onGraphLoad) onGraphLoad();
@@ -75,7 +98,13 @@ export const LineageEventsPanel = ({
               return (
                 <article
                   className={`lineage-events-panel__item${
+                    type ? ` lineage-events-panel__item--${type}` : ""
+                  }${
                     canLoadGraph ? " lineage-events-panel__item--clickable" : ""
+                  }${
+                    String(event.graph_id) === String(activeGraphId)
+                      ? " lineage-events-panel__item--active"
+                      : ""
                   }`}
                   key={event.graph_id || event.id || index}
                   onClick={canLoadGraph ? handleCardClick : undefined}
@@ -91,7 +120,7 @@ export const LineageEventsPanel = ({
                   <div className="lineage-events-panel__item-header">
                     <div className="lineage-events-panel__item-title">
                       <Icon name="code branch" />
-                      <span>{graphLabel(event, index)}</span>
+                      <span title={title}>{title}</span>
                     </div>
                     <div
                       className={`lineage-events-panel__card-status${
@@ -104,36 +133,56 @@ export const LineageEventsPanel = ({
                           : ""
                       }`}
                     >
-                      {failed ? (
-                        <Popup
-                          inverted
-                          on="hover click"
-                          position="top center"
-                          trigger={
+                      <Popup
+                        on="hover"
+                        role="tooltip"
+                        aria-label={formatMessage({
+                          id: "lineage.events.panel.graph.id",
+                        })}
+                        position="top center"
+                        wide="very"
+                        className="lineage-events-panel__status-popup"
+                        trigger={
+                          failed ? (
                             <button
                               aria-label={formatMessage({
                                 id: "lineage.events.panel.error",
                               })}
                               className="lineage-events-panel__card-status-trigger"
                               type="button"
+                              onClick={handleCopyError}
                             >
                               <Icon name="warning circle" />
-                              KO
+                              {copiedId === (event.graph_id || event.id)
+                                ? "Copiado ✓"
+                                : "KO"}
                             </button>
-                          }
-                        >
-                          {errorMessage || (
-                            <FormattedMessage id="lineage.events.panel.error.empty" />
-                          )}
-                        </Popup>
-                      ) : (
-                        <span className="lineage-events-panel__card-status-trigger">
-                          <Icon
-                            name={completed ? "check circle" : "circle notched"}
-                          />
-                          {completed ? "OK" : "..."}
+                          ) : (
+                            <span className="lineage-events-panel__card-status-trigger">
+                              <Icon
+                                name={
+                                  completed ? "check circle" : "circle notched"
+                                }
+                              />
+                              {completed ? "OK" : "..."}
+                            </span>
+                          )
+                        }
+                      >
+                        <span className="lineage-events-panel__status-popup-id">
+                          {identity}
                         </span>
-                      )}
+                        {failed ? (
+                          <>
+                            <div className="lineage-events-panel__status-popup-divider" />
+                            <div className="lineage-events-panel__status-popup-error">
+                              {errorMessage || (
+                                <FormattedMessage id="lineage.events.panel.error.empty" />
+                              )}
+                            </div>
+                          </>
+                        ) : null}
+                      </Popup>
                     </div>
                   </div>
                   {domain || firstLevel ? (
@@ -152,14 +201,18 @@ export const LineageEventsPanel = ({
                       ) : null}
                     </div>
                   ) : null}
-                  {scope ? (
+                  {scope && scope !== title ? (
                     <p className="lineage-events-panel__scope">{scope}</p>
                   ) : null}
                   <div className="lineage-events-panel__row">
                     <div className="lineage-events-panel__row-main">
                       <div className="lineage-events-panel__type">
-                        <Icon name={graphTypeIcon(type)} />
-                        <FormattedMessage id={graphTypeMessageId(type)} />
+                        {type ? (
+                          <>
+                            <Icon name={graphTypeIcon(type)} />
+                            <FormattedMessage id={graphTypeMessageId(type)} />
+                          </>
+                        ) : null}
                       </div>
                       <div className="lineage-events-panel__date">
                         {event.inserted_at ? (

package/src/components/LineageEventsTable.js

@@ -10,6 +10,7 @@ import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 import { lineageEventColumns as columns } from "../selectors/getLineageEventColumns";
 import { fetchLineageEvents } from "../routines";
+import { groupLineageEvents, eventTimestamp } from "./lineageEventHelpers";
 
 export const LineageEventsTable = ({
   fetchLineageEvents,
@@ -18,6 +19,9 @@ export const LineageEventsTable = ({
 }) => {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
+  const dedupedEvents = groupLineageEvents(lineageEvents)
+    .flatMap((group) => Object.values(group.eventsByType))
+    .sort((a, b) => eventTimestamp(b) - eventTimestamp(a));
 
   useEffect(() => {
     fetchLineageEvents();
@@ -25,7 +29,7 @@ export const LineageEventsTable = ({
 
   return (
     <>
-      {!_.isEmpty(lineageEvents) && (
+      {!_.isEmpty(dedupedEvents) && (
         <Table sortable selectable>
           <Table.Header>
             <Table.Row>
@@ -44,7 +48,7 @@ export const LineageEventsTable = ({
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {lineageEvents.map((event, i) => (
+            {dedupedEvents.map((event, i) => (
               <Table.Row
                 key={i}
                 onClick={
@@ -66,7 +70,7 @@ export const LineageEventsTable = ({
           </Table.Body>
         </Table>
       )}
-      {_.isEmpty(lineageEvents) && !lineageEventsLoading && (
+      {_.isEmpty(dedupedEvents) && !lineageEventsLoading && (
         <Header as="h4">
           <Icon name="search" />
           <Header.Content>