datajunction-ui 0.0.93 → 0.0.94

package/src/app/pages/NodePage/__tests__/NodeDimensionsTab.test.jsx

@@ -0,0 +1,362 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import NodeDimensionsTab from '../NodeDimensionsTab';
+
+// Mock reactflow — renders DimNode components directly to cover lines 42-136
+jest.mock('reactflow', () => {
+  const { useState } = require('react');
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: ({ nodes, nodeTypes }) => {
+      return (
+        <div data-testid="reactflow">
+          {(nodes || []).map(n => {
+            const NodeComp = nodeTypes?.[n.type];
+            return NodeComp ? (
+              <NodeComp key={n.id} data={n.data} />
+            ) : (
+              <div key={n.id}>{n.id}</div>
+            );
+          })}
+        </div>
+      );
+    },
+    useNodesState: initial => {
+      const [n, s] = useState(initial || []);
+      return [n, s, () => {}];
+    },
+    useEdgesState: initial => {
+      const [e, s] = useState(initial || []);
+      return [e, s, () => {}];
+    },
+    Handle: () => null,
+    MarkerType: { ArrowClosed: 'arrowclosed' },
+    Position: { Left: 'left', Right: 'right' },
+    addEdge: (params, eds) => [...(eds || []), params],
+  };
+});
+
+jest.mock('reactflow/dist/style.css', () => ({}));
+
+jest.mock('dagre', () => {
+  function MockGraph() {
+    this.setDefaultEdgeLabel = function () {};
+    this.setGraph = function () {};
+    this.setNode = function () {};
+    this.setEdge = function () {};
+    this.node = function () {
+      return { x: 100, y: 100 };
+    };
+  }
+  return {
+    graphlib: { Graph: MockGraph },
+    layout: function () {},
+  };
+});
+
+describe('<NodeDimensionsTab />', () => {
+  const mockDjClient = {
+    dimensionDag: jest.fn(),
+  };
+
+  const renderWithContext = djNode =>
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <MemoryRouter>
+          <NodeDimensionsTab djNode={djNode} />
+        </MemoryRouter>
+      </DJClientContext.Provider>,
+    );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows "No dimension links found" when dimensionDag returns empty', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [],
+      outbound_edges: [],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('No dimension links found for this node.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('does not fetch when djNode has no name (early return)', () => {
+    renderWithContext({ type: 'metric', parents: [], dimension_links: [] });
+    expect(mockDjClient.dimensionDag).not.toHaveBeenCalled();
+  });
+
+  it('renders ReactFlow with DimNode components when outbound dimensions exist', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+    const dimNode = {
+      name: 'default.dim1',
+      type: 'dimension',
+      display_name: 'Default: Dim 1',
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [dimNode],
+      outbound_edges: [{ source: 'default.metric1', target: 'default.dim1' }],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    expect(screen.getByText('dimension')).toBeInTheDocument();
+  });
+
+  it('handles error from dimensionDag gracefully', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+    mockDjClient.dimensionDag.mockRejectedValue(new Error('fetch failed'));
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(expect.any(Error));
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByText('No dimension links found for this node.'),
+      ).toBeInTheDocument();
+    });
+    consoleSpy.mockRestore();
+  });
+
+  it('covers DimNode isCurrent border style (current node renders correctly)', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [
+        { name: 'default.dim1', type: 'dimension', display_name: 'Dim 1' },
+      ],
+      outbound_edges: [{ source: 'default.metric1', target: 'default.dim1' }],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    // metric1 is the current node (isCurrent=true)
+    expect(screen.getByText('metric')).toBeInTheDocument();
+  });
+
+  it('covers DimNode with no namespace (node name has no dots)', async () => {
+    const djNode = {
+      name: 'metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [{ name: 'dim1', type: 'dimension', display_name: 'Dim 1' }],
+      outbound_edges: [{ source: 'metric1', target: 'dim1' }],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+  });
+
+  it('covers DimNode with unknown type (fallback color)', async () => {
+    const djNode = {
+      name: 'default.metric1',
+      type: 'metric',
+      parents: [],
+      dimension_links: [],
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [
+        {
+          name: 'default.custom_node',
+          type: 'unknown_type',
+          display_name: 'Custom Node',
+        },
+      ],
+      outbound_edges: [
+        { source: 'default.metric1', target: 'default.custom_node' },
+      ],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    expect(screen.getByText('unknown_type')).toBeInTheDocument();
+  });
+
+  it('renders dimension DAG for a dimension node (inbound + outbound)', async () => {
+    const djNode = {
+      name: 'default.hard_hat',
+      type: 'dimension',
+      display_name: 'Hard Hat',
+      parents: [],
+      dimension_links: [],
+    };
+    const inboundNode = {
+      name: 'default.repair_orders',
+      display_name: 'Repair Orders',
+      type: 'source',
+    };
+    const outboundNode = {
+      name: 'default.us_state',
+      display_name: 'US State',
+      type: 'dimension',
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [inboundNode],
+      inbound_edges: [{ source: inboundNode.name, target: djNode.name }],
+      outbound: [outboundNode],
+      outbound_edges: [{ source: djNode.name, target: outboundNode.name }],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(mockDjClient.dimensionDag).toHaveBeenCalledWith(
+        'default.hard_hat',
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+  });
+
+  it('shows "No dimension links found" when dimension DAG returns empty inbound + outbound', async () => {
+    const djNode = {
+      name: 'default.payment_type',
+      type: 'dimension',
+      display_name: 'Payment Type',
+      parents: [],
+      dimension_links: [],
+    };
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [],
+      inbound_edges: [],
+      outbound: [],
+      outbound_edges: [],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('No dimension links found for this node.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('handles dimensionDag error gracefully', async () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const djNode = {
+      name: 'default.hard_hat',
+      type: 'dimension',
+      parents: [],
+      dimension_links: [],
+    };
+    mockDjClient.dimensionDag.mockRejectedValue(new Error('network error'));
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(consoleSpy).toHaveBeenCalledWith(expect.any(Error));
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByText('No dimension links found for this node.'),
+      ).toBeInTheDocument();
+    });
+    consoleSpy.mockRestore();
+  });
+
+  it('renders multi-level inbound chain (non-flat graph)', async () => {
+    const djNode = {
+      name: 'default.us_state',
+      type: 'dimension',
+      display_name: 'US State',
+      parents: [],
+      dimension_links: [],
+    };
+
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [
+        {
+          name: 'default.hard_hat',
+          type: 'dimension',
+          display_name: 'Hard Hat',
+        },
+        {
+          name: 'default.repair_order',
+          type: 'source',
+          display_name: 'Repair Order',
+        },
+      ],
+      inbound_edges: [
+        { source: 'default.hard_hat', target: 'default.us_state' },
+        { source: 'default.repair_order', target: 'default.hard_hat' },
+      ],
+      outbound: [],
+      outbound_edges: [],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    expect(screen.getAllByText('dimension').length).toBeGreaterThan(0);
+  });
+});

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -14,6 +14,23 @@ jest.mock('cronstrue', () => ({
 // Mock CSS imports
 jest.mock('../../../../styles/preaggregations.css', () => ({}));
 
+// Mock recharts for NodeDataFlowTab (Sankey doesn't work in jsdom)
+jest.mock('recharts', () => ({
+  Sankey: () => <div data-testid="sankey-chart" />,
+  Tooltip: () => null,
+}));
+
+// ResizeObserver is not defined in jsdom
+global.ResizeObserver = function (callback) {
+  return { observe: () => {}, disconnect: () => {}, unobserve: () => {} };
+};
+
+// jsdom doesn't implement canvas — stub getContext so text-measurement code doesn't crash
+HTMLCanvasElement.prototype.getContext = () => ({
+  font: '',
+  measureText: () => ({ width: 0 }),
+});
+
 describe('<NodePage />', () => {
   const domTestingLib = require('@testing-library/dom');
   const { queryHelpers } = domTestingLib;
@@ -71,6 +88,12 @@ describe('<NodePage />', () => {
           .mockResolvedValue({ status: 200 }),
         listPreaggs: jest.fn().mockResolvedValue({ items: [] }),
         deactivatePreaggWorkflow: jest.fn().mockResolvedValue({ status: 200 }),
+        namespaceSources: jest.fn().mockResolvedValue(null),
+        listDeployments: jest.fn().mockResolvedValue([]),
+        getNamespaceGitConfig: jest.fn().mockResolvedValue(null),
+        upstreamsGQL: jest.fn().mockResolvedValue([]),
+        downstreamsGQL: jest.fn().mockResolvedValue([]),
+        findCubesWithMetrics: jest.fn().mockResolvedValue([]),
       },
     };
   };
@@ -729,15 +752,17 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/graph']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/data-flow']}
+      >
         <Routes>
           <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
     await waitFor(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Graph' }));
-      expect(djClient.DataJunctionAPI.node_dag).toHaveBeenCalledWith(
+      fireEvent.click(screen.getByRole('button', { name: 'Data Flow' }));
+      expect(djClient.DataJunctionAPI.upstreamsGQL).toHaveBeenCalledWith(
         mocks.mockMetricNode.name,
       );
     });

package/src/app/pages/NodePage/__tests__/NodeWithDimension.test.jsx

@@ -164,10 +164,10 @@ describe('<NodesWithDimension />', () => {
       );
       for (const node of mockNodesWithDimension) {
         // renders nodes based on nodesWithDimension data
-        expect(screen.getByText(node.display_name)).toBeInTheDocument();
+        expect(screen.getByText(node.name)).toBeInTheDocument();
 
         // renders links to the correct URLs
-        const link = screen.getByText(node.display_name).closest('a');
+        const link = screen.getByText(node.name).closest('a');
         expect(link).toHaveAttribute('href', `/nodes/${node.name}`);
       }
     });

package/src/app/pages/NodePage/index.jsx

@@ -5,7 +5,8 @@ import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
-import NodeGraphTab from './NodeGraphTab';
+import NodeDataFlowTab from './NodeDataFlowTab';
+import NodeDimensionsTab from './NodeDimensionsTab';
 import NodeHistory from './NodeHistory';
 import NotebookDownload from './NotebookDownload';
 import DJClientContext from '../../providers/djclient';
@@ -83,10 +84,15 @@ export function NodePage() {
         display: node?.type !== 'metric',
       },
       {
-        id: 'graph',
-        name: 'Graph',
+        id: 'data-flow',
+        name: 'Data Flow',
         display: true,
       },
+      {
+        id: 'dimensions',
+        name: 'Dimensions',
+        display: node?.type !== 'source',
+      },
       {
         id: 'history',
         name: 'History',
@@ -128,8 +134,11 @@ export function NodePage() {
     case 'columns':
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
-    case 'graph':
-      tabToDisplay = <NodeGraphTab djNode={node} djClient={djClient} />;
+    case 'data-flow':
+      tabToDisplay = <NodeDataFlowTab djNode={node} />;
+      break;
+    case 'dimensions':
+      tabToDisplay = <NodeDimensionsTab djNode={node} />;
       break;
     case 'history':
       tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
@@ -261,9 +270,7 @@ export function NodePage() {
                 {node?.version}
               </span>
             </div>
-            <div className="align-items-center row">
-              {tabsList(node).map(buildTabs)}
-            </div>
+            <div className="dj-tabs-bar">{tabsList(node).map(buildTabs)}</div>
             {tabToDisplay}
           </div>
         ) : node?.message !== undefined ? (

package/src/app/services/DJService.js

@@ -865,6 +865,11 @@ export const DataJunctionAPI = {
         upstreamNodes(nodeNames: $nodeNames) {
           name
           type
+          current {
+            parents {
+              name
+            }
+          }
         }
       }
     `;
@@ -886,6 +891,11 @@ export const DataJunctionAPI = {
         downstreamNodes(nodeNames: $nodeNames) {
           name
           type
+          current {
+            parents {
+              name
+            }
+          }
         }
       }
     `;
@@ -900,6 +910,39 @@ export const DataJunctionAPI = {
     return results.data?.downstreamNodes || [];
   },
 
+  // Batch-fetch cubes by name, returning each cube's name and its metric node names.
+  // Used to build the Sankey data flow graph without N individual cube fetches.
+  findCubesWithMetrics: async function (cubeNames) {
+    if (!cubeNames || cubeNames.length === 0) return [];
+    const query = `
+      query FindCubesWithMetrics($names: [String!]) {
+        findNodes(names: $names, nodeTypes: [CUBE]) {
+          name
+          current {
+            displayName
+            cubeMetrics {
+              name
+            }
+          }
+        }
+      }
+    `;
+    const results = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ query, variables: { names: cubeNames } }),
+      })
+    ).json();
+    return (results.data?.findNodes || []).map(n => ({
+      name: n.name,
+      display_name: n.current?.displayName || n.name,
+      type: 'cube',
+      parents: (n.current?.cubeMetrics || []).map(m => ({ name: m.name })),
+    }));
+  },
+
   node_dag: async function (name) {
     return await (
       await fetch(`${DJ_URL}/nodes/${name}/dag/`, {
@@ -1097,9 +1140,10 @@ export const DataJunctionAPI = {
     ).json();
   },
 
-  nodesWithDimension: async function (name) {
+  nodesWithDimension: async function (name, nodeType = null) {
+    const params = nodeType ? `?node_type=${nodeType}` : '';
     return await (
-      await fetch(`${DJ_URL}/dimensions/${name}/nodes/`, {
+      await fetch(`${DJ_URL}/dimensions/${name}/nodes/${params}`, {
         credentials: 'include',
       })
     ).json();
@@ -1444,6 +1488,13 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  dimensionDag: async function (nodeName) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/${nodeName}/dimension-dag/`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
   linkDimension: async function (nodeName, columnName, dimensionName) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/columns/${columnName}?dimension=${dimensionName}`,
@@ -1928,11 +1979,18 @@ export const DataJunctionAPI = {
 
   // ===== My Workspace GraphQL Queries =====
 
-  getWorkspaceRecentlyEdited: async function (username, limit = 10) {
+  getWorkspaceRecentlyEdited: async function (
+    username,
+    limit = 10,
+    nodeType = null,
+  ) {
     // Nodes the user has edited, ordered by last updated (excluding source nodes)
     const query = `
       query RecentlyEdited($editedBy: String!, $limit: Int!, $nodeTypes: [NodeType!]) {
         findNodesPaginated(editedBy: $editedBy, limit: $limit, nodeTypes: $nodeTypes, orderBy: UPDATED_AT, ascending: false) {
+          pageInfo {
+            hasNextPage
+          }
           edges {
             node {
               name
@@ -1957,6 +2015,7 @@ export const DataJunctionAPI = {
         }
       }
     `;
+    const allTypes = ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'];
     return await (
       await fetch(DJ_GQL, {
         method: 'POST',
@@ -1967,18 +2026,25 @@ export const DataJunctionAPI = {
           variables: {
             editedBy: username,
             limit,
-            nodeTypes: ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'],
+            nodeTypes: nodeType ? [nodeType] : allTypes,
           },
         }),
       })
     ).json();
   },
 
-  getWorkspaceOwnedNodes: async function (username, limit = 10) {
+  getWorkspaceOwnedNodes: async function (
+    username,
+    limit = 10,
+    nodeType = null,
+  ) {
     // Owned nodes ordered by UPDATED_AT (excluding source nodes)
     const query = `
       query OwnedNodes($ownedBy: String!, $limit: Int!, $nodeTypes: [NodeType!]) {
         findNodesPaginated(ownedBy: $ownedBy, limit: $limit, nodeTypes: $nodeTypes, orderBy: UPDATED_AT, ascending: false) {
+          pageInfo {
+            hasNextPage
+          }
           edges {
             node {
               name
@@ -2003,6 +2069,7 @@ export const DataJunctionAPI = {
         }
       }
     `;
+    const allTypes = ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'];
     return await (
       await fetch(DJ_GQL, {
         method: 'POST',
@@ -2013,7 +2080,7 @@ export const DataJunctionAPI = {
           variables: {
             ownedBy: username,
             limit,
-            nodeTypes: ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'],
+            nodeTypes: nodeType ? [nodeType] : allTypes,
           },
         }),
       })