@truedat/lm 8.7.4 → 8.8.0

package/src/hooks/useFilteredLinks.js

@@ -0,0 +1,98 @@
+import _ from "lodash/fp";
+import { useMemo } from "react";
+
+const linksByRelationType = (links, selectedRelationTypes) => {
+  if (_.isEmpty(selectedRelationTypes)) return links;
+  return _.filter((link) => {
+    const linkTags = _.defaultTo([])(_.prop("tags")(link));
+    return _.some((relType) =>
+      relType === "" ? _.isEmpty(linkTags) : linkTags.includes(relType),
+    )(selectedRelationTypes);
+  })(links);
+};
+
+const linksByType = (links, selectedTypes) => {
+  if (_.isEmpty(selectedTypes)) return links;
+  return _.filter((link) => selectedTypes.includes(link.type))(links);
+};
+
+export const useFilteredLinks = ({
+  enrichedLinks,
+  selectedTypes,
+  selectedRelationTypes,
+}) => {
+  const linksByRelationTypeFilter = useMemo(
+    () => linksByRelationType(enrichedLinks, selectedRelationTypes),
+    [enrichedLinks, selectedRelationTypes],
+  );
+
+  const typeOptions = useMemo(
+    () =>
+      _.flow(
+        _.map(_.prop("type")),
+        _.filter(Boolean),
+        _.uniq,
+        _.sortBy(_.identity),
+      )(linksByRelationTypeFilter),
+    [linksByRelationTypeFilter],
+  );
+
+  const linksByTypeFilter = useMemo(
+    () => linksByType(enrichedLinks, selectedTypes),
+    [enrichedLinks, selectedTypes],
+  );
+
+  const relationTypeOptions = useMemo(() => {
+    const allTags = _.flow(
+      _.map(_.prop("tags")),
+      _.filter(Array.isArray),
+      _.flatten,
+    )(linksByTypeFilter);
+    const hasEmptyTags = _.some(
+      (link) =>
+        _.isNil(_.prop("tags")(link)) || _.isEmpty(_.prop("tags")(link)),
+    )(linksByTypeFilter);
+    const tagOptions = _.flow(
+      _.filter(Boolean),
+      _.uniq,
+      _.sortBy(_.identity),
+    )(allTags);
+    return hasEmptyTags ? ["", ...tagOptions] : tagOptions;
+  }, [linksByTypeFilter]);
+
+  const filteredLinks = useMemo(
+    () =>
+      _.filter((link) => {
+        const activeSelectedTypes = _.filter((type) =>
+          typeOptions.includes(type),
+        )(selectedTypes);
+        const activeSelectedRelationTypes = _.filter((relType) =>
+          relationTypeOptions.includes(relType),
+        )(selectedRelationTypes);
+
+        const typeMatch =
+          _.isEmpty(activeSelectedTypes) ||
+          activeSelectedTypes.includes(link.type);
+
+        const relationTypeMatch =
+          _.isEmpty(activeSelectedRelationTypes) ||
+          _.some((relType) => {
+            const linkTags = _.defaultTo([])(_.prop("tags")(link));
+            return relType === ""
+              ? _.isEmpty(linkTags)
+              : linkTags.includes(relType);
+          })(activeSelectedRelationTypes);
+
+        return typeMatch && relationTypeMatch;
+      })(enrichedLinks),
+    [
+      enrichedLinks,
+      selectedTypes,
+      typeOptions,
+      selectedRelationTypes,
+      relationTypeOptions,
+    ],
+  );
+
+  return { filteredLinks, typeOptions, relationTypeOptions };
+};

package/src/hooks/useSortedLinks.js

@@ -0,0 +1,8 @@
+import { useMemo } from "react";
+import { sortLinks } from "../utils/linksPaneHelpers";
+
+export const useSortedLinks = (filteredLinks, filteredColumns, sort) =>
+  useMemo(
+    () => sortLinks(filteredLinks, filteredColumns, sort),
+    [filteredColumns, filteredLinks, sort],
+  );

package/src/hooks/useStructureNotes.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import { useEffect, useState } from "react";
+import { useDataStructureSearch } from "@truedat/dd/hooks/useStructures";
+
+export const useStructureNotes = (links) => {
+  const [enrichedLinks, setEnrichedLinks] = useState(links);
+  const { trigger } = useDataStructureSearch();
+
+  useEffect(() => {
+    const fetchStructureNotes = async () => {
+      const structureIds = _.flow(
+        _.filter(_.propEq("resource_type", "data_structure")),
+        _.map(({ resource_id }) => parseInt(resource_id)),
+        _.uniq,
+      )(links);
+
+      if (_.isEmpty(structureIds)) {
+        setEnrichedLinks(links);
+        return;
+      }
+
+      try {
+        const response = await trigger({
+          must: { ids: structureIds },
+          page: 0,
+          size: structureIds.length,
+        });
+
+        const structuresMap = _.flow(
+          _.getOr([], "data.data"),
+          _.keyBy("id"),
+        )(response);
+
+        const enriched = _.map((link) => {
+          if (link.resource_type === "data_structure") {
+            const structure = structuresMap[link.resource_id];
+            return { ...link, note: structure?.note || null };
+          }
+          return link;
+        })(links);
+
+        setEnrichedLinks(enriched);
+      } catch (error) {
+        setEnrichedLinks(links);
+      }
+    };
+
+    fetchStructureNotes();
+  }, [links, trigger]);
+
+  return enrichedLinks;
+};

package/src/hooks/useTruncatedPopup.js

@@ -0,0 +1,30 @@
+import { useRef, useState } from "react";
+
+export const useTruncatedPopup = () => {
+  const cellRef = useRef(null);
+  const [popupOpen, setPopupOpen] = useState(false);
+  const [popupContent, setPopupContent] = useState("");
+
+  const handleMouseEnter = (event) => {
+    const current = event.currentTarget;
+    const renderedContent = current?.textContent?.trim() || "";
+
+    setPopupContent(renderedContent);
+    setPopupOpen(
+      Boolean(
+        renderedContent && current && current.scrollWidth > current.clientWidth,
+      ),
+    );
+  };
+
+  const handleMouseLeave = () => setPopupOpen(false);
+
+  return {
+    cellRef,
+    popupOpen,
+    popupContent,
+    handleMouseEnter,
+    handleMouseLeave,
+    setPopupOpen,
+  };
+};

package/src/styles/LinksPane.less

@@ -0,0 +1,117 @@
+.links-pane__popup,
+.links-pane__truncated-popup {
+  max-width: 420px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.links-pane__table-scroll {
+  margin: 0 -8px;
+  max-width: calc(100% + 16px);
+  overflow-x: auto;
+  padding: 0 8px;
+}
+
+.ui.table.links-pane__table {
+  min-width: var(--links-pane-table-min-width);
+  table-layout: fixed;
+  width: 100%;
+}
+
+.links-pane__column,
+.ui.table .links-pane__cell {
+  min-width: var(--links-pane-column-width);
+  width: var(--links-pane-column-width);
+}
+
+.ui.table .links-pane__cell {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ui.table.links-pane__table th.links-pane__cell--header {
+  padding-right: 32px;
+  position: relative;
+  vertical-align: middle;
+}
+
+.ui.table.links-pane__table th.links-pane__cell--header .links-pane__filter-label {
+  display: inline-block;
+  padding-right: 0;
+  vertical-align: middle;
+  white-space: normal;
+  width: calc(100% - 32px);
+}
+
+.ui.sortable.table thead th.links-pane__cell--header::after {
+  position: absolute !important;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ui.table .links-pane__cell--wrap {
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.ui.table .links-pane__cell--clip {
+  text-overflow: clip;
+}
+
+.links-pane__note-trigger {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.links-pane__note-icon {
+  cursor: default;
+  margin: 0;
+  max-width: 100%;
+}
+
+.links-pane__filter-label {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.links-pane__filter-label-text {
+  display: block;
+  white-space: normal;
+}
+
+.links-pane__filter-icon {
+  cursor: pointer;
+  margin: 0;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.links-pane__filter-menu {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+  max-height: 260px;
+  min-width: 180px;
+  overflow-y: auto;
+  padding: 8px 0;
+  z-index: 2147483647;
+}
+
+.links-pane__filter-menu-item {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 8px 14px;
+  white-space: nowrap;
+}

package/src/styles/RelationActions.less

@@ -0,0 +1,7 @@
+.ui.mini.compact.icon.button.relation-actions__delete-button {
+  padding: 4px;
+}
+
+.ui.icon.button > .icon.relation-actions__delete-icon {
+  margin: 0;
+}

package/src/utils/__tests__/linksPaneHelpers.spec.js

@@ -0,0 +1,316 @@
+import _ from "lodash/fp";
+import {
+  getColumnValue,
+  normalizeValue,
+  normalizeSortValue,
+  uniqueSorted,
+  getDefaultSortColumns,
+  sortLinks,
+  isSortableColumn,
+  normalizeColumn,
+  columnUnits,
+  columnWidth,
+  columnsWidth,
+  mergeClassNames,
+  columnClassName,
+  columnWidthStyle,
+  tableWidthStyle,
+  NOTE_COLUMN,
+  ACTION_COLUMN,
+  GROUP_COLUMN,
+  WRAP_COLUMNS,
+  CLIP_COLUMNS,
+  DEFAULT_COLUMN_WIDTHS,
+  COLUMN_UNIT_WIDTH,
+} from "../linksPaneHelpers";
+
+jest.mock(
+  "@truedat/core/services",
+  () => ({
+    columnDecorator: () => () => null,
+    columnPredicate: () => () => true,
+  }),
+  { virtual: true },
+);
+
+describe("linksPaneHelpers", () => {
+  describe("getColumnValue", () => {
+    const link = { name: "Alpha", tags: ["main"], system: { name: "dbt" } };
+
+    it("returns value by path when no fieldSelector", () => {
+      expect(getColumnValue({ name: "name" }, link)).toBe("Alpha");
+    });
+
+    it("returns value from fieldSelector", () => {
+      const column = {
+        name: "type",
+        fieldSelector: _.path("tags"),
+      };
+      expect(getColumnValue(column, link)).toEqual(["main"]);
+    });
+
+    it("returns undefined for missing property", () => {
+      expect(getColumnValue({ name: "nonexistent" }, link)).toBeUndefined();
+    });
+
+    it("handles null column", () => {
+      expect(getColumnValue(null, link)).toBeUndefined();
+    });
+  });
+
+  describe("normalizeValue", () => {
+    it("returns empty string for nil", () => {
+      expect(normalizeValue(null)).toBe("");
+      expect(normalizeValue(undefined)).toBe("");
+    });
+
+    it("joins array values", () => {
+      expect(normalizeValue(["main", "secondary"])).toBe("main secondary");
+    });
+
+    it("extracts value.type from object", () => {
+      expect(normalizeValue({ value: { type: "column" } })).toBe("column");
+    });
+
+    it("extracts type from object", () => {
+      expect(normalizeValue({ type: "field" })).toBe("field");
+    });
+
+    it("extracts name from object", () => {
+      expect(normalizeValue({ name: "Test" })).toBe("Test");
+    });
+
+    it("extracts full_name from object", () => {
+      expect(normalizeValue({ full_name: "Full Name" })).toBe("Full Name");
+    });
+
+    it("returns empty string for empty array", () => {
+      expect(normalizeValue([])).toBe("");
+    });
+
+    it("stringifies other objects", () => {
+      const obj = { foo: "bar" };
+      expect(normalizeValue(obj)).toBe(JSON.stringify(obj));
+    });
+
+    it("converts numbers to string", () => {
+      expect(normalizeValue(42)).toBe("42");
+    });
+  });
+
+  describe("normalizeSortValue", () => {
+    it("lowercases the normalized value", () => {
+      expect(normalizeSortValue("Alpha")).toBe("alpha");
+    });
+
+    it("handles arrays", () => {
+      expect(normalizeSortValue(["Main", "Secondary"])).toBe("main secondary");
+    });
+  });
+
+  describe("uniqueSorted", () => {
+    it("returns unique sorted values", () => {
+      expect(uniqueSorted(["b", "a", "b", "c"])).toEqual(["a", "b", "c"]);
+    });
+
+    it("filters out falsy values", () => {
+      expect(uniqueSorted(["a", null, "b", undefined, ""])).toEqual(["a", "b"]);
+    });
+
+    it("returns empty array for empty input", () => {
+      expect(uniqueSorted([])).toEqual([]);
+    });
+  });
+
+  describe("isSortableColumn", () => {
+    it("returns true for non-actions columns", () => {
+      expect(isSortableColumn({ name: "name" })).toBe(true);
+    });
+
+    it("returns false for _actions column", () => {
+      expect(isSortableColumn({ name: "_actions" })).toBe(false);
+    });
+  });
+
+  describe("getDefaultSortColumns", () => {
+    const columns = [
+      { name: "name" },
+      { name: "relation.relation_type_name" },
+      { name: "type" },
+    ];
+
+    it("finds default sort columns from columns list", () => {
+      const result = getDefaultSortColumns(columns);
+      expect(result.map((c) => c.name)).toEqual([
+        "relation.relation_type_name",
+        "type",
+      ]);
+    });
+
+    it("returns empty array when no default sort columns found", () => {
+      const result = getDefaultSortColumns([{ name: "_actions" }]);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe("sortLinks", () => {
+    const columns = [
+      { name: "name" },
+      {
+        name: "relation.relation_type_name",
+        fieldSelector: (link) => link.tags,
+      },
+      { name: "type" },
+    ];
+    const links = [
+      { id: 1, name: "Zulu", tags: ["secondary"], type: "field" },
+      { id: 2, name: "Alpha", tags: ["main"], type: "table" },
+      { id: 3, name: "Beta", tags: ["main"], type: "column" },
+    ];
+
+    it("sorts by relation type then type by default", () => {
+      const result = sortLinks(links, columns, {
+        column: null,
+        direction: "ascending",
+      });
+      expect(result.map((l) => l.name)).toEqual(["Beta", "Alpha", "Zulu"]);
+    });
+
+    it("sorts by type when relation type column not present", () => {
+      const typeOnlyColumns = [{ name: "name" }, { name: "type" }];
+      const result = sortLinks(links, typeOnlyColumns, {
+        column: null,
+        direction: "ascending",
+      });
+      expect(result.map((l) => l.name)).toEqual(["Beta", "Zulu", "Alpha"]);
+    });
+
+    it("falls back to name asc when no default sort columns", () => {
+      const noSortColumns = [{ name: "_actions" }];
+      const fallbackLinks = [
+        { id: 1, name: "Zulu" },
+        { id: 2, name: "Alpha" },
+      ];
+      const result = sortLinks(fallbackLinks, noSortColumns, {
+        column: null,
+        direction: "ascending",
+      });
+      expect(result.map((l) => l.name)).toEqual(["Alpha", "Zulu"]);
+    });
+
+    it("sorts by a specific column ascending", () => {
+      const result = sortLinks(links, columns, {
+        column: "name",
+        direction: "ascending",
+      });
+      expect(result.map((l) => l.name)).toEqual(["Alpha", "Beta", "Zulu"]);
+    });
+
+    it("sorts by a specific column descending", () => {
+      const result = sortLinks(links, columns, {
+        column: "name",
+        direction: "descending",
+      });
+      expect(result.map((l) => l.name)).toEqual(["Zulu", "Beta", "Alpha"]);
+    });
+  });
+
+  describe("normalizeColumn", () => {
+    it("adds default textAlign for note columns", () => {
+      const col = normalizeColumn({ name: NOTE_COLUMN });
+      expect(col.textAlign).toBe("center");
+    });
+
+    it("adds default textAlign for group columns", () => {
+      const col = normalizeColumn({ name: GROUP_COLUMN });
+      expect(col.textAlign).toBe("center");
+    });
+
+    it("preserves existing textAlign", () => {
+      const col = normalizeColumn({ name: "name", textAlign: "right" });
+      expect(col.textAlign).toBe("right");
+    });
+
+    it("applies default width from DEFAULT_COLUMN_WIDTHS", () => {
+      const col = normalizeColumn({ name: "name" });
+      expect(col.width).toBe(DEFAULT_COLUMN_WIDTHS.name);
+    });
+
+    it("preserves existing width", () => {
+      const col = normalizeColumn({ name: "name", width: 5 });
+      expect(col.width).toBe(5);
+    });
+
+    it("defaults width to 1 for unknown columns", () => {
+      const col = normalizeColumn({ name: "custom" });
+      expect(col.width).toBe(undefined);
+    });
+  });
+
+  describe("columnWidth calculations", () => {
+    it("columnUnits defaults to 1", () => {
+      expect(columnUnits({})).toBe(1);
+    });
+
+    it("columnUnits returns custom width", () => {
+      expect(columnUnits({ width: 2.2 })).toBe(2.2);
+    });
+
+    it("columnWidth multiplies units by COLUMN_UNIT_WIDTH", () => {
+      expect(columnWidth({ width: 2 })).toBe("240px");
+    });
+
+    it("columnsWidth sums all column units", () => {
+      const columns = [{ width: 2 }, {}, { width: 1 }];
+      expect(columnsWidth(columns)).toBe("480px");
+    });
+  });
+
+  describe("mergeClassNames", () => {
+    it("joins truthy class names", () => {
+      expect(mergeClassNames("a", "b", false, undefined, "c")).toBe("a b c");
+    });
+
+    it("returns empty string for all falsy", () => {
+      expect(mergeClassNames(false, undefined, null)).toBe("");
+    });
+  });
+
+  describe("columnClassName", () => {
+    it("includes base cell class", () => {
+      const result = columnClassName({ name: "name" });
+      expect(result).toContain("links-pane__cell");
+    });
+
+    it("includes header class when header is true", () => {
+      const result = columnClassName({ name: "name" }, true);
+      expect(result).toContain("links-pane__cell--header");
+    });
+
+    it("includes wrap class for name columns", () => {
+      const result = columnClassName({ name: "name" });
+      expect(result).toContain("links-pane__cell--wrap");
+    });
+
+    it("includes clip class for _actions columns", () => {
+      const result = columnClassName({ name: "_actions" });
+      expect(result).toContain("links-pane__cell--clip");
+    });
+  });
+
+  describe("width style creators", () => {
+    it("columnWidthStyle returns CSS custom property", () => {
+      const col = { width: 2 };
+      expect(columnWidthStyle(col)).toEqual({
+        "--links-pane-column-width": "240px",
+      });
+    });
+
+    it("tableWidthStyle returns CSS custom property", () => {
+      const cols = [{ width: 2 }, { width: 1 }];
+      expect(tableWidthStyle(cols)).toEqual({
+        "--links-pane-table-min-width": "360px",
+      });
+    });
+  });
+});