Feat/vadc data dictionary table

package.json

@@ -15,6 +15,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gen3/guppy": "^0.18.0",
     "@gen3/ui-component": "^0.11.4",
+    "@mantine/core": "^6.0.21",
     "@reactour/tour": "^2.12.0",
     "@upsetjs/venn.js": "^1.4.2",
     "antd": "^4.24.10",

src/Analysis/DataDictionary/ColumnHeaders/ColumnHeaders.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { ISortConfig } from '../Interfaces/Interfaces';
+import '@testing-library/jest-dom/extend-expect';
+import ColumnHeaders from './ColumnHeaders';
+
+const sortConfig: ISortConfig = { sortKey: '', direction: 'ascending' };
+describe('ColumnHeaders', () => {
+  it('renders ColumnHeaders ', () => {
+    const handleSort = jest.fn();
+
+    render(
+      <table>
+        <ColumnHeaders handleSort={handleSort} sortConfig={sortConfig} />
+      </table>,
+    );
+    expect(screen.getByTestId('column-headers')).toBeInTheDocument();
+  });
+  it('calls handleSort when a column is clicked', () => {
+    const handleSort = jest.fn();
+    render(
+      <table>
+        <ColumnHeaders handleSort={handleSort} sortConfig={sortConfig} />
+      </table>,
+    );
+    fireEvent.click(
+      screen.getAllByRole('presentation', { name: 'caret-up' })[0],
+    );
+    expect(handleSort).toHaveBeenCalledTimes(1);
+  });
+});

src/Analysis/DataDictionary/ColumnHeaders/ColumnHeaders.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import Header from './Header';
+import { ISortConfig } from '../Interfaces/Interfaces';
+
+interface ITableHeadersProps {
+  handleSort: Function;
+  sortConfig: ISortConfig;
+}
+
+const headerItems = [
+  {
+    headerKey: '',
+    jsx: <React.Fragment />,
+  },
+  {
+    headerKey: 'vocabularyID',
+    jsx: (
+      <span>
+        Vocabulary
+        <br />
+        ID
+      </span>
+    ),
+  },
+  {
+    headerKey: 'conceptID',
+    jsx: (
+      <span>
+        Concept
+        <br />
+        ID
+      </span>
+    ),
+  },
+  {
+    headerKey: 'conceptCode',
+    jsx: (
+      <span>
+        Concept
+        <br />
+        Code
+      </span>
+    ),
+  },
+  {
+    headerKey: 'conceptName',
+    jsx: (
+      <span>
+        Concept
+        <br />
+        Name
+      </span>
+    ),
+  },
+  {
+    headerKey: 'conceptClassID',
+    jsx: (
+      <span>
+        Concept
+        <br />
+        Class&nbsp;ID
+      </span>
+    ),
+  },
+  {
+    headerKey: 'numberOfPeopleWithVariable',
+    jsx: (
+      <span>
+        #&nbsp;/&nbsp;%&nbsp;of&nbsp;People
+        <br />
+        with&nbsp;Variable
+      </span>
+    ),
+  },
+  {
+    headerKey: 'numberOfPeopleWhereValueIsFilled',
+    jsx: (
+      <span>
+        #&nbsp;/&nbsp;%&nbsp;of&nbsp;People
+        <br />
+        where&nbsp;Value&nbsp;is&nbsp;Filled
+      </span>
+    ),
+  },
+  {
+    headerKey: 'numberOfPeopleWhereValueIsNull',
+    jsx: (
+      <span>
+        #&nbsp;/&nbsp;%&nbsp;of&nbsp;People
+        <br />
+        where&nbsp;Value&nbsp;is&nbsp;Null
+      </span>
+    ),
+  },
+  {
+    headerKey: 'valueStoredAs',
+    jsx: (
+      <span>
+        Value
+        <br />
+        Stored&nbsp;As
+      </span>
+    ),
+  },
+  { headerKey: 'valueSummary', jsx: <span>Value&nbsp;Summary</span> },
+];
+
+const ColumnHeaders = ({ handleSort, sortConfig }: ITableHeadersProps) => (
+  <thead className={'column-headers'} data-testid='column-headers'>
+    <tr>
+      {headerItems.map((item) => (
+        <Header
+          key={item.headerKey}
+          handleSort={handleSort}
+          headerJSX={item.jsx}
+          headerKey={item.headerKey}
+          sortConfig={sortConfig}
+          sortable={item.headerKey !== 'valueSummary' && item.headerKey !== ''}
+        />
+      ))}
+    </tr>
+  </thead>
+);
+
+export default ColumnHeaders;

src/Analysis/DataDictionary/ColumnHeaders/Header.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {
+  render, fireEvent, screen, cleanup,
+} from '@testing-library/react';
+import { ISortConfig } from '../Interfaces/Interfaces';
+import Header from './Header'; // adjust the import path if necessary
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Header component', () => {
+  afterEach(cleanup);
+  const defaultProps: any = {
+    handleSort: jest.fn(),
+    headerJSX: <div data-testid='header'>Test Header Text</div>,
+    headerKey: 'key1',
+    sortConfig: { key: 'key1', sortKey: '', direction: '' },
+    sortable: true,
+  };
+
+  it('renders the Header component correctly when sortable is true and there is no sort config', () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} />
+          </tr>
+        </thead>
+      </table>,
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+  });
+
+  it(`renders the Header component correctly when sortable is true and
+  there is a sort config with ascending direction`, () => {
+    const sortConfig: ISortConfig = {
+      sortKey: 'key1',
+      direction: 'ascending',
+    };
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} sortConfig={sortConfig} />
+          </tr>
+        </thead>
+      </table>,
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+    const caretUpArrows = screen.getAllByRole('presentation', {
+      name: /caret-up/i,
+    });
+
+    let activeCaretUp = false;
+    caretUpArrows.forEach((caretUpArrow) => {
+      if (caretUpArrow.className.includes('active')) activeCaretUp = true;
+    });
+    expect(activeCaretUp).toBe(true);
+  });
+
+  it(`renders the Header component correctly when sortable is true and
+  there is a sort config with descending direction`, () => {
+    const sortConfig: ISortConfig = {
+      sortKey: 'key1',
+      direction: 'descending',
+    };
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} sortConfig={sortConfig} />
+          </tr>
+        </thead>
+      </table>,
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+    const caretDownArrows = screen.getAllByRole('presentation', {
+      name: /caret-down/i,
+    });
+
+    let activeCaretDown = false;
+    caretDownArrows.forEach((caretDownArrow) => {
+      if (caretDownArrow.className.includes('active')) activeCaretDown = true;
+    });
+    expect(activeCaretDown).toBe(true);
+  });
+
+  it('calls handleSort function when header is clicked', () => {
+    const handleSort = jest.fn();
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} handleSort={handleSort} />
+          </tr>
+        </thead>
+      </table>,
+    );
+    fireEvent.click(screen.getAllByText('Test Header Text')[0]);
+    expect(handleSort).toHaveBeenCalledTimes(1);
+    expect(handleSort).toHaveBeenCalledWith('key1');
+  });
+});

src/Analysis/DataDictionary/ColumnHeaders/Header.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { ISortConfig } from '../Interfaces/Interfaces';
+import CaretUp from '../Icons/CaretUp';
+import CaretDown from '../Icons/CaretDown';
+
+interface IHeaderProps {
+  handleSort: Function;
+  headerJSX: JSX.IntrinsicElements;
+  headerKey: string;
+  sortConfig: ISortConfig;
+  sortable: Boolean;
+}
+
+const Header = ({
+  handleSort,
+  headerJSX,
+  headerKey,
+  sortConfig,
+  sortable,
+}: IHeaderProps) => {
+  const getSortDirectionForCurrentColumn = () => {
+    if (sortConfig.sortKey === headerKey) {
+      return sortConfig.direction;
+    }
+    return null;
+  };
+
+  if (!sortable) {
+    return (
+      <th className='not-sortable' key={headerKey}>
+        {headerJSX}
+      </th>
+    );
+  }
+  return (
+    <th
+      data-testid='header'
+      key={headerKey}
+      onClick={() => handleSort(headerKey)}
+    >
+      <div className='table-column-sorters'>
+        <span className='ant-table-column-title'>{headerJSX}</span>
+        <span className='table-column-sorter-inner'>
+          <span
+            role='presentation'
+            aria-label='caret-up'
+            className={`table-column-sorter-up ${
+              getSortDirectionForCurrentColumn() === 'ascending' && 'active'
+            }`}
+          >
+            <CaretUp />
+          </span>
+          <span
+            role='presentation'
+            aria-label='caret-down'
+            className={`table-column-sorter-down ${
+              getSortDirectionForCurrentColumn() === 'descending' && 'active'
+            }`}
+          >
+            <CaretDown />
+          </span>
+        </span>
+      </div>
+    </th>
+  );
+};
+
+export default Header;