datajunction-ui 0.0.21 → 0.0.23-dev2

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

@@ -245,7 +245,7 @@
 .notification-meta {
   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'),