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

package/src/app/components/__tests__/UserMenu.test.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import UserMenu from '../UserMenu';
+import DJClientContext from '../../providers/djclient';
+import { UserProvider } from '../../providers/UserProvider';
+
+describe('<UserMenu />', () => {
+  const createMockDjClient = (overrides = {}) => ({
+    whoami: jest.fn().mockResolvedValue({
+      id: 1,
+      username: 'testuser',
+      email: 'test@example.com',
+    }),
+    logout: jest.fn().mockResolvedValue({}),
+    ...overrides,
+  });
+
+  const renderWithContext = (mockDjClient: any, props = {}) => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <UserProvider>
+          <UserMenu {...props} />
+        </UserProvider>
+      </DJClientContext.Provider>,
+    );
+  };
+
+  // Mock window.location.reload
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    delete (window as any).location;
+    (window as any).location = { ...originalLocation, reload: jest.fn() };
+  });
+
+  afterEach(() => {
+    (window as any).location = originalLocation;
+  });
+
+  it('renders the avatar button', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveClass('avatar-button');
+  });
+
+  it('shows "?" before user is loaded', () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockImplementation(
+        () => new Promise(() => {}), // Never resolves
+      ),
+    });
+    renderWithContext(mockDjClient);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('?');
+  });
+
+  it('displays initials from username (first two letters uppercase)', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JO');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('displays initials from name when available', async () => {
+    const mockDjClient = createMockDjClient({
+      whoami: jest.fn().mockResolvedValue({
+        id: 1,
+        username: 'johndoe',
+        email: 'john@example.com',
+        name: 'John Doe',
+      }),
+    });
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = await screen.findByText('JD');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('opens dropdown when avatar is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('shows Settings and Logout links in dropdown', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const settingsLink = screen.getByText('Settings');
+    expect(settingsLink).toHaveAttribute('href', '/settings');
+
+    const logoutLink = screen.getByText('Logout');
+    expect(logoutLink).toHaveAttribute('href', '/');
+  });
+
+  it('calls logout and reloads page when Logout is clicked', async () => {
+    const mockDjClient = createMockDjClient();
+    renderWithContext(mockDjClient);
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    const logoutLink = screen.getByText('Logout');
+    fireEvent.click(logoutLink);
+
+    expect(mockDjClient.logout).toHaveBeenCalled();
+  });
+
+  it('calls onDropdownToggle when dropdown is opened', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('closes dropdown when forceClose becomes true', async () => {
+    const mockDjClient = createMockDjClient();
+
+    const { rerender } = render(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserProvider>
+          <UserMenu forceClose={false} />
+        </UserProvider>
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Rerender with forceClose=true
+    rerender(
+      <DJClientContext.Provider
+        value={{ DataJunctionAPI: mockDjClient as any }}
+      >
+        <UserProvider>
+          <UserMenu forceClose={true} />
+        </UserProvider>
+      </DJClientContext.Provider>,
+    );
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  });
+
+  it('closes dropdown when clicking outside', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    // Open the dropdown
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    // Verify dropdown is open
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Click outside
+    fireEvent.click(document.body);
+
+    // Dropdown should be closed
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+
+    // onDropdownToggle should be called with false
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('toggles dropdown closed when clicking avatar again', async () => {
+    const mockDjClient = createMockDjClient();
+    const onDropdownToggle = jest.fn();
+    renderWithContext(mockDjClient, { onDropdownToggle });
+
+    await waitFor(() => {
+      expect(mockDjClient.whoami).toHaveBeenCalled();
+    });
+
+    const button = screen.getByRole('button');
+
+    // Open
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(true);
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+
+    // Close by clicking again
+    fireEvent.click(button);
+    expect(onDropdownToggle).toHaveBeenCalledWith(false);
+  });
+});

package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap

@@ -14,11 +14,16 @@ exports[`<ListGroupItem /> should render and match the snapshot 1`] = `
         Name
       </h6>
       <p
+        aria-hidden="false"
+        aria-label="Name"
         className="mb-0 opacity-75"
+        role="dialog"
       >
-        <span>
-          Something
-        </span>
+        <Markdown>
+          <span>
+            Something
+          </span>
+        </Markdown>
       </p>
     </div>
   </div>

package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap

@@ -8,25 +8,9 @@ exports[`<NamespaceHeader /> should render and match the snapshot 1`] = `
     className="breadcrumb-item"
   >
     <a
-      href="/namespaces/"
+      href="/"
     >
-      <svg
-        className="bi bi-house-door-fill"
-        fill="currentColor"
-        height="16"
-        style={
-          Object {
-            "paddingBottom": "0.2rem",
-          }
-        }
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
-        />
-      </svg>
+      <HorizontalHierarchyIcon />
     </a>
   </li>
   <li

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)))}
+    </>
+  );
+}