datajunction-ui 0.0.20 → 0.0.22

package/package.json

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

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

@@ -4,53 +4,51 @@ 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);
+  const [upstreams, setUpstreams] = useState(null);
+  const [downstreams, setDownstreams] = useState(null);
+  const [dimensions, setDimensions] = useState(null);
 
   useEffect(() => {
-    const fetchData = async () => {
-      if (node) {
-        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);
+    if (node) {
+      // Reset state when node changes
+      setUpstreams(null);
+      setDownstreams(null);
+      setDimensions(null);
+
+      // Load all three in parallel, display each as it loads
+      djClient.upstreamsGQL(node.name).then(setUpstreams).catch(console.error);
+      djClient
+        .downstreamsGQL(node.name)
+        .then(setDownstreams)
+        .catch(console.error);
+      djClient
+        .nodeDimensions(node.name)
+        .then(setDimensions)
+        .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} />
+      {upstreams !== null ? (
+        <NodeList nodes={upstreams} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Downstreams</h2>
-      {retrieved ? (
-        <NodeList nodes={nodeDAG.downstreams} />
+      {downstreams !== null ? (
+        <NodeList nodes={downstreams} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
         </span>
       )}
       <h2>Dimensions</h2>
-      {retrieved ? (
-        <NodeDimensionsList rawDimensions={nodeDAG.dimensions} />
+      {dimensions !== null ? (
+        <NodeDimensionsList rawDimensions={dimensions} />
       ) : (
         <span style={{ display: 'block' }}>
           <LoadingIcon centered={false} />
@@ -128,24 +126,28 @@ export function NodeDimensionsList({ rawDimensions }) {
 export function NodeList({ nodes }) {
   return nodes && nodes.length > 0 ? (
     <ul className="backfills">
-      {nodes?.map(node => (
-        <li
-          className="backfill"
-          style={{ marginBottom: '5px' }}
-          key={node.name}
-        >
-          <span
-            className={`node_type__${node.type} badge node_type`}
-            style={{ marginRight: '5px' }}
-            role="dialog"
-            aria-hidden="false"
-            aria-label="NodeType"
+      {nodes?.map(node => {
+        // GraphQL returns uppercase types (e.g., "SOURCE"), CSS classes expect lowercase
+        const nodeType = node.type?.toLowerCase() || '';
+        return (
+          <li
+            className="backfill"
+            style={{ marginBottom: '5px' }}
+            key={node.name}
           >
-            {node.type}
-          </span>
-          <a href={`/nodes/${node.name}`}>{node.name}</a>
-        </li>
-      ))}
+            <span
+              className={`node_type__${nodeType} badge node_type`}
+              style={{ marginRight: '5px' }}
+              role="dialog"
+              aria-hidden="false"
+              aria-label="NodeType"
+            >
+              {nodeType}
+            </span>
+            <a href={`/nodes/${node.name}`}>{node.name}</a>
+          </li>
+        );
+      })}
     </ul>
   ) : (
     <span style={{ display: 'block' }}>None</span>

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

@@ -6,8 +6,8 @@ describe('<NodeDependenciesTab />', () => {
   const mockDjClient = {
     node: jest.fn(),
     nodeDimensions: jest.fn(),
-    upstreams: jest.fn(),
-    downstreams: jest.fn(),
+    upstreamsGQL: jest.fn(),
+    downstreamsGQL: jest.fn(),
   };
 
   const mockNode = {
@@ -131,14 +131,20 @@ describe('<NodeDependenciesTab />', () => {
   beforeEach(() => {
     // Reset the mocks before each test
     mockDjClient.nodeDimensions.mockReset();
-    mockDjClient.upstreams.mockReset();
-    mockDjClient.downstreams.mockReset();
+    mockDjClient.upstreamsGQL.mockReset();
+    mockDjClient.downstreamsGQL.mockReset();
   });
 
   it('renders nodes with dimensions', async () => {
-    mockDjClient.nodeDimensions.mockReturnValue(mockDimensions);
-    mockDjClient.upstreams.mockReturnValue([mockNode]);
-    mockDjClient.downstreams.mockReturnValue([mockNode]);
+    // Use mockResolvedValue since the component now uses .then()
+    mockDjClient.nodeDimensions.mockResolvedValue(mockDimensions);
+    // GraphQL responses return uppercase types (e.g., "SOURCE")
+    mockDjClient.upstreamsGQL.mockResolvedValue([
+      { name: mockNode.name, type: 'SOURCE' },
+    ]);
+    mockDjClient.downstreamsGQL.mockResolvedValue([
+      { name: mockNode.name, type: 'SOURCE' },
+    ]);
     render(<NodeDependenciesTab node={mockNode} djClient={mockDjClient} />);
     await waitFor(() => {
       for (const dimension of mockDimensions) {

package/src/app/services/DJService.js

@@ -690,6 +690,49 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  // GraphQL-based upstream/downstream queries - more efficient as they only fetch needed fields
+  upstreamsGQL: async function (nodeNames) {
+    const names = Array.isArray(nodeNames) ? nodeNames : [nodeNames];
+    const query = `
+      query GetUpstreamNodes($nodeNames: [String!]!) {
+        upstreamNodes(nodeNames: $nodeNames) {
+          name
+          type
+        }
+      }
+    `;
+    const results = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ query, variables: { nodeNames: names } }),
+      })
+    ).json();
+    return results.data?.upstreamNodes || [];
+  },
+
+  downstreamsGQL: async function (nodeNames) {
+    const names = Array.isArray(nodeNames) ? nodeNames : [nodeNames];
+    const query = `
+      query GetDownstreamNodes($nodeNames: [String!]!) {
+        downstreamNodes(nodeNames: $nodeNames) {
+          name
+          type
+        }
+      }
+    `;
+    const results = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ query, variables: { nodeNames: names } }),
+      })
+    ).json();
+    return results.data?.downstreamNodes || [];
+  },
+
   node_dag: async function (name) {
     return await (
       await fetch(`${DJ_URL}/nodes/${name}/dag/`, {

package/src/app/services/__tests__/DJService.test.jsx

@@ -324,6 +324,82 @@ describe('DataJunctionAPI', () => {
     );
   });
 
+  it('calls upstreamsGQL correctly with single node', async () => {
+    const nodeName = 'sampleNode';
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        data: { upstreamNodes: [{ name: 'upstream1', type: 'SOURCE' }] },
+      }),
+    );
+    const result = await DataJunctionAPI.upstreamsGQL(nodeName);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/graphql`,
+      expect.objectContaining({
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    );
+    expect(result).toEqual([{ name: 'upstream1', type: 'SOURCE' }]);
+  });
+
+  it('calls upstreamsGQL correctly with multiple nodes', async () => {
+    const nodeNames = ['node1', 'node2'];
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        data: {
+          upstreamNodes: [
+            { name: 'upstream1', type: 'SOURCE' },
+            { name: 'upstream2', type: 'TRANSFORM' },
+          ],
+        },
+      }),
+    );
+    const result = await DataJunctionAPI.upstreamsGQL(nodeNames);
+    expect(result).toEqual([
+      { name: 'upstream1', type: 'SOURCE' },
+      { name: 'upstream2', type: 'TRANSFORM' },
+    ]);
+  });
+
+  it('calls downstreamsGQL correctly with single node', async () => {
+    const nodeName = 'sampleNode';
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        data: { downstreamNodes: [{ name: 'downstream1', type: 'METRIC' }] },
+      }),
+    );
+    const result = await DataJunctionAPI.downstreamsGQL(nodeName);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/graphql`,
+      expect.objectContaining({
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    );
+    expect(result).toEqual([{ name: 'downstream1', type: 'METRIC' }]);
+  });
+
+  it('calls downstreamsGQL correctly with multiple nodes', async () => {
+    const nodeNames = ['node1', 'node2'];
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        data: {
+          downstreamNodes: [
+            { name: 'downstream1', type: 'METRIC' },
+            { name: 'downstream2', type: 'CUBE' },
+          ],
+        },
+      }),
+    );
+    const result = await DataJunctionAPI.downstreamsGQL(nodeNames);
+    expect(result).toEqual([
+      { name: 'downstream1', type: 'METRIC' },
+      { name: 'downstream2', type: 'CUBE' },
+    ]);
+  });
+
   it('calls node_dag correctly', async () => {
     const nodeName = 'sampleNode';
     fetch.mockResponseOnce(JSON.stringify({}));

package/src/styles/nav-bar.css

@@ -135,7 +135,7 @@
 
 /* Notifications menu */
 .notifications-menu {
-  min-width: 240px;
+  min-width: 340px;
   max-width: 600px;
   padding: 0;
 }
@@ -221,7 +221,7 @@
 }
 
 .notification-title {
-  font-size: 13px;
+  font-size: 15px;
   color: #333;
   font-weight: 500;
   display: flex;
@@ -230,7 +230,7 @@
 }
 
 .notification-entity {
-  font-size: 11px;
+  font-size: 13px;
 }
 
 .notification-title .badge.version {
@@ -243,9 +243,9 @@
 }
 
 .notification-meta {
-  font-size: 11px;
+  font-size: 13px;
   color: #999;
-  display: flex;
+  display: block;
   align-items: center;
   gap: 0.35rem;
 }

package/webpack.config.js

@@ -10,6 +10,8 @@ var babelOptions = {
   presets: ['@babel/preset-react'],
 };
 
+const isProduction = process.env.NODE_ENV === 'production';
+
 module.exports = {
   cache: true,
   entry: {
@@ -17,7 +19,7 @@ module.exports = {
     vendor: ['events', 'react', 'react-dom'],
   },
   target: 'web',
-  mode: 'development',
+  mode: isProduction ? 'production' : 'development',
   stats: 'minimal',
   output: {
     path: path.resolve(__dirname, './dist'),