datajunction-ui 0.0.1-a41 → 0.0.1-a42

package/package.json

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

package/src/app/components/djgraph/Collapse.jsx

@@ -5,6 +5,7 @@ import { DJNodeColumns } from './DJNodeColumns';
 export default function Collapse({ collapsed, text, data }) {
   const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
 
+  const limit = 5;
   return (
     <>
       <div className="collapse">
@@ -26,11 +27,11 @@ export default function Collapse({ collapsed, text, data }) {
         >
           {data.type !== 'metric'
             ? isCollapsed
-              ? DJNodeColumns({ data: data, limit: 10 })
+              ? DJNodeColumns({ data: data, limit: limit })
               : DJNodeColumns({ data: data, limit: 100 })
             : DJNodeDimensions(data)}
         </div>
-        {data.type !== 'metric' && data.column_names.length > 10 ? (
+        {data.type !== 'metric' && data.column_names.length > limit ? (
           <button
             className="collapse-button"
             onClick={() => setIsCollapsed(!isCollapsed)}

package/src/app/components/djgraph/DJNodeColumns.jsx

@@ -33,7 +33,11 @@ export function DJNodeColumns({ data, limit }) {
   };
   return data.column_names.slice(0, limit).map(col => (
     <div
-      className={'custom-node-subheader node_type__' + data.type}
+      className={
+        'custom-node-subheader node_type__' +
+        data.type +
+        (col.order <= 0 ? ' custom-node-emphasis' : '')
+      }
       key={`${data.name}.${col.name}`}
     >
       <div style={handleWrapperStyle}>

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -32,8 +32,10 @@ const getLayoutedElements = (
   const nodeHeightTracker = {};
 
   nodes.forEach(node => {
-    nodeHeightTracker[node.id] =
-      Math.min(node.data.column_names.length, 10) * 40 + 250;
+    const minColumnsLength = node.data.column_names.filter(
+      col => col.order > 0,
+    ).length;
+    nodeHeightTracker[node.id] = Math.min(minColumnsLength, 5) * 40 + 250;
     dagreGraph.setNode(node.id, {
       width: nodeWidth,
       height: nodeHeightTracker[node.id],
@@ -52,7 +54,7 @@ const getLayoutedElements = (
     node.sourcePosition = isHorizontal ? 'right' : 'bottom';
     node.position = {
       x: nodeWithPosition.x - nodeWidth / 2,
-      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 2,
+      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 3,
     };
     node.width = nodeWidth;
     node.height = nodeHeightTracker[node.id];

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',
-        [{ display_name: 'Purpose', name: 'purpose' }],
+        ['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',
-        [{ display_name: 'Purpose', name: 'purpose' }],
+        ['purpose'],
       );
 
       expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(

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

@@ -214,6 +214,11 @@ export function AddEditNodePage() {
     fields.forEach(field => {
       if (field === 'primary_key') {
         setFieldValue(field, primaryKey.join(', '));
+      } else if (field === 'tags') {
+        setFieldValue(
+          field,
+          data[field].map(tag => tag.name),
+        );
       } else {
         setFieldValue(field, data[field] || '', false);
       }

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/NodeGraphTab.jsx

@@ -15,9 +15,20 @@ const NodeLineage = djNode => {
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
       )
       .map(col => col.name);
-    const column_names = node.columns.map(col => {
-      return { name: col.name, type: col.type };
-    });
+    const column_names = node.columns
+      .map(col => {
+        return {
+          name: col.name,
+          type: col.type,
+          dimension: col.dimension !== null ? col.dimension.name : null,
+          order: primary_key.includes(col.name)
+            ? -1
+            : col.dimension !== null
+            ? 0
+            : 1,
+        };
+      })
+      .sort((a, b) => a.order - b.order);
     return {
       id: String(node.name),
       type: 'DJNode',

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/dag.css

@@ -208,10 +208,12 @@
 }
 .custom-node-port {
   color: #636776;
-  font-size: 20px;
+  font-size: 23px;
   text-align: center;
 }
-
+.custom-node-emphasis {
+  border: 2px dashed #636776;
+}
 .white_badge {
   background-color: #ffffff !important;
   display: inline-block;

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,17 @@ 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;
+}