(VADC-293): Refactor use of inline SVG to use SVG utils for Chart Icons in GWAS

src/Analysis/AtlasDataDictionary/AtlasDataDictionary.css

@@ -103,14 +103,26 @@
   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,
+.atlas-data-dictionary-container .table-column-sorter-up {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.atlas-data-dictionary-container .table-column-sorter-down {
+  border-top: 5px solid #ccc;
+}
+.atlas-data-dictionary-container .table-column-sorter-down.active {
+  border-top-color: #1890ff;
 }
 
-.atlas-data-dictionary-container .table-column-sorter-down.active svg path,
-.atlas-data-dictionary-container .table-column-sorter-up.active svg path {
-  fill: #1890ff;
+.atlas-data-dictionary-container .table-column-sorter-up {
+  border-bottom: 5px solid #ccc;
+}
+.atlas-data-dictionary-container .table-column-sorter-up.active {
+  border-bottom-color: #1890ff;
 }
 
 /* Expandable rows */
@@ -161,6 +173,22 @@
   background: none;
 }
 
+.arrow-icon {
+  display: block;
+  width: 9px;
+  height: 9px;
+  margin: 5px;
+  border-top: 2px solid #2e77b8;
+  border-left: 2px solid #2e77b8;
+}
+
+.arrow-icon-right {
+  transform: rotate(135deg);
+}
+.arrow-icon-down {
+  transform: rotate(225deg);
+}
+
 .atlas-data-dictionary-container .search-highlight,
 table > tbody > tr > td.search-highlight:last-of-type {
   background: #fcefe4;

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryTable/Components/ColumnHeaders/Header.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { ISortConfig } from '../../Interfaces/Interfaces';
-import CaretUp from '../Icons/CaretUp';
-import CaretDown from '../Icons/CaretDown';
 
 interface IHeaderProps {
   handleSort: Function;
@@ -47,18 +45,14 @@ const Header = ({
             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>

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryTable/Components/ManageColumns/ManageColumns.tsx

@@ -8,12 +8,11 @@ import {
   Grid,
   Space,
 } from '@mantine/core';
-import ManageColumnsIcon from '../Icons/ManageColumnsIcon';
-import RestoreIcon from '../Icons/RestoreIcon';
-import HolderIcon from '../Icons/HolderIcon';
 import { IColumnManagementData } from '../../Interfaces/Interfaces';
 import './ManageColumns.css';
 import ColumnsItems from '../../Utils/ColumnItems';
+import IconComponent from '../../../../../components/Icon';
+import dictIcons from '../../../../../img/icons/index';
 
 interface IManageColumns {
   handleTableChange: Function;
@@ -65,7 +64,7 @@ const ManageColumns = ({
       <Popover opened={opened} onChange={setOpened}>
         <Popover.Target>
           <Button
-            leftIcon={<ManageColumnsIcon />}
+            leftIcon={<IconComponent iconName='gwas-manageColumnsIcon' dictIcons={dictIcons} height='1em' />}
             onClick={() => setOpened(!opened)}
             variant='white'
             size='compact-md'
@@ -84,7 +83,7 @@ const ManageColumns = ({
           >
             <Grid align='flex-start'>
               <Grid.Col span={iconSpanSize}>
-                <RestoreIcon />
+                <IconComponent iconName='gwas-restoreIcon' dictIcons={dictIcons} height='1em' />
               </Grid.Col>
               <Grid.Col span={columnManagementResetButtonSpanSize} className={'column-label'}>
                 Restore Defaults
@@ -104,7 +103,7 @@ const ManageColumns = ({
             >
               <Grid align='flex-start'>
                 <Grid.Col span={iconSpanSize}>
-                  <HolderIcon />
+                  <IconComponent iconName='gwas-holderIcon' dictIcons={dictIcons} height='1em' />
                 </Grid.Col>
                 <Grid.Col className={'column-label'} span={columnLabelSpanSize}>
                   {formatJSX(item.jsx)}

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryTable/Components/SearchBar/SearchBar.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import { Input } from '@mantine/core';
 import { debounce } from 'lodash';
-import SearchIcon from '../Icons/SearchIcon';
 import { IColumnManagementData, IRowData } from '../../Interfaces/Interfaces';
 import SearchBarMessage from './SearchBarMessage/SearchBarMessage';
 import filterTableData from './filterTableData';
+import IconComponent from '../../../../../components/Icon';
+import dictIcons from '../../../../../img/icons/index';
 
 interface ISearchBarProps {
   columnsShown: number;
@@ -62,7 +63,7 @@ const SearchBar = ({
                     x
                       </button>
                     ) : (
-                      <SearchIcon />
+                      <IconComponent iconName='search' dictIcons={dictIcons} height='1em' />
                     )
                   }
                   placeholder='Search'

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryTable/Components/SearchBar/SearchBarMessage/SearchBarMessage.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@mantine/core';
 import React from 'react';
-import EyeIcon from '../../Icons/EyeIcon';
-import InfoIcon from '../../Icons/InfoIcon';
+import IconComponent from '../../../../../../components/Icon';
+import dictIcons from '../../../../../../img/icons/index';
 import showSearchBarMessage from './showSearchBarMessage';
 import { IColumnManagementData, IRowData } from '../../../Interfaces/Interfaces';
 
@@ -18,10 +18,10 @@ const SearchBarMessage = ({
   if (showSearchBarMessage(searchTerm, paginatedData, columnManagementData)) {
     return (
       <div className='search-bar-message'>
-        <span><InfoIcon /></span>
+        <span><IconComponent iconName='info' dictIcons={dictIcons} height='1em' /></span>
             Matches found in hidden columns.
         <Button
-          leftIcon={<EyeIcon />}
+          leftIcon={<IconComponent iconName='gwas-eyeIcon' dictIcons={dictIcons} height='1em' />}
           data-testid='show-all-button'
           variant='outline'
           onClick={() => columnManagementReset()}

src/Analysis/AtlasDataDictionary/AtlasDataDictionaryTable/Components/TableRow/TableRow.tsx

@@ -5,8 +5,6 @@ import {
   IRowData,
   IColumnManagementData,
 } from '../../Interfaces/Interfaces';
-import ExpandIcon from '../Icons/ExpandIcon';
-import CollapseIcon from '../Icons/CollapseIcon';
 import {
   checkIfCellContainsSearchTerm,
   checkIfHiddenCellsContainSearchTerm,
@@ -63,8 +61,9 @@ const TableRow = ({
               size='xs'
               compact
               onClick={() => handleTableChange('openDropdown', rowObject.rowID)}
+              aria-label='expand'
             >
-              <ExpandIcon />
+              <span className='arrow-icon arrow-icon-right'     data-testid='expand-icon' />
             </Button>
           )}
           {currentDropdownShouldBeOpen && (
@@ -73,8 +72,9 @@ const TableRow = ({
               size='xs'
               compact
               onClick={() => handleTableChange('closeDropdown', rowObject.rowID)}
+              aria-label='collapse'
             >
-              <CollapseIcon />
+              <span className='arrow-icon arrow-icon-down' />
             </Button>
           )}
         </td>

src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTableRow.jsx

@@ -4,8 +4,8 @@ import { useQuery } from 'react-query';
 import { Spin } from 'antd';
 import { fetchConceptStatsByHareSubset } from '../../../Utils/cohortMiddlewareApi';
 import queryConfig from '../../../../SharedUtils/QueryConfig';
-import BarChart from '../ChartIcons/BarChart';
-import EulerDiagram from '../ChartIcons/EulerDiagram';
+import IconComponent from '../../../../../components/Icon';
+import dictIcons from '../../../../../img/icons/index';
 import { useSourceContext } from '../../../Utils/Source';
 
 const AttritionTableRow = ({
@@ -87,10 +87,10 @@ const AttritionTableRow = ({
   const determineChartIcon = () => {
     if (rowType === 'Covariate' || rowType === 'Outcome') {
       if (rowObject.variable_type === 'concept') {
-        return <BarChart />;
+        return <IconComponent iconName='gwas-barChart' dictIcons={dictIcons} />;
       }
       if (rowObject.variable_type === 'custom_dichotomous') {
-        return <EulerDiagram />;
+        return <IconComponent iconName='gwas-eulerDiagram' dictIcons={dictIcons} />;
       }
       throw new Error(
         `Invalid Row Type: ${rowType} and rowObject.variable_type ${JSON.stringify(