datajunction-ui 0.0.1-a49 → 0.0.1-a49.dev2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a49",
+  "version": "0.0.1-a49.dev2",
   "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/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__/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');