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

package/package.json

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

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

@@ -0,0 +1,147 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { labelize } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
+
+export default function NodeDependenciesTab({ node, djClient }) {
+  const [nodeDAG, setNodeDAG] = useState({
+    upstreams: [],
+    downstreams: [],
+    dimensions: [],
+  });
+
+  const [retrieved, setRetrieved] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let upstreams = await djClient.upstreams(node.name);
+      let downstreams = await djClient.downstreams(node.name);
+      let dimensions = await djClient.nodeDimensions(node.name);
+      setNodeDAG({
+        upstreams: upstreams,
+        downstreams: downstreams,
+        dimensions: dimensions,
+      });
+      setRetrieved(true);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, node]);
+
+  // Builds the block of dimensions selectors, grouped by node name + path
+  return (
+    <div>
+      <h2>Upstreams</h2>
+      {retrieved ? (
+        <NodeList nodes={nodeDAG.upstreams} />
+      ) : (
+        <span style={{ display: 'inline-block' }}>
+          <LoadingIcon />
+        </span>
+      )}
+      <h2>Downstreams</h2>
+      {retrieved ? (
+        <NodeList nodes={nodeDAG.downstreams} />
+      ) : (
+        <span style={{ display: 'inline-block' }}>
+          <LoadingIcon />
+        </span>
+      )}
+      <h2>Dimensions</h2>
+      {retrieved ? (
+        <NodeDimensionsList rawDimensions={nodeDAG.dimensions} />
+      ) : (
+        <span style={{ display: 'inline-block' }}>
+          <LoadingIcon />
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function NodeDimensionsList({ rawDimensions }) {
+  const dimensions = Object.entries(
+    rawDimensions.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;
+    }, {}),
+  );
+  return (
+    <div style={{ padding: '0.5rem' }}>
+      {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 = (
+          <span
+            style={{
+              fontWeight: 'normal',
+              marginBottom: '15px',
+              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>
+          </span>
+        );
+        const dimensionGroupOptions = dimensionsInGroup.map(dim => {
+          return {
+            value: dim.name,
+            label:
+              labelize(dim.name.split('.').slice(-1)[0]) +
+              (dim.is_primary_key ? ' (PK)' : ''),
+          };
+        });
+        return (
+          <details>
+            <summary style={{ marginBottom: '10px' }}>{groupHeader}</summary>
+            <div className="dimensionsList">
+              {dimensionGroupOptions.map(dimension => {
+                return (
+                  <div>
+                    {dimension.label.split('[').slice(0)[0]} ⇢{' '}
+                    <code className="DimensionAttribute">
+                      {dimension.value}
+                    </code>
+                  </div>
+                );
+              })}
+            </div>
+          </details>
+        );
+      })}
+    </div>
+  );
+}
+
+export function NodeList({ nodes }) {
+  return nodes && nodes.length > 0 ? (
+    <ul className="backfills">
+      {nodes?.map(node => (
+        <li className="backfill" style={{ marginBottom: '5px' }}>
+          <span
+            className={`node_type__${node.type} badge node_type`}
+            style={{ marginRight: '5px' }}
+            role="dialog"
+            aria-hidden="false"
+            aria-label="NodeType"
+          >
+            {node.type}
+          </span>
+          <a href={`/nodes/${node.name}`}>{node.name}</a>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <span style={{ display: 'inline-block' }}>None</span>
+  );
+}

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

@@ -6,7 +6,7 @@ import 'reactflow/dist/style.css';
 import DJClientContext from '../../providers/djclient';
 import LayoutFlow from '../../components/djgraph/LayoutFlow';
 
-const NodeLineage = djNode => {
+const NodeGraphTab = djNode => {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
   const createNode = node => {
@@ -134,4 +134,4 @@ const NodeLineage = djNode => {
   };
   return LayoutFlow(djNode, dagFetch);
 };
-export default NodeLineage;
+export default NodeGraphTab;

package/src/app/pages/NodePage/__tests__/{NodeDimensionsTab.test.jsx → NodeDependenciesTab.test.jsx}

@@ -1,11 +1,13 @@
 import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
-import NodeDimensionsTab from '../NodeDimensionsTab';
+import NodeDependenciesTab from '../NodeDependenciesTab';
 
-describe('<NodeDimensionsTab />', () => {
+describe('<NodeDependenciesTab />', () => {
   const mockDjClient = {
     node: jest.fn(),
     nodeDimensions: jest.fn(),
+    upstreams: jest.fn(),
+    downstreams: jest.fn(),
   };
 
   const mockNode = {
@@ -129,11 +131,15 @@ describe('<NodeDimensionsTab />', () => {
   beforeEach(() => {
     // Reset the mocks before each test
     mockDjClient.nodeDimensions.mockReset();
+    mockDjClient.upstreams.mockReset();
+    mockDjClient.downstreams.mockReset();
   });
 
   it('renders nodes with dimensions', async () => {
     mockDjClient.nodeDimensions.mockReturnValue(mockDimensions);
-    render(<NodeDimensionsTab node={mockNode} djClient={mockDjClient} />);
+    mockDjClient.upstreams.mockReturnValue([mockNode]);
+    mockDjClient.downstreams.mockReturnValue([mockNode]);
+    render(<NodeDependenciesTab node={mockNode} djClient={mockDjClient} />);
     await waitFor(() => {
       for (const dimension of mockDimensions) {
         const link = screen.getByText(dimension.node_display_name).closest('a');

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import NodeLineage from '../NodeGraphTab';
+import NodeGraphTab from '../NodeGraphTab';
 import DJClientContext from '../../../providers/djclient';
 
 describe('<NodeLineage />', () => {
@@ -564,7 +564,7 @@ describe('<NodeLineage />', () => {
     // const layoutFlowMock = jest.spyOn(LayoutFlow);
     const { container } = render(
       <DJClientContext.Provider value={djClient}>
-        <NodeLineage {...defaultProps} />
+        <NodeGraphTab {...defaultProps} />
       </DJClientContext.Provider>,
     );
 

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

@@ -5,7 +5,7 @@ import Tab from '../../components/Tab';
 import NamespaceHeader from '../../components/NamespaceHeader';
 import NodeInfoTab from './NodeInfoTab';
 import NodeColumnTab from './NodeColumnTab';
-import NodeLineage from './NodeGraphTab';
+import NodeGraphTab from './NodeGraphTab';
 import NodeHistory from './NodeHistory';
 import DJClientContext from '../../providers/djclient';
 import NodeValidateTab from './NodeValidateTab';
@@ -15,7 +15,7 @@ import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
-import NodeDimensionsTab from './NodeDimensionsTab';
+import NodeDependenciesTab from './NodeDependenciesTab';
 import { useNavigate } from 'react-router-dom';
 
 export function NodePage() {
@@ -112,8 +112,8 @@ export function NodePage() {
         display: node?.type === 'metric',
       },
       {
-        id: 'dimensions',
-        name: 'Dimensions',
+        id: 'dependencies',
+        name: 'Dependencies',
         display: node?.type !== 'cube',
       },
     ];
@@ -129,7 +129,7 @@ export function NodePage() {
       tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
       break;
     case 'graph':
-      tabToDisplay = <NodeLineage djNode={node} djClient={djClient} />;
+      tabToDisplay = <NodeGraphTab djNode={node} djClient={djClient} />;
       break;
     case 'history':
       tabToDisplay = <NodeHistory node={node} djClient={djClient} />;
@@ -146,8 +146,8 @@ export function NodePage() {
     case 'lineage':
       tabToDisplay = <NodeColumnLineage djNode={node} djClient={djClient} />;
       break;
-    case 'dimensions':
-      tabToDisplay = <NodeDimensionsTab node={node} djClient={djClient} />;
+    case 'dependencies':
+      tabToDisplay = <NodeDependenciesTab node={node} djClient={djClient} />;
       break;
     default: /* istanbul ignore next */
       tabToDisplay = <NodeInfoTab node={node} />;

package/src/styles/loading.css

@@ -13,7 +13,7 @@
   border: 8px solid #fff;
   border-radius: 50%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
+  border-color: #bfbfbf transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
   animation-delay: -0.45s;

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>
-  );
-}