datajunction-ui 0.0.1-a40.dev → 0.0.1-a41

package/package.json

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

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

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

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

@@ -5,8 +5,6 @@ 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([]);
@@ -177,65 +175,26 @@ 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>
-        <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>
-    </>
+    <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>
   );
 }

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

@@ -1,7 +1,4 @@
 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([]);
@@ -178,15 +175,7 @@ export default function NodeHistory({ node, djClient }) {
         </td>
         <td>{revision.display_name}</td>
         <td>{revision.description}</td>
-        <td>
-          <SyntaxHighlighter
-            language="sql"
-            style={foundation}
-            wrapLongLines={true}
-          >
-            {revision.query}
-          </SyntaxHighlighter>
-        </td>
+        <td>{revision.query}</td>
         <td>{revision.tags}</td>
       </tr>
     ));

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

@@ -68,7 +68,6 @@ 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,53 +46,10 @@ exports[`<NodePage /> renders the NodeHistory tab correctly 1`] = `
         Average repair price
       </td>
       <td>
-        <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
+        SELECT  avg(price) default_DOT_avg_repair_price 
+ FROM default.repair_order_details
 
-              </span>
-            </span>
-            <span>
-              
 
-            </span>
-            <span />
-          </code>
-        </pre>
       </td>
       <td />
     </tr>

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

@@ -15,7 +15,6 @@ 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;
@@ -105,11 +104,6 @@ export function NodePage() {
         name: 'Lineage',
         display: node?.type === 'metric',
       },
-      {
-        id: 8,
-        name: 'Dimensions',
-        display: node?.type !== 'cube',
-      },
     ];
   };
 
@@ -143,9 +137,6 @@ 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,13 +543,6 @@ 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,7 +43,6 @@ 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,7 +1,6 @@
 @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;
@@ -1092,18 +1091,3 @@ 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;
-}

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

@@ -1,80 +0,0 @@
-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/__tests__/NodeColumnTab.test.jsx

@@ -1,162 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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();
-      }
-    });
-  });
-});