datajunction-ui 0.0.1-a42.dev0 → 0.0.1-a43.dev0

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

@@ -271,7 +271,7 @@ describe('<NodePage />', () => {
     },
   };
 
-  it('renders the NodeInfo tab correctly', async () => {
+  it('renders the NodeInfo tab correctly for a metric node', async () => {
     const djClient = mockDJClient();
     djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
     djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
@@ -281,9 +281,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     const { container } = render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/info']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -292,7 +292,6 @@ describe('<NodePage />', () => {
       expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
         'default.num_repair_orders',
       );
-      userEvent.click(screen.getByRole('button', { name: 'Info' }));
 
       expect(
         screen.getByRole('dialog', { name: 'NodeName' }),
@@ -316,8 +315,8 @@ describe('<NodePage />', () => {
       );
 
       expect(
-        screen.getByRole('dialog', { name: 'PrimaryKey' }),
-      ).toHaveTextContent('repair_order_id, country');
+        screen.getByRole('dialog', { name: 'RequiredDimensions' }),
+      ).toHaveTextContent('');
 
       expect(
         screen.getByRole('dialog', { name: 'DisplayName' }),
@@ -411,14 +410,15 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/columns']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
     await waitFor(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Columns' }));
       expect(djClient.DataJunctionAPI.columns).toHaveBeenCalledWith(
         mocks.mockMetricNode,
       );
@@ -484,9 +484,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     const { container } = render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/history']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -543,14 +545,12 @@ describe('<NodePage />', () => {
             'Status changed from valid to invalid Caused by a change in upstream default.repair_order_details',
           ),
         );
-      screen.debug();
     });
   });
 
   it('renders compiled sql correctly', async () => {
     const djClient = mockDJClient();
-    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    djClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    djClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.compiledSql.mockReturnValue('select 1');
 
@@ -560,7 +560,7 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={[`/nodes/${mocks.mockTransformNode.name}`]}>
         <Routes>
           <Route path="nodes/:name" element={element} />
         </Routes>
@@ -569,7 +569,7 @@ describe('<NodePage />', () => {
     await waitFor(() => {
       fireEvent.click(screen.getByRole('checkbox', { name: 'ToggleSwitch' }));
       expect(djClient.DataJunctionAPI.compiledSql).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
+        mocks.mockTransformNode.name,
       );
     });
   });
@@ -587,9 +587,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/materializations']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -620,9 +622,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/materializations']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -658,9 +662,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/sql']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -689,9 +693,11 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter
+        initialEntries={['/nodes/default.num_repair_orders/lineage']}
+      >
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -715,9 +721,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders']}>
+      <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/graph']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );
@@ -742,9 +748,9 @@ describe('<NodePage />', () => {
       </DJClientContext.Provider>
     );
     render(
-      <MemoryRouter initialEntries={['/nodes/default.dispatcher']}>
+      <MemoryRouter initialEntries={['/nodes/default.dispatcher/linked']}>
         <Routes>
-          <Route path="nodes/:name" element={element} />
+          <Route path="nodes/:name/:tab" element={element} />
         </Routes>
       </MemoryRouter>,
     );

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

@@ -100,35 +100,19 @@ exports[`<NodePage /> renders the NodeHistory tab correctly 1`] = `
 </table>
 `;
 
-exports[`<NodePage /> renders the NodeInfo tab correctly 1`] = `
+exports[`<NodePage /> renders the NodeInfo tab correctly for a metric node 1`] = `
 HTMLCollection [
   <code
     class="language-sql"
     style="white-space: pre;"
   >
-    <span
-      style="color: rgb(0, 153, 153);"
-    >
-      SELECT
-    </span>
-    <span>
-       
-    </span>
     <span
       class="hljs-built_in"
     >
       count
     </span>
     <span>
-      (repair_order_id) default_DOT_num_repair_orders 
-    </span>
-    <span
-      style="color: rgb(0, 153, 153);"
-    >
-      FROM
-    </span>
-    <span>
-       default.repair_orders
+      (repair_order_id)
     </span>
   </code>,
 ]

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

@@ -16,16 +16,22 @@ import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
 import NodeDimensionsTab from './NodeDimensionsTab';
+import { useNavigate } from 'react-router-dom';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const navigate = useNavigate();
+
+  const { name, tab } = useParams();
+
   const [state, setState] = useState({
-    selectedTab: 0,
+    selectedTab: tab || 'info',
   });
 
   const [node, setNode] = useState();
 
   const onClickTab = id => () => {
+    navigate(`/nodes/${name}/${id}`);
     setState({ selectedTab: id });
   };
 
@@ -41,24 +47,23 @@ export function NodePage() {
     ) : null;
   };
 
-  const { name } = useParams();
-
   useEffect(() => {
     const fetchData = async () => {
       const data = await djClient.node(name);
       data.createNodeClientCode = await djClient.clientCode(name);
-      setNode(data);
       if (data.type === 'metric') {
         const metric = await djClient.metric(name);
         data.dimensions = metric.dimensions;
         data.metric_metadata = metric.metric_metadata;
-        setNode(data);
+        data.required_dimensions = metric.required_dimensions;
+        data.upstream_node = metric.upstream_node;
+        data.expression = metric.expression;
       }
       if (data.type === 'cube') {
         const cube = await djClient.cube(name);
         data.cube_elements = cube.cube_elements;
-        setNode(data);
       }
+      setNode(data);
     };
     fetchData().catch(console.error);
   }, [djClient, name]);
@@ -66,84 +71,82 @@ export function NodePage() {
   const tabsList = node => {
     return [
       {
-        id: 0,
+        id: 'info',
         name: 'Info',
         display: true,
       },
       {
-        id: 1,
+        id: 'columns',
         name: 'Columns',
         display: true,
       },
       {
-        id: 2,
+        id: 'graph',
         name: 'Graph',
         display: true,
       },
       {
-        id: 3,
+        id: 'history',
         name: 'History',
         display: true,
       },
       {
-        id: 4,
+        id: 'sql',
         name: 'SQL',
         display: node?.type !== 'dimension' && node?.type !== 'source',
       },
       {
-        id: 5,
+        id: 'materializations',
         name: 'Materializations',
         display: node?.type !== 'source',
       },
       {
-        id: 6,
+        id: 'linked',
         name: 'Linked Nodes',
         display: node?.type === 'dimension',
       },
       {
-        id: 7,
+        id: 'lineage',
         name: 'Lineage',
         display: node?.type === 'metric',
       },
       {
-        id: 8,
+        id: 'dimensions',
         name: 'Dimensions',
         display: node?.type !== 'cube',
       },
     ];
   };
-
-  //
-  //
   let tabToDisplay = null;
+
   switch (state.selectedTab) {
-    case 0:
+    case 'info':
       tabToDisplay =
         node && node.message === undefined ? <NodeInfoTab node={node} /> : '';
       break;
-    case 1:
+    case 'columns':
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
-    case 2:
+    case 'graph':
       tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
       break;
-    case 3:
+    case 'history':
       tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
       break;
-    case 4:
+    case 'sql':
       tabToDisplay =
         node?.type === 'metric' ? <NodeSQLTab djNode={node} /> : <br />;
       break;
-    case 5:
+    case 'materializations':
       tabToDisplay = <NodeMaterializationTab node={node} djClient={djClient} />;
       break;
-    case 6:
+    case 'linked':
       tabToDisplay = <NodesWithDimension node={node} djClient={djClient} />;
       break;
-    case 7:
+    case 'lineage':
       tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
       break;
-    case 8:
+    case 'dimensions':
       tabToDisplay = <NodeDimensionsTab node={node} djClient={djClient} />;
       break;
     default: /* istanbul ignore next */

package/src/app/pages/Root/index.tsx

@@ -24,10 +24,11 @@ export function Root() {
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
           <div className="logo">
-            <h2>
+            <a href={'/'} style={{textTransform: 'none', textDecoration: 'none', color: '#000'}}>
+              <h2>
               <DJLogo />
               Data<b>Junction</b>
-            </h2>
+            </h2></a>
           </div>
           <Search />
           <div className="menu">

package/src/app/services/DJService.js

@@ -60,6 +60,14 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  nodesWithType: async function (nodeType) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/?node_type=${nodeType}`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
   nodeDetails: async () => {
     return await (
       await fetch(`${DJ_URL}/nodes/details/`, {
@@ -68,6 +76,31 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  validateNode: async function (
+    nodeType,
+    name,
+    display_name,
+    description,
+    query,
+  ) {
+    const response = await fetch(`${DJ_URL}/nodes/validate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: name,
+        display_name: display_name,
+        description: description,
+        query: query,
+        type: nodeType,
+        mode: 'published',
+      }),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
   createNode: async function (
     nodeType,
     name,
@@ -79,6 +112,7 @@ export const DataJunctionAPI = {
     primary_key,
     metric_direction,
     metric_unit,
+    required_dimensions,
   ) {
     const metricMetadata =
       metric_direction || metric_unit
@@ -101,6 +135,7 @@ export const DataJunctionAPI = {
         namespace: namespace,
         primary_key: primary_key,
         metric_metadata: metricMetadata,
+        required_dimensions: required_dimensions,
       }),
       credentials: 'include',
     });
@@ -116,6 +151,7 @@ export const DataJunctionAPI = {
     primary_key,
     metric_direction,
     metric_unit,
+    required_dimensions,
   ) {
     try {
       const metricMetadata =
@@ -137,6 +173,7 @@ export const DataJunctionAPI = {
           mode: mode,
           primary_key: primary_key,
           metric_metadata: metricMetadata,
+          required_dimensions: required_dimensions,
         }),
         credentials: 'include',
       });

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

@@ -65,6 +65,18 @@ describe('DataJunctionAPI', () => {
     });
   });
 
+  it('calls nodesWithType correctly', async () => {
+    const nodeType = 'transform';
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.nodesWithType(nodeType);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/?node_type=${nodeType}`,
+      {
+        credentials: 'include',
+      },
+    );
+  });
+
   it('calls createNode correctly', async () => {
     const sampleArgs = [
       'type',
@@ -266,6 +278,17 @@ describe('DataJunctionAPI', () => {
     });
   });
 
+  it('calls listMetricMetadata correctly', async () => {
+    const nodeType = 'transform';
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.listMetricMetadata();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/metrics/metadata`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+    });
+  });
+
   it('calls namespaces correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.namespaces();

package/src/mocks/mockNodes.jsx

@@ -1,4 +1,63 @@
 export const mocks = {
+  metricMetadata: {
+    directions: ['higher_is_better', 'lower_is_better', 'neutral'],
+    units: [
+      { name: 'dollar', label: 'Dollar' },
+      { name: 'second', label: 'Second' },
+    ],
+  },
+  mockTransformNode: {
+    namespace: 'default',
+    node_revision_id: 15,
+    node_id: 15,
+    type: 'transform',
+    name: 'default.repair_order_transform',
+    display_name: 'Default: Repair Order Transform',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      name: 'warehouse',
+      engines: [],
+    },
+    schema_: null,
+    table: null,
+    description: 'Repair order dimension',
+    query:
+      'SELECT repair_order_id, municipality_id, hard_hat_id, dispatcher_id FROM default.repair_orders',
+    availability: null,
+    columns: [
+      {
+        name: 'repair_order_id',
+        display_name: 'Repair Order Id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+      {
+        name: 'municipality_id',
+        display_name: 'Municipality Id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+        partition: null,
+      },
+    ],
+    updated_at: '2024-01-24T16:39:14.029366+00:00',
+    materializations: [],
+    parents: [
+      {
+        name: 'default.repair_orders',
+      },
+    ],
+    metric_metadata: null,
+    dimension_links: [],
+    created_at: '2024-01-24T16:39:14.028077+00:00',
+    tags: [],
+    current_version: 'v1.0',
+    missing_table: false,
+  },
   mockMetricNode: {
     namespace: 'default',
     node_revision_id: 23,
@@ -217,6 +276,10 @@ export const mocks = {
       },
       direction: 'neutral',
     },
+    upstream_node: 'default.repair_orders',
+    expression: 'count(repair_order_id)',
+    aggregate_expression: 'count(repair_order_id)',
+    required_dimensions: [],
   },
   attributes: [
     {

package/src/styles/index.css

@@ -1106,3 +1106,9 @@ pre {
   padding: 5px;
   font-family: Consolas, serif;
 }
+
+.PrimaryKey {
+  margin-right: 10px;
+  font-size: 100%;
+  margin-bottom: 5px;
+}