datajunction-ui 0.0.1-rc.9 → 0.0.2-3.dev1

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+} from 'reactflow';
+
+import '../../../styles/dag.css';
+import 'reactflow/dist/style.css';
+import DJNode from '../../components/djgraph/DJNode';
+import dagre from 'dagre';
+
+const getLayoutedElements = (
+  nodes,
+  edges,
+  direction = 'LR',
+  nodeWidth = 600,
+) => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const isHorizontal = direction === 'TB';
+  dagreGraph.setGraph({
+    rankdir: direction,
+    nodesep: 40,
+    ranksep: 10,
+    ranker: 'longest-path',
+  });
+  const nodeHeightTracker = {};
+
+  nodes.forEach(node => {
+    const minColumnsLength = node.data.column_names.filter(
+      col => col.order > 0,
+    ).length;
+    nodeHeightTracker[node.id] = Math.min(minColumnsLength, 5) * 40 + 250;
+    dagreGraph.setNode(node.id, {
+      width: nodeWidth,
+      height: nodeHeightTracker[node.id],
+    });
+  });
+
+  edges.forEach(edge => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  nodes.forEach(node => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    node.targetPosition = isHorizontal ? 'left' : 'top';
+    node.sourcePosition = isHorizontal ? 'right' : 'bottom';
+    node.position = {
+      x: nodeWithPosition.x - nodeWidth / 2,
+      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 3,
+    };
+    node.width = nodeWidth;
+    node.height = nodeHeightTracker[node.id];
+    return node;
+  });
+
+  return { nodes: nodes, edges: edges };
+};
+
+const LayoutFlow = (djNode, saveGraph) => {
+  const nodeTypes = useMemo(() => ({ DJNode: DJNode }), []);
+
+  // These are used internally by ReactFlow (to update the nodes on the ReactFlow pane)
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const minimapStyle = {
+    height: 100,
+    width: 150,
+  };
+
+  useEffect(() => {
+    saveGraph(getLayoutedElements, setNodes, setEdges).catch(console.error);
+  }, [djNode]);
+
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [setEdges],
+  );
+  return (
+    <div style={{ height: '800px' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        snapToGrid={true}
+        fitView
+      >
+        <MiniMap style={minimapStyle} zoomable pannable />
+        <Controls />
+        <Background color="#aaa" gap={16} />
+      </ReactFlow>
+    </div>
+  );
+};
+export default LayoutFlow;

package/src/app/components/djgraph/__tests__/Collapse.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import Collapse from '../Collapse';
+import { mocks } from '../../../../mocks/mockNodes';
+import { ReactFlowProvider } from 'reactflow';
+
+jest.mock('../DJNodeDimensions', () => ({
+  DJNodeDimensions: jest.fn(data => <div>DJNodeDimensions content</div>),
+}));
+
+describe('<Collapse />', () => {
+  const defaultProps = {
+    collapsed: true,
+    text: 'Dimensions',
+    data: mocks.mockMetricNode,
+  };
+
+  it('renders without crashing', () => {
+    render(<Collapse {...defaultProps} />);
+  });
+
+  it('renders toggle for metric type', () => {
+    const { getByText } = render(
+      <Collapse {...defaultProps} data={mocks.mockMetricNode} />,
+    );
+    const button = screen.getByText('▶ Show Dimensions');
+    fireEvent.click(button);
+    expect(getByText('▼ Hide Dimensions')).toBeInTheDocument();
+  });
+
+  it('toggles More/Less button text for non-metric type on click', () => {
+    defaultProps.text = 'Columns';
+    const { getByText } = render(
+      <ReactFlowProvider>
+        <Collapse
+          {...defaultProps}
+          data={{
+            type: 'transform',
+            column_names: Array(11).fill(idx => {
+              return `column-${idx}`;
+            }),
+            primary_key: [],
+          }}
+        />
+      </ReactFlowProvider>,
+    );
+    const button = getByText('▶ More Columns');
+    fireEvent.click(button);
+    expect(getByText('▼ Less Columns')).toBeInTheDocument();
+  });
+});

package/src/app/components/djgraph/__tests__/DJNodeColumns.test.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DJNodeColumns } from '../DJNodeColumns';
+import { ReactFlowProvider } from 'reactflow';
+
+describe('<DJNodeColumns />', () => {
+  const defaultProps = {
+    data: {
+      name: 'TestName',
+      type: 'metric',
+      column_names: [
+        { name: 'col1', type: 'int' },
+        { name: 'col2', type: 'string' },
+        { name: 'col3', type: 'float' },
+      ],
+      primary_key: ['col1'],
+    },
+    limit: 10,
+  };
+
+  const domTestingLib = require('@testing-library/dom');
+  const { queryHelpers } = domTestingLib;
+
+  const queryByAttribute = attribute =>
+    queryHelpers.queryAllByAttribute.bind(null, attribute);
+
+  function getByAttribute(container, id, attribute, ...rest) {
+    const result = queryByAttribute(attribute)(container, id, ...rest);
+    return result[0];
+  }
+
+  function DJNodeColumnsWithProvider(props) {
+    return (
+      <ReactFlowProvider>
+        <DJNodeColumns {...props} />
+      </ReactFlowProvider>
+    );
+  }
+
+  it('renders without crashing', () => {
+    render(<DJNodeColumnsWithProvider {...defaultProps} />);
+  });
+
+  it('renders columns correctly', () => {
+    const { container } = render(
+      <DJNodeColumnsWithProvider {...defaultProps} />,
+    );
+
+    // renders column names
+    defaultProps.data.column_names.forEach(col => {
+      expect(screen.getByText(col.name, { exact: false })).toBeInTheDocument();
+    });
+
+    // appends (PK) to primary key column name
+    expect(screen.getByText('col1 (PK)')).toBeInTheDocument();
+
+    // renders column type badge correctly
+    defaultProps.data.column_names.forEach(col => {
+      expect(screen.getByText(col.type)).toBeInTheDocument();
+    });
+
+    // renders handles correctly
+    defaultProps.data.column_names.forEach(col => {
+      expect(
+        getByAttribute(
+          container,
+          defaultProps.data.name + '.' + col.name,
+          'data-handleid',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('renders limited columns based on the limit prop', () => {
+    const limitedProps = {
+      ...defaultProps,
+      limit: 2,
+    };
+
+    render(<DJNodeColumnsWithProvider {...limitedProps} />);
+    expect(screen.queryByText('col3')).not.toBeInTheDocument();
+  });
+});

package/src/app/components/djgraph/__tests__/DJNodeDimensions.test.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { DJNodeDimensions } from '../DJNodeDimensions';
+import DJClientContext from '../../../providers/djclient';
+
+const mockMetric = jest.fn();
+describe('<DJNodeDimensions />', () => {
+  const defaultProps = {
+    type: 'metric',
+    name: 'TestMetric',
+  };
+  const mockDJClient = () => {
+    return {
+      DataJunctionAPI: {
+        metric: mockMetric,
+      },
+    };
+  };
+
+  const DJNodeDimensionsWithContext = (djClient, props) => {
+    return (
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...props} />
+      </DJClientContext.Provider>
+    );
+  };
+
+  beforeEach(() => {
+    // Reset the mock before each test
+    mockMetric.mockReset();
+  });
+
+  it('fetches dimensions for metric type', async () => {
+    mockMetric.mockResolvedValueOnce({
+      dimensions: [{ name: 'test.dimension' }],
+    });
+    const djClient = mockDJClient();
+
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+    waitFor(() => {
+      expect(mockMetric).toHaveBeenCalledWith(defaultProps.name);
+    });
+  });
+
+  it('renders dimensions correctly after processing', async () => {
+    const testDimensions = [
+      {
+        name: 'default.us_state.state_name',
+        type: 'string',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+      {
+        name: 'default.us_state.state_region',
+        type: 'int',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+      {
+        name: 'default.us_state.state_region_description',
+        type: 'string',
+        path: [
+          'default.repair_order_details.repair_order_id',
+          'default.repair_order.hard_hat_id',
+          'default.hard_hat.state',
+        ],
+      },
+    ];
+    mockMetric.mockResolvedValueOnce({ dimensions: testDimensions });
+    const djClient = mockDJClient();
+
+    const { findByText } = render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    for (const dim of testDimensions) {
+      const [attribute, ...nodeName] = dim.name.split('.').reverse();
+      const dimension = nodeName.reverse().join('.');
+      expect(await findByText(attribute)).toBeInTheDocument();
+      expect(await findByText(dimension)).toBeInTheDocument();
+    }
+  });
+
+  it('does not fetch dimensions if type is not metric', () => {
+    const djClient = mockDJClient();
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} type="transform" />
+      </DJClientContext.Provider>,
+    );
+    expect(mockMetric).not.toHaveBeenCalled();
+  });
+
+  it('handles errors gracefully', async () => {
+    mockMetric.mockRejectedValueOnce(new Error('API error'));
+
+    const djClient = mockDJClient();
+    render(
+      <DJClientContext.Provider value={djClient}>
+        <DJNodeDimensions {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    expect(await mockMetric).toHaveBeenCalledWith(defaultProps.name);
+  });
+});

package/src/app/components/djgraph/__tests__/__snapshots__/DJNode.test.tsx.snap

@@ -2,24 +2,46 @@
 
 exports[`<DJNode /> should render and match the snapshot 1`] = `
 <React.Fragment>
-  <Memo(Handle)
-    position="left"
-    style={
-      Object {
-        "backgroundColor": "#ccc",
-      }
-    }
-    type="target"
-  />
   <div
-    className="dj-node__full"
+    className="dj-node__full node_type__source"
     style={
       Object {
-        "backgroundColor": "#7EB46150",
-        "color": "#7EB461",
+        "width": "450px",
       }
     }
   >
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "height": "100%",
+          "justifyContent": "space-between",
+          "position": "absolute",
+          "top": "50%",
+        }
+      }
+    >
+      <Memo(Handle)
+        id="shared.dimensions.accounts"
+        position="left"
+        style={
+          Object {
+            "background": "transparent",
+            "border": "4px solid transparent",
+            "borderRadius": "12px",
+            "cursor": "pointer",
+            "height": "12px",
+            "left": 0,
+            "position": "absolute",
+            "top": "0px",
+            "transform": "translate(-100%, -50%)",
+            "width": "12px",
+          }
+        }
+        type="target"
+      />
+    </div>
     <div
       className="dj-node__header"
     >
@@ -35,39 +57,61 @@ exports[`<DJNode /> should render and match the snapshot 1`] = `
       <b>
         Source
       </b>
-      :
+      <br />
        
+      <a
+        href="/nodes/shared.dimensions.accounts"
+      />
       <Collapse
         collapsed={true}
+        data={
+          Object {
+            "column_names": Array [
+              "a",
+            ],
+            "name": "shared.dimensions.accounts",
+            "primary_key": Array [
+              "id",
+            ],
+            "type": "source",
+          }
+        }
         text="columns"
-      >
-        <div
-          className="dj-node__metadata"
-        >
-          <tr>
-            <td>
-              <React.Fragment />
-            </td>
-            <td
-              style={
-                Object {
-                  "textAlign": "right",
-                }
-              }
-            />
-          </tr>
-        </div>
-      </Collapse>
+      />
     </div>
-  </div>
-  <Memo(Handle)
-    position="right"
-    style={
-      Object {
-        "backgroundColor": "#ccc",
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "height": "100%",
+          "justifyContent": "space-between",
+          "position": "absolute",
+          "right": 0,
+          "top": "50%",
+        }
       }
-    }
-    type="source"
-  />
+    >
+      <Memo(Handle)
+        id="shared.dimensions.accounts"
+        position="right"
+        style={
+          Object {
+            "background": "transparent",
+            "border": "4px solid transparent",
+            "borderRadius": "12px",
+            "cursor": "pointer",
+            "height": "12px",
+            "left": 0,
+            "position": "absolute",
+            "top": "0px",
+            "transform": "translate(-90%, -50%)",
+            "width": "12px",
+          }
+        }
+        type="source"
+      />
+    </div>
+  </div>
 </React.Fragment>
 `;

package/src/app/components/forms/Action.jsx

@@ -0,0 +1,8 @@
+export class Action {
+  static Add = new Action('add');
+  static Edit = new Action('edit');
+
+  constructor(name) {
+    this.name = name;
+  }
+}

package/src/app/components/forms/NodeNameField.jsx

@@ -0,0 +1,64 @@
+import { ErrorMessage, Field } from 'formik';
+import { FormikSelect } from '../../pages/AddEditNodePage/FormikSelect';
+import { FullNameField } from '../../pages/AddEditNodePage/FullNameField';
+import React, { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+import { useParams } from 'react-router-dom';
+
+/*
+ * This component creates the namespace selector, display name input, and
+ * derived name fields in a form. It can be reused any time we need to create
+ * a new node.
+ */
+
+export default function NodeNameField() {
+  const [namespaces, setNamespaces] = useState([]);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  let { initialNamespace } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const namespaces = await djClient.namespaces();
+      setNamespaces(
+        namespaces.map(m => ({
+          value: m['namespace'],
+          label: m['namespace'],
+        })),
+      );
+    };
+    fetchData().catch(console.error);
+  }, [djClient, djClient.metrics]);
+
+  return (
+    <>
+      <div className="NamespaceInput">
+        <ErrorMessage name="namespace" component="span" />
+        <label htmlFor="namespace">Namespace *</label>
+        <FormikSelect
+          selectOptions={namespaces}
+          formikFieldName="namespace"
+          placeholder="Choose Namespace"
+          defaultValue={{
+            value: initialNamespace,
+            label: initialNamespace,
+          }}
+        />
+      </div>
+      <div className="DisplayNameInput NodeCreationInput">
+        <ErrorMessage name="display_name" component="span" />
+        <label htmlFor="displayName">Display Name *</label>
+        <Field
+          type="text"
+          name="display_name"
+          id="displayName"
+          placeholder="Human readable display name"
+        />
+      </div>
+      <div className="FullNameInput NodeCreationInput">
+        <ErrorMessage name="name" component="span" />
+        <label htmlFor="FullName">Full Name</label>
+        <FullNameField type="text" name="name" />
+      </div>
+    </>
+  );
+}

package/src/app/components/search.css

@@ -0,0 +1,17 @@
+.search-box {
+  display: flex;
+  height: 50%;
+}
+
+.search-results {
+  position: absolute;
+  z-index: 1000;
+  width: 75%;
+  background-color: rgba(244, 244, 244, 0.8);
+  border-radius: 1rem;
+}
+
+.search-result-item {
+  text-decoration: wavy;
+  padding: 0.5rem;
+}

package/src/app/constants.js

@@ -0,0 +1,2 @@
+export const AUTH_COOKIE = '__dj';
+export const LOGGED_IN_FLAG_COOKIE = '__djlif';

package/src/app/icons/AddItemIcon.jsx

@@ -0,0 +1,16 @@
+const AddItemIcon = props => (
+  <svg
+    enableBackground="new 0 0 512 512"
+    height="20px"
+    id="Layer_1"
+    version="1.1"
+    viewBox="0 0 512 512"
+    width="20px"
+    xmlSpace="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <path d="M256,512C114.625,512,0,397.391,0,256C0,114.609,114.625,0,256,0c141.391,0,256,114.609,256,256  C512,397.391,397.391,512,256,512z M256,64C149.969,64,64,149.969,64,256s85.969,192,192,192c106.047,0,192-85.969,192-192  S362.047,64,256,64z M288,384h-64v-96h-96v-64h96v-96h64v96h96v64h-96V384z" />
+  </svg>
+);
+export default AddItemIcon;

package/src/app/icons/AlertIcon.jsx

@@ -0,0 +1,33 @@
+const AlertIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>alert_fill</title>
+    <g id="page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="System"
+        transform="translate(-48.000000, -48.000000)"
+        fillRule="nonzero"
+      >
+        <g id="alert_fill" transform="translate(48.000000, 48.000000)">
+          <path
+            d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
+            id="MingCute"
+            fillRule="nonzero"
+          ></path>
+          <path
+            d="M13.299,3.1477 L21.933,18.1022 C22.5103,19.1022 21.7887,20.3522 20.634,20.3522 L3.36601,20.3522 C2.21131,20.3522 1.48962,19.1022 2.06697,18.1022 L10.7009,3.14771 C11.2783,2.14771 12.7217,2.1477 13.299,3.1477 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 C12.5523,17 13,16.5523 13,16 C13,15.4477 12.5523,15 12,15 Z M12,8 C11.48715,8 11.0644908,8.38604429 11.0067275,8.88337975 L11,9 L11,13 C11,13.5523 11.4477,14 12,14 C12.51285,14 12.9355092,13.613973 12.9932725,13.1166239 L13,13 L13,9 C13,8.44772 12.5523,8 12,8 Z"
+            id="shape"
+            fill="#09244B"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+export default AlertIcon;

package/src/app/icons/CollapsedIcon.jsx

@@ -0,0 +1,15 @@
+const CollapsedIcon = props => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height="1em"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm244.5 0l-81.9-81.1c-7.5-7.5-7.5-19.8 0-27.3s19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81z"></path>
+  </svg>
+);
+
+export default CollapsedIcon;