@truedat/dd 8.11.4 → 8.11.7

package/src/components/__tests__/LineageRoutes.spec.js

@@ -63,9 +63,18 @@ describe("<LineageEventsPanel />", () => {
       status: "COMPLETED",
       inserted_at: "2021-11-25T10:09:27.168999Z",
     },
+    {
+      id: "impact-with-record-type",
+      graph_id: 103,
+      graph_data: JSON.stringify(["node-d"]),
+      type: "lineage_event",
+      opts: { type: "impact" },
+      status: "COMPLETED",
+      inserted_at: "2021-11-29T10:09:27.168999Z",
+    },
   ];
 
-  it("renders each event as its own card with type and status", async () => {
+  it("renders distinct graph IDs as separate cards, newest first, with status and errors", async () => {
     const rendered = render(
       <LineageEventsPanel
         lineageEvents={lineageEvents}
@@ -74,18 +83,27 @@ describe("<LineageEventsPanel />", () => {
     );
     const user = userEvent.setup({ delay: null });
 
-    expect(rendered.container.querySelectorAll("article")).toHaveLength(4);
-    expect(rendered.getByText("#101")).toBeInTheDocument();
-    expect(rendered.getByText("#100")).toBeInTheDocument();
-    expect(rendered.getByText("#102")).toBeInTheDocument();
-    expect(rendered.getByText("#without-graph-id")).toBeInTheDocument();
-    expect(rendered.getAllByText(/Finance/)).toHaveLength(2);
+    const cards = [...rendered.container.querySelectorAll("article")];
+    expect(cards).toHaveLength(4);
+    expect(
+      cards.map(
+        (card) =>
+          card.querySelector(".lineage-events-panel__item-title").textContent,
+      ),
+    ).toEqual(["node-d", "node-a", "node-a", "node-c"]);
+    expect(rendered.getAllByText(/Finance/)).toHaveLength(1);
     expect(rendered.getAllByText("OK")).toHaveLength(3);
     expect(rendered.getByText("KO")).toBeInTheDocument();
-    expect(rendered.getAllByText("navigation.lineage.lineage")).toHaveLength(3);
-    expect(rendered.getByText("navigation.lineage.impact")).toBeInTheDocument();
+    expect(rendered.getAllByText("navigation.lineage.lineage")).toHaveLength(1);
+    expect(rendered.getAllByText("navigation.lineage.impact")).toHaveLength(2);
+    expect(
+      rendered.getAllByRole("button", { name: "lineage.events.panel.load" }),
+    ).toHaveLength(2);
+    expect(cards[1]).not.toHaveAttribute("role", "button");
+    expect(cards[3]).not.toHaveAttribute("role", "button");
 
     await user.click(rendered.getByLabelText("lineage.events.panel.error"));
+    expect(await rendered.findByText("#102")).toBeInTheDocument();
     expect(
       await rendered.findByText("Graph generation failed"),
     ).toBeInTheDocument();

package/src/components/__tests__/__snapshots__/LineageDownloadButton.spec.js.snap

@@ -4,12 +4,32 @@ exports[`<LineageDownloadButton /> matches the latest snapshot 1`] = `
 <div>
   <span>
     <button
+      aria-label="graph.actions.download.tooltip"
       class="ui icon secondary button"
     >
-      <i
+      <svg
         aria-hidden="true"
-        class="download icon"
-      />
+        class="lucide lucide-download"
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 15V3"
+        />
+        <path
+          d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        />
+        <path
+          d="m7 10 5 5 5-5"
+        />
+      </svg>
     </button>
   </span>
 </div>

package/src/components/__tests__/__snapshots__/LineageForm.spec.js.snap

@@ -373,14 +373,34 @@ exports[`<LineageForm /> matches the latest snapshot 1`] = `
             </button>
             <span>
               <button
+                aria-label="graph.actions.download.popup"
                 class="ui icon secondary disabled button"
                 disabled=""
                 tabindex="-1"
               >
-                <i
+                <svg
                   aria-hidden="true"
-                  class="download icon"
-                />
+                  class="lucide lucide-download"
+                  fill="none"
+                  height="20"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  viewBox="0 0 24 24"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 15V3"
+                  />
+                  <path
+                    d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+                  />
+                  <path
+                    d="m7 10 5 5 5-5"
+                  />
+                </svg>
               </button>
             </span>
           </div>

package/src/components/__tests__/lineageEventHelpers.spec.js

@@ -0,0 +1,60 @@
+import {
+  lineageEventType,
+  groupLineageEvents,
+  graphTypeMessageId,
+  graphTypeIcon,
+} from "../lineageEventHelpers";
+
+describe("lineageEventHelpers: type classification", () => {
+  it("classifies lineage and impact from any supported key", () => {
+    expect(lineageEventType({ type: "impact" })).toBe("impact");
+    expect(lineageEventType({ type: "lineage" })).toBe("lineage");
+    expect(lineageEventType({ graph_type: "impact" })).toBe("impact");
+    expect(lineageEventType({ opts: { type: "impact" } })).toBe("impact");
+    expect(
+      lineageEventType({
+        graph_data: JSON.stringify({ opts: { type: "impact" } }),
+      }),
+    ).toBe("impact");
+    expect(
+      lineageEventType({ graph_data: JSON.stringify({ type: "lineage" }) }),
+    ).toBe("lineage");
+  });
+
+  it("returns null instead of assuming lineage when the type is missing", () => {
+    expect(lineageEventType({})).toBeNull();
+    expect(
+      lineageEventType({ graph_data: JSON.stringify(["a", "b"]) }),
+    ).toBeNull();
+    expect(lineageEventType({ type: "lineage_event" })).toBeNull();
+  });
+
+  it("does not merge untyped events into the lineage group", () => {
+    const events = [
+      {
+        id: "lineage-1",
+        graph_id: 1,
+        graph_data: JSON.stringify(["a", "b"]),
+        type: "lineage",
+      },
+      {
+        id: "untyped-1",
+        graph_id: 2,
+        graph_data: JSON.stringify(["a", "b"]),
+      },
+    ];
+    const groups = groupLineageEvents(events);
+    const types = groups.flatMap((group) => Object.keys(group.eventsByType));
+
+    expect(types).toContain("lineage");
+    expect(types).toContain("null");
+    expect(types).not.toHaveLength(1);
+  });
+
+  it("renders a neutral label and icon for unknown types", () => {
+    expect(graphTypeMessageId("impact")).toBe("navigation.lineage.impact");
+    expect(graphTypeMessageId("lineage")).toBe("navigation.lineage.lineage");
+    expect(graphTypeMessageId(null)).toBe("lineage.events.type.pending");
+    expect(graphTypeIcon(null)).toBe("question circle outline");
+  });
+});

package/src/components/lineageEventHelpers.js

@@ -57,19 +57,37 @@ const eventTimestamp = (event = {}) => {
 const newestEvent = (left, right) =>
   eventTimestamp(right) >= eventTimestamp(left) ? right : left;
 
+const GRAPH_EVENT_TYPES = {
+  impact: "impact",
+  impacto: "impact",
+  impacto_impact: "impact",
+  impact_impact: "impact",
+  lineage: "lineage",
+  linaje: "lineage",
+  trazabilidad: "lineage",
+  traceability: "lineage",
+};
+
+const resolvedGraphEventType = (value) =>
+  GRAPH_EVENT_TYPES[`${value || ""}`.trim().toLowerCase()] || null;
+
 const lineageEventType = (event = {}) => {
   const parsedGraphData = parseGraphData(event.graph_data);
-  const type =
-    event.type ||
-    event.graph_type ||
-    event.graph_kind ||
-    event.opts?.type ||
-    parsedGraphData?.type ||
-    parsedGraphData?.opts?.type;
-
-  return `${type || "lineage"}`.toLowerCase() === "impact"
-    ? "impact"
-    : "lineage";
+  const parsedType = Array.isArray(parsedGraphData)
+    ? undefined
+    : parsedGraphData?.type;
+  const candidates = [
+    event.graph_type,
+    event.graph_kind,
+    event.opts?.type,
+    parsedType,
+    parsedGraphData?.opts?.type,
+    event.graph_data_type,
+    event.type,
+    event.kind,
+  ];
+
+  return candidates.map(resolvedGraphEventType).find(Boolean) || null;
 };
 
 export const lineageEventGroupKey = (event = {}) => {
@@ -111,13 +129,25 @@ export const groupLineageEvents = (events = []) => {
   });
 };
 
-const graphLabel = (event, index) =>
+const graphIdentity = (event, index) =>
   event.graph_id
     ? `#${event.graph_id}`
     : event.id
       ? `#${event.id}`
       : `#${index + 1}`;
 
+const graphLabel = (event, index) => {
+  const firstLevel = graphFirstLevel(event);
+  if (firstLevel) return firstLevel;
+  const scope = graphScope(event.graph_data);
+  if (scope) return scope;
+  return event.graph_id
+    ? `#${event.graph_id}`
+    : event.id
+      ? `#${event.id}`
+      : `#${index + 1}`;
+};
+
 const graphScope = (graphData) => {
   const parsedGraphData = parseGraphData(graphData);
 
@@ -157,12 +187,17 @@ const graphFirstLevel = (event) => {
   );
 };
 
-const graphTypeMessageId = (type) =>
-  type === "impact"
-    ? "navigation.lineage.impact"
-    : "navigation.lineage.lineage";
+const graphTypeMessageId = (type) => {
+  if (type === "impact") return "navigation.lineage.impact";
+  if (type === "lineage") return "navigation.lineage.lineage";
+  return "lineage.events.type.pending";
+};
 
-const graphTypeIcon = (type) => (type === "impact" ? "bullseye" : "sitemap");
+const graphTypeIcon = (type) => {
+  if (type === "impact") return "bullseye";
+  if (type === "lineage") return "sitemap";
+  return "question circle outline";
+};
 
 const eventErrorMessage = (event) =>
   [
@@ -185,6 +220,7 @@ export {
   eventTimestamp,
   newestEvent,
   lineageEventType,
+  graphIdentity,
   graphLabel,
   graphScope,
   graphDomain,

package/src/reducers/__tests__/lineageEvents.spec.js

@@ -0,0 +1,164 @@
+import { createGraph, fetchGraph, fetchLineageEvents } from "../../routines";
+import {
+  LINEAGE_KNOWN_GRAPH_TYPES_KEY,
+  initialState,
+  lineageEvents,
+} from "../lineageEvents";
+
+describe("reducers: lineageEvents", () => {
+  it("should provide the initial state", () => {
+    expect(lineageEvents(undefined, {})).toBe(initialState);
+  });
+
+  it("should store deduplicated events after receiving the fetchLineageEvents.SUCCESS action", () => {
+    const payload = {
+      data: [
+        {
+          id: "new",
+          graph_id: 100,
+          graph_data: JSON.stringify(["node-a", "node-b"]),
+          type: "lineage",
+          status: "COMPLETED",
+          inserted_at: "2021-11-27T10:09:27.168999Z",
+        },
+        {
+          id: "old",
+          graph_id: 101,
+          graph_data: JSON.stringify(["node-b", "node-a"]),
+          type: "lineage",
+          status: "COMPLETED",
+          inserted_at: "2021-11-26T10:09:27.168999Z",
+        },
+      ],
+    };
+    expect(
+      lineageEvents([], { type: fetchLineageEvents.SUCCESS, payload }),
+    ).toHaveLength(1);
+  });
+
+  it("should ignore unhandled actions", () => {
+    expect(lineageEvents([{ id: "x" }], { type: "FOO" })).toEqual([
+      { id: "x" },
+    ]);
+  });
+
+  describe("known graph type", () => {
+    it("should apply the type learned from createGraph.SUCCESS to events missing it", () => {
+      lineageEvents([], {
+        type: createGraph.SUCCESS,
+        payload: {
+          data: { id: 100, opts: { type: "impact" } },
+          status: 201,
+        },
+      });
+
+      const events = [
+        {
+          id: "new",
+          graph_id: 100,
+          graph_data: JSON.stringify(["node-a", "node-b"]),
+          status: "COMPLETED",
+          inserted_at: "2021-11-27T10:09:27.168999Z",
+        },
+      ];
+      const state = lineageEvents([], {
+        type: fetchLineageEvents.SUCCESS,
+        payload: { data: events },
+      });
+
+      expect(state[0].graph_type).toBe("impact");
+    });
+
+    it("should apply the type learned from fetchGraph.SUCCESS to events missing it", () => {
+      lineageEvents([], {
+        type: fetchGraph.SUCCESS,
+        payload: { id: 200, opts: { type: "lineage" } },
+      });
+
+      const events = [
+        {
+          id: "new",
+          graph_id: 200,
+          graph_data: JSON.stringify(["node-a", "node-b"]),
+          status: "COMPLETED",
+          inserted_at: "2021-11-27T10:09:27.168999Z",
+        },
+      ];
+      const state = lineageEvents([], {
+        type: fetchLineageEvents.SUCCESS,
+        payload: { data: events },
+      });
+
+      expect(state[0].graph_type).toBe("lineage");
+    });
+
+    it("should not overwrite a type already present in the event", () => {
+      lineageEvents([], {
+        type: createGraph.SUCCESS,
+        payload: { data: { id: 300, opts: { type: "impact" } } },
+      });
+
+      const events = [
+        {
+          id: "new",
+          graph_id: 300,
+          graph_data: JSON.stringify(["node-a", "node-b"]),
+          type: "lineage",
+          status: "COMPLETED",
+          inserted_at: "2021-11-27T10:09:27.168999Z",
+        },
+      ];
+      const state = lineageEvents([], {
+        type: fetchLineageEvents.SUCCESS,
+        payload: { data: events },
+      });
+
+      expect(state[0].graph_type).toBeUndefined();
+    });
+  });
+
+  describe("persistence across reloads", () => {
+    beforeEach(() => {
+      localStorage.clear();
+    });
+
+    it("persists a learned graph type to localStorage", () => {
+      lineageEvents([], {
+        type: createGraph.SUCCESS,
+        payload: { data: { id: 500, opts: { type: "lineage" } }, status: 201 },
+      });
+
+      expect(
+        JSON.parse(localStorage.getItem(LINEAGE_KNOWN_GRAPH_TYPES_KEY)),
+      ).toMatchObject({ 500: "lineage" });
+    });
+
+    it("hydrates known graph types from localStorage on module load", () => {
+      localStorage.setItem(
+        LINEAGE_KNOWN_GRAPH_TYPES_KEY,
+        JSON.stringify({ 999: "impact" }),
+      );
+
+      let reloadedReducer;
+      jest.isolateModules(() => {
+        reloadedReducer = require("../lineageEvents").lineageEvents;
+      });
+
+      const events = [
+        {
+          id: "e",
+          graph_id: 999,
+          graph_data: JSON.stringify(["node-a"]),
+          status: "COMPLETED",
+          inserted_at: "2021-11-27T10:09:27.168999Z",
+        },
+      ];
+      const state = reloadedReducer([], {
+        type: fetchLineageEvents.SUCCESS,
+        payload: { data: events },
+      });
+
+      expect(state[0].graph_type).toBe("impact");
+    });
+  });
+});

package/src/reducers/__tests__/lineageQuery.spec.js

@@ -80,6 +80,17 @@ describe("reducers: lineageQuery", () => {
     ).toMatchObject({ ids, excludes, type, levels });
   });
 
+  it("should keep the previous type when the fetchGraph.SUCCESS payload has no type", () => {
+    const data = { ids: ["foo"], excludes: [], opts: {} };
+    const payload = { data };
+    expect(
+      lineageQuery(
+        { type: "impact", levels: 3 },
+        { type: fetchGraph.SUCCESS, payload },
+      ),
+    ).toMatchObject({ ids: ["foo"], excludes: [], type: "impact", levels: 3 });
+  });
+
   it("should ignore unhandled actions", () => {
     expect(lineageQuery(fooState, { type: "FOO" })).toBe(fooState);
   });

package/src/reducers/lineageEvents.js

@@ -1,12 +1,78 @@
 import _ from "lodash/fp";
-import { fetchLineageEvents } from "../routines";
+import { createGraph, fetchGraph, fetchLineageEvents } from "../routines";
+import {
+  groupLineageEvents,
+  lineageEventType,
+} from "../components/lineageEventHelpers";
 
 export const initialState = [];
 
+const dedupedLineageEvents = (events = []) => {
+  const groups = groupLineageEvents(events);
+  return groups
+    .flatMap((group) => Object.values(group.eventsByType))
+    .sort((a, b) => {
+      const tsA = Date.parse(a.inserted_at) || 0;
+      const tsB = Date.parse(b.inserted_at) || 0;
+      return tsB - tsA;
+    });
+};
+
+export const LINEAGE_KNOWN_GRAPH_TYPES_KEY = "td.lineage.knownGraphTypes";
+
+const readStoredGraphTypes = () => {
+  if (typeof localStorage === "undefined") return {};
+
+  try {
+    const stored = JSON.parse(
+      localStorage.getItem(LINEAGE_KNOWN_GRAPH_TYPES_KEY),
+    );
+    return stored && typeof stored === "object" ? stored : {};
+  } catch (_error) {
+    return {};
+  }
+};
+
+const writeStoredGraphTypes = (types) => {
+  if (typeof localStorage === "undefined") return;
+
+  try {
+    localStorage.setItem(LINEAGE_KNOWN_GRAPH_TYPES_KEY, JSON.stringify(types));
+  } catch (_error) {}
+};
+
+const knownGraphTypes = new Map(Object.entries(readStoredGraphTypes()));
+
+const rememberGraphType = (payload = {}) => {
+  const data = payload.data || payload;
+  const graphId = data?.id;
+  const graphType = data?.opts?.type;
+
+  if (graphId !== undefined && graphId !== null && graphType) {
+    knownGraphTypes.set(String(graphId), graphType);
+    writeStoredGraphTypes(Object.fromEntries(knownGraphTypes));
+  }
+};
+
+const applyKnownGraphTypes = (events = []) =>
+  events.map((event) => {
+    const knownType = knownGraphTypes.get(String(event.graph_id));
+
+    return knownType && !lineageEventType(event)
+      ? { ...event, graph_type: knownType }
+      : event;
+  });
+
 export const lineageEvents = (state = initialState, { type, payload }) => {
   switch (type) {
     case fetchLineageEvents.SUCCESS:
-      return _.prop("data")(payload);
+      return applyKnownGraphTypes(
+        dedupedLineageEvents(_.prop("data")(payload) || []),
+      );
+    case createGraph.SUCCESS:
+    case fetchGraph.SUCCESS:
+      rememberGraphType(payload);
+      return applyKnownGraphTypes(state);
     default:
       return state;
   }

package/src/reducers/lineageQuery.js

@@ -27,13 +27,9 @@ export const lineageQuery = (state = initialState, { type, payload }) => {
     }
     case fetchGraph.SUCCESS: {
       const {
-        data: {
-          ids,
-          opts: { type: type },
-          excludes: excludes,
-        },
+        data: { ids, opts: { type: type } = {}, excludes: excludes },
       } = payload;
-      return { ids, type, excludes, levels: state.levels };
+      return { ids, type: type || state.type, excludes, levels: state.levels };
     }
     case selectGroup.TRIGGER: {
       return { ...state, excludes: [] };

package/src/styles/LineageGraphColors.less

@@ -0,0 +1,105 @@
+.lineage-system-color(@accent; @strong; @border; @bg; @shadow) {
+  --td-lineage-node-accent: @accent;
+  --td-lineage-node-border: @border;
+  --td-lineage-group-accent: @accent;
+  --td-lineage-group-accent-strong: @strong;
+  --td-lineage-group-bg: @bg;
+  --td-lineage-group-border: @border;
+  --td-lineage-group-shadow: @shadow;
+}
+
+.td-lineage-system-color--unknown {
+  .lineage-system-color(#334155; #1f2937; #64748b; rgba(241, 245, 249, 0.78); rgba(15, 23, 42, 0.18));
+}
+
+.td-lineage-system-color--0 {
+  .lineage-system-color(#1f6feb; #1d4ed8; #16263a; rgba(31, 111, 235, 0.7); rgba(31, 111, 235, 0.18));
+}
+
+.td-lineage-system-color--1 {
+  .lineage-system-color(#168657; #15803d; #bbf7d0; rgba(22, 134, 87, 0.7); rgba(22, 134, 87, 0.18));
+}
+
+.td-lineage-system-color--2 {
+  .lineage-system-color(#b45309; #9a3412; #fed7aa; rgba(180, 83, 9, 0.7); rgba(180, 83, 9, 0.18));
+}
+
+.td-lineage-system-color--3 {
+  .lineage-system-color(#6d5bd0; #5b46be; #ddd6fe; rgba(109, 91, 208, 0.7); rgba(109, 91, 208, 0.18));
+}
+
+.td-lineage-system-color--4 {
+  .lineage-system-color(#0f8f8c; #0f766e; #99f6e4; rgba(15, 143, 140, 0.7); rgba(15, 143, 140, 0.18));
+}
+
+.td-lineage-system-color--5 {
+  .lineage-system-color(#be123c; #9f1239; #fecdd3; rgba(190, 18, 60, 0.7); rgba(190, 18, 60, 0.18));
+}
+
+.td-lineage-system-color--6 {
+  .lineage-system-color(#7c3aed; #6d28d9; #ddd6fe; rgba(124, 58, 237, 0.7); rgba(124, 58, 237, 0.18));
+}
+
+.td-lineage-system-color--7 {
+  .lineage-system-color(#0369a1; #075985; #bae6fd; rgba(3, 105, 161, 0.7); rgba(3, 105, 161, 0.18));
+}
+
+.td-lineage-system-color--8 {
+  .lineage-system-color(#047857; #065f46; #a7f3d0; rgba(4, 120, 87, 0.7); rgba(4, 120, 87, 0.18));
+}
+
+.td-lineage-system-color--9 {
+  .lineage-system-color(#c2410c; #9a3412; #fed7aa; rgba(194, 65, 12, 0.7); rgba(194, 65, 12, 0.18));
+}
+
+.td-lineage-system-color--10 {
+  .lineage-system-color(#4f46e5; #4338ca; #c7d2fe; rgba(79, 70, 229, 0.7); rgba(79, 70, 229, 0.18));
+}
+
+.td-lineage-system-color--11 {
+  .lineage-system-color(#0e7490; #155e75; #a5f3fc; rgba(14, 116, 144, 0.7); rgba(14, 116, 144, 0.18));
+}
+
+.lineage-entity-color(@accent) {
+  --td-lineage-entity-accent: @accent;
+  --td-lineage-node-accent: @accent;
+  --td-lineage-node-border: @accent;
+  --td-lineage-group-accent: @accent;
+  --td-lineage-group-border: @accent;
+}
+
+.td-lineage-entity-color--column {
+  .lineage-entity-color(#7c3aed);
+}
+
+.td-lineage-entity-color--database {
+  .lineage-entity-color(#0369a1);
+}
+
+.td-lineage-entity-color--field {
+  .lineage-entity-color(#7c3aed);
+}
+
+.td-lineage-entity-color--process {
+  .lineage-entity-color(#b45309);
+}
+
+.td-lineage-entity-color--report {
+  .lineage-entity-color(#be123c);
+}
+
+.td-lineage-entity-color--schema {
+  .lineage-entity-color(#0f766e);
+}
+
+.td-lineage-entity-color--system {
+  .lineage-entity-color(#334155);
+}
+
+.td-lineage-entity-color--table {
+  .lineage-entity-color(#3a6d8a);
+}
+
+.td-lineage-entity-color--view {
+  .lineage-entity-color(#6d28d9);
+}