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

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { DJNodeDimensions } from './DJNodeDimensions';
+import { DJNodeColumns } from './DJNodeColumns';
+
+export default function Collapse({ collapsed, text, data }) {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  const limit = 5;
+  return (
+    <>
+      <div className="collapse">
+        {data.type === 'metric' ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 Show' : '\u25BC Hide'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+        <div
+          className={`collapse-content ${
+            isCollapsed && data.type === 'metric' ? 'collapsed' : 'expanded'
+          }`}
+          aria-expanded={isCollapsed}
+        >
+          {data.type !== 'metric'
+            ? isCollapsed
+              ? DJNodeColumns({ data: data, limit: limit })
+              : DJNodeColumns({ data: data, limit: 100 })
+            : DJNodeDimensions(data)}
+        </div>
+        {data.type !== 'metric' && data.column_names.length > limit ? (
+          <button
+            className="collapse-button"
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            {isCollapsed ? '\u25B6 More' : '\u25BC Less'} {text}
+          </button>
+        ) : (
+          ''
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -1,81 +1,58 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Handle, Position } from 'reactflow';
-
-function renderBasedOnDJNodeType(param) {
-  switch (param) {
-    case 'source':
-      return { backgroundColor: '#7EB46150', color: '#7EB461' };
-    case 'transform':
-      return { backgroundColor: '#6DAAA750', color: '#6DAAA7' };
-    case 'dimension':
-      return { backgroundColor: '#CF7D2950', color: '#CF7D29' };
-    case 'metric':
-      return { backgroundColor: '#A27E8650', color: '#A27E86' };
-    case 'cube':
-      return { backgroundColor: '#C2180750', color: '#C21807' };
-    default:
-      return {};
-  }
-}
+import Collapse from './Collapse';
 
 function capitalize(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const Collapse = ({ collapsed, text, children }) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
-
-  return (
-    <>
-      <div className="collapse">
-        <button
-          className="collapse-button"
-          onClick={() => setIsCollapsed(!isCollapsed)}
-        >
-          {isCollapsed ? '\u25B6 Show' : '\u25BC Hide'} {text}
-        </button>
-        <div
-          className={`collapse-content ${
-            isCollapsed ? 'collapsed' : 'expanded'
-          }`}
-          aria-expanded={isCollapsed}
-        >
-          {children}
-        </div>
-      </div>
-    </>
-  );
-};
-
 export function DJNode({ id, data }) {
-  const columnsRenderer = data =>
-    data.column_names.map(col => (
-      <tr>
-        <td>
-          {data.primary_key.includes(col.name) ? (
-            <b>{col.name} (PK)</b>
-          ) : (
-            <>{col.name}</>
-          )}
-        </td>
-        <td style={{ textAlign: 'right' }}>{col.type}</td>
-      </tr>
-    ));
-  // const dimensionsRenderer = data =>
-  //   data.dimensions.map(dim => (
-  //     <tr>
-  //       <td>{dim}</td>
-  //     </tr>
-  //   ));
+  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%)',
+      },
+    };
+  };
+  const highlightNodeClass =
+    data.is_current === true ? ' dj-node_highlight' : '';
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{ backgroundColor: '#ccc' }}
-      />
-      <div className="dj-node__full" style={renderBasedOnDJNodeType(data.type)}>
+      <div
+        className={'dj-node__full node_type__' + data.type + highlightNodeClass}
+        key={data.name}
+        style={{ width: '450px' }}
+      >
+        <div style={handleWrapperStyle}>
+          <Handle
+            type="target"
+            id={data.name}
+            position={Position.Left}
+            style={handleStyleLeft(100)}
+          />
+        </div>
         <div className="dj-node__header">
           <div className="serif">
             {data.name
@@ -85,25 +62,26 @@ export function DJNode({ id, data }) {
           </div>
         </div>
         <div className="dj-node__body">
-          <b>{capitalize(data.type)}</b>:{' '}
-          {data.type === 'source' ? data.table : data.display_name}
+          <b>{capitalize(data.type)}</b>
+          <br />{' '}
+          <a href={`/nodes/${data.name}`}>
+            {data.type === 'source' ? data.table : data.display_name}
+          </a>
           <Collapse
-            collapsed={true}
+            collapsed={data.is_current && data.type != 'metric' ? false : true}
             text={data.type !== 'metric' ? 'columns' : 'dimensions'}
-          >
-            <div className="dj-node__metadata">
-              {
-                data.type !== 'metric' ? columnsRenderer(data) : '' // dimensionsRenderer(data)
-              }
-            </div>
-          </Collapse>
+            data={data}
+          />
+        </div>
+        <div style={handleWrapperStyleRight}>
+          <Handle
+            type="source"
+            id={data.name}
+            position={Position.Right}
+            style={handleStyleLeft(90)}
+          />
         </div>
       </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{ backgroundColor: '#ccc' }}
-      />
     </>
   );
 }

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

@@ -0,0 +1,75 @@
+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 +
+        (col.order <= 0 ? ' custom-node-emphasis' : '')
+      }
+      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,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();
+  });
+});