datajunction-ui 0.0.93 → 0.0.95

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

@@ -0,0 +1,412 @@
+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 cube dimension graph via dimensionDag (backend handles cube expansion)', async () => {
+    const djNode = {
+      name: 'default.repairs_cube',
+      type: 'cube',
+      parents: [],
+      dimension_links: [],
+    };
+
+    // The backend now seeds the BFS from the cube's metric upstreams, so the
+    // frontend just calls dimensionDag normally and gets back a populated result.
+    mockDjClient.dimensionDag.mockResolvedValue({
+      inbound: [
+        {
+          name: 'default.repair_orders',
+          type: 'source',
+          display_name: 'Repair Orders',
+        },
+      ],
+      inbound_edges: [
+        { source: 'default.repair_orders', target: 'default.hard_hat' },
+      ],
+      outbound: [
+        {
+          name: 'default.hard_hat',
+          type: 'dimension',
+          display_name: 'Hard Hat',
+        },
+        {
+          name: 'default.dispatcher',
+          type: 'dimension',
+          display_name: 'Dispatcher',
+        },
+      ],
+      outbound_edges: [
+        { source: 'default.repair_orders', target: 'default.hard_hat' },
+        { source: 'default.repair_orders', target: 'default.dispatcher' },
+      ],
+    });
+
+    renderWithContext(djNode);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('reactflow')).toBeInTheDocument();
+    });
+    expect(mockDjClient.dimensionDag).toHaveBeenCalledWith(
+      'default.repairs_cube',
+    );
+    expect(screen.getAllByText('dimension').length).toBeGreaterThan(0);
+  });
+
+  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 ? (