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/AnalysisApp.jsx

@@ -10,7 +10,7 @@ import BackLink from '../components/BackLink';
 import HIVCohortFilter from '../HIVCohortFilter/HIVCohortFilter';
 import { analysisApps } from '../localconf';
 import sessionMonitor from '../SessionMonitor';
-import DataDictionaryContainer from './DataDictionary/DataDictionaryContainer';
+import AtlasDataDictionaryContainer from './AtlasDataDictionary/AtlasDataDictionaryContainer';
 import GWASContainer from './GWASApp/GWASContainer';
 import GWASResultsContainer from './GWASResults/GWASResultsContainer';
 import CheckForTeamProjectApplication from './SharedUtils/TeamProject/Utils/CheckForTeamProjectApplication';
@@ -134,12 +134,13 @@ class AnalysisApp extends React.Component {
           <GWASResultsContainer />
         </div>
       );
-    case 'DataDictionary':
+    case 'AtlasDataDictionary': {
       return (
         <div className='analysis-app_flex_row'>
-          <DataDictionaryContainer />
+          <AtlasDataDictionaryContainer />
         </div>
       );
+    }
     case 'GWASUIApp': {
       return (
         <TourProvider

src/Analysis/AtlasDataDictionary/AtlasDataDictionary.css

@@ -0,0 +1,208 @@
+.atlas-data-dictionary-container {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  height: auto;
+  overflow-y: hidden;
+}
+
+.atlas-data-dictionary-container .no-data-found {
+  text-align: center;
+}
+
+.atlas-data-dictionary-container table tbody tr:nth-child(4n + 3) {
+  background-color: #fafafb;
+}
+
+.atlas-data-dictionary-container table thead.search-bar {
+  background: #cfdbe6;
+}
+
+/* Column and Entries Headers */
+.atlas-data-dictionary-container table thead.column-headers {
+  background: #e9eef2;
+}
+
+.atlas-data-dictionary-container table thead.column-headers th {
+  line-height: 1.2;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s;
+}
+
+.atlas-data-dictionary-container table caption.entries-header th {
+  cursor: default;
+  font-weight: normal;
+  font-size: 12px;
+}
+
+.atlas-data-dictionary-container .column-header th:hover {
+  background-color: #f5f5f5;
+}
+
+.atlas-data-dictionary-container table caption.entries-header {
+  background-color: #cfdbe6;
+  color: black;
+  padding: 8px 0 7px 10px;
+  width: 100%;
+  font-size: 12px;
+  font-family: inherit;
+  user-select: inherit;
+}
+
+.atlas-data-dictionary-container table caption.entries-header th:hover {
+  background-color: #cfdbe6;
+}
+
+.atlas-data-dictionary-container .table-column-sorters {
+  display: flex;
+  flex: auto;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.atlas-data-dictionary-container th.not-sortable:hover {
+  background-color: inherit;
+  cursor: inherit;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-inner {
+  padding-left: 10px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-inner span {
+  font-size: 11px;
+  line-height: 0;
+  display: inline-block;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-down {
+  margin-top: 4px;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-down svg path,
+.atlas-data-dictionary-container .table-column-sorter-up svg path {
+  fill: #ccc;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-down.active svg path,
+.atlas-data-dictionary-container .table-column-sorter-up.active svg path {
+  fill: #1890ff;
+}
+
+/* Expandable rows */
+.atlas-data-dictionary-container tr.expandable > td:first-child {
+  padding: 0;
+}
+
+.atlas-data-dictionary-container tr td div.expandable {
+  max-height: 0;
+  overflow: hidden;
+  height: 0;
+  transition: height 0.3s, max-height 0.3s;
+}
+
+.atlas-data-dictionary-container tr td div.expandable.expanded {
+  max-height: 321px;
+  height: 321px;
+  background: #e2e2e3;
+}
+
+.atlas-data-dictionary-container .expanded-container {
+  background: #fff;
+  height: 290px;
+  padding: 16px;
+  margin: 16px;
+  overflow-y: auto;
+}
+
+.atlas-data-dictionary-container .chart-details-wrapper {
+  background: #fff;
+}
+
+.atlas-data-dictionary-container
+.chart-details-wrapper.expanded-container.search-highlight {
+  background: #fff;
+  border: 2px solid #ef8523;
+}
+
+.atlas-data-dictionary-container .td-container {
+  width: 80%;
+  word-wrap: break-word;
+}
+
+.atlas-data-dictionary-container .search-highlight,
+table > tbody > tr > td.search-highlight:last-of-type {
+  background: #fcefe4;
+  background: linear-gradient(
+    to right,
+    #ef8523,
+    #ef8523 2px,
+    #fcefe4 2px,
+    #fcefe4 80%,
+    transparent 80%,
+    transparent
+  );
+}
+
+.atlas-data-dictionary-container .search-highlight,
+table > tbody > tr > td.preview-chart {
+  min-width: 145px;
+}
+
+/* Search Bar */
+.atlas-data-dictionary-container .search-bar {
+  background: #cfdbe6;
+}
+
+.atlas-data-dictionary-container .search-bar-container {
+  width: 425px;
+  padding: 6px 0 6px 0;
+}
+
+.atlas-data-dictionary-container .search-bar-input-control {
+  display: block;
+  cursor: pointer;
+  font-size: 15px;
+  width: 15px;
+  height: 15px;
+  color: white;
+  border-radius: 7px;
+  border: none;
+  background: #adb5bd;
+  line-height: 0;
+  text-align: center;
+  opacity: 70%;
+  padding-bottom: 2px;
+}
+
+/* Pagination */
+.atlas-data-dictionary-container .pagination-wrapper button {
+  width: unset;
+  transform: scale(0.9);
+  padding: 0;
+}
+
+.atlas-data-dictionary-container .pagination-container {
+  width: 450px;
+  margin-left: auto;
+}
+
+.atlas-data-dictionary-container .pagination-container div {
+  float: right;
+  color: #333333;
+  font-size: 12px;
+}
+
+.atlas-data-dictionary-container .entries-quantity-select select {
+  margin: 0 8px 0 5px;
+  background-color: #fff;
+  border: none;
+  outline: none;
+  scroll-behavior: smooth;
+  width: 44px;
+  text-align: center;
+}

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import AtlasDataDictionaryContainer from './AtlasDataDictionaryContainer';
+
+export default {
+  title: 'Tests2/AtlasDataDictionary/Components/AtlasDataDictionaryContainer',
+  component: 'AtlasDataDictionaryContainer',
+};
+
+const MockTemplate = () => (
+  <React.Fragment>
+    <AtlasDataDictionaryContainer />
+  </React.Fragment>
+);
+
+export const MockedSuccess = MockTemplate.bind({});

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import AtlasDataDictionaryContainer from './AtlasDataDictionaryContainer';
+
+const atlasDataDictionaryUITestIds = [
+  'atlas-data-dictionary-container',
+  'search-bar',
+  'column-headers',
+  'entries-header',
+  'pagination-controls',
+];
+
+describe('AtlasDataDictionaryContainer', () => {
+  it('renders the AtlasDataDictionaryContainer component and associated UI elements correctly', () => {
+    render(<AtlasDataDictionaryContainer />);
+    atlasDataDictionaryUITestIds.forEach((testID) => {
+      expect(screen.getByTestId(testID)).toBeInTheDocument();
+    });
+  });
+});

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryContainer.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Table } from '@mantine/core';
+import TableData from './TestData/TableData';
+import ColumnHeaders from './ColumnHeaders/ColumnHeaders';
+import EntriesHeader from './EntriesHeader/EntriesHeader';
+import SearchBar from './SearchBar/SearchBar';
+import TableRow from './TableRow/TableRow';
+import PaginationControls from './PaginationControls/PaginationControls';
+import { ISortConfig } from './Interfaces/Interfaces';
+import PreprocessTableData from './Utils/PreprocessTableData';
+import './AtlasDataDictionary.css';
+
+const AtlasDataDictionaryContainer = () => {
+  const preprocessedTableData = PreprocessTableData(TableData);
+  const [data, setData] = useState(preprocessedTableData);
+  const [searchInputValue, setSearchInputValue] = useState('');
+  const columnsShown = 11;
+  const [sortConfig, setSortConfig] = useState<ISortConfig>({
+    sortKey: null,
+    direction: 'off',
+  });
+
+  /* Pagination */
+  const [entriesShown, setEntriesShown] = useState(10);
+  const [activePage, setActivePage] = useState(1);
+  const paginatedData = data.slice(
+    entriesShown * activePage - entriesShown,
+    entriesShown * activePage,
+  );
+
+  const rows = paginatedData.map((rowObject, i) => (
+    <TableRow
+      key={i}
+      rowObject={rowObject}
+      columnsShown={columnsShown}
+      searchInputValue={searchInputValue}
+    />
+  ));
+
+  const handleSort = (sortKey) => {
+    let direction: ISortConfig['direction'] = 'ascending';
+    if (sortConfig.sortKey === sortKey) {
+      if (sortConfig.direction === 'ascending') {
+        direction = 'descending';
+      } else if (sortConfig.direction === 'descending') {
+        direction = 'off';
+      } else if (sortConfig.direction === 'off') {
+        direction = 'ascending';
+      }
+    }
+    setSortConfig({ sortKey, direction });
+
+    const sortedData = [...data].sort((a, b) => {
+      if (direction === 'ascending') {
+        return a[sortKey].toString().localeCompare(b[sortKey].toString());
+      }
+      if (direction === 'descending') {
+        return b[sortKey].toString().localeCompare(a[sortKey].toString());
+      }
+      return 0;
+    });
+    // if column is set to off reset to initial sort
+    if (direction === 'off') {
+      setData(preprocessedTableData);
+    } else {
+      // Otherwise set with sortedData
+      setData(sortedData);
+    }
+  };
+
+  return (
+    <div
+      className='atlas-data-dictionary-container'
+      data-testid='atlas-data-dictionary-container'
+    >
+      <Table>
+        <SearchBar
+          columnsShown={columnsShown}
+          TableData={preprocessedTableData}
+          setData={setData}
+          searchInputValue={searchInputValue}
+          setSearchInputValue={setSearchInputValue}
+        />
+        <ColumnHeaders handleSort={handleSort} sortConfig={sortConfig} />
+        <tbody>
+          {rows}
+          {!data.length && (
+            <tr className='no-data-found'>
+              <td colSpan={columnsShown}>
+                <h2>No Data Found</h2>
+              </td>
+            </tr>
+          )}
+        </tbody>
+        <EntriesHeader
+          start={entriesShown * activePage - entriesShown + 1}
+          stop={entriesShown * activePage}
+          total={data.length}
+          colspan={columnsShown}
+        />
+      </Table>
+      <PaginationControls
+        entriesShown={entriesShown}
+        setEntriesShown={setEntriesShown}
+        activePage={activePage}
+        setActivePage={setActivePage}
+        totalEntriesAvailable={data.length}
+      />
+    </div>
+  );
+};
+
+export default AtlasDataDictionaryContainer;