datajunction-ui 0.0.1-a49 → 0.0.1-a50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a49",
+  "version": "0.0.1a50",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -164,7 +164,7 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 89,
+        "statements": 87,
         "branches": 75,
         "lines": 80,
         "functions": 85

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

@@ -33,14 +33,7 @@ export default function DimensionFilter({ dimension, onChange }) {
             )
             .map(col => col.name);
 
-        // TODO: we're disabling this for now because it's unclear how performant the dimensions node
-        // data endpoints are. To re-enable, uncomment the following line:
-        // const data = await djClient.nodeData(dimension.metadata.node_name);
-        const data = { results: [] };
-
-        // TODO: when the above is enabled, this will use each dimension node's 'Label' column
-        // to build the display label for the dropdown, while continuing to pass the primary
-        // key in for filtering
+        const data = await djClient.nodeData(dimension.metadata.node_name);
         /* istanbul ignore if */
         if (dimensionNode && data.results && data.results.length > 0) {
           const columnNames = data.results[0].columns.map(

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

@@ -1,10 +1,11 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import DJClientContext from '../../providers/djclient';
-import { Form, Formik } from 'formik';
+import { Field, Form, Formik } from 'formik';
 import { FormikSelect } from '../AddEditNodePage/FormikSelect';
 import EditIcon from '../../icons/EditIcon';
 import { displayMessageAfterSubmit } from '../../../utils/form';
+import LoadingIcon from '../../icons/LoadingIcon';
 
 export default function LinkDimensionPopover({
   column,
@@ -35,11 +36,17 @@ export default function LinkDimensionPopover({
     { node, column, dimension },
     { setSubmitting, setStatus },
   ) => {
-    setSubmitting(false);
     if (referencedDimensionNode && dimension === 'Remove') {
-      await unlinkDimension(node, column, referencedDimensionNode, setStatus);
+      await unlinkDimension(
+        node,
+        column,
+        referencedDimensionNode,
+        setStatus,
+      ).then(_ => setSubmitting(false));
     } else {
-      await linkDimension(node, column, dimension, setStatus);
+      await linkDimension(node, column, dimension, setStatus).then(_ =>
+        setSubmitting(false),
+      );
     }
     onSubmit();
   };
@@ -137,8 +144,9 @@ export default function LinkDimensionPopover({
                   type="submit"
                   aria-label="SaveLinkDimension"
                   aria-hidden="false"
+                  disabled={isSubmitting}
                 >
-                  Save
+                  {isSubmitting ? <LoadingIcon /> : 'Save'}
                 </button>
               </Form>
             );

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

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import ClientCodePopover from './ClientCodePopover';
 import * as React from 'react';
 import EditColumnPopover from './EditColumnPopover';
 import LinkDimensionPopover from './LinkDimensionPopover';
@@ -35,8 +34,11 @@ export default function NodeColumnTab({ node, djClient }) {
   useEffect(() => {
     const fetchData = async () => {
       const dimensions = await djClient.dimensions();
-      const options = dimensions.map(name => {
-        return { value: name, label: name };
+      const options = dimensions.map(dim => {
+        return {
+          value: dim.name,
+          label: `${dim.name} (${dim.indegree} links)`,
+        };
       });
       setDimensions(options);
     };

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

@@ -74,6 +74,17 @@ export default function NodeHistory({ node, djClient }) {
         </div>
       );
     }
+    if (event.activity_type === 'refresh') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
     if (event.activity_type === 'update' && event.entity_type === 'node') {
       return (
         <div className="history-left">

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

@@ -93,26 +93,31 @@ export default function NodeValidateTab({ node, djClient }) {
     const sse = await djClient.streamNodeData(node?.name, selection);
     sse.onmessage = e => {
       const messageData = JSON.parse(JSON.parse(e.data));
+      if (
+        messageData !== null &&
+        messageData?.state !== 'FINISHED' &&
+        messageData?.state !== 'CANCELED' &&
+        messageData?.state !== 'FAILED'
+      ) {
+        setRunning(false);
+      }
       if (messageData.results && messageData.results?.length > 0) {
         messageData.numRows = messageData.results?.length
           ? messageData.results[0].rows.length
           : [];
         switchTab('results');
+        setRunning(false);
       } else {
         switchTab('info');
       }
       setQueryInfo(messageData);
     };
     sse.onerror = () => sse.close();
-    setRunning(false);
   };
 
   // Handle form submission (runs the query)
   const handleSubmit = async (values, { setSubmitting, setStatus }) => {
-    await runQuery(values, setStatus, setSubmitting).then(_ => {
-      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-      setSubmitting(false);
-    });
+    await runQuery(values, setStatus, setSubmitting);
   };
 
   // Handle when filter values are updated. This is available for all nodes.
@@ -245,15 +250,7 @@ export default function NodeValidateTab({ node, djClient }) {
                   className="button-3 execute-button"
                   style={{ marginTop: '1rem' }}
                 >
-                  {running ||
-                  (queryInfo !== null &&
-                    queryInfo?.state !== 'FINISHED' &&
-                    queryInfo?.state !== 'CANCELED' &&
-                    queryInfo?.state !== 'FAILED') ? (
-                    <LoadingIcon />
-                  ) : (
-                    '► Run'
-                  )}
+                  {isSubmitting || running === true ? <LoadingIcon /> : '► Run'}
                 </button>
               </div>
               <div

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

@@ -58,7 +58,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('Dimension 1'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect linkDimension to be called
     await waitFor(() => {
@@ -74,7 +73,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('[Remove dimension link]'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect unlinkDimension to be called
     await waitFor(() => {
@@ -133,7 +131,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('Dimension 1'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect linkDimension to be called
     await waitFor(() => {
@@ -151,7 +148,6 @@ describe('<LinkDimensionPopover />', () => {
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('[Remove Dimension]'));
     fireEvent.click(getByText('Save'));
-    getByText('Save').click();
 
     // Expect unlinkDimension to be called
     await waitFor(() => {

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/__tests__/NodePage.test.jsx

@@ -706,9 +706,11 @@ describe('<NodePage />', () => {
       expect(screen.getByText('Add Filters')).toBeInTheDocument();
       expect(screen.getByText('Generated Query')).toBeInTheDocument();
       expect(screen.getByText('Results')).toBeInTheDocument();
+    });
+    // Click on the 'Validate' tab
+    fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
 
-      // Click on the 'Validate' tab
-      fireEvent.click(screen.getByRole('button', { name: '► Validate' }));
+    await waitFor(() => {
       expect(djClient.DataJunctionAPI.node).toHaveBeenCalledWith(
         mocks.mockMetricNode.name,
       );
@@ -719,35 +721,41 @@ describe('<NodePage />', () => {
       expect(djClient.DataJunctionAPI.nodeDimensions).toHaveBeenCalledWith(
         mocks.mockMetricNode.name,
       );
+    });
 
-      // Click on 'Run' to run the node query
-      const runButton = screen.getByText('► Run');
-      fireEvent.click(runButton);
+    // Click on 'Run' to run the node query
+    const runButton = screen.getByText('► Run');
+    fireEvent.click(runButton);
 
+    await waitFor(() => {
       expect(djClient.DataJunctionAPI.streamNodeData).toHaveBeenCalledWith(
         mocks.mockMetricNode.name,
         { dimensions: [], filters: [] },
       );
       expect(streamNodeData.onmessage).toBeDefined();
       expect(streamNodeData.onerror).toBeDefined();
+    });
 
-      const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
-      const resultsTab = screen.getByText('Results');
+    const infoTab = screen.getByRole('button', { name: 'QueryInfo' });
+    const resultsTab = screen.getByText('Results');
 
-      // Initially, the Results tab should be active
-      expect(resultsTab).toHaveClass('active');
-      expect(infoTab).not.toHaveClass('active');
+    // Initially, the Results tab should be active
+    expect(resultsTab).toHaveClass('active');
+    expect(infoTab).not.toHaveClass('active');
 
-      // Click on the Info tab first
-      fireEvent.click(infoTab);
+    // Click on the Info tab first
+    fireEvent.click(infoTab);
 
+    await waitFor(() => {
       // Now, the Info tab should be active
       expect(infoTab).toHaveClass('active');
       expect(resultsTab).not.toHaveClass('active');
+    });
 
-      // Click on the Results tab
-      fireEvent.click(resultsTab);
+    // Click on the Results tab
+    fireEvent.click(resultsTab);
 
+    await waitFor(() => {
       // Now, the Results tab should be active again
       expect(resultsTab).toHaveClass('active');
       expect(infoTab).not.toHaveClass('active');

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