datajunction-ui 0.0.1-a48 → 0.0.1-a49.dev2

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DJClientContext from '../../../providers/djclient';
+import DimensionFilter from '../DimensionFilter';
+
+// Mock DJClientContext
+const mockDJClient = {
+  DataJunctionAPI: {
+    node: jest.fn(),
+    nodeData: jest.fn(),
+  },
+};
+
+const mockDimension = {
+  label: 'Dimension Label [Test]',
+  value: 'dimension_value',
+  metadata: {
+    node_name: 'test_node',
+    node_display_name: 'Test Node',
+  },
+};
+
+const getByTextStartsWith = (container, text) => {
+  return Array.from(container.querySelectorAll('*')).find(element => {
+    return element.textContent.trim().startsWith(text);
+  });
+};
+
+describe('DimensionFilter', () => {
+  it('fetches dimension data and renders correctly', async () => {
+    // Mock node response
+    const mockNodeResponse = {
+      type: 'dimension',
+      name: 'test_node',
+      columns: [
+        {
+          name: 'id',
+          attributes: [{ attribute_type: { name: 'primary_key' } }],
+        },
+        { name: 'name', attributes: [{ attribute_type: { name: 'label' } }] },
+      ],
+    };
+    mockDJClient.DataJunctionAPI.node.mockResolvedValue(mockNodeResponse);
+
+    // Mock node data response
+    const mockNodeDataResponse = {
+      results: [
+        {
+          columns: [{ semantic_entity: 'id' }, { semantic_entity: 'name' }],
+          rows: [
+            [1, 'Value 1'],
+            [2, 'Value 2'],
+          ],
+        },
+      ],
+    };
+    mockDJClient.DataJunctionAPI.nodeData.mockResolvedValue(
+      mockNodeDataResponse,
+    );
+
+    const { container } = render(
+      <DJClientContext.Provider value={mockDJClient}>
+        <DimensionFilter dimension={mockDimension} onChange={jest.fn()} />
+      </DJClientContext.Provider>,
+    );
+
+    // Check if the dimension label and node display name are rendered
+    expect(
+      getByTextStartsWith(container, 'Dimension Label'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Test Node')).toBeInTheDocument();
+  });
+});

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

@@ -58,7 +58,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('Dimension 1'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect linkDimension to be called
     await waitFor(() => {
@@ -74,7 +73,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('[Remove dimension link]'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect unlinkDimension to be called
     await waitFor(() => {
@@ -133,7 +131,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('Dimension 1'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect linkDimension to be called
     await waitFor(() => {
@@ -151,7 +148,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('[Remove Dimension]'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect unlinkDimension to be called
     await waitFor(() => {

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

@@ -23,6 +23,7 @@ describe('<NodePage />', () => {
       DataJunctionAPI: {
         node: jest.fn(),
         metric: jest.fn(),
+        revalidate: jest.fn().mockReturnValue({ status: 'valid' }),
         node_dag: jest.fn().mockReturnValue(mocks.mockNodeDAG),
         clientCode: jest.fn().mockReturnValue('dj_client = DJClient()'),
         columns: jest.fn(),
@@ -39,6 +40,8 @@ describe('<NodePage />', () => {
         dimensions: jest.fn(),
         setPartition: jest.fn(),
         engines: jest.fn(),
+        streamNodeData: jest.fn(),
+        nodeDimensions: jest.fn(),
       },
     };
   };
@@ -652,31 +655,110 @@ describe('<NodePage />', () => {
     );
   }, 60000);
 
-  it('renders the NodeSQL tab', async () => {
+  it('renders the NodeValidate tab', async () => {
     const djClient = mockDJClient();
+    window.scrollTo = jest.fn();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.nodeDimensions.mockReturnValue(
+      mocks.mockMetricNodeJson.dimensions,
+    );
     djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
-    djClient.DataJunctionAPI.sql.mockReturnValue(mocks.metricNodeColumns);
+    djClient.DataJunctionAPI.sql.mockReturnValue({
+      sql: 'SELECT * FROM testNode',
+    });
+    const streamNodeData = {
+      onmessage: jest.fn(),
+      onerror: jest.fn(),
+      close: jest.fn(),
+    };
+    djClient.DataJunctionAPI.streamNodeData.mockResolvedValue(streamNodeData);
+    djClient.DataJunctionAPI.streamNodeData.mockResolvedValueOnce({
+      state: 'FINISHED',
+      results: [
+        {
+          columns: [{ name: 'column1' }, { name: 'column2' }],
+          rows: [
+            [1, 'value1'],
+            [2, 'value2'],
+          ],
+        },
+      ],
+    });
+
     const element = (
       <DJClientContext.Provider value={djClient}>
         <NodePage />
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/sql']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/validate']}
+      >
         <Routes>
           <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
+
+    await waitFor(() => {
+      expect(screen.getByText('Group By')).toBeInTheDocument();
+      expect(screen.getByText('Add Filters')).toBeInTheDocument();
+      expect(screen.getByText('Generated Query')).toBeInTheDocument();
+      expect(screen.getByText('Results')).toBeInTheDocument();
+    });
+    // Click on the 'Validate' tab
+    fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
+
     await waitFor(() => {
-      const sqlButton = screen.getByRole('button', { name: 'SQL' });
-      sqlButton.click();
+      expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
+      );
       expect(djClient.DataJunctionAPI.sql).toHaveBeenCalledWith(
-        'default.num_repair_orders',
+        mocks.mockMetricNode.name,
         { dimensions: [], filters: [] },
       );
+      expect(djClient.DataJunctionAPI.nodeDimensions).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
+      );
+    });
+
+    // Click on 'Run' to run the node query
+    const runButton = screen.getByText('► Run');
+    fireEvent.click(runButton);
+
+    await waitFor(() => {
+      expect(djClient.DataJunctionAPI.streamNodeData).toHaveBeenCalledWith(
+        mocks.mockMetricNode.name,
+        { dimensions: [], filters: [] },
+      );
+      expect(streamNodeData.onmessage).toBeDefined();
+      expect(streamNodeData.onerror).toBeDefined();
+    });
+
+    const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
+    const resultsTab = screen.getByText('Results');
+
+    // Initially, the Results tab should be active
+    expect(resultsTab).toHaveClass('active');
+    expect(infoTab).not.toHaveClass('active');
+
+    // Click on the Info tab first
+    fireEvent.click(infoTab);
+
+    await waitFor(() => {
+      // Now, the Info tab should be active
+      expect(infoTab).toHaveClass('active');
+      expect(resultsTab).not.toHaveClass('active');
+    });
+
+    // Click on the Results tab
+    fireEvent.click(resultsTab);
+
+    await waitFor(() => {
+      // Now, the Results tab should be active again
+      expect(resultsTab).toHaveClass('active');
+      expect(infoTab).not.toHaveClass('active');
     });
   });
 

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

@@ -8,7 +8,7 @@ import NodeColumnTab from './NodeColumnTab';
 import NodeLineage from './NodeGraphTab';
 import NodeHistory from './NodeHistory';
 import DJClientContext from '../../providers/djclient';
-import NodeSQLTab from './NodeSQLTab';
+import NodeValidateTab from './NodeValidateTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
 import ClientCodePopover from './ClientCodePopover';
 import NodesWithDimension from './NodesWithDimension';
@@ -92,9 +92,9 @@ export function NodePage() {
         display: true,
       },
       {
-        id: 'sql',
-        name: 'SQL',
-        display: node?.type !== 'dimension' && node?.type !== 'source',
+        id: 'validate',
+        name: '► Validate',
+        display: node?.type !== 'source',
       },
       {
         id: 'materializations',
@@ -134,9 +134,8 @@ export function NodePage() {
     case 'history':
       tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
       break;
-    case 'sql':
-      tabToDisplay =
-        node?.type === 'metric' ? <NodeSQLTab djNode={node} /> : <br />;
+    case 'validate':
+      tabToDisplay = <NodeValidateTab node={node} djClient={djClient} />;
       break;
     case 'materializations':
       tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;

package/src/app/services/DJService.js

@@ -363,13 +363,18 @@ export const DataJunctionAPI = {
   },
 
   sql: async function (metric_name, selection) {
+    const params = new URLSearchParams(selection);
+    for (const [key, value] of Object.entries(selection)) {
+      if (Array.isArray(value)) {
+        params.delete(key);
+        value.forEach(v => params.append(key, v));
+      }
+    }
+
     return await (
-      await fetch(
-        `${DJ_URL}/sql/${metric_name}?` + new URLSearchParams(selection),
-        {
-          credentials: 'include',
-        },
-      )
+      await fetch(`${DJ_URL}/sql/${metric_name}?${params}`, {
+        credentials: 'include',
+      })
     ).json();
   },
 
@@ -432,6 +437,31 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  nodeData: async function (nodeName, selection = null) {
+    if (selection === null) {
+      selection = {
+        dimensions: [],
+        filters: [],
+      };
+    }
+    const params = new URLSearchParams(selection);
+    for (const [key, value] of Object.entries(selection)) {
+      if (Array.isArray(value)) {
+        params.delete(key);
+        value.forEach(v => params.append(key, v));
+      }
+    }
+    params.append('limit', '1000');
+    params.append('async_', 'true');
+
+    return await (
+      await fetch(`${DJ_URL}/data/${nodeName}?${params}`, {
+        credentials: 'include',
+        headers: { 'Cache-Control': 'max-age=86400' },
+      })
+    ).json();
+  },
+
   stream: async function (metricSelection, dimensionSelection, filters) {
     const params = new URLSearchParams();
     metricSelection.map(metric => params.append('metrics', metric));
@@ -445,6 +475,28 @@ export const DataJunctionAPI = {
     );
   },
 
+  streamNodeData: async function (nodeName, selection = null) {
+    if (selection === null) {
+      selection = {
+        dimensions: [],
+        filters: [],
+      };
+    }
+    const params = new URLSearchParams(selection);
+    for (const [key, value] of Object.entries(selection)) {
+      if (Array.isArray(value)) {
+        params.delete(key);
+        value.forEach(v => params.append(key, v));
+      }
+    }
+    params.append('limit', '1000');
+    params.append('async_', 'true');
+
+    return new EventSource(`${DJ_URL}/stream/${nodeName}?${params}`, {
+      withCredentials: true,
+    });
+  },
+
   lineage: async function (node) {},
 
   compiledSql: async function (node) {
@@ -815,7 +867,6 @@ export const DataJunctionAPI = {
     return { status: response.status, json: await response.json() };
   },
   deleteMaterialization: async function (nodeName, materializationName) {
-    console.log('deleting materialization', nodeName, materializationName);
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/materializations?materialization_name=${materializationName}`,
       {

package/src/app/services/__tests__/DJService.test.jsx

@@ -605,6 +605,50 @@ describe('DataJunctionAPI', () => {
     );
   });
 
+  it('calls streamNodeData correctly', () => {
+    const nodes = ['transform1'];
+    const dimensionSelection = ['dimension1', 'dimension2'];
+    const filters = 'sampleFilter';
+
+    DataJunctionAPI.streamNodeData(nodes[0], {
+      dimensions: dimensionSelection,
+      filters: filters,
+    });
+
+    const params = new URLSearchParams();
+    params.append('dimensions', dimensionSelection, 'filters', filters);
+
+    expect(global.EventSource).toHaveBeenCalledWith(
+      `${DJ_URL}/stream/transform1?filters=sampleFilter&dimensions=dimension1&dimensions=dimension2&limit=1000&async_=true`,
+      { withCredentials: true },
+    );
+  });
+
+  it('calls nodeData correctly', () => {
+    const nodes = ['transform1'];
+    const dimensionSelection = ['dimension1', 'dimension2'];
+    const filters = 'sampleFilter';
+    fetch.mockResponseOnce(JSON.stringify({}));
+
+    DataJunctionAPI.nodeData(nodes[0], {
+      dimensions: dimensionSelection,
+      filters: filters,
+    });
+
+    const params = new URLSearchParams();
+    params.append('dimensions', dimensionSelection, 'filters', filters);
+
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/data/transform1?filters=sampleFilter&dimensions=dimension1&dimensions=dimension2&limit=1000&async_=true`,
+      {
+        credentials: 'include',
+        headers: {
+          'Cache-Control': 'max-age=86400',
+        },
+      },
+    );
+  });
+
   it('calls dag correctly and processes response', async () => {
     const mockResponse = [
       {
@@ -1019,4 +1063,22 @@ describe('DataJunctionAPI', () => {
       },
     );
   });
+
+  it('calls deleteMaterialization correctly', () => {
+    const nodeName = 'transform1';
+    const materializationName = 'sampleMaterialization';
+    fetch.mockResponseOnce(JSON.stringify({}));
+
+    DataJunctionAPI.deleteMaterialization(nodeName, materializationName);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/${nodeName}/materializations?materialization_name=${materializationName}`,
+      {
+        method: 'DELETE',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  });
 });

package/src/mocks/mockNodes.jsx

@@ -962,6 +962,9 @@ export const mocks = {
     dimensions: [
       {
         name: 'default.date_dim.dateint',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: true,
         type: 'timestamp',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -971,6 +974,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.dateint',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: true,
         type: 'timestamp',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -980,6 +986,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.day',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -989,6 +998,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.day',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -998,6 +1010,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.month',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1007,6 +1022,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.month',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1016,6 +1034,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.year',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1025,6 +1046,9 @@ export const mocks = {
       },
       {
         name: 'default.date_dim.year',
+        node_name: 'default.date_dim',
+        node_display_name: 'Date Dim',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1034,6 +1058,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.address',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1042,6 +1069,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.birth_date',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'date',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1050,6 +1080,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.city',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1058,6 +1091,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.contractor_id',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1066,6 +1102,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.country',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1074,6 +1113,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.first_name',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1082,6 +1124,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.hard_hat_id',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: true,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1090,6 +1135,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.hire_date',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'date',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1098,6 +1146,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.last_name',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1106,6 +1157,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.manager',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'int',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1114,6 +1168,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.postal_code',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1122,6 +1179,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.state',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',
@@ -1130,6 +1190,9 @@ export const mocks = {
       },
       {
         name: 'default.hard_hat.title',
+        node_name: 'default.hard_hat',
+        node_display_name: 'Hard hat',
+        is_primary_key: false,
         type: 'string',
         path: [
           'default.repair_order_details.repair_order_id',