datajunction-ui 0.0.2-0.dev1 → 0.0.2-3.dev1

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'),

package/cleanup-deps.sh

@@ -1,70 +0,0 @@
-#!/bin/bash
-# Cleanup script for removing unused dependencies from DJ UI
-# Run this from datajunction-ui directory
-# NOTE: Preserves webpack build setup for library distribution
-
-set -e  # Exit on error
-
-echo "🧹 Cleaning up unused dependencies..."
-echo "⚠️  Preserving webpack setup for internal library builds"
-echo ""
-
-# Backup package.json
-echo "📦 Creating backup..."
-cp package.json package.json.backup
-echo "✅ Backup created: package.json.backup"
-echo ""
-
-# Remove Redux stack (completely unused)
-echo "🗑️  Removing Redux stack (unused)..."
-yarn remove \
-  @reduxjs/toolkit \
-  redux-saga \
-  redux-injectors \
-  react-redux \
-  @types/react-redux
-
-# Remove i18next stack (no internationalization)
-echo "🗑️  Removing i18next stack (unused)..."
-yarn remove \
-  i18next \
-  i18next-browser-languagedetector \
-  i18next-scanner \
-  react-i18next
-
-# Remove code generation tools (no generators directory)
-echo "🗑️  Removing code generators (unused)..."
-yarn remove \
-  plop \
-  node-plop \
-  inquirer \
-  inquirer-directory
-
-# Remove unused utilities
-echo "🗑️  Removing unused utilities..."
-yarn remove \
-  shelljs \
-  @types/shelljs \
-  rimraf \
-  @types/rimraf \
-  chalk \
-  husky \
-  lint-staged
-
-echo ""
-echo "✅ Cleanup complete!"
-echo ""
-echo "📊 Summary:"
-echo "  - Removed ~19 unused packages"
-echo "  - Kept webpack & datajunction for internal builds"
-echo "  - Cleaned up broken npm scripts"
-echo "  - Updated Node.js requirement to >=18.x"
-echo ""
-echo "🧪 Next steps:"
-echo "  1. Test local dev: yarn start (react-scripts)"
-echo "  2. Test library build: yarn webpack-build (for internal consumption)"
-echo "  3. Run tests: yarn test"
-echo "  4. If everything works, commit changes"
-echo "  5. If issues arise, restore: mv package.json.backup package.json && yarn install"
-echo ""
-

package/runit.sh

@@ -1,30 +0,0 @@
-total=0
-durations=()
-count=100
-
-for i in $(seq 1 $count); do
-  echo "Run $i"
-  start=$(gdate +%s%3N)
-  #  metatron curl -provideE2eToken -a mpdatajunction -X GET 'https://mpdatajunction-test.cluster.us-east-1.test.cloud.netflix.net:7004/sql/measures/v2?metrics=users.yshang.member.total_missing_covariates&metrics=users.yshang.member.overall_streaming_lift&metrics=users.yshang.member.engagement_quality_score&metrics=users.yshang.member.qpd_normalization__35&metrics=users.yshang.member.qpd&dimensions=common.dimensions.xp.allocation_day.account_days_since_allocation&dimensions=common.dimensions.hardware_category.hw_category&dimensions=common.dimensions.xp.allocation_day.account_observation_day&dimensions=common.dimensions.account.account_id&dimensions=common.dimensions.xp.allocation_day.alloc_country_iso_code&dimensions=common.dimensions.xp.ab_test_plan.group_id&dimensions=common.dimensions.xp.ab_test_cell.cell_id&dimensions=member.is_jfk_profile.is_jfk_profile&dimensions=common.dimensions.client_category.client_name&filters=common.dimensions.xp.max_observation_end.max_observation_end+IN+%2835%29&filters=common.dimensions.xp.allocation_snapshot_date.dateint+%3D+20250603&filters=common.dimensions.xp.measure_date.dateint+BETWEEN+20250414+AND+20250605&filters=common.dimensions.xp.ab_test.test_id+IN+%2867486%29&preaggregate=true' > /dev/null 2>&1
-  metatron curl -provideE2eToken -a mpdatajunction -X GET 'https://mpdatajunction-test.cluster.us-east-1.test.cloud.netflix.net:7004/metrics/common/dimensions?metric=member.completed_download_cnt&metric=member.pct_users_who_completed_download' > /dev/null 2>&1
-  end=$(gdate +%s%3N)
-  duration=$((end - start))
-  durations+=($duration)
-  total=$((total + duration))
-done
-
-average=$(echo "scale=2; $total / $count" | bc)
-echo "Average duration: $average ms"
-
-# Compute standard deviation
-sum_squared_diff=0
-for dur in "${durations[@]}"; do
-  diff=$(echo "$dur - $average" | bc)
-  squared_diff=$(echo "$diff * $diff" | bc)
-  sum_squared_diff=$(echo "$sum_squared_diff + $squared_diff" | bc)
-done
-
-variance=$(echo "scale=2; $sum_squared_diff / $count" | bc)
-stddev=$(echo "scale=2; sqrt($variance)" | bc -l)
-echo "Standard deviation: $stddev ms"
-

package/runit2.sh

@@ -1,30 +0,0 @@
-total=0
-durations=()
-count=100
-
-for i in $(seq 1 $count); do
-  echo "Run $i"
-  start=$(gdate +%s%3N)
-  # metatron curl -provideE2eToken -a mpdatajunction -X GET 'https://mpdatajunction-production.cluster.us-east-1.prod.cloud.netflix.net:7004/sql/measures/v2?metrics=users.yshang.member.total_missing_covariates&metrics=users.yshang.member.overall_streaming_lift&metrics=users.yshang.member.engagement_quality_score&metrics=users.yshang.member.qpd_normalization__35&metrics=users.yshang.member.qpd&dimensions=common.dimensions.xp.allocation_day.account_days_since_allocation&dimensions=common.dimensions.hardware_category.hw_category&dimensions=common.dimensions.xp.allocation_day.account_observation_day&dimensions=common.dimensions.account.account_id&dimensions=common.dimensions.xp.allocation_day.alloc_country_iso_code&dimensions=common.dimensions.xp.ab_test_plan.group_id&dimensions=common.dimensions.xp.ab_test_cell.cell_id&dimensions=member.is_jfk_profile.is_jfk_profile&dimensions=common.dimensions.client_category.client_name&filters=common.dimensions.xp.max_observation_end.max_observation_end+IN+%2835%29&filters=common.dimensions.xp.allocation_snapshot_date.dateint+%3D+20250603&filters=common.dimensions.xp.measure_date.dateint+BETWEEN+20250414+AND+20250605&filters=common.dimensions.xp.ab_test.test_id+IN+%2867486%29&preaggregate=true' > /dev/null 2>&1
-  metatron curl -provideE2eToken -a mpdatajunction -X GET 'https://mpdatajunction-production.cluster.us-east-1.prod.cloud.netflix.net:7004/metrics/common/dimensions?metric=member.completed_download_cnt&metric=member.pct_users_who_completed_download' > /dev/null 2>&1
-  end=$(gdate +%s%3N)
-  duration=$((end - start))
-  durations+=($duration)
-  total=$((total + duration))
-done
-
-average=$(echo "scale=2; $total / $count" | bc)
-echo "Average duration: $average ms"
-
-# Compute standard deviation
-sum_squared_diff=0
-for dur in "${durations[@]}"; do
-  diff=$(echo "$dur - $average" | bc)
-  squared_diff=$(echo "$diff * $diff" | bc)
-  sum_squared_diff=$(echo "$sum_squared_diff + $squared_diff" | bc)
-done
-
-variance=$(echo "scale=2; $sum_squared_diff / $count" | bc)
-stddev=$(echo "scale=2; sqrt($variance)" | bc -l)
-echo "Standard deviation: $stddev ms"
-

package/src/app/icons/WrenchIcon.jsx

@@ -1,36 +0,0 @@
-const WrenchIcon = props => (
-  <svg
-    width="16"
-    height="17"
-    viewBox="0 0 16 17"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_24_77)">
-      <rect
-        width="16"
-        height="16"
-        transform="translate(0 0.649803)"
-        fill="white"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M6.41665 5.44985C6.41665 2.8265 8.5433 0.699852 11.1667 0.699852C11.4613 0.699852 11.7504 0.726773 12.0313 0.778484C12.5762 0.878798 12.9364 1.28101 13.0406 1.74377C13.1406 2.18774 13.0066 2.67055 12.6619 3.01531L11.2273 4.44985L12.1667 5.38919L13.6012 3.95465C13.946 3.60989 14.4288 3.47589 14.8728 3.57591C15.3355 3.68017 15.7377 4.04033 15.838 4.58525C15.8898 4.86615 15.9167 5.15519 15.9167 5.44985C15.9167 8.0732 13.79 10.1999 11.1667 10.1999C10.658 10.1999 10.167 10.1196 9.70625 9.97091L3.50172 16.1754C2.94847 16.7287 2.05149 16.7287 1.49825 16.1754L0.441055 15.1183C-0.112189 14.565 -0.112186 13.668 0.441056 13.1148L6.64559 6.91025C6.49685 6.44951 6.41665 5.9585 6.41665 5.44985ZM11.1667 2.19985C9.37172 2.19985 7.91665 3.65492 7.91665 5.44985C7.91665 5.92812 8.01948 6.38034 8.20352 6.7873L8.41725 7.25991L8.05048 7.62667L1.56064 14.1165L2.49998 15.0559L8.98982 8.56601L9.35659 8.19925L9.8292 8.41298C10.2362 8.59702 10.6884 8.69985 11.1667 8.69985C12.9616 8.69985 14.4167 7.24477 14.4167 5.44985C14.4167 5.38796 14.415 5.32654 14.4116 5.26562L12.697 6.98018L12.1667 7.51051L11.6363 6.98018L9.63632 4.98018L9.10599 4.44985L9.63632 3.91952L11.3509 2.20496C11.29 2.20157 11.2286 2.19985 11.1667 2.19985Z"
-        fill="black"
-        fill-opacity="0.9"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_24_77">
-        <rect
-          width="16"
-          height="16"
-          fill="white"
-          transform="translate(0 0.649803)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-);
-export default WrenchIcon;

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

@@ -1,61 +0,0 @@
-/**
- * Component for arbitrary column metadata
- */
-import { ErrorMessage, useFormikContext } from 'formik';
-import { useContext, useMemo, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
-import { FormikSelect } from './FormikSelect';
-
-export const ColumnMetadata = ({ name, label, defaultValue }) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  // Used to pull out current form values for node validation
-  const { values } = useFormikContext();
-
-  // The available columns, determined from validating the node query
-  const [availableColumns, setAvailableColumns] = useState([]);
-  const selectableOptions = useMemo(() => {
-    if (availableColumns && availableColumns.length > 0) {
-      return availableColumns;
-    }
-  }, [availableColumns]);
-
-  // When focus is on the input field, refresh the list of available columns for selection
-  const refreshColumns = event => {
-    async function fetchData() {
-      // eslint-disable-next-line no-unused-vars
-      const { status, json } = await djClient.validateNode(
-        values.type,
-        values.name,
-        values.display_name,
-        values.description,
-        values.query,
-      );
-      setAvailableColumns(
-        json.columns.map(col => {
-          return { value: col.name, label: col.name };
-        }),
-      );
-    }
-    fetchData();
-  };
-
-  return (
-    <div className="NodeCreationInput" style={{ width: '25%' }}>
-      <ErrorMessage name={name} component="span" />
-      <label htmlFor="react-select-3-input">{label}</label>
-      <span data-testid={`select-${name}`}>
-        <FormikSelect
-          className="SelectInput"
-          style={{ width: '100px' }}
-          defaultValue={defaultValue}
-          selectOptions={selectableOptions}
-          formikFieldName={name}
-          //   placeholder={`Choose ${label}`}
-          onFocus={event => refreshColumns(event)}
-          isMulti={false}
-        />
-      </span>
-    </div>
-  );
-};

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

@@ -1,72 +0,0 @@
-/**
- * Column metadata configuration component
- */
-import { ErrorMessage, useFormikContext } from 'formik';
-import { useContext, useMemo, useState, useEffect } from 'react';
-import DJClientContext from '../../providers/djclient';
-import { FormikSelect } from './FormikSelect';
-import WrenchIcon from 'app/icons/WrenchIcon';
-
-export const ColumnsMetadataInput = ({ columns }) => {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-
-  // Used to pull out current form values for node validation
-  const { values } = useFormikContext();
-
-  // The available columns, determined from validating the node query
-  const [availableColumns, setAvailableColumns] = useState([]);
-  const selectableOptions = useMemo(() => {
-    if (availableColumns && availableColumns.length > 0) {
-      return availableColumns;
-    }
-  }, [availableColumns]);
-
-  // When focus is on the primary key field, refresh the list of available
-  // primary key columns for selection
-  useEffect(() => {
-    const fetchData = async () => {
-      // eslint-disable-next-line no-unused-vars
-      const { status, json } = await djClient.validateNode(
-        values.type,
-        values.name,
-        values.display_name,
-        values.description,
-        values.query,
-      );
-      setAvailableColumns(
-        json.columns.map(col => {
-          return { value: col.name, label: col.name };
-        }),
-      );
-    };
-    fetchData().catch(console.error);
-  }, [djClient, name]);
-
-  return (
-    <div
-      className="ColumnsMetadataInput NodeCreationInput"
-      style={{ border: 'dashed 1px #ccc', padding: '20px' }}
-    >
-      <ErrorMessage name="mode" component="span" />
-      <label htmlFor="Mode">Columns Metadata</label>
-      <table>
-        <thead>
-          <tr>
-            <th>Column</th>
-            <th>Metadata</th>
-          </tr>
-        </thead>
-        <tbody>
-          {availableColumns.map(col => (
-            <tr key={col.value}>
-              <td>{col.value}</td>
-              <td>
-                <WrenchIcon />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};