datajunction-ui 0.0.1-a93 → 0.0.1-a95

package/package.json

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

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

@@ -24,11 +24,17 @@ export const MetricMetadataFields = () => {
   }, [djClient]);
 
   return (
-    <>
-      <div
-        className="MetricDirectionInput NodeCreationInput"
-        style={{ width: '25%' }}
-      >
+    <div
+      style={{
+        borderRadius: '8px',
+        padding: '10px 10px 20px 10px',
+        margin: '32px 0',
+        background: '#f9f9f9',
+        width: 'max-content',
+        display: 'flex',
+      }}
+    >
+      <div style={{ margin: '15px 25px' }}>
         <ErrorMessage name="metric_direction" component="span" />
         <label htmlFor="MetricDirection">Metric Direction</label>
         <Field as="select" name="metric_direction" id="MetricDirection">
@@ -40,10 +46,7 @@ export const MetricMetadataFields = () => {
           ))}
         </Field>
       </div>
-      <div
-        className="MetricUnitInput NodeCreationInput"
-        style={{ width: '25%' }}
-      >
+      <div style={{ margin: '15px 25px' }}>
         <ErrorMessage name="metric_unit" component="span" />
         <label htmlFor="MetricUnit">Metric Unit</label>
         <Field as="select" name="metric_unit" id="MetricUnit">
@@ -55,6 +58,18 @@ export const MetricMetadataFields = () => {
           ))}
         </Field>
       </div>
-    </>
+      <div style={{ margin: '15px 25px' }}>
+        <ErrorMessage name="significant_digits" component="span" />
+        <label htmlFor="SignificantDigits">Significant Digits</label>
+        <Field as="select" name="significant_digits" id="SignificantDigits">
+          <option value=""></option>
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(val => (
+            <option value={val} key={val}>
+              {val}
+            </option>
+          ))}
+        </Field>
+      </div>
+    </div>
   );
 };

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -67,7 +67,9 @@ describe('AddEditNodePage submission failed', () => {
 
   it('for editing a node', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
     mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
       status: 500,
       json: { message: 'Update failed' },

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -152,7 +152,9 @@ describe('AddEditNodePage submission succeeded', () => {
   it('for editing a transform or dimension node', async () => {
     const mockDjClient = initializeMockDJClient();
 
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockTransformNode);
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetTransformNode,
+    );
     mockDjClient.DataJunctionAPI.patchNode = jest.fn();
     mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
       status: 201,
@@ -189,8 +191,9 @@ describe('AddEditNodePage submission succeeded', () => {
         'SELECT repair_order_id, municipality_id, hard_hat_id, dispatcher_id FROM default.repair_orders',
         'published',
         [],
-        undefined,
-        undefined,
+        '',
+        '',
+        '',
         undefined,
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
@@ -211,8 +214,9 @@ describe('AddEditNodePage submission succeeded', () => {
   it('for editing a metric node', async () => {
     const mockDjClient = initializeMockDJClient();
 
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
-    mockDjClient.DataJunctionAPI.metric.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
     mockDjClient.DataJunctionAPI.patchNode = jest.fn();
     mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
       status: 201,
@@ -248,9 +252,10 @@ describe('AddEditNodePage submission succeeded', () => {
         'Number of repair orders!!!',
         'SELECT count(repair_order_id) FROM default.repair_orders',
         'published',
-        [],
+        ['repair_order_id', 'country'],
         'neutral',
         'unitless',
+        5,
         undefined,
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);

package/src/app/pages/AddEditNodePage/__tests__/index.test.jsx

@@ -35,6 +35,7 @@ export const initializeMockDJClient = () => {
         ];
       },
       metrics: {},
+      getNodeForEditing: jest.fn(),
       namespaces: () => {
         return [
           {
@@ -146,7 +147,9 @@ describe('AddEditNodePage', () => {
 
   it('Edit node page renders with the selected node', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
 
     const element = testElement(mockDjClient);
     renderEditNode(element);
@@ -175,17 +178,12 @@ describe('AddEditNodePage', () => {
 
   it('Verify edit page node not found', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node = jest.fn();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue({
-      message: 'A node with name `default.num_repair_orders` does not exist.',
-      errors: [],
-      warnings: [],
-    });
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(null);
     const element = testElement(mockDjClient);
     renderEditNode(element);
 
     await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.getNodeForEditing).toBeCalledTimes(1);
       expect(
         screen.getByText('Node default.num_repair_orders does not exist!'),
       ).toBeInTheDocument();
@@ -194,18 +192,14 @@ describe('AddEditNodePage', () => {
 
   it('Verify only transforms, metrics, and dimensions can be edited', async () => {
     const mockDjClient = initializeMockDJClient();
-    mockDjClient.DataJunctionAPI.node = jest.fn();
-    mockDjClient.DataJunctionAPI.node.mockReturnValue({
-      namespace: 'default',
-      type: 'source',
-      name: 'default.repair_orders',
-      display_name: 'Default: Repair Orders',
-    });
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetSourceNode,
+    );
     const element = testElement(mockDjClient);
     renderEditNode(element);
 
     await waitFor(() => {
-      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.getNodeForEditing).toBeCalledTimes(1);
       expect(
         screen.getByText(
           'Node default.num_repair_orders is of type source and cannot be edited',

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

@@ -152,6 +152,7 @@ export function AddEditNodePage({ extensions = {} }) {
       values.primary_key ? primaryKeyToList(values.primary_key) : null,
       values.metric_direction,
       values.metric_unit,
+      values.significant_digits,
       values.required_dimensions,
     );
     const tagsResponse = await djClient.tagsNode(
@@ -187,26 +188,35 @@ export function AddEditNodePage({ extensions = {} }) {
   };
 
   const getExistingNodeData = async name => {
-    const data = await djClient.node(name);
-    if (data.type === 'metric') {
-      const metric = await djClient.metric(name);
-      data.upstream_node = metric.upstream_node;
-      data.expression = metric.expression;
-      data.required_dimensions = metric.required_dimensions;
+    const node = await djClient.getNodeForEditing(name);
+    if (node === null) {
+      return { message: `Node ${name} does not exist` };
     }
-    return data;
-  };
+    const baseData = {
+      name: node.name,
+      type: node.type.toLowerCase(),
+      display_name: node.current.displayName,
+      description: node.current.description,
+      primary_key: node.current.primaryKey,
+      query: node.current.query,
+      tags: node.tags,
+      mode: node.current.mode.toLowerCase(),
+    };
 
-  const primaryKeyFromNode = node => {
-    return node.columns
-      .filter(
-        col =>
-          col.attributes &&
-          col.attributes.filter(
-            attr => attr.attribute_type.name === 'primary_key',
-          ).length > 0,
-      )
-      .map(col => col.name);
+    if (node.type === 'METRIC') {
+      return {
+        ...baseData,
+        metric_direction: node.current.metricMetadata?.direction?.toLowerCase(),
+        metric_unit: node.current.metricMetadata?.unit?.name?.toLowerCase(),
+        significant_digits: node.current.metricMetadata?.significantDigits,
+        required_dimensions: node.current.requiredDimensions.map(
+          dim => dim.name,
+        ),
+        upstream_node: node.current.parents[0]?.name,
+        aggregate_expression: node.current.metricMetadata?.expression,
+      };
+    }
+    return baseData;
   };
 
   const runValidityChecks = (data, setNode, setMessage) => {
@@ -216,7 +226,6 @@ export function AddEditNodePage({ extensions = {} }) {
       setMessage(`Node ${name} does not exist!`);
       return;
     }
-
     // Check if node type can be edited
     if (!nodeCanBeEdited(data.type)) {
       setNode(null);
@@ -245,14 +254,14 @@ export function AddEditNodePage({ extensions = {} }) {
       'primary_key',
       'mode',
       'tags',
-      'expression',
+      'aggregate_expression',
       'upstream_node',
+      'metric_unit',
+      'metric_direction',
+      'significant_digits',
     ];
-    const primaryKey = primaryKeyFromNode(data);
     fields.forEach(field => {
-      if (field === 'primary_key') {
-        setFieldValue(field, primaryKey);
-      } else if (field === 'tags') {
+      if (field === 'tags') {
         setFieldValue(
           field,
           data[field].map(tag => tag.name),
@@ -261,21 +270,6 @@ export function AddEditNodePage({ extensions = {} }) {
         setFieldValue(field, data[field] || '', false);
       }
     });
-    if (data.metric_metadata?.direction) {
-      setFieldValue('metric_direction', data.metric_metadata.direction);
-    }
-    if (data.metric_metadata?.unit) {
-      setFieldValue(
-        'metric_unit',
-        data.metric_metadata.unit.name.toLowerCase(),
-      );
-    }
-    if (data.expression) {
-      setFieldValue('aggregate_expression', data.expression);
-    }
-    if (data.upstream_node) {
-      setFieldValue('upstream_node', data.upstream_node);
-    }
     setNode(data);
 
     // For react-select fields, we have to explicitly set the entire
@@ -283,13 +277,13 @@ export function AddEditNodePage({ extensions = {} }) {
     setSelectTags(
       <TagsField
         defaultValue={data.tags.map(t => {
-          return { value: t.name, label: t.display_name };
+          return { value: t.name, label: t.displayName };
         })}
       />,
     );
     setSelectPrimaryKey(
       <ColumnsSelect
-        defaultValue={primaryKey}
+        defaultValue={data.primary_key}
         fieldName="primary_key"
         label="Primary Key"
         isMulti={true}
@@ -402,7 +396,11 @@ export function AddEditNodePage({ extensions = {} }) {
                         {nodeType === 'metric' || node.type === 'metric' ? (
                           <MetricQueryField
                             djClient={djClient}
-                            value={node.expression ? node.expression : ''}
+                            value={
+                              node.aggregate_expression
+                                ? node.aggregate_expression
+                                : ''
+                            }
                           />
                         ) : (
                           <NodeQueryField

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

@@ -181,6 +181,17 @@ export default function NodeInfoTab({ node }) {
                 : 'None'}
             </p>
           </div>
+          <div style={{ marginRight: '2rem' }}>
+            <h6 className="mb-0 w-100">Significant Digits</h6>
+            <p
+              className="mb-0 opacity-75"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="SignificantDigits"
+            >
+              {node?.metric_metadata?.significantDigits || 'None'}
+            </p>
+          </div>
         </div>
       </div>
     ) : (

package/src/app/services/DJService.js

@@ -128,6 +128,59 @@ export const DataJunctionAPI = {
     return data;
   },
 
+  getNodeForEditing: async function (name) {
+    const query = `
+      query GetNodeForEditing($name: String!) {
+        findNodes (names: [$name]) {
+          name
+          type
+          current {
+            displayName
+            description
+            primaryKey
+            query
+            parents { name }
+            metricMetadata {
+              direction
+              unit { name }
+              expression
+              significantDigits
+              incompatibleDruidFunctions
+            }
+            requiredDimensions {
+              name
+            }
+            mode
+          }
+          tags { 
+            name
+            displayName
+          }
+        }
+      }
+    `;
+
+    const results = await (
+      await fetch(DJ_GQL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          query,
+          variables: {
+            name: name,
+          },
+        }),
+      })
+    ).json();
+    if (results.data.findNodes.length === 0) {
+      return null;
+    }
+    return results.data.findNodes[0];
+  },
+
   getMetric: async function (name) {
     const query = `
       query GetMetric($name: String!) {
@@ -139,6 +192,7 @@ export const DataJunctionAPI = {
               direction
               unit { name }
               expression
+              significantDigits
               incompatibleDruidFunctions
             }
             requiredDimensions {
@@ -267,6 +321,7 @@ export const DataJunctionAPI = {
     primary_key,
     metric_direction,
     metric_unit,
+    significant_digits,
     required_dimensions,
   ) {
     try {
@@ -275,6 +330,7 @@ export const DataJunctionAPI = {
           ? {
               direction: metric_direction,
               unit: metric_unit,
+              significant_digits: significant_digits || null,
             }
           : null;
       const response = await fetch(`${DJ_URL}/nodes/${name}`, {

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

@@ -203,6 +203,7 @@ describe('DataJunctionAPI', () => {
         metric_metadata: {
           direction: 'neutral',
           unit: '',
+          significant_digits: null,
         },
       }),
       credentials: 'include',

package/src/mocks/mockNodes.jsx

@@ -278,12 +278,82 @@ export const mocks = {
         label: 'Unitless',
       },
       direction: 'neutral',
+      max_decimal_exponent: null,
+      min_decimal_exponent: null,
+      significant_digits: 4,
     },
     upstream_node: 'default.repair_orders',
     expression: 'count(repair_order_id)',
     aggregate_expression: 'count(repair_order_id)',
     required_dimensions: [],
   },
+
+  mockGetSourceNode: {
+    name: 'default.num_repair_orders',
+    type: 'SOURCE',
+    current: {
+      displayName: 'source.prodhive.dse.playback_f',
+      description:
+        'This source node was automatically created as a registered table.',
+      primaryKey: [],
+      parents: [],
+      metricMetadata: null,
+      requiredDimensions: [],
+      mode: 'PUBLISHED',
+    },
+    tags: [],
+  },
+
+  mockGetMetricNode: {
+    name: 'default.num_repair_orders',
+    type: 'METRIC',
+    current: {
+      displayName: 'Default: Num Repair Orders',
+      description: 'Number of repair orders',
+      primaryKey: ['repair_order_id', 'country'],
+      query:
+        'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
+      parents: [
+        {
+          name: 'default.repair_orders',
+        },
+      ],
+      metricMetadata: {
+        direction: 'NEUTRAL',
+        unit: {
+          name: 'UNITLESS',
+        },
+        expression: 'count(repair_order_id)',
+        significantDigits: 5,
+        incompatibleDruidFunctions: ['IF'],
+      },
+      requiredDimensions: [],
+      mode: 'PUBLISHED',
+    },
+    tags: [{ name: 'purpose', displayName: 'Purpose' }],
+  },
+
+  mockGetTransformNode: {
+    name: 'default.repair_order_transform',
+    type: 'TRANSFORM',
+    current: {
+      displayName: 'Default: Repair Order Transform',
+      description: 'Repair order dimension',
+      primaryKey: [],
+      query:
+        'SELECT repair_order_id, municipality_id, hard_hat_id, dispatcher_id FROM default.repair_orders',
+      parents: [
+        {
+          name: 'default.repair_orders',
+        },
+      ],
+      metricMetadata: null,
+      requiredDimensions: [],
+      mode: 'PUBLISHED',
+    },
+    tags: [],
+  },
+
   attributes: [
     {
       uniqueness_scope: [],