datajunction-ui 0.0.1-a39.dev0 → 0.0.1-a40.dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a39.dev0",
+  "version": "0.0.1-a40.dev",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -93,7 +93,7 @@ describe('AddEditNodePage submission failed', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        ['purpose'],
+        [{ display_name: 'Purpose', name: 'purpose' }],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
         json: { message: 'Some tags were not found' },

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -120,7 +120,7 @@ describe('AddEditNodePage submission succeeded', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        ['purpose'],
+        [{ display_name: 'Purpose', name: 'purpose' }],
       );
 
       expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(

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

@@ -144,10 +144,9 @@ export function AddEditNodePage() {
       values.metric_direction,
       values.metric_unit,
     );
-
     const tagsResponse = await djClient.tagsNode(
       values.name,
-      values.tags.map(tag => tag.name),
+      values.tags.map(tag => tag),
     );
     if ((status === 200 || status === 201) && tagsResponse.status === 200) {
       setStatus({

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

@@ -1,10 +1,8 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
-import { ErrorMessage, Field, Form, Formik } from 'formik';
-import { FormikSelect } from '../AddEditNodePage/FormikSelect';
-import EditIcon from '../../icons/EditIcon';
-import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
+import { Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
 
 export default function AddBackfillPopover({
   node,

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

@@ -5,6 +5,8 @@ import EditColumnPopover from './EditColumnPopover';
 import LinkDimensionPopover from './LinkDimensionPopover';
 import { labelize } from '../../../utils/form';
 import PartitionColumnPopover from './PartitionColumnPopover';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 
 export default function NodeColumnTab({ node, djClient }) {
   const [attributes, setAttributes] = useState([]);
@@ -175,26 +177,65 @@ export default function NodeColumnTab({ node, djClient }) {
   };
 
   return (
-    <div className="table-responsive">
-      <table className="card-inner-table table">
-        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <tr>
-            <th className="text-start">Column</th>
-            <th>Display Name</th>
-            <th>Type</th>
-            {node?.type !== 'cube' ? (
-              <>
-                <th>Linked Dimension</th>
-                <th>Attributes</th>
-              </>
-            ) : (
-              ''
-            )}
-            <th>Partition</th>
-          </tr>
-        </thead>
-        <tbody>{columnList(columns)}</tbody>
-      </table>
-    </div>
+    <>
+      <div className="table-responsive">
+        <table className="card-inner-table table">
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Column</th>
+              <th>Display Name</th>
+              <th>Type</th>
+              {node?.type !== 'cube' ? (
+                <>
+                  <th>Linked Dimension</th>
+                  <th>Attributes</th>
+                </>
+              ) : (
+                ''
+              )}
+              <th>Partition</th>
+            </tr>
+          </thead>
+          <tbody>{columnList(columns)}</tbody>
+        </table>
+      </div>
+      <div>
+        <h3>Linked Dimensions (Custom Join SQL)</h3>
+        <table className="card-inner-table table">
+          <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+            <tr>
+              <th className="text-start">Dimension Node</th>
+              <th>Join Type</th>
+              <th>Join SQL</th>
+              <th>Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            {node?.dimension_links.map(link => {
+              return (
+                <tr>
+                  <td>
+                    <a href={'/nodes/' + link.dimension.name}>
+                      {link.dimension.name}
+                    </a>
+                  </td>
+                  <td>{link.join_type.toUpperCase()}</td>
+                  <td style={{ width: '25rem', maxWidth: 'none' }}>
+                    <SyntaxHighlighter
+                      language="sql"
+                      style={foundation}
+                      wrapLongLines={true}
+                    >
+                      {link.join_sql}
+                    </SyntaxHighlighter>
+                  </td>
+                  <td>{link.role}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </>
   );
 }

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

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { labelize } from '../../../utils/form';
+
+export default function NodeDimensionsTab({ node, djClient }) {
+  const [dimensions, setDimensions] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      if (node) {
+        const data = await djClient.nodeDimensions(node.name);
+        const grouped = Object.entries(
+          data.reduce((group, dimension) => {
+            group[dimension.node_name + dimension.path] =
+              group[dimension.node_name + dimension.path] ?? [];
+            group[dimension.node_name + dimension.path].push(dimension);
+            return group;
+          }, {}),
+        );
+        setDimensions(grouped);
+      }
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  // Builds the block of dimensions selectors, grouped by node name + path
+  return (
+    <div style={{ padding: '1rem' }}>
+      {dimensions.map(grouping => {
+        const dimensionsInGroup = grouping[1];
+        const role = dimensionsInGroup[0].path
+          .map(pathItem => pathItem.split('.').slice(-1))
+          .join(' → ');
+        const fullPath = dimensionsInGroup[0].path.join(' → ');
+        const groupHeader = (
+          <h4
+            style={{
+              fontWeight: 'normal',
+              marginBottom: '5px',
+              marginTop: '15px',
+            }}
+          >
+            <a href={`/nodes/${dimensionsInGroup[0].node_name}`}>
+              <b>{dimensionsInGroup[0].node_display_name}</b>
+            </a>{' '}
+            with role{' '}
+            <span className="HighlightPath">
+              <b>{role}</b>
+            </span>{' '}
+            via <span className="HighlightPath">{fullPath}</span>
+          </h4>
+        );
+        const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+          return {
+            value: dim.name,
+            label:
+              labelize(dim.name.split('.').slice(-1)[0]) +
+              (dim.is_primary_key ? ' (PK)' : ''),
+          };
+        });
+        return (
+          <>
+            {groupHeader}
+            <div className="dimensionsList">
+              {dimensionGroupOptions.map(dimension => {
+                return (
+                  <div>
+                    {dimension.label.split('[').slice(0)[0]} ⇢{' '}
+                    <code className="DimensionAttribute">
+                      {dimension.value}
+                    </code>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -1,4 +1,7 @@
 import { useEffect, useState } from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import * as React from 'react';
 
 export default function NodeHistory({ node, djClient }) {
   const [history, setHistory] = useState([]);
@@ -175,7 +178,15 @@ export default function NodeHistory({ node, djClient }) {
         </td>
         <td>{revision.display_name}</td>
         <td>{revision.description}</td>
-        <td>{revision.query}</td>
+        <td>
+          <SyntaxHighlighter
+            language="sql"
+            style={foundation}
+            wrapLongLines={true}
+          >
+            {revision.query}
+          </SyntaxHighlighter>
+        </td>
         <td>{revision.tags}</td>
       </tr>
     ));

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeColumnTab from '../NodeColumnTab';
+
+describe('<NodeColumnTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    columns: jest.fn(),
+    attributes: jest.fn(),
+    dimensions: jest.fn(),
+  };
+
+  const mockNodeColumns = [
+    {
+      name: 'repair_order_id',
+      display_name: 'Repair Order Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'municipality_id',
+      display_name: 'Municipality Id',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'hard_hat_id',
+      display_name: 'Hard Hat Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'order_date',
+      display_name: 'Order Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'required_date',
+      display_name: 'Required Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'dispatched_date',
+      display_name: 'Dispatched Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'dispatcher_id',
+      display_name: 'Dispatcher Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+  ];
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: null,
+    columns: mockNodeColumns,
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  const mockAttributes = [
+    {
+      uniqueness_scope: [],
+      namespace: 'system',
+      name: 'primary_key',
+      description:
+        'Points to a column which is part of the primary key of the node',
+      allowed_node_types: ['source', 'transform', 'dimension'],
+      id: 1,
+    },
+    {
+      uniqueness_scope: [],
+      namespace: 'system',
+      name: 'dimension',
+      description: 'Points to a dimension attribute column',
+      allowed_node_types: ['source', 'transform'],
+      id: 2,
+    },
+  ];
+
+  const mockDimensions = ['default.contractor', 'default.hard_hat'];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.node.mockReset();
+    mockDjClient.columns.mockReset();
+    mockDjClient.attributes.mockReset();
+    mockDjClient.dimensions.mockReset();
+  });
+
+  it('renders node columns and dimension links', async () => {
+    mockDjClient.node.mockReturnValue(mockNode);
+    mockDjClient.columns.mockReturnValue(mockNodeColumns);
+    mockDjClient.attributes.mockReturnValue(mockAttributes);
+    mockDjClient.dimensions.mockReturnValue(mockDimensions);
+
+    render(<NodeColumnTab node={mockNode} djClient={mockDjClient} />);
+
+    await waitFor(() => {
+      // Displays the columns
+      for (const column of mockNode.columns) {
+        expect(screen.getByText(column.name)).toBeInTheDocument();
+        expect(screen.getByText(column.display_name)).toBeInTheDocument();
+      }
+
+      // Displays the dimension links
+      for (const dimensionLink of mockNode.dimension_links) {
+        const link = screen
+          .getByText(dimensionLink.dimension.name)
+          .closest('a');
+        expect(link).toHaveAttribute(
+          'href',
+          `/nodes/${dimensionLink.dimension.name}`,
+        );
+      }
+    });
+  });
+});

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeDimensionsTab from '../NodeDimensionsTab';
+
+describe('<NodeDimensionsTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    nodeDimensions: jest.fn(),
+  };
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: null,
+    columns: [
+      {
+        name: 'repair_order_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'municipality_id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'hard_hat_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'order_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'required_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'dispatched_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'dispatcher_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  const mockDimensions = [
+    {
+      is_primary_key: false,
+      name: 'default.dispatcher.company_name',
+      node_display_name: 'Default: Dispatcher',
+      node_name: 'default.dispatcher',
+      path: ['default.repair_orders_fact.dispatcher_id'],
+      type: 'string',
+    },
+    {
+      is_primary_key: true,
+      name: 'default.dispatcher.dispatcher_id',
+      node_display_name: 'Default: Dispatcher',
+      node_name: 'default.dispatcher',
+      path: ['default.repair_orders_fact.dispatcher_id'],
+      type: 'int',
+    },
+    {
+      is_primary_key: false,
+      name: 'default.hard_hat.city',
+      node_display_name: 'Default: Hard Hat',
+      node_name: 'default.hard_hat',
+      path: ['default.repair_orders_fact.hard_hat_id'],
+      type: 'string',
+    },
+    {
+      is_primary_key: true,
+      name: 'default.hard_hat.hard_hat_id',
+      node_display_name: 'Default: Hard Hat',
+      node_name: 'default.hard_hat',
+      path: ['default.repair_orders_fact.hard_hat_id'],
+      type: 'int',
+    },
+  ];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.nodeDimensions.mockReset();
+  });
+
+  it('renders nodes with dimensions', async () => {
+    mockDjClient.nodeDimensions.mockReturnValue(mockDimensions);
+    render(<NodeDimensionsTab node={mockNode} djClient={mockDjClient} />);
+    await waitFor(() => {
+      for (const dimension of mockDimensions) {
+        const link = screen.getByText(dimension.node_display_name).closest('a');
+        expect(link).toHaveAttribute('href', `/nodes/${dimension.node_name}`);
+        expect(screen.getByText(dimension.name)).toBeInTheDocument();
+      }
+    });
+  });
+});

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

@@ -68,6 +68,7 @@ describe('<NodePage />', () => {
       query:
         'SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n',
       availability: null,
+      dimension_links: [],
       columns: [
         {
           name: 'default_DOT_avg_repair_price',

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

@@ -46,10 +46,53 @@ exports[`<NodePage /> renders the NodeHistory tab correctly 1`] = `
         Average repair price
       </td>
       <td>
-        SELECT  avg(price) default_DOT_avg_repair_price 
- FROM default.repair_order_details
+        <pre
+          style="display: block; overflow-x: auto; padding: 2rem; background: rgb(238, 238, 238); color: black;"
+        >
+          <code
+            class="language-sql"
+            style="white-space: pre-wrap;"
+          >
+            <span>
+              <span
+                style="color: rgb(0, 153, 153);"
+              >
+                SELECT
+              </span>
+              <span>
+                  
+              </span>
+              <span
+                class="hljs-built_in"
+              >
+                avg
+              </span>
+              <span>
+                (price) default_DOT_avg_repair_price 
+
+              </span>
+            </span>
+            <span>
+              <span>
+                 
+              </span>
+              <span
+                style="color: rgb(0, 153, 153);"
+              >
+                FROM
+              </span>
+              <span>
+                 default.repair_order_details
 
+              </span>
+            </span>
+            <span>
+              
 
+            </span>
+            <span />
+          </code>
+        </pre>
       </td>
       <td />
     </tr>

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

@@ -15,6 +15,7 @@ import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
+import NodeDimensionsTab from "./NodeDimensionsTab";
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
@@ -104,6 +105,11 @@ export function NodePage() {
         name: 'Lineage',
         display: node?.type === 'metric',
       },
+      {
+        id: 8,
+        name: 'Dimensions',
+        display: node?.type !== 'cube',
+      },
     ];
   };
 
@@ -137,6 +143,9 @@ export function NodePage() {
     case 7:
       tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
       break;
+    case 8:
+      tabToDisplay = <NodeDimensionsTab node={node} djClient={djClient} />;
+      break;
     default: /* istanbul ignore next */
       tabToDisplay = <NodeInfoTab node={node} />;
   }

package/src/app/services/DJService.js

@@ -543,6 +543,13 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  nodeDimensions: async function (nodeName) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/${nodeName}/dimensions`, {
+        credentials: 'include',
+      })
+    ).json();
+  },
   linkDimension: async function (nodeName, columnName, dimensionName) {
     const response = await fetch(
       `${DJ_URL}/nodes/${nodeName}/columns/${columnName}?dimension=${dimensionName}`,

package/src/mocks/mockNodes.jsx

@@ -43,6 +43,7 @@ export const mocks = {
     ],
     created_at: '2023-08-21T16:48:56.841631+00:00',
     tags: [{ name: 'purpose', display_name: 'Purpose' }],
+    dimension_links: [],
     dimensions: [
       {
         value: 'default.date_dim.dateint',

package/src/styles/index.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Jost');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Lato');
+@import url('https://fonts.googleapis.com/css?family=Consolas');
 
 body {
   margin: 0;
@@ -1091,3 +1092,18 @@ pre {
 .partitionLink:hover {
   text-decoration: none;
 }
+
+
+.dimensionsList {
+  padding: 12px;
+  opacity: 1;
+  border-radius: 0.5rem;
+  line-height: 1.55rem;
+  font-size: 0.95rem;
+}
+
+.DimensionAttribute {
+  background: #effcff;
+  padding: 5px;
+  font-family: Consolas, serif;
+}