datajunction-ui 0.0.1-a1

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

@@ -0,0 +1,71 @@
+import { Handle } from 'reactflow';
+import React from 'react';
+
+export function DJNodeColumns({ data, limit }) {
+  const handleWrapperStyle = {
+    display: 'flex',
+    position: 'absolute',
+    height: '100%',
+    flexDirection: 'column',
+    top: '50%',
+    justifyContent: 'space-between',
+  };
+  const handleWrapperStyleRight = { ...handleWrapperStyle, ...{ right: 0 } };
+
+  const handleStyle = {
+    width: '12px',
+    height: '12px',
+    borderRadius: '12px',
+    background: 'transparent',
+    border: '4px solid transparent',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '0px',
+    left: 0,
+  };
+  const handleStyleLeft = percentage => {
+    return {
+      ...handleStyle,
+      ...{
+        transform: 'translate(-' + percentage + '%, -50%)',
+      },
+    };
+  };
+  return data.column_names.slice(0, limit).map(col => (
+    <div
+      className={'custom-node-subheader node_type__' + data.type}
+      key={`${data.name}.${col.name}`}
+    >
+      <div style={handleWrapperStyle}>
+        <Handle
+          type="target"
+          position="left"
+          id={data.name + '.' + col.name}
+          style={handleStyleLeft(100)}
+        />
+      </div>
+      <div
+        className="custom-node-port"
+        id={data.name + '.' + col.name}
+        key={'i-' + data.name + '.' + col.name}
+      >
+        {data.primary_key.includes(col.name) ? (
+          <b>{col.name} (PK)</b>
+        ) : (
+          <>{col.name}</>
+        )}
+        <span style={{ marginLeft: '0.25rem' }} className={'badge'}>
+          {col.type}
+        </span>
+      </div>
+      <div style={handleWrapperStyleRight}>
+        <Handle
+          type="source"
+          position="right"
+          id={data.name + '.' + col.name}
+          style={handleStyle}
+        />
+      </div>
+    </div>
+  ));
+}

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

@@ -0,0 +1,75 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../../providers/djclient';
+
+export function DJNodeDimensions(data) {
+  const [dimensions, setDimensions] = useState([]);
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  useEffect(() => {
+    if (data.type === 'metric') {
+      async function getDimensions() {
+        try {
+          const metricData = await djClient.metric(data.name);
+          setDimensions(metricData.dimensions);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      getDimensions();
+    }
+  }, [data, djClient]);
+  const dimensionsToObject = dimensions => {
+    return dimensions.map(dim => {
+      const [attribute, ...nodeName] = dim.name.split('.').reverse();
+      return {
+        dimension: nodeName.reverse().join('.'),
+        path: dim.path,
+        column: attribute,
+      };
+    });
+  };
+  const groupedDimensions = dims =>
+    dims.reduce((acc, current) => {
+      const dimKey = current.dimension + ' via ' + current.path.slice(-1);
+      acc[dimKey] = acc[dimKey] || {
+        dimension: current.dimension,
+        path: current.path.slice(-1),
+        columns: [],
+      };
+      acc[dimKey].columns.push(current.column);
+      return acc;
+    }, {});
+  const dimensionsRenderer = grouped =>
+    Object.entries(grouped).map(([dimKey, dimValue]) => {
+      if (Array.isArray(dimValue.columns)) {
+        const attributes = dimValue.columns.map(col => {
+          return (
+            <span className={'badge white_badge'} key={`attr-${col}`}>
+              {col}
+            </span>
+          );
+        });
+        return (
+          <div
+            className={'custom-node-subheader node_type__' + data.type}
+            key={`dim-${dimValue.path}-${dimValue.dimension}`}
+          >
+            <div className="custom-node-port">
+              <a href={`/nodes/${dimValue.dimension}`}>{dimValue.dimension}</a>{' '}
+              <div className={'badge node_type__metric text-black'}>
+                {dimValue.path}
+              </div>
+            </div>
+            <div className={'dimension_attributes'}>{attributes}</div>
+          </div>
+        );
+      }
+      return <></>;
+    });
+  return (
+    <>
+      {dimensions.length <= 0
+        ? ''
+        : dimensionsRenderer(groupedDimensions(dimensionsToObject(dimensions)))}
+    </>
+  );
+}

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

@@ -0,0 +1,104 @@
+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 => {
+    nodeHeightTracker[node.id] =
+      Math.min(node.data.column_names.length, 10) * 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] / 2,
+    };
+    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__/DJNode.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createRenderer } from 'react-test-renderer/shallow';
+
+import { DJNode } from '../DJNode';
+
+const renderer = createRenderer();
+
+describe('<DJNode />', () => {
+  it('should render and match the snapshot', () => {
+    renderer.render(
+      <DJNode
+        id="1"
+        data={{
+          name: 'shared.dimensions.accounts',
+          column_names: ['a'],
+          type: 'source',
+          primary_key: ['id'],
+        }}
+      />,
+    );
+    const renderedOutput = renderer.getRenderOutput();
+    expect(renderedOutput).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DJNode /> should render and match the snapshot 1`] = `
+<React.Fragment>
+  <div
+    className="dj-node__full node_type__source"
+    style={
+      Object {
+        "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"
+    >
+      <div
+        className="serif"
+      >
+        shared ▶ dimensions
+      </div>
+    </div>
+    <div
+      className="dj-node__body"
+    >
+      <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>
+    <div
+      style={
+        Object {
+          "display": "flex",
+          "flexDirection": "column",
+          "height": "100%",
+          "justifyContent": "space-between",
+          "position": "absolute",
+          "right": 0,
+          "top": "50%",
+        }
+      }
+    >
+      <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/constants.js

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

package/src/app/icons/AlertIcon.jsx

@@ -0,0 +1,32 @@
+const AlertIcon = props => (
+  <svg
+    width="2em"
+    height="2em"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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;