@truedat/dd 8.13.8 → 8.14.1

package/src/components/LineageGraphToolbar.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { Dropdown, Input, Popup } from "semantic-ui-react";
 import {
@@ -10,6 +10,8 @@ import {
   ChevronLeft,
   ChevronRight,
   ClipboardList,
+  Columns2,
+  Columns3,
   Copy,
   Database,
   Eye,
@@ -61,6 +63,8 @@ export const DOCK_ICONS = {
   linkify: Link2,
   certificate: Award,
   "mouse pointer": MousePointer2,
+  "columns-2": Columns2,
+  "columns-3": Columns3,
   compress: Minimize2,
   "expand arrows alternate": Maximize2,
   "chevron right": ChevronRight,
@@ -522,6 +526,8 @@ export const LineageGraphToolbar = ({
   collapsible,
   context,
   doubleClickExpandsNodes = false,
+  dependencyLayout = "compact",
+  onDependencyLayoutChange,
   legendItems = [],
   visibleLegend = [],
   onClosePanel,
@@ -541,6 +547,7 @@ export const LineageGraphToolbar = ({
   pinned,
   pinnedContext,
   onPinnedContextSelect,
+  expansionDepthCustom = false,
   expansionDepth = 4,
   maxExpansionDepth = expansionDepth,
   searchInput = "",
@@ -553,6 +560,47 @@ export const LineageGraphToolbar = ({
   const { formatMessage } = useIntl();
   const [depthPopoverOpen, setDepthPopoverOpen] = useState(false);
   const [settingsPopoverOpen, setSettingsPopoverOpen] = useState(false);
+
+  const dockRef = useRef(null);
+  const depthRef = useRef(null);
+  const settingsRef = useRef(null);
+  const handleDepthEscape = useCallback(
+    (event) => {
+      if (event.key !== "Escape" || !depthPopoverOpen) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setDepthPopoverOpen(false);
+      dockRef.current
+        ?.querySelector(".lineage-graph__dock-depth-button")
+        ?.focus();
+    },
+    [depthPopoverOpen],
+  );
+  useEffect(() => {
+    if (!depthPopoverOpen) return undefined;
+    depthRef.current?.querySelector("input")?.focus();
+    window.addEventListener("keydown", handleDepthEscape, true);
+    return () => window.removeEventListener("keydown", handleDepthEscape, true);
+  }, [depthPopoverOpen, handleDepthEscape]);
+  const handleSettingsEscape = useCallback(
+    (event) => {
+      if (event.key !== "Escape" || !settingsPopoverOpen) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setSettingsPopoverOpen(false);
+      dockRef.current
+        ?.querySelector(".lineage-graph__dock-settings-button")
+        ?.focus();
+    },
+    [settingsPopoverOpen],
+  );
+  useEffect(() => {
+    if (!settingsPopoverOpen) return undefined;
+    settingsRef.current?.querySelector("input:checked, input")?.focus();
+    window.addEventListener("keydown", handleSettingsEscape, true);
+    return () =>
+      window.removeEventListener("keydown", handleSettingsEscape, true);
+  }, [handleSettingsEscape, settingsPopoverOpen]);
   const dockContext = context || pinnedContext;
   const pinnedOnly = !context && Boolean(pinnedContext);
   const ContextSummary = pinnedOnly ? "button" : "div";
@@ -595,6 +643,16 @@ export const LineageGraphToolbar = ({
     id: "lineage.graph.settings.header",
     defaultMessage: "Graph settings",
   });
+  const layoutToggleLabel = formatMessage({
+    id:
+      dependencyLayout === "compact"
+        ? "lineage.graph.layout.switch_expanded"
+        : "lineage.graph.layout.switch_compact",
+    defaultMessage:
+      dependencyLayout === "compact"
+        ? "Switch to expanded view"
+        : "Switch to compact view",
+  });
   const doubleClickInfoLabel = formatMessage({
     id: "lineage.graph.settings.double_click_info",
     defaultMessage: "Double-click expands or collapses nodes",
@@ -603,6 +661,8 @@ export const LineageGraphToolbar = ({
   return (
     <div
       className="lineage-graph__dock nodrag nopan nowheel"
+      ref={dockRef}
+      onKeyDown={handleSettingsEscape}
       onClick={stopGraphInteraction}
       onMouseDown={stopGraphInteraction}
       onPointerDown={stopGraphInteraction}
@@ -706,7 +766,7 @@ export const LineageGraphToolbar = ({
         size="mini"
         tooltipPosition="left center"
       />
-      {collapsible ? (
+      {collapsible || onDependencyLayoutChange ? (
         <>
           <span className="lineage-graph__dock-divider" aria-hidden="true" />
           {!simplified ? (
@@ -737,25 +797,78 @@ export const LineageGraphToolbar = ({
                   aria-label={settingsLabel}
                   className="lineage-graph__settings-popover"
                   role="dialog"
+                  ref={settingsRef}
+                  onKeyDown={handleSettingsEscape}
                 >
                   <span className="lineage-graph__settings-popover-header">
                     {settingsLabel}
                   </span>
-                  <label className="lineage-graph__settings-toggle">
-                    <input
-                      checked={doubleClickExpandsNodes}
-                      onChange={(event) =>
-                        onDoubleClickExpandsNodesChange?.(event.target.checked)
-                      }
-                      type="checkbox"
-                    />
-                    <span>{doubleClickInfoLabel}</span>
-                  </label>
+                  {!simplified ? (
+                    <label className="lineage-graph__settings-toggle">
+                      <input
+                        checked={doubleClickExpandsNodes}
+                        onChange={(event) =>
+                          onDoubleClickExpandsNodesChange?.(
+                            event.target.checked,
+                          )
+                        }
+                        type="checkbox"
+                      />
+                      <span>{doubleClickInfoLabel}</span>
+                    </label>
+                  ) : null}
                 </div>
               }
               className="lineage-graph__settings-popup"
             />
           ) : null}
+        </>
+      ) : null}
+      {onDependencyLayoutChange ? (
+        <Popup
+          on={["hover", "focus"]}
+          mouseEnterDelay={TOOLTIP_DELAY}
+          mouseLeaveDelay={0}
+          position="left center"
+          header={formatMessage({
+            id: `lineage.graph.layout.${dependencyLayout === "compact" ? "expanded" : "compact"}`,
+            defaultMessage:
+              dependencyLayout === "compact" ? "Expanded view" : "Compact view",
+          })}
+          content={
+            <>
+              <p>
+                {formatMessage({
+                  id:
+                    dependencyLayout === "compact"
+                      ? "lineage.graph.layout.expanded_hint"
+                      : "lineage.graph.layout.compact_hint",
+                  defaultMessage:
+                    dependencyLayout === "compact"
+                      ? "Shows internal dependencies between nodes in each group."
+                      : "Reduces visual clutter. Select a node to explore its internal dependencies.",
+                })}
+              </p>
+              <strong>{layoutToggleLabel}</strong>
+            </>
+          }
+          trigger={
+            <LineageToolButton
+              className="lineage-graph__dock-layout-button"
+              icon={dependencyLayout === "compact" ? "columns-3" : "columns-2"}
+              label={layoutToggleLabel}
+              showTooltip={false}
+              onClick={() =>
+                onDependencyLayoutChange(
+                  dependencyLayout === "compact" ? "expanded" : "compact",
+                )
+              }
+            />
+          }
+        />
+      ) : null}
+      {collapsible ? (
+        <>
           <Popup
             on="click"
             onClose={() => setDepthPopoverOpen(false)}
@@ -777,7 +890,9 @@ export const LineageGraphToolbar = ({
                 label={visibleLevelsLabel}
                 showTooltip={false}
               >
-                <span className="lineage-graph__dock-depth-value">
+                <span
+                  className={`lineage-graph__dock-depth-value${expansionDepthCustom ? " is-custom" : ""}`}
+                >
                   {expansionDepth}
                 </span>
               </LineageToolButton>
@@ -785,23 +900,54 @@ export const LineageGraphToolbar = ({
             content={
               <div
                 aria-label={visibleLevelsLabel}
-                className="lineage-graph__depth-popover"
+                className={`lineage-graph__depth-popover${expansionDepthCustom ? " is-custom" : ""}`}
+                onClick={stopGraphInteraction}
+                onKeyDown={handleDepthEscape}
+                onMouseDown={stopGraphInteraction}
+                onPointerDown={stopGraphInteraction}
+                onWheel={stopGraphInteraction}
+                ref={depthRef}
                 role="dialog"
               >
                 <div className="lineage-graph__depth-popover-header">
                   <span>{visibleLevelsLabel}</span>
                 </div>
-                <input
-                  aria-label={visibleLevelsLabel}
-                  className="lineage-graph__depth-slider"
-                  type="range"
-                  min={0}
-                  max={maxExpansionDepth}
-                  value={expansionDepth}
-                  onChange={(event) =>
-                    onExpansionDepthChange(event.target.value)
-                  }
-                />
+                <div className="lineage-graph__depth-slider-wrap">
+                  <input
+                    aria-label={visibleLevelsLabel}
+                    aria-valuetext={
+                      expansionDepthCustom
+                        ? formatMessage(
+                            {
+                              id: "lineage.graph.controls.custom_depth",
+                              defaultMessage:
+                                "Last selected level: {depth}. Nodes have been expanded or collapsed individually.",
+                            },
+                            { depth: expansionDepth },
+                          )
+                        : undefined
+                    }
+                    className="lineage-graph__depth-slider"
+                    type="range"
+                    min={0}
+                    max={maxExpansionDepth}
+                    value={expansionDepth}
+                    onChange={(event) =>
+                      onExpansionDepthChange(event.target.value)
+                    }
+                  />
+                  {expansionDepthCustom ? (
+                    <span
+                      aria-hidden="true"
+                      className="lineage-graph__depth-custom-marker"
+                      style={{
+                        left: `calc(8px + (100% - 16px) * ${maxExpansionDepth ? expansionDepth / maxExpansionDepth : 0})`,
+                      }}
+                    >
+                      ?
+                    </span>
+                  ) : null}
+                </div>
                 <div
                   aria-hidden="true"
                   className="lineage-graph__depth-popover-scale"
@@ -877,6 +1023,8 @@ LineageGraphToolbar.propTypes = {
   collapsible: PropTypes.bool,
   context: PropTypes.object,
   doubleClickExpandsNodes: PropTypes.bool,
+  dependencyLayout: PropTypes.oneOf(["compact", "expanded"]),
+  onDependencyLayoutChange: PropTypes.func,
   legendItems: PropTypes.array,
   visibleLegend: PropTypes.array,
   onClosePanel: PropTypes.func.isRequired,
@@ -896,6 +1044,7 @@ LineageGraphToolbar.propTypes = {
   pinned: PropTypes.bool,
   pinnedContext: PropTypes.object,
   onPinnedContextSelect: PropTypes.func,
+  expansionDepthCustom: PropTypes.bool,
   expansionDepth: PropTypes.number,
   maxExpansionDepth: PropTypes.number,
   searchInput: PropTypes.string,

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

@@ -8,6 +8,7 @@ import {
   lineageEdge,
   lineageCatalogState,
   lineageNodeContentWidth,
+  lineageTopologyNodes,
   lineageNodeMatchesToolbarFilters,
   lineageOversizedGroupIds,
   lineagePositionedLayoutNodes,
@@ -310,6 +311,103 @@ describe("focusedLineageGraphForNodeSet", () => {
   });
 });
 
+describe("sibling content widths", () => {
+  const shortGroup = { id: "short", container: true, z: 0 };
+  const longGroup = { id: "long", container: true, z: 0 };
+  const nested = {
+    id: "nested",
+    parentId: "short",
+    container: true,
+    z: 1,
+    name: "Container title ".repeat(10),
+  };
+  const leaves = [
+    { id: "a", name: "a", parentId: "short", z: 1 },
+    { id: "b", name: "b", parentId: "short", z: 1 },
+    { id: "c", name: "c".repeat(50), parentId: "long", z: 1 },
+    { id: "d", name: "d", parentId: "long", z: 1 },
+    { id: "e", name: "e".repeat(30), parentId: "nested", z: 2 },
+    { id: "f", name: "f", parentId: "nested", z: 2 },
+    { id: "root-a", name: "root".repeat(8), z: 0 },
+    { id: "root-b", name: "root", z: 0 },
+  ];
+  const nodes = [shortGroup, longGroup, nested, ...leaves];
+  const widths = (rendered) =>
+    Object.fromEntries(rendered.map((node) => [node.id, node.width]));
+
+  it("sizes each immediate sibling group independently, including roots", () => {
+    const result = widths(lineageTopologyNodes({ nodes }));
+    expect(result.a).toBe(240);
+    expect(result.b).toBe(result.a);
+    expect(result.c).toBe(360);
+    expect(result.d).toBe(result.c);
+    expect(result.e).toBe(283);
+    expect(result.f).toBe(result.e);
+    expect(result["root-a"]).toBe(296);
+    expect(result["root-b"]).toBe(result["root-a"]);
+    expect(
+      widths(lineageTopologyNodes({ nodes: [...nodes].reverse() })),
+    ).toEqual(result);
+  });
+
+  it("preserves classic widths and explicit width overrides", () => {
+    expect(widths(lineageTopologyNodes({ nodes }, "legacy")).a).toBe(288);
+    expect(widths(lineageTopologyNodes({ nodes }, "redesigned", 320)).a).toBe(
+      320,
+    );
+  });
+
+  it("uses all field content before expansion in positioned groups", () => {
+    const resources = leaves.slice(0, 4).map((node, index) => ({
+      ...node,
+      x: index * 400,
+      y: 60,
+      w: 120,
+      h: 60,
+      fields:
+        node.id === "c"
+          ? Array.from({ length: 12 }, (_, i) => ({
+              name: i === 11 ? "hidden_long_field_name" : "id",
+              type: i === 11 ? "VARCHAR(512)" : "INT",
+            }))
+          : [],
+      name: node.id,
+    }));
+    const groups = [shortGroup, longGroup].map((group) => ({
+      ...group,
+      x: 0,
+      y: 0,
+      w: 1000,
+      h: 600,
+    }));
+    const preparedHierarchy = {
+      containerGroups: groups,
+      leafGroups: [],
+      parentByNode: new Map(
+        resources.map((node) => [
+          node,
+          groups.find((group) => group.id === node.parentId),
+        ]),
+      ),
+      childCountsByCanonicalId: new Map(),
+    };
+    const options = { resources, groups, preparedHierarchy };
+    const collapsed = widths(lineagePositionedLayoutNodes(options));
+    const expanded = widths(
+      lineagePositionedLayoutNodes({
+        ...options,
+        expandedFieldNodeIds: new Set(["c"]),
+      }),
+    );
+    expect(collapsed.a).toBe(240);
+    expect(collapsed.b).toBe(240);
+    expect(collapsed.c).toBe(lineageNodeContentWidth([resources[2]]));
+    expect(collapsed.c).toBeGreaterThan(collapsed.a);
+    expect(collapsed.d).toBe(collapsed.c);
+    expect(expanded).toEqual(collapsed);
+  });
+});
+
 describe("lineageNodeContentWidth", () => {
   it("returns the minimum width when no content is provided", () => {
     expect(lineageNodeContentWidth()).toBe(240);